From c35693a6cc903107346dbdafb29a4026048d3e2e Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Tue, 28 Apr 2020 14:30:20 +0300 Subject: CSS Grid -> position: fixed --- src/main/assets/style.css | 145 +++++++++++++++++----- src/main/resources/templates/layouts/default.html | 14 +-- 2 files changed, 117 insertions(+), 42 deletions(-) (limited to 'src/main') diff --git a/src/main/assets/style.css b/src/main/assets/style.css index 1224df5e..b182bdbd 100644 --- a/src/main/assets/style.css +++ b/src/main/assets/style.css @@ -59,7 +59,6 @@ body { word-wrap: break-word; color: var(--text-color); line-height: 1.4; - overflow: hidden; } button, @@ -81,9 +80,11 @@ h1, h2 { font-weight: normal; } + ul { list-style-type: none; } + a { color: var(--link-color); text-decoration: none; @@ -92,11 +93,13 @@ img, hr { border: none; } + hr { background: var(--border-color); height: 1px; margin: 10px 0; } + pre { background: #1e2028; color: #41b645; @@ -104,14 +107,17 @@ pre { padding: 6px 20px; white-space: pre; } + pre::selection { background: #41b645; color: #1e2028; } + pre::-moz-selection { background: #41b645; color: #1e2028; } + .u { text-decoration: underline; } @@ -123,60 +129,59 @@ pre::-moz-selection { #app { height: 100%; width: 100%; - overflow: hidden; -} -#wrapper { - display: grid; - grid-template-areas: "content" "footer"; - grid-template-columns: 100%; - grid-template-rows: 1fr auto; - height: 100%; - width: 100%; - overflow: hidden; } + #column { - grid-area: footer; + position: fixed; + left: 0; + bottom: 0; + height: 60px; + width: 100%; + z-index: 10; + background: var(--text-background-color); } + #content { - grid-area: content; - margin-top: 0; - overflow: auto; - -webkit-overflow-scrolling: touch; -} -.content--top { - margin-top: 64px !important; + margin-top: 66px; + margin-bottom: 66px; } + #minimal_content { margin: 0 auto; min-width: 310px; width: auto; } + .desktop { display: none; } + *::selection { background: var(--link-color); color: var(--main-background-color); } + #header { background: var(--text-background-color); border-bottom: 1px solid var(--border-color); transition: transform 0.2s; z-index: 10; - overflow-x: hidden; position: fixed; width: 100%; top: 0; } + #header_wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } + .header--hidden { transform: translateY(-100%); } + #footer { color: #999; font-size: 10pt; @@ -193,6 +198,7 @@ pre::-moz-selection { height: 36px; width: 110px; } + #logo a { background: url("logo@2x.png") no-repeat !important; background-size: cover !important; @@ -204,30 +210,36 @@ pre::-moz-selection { white-space: nowrap; width: 110px; } + #global { display: flex; white-space: nowrap; } + #global a { color: var(--dimmed-link-color); padding: 14px; border-bottom: 2px solid transparent; } + #ctitle { display: flex; flex: 1; white-space: nowrap; overflow: hidden; } + #ctitle a { padding: 2px 20px; border-bottom: 2px solid transparent; text-overflow: ellipsis; overflow: hidden; } + .l a { border-bottom: 2px solid transparent; } + #header_wrapper a.active { background: var(background-color); border-bottom: 2px solid #ff339a; @@ -239,6 +251,7 @@ pre::-moz-selection { border-bottom: 2px solid #ff339a; cursor: pointer; } + #search input { background: var(--main-background-color); border: 1px solid var(--border-color); @@ -280,6 +293,7 @@ pre::-moz-selection { #column hr { margin: 10px 0; } + #column .margtop { margin-top: 15px; } @@ -291,6 +305,7 @@ pre::-moz-selection { padding: 6px; text-align: justify; } + #column .inp { background: var(--main-background-color); border: 1px solid var(--border-color); @@ -298,6 +313,7 @@ pre::-moz-selection { padding: 4px; width: 222px; } + #column .tags h4 { color: #88958d; display: block; @@ -311,16 +327,20 @@ pre::-moz-selection { max-width: 48px; max-height: 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; @@ -337,6 +357,7 @@ pre::-moz-selection { #minimal_content > h2 { margin: 1em 0; } + .page { background: #eee; padding: 6px; @@ -359,17 +380,21 @@ article { padding: 20px; overflow: auto; } + article time { color: #88958d; font-size: 10pt; } + article .ir { text-align: center; } + article .ir a { cursor: zoom-in; display: block; } + article .ir img { max-width: 100%; } @@ -386,15 +411,19 @@ article > nav.l a, color: #88958d; margin-right: 15px; } + article .likes { padding-left: 20px; } + article .replies { margin-left: 18px; } + article .tags { margin-top: 3px; } + .msg-tags { margin-top: 12px; min-height: 1px; @@ -407,6 +436,7 @@ article .tags > a::before, .msg-tags > a::before { content: '#'; } + .badge { background: #eee; border: 1px solid #eee; @@ -417,23 +447,28 @@ article .tags > a::before, margin-right: 5px; padding: 0 10px; } + .l .msg-button { padding-top: 12px; } + .msgthread { margin-bottom: 0; } + .msg-avatar { float: left; max-height: 48px; margin-right: 10px; max-width: 48px; } + .msg-avatar img { max-height: 48px; vertical-align: top; max-width: 48px; } + .msg-cont { background: var(--text-background-color); border: 1px solid var(--border-color); @@ -441,9 +476,11 @@ article .tags > a::before, margin-bottom: 12px; padding: 20px; } + .reply-new .msg-cont { border-right: 5px solid #0C0; } + .msg-ts { font-size: small; vertical-align: top; @@ -452,6 +489,7 @@ article .tags > a::before, .msg-ts > a { color: #999; } + .msg-txt { clear: both; margin: 0 0 12px; @@ -459,15 +497,18 @@ article .tags > a::before, word-wrap: break-word; overflow-wrap: break-word; } + .msg-media { text-align: center; overflow: auto; } + .msg-links { color: #999; font-size: small; margin: 5px 0 0 0; } + .msg-comments { color: #AAA; font-size: small; @@ -475,20 +516,24 @@ article .tags > a::before, overflow: hidden; text-indent: 10px; } + .ta-wrapper { border: 1px solid #DDD; display: flex; flex-grow: 1; } + .msg-comment { display: flex; width: 100%; margin-top: 10px; flex-direction: column; } + .msg-comment-hidden { display: none; } + .msg-comment textarea { border: 0; flex-grow: 1; @@ -497,12 +542,15 @@ article .tags > a::before, resize: vertical; vertical-align: top; } + .attach-photo { cursor: pointer; } + .attach-photo-active { color: green; } + .msg-recomms { color: #AAA; font-size: small; @@ -514,15 +562,18 @@ article .tags > a::before, #private-messages .msg-txt { margin: 0; } + .title2 { background: var(--text-background-color); margin: 20px 0; padding: 10px 20px; } + .title2-right { float: right; line-height: 24px; } + #content .title2 h2 { font-size: x-large; margin: 0; @@ -554,6 +605,7 @@ blockquote { margin-bottom: 20px; padding: 15px; } + #newmessage textarea { border: 1px solid #CCC; box-sizing: border-box; @@ -564,17 +616,21 @@ blockquote { padding: 4px; width: 100%; } + #newmessage input { border: 1px solid #CCC; margin: 5px 0; padding: 2px 4px; } + #newmessage .img { width: 500px; } + #newmessage .tags { width: 500px; } + #newmessage .subm { background: #EEEEE5; width: 150px; @@ -616,14 +672,17 @@ blockquote { margin-right: 10px; vertical-align: middle; } + .signup-h1 { font-size: x-large; margin: 20px 0 10px 0; } + .signup-h2 { font-size: large; margin: 10px 0 5px 0; } + .signup-hr { margin: 20px 0; } @@ -635,10 +694,12 @@ blockquote { .newpm { margin: 20px 60px 30px 60px; } + .newpm textarea { resize: vertical; width: 100%; } + .newpm-send input { width: 100px; } @@ -657,6 +718,7 @@ blockquote { width: 100%; z-index: 10; } + #dialogt { height: 100%; left: 0; @@ -668,6 +730,7 @@ blockquote { align-items: center; justify-content: center; } + #dialogw { z-index: 11; max-width: 96%; @@ -677,14 +740,17 @@ blockquote { left: 50%; transform: translate(-50%, -50%); } + #dialogw a { display: block; } + #dialogw img { max-height: 100%; max-height: 90vh; max-width: 100%; } + #dialog_header { width: 100%; height: 44px; @@ -693,19 +759,23 @@ blockquote { flex-direction: row-reverse; align-items: center; } + .header_image { background: rgba(0, 0, 0, 0.28); } + #dialogc { cursor: pointer; color: #ccc; padding-right: 6px; } + .dialoglogin { background: var(--text-background-color); padding: 25px; width: 300px; } + .dialog-opened { overflow: hidden; } @@ -718,9 +788,11 @@ blockquote { text-decoration: none; width: 100%; } + #signvk { margin-bottom: 30px; } + .dialoglogin form { margin-top: 7px; } @@ -730,31 +802,38 @@ blockquote { margin: 3px 0; padding: 3px; } + .signinput { width: 100%; } + .signsubmit { width: 70px; } + .dialogshare { background: var(--text-background-color); min-width: 300px; overflow: auto; padding: 20px; } + .dialogl { background: var(--text-background-color); border: 1px solid #DDD; margin: 3px 0 20px; padding: 5px; } + .dialogshare li { float: left; margin: 5px 10px 0 0; } + .dialogshare a { display: block; } + .dialogtxt { background: var(--text-background-color); padding: 20px; @@ -780,6 +859,7 @@ blockquote { position: fixed; right: 20px; } + .sharenew { display: inline-block; line-height: 32px; @@ -787,10 +867,12 @@ blockquote { min-width: 200px; padding: 0 12px 0 37px; } + .icon { margin-top: -4px; vertical-align: middle; } + .newmessage { /* textarea on the /post page */ border: 1px solid #DDD; @@ -839,6 +921,7 @@ fieldset { .embedContainer > .compact { flex-grow: 0; } + .embedContainer .picture img { display: block; } @@ -851,9 +934,11 @@ fieldset { .embedContainer > .youtube { min-width: 90%; } + .embedContainer audio { width: 100%; } + .embedContainer iframe { overflow: hidden; resize: vertical; @@ -888,9 +973,11 @@ article p { min-width: 280px; width: auto; } + .title2 h2 { font-size: large; } + .msg-comment input { align-self: flex-end; margin: 6px 0 0 0; @@ -904,27 +991,17 @@ article p { } @media (--viewport-mobile) { - #content { - margin-bottom: 12px; - } #sidebar { background: var(--text-background-color); } } @media (--viewport-desktop) { - #app { - overflow: initial; - } - #wrapper { - grid-template-areas: "footer content"; - grid-template-columns: 1fr 3fr; - grid-gap: 6px; - overflow: initial; - } #column { - overflow-y: auto; padding: 12px; + left: 0; + top: 66px; + width: 240px; } #header_wrapper, .footer_container { @@ -947,12 +1024,12 @@ article p { } #content { margin-bottom: 12px; + margin-left: 240px; } .toolbar { flex-direction: column; justify-content: initial; border-top: initial; - margin-top: 64px; } .toolbar a, .l a { diff --git a/src/main/resources/templates/layouts/default.html b/src/main/resources/templates/layouts/default.html index 5974e19b..a836f4c4 100644 --- a/src/main/resources/templates/layouts/default.html +++ b/src/main/resources/templates/layouts/default.html @@ -36,16 +36,14 @@ 0 %}data-hash="{{visitor.authHash}}" {% endif %}>
{% include "views/partial/navigation" %} -
-
+ +
{% block content %} {% endblock %} -
- -
+
-- cgit v1.2.3