diff options
Diffstat (limited to 'juick-www/src/main/static')
-rw-r--r-- | juick-www/src/main/static/style.css | 223 |
1 files changed, 129 insertions, 94 deletions
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css index 0958f5e50..672db5c6e 100644 --- a/juick-www/src/main/static/style.css +++ b/juick-www/src/main/static/style.css @@ -1,8 +1,21 @@ -html,body,div,h1,h2,ul,li,p,form,input,textarea,pre { +html, +body, +div, +h1, +h2, +ul, +li, +p, +form, +input, +textarea, +pre { margin: 0; padding: 0; } -html,input,textarea { +html, +input, +textarea { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 12pt; -webkit-font-smoothing: subpixel-antialiased; @@ -15,7 +28,8 @@ body { margin: 0 auto; width: 1000px; } -h1,h2 { +h1, +h2 { font-weight: normal; } ul { @@ -25,7 +39,8 @@ a { color: #069; text-decoration: none; } -img,hr { +img, +hr { border: none; } hr { @@ -60,10 +75,10 @@ pre::-moz-selection { clear: both; position: relative; } -body>header { +body > header { width: 1000px; } -body>header a { +body > header a { border-bottom: 1px dotted #666; color: #222; font-size: 13pt; @@ -84,10 +99,10 @@ body>header a { white-space: nowrap; width: 110px; } -@media screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) { +@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #logo a { - background: url("logo@2x.png") no-repeat; - background-size: cover; + background: url("logo@2x.png") no-repeat; + background-size: cover; } } #global { @@ -124,22 +139,24 @@ body>header a { right: 8px; top: 0; } -body>header nav li:after { +body > header nav li:after { color: #AAA; content: "/"; display: inline-block; margin-left: 12px; } -body>header nav li:last-child:after { +body > header nav li:last-child:after { display: none; } -body>header p { +body > header p { color: #222; font-size: 13pt; margin: 12px 0; text-align: center; } -#content>p, #content>h1, #content>h2 { +#content > p, +#content > h1, +#content > h2 { margin: 1em 0; } #newmessage { @@ -161,7 +178,7 @@ body>header p { margin: 5px 0; padding: 2px 4px; } -#newmessage>div { +#newmessage > div { display: none; } #newmessage .img { @@ -213,21 +230,21 @@ article .ir a { article .ir img { max-width: 100%; } -article>nav.l { +article > nav.l { display: inline-block; font-size: 10pt; } -article>nav.l a { +article > nav.l a { border-bottom: 1px dotted #AAA; color: #888; margin-right: 15px; } -article>nav.s { +article > nav.s { display: block; float: right; text-align: right; } -article>nav.s a { +article > nav.s a { color: #222; font-weight: bold; vertical-align: middle; @@ -264,7 +281,8 @@ article .tags { .msg-tags { margin-top: 5px; } -article .tags>a, .msg-tags>a { +article .tags > a, +.msg-tags > a { border: 1px dotted #ccc; color: #888; display: inline-block; @@ -312,24 +330,26 @@ article .tags>a, .msg-tags>a { margin-top: 2.4px; width: 16px; } -.msg-menu>a { +.msg-menu > a { background: url("menu.png") no-repeat; display: block; height: 16px; width: 16px; } -.msg-ts, article .t { +.msg-ts, +article .t { float: right; font-size: small; vertical-align: top; } -.msg-ts, .msg-ts>a { +.msg-ts, +.msg-ts > a { color: #999; } .msg-place { font-size: small; } -.msg-place>a { +.msg-place > a { color: #999; } .msg-txt { @@ -407,7 +427,8 @@ article .tags>a, .msg-tags>a { .reply-new .msg-cont { border-right: 5px solid #0C0; } -q:before, q:after { +q:before, +q:after { content: ""; } q { @@ -422,7 +443,8 @@ q { border-top: 1px solid #CCC; width: 680px; } -.toolbar ul, .toolbar a { +.toolbar ul, +.toolbar a { padding: 5px; } .toolbar li { @@ -436,7 +458,8 @@ q { vertical-align: middle; width: 16px; } -#replies .msg-txt, #private-messages .msg-txt { +#replies .msg-txt, +#private-messages .msg-txt { margin: 0; } .msg-comment { @@ -483,7 +506,7 @@ q { padding: 5px; text-align: center; } -.signup-h1>img { +.signup-h1 > img { margin-right: 10px; vertical-align: middle; } @@ -515,7 +538,9 @@ q { padding-top: 10px; width: 240px; } -#column ul, #column p, #column hr { +#column ul, +#column p, +#column hr { margin: 10px 0; } #column li { @@ -609,7 +634,8 @@ q { padding: 25px; width: 300px; } -#signfb,#signvk { +#signfb, +#signvk { display: block; height: 32px; line-height: 32px; @@ -631,7 +657,8 @@ q { .dialoglogin form { margin-top: 7px; } -.signinput,.signsubmit { +.signinput, +.signsubmit { border: 1px solid #CCC; margin: 3px 0; padding: 3px; @@ -774,11 +801,11 @@ fieldset { width: 100%; } .embedContainer iframe { - overflow:hidden; + overflow: hidden; resize: vertical; display: block; } -/* end of embeds*/ +/* end of embeds */ /* nsfw */ article.nsfw .embedContainer img, article.nsfw .embedContainer iframe, @@ -789,126 +816,134 @@ article.nsfw .ir img { article.nsfw .embedContainer img:hover, article.nsfw .embedContainer iframe:hover, article.nsfw .ir img:hover { - opacity: 1.0; + 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,body>header,#topwrapper,#content,#footer,.toolbar { - float: none; - margin: 0 auto; - min-width: 310px; - width: auto; - } - body>header { - margin-bottom: 15px; - } - body>header a { - font-size: 12pt; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + } + body, + body > header, + #topwrapper, + #content, + #footer, + .toolbar { + float: none; + margin: 0 auto; + min-width: 310px; + width: auto; + } + body > header { + margin-bottom: 15px; + } + body > header a { + font-size: 12pt; } #logo { - display: none; + display: none; } #global { - margin-left: 10px; + margin-left: 10px; } #global li { - margin-right: 10px; + margin-right: 10px; } #search { - display: inline-block; - float: none; - margin: 10px 10px; + display: inline-block; + float: none; + margin: 10px 10px; } #headdiv { - padding: 0 10px; + padding: 0 10px; } #headdiv li { - margin-right: 10px; + margin-right: 10px; } #actions { - position: relative; - right: auto; + position: relative; + right: auto; } - #newmessage .img, #newmessage .tags { - width: 100%; + #newmessage .img, + #newmessage .tags { + width: 100%; } #column { - float: none; - margin: 0 10px; - padding-top: 0; - width: auto; + float: none; + margin: 0 10px; + padding-top: 0; + width: auto; } article { - margin: 8px; - overflow: auto; + margin: 8px; + overflow: auto; } article p { - margin: 10px 0 8px 0; + margin: 10px 0 8px 0; } - article>nav.l { - display: block; - float: left; - line-height: 15pt; - width: 80%; + article > nav.l { + display: block; + float: left; + line-height: 15pt; + width: 80%; } - article>nav.s { - display: block; + article > nav.s { + display: block; } article textarea { - width: 205px; + width: 205px; } article footer { - float: left; + float: left; } #content textarea { - width: 100%; + width: 100%; } - .msg,.msg-cont { - min-width: 280px; - width: auto; + .msg, + .msg-cont { + min-width: 280px; + width: auto; } - .msg-cont,.ads { - margin: 8px; + .msg-cont, + .ads { + margin: 8px; } .msg-comment textarea { - width: 100%; + width: 100%; } .msg-media { - overflow: auto; + overflow: auto; } .title2 h2 { - font-size: large; + font-size: large; } #footer { - margin: 0 10px; + margin: 0 10px; } #footer div { - float: none; - margin: 10px 0; + float: none; + margin: 10px 0; } } @media screen and (max-width: 480px) { .msg-ts { - float: none; + float: none; } .msg-tags { - margin-top: 10px; + margin-top: 10px; } .msg-txt { - padding-top: 5px; + padding-top: 5px; } .title2 { - font-size: 11pt; + font-size: 11pt; } #content .title2 h2 { - font-size: 11pt; + font-size: 11pt; } .title2-right { - line-height: initial; + line-height: initial; } } |