diff options
author | 2017-10-23 22:47:06 +0300 | |
---|---|---|
committer | 2017-10-23 23:44:13 +0300 | |
commit | 84013142b50dfcf707d91b53a18aa9f1875bba3c (patch) | |
tree | 104ac654e458181f3ab2dd274896d7318168e94b /juick-www/src/main/static/style.css | |
parent | 059488ee1a65e4675cb4146802d33f9e4ab1118a (diff) |
www: css refactoring
Organized rules into regions.
Media queries kept within regions to keep relevant code close.
Removed some outdated rules.
Diffstat (limited to 'juick-www/src/main/static/style.css')
-rw-r--r-- | juick-www/src/main/static/style.css | 736 |
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 */ |