aboutsummaryrefslogtreecommitdiff
path: root/juick-www/src/main
diff options
context:
space:
mode:
Diffstat (limited to 'juick-www/src/main')
-rw-r--r--juick-www/src/main/static/style.css736
1 files changed, 371 insertions, 365 deletions
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index 1b4dd0e3..4058fba2 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -1,3 +1,5 @@
+/* #region generic */
+
html,
body,
div,
@@ -20,20 +22,6 @@ textarea {
font-size: 12pt;
-webkit-font-smoothing: subpixel-antialiased;
}
-html {
- background: #eaeadf;
- color: #222;
-}
-#wrapper {
- margin: 0 auto;
- width: 1000px;
- margin-top: 50px;
-}
-#header_wrapper {
- margin: 0 auto;
- width: 1000px;
- display: flex;
-}
h1,
h2 {
font-weight: normal;
@@ -72,15 +60,32 @@ pre::-moz-selection {
.u {
text-decoration: underline;
}
+
+/* #endregion */
+
+/* #region overall layout */
+
+html {
+ background: #eaeadf;
+ color: #222;
+}
+#wrapper {
+ margin: 0 auto;
+ width: 1000px;
+ margin-top: 50px;
+}
+#column {
+ float: left;
+ margin-left: 10px;
+ overflow: hidden;
+ padding-top: 10px;
+ width: 240px;
+}
#content {
float: right;
margin: 12px 0 0 0;
width: 728px;
}
-#topwrapper {
- clear: both;
- position: relative;
-}
body > header {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
background: #f2f2ec;
@@ -89,6 +94,53 @@ body > header {
width: 100%;
z-index: 10;
}
+#header_wrapper {
+ margin: 0 auto;
+ width: 1000px;
+ display: flex;
+}
+#footer {
+ clear: both;
+ color: #999;
+ font-size: 10pt;
+ margin: 40px;
+ padding: 10px 0;
+}
+
+@media screen and (max-width: 850px) {
+ body {
+ -moz-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ }
+ body,
+ #wrapper,
+ #topwrapper,
+ #content,
+ #footer {
+ float: none;
+ margin: 0 auto;
+ min-width: 310px;
+ width: auto;
+ }
+ #wrapper {
+ margin-top: 50px;
+ }
+ body > header {
+ margin-bottom: 15px;
+ }
+ #column {
+ float: none;
+ margin: 0 10px;
+ padding-top: 0;
+ width: auto;
+ }
+}
+
+/* #endregion */
+
+/* #region header internals */
+
body > header a {
color: #069;
font-size: 13pt;
@@ -124,19 +176,6 @@ body > header a {
border: 1px solid #DDDDD5;
padding: 4px;
}
-#headdiv {
- border-bottom: 1px solid #D5D5D0;
- padding: 0 20px;
-}
-#headdiv p {
- padding: 12px;
- text-align: center;
-}
-#actions {
- position: absolute;
- right: 8px;
- top: 0;
-}
body > header nav li:after {
color: #AAA;
content: "|";
@@ -146,46 +185,109 @@ body > header nav li:after {
body > header nav li:last-child:after {
display: none;
}
-body > header p {
- color: #222;
- font-size: 13pt;
- margin: 12px 0;
- text-align: center;
+
+@media screen and (max-width: 850px) {
+ body > header a {
+ font-size: 12pt;
+ }
+ #logo {
+ display: none;
+ }
+ #global {
+ margin-left: 10px;
+ }
+ #global li {
+ margin-right: 10px;
+ }
+ #search {
+ display: inline-block;
+ float: none;
+ margin: 10px 10px;
+ }
}
-#content > p,
-#content > h1,
-#content > h2 {
- margin: 1em 0;
+
+/* #endregion */
+
+/* #region left column internals */
+
+.toolbar {
+ border-top: 1px solid #CCC;
}
-#newmessage {
- background: #E5E5E0;
- margin-bottom: 20px;
- padding: 15px;
+
+#column ul,
+#column p,
+#column hr {
+ margin: 10px 0;
}
-#newmessage textarea {
+#column li > a {
+ display: block;
+ height: 100%;
+ padding: 6px;
+}
+#column li > a:hover {
+ background-color: #f2f2ec;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
+ transition: background-color 0.2s ease-in;
+}
+#column .margtop {
+ margin-top: 15px;
+}
+#column p {
+ font-size: 10pt;
+ line-height: 140%;
+}
+#column .tags {
+ text-align: justify;
+}
+#column .inp {
+ background: #F5F5E9;
border: 1px solid #CCC;
- box-sizing: border-box;
- margin: 0 0 5px 0;
- max-height: 6em;
- min-width: 280px;
- padding: 4px;
+ border-radius: 3px;
+ padding: 3px;
+ width: 222px;
+}
+#ctitle {
+ font-size: 14pt;
+}
+#ctitle img {
+ margin-right: 5px;
+ vertical-align: middle;
+ width: 48px;
+}
+#ustats li {
+ font-size: 10pt;
+ margin: 3px 0;
+}
+#column table.iread {
width: 100%;
}
-#newmessage input {
- border: 1px solid #CCC;
- margin: 5px 0;
- padding: 2px 4px;
+#column table.iread td {
+ text-align: center;
}
-#newmessage .img {
- width: 500px;
+#column table.iread img {
+ height: 48px;
+ width: 48px;
}
-#newmessage .tags {
- width: 500px;
+
+/* #endregion */
+
+/* #region main content */
+
+#content > p,
+#content > h1,
+#content > h2 {
+ margin: 1em 0;
}
-#newmessage .subm {
- background: #EEEEE5;
- width: 150px;
+.page {
+ background: #E5E5DD;
+ padding: 5px;
+ text-align: center;
}
+
+/* #endregion */
+
+/* #region article, message internals */
+
article {
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
@@ -193,16 +295,6 @@ article {
margin-bottom: 10px;
padding: 20px;
}
-article aside {
- float: left;
- height: 48px;
- margin-right: 10px;
- width: 48px;
-}
-article aside img {
- height: 48px;
- width: 48px;
-}
article time {
color: #999;
font-size: 10pt;
@@ -213,15 +305,11 @@ article p {
word-wrap: break-word;
overflow-wrap: break-word;
}
-article .i {
- text-align: center;
-}
article .ir {
text-align: center;
}
article .ir a {
- cursor: -moz-zoom-in;
- cursor: -webkit-zoom-in;
+ cursor: zoom-in;
display: block;
}
article .ir img {
@@ -237,16 +325,6 @@ article > nav.l a,
color: #888;
margin-right: 15px;
}
-article > nav.s {
- display: block;
- float: right;
- text-align: right;
-}
-article > nav.s a {
- color: #222;
- font-weight: bold;
- vertical-align: middle;
-}
article .likes {
padding-left: 20px;
}
@@ -291,17 +369,6 @@ article .tags > a,
margin-right: 5px;
padding: 0 10px;
}
-#geomap {
- height: 300px;
- margin-top: 1em;
- overflow: hidden;
- width: 700px;
-}
-.ads {
- background: #FFF;
- margin: 8px 0 16px 58px;
- padding: 13px 10px 5px 10px;
-}
.msgthread {
margin-bottom: 0;
}
@@ -324,8 +391,7 @@ article .tags > a,
padding: 20px;
width: 640px;
}
-.msg-ts,
-article .t {
+.msg-ts {
float: right;
font-size: small;
vertical-align: top;
@@ -334,12 +400,6 @@ article .t {
.msg-ts > a {
color: #999;
}
-.msg-place {
- font-size: small;
-}
-.msg-place > a {
- color: #999;
-}
.msg-txt {
clear: both;
margin: 0 0 12px;
@@ -412,6 +472,85 @@ article .t {
.reply-new .msg-cont {
border-right: 5px solid #0C0;
}
+#replies .msg-txt,
+#private-messages .msg-txt {
+ margin: 0;
+}
+.msg-comment {
+ margin-top: 10px;
+}
+.title2 {
+ background: #DDDDD0;
+ margin: 20px 0;
+ padding: 10px 20px;
+}
+.title2-right {
+ float: right;
+ line-height: 24px;
+}
+#content .title2 h2 {
+ font-size: x-large;
+ margin: 0;
+}
+
+@media screen and (max-width: 850px) {
+ article {
+ margin: 8px;
+ overflow: auto;
+ }
+ article p {
+ margin: 10px 0 8px 0;
+ }
+ article > nav.l,
+ .msg-cont > nav.l {
+ flex-direction: column;
+ }
+ article > nav.l a,
+ .msg-cont > nav.l a {
+ padding: 6px;
+ }
+ .msg,
+ .msg-cont {
+ min-width: 280px;
+ width: auto;
+ }
+ .msg-cont {
+ margin: 8px;
+ }
+ .msg-media {
+ overflow: auto;
+ }
+ .title2 h2 {
+ font-size: large;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .msg-ts {
+ float: none;
+ }
+ .msg-tags {
+ margin-top: 10px;
+ min-height: 1px;
+ }
+ .msg-txt {
+ padding-top: 5px;
+ }
+ .title2 {
+ font-size: 11pt;
+ }
+ #content .title2 h2 {
+ font-size: 11pt;
+ }
+ .title2-right {
+ line-height: initial;
+ }
+}
+
+/* #endregion */
+
+/* #region user-generated texts */
+
q:before,
q:after {
content: "";
@@ -423,22 +562,51 @@ q {
margin: 10px 0 10px 10px;
padding-left: 10px;
}
-.toolbar {
- border-top: 1px solid #CCC;
+
+/* #endregion */
+
+/* #region new message form internals */
+
+#newmessage {
+ background: #E5E5E0;
+ margin-bottom: 20px;
+ padding: 15px;
}
-#replies .msg-txt,
-#private-messages .msg-txt {
- margin: 0;
+#newmessage textarea {
+ border: 1px solid #CCC;
+ box-sizing: border-box;
+ margin: 0 0 5px 0;
+ max-height: 6em;
+ min-width: 280px;
+ padding: 4px;
+ width: 100%;
}
-.msg-comment {
- margin-top: 10px;
+#newmessage input {
+ border: 1px solid #CCC;
+ margin: 5px 0;
+ padding: 2px 4px;
}
-.newmessage {
- border: 1px solid #DDD;
- padding: 2px;
- resize: vertical;
- width: 695px;
+#newmessage .img {
+ width: 500px;
}
+#newmessage .tags {
+ width: 500px;
+}
+#newmessage .subm {
+ background: #EEEEE5;
+ width: 150px;
+}
+@media screen and (max-width: 850px) {
+ #newmessage .img,
+ #newmessage .tags {
+ width: 100%;
+ }
+}
+
+/* #endregion */
+
+/* #region user lists */
+
.users {
margin: 10px 0;
width: 100%;
@@ -456,24 +624,11 @@ q {
vertical-align: middle;
width: 32px;
}
-.title2 {
- background: #DDDDD0;
- margin: 20px 0;
- padding: 10px 20px;
-}
-.title2-right {
- float: right;
- line-height: 24px;
-}
-#content .title2 h2 {
- font-size: x-large;
- margin: 0;
-}
-.page {
- background: #E5E5DD;
- padding: 5px;
- text-align: center;
-}
+
+/* #endregion */
+
+/* #region signup form */
+
.signup-h1 > img {
margin-right: 10px;
vertical-align: middle;
@@ -489,6 +644,11 @@ q {
.signup-hr {
margin: 20px 0;
}
+
+/* #endregion */
+
+/* #region PM */
+
.newpm {
margin: 20px 60px 30px 60px;
}
@@ -499,67 +659,11 @@ q {
.newpm-send input {
width: 100px;
}
-#column {
- float: left;
- margin-left: 10px;
- overflow: hidden;
- padding-top: 10px;
- width: 240px;
-}
-#column ul,
-#column p,
-#column hr {
- margin: 10px 0;
-}
-#column li > a {
- display: block;
- height: 100%;
- padding: 6px;
-}
-#column li > a:hover {
- background-color: #f2f2ec;
- box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
- transition: background-color 0.2s ease-in;
-}
-#column .margtop {
- margin-top: 15px;
-}
-#column p {
- font-size: 10pt;
- line-height: 140%;
-}
-#column .tags {
- text-align: justify;
-}
-#column .inp {
- background: #F5F5E9;
- border: 1px solid #CCC;
- border-radius: 3px;
- padding: 3px;
- width: 222px;
-}
-#ctitle {
- font-size: 14pt;
-}
-#ctitle img {
- margin-right: 5px;
- vertical-align: middle;
- width: 48px;
-}
-#ustats li {
- font-size: 10pt;
- margin: 3px 0;
-}
-#column table.iread {
- width: 100%;
-}
-#column table.iread td {
- text-align: center;
-}
-#column table.iread img {
- height: 48px;
- width: 48px;
-}
+
+/* #endregion */
+
+/* #region popup dialog (lightbox) */
+
#dialogb {
background: #222;
height: 100%;
@@ -678,6 +782,18 @@ q {
background: #EEEEE5;
padding: 20px;
}
+
+@media screen and (max-width: 480px) {
+ .dialog-opened {
+ position: fixed;
+ width: 100%;
+ }
+}
+
+/* #endregion */
+
+/* #region misc */
+
#wsthread {
background: #CCC;
bottom: 20px;
@@ -687,33 +803,6 @@ q {
position: fixed;
right: 20px;
}
-#footer {
- clear: both;
- color: #999;
- font-size: 10pt;
- margin: 40px;
- padding: 10px 0;
-}
-#footer-social {
- float: left;
-}
-#footer-social a {
- border: 0;
- display: inline-block;
- height: 32px;
- margin: 0 15px 0 0;
- overflow: hidden;
- text-indent: 100%;
- white-space: nowrap;
- width: 32px;
-}
-#footer-left {
- margin-left: 286px;
- margin-right: 350px;
-}
-#footer-right {
- float: right;
-}
.sharenew {
color: #FFF;
display: inline-block;
@@ -744,11 +833,62 @@ q {
.icon--ei-comment {
margin-top: -3px;
}
+
+.newmessage { /* textarea on the /post page */
+ border: 1px solid #DDD;
+ padding: 2px;
+ resize: vertical;
+ width: 695px;
+}
+
+/* #endregion */
+
+/* #region footer internals */
+
+#footer-social {
+ float: left;
+}
+#footer-social a {
+ border: 0;
+ display: inline-block;
+ height: 32px;
+ margin: 0 15px 0 0;
+ overflow: hidden;
+ text-indent: 100%;
+ white-space: nowrap;
+ width: 32px;
+}
+#footer-left {
+ margin-left: 286px;
+ margin-right: 350px;
+}
+#footer-right {
+ float: right;
+}
+
+@media screen and (max-width: 850px) {
+ #footer {
+ margin: 0 10px;
+ }
+ #footer div {
+ float: none;
+ margin: 10px 0;
+ }
+}
+
+/* #endregion */
+
+/* #region settings */
+
fieldset {
border: 1px dotted #ccc;
margin-top: 25px;
}
-/* embeds */
+
+/* #endregion */
+
+/* #region embeds */
+
.embedContainer {
display: flex;
flex-wrap: wrap;
@@ -786,8 +926,11 @@ fieldset {
resize: vertical;
display: block;
}
-/* end of embeds */
-/* nsfw */
+
+/* #endregion */
+
+/* #region nsfw */
+
article.nsfw .embedContainer img,
article.nsfw .embedContainer video,
article.nsfw .embedContainer iframe,
@@ -800,142 +943,5 @@ article.nsfw .embedContainer iframe:hover,
article.nsfw .ir img:hover {
opacity: 1;
}
-/* end of nsfw */
-@media screen and (max-width: 850px) {
- body {
- -moz-text-size-adjust: 100%;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- }
- body,
- #wrapper,
- #topwrapper,
- #content,
- #footer,
- .toolbar {
- float: none;
- margin: 0 auto;
- min-width: 310px;
- width: auto;
- }
- #wrapper {
- margin-top: 50px;
- }
- body > header {
- margin-bottom: 15px;
- }
- body > header a {
- font-size: 12pt;
- }
- #logo {
- display: none;
- }
- #global {
- margin-left: 10px;
- }
- #global li {
- margin-right: 10px;
- }
- #search {
- display: inline-block;
- float: none;
- margin: 10px 10px;
- }
- #headdiv {
- padding: 0 10px;
- }
- #headdiv li {
- margin-right: 10px;
- }
- #actions {
- position: relative;
- right: auto;
- }
- #newmessage .img,
- #newmessage .tags {
- width: 100%;
- }
- #column {
- float: none;
- margin: 0 10px;
- padding-top: 0;
- width: auto;
- }
- article {
- margin: 8px;
- overflow: auto;
- }
- article p {
- margin: 10px 0 8px 0;
- }
- article > nav.l,
- .msg-cont > nav.l {
- flex-direction: column;
- }
- article > nav.l a,
- .msg-cont > nav.l a {
- padding: 6px;
- }
- article > nav.s {
- display: block;
- }
- article textarea {
- width: 205px;
- }
- article footer {
- float: left;
- }
- #content textarea {
- width: 100%;
- }
- .msg,
- .msg-cont {
- min-width: 280px;
- width: auto;
- }
- .msg-cont,
- .ads {
- margin: 8px;
- }
- .msg-comment textarea {
- width: 100%;
- }
- .msg-media {
- overflow: auto;
- }
- .title2 h2 {
- font-size: large;
- }
- #footer {
- margin: 0 10px;
- }
- #footer div {
- float: none;
- margin: 10px 0;
- }
-}
-@media screen and (max-width: 480px) {
- .msg-ts {
- float: none;
- }
- .msg-tags {
- margin-top: 10px;
- min-height: 1px;
- }
- .msg-txt {
- padding-top: 5px;
- }
- .title2 {
- font-size: 11pt;
- }
- #content .title2 h2 {
- font-size: 11pt;
- }
- .title2-right {
- line-height: initial;
- }
- .dialog-opened {
- position: fixed;
- width: 100%;
- }
-}
+
+/* #endregion */
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-04 16:11:40 +0000