From ea0d924985dc0c5aa089ed59c15282ea7e84c7a4 Mon Sep 17 00:00:00 2001 From: maTh Date: Thu, 18 Aug 2022 11:13:56 +0200 Subject: Swage theme cleanup (#4493) * some general.prompt styles now in template.css * login button * same layout for login and register form * improve input and select * legend with dark background instead grey * fix config icon z-index * remove unused code * improve .prompt * set header also on login and register page * fix: show passwort button * improve login button on login and register screen * dropdown menu: smaller line height * improve layout sidebar closer * remove double code * swage.css * fix nits * fix nits * nits nits nits * nits are all around us.... * better position of config button * show header in mobile view + beauty the login button * CSS files * style the about FreshRSS link * delete unused import.svg * fix config sidebar padding * fix position of user query button in mobile view * improve config button in user query dropdown * fix global view overlay * fix close button aside bar in reader view * generated CSS files * Update swage.scss * fix nav_menu icon color of unread and favorite * improve search bar positioning in mobile view * read-all dropdown menu opens to left side in mobile view * restyle the new-article banner * improve big read button * make the header fixed while scrolling * fix search input while scrolling * improve config icons layout in .box * fix scrollbar:hover in template.css * improve article footer dropdowns * swage.css * Update main.js * Update main.js * fix (S)CSS * config navigation improved * left feed navigation: hover color added * CSS files * Update swage.scss * New Article banner improved margin * textarea: removed grey background * remove unnecessary line * Revert new-article banner layout * Remove :hover in slider * fix select height in sharing config * Fix scrollbar for slider with white background * fix: slider close button with theme color * fixed scrollbar CSS --- app/views/helpers/index/normal/entry_bottom.phtml | 6 +- p/scripts/main.js | 19 +- p/themes/Swage/icons/import.svg | 6 - p/themes/Swage/swage.css | 333 +++++++++++++----- p/themes/Swage/swage.rtl.css | 333 +++++++++++++----- p/themes/Swage/swage.scss | 389 ++++++++++++++++------ p/themes/base-theme/template.css | 23 +- p/themes/base-theme/template.rtl.css | 23 +- 8 files changed, 837 insertions(+), 295 deletions(-) delete mode 100644 p/themes/Swage/icons/import.svg diff --git a/app/views/helpers/index/normal/entry_bottom.phtml b/app/views/helpers/index/normal/entry_bottom.phtml index 05e62a41c..e58c37540 100644 --- a/app/views/helpers/index/normal/entry_bottom.phtml +++ b/app/views/helpers/index/normal/entry_bottom.phtml @@ -37,7 +37,7 @@ } // @phpstan-ignore-next-line if ($bottomline_labels) { - ?>
  • + ?>
  • @@ -58,7 +58,7 @@ } $tags = $bottomline_tags ? $this->entry->tags() : null; if (!empty($tags)) { - ?>
  • + ?>
  • @@ -74,7 +74,7 @@
  • diff --git a/p/scripts/main.js b/p/scripts/main.js index 37984513d..1619993c4 100644 --- a/p/scripts/main.js +++ b/p/scripts/main.js @@ -426,10 +426,17 @@ function toggleContent(new_active, old_active, skipping) { if (context.sticky_post) { // Stick the article to the top when opened const prev_article = new_active.previousElementSibling; - let new_pos = new_active.offsetParent.offsetTop + new_active.offsetTop; + const nav_menu = document.querySelector('.nav_menu'); + let nav_menu_height = 0; + + if (getComputedStyle(nav_menu).position === 'fixed' || getComputedStyle(nav_menu).position === 'sticky') { + nav_menu_height = nav_menu.offsetHeight; + } + + let new_pos = new_active.offsetParent.offsetTop + new_active.offsetTop - nav_menu_height; if (prev_article && new_active.offsetTop - prev_article.offsetTop <= 150) { - new_pos = prev_article.offsetParent.offsetTop + prev_article.offsetTop; + new_pos = prev_article.offsetParent.offsetTop + prev_article.offsetTop - nav_menu_height; if (relative_move) { new_pos -= box_to_move.offsetTop; } @@ -1213,7 +1220,13 @@ function init_nav_entries() { const windowTop = document.scrollingElement.scrollTop; const item_top = active_item.offsetParent.offsetTop + active_item.offsetTop; - document.scrollingElement.scrollTop = windowTop > item_top ? item_top : 0; + const nav_menu = document.querySelector('.nav_menu'); + let nav_menu_height = 0; + + if (getComputedStyle(nav_menu).position === 'fixed' || getComputedStyle(nav_menu).position === 'sticky') { + nav_menu_height = nav_menu.offsetHeight; + } + document.scrollingElement.scrollTop = windowTop > item_top ? item_top - nav_menu_height : 0 - nav_menu_height; return false; }; } diff --git a/p/themes/Swage/icons/import.svg b/p/themes/Swage/icons/import.svg deleted file mode 100644 index 1f26448ff..000000000 --- a/p/themes/Swage/icons/import.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css index e04a4de04..f6e1dbbb7 100644 --- a/p/themes/Swage/swage.css +++ b/p/themes/Swage/swage.css @@ -2,17 +2,19 @@ input, select, textarea { min-height: 25px; margin-top: 4px; - line-height: 25px; + line-height: 29px; vertical-align: middle; background: #fcfcfc; - border: none; - padding-left: 5px; + border: 2px solid #e3e3e3; + padding-left: 8px; } input:invalid, select:invalid { + padding-left: 5px; color: #b0425b; - border-color: #b0425b; + border-left-color: #b0425b; + border-left-width: 5px; box-shadow: none; } @@ -56,9 +58,6 @@ a.btn { line-height: 25px; text-decoration: none; } -a.btn:hover { - background: #00488b; -} a.btn .icon { filter: brightness(3); } @@ -74,7 +73,7 @@ img.icon:hover { } main#stream { - margin-top: 35px; + margin-top: 2rem; } sup { @@ -84,9 +83,10 @@ sup { legend { margin: 20px 0 5px; padding: 5px 20px; - background: #e3e3e3; + background: #22303d; display: inline-block; width: auto; + color: #fcfcfc; font-size: 1.4em; clear: both; } @@ -96,7 +96,6 @@ label { } textarea { - background: #e3e3e3; width: 360px; height: 100px; } @@ -114,7 +113,8 @@ select:disabled { } select { - background: #e3e3e3; + padding-top: 7px; + padding-bottom: 8px; } input.extend { @@ -146,6 +146,57 @@ form th { text-align: center; } +@supports (scrollbar-width: thin) { + #sidebar, +.scrollbar-thin { + scrollbar-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); + scrollbar-width: thin; + } + + #sidebar:hover, +.scrollbar-thin:hover { + scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2); + } + + #slider.scrollbar-thin { + scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05); + } + + #slider.scrollbar-thin:hover { + scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1); + } +} +@supports not (scrollbar-width: thin) { + #sidebar::-webkit-scrollbar, +.scrollbar-thin::-webkit-scrollbar { + background: rgba(255, 255, 255, 0); + width: 8px; + } + + #sidebar::-webkit-scrollbar-thumb, +.scrollbar-thin::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0); + display: unset; + border-radius: 5px; + } + + #sidebar:hover::-webkit-scrollbar-thumb, +.scrollbar-thin:hover::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.5); + } + + #slider.scrollbar-thin::-webkit-scrollbar { + background: rgba(0, 0, 0, 0.05); + } + + #slider.scrollbar-thin::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.1); + } + + #slider.scrollbar-thin:hover::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.3); + } +} .category .title.error::before { display: inline-block; padding-right: 7px; @@ -186,6 +237,9 @@ form th { vertical-align: middle; font-size: 0; } +.stick select { + margin-top: 0; +} .btn { margin: 0; padding: 5px 10px; @@ -200,12 +254,13 @@ form th { cursor: pointer; overflow: hidden; } -.btn.active, -.btn :active, -.btn :hover { +.btn.active, .btn:active, .btn:hover { background: #00488b; text-decoration: none; } +.btn .icon { + filter: brightness(3); +} .btn-important, .btn-attention { font-weight: normal; @@ -226,7 +281,7 @@ form th { } .nav-list .nav-header { - padding: 0 10px; + padding: 0 1rem; font-weight: bold; background: #22303d; color: #fcfcfc; @@ -254,7 +309,7 @@ form th { background: #c46178; } .nav-list .item > a { - padding: 0 10px; + padding: 0 1.5rem; } .nav-list .item.empty a { color: #fa8052; @@ -302,7 +357,7 @@ form th { } .dropdown-menu { - padding: 5px 0; + padding: 0.5rem 0 1rem 0; font-size: 0.8rem; text-align: left; border: none; @@ -310,6 +365,17 @@ form th { } .dropdown-menu .dropdown-header { cursor: default; + padding: 0 0.5rem 0.5rem; + font-weight: bold; + color: #fcfcfc; +} +.dropdown-menu .dropdown-header a { + padding: 0 5px; + position: absolute; + right: 5px; +} +.dropdown-menu .dropdown-header a:hover { + background-color: #0062be; } .dropdown-menu::after { content: none; @@ -337,11 +403,10 @@ form th { padding: 2px 5px; } -.dropdown-header { - padding: 0 5px 5px; - font-weight: bold; - text-align: left; - color: #fcfcfc; +.labels .dropdown-menu, +.tags .dropdown-menu, +.share .dropdown-menu { + right: auto; } .separator { @@ -452,14 +517,20 @@ form th { } .box .box-title { margin: 0; - padding: 5px 10px; - background: #e3e3e3; - color: #969696; + padding: 7px 10px; + background: #22303d; + color: #fcfcfc; border-bottom: 1px solid #e3e3e3; } +.box .box-title a { + color: #fcfcfc; +} .box .box-title .configure { margin-right: 4px; } +.box .box-title .configure .icon:hover { + filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); +} .box .box-content { padding-left: 30px; max-height: 260px; @@ -471,7 +542,10 @@ form th { } .box .box-content .item .configure .icon { vertical-align: middle; - background-color: #e3e3e3; + filter: invert(1); +} +.box .box-content .item .configure .icon:hover { + filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); } .box.category .box-title .title { font-weight: normal; @@ -502,6 +576,9 @@ form th { padding: 2px 10px; font-size: 0.8rem; } +.box.visible-semi { + border-style: solid; +} .tree { margin: 10px 0; @@ -513,7 +590,7 @@ form th { height: 35px; font-size: 1rem; position: relative; - line-height: 2.3rem; + line-height: 2rem; } .tree-folder-title .title { background: inherit; @@ -575,9 +652,6 @@ form th { top: 5px; filter: grayscale(100%) brightness(100); } -.header > .item.search input { - width: 230px; -} .header .item.search input:focus { width: 350px; } @@ -587,8 +661,15 @@ form th { .header .item.configure { position: fixed; right: 0; - z-index: 1000; + z-index: 95; width: 35px; + text-align: center; + line-height: 0.8rem; +} +.header .item.configure > .icon { + filter: brightness(3); + margin-right: 5px; + margin-top: 3px; } .header .item.configure .dropdown .icon { filter: brightness(3); @@ -601,6 +682,10 @@ form th { .aside.aside_feed .tree { margin: 0 0 50px; } +.aside.aside_feed .tree-folder .tree-folder-title:hover, +.aside.aside_feed .tree-folder .item.feed:hover { + background-color: #00488b; +} .aside.aside_feed .nav-form input, .aside.aside_feed .nav-form select { width: 140px; @@ -623,14 +708,33 @@ form th { .aside_feed .tree-folder-items .dropdown-menu::after { left: 2px; } +.aside_feed .about { + padding: 1rem; + display: block; + text-align: center; + font-size: 0.8em; + font-style: italic; +} + +.reader .aside .toggle_aside { + background: #22303d; + display: block; + width: 100%; + height: 50px; + line-height: 50px; + text-align: center; +} +.reader .aside .toggle_aside .icon { + filter: brightness(3); +} +.reader .aside .toggle_aside:hover { + background-color: #0062be; +} .post { padding: 10px 50px; font-size: 0.9em; } -.post input { - background: #e3e3e3; -} .post input.long { height: 33px; margin-top: 0px; @@ -644,7 +748,6 @@ form th { .prompt input { margin: 5px auto; - width: 100%; } #global { @@ -662,6 +765,7 @@ form th { line-height: 1.5em; } #new-article > a { + padding: 1rem; line-height: 1.5em; font-weight: bold; color: #fcfcfc; @@ -689,14 +793,23 @@ form th { width: 100%; font-size: 0; background-color: #0062be; - position: fixed; - z-index: 900; + position: sticky; + top: 0; + z-index: 90; } .nav_menu .item.search { display: inline-block; - position: fixed; + position: absolute; right: 40px; } +.nav_menu .item.search input { + border-width: 0; + line-height: 25px; +} +.nav_menu #toggle-unread .icon, +.nav_menu #toggle-starred .icon { + filter: brightness(1); +} .flux { padding-right: 10px; @@ -830,26 +943,44 @@ form th { width: 270px; } -.formLogin #global { +#overlay { + z-index: 100; +} + +#panel { + z-index: 100; +} +#panel .nav_menu { + position: relative; +} + +.formLogin #global, +.register #global { height: 0; } -.formLogin .header { - background: #22303d; - height: 55px; +.formLogin .header, +.register .header { + background: #0062be; + height: 35px; + position: relative; } -.formLogin .header > .item.configure { - width: 200px; - position: unset; +.formLogin .header > .item.configure, +.register .header > .item.configure { + padding: 8px; + width: auto; + position: absolute; + right: 0; + white-space: nowrap; + bottom: 0; } -.formLogin a.signin { - color: #fcfcfc; - padding-left: 5px; +.formLogin .header > .item.configure .icon, +.register .header > .item.configure .icon { + filter: brightness(3); } -.formLogin input { - border-top: 1px #e3e3e3; - border-right: 1px #e3e3e3; - border-bottom: 1px #e3e3e3; - border-left: 5px solid; + +a.signin { + color: #fcfcfc; + font-size: 70%; } .loglist { @@ -885,7 +1016,7 @@ form th { } @media (max-width: 840px) { - .formLogin .header { + body:not(.formLogin, .register) .header .item.title { display: none; } @@ -894,33 +1025,28 @@ form th { text-align: left; } - .dropdown-header, .dropdown-menu > .item { - padding: 12px; + .dropdown { + position: relative; } #new-article { + margin-top: 2rem; width: 100%; - position: sticky; - top: 0; } .header { display: table; } - .header .item.title .logo { - display: none; + .header .item { + padding: 0; } .header .item.configure { padding: 0; - position: absolute; - right: 77px; + position: fixed; + right: 76px; } - - .header > .item.title a { - display: block; - position: absolute; - top: -35px; - left: 10px; + .header .item.configure > .icon { + margin-top: 5px; } button.read_all.btn { @@ -934,6 +1060,7 @@ form th { } .aside { + padding: 0; width: 0; transition: width 200ms linear; } @@ -942,11 +1069,14 @@ form th { display: block; height: 50px; line-height: 50px; - text-align: right; + text-align: center; padding-right: 10px; } - .aside.aside_feed { - padding: 0; + .aside .toggle_aside:hover { + background-color: #0062be; + } + .aside .toggle_aside .icon { + filter: brightness(3); } .aside.aside_feed .configure-feeds { display: flex; @@ -959,8 +1089,22 @@ form th { z-index: 1000; } + #slider .toggle_aside { + background: #22303d; + display: block; + height: 50px; + line-height: 50px; + text-align: center; + padding-right: 10px; + } + #slider .toggle_aside:hover { + background-color: #0062be; + } + #slider .toggle_aside .icon { + filter: brightness(3); + } + .nav_menu { - position: initial; height: 71px; } .nav_menu .btn { @@ -972,16 +1116,17 @@ form th { .nav_menu .stick .btn { margin: 0; } - .nav_menu .search { - position: absolute !important; + .nav_menu .item.search { top: 3px; - left: 37px; + margin-left: 77px; + width: calc(100% - 152px); + position: relative; } - .nav_menu .search form { + .nav_menu .item.search form { display: block; } - .nav_menu .search input { - width: 85%; + .nav_menu .item.search input { + width: 100%; } #panel .close, @@ -990,14 +1135,24 @@ form th { display: block; height: 50px; line-height: 50px; - text-align: right; + text-align: center; padding-right: 10px; } + #panel .close:hover, +.dropdown-menu .toggle_aside:hover { + background-color: #0062be; + } - .dropdown-target:target ~ .dropdown-toggle.btn::after { + .dropdown-target:target ~ .dropdown-toggle::after, +.dropdown-target:target ~ .dropdown-toggle.btn::after { display: none; } + .share .dropdown-menu { + right: 3%; + left: auto; + } + .day .name { font-size: 1.1rem; } @@ -1082,7 +1237,6 @@ div#nav_menu_views { } } button.as-link { - color: #fcfcfc; outline: none; } @@ -1122,11 +1276,6 @@ button.as-link { color: #c46178; } -#dropdown-query ~ .dropdown-menu .dropdown-header .icon { - vertical-align: middle; - float: right; -} - #stream.reader .flux { padding: 0 0 50px; background: #fcfcfc; @@ -1139,15 +1288,17 @@ button.as-link { font-size: 90%; } -#nav_menu_actions ul.dropdown-menu, #nav_menu_read_all ul.dropdown-menu { - left: 0px; +#nav_menu_actions ul.dropdown-menu { + left: 0; +} + +#nav_menu_read_all ul.dropdown-menu { + right: 0; + left: auto; } #slider label { min-height: initial; } -#slider .form-group:hover { - background: initial; -} /*# sourceMappingURL=swage.css.map */ diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css index d87f291e9..e55c10f68 100644 --- a/p/themes/Swage/swage.rtl.css +++ b/p/themes/Swage/swage.rtl.css @@ -2,17 +2,19 @@ input, select, textarea { min-height: 25px; margin-top: 4px; - line-height: 25px; + line-height: 29px; vertical-align: middle; background: #fcfcfc; - border: none; - padding-right: 5px; + border: 2px solid #e3e3e3; + padding-right: 8px; } input:invalid, select:invalid { + padding-right: 5px; color: #b0425b; - border-color: #b0425b; + border-right-color: #b0425b; + border-right-width: 5px; box-shadow: none; } @@ -56,9 +58,6 @@ a.btn { line-height: 25px; text-decoration: none; } -a.btn:hover { - background: #00488b; -} a.btn .icon { filter: brightness(3); } @@ -74,7 +73,7 @@ img.icon:hover { } main#stream { - margin-top: 35px; + margin-top: 2rem; } sup { @@ -84,9 +83,10 @@ sup { legend { margin: 20px 0 5px; padding: 5px 20px; - background: #e3e3e3; + background: #22303d; display: inline-block; width: auto; + color: #fcfcfc; font-size: 1.4em; clear: both; } @@ -96,7 +96,6 @@ label { } textarea { - background: #e3e3e3; width: 360px; height: 100px; } @@ -114,7 +113,8 @@ select:disabled { } select { - background: #e3e3e3; + padding-top: 7px; + padding-bottom: 8px; } input.extend { @@ -146,6 +146,57 @@ form th { text-align: center; } +@supports (scrollbar-width: thin) { + #sidebar, +.scrollbar-thin { + scrollbar-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); + scrollbar-width: thin; + } + + #sidebar:hover, +.scrollbar-thin:hover { + scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2); + } + + #slider.scrollbar-thin { + scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05); + } + + #slider.scrollbar-thin:hover { + scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1); + } +} +@supports not (scrollbar-width: thin) { + #sidebar::-webkit-scrollbar, +.scrollbar-thin::-webkit-scrollbar { + background: rgba(255, 255, 255, 0); + width: 8px; + } + + #sidebar::-webkit-scrollbar-thumb, +.scrollbar-thin::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0); + display: unset; + border-radius: 5px; + } + + #sidebar:hover::-webkit-scrollbar-thumb, +.scrollbar-thin:hover::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.5); + } + + #slider.scrollbar-thin::-webkit-scrollbar { + background: rgba(0, 0, 0, 0.05); + } + + #slider.scrollbar-thin::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.1); + } + + #slider.scrollbar-thin:hover::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.3); + } +} .category .title.error::before { display: inline-block; padding-left: 7px; @@ -186,6 +237,9 @@ form th { vertical-align: middle; font-size: 0; } +.stick select { + margin-top: 0; +} .btn { margin: 0; padding: 5px 10px; @@ -200,12 +254,13 @@ form th { cursor: pointer; overflow: hidden; } -.btn.active, -.btn :active, -.btn :hover { +.btn.active, .btn:active, .btn:hover { background: #00488b; text-decoration: none; } +.btn .icon { + filter: brightness(3); +} .btn-important, .btn-attention { font-weight: normal; @@ -226,7 +281,7 @@ form th { } .nav-list .nav-header { - padding: 0 10px; + padding: 0 1rem; font-weight: bold; background: #22303d; color: #fcfcfc; @@ -254,7 +309,7 @@ form th { background: #c46178; } .nav-list .item > a { - padding: 0 10px; + padding: 0 1.5rem; } .nav-list .item.empty a { color: #fa8052; @@ -302,7 +357,7 @@ form th { } .dropdown-menu { - padding: 5px 0; + padding: 0.5rem 0 1rem 0; font-size: 0.8rem; text-align: right; border: none; @@ -310,6 +365,17 @@ form th { } .dropdown-menu .dropdown-header { cursor: default; + padding: 0 0.5rem 0.5rem; + font-weight: bold; + color: #fcfcfc; +} +.dropdown-menu .dropdown-header a { + padding: 0 5px; + position: absolute; + left: 5px; +} +.dropdown-menu .dropdown-header a:hover { + background-color: #0062be; } .dropdown-menu::after { content: none; @@ -337,11 +403,10 @@ form th { padding: 2px 5px; } -.dropdown-header { - padding: 0 5px 5px; - font-weight: bold; - text-align: right; - color: #fcfcfc; +.labels .dropdown-menu, +.tags .dropdown-menu, +.share .dropdown-menu { + left: auto; } .separator { @@ -452,14 +517,20 @@ form th { } .box .box-title { margin: 0; - padding: 5px 10px; - background: #e3e3e3; - color: #969696; + padding: 7px 10px; + background: #22303d; + color: #fcfcfc; border-bottom: 1px solid #e3e3e3; } +.box .box-title a { + color: #fcfcfc; +} .box .box-title .configure { margin-left: 4px; } +.box .box-title .configure .icon:hover { + filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); +} .box .box-content { padding-right: 30px; max-height: 260px; @@ -471,7 +542,10 @@ form th { } .box .box-content .item .configure .icon { vertical-align: middle; - background-color: #e3e3e3; + filter: invert(1); +} +.box .box-content .item .configure .icon:hover { + filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); } .box.category .box-title .title { font-weight: normal; @@ -502,6 +576,9 @@ form th { padding: 2px 10px; font-size: 0.8rem; } +.box.visible-semi { + border-style: solid; +} .tree { margin: 10px 0; @@ -513,7 +590,7 @@ form th { height: 35px; font-size: 1rem; position: relative; - line-height: 2.3rem; + line-height: 2rem; } .tree-folder-title .title { background: inherit; @@ -575,9 +652,6 @@ form th { top: 5px; filter: grayscale(100%) brightness(100); } -.header > .item.search input { - width: 230px; -} .header .item.search input:focus { width: 350px; } @@ -587,8 +661,15 @@ form th { .header .item.configure { position: fixed; left: 0; - z-index: 1000; + z-index: 95; width: 35px; + text-align: center; + line-height: 0.8rem; +} +.header .item.configure > .icon { + filter: brightness(3); + margin-left: 5px; + margin-top: 3px; } .header .item.configure .dropdown .icon { filter: brightness(3); @@ -601,6 +682,10 @@ form th { .aside.aside_feed .tree { margin: 0 0 50px; } +.aside.aside_feed .tree-folder .tree-folder-title:hover, +.aside.aside_feed .tree-folder .item.feed:hover { + background-color: #00488b; +} .aside.aside_feed .nav-form input, .aside.aside_feed .nav-form select { width: 140px; @@ -623,14 +708,33 @@ form th { .aside_feed .tree-folder-items .dropdown-menu::after { right: 2px; } +.aside_feed .about { + padding: 1rem; + display: block; + text-align: center; + font-size: 0.8em; + font-style: italic; +} + +.reader .aside .toggle_aside { + background: #22303d; + display: block; + width: 100%; + height: 50px; + line-height: 50px; + text-align: center; +} +.reader .aside .toggle_aside .icon { + filter: brightness(3); +} +.reader .aside .toggle_aside:hover { + background-color: #0062be; +} .post { padding: 10px 50px; font-size: 0.9em; } -.post input { - background: #e3e3e3; -} .post input.long { height: 33px; margin-top: 0px; @@ -644,7 +748,6 @@ form th { .prompt input { margin: 5px auto; - width: 100%; } #global { @@ -662,6 +765,7 @@ form th { line-height: 1.5em; } #new-article > a { + padding: 1rem; line-height: 1.5em; font-weight: bold; color: #fcfcfc; @@ -689,14 +793,23 @@ form th { width: 100%; font-size: 0; background-color: #0062be; - position: fixed; - z-index: 900; + position: sticky; + top: 0; + z-index: 90; } .nav_menu .item.search { display: inline-block; - position: fixed; + position: absolute; left: 40px; } +.nav_menu .item.search input { + border-width: 0; + line-height: 25px; +} +.nav_menu #toggle-unread .icon, +.nav_menu #toggle-starred .icon { + filter: brightness(1); +} .flux { padding-left: 10px; @@ -830,26 +943,44 @@ form th { width: 270px; } -.formLogin #global { +#overlay { + z-index: 100; +} + +#panel { + z-index: 100; +} +#panel .nav_menu { + position: relative; +} + +.formLogin #global, +.register #global { height: 0; } -.formLogin .header { - background: #22303d; - height: 55px; +.formLogin .header, +.register .header { + background: #0062be; + height: 35px; + position: relative; } -.formLogin .header > .item.configure { - width: 200px; - position: unset; +.formLogin .header > .item.configure, +.register .header > .item.configure { + padding: 8px; + width: auto; + position: absolute; + left: 0; + white-space: nowrap; + bottom: 0; } -.formLogin a.signin { - color: #fcfcfc; - padding-right: 5px; +.formLogin .header > .item.configure .icon, +.register .header > .item.configure .icon { + filter: brightness(3); } -.formLogin input { - border-top: 1px #e3e3e3; - border-left: 1px #e3e3e3; - border-bottom: 1px #e3e3e3; - border-right: 5px solid; + +a.signin { + color: #fcfcfc; + font-size: 70%; } .loglist { @@ -885,7 +1016,7 @@ form th { } @media (max-width: 840px) { - .formLogin .header { + body:not(.formLogin, .register) .header .item.title { display: none; } @@ -894,33 +1025,28 @@ form th { text-align: right; } - .dropdown-header, .dropdown-menu > .item { - padding: 12px; + .dropdown { + position: relative; } #new-article { + margin-top: 2rem; width: 100%; - position: sticky; - top: 0; } .header { display: table; } - .header .item.title .logo { - display: none; + .header .item { + padding: 0; } .header .item.configure { padding: 0; - position: absolute; - left: 77px; + position: fixed; + left: 76px; } - - .header > .item.title a { - display: block; - position: absolute; - top: -35px; - right: 10px; + .header .item.configure > .icon { + margin-top: 5px; } button.read_all.btn { @@ -934,6 +1060,7 @@ form th { } .aside { + padding: 0; width: 0; transition: width 200ms linear; } @@ -942,11 +1069,14 @@ form th { display: block; height: 50px; line-height: 50px; - text-align: left; + text-align: center; padding-left: 10px; } - .aside.aside_feed { - padding: 0; + .aside .toggle_aside:hover { + background-color: #0062be; + } + .aside .toggle_aside .icon { + filter: brightness(3); } .aside.aside_feed .configure-feeds { display: flex; @@ -959,8 +1089,22 @@ form th { z-index: 1000; } + #slider .toggle_aside { + background: #22303d; + display: block; + height: 50px; + line-height: 50px; + text-align: center; + padding-left: 10px; + } + #slider .toggle_aside:hover { + background-color: #0062be; + } + #slider .toggle_aside .icon { + filter: brightness(3); + } + .nav_menu { - position: initial; height: 71px; } .nav_menu .btn { @@ -972,16 +1116,17 @@ form th { .nav_menu .stick .btn { margin: 0; } - .nav_menu .search { - position: absolute !important; + .nav_menu .item.search { top: 3px; - right: 37px; + margin-right: 77px; + width: calc(100% - 152px); + position: relative; } - .nav_menu .search form { + .nav_menu .item.search form { display: block; } - .nav_menu .search input { - width: 85%; + .nav_menu .item.search input { + width: 100%; } #panel .close, @@ -990,14 +1135,24 @@ form th { display: block; height: 50px; line-height: 50px; - text-align: left; + text-align: center; padding-left: 10px; } + #panel .close:hover, +.dropdown-menu .toggle_aside:hover { + background-color: #0062be; + } - .dropdown-target:target ~ .dropdown-toggle.btn::after { + .dropdown-target:target ~ .dropdown-toggle::after, +.dropdown-target:target ~ .dropdown-toggle.btn::after { display: none; } + .share .dropdown-menu { + left: 3%; + right: auto; + } + .day .name { font-size: 1.1rem; } @@ -1082,7 +1237,6 @@ div#nav_menu_views { } } button.as-link { - color: #fcfcfc; outline: none; } @@ -1122,11 +1276,6 @@ button.as-link { color: #c46178; } -#dropdown-query ~ .dropdown-menu .dropdown-header .icon { - vertical-align: middle; - float: left; -} - #stream.reader .flux { padding: 0 0 50px; background: #fcfcfc; @@ -1139,13 +1288,15 @@ button.as-link { font-size: 90%; } -#nav_menu_actions ul.dropdown-menu, #nav_menu_read_all ul.dropdown-menu { - right: 0px; +#nav_menu_actions ul.dropdown-menu { + right: 0; +} + +#nav_menu_read_all ul.dropdown-menu { + left: 0; + right: auto; } #slider label { min-height: initial; } -#slider .form-group:hover { - background: initial; -} diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss index 7e70e96a4..f1503d494 100644 --- a/p/themes/Swage/swage.scss +++ b/p/themes/Swage/swage.scss @@ -19,16 +19,18 @@ $color_hover: #fff; %input { min-height: 25px; margin-top: 4px; - line-height: 25px; + line-height: 29px; vertical-align: middle; background: $color_light; - border: none; - padding-left: 5px; + border: 2px solid #e3e3e3; + padding-left: 8px; } %invalid { + padding-left: 5px; color: $color_bad; - border-color: $color_bad; + border-left-color: $color_bad; + border-left-width: 5px; box-shadow: none; } @@ -70,10 +72,6 @@ a { line-height: 25px; text-decoration: none; - &:hover { - background: color.adjust( $color_nav, $lightness: -10%); - } - .icon { filter: brightness(3); } @@ -95,7 +93,7 @@ img { } main#stream { - margin-top: 35px; + margin-top: 2rem; } sup { @@ -105,9 +103,10 @@ sup { legend { margin: 20px 0 5px; padding: 5px 20px; - background: color.adjust( $color_light, $lightness: -10%); + background: $color_aside; display: inline-block; width: auto; + color: $color_light; font-size: 1.4em; clear: both; } @@ -117,7 +116,6 @@ label { } textarea { - background: color.adjust( $color_light, $lightness: -10% ); width: 360px; height: 100px; @@ -148,7 +146,8 @@ select { } select { - background: color.adjust( $color_light, $lightness: -10% ); + padding-top: 7px; + padding-bottom: 8px; } input { @@ -184,6 +183,65 @@ form { } } + +@supports (scrollbar-width: thin) { + // scrollbar for the sliders (with blue/dark background color) + #sidebar, + .scrollbar-thin { + scrollbar-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); + scrollbar-width: thin; + } + + #sidebar:hover, + .scrollbar-thin:hover { + scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2); + } + + // scrollbar for the sliders (with white background color) + #slider.scrollbar-thin { + scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05); + } + + #slider.scrollbar-thin:hover { + scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1); + } +} + +@supports not (scrollbar-width: thin) { + // scrollbar for the sliders (with blue/dark background color) + #sidebar::-webkit-scrollbar, + .scrollbar-thin::-webkit-scrollbar { + background: rgba(255, 255, 255, 0); + width: 8px; + } + + #sidebar::-webkit-scrollbar-thumb, + .scrollbar-thin::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0); + display: unset; + border-radius: 5px; + } + + #sidebar:hover::-webkit-scrollbar-thumb, + .scrollbar-thin:hover::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.5); + } + + // scrollbar for the sliders (with white background color) + #slider.scrollbar-thin::-webkit-scrollbar { + background: rgba(0, 0, 0, 0.05); + } + + #slider.scrollbar-thin::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.1); + } + + #slider.scrollbar-thin:hover::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.3); + } +} + + .category { .title.error::before { display: inline-block; @@ -238,6 +296,10 @@ form { vertical-align: middle; font-size: 0; + select { + margin-top: 0; + } + &.configure-feeds { @extend %aside-width; @@ -259,11 +321,15 @@ form { overflow: hidden; &.active, - :active, - :hover { + &:active, + &:hover { background: color.adjust( $color_nav, $lightness: -10%); text-decoration: none; } + + .icon { + filter: brightness(3); + } } .btn-important, .btn-attention { @@ -289,7 +355,7 @@ form { .nav-header { @extend %nav-list; - padding: 0 10px; + padding: 0 1rem; font-weight: bold; background: $color_aside; color: $color_light; @@ -328,7 +394,7 @@ form { } > a { - padding: 0 10px; + padding: 0 1.5rem; } &.empty a { @@ -387,7 +453,7 @@ form { } .dropdown-menu { - padding: 5px 0; + padding: 0.5rem 0 1rem 0; font-size: 0.8rem; text-align: left; border: none; @@ -395,6 +461,19 @@ form { .dropdown-header { cursor: default; + padding: 0 0.5rem 0.5rem; + font-weight: bold; + color: $color_light; + + a { + padding: 0 5px; + position: absolute; + right: 5px; + + &:hover { + background-color: $color_nav; + } + } } &::after { @@ -443,11 +522,12 @@ form { } } -.dropdown-header { - padding: 0 5px 5px; - font-weight: bold; - text-align: left; - color: $color_light; +.labels, +.tags, +.share { + .dropdown-menu { + right: auto; + } } .separator { @@ -568,19 +648,26 @@ form { .box-title { margin: 0; - padding: 5px 10px; - background: color.adjust( $color_light, $lightness: -10%); - color: color.adjust( $color_light, $lightness: -40% ); + padding: 7px 10px; + background: $color_aside; + color: $color_light; border-bottom: 1px solid color.adjust( $color_light, $lightness: -10%); + a { + color: $color_light; + } + .configure { margin-right: 4px; + + .icon { + &:hover { + filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); + } + } } } - - - .box-content { padding-left: 30px; max-height: 260px; @@ -593,7 +680,11 @@ form { .configure { .icon { vertical-align: middle; - background-color: color.adjust( $color_light, $lightness: -10%); + filter: invert(1); + + &:hover { + filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%); + } } } } @@ -635,6 +726,10 @@ form { font-size: 0.8rem; } } + + &.visible-semi { + border-style: solid; + } } .tree { @@ -647,7 +742,7 @@ form { height: 35px; font-size: 1rem; position: relative; - line-height: 2.3rem; + line-height: 2rem; .title { background: inherit; @@ -719,10 +814,6 @@ form { filter: grayscale(100%) brightness(100); } } - - &.search input { - width: 230px; - } } .item.search input:focus { @@ -736,8 +827,16 @@ form { .item.configure { position: fixed; right: 0; - z-index: 1000; + z-index: 95; width: 35px; + text-align: center; + line-height: 0.8rem; + + > .icon { + filter: brightness(3); + margin-right: 5px; + margin-top: 3px; + } .dropdown .icon { filter: brightness(3); @@ -756,6 +855,15 @@ form { margin: 0 0 50px; } + .tree-folder { + .tree-folder-title, + .item.feed { + &:hover { + background-color: color.adjust( $color_nav, $lightness: -10%); + } + } + } + .nav-form { input, select { @@ -789,6 +897,35 @@ form { .tree-folder-items .dropdown-menu::after { left: 2px; } + + .about { + padding: 1rem; + display: block; + text-align: center; + font-size: 0.8em; + font-style: italic; + } +} + +.reader { + .aside { + .toggle_aside { + background: $color_aside; + display: block; + width: 100%; + height: 50px; + line-height: 50px; + text-align: center; + + .icon { + filter: brightness(3); + } + + &:hover { + background-color: color.adjust( $color_nav, $lightness: 0%); + } + } + } } .post { @@ -796,8 +933,6 @@ form { font-size: 0.9em; input { - background: color.adjust( $color_light, $lightness: -10% ); - &.long { height: 33px; margin-top: 0px; @@ -816,7 +951,6 @@ form { .prompt { input { margin: 5px auto; - width: 100%; } } @@ -837,6 +971,7 @@ form { @extend %aside-width; > a { + padding: 1rem; line-height: 1.5em; font-weight: bold; color: $color_light; @@ -870,13 +1005,26 @@ form { width: 100%; font-size: 0; background-color: $color_nav; - position: fixed; - z-index: 900; + position: sticky; + top: 0; + z-index: 90; .item.search { display: inline-block; - position: fixed; + position: absolute; right: 40px; + + input { + border-width: 0; + line-height: 25px; + } + } + + #toggle-unread, + #toggle-starred { + .icon { + filter: brightness(1); + } } } @@ -1047,34 +1195,49 @@ form { } } -.formLogin { +#overlay { + z-index: 100; +} + +#panel { + z-index: 100; + + .nav_menu { + position: relative; + } +} + +.formLogin, +.register { #global { height: 0; } .header { - background: $color_aside; - height: 55px; + background: $color_nav; + height: 35px; + position: relative; > .item { &.configure { - width: 200px; - position: unset; + padding: 8px; + width: auto; + position: absolute; + right: 0; + white-space: nowrap; + bottom: 0; + + .icon { + filter: brightness(3); + } } } } +} - a.signin { - color: $color_light; - padding-left: 5px; - } - - input { - border-top: 1px color.adjust( $color_light, $lightness: -10%); - border-right: 1px color.adjust( $color_light, $lightness: -10%); - border-bottom: 1px color.adjust( $color_light, $lightness: -10%); - border-left: 5px solid; - } +a.signin { + color: $color_light; + font-size: 70%; } .loglist { @@ -1115,8 +1278,12 @@ form { } @media (max-width: 840px) { - .formLogin .header { - display: none; + body:not(.formLogin, .register) { + .header { + .item.title { + display: none; + } + } } .form-group .group-name { @@ -1124,35 +1291,31 @@ form { text-align: left; } - .dropdown-header, .dropdown-menu > .item { - padding: 12px; + .dropdown { + position: relative; } #new-article { + margin-top: 2rem; width: 100%; - position: sticky; - top: 0; } .header { display: table; - .item.title .logo { - display: none; + .item { + padding: 0; } .item.configure { padding: 0; - position: absolute; - right: 77px; - } - } + position: fixed; + right: 76px; - .header > .item.title a { - display: block; - position: absolute; - top: -35px; - left: 10px; + > .icon { + margin-top: 5px; + } + } } button.read_all.btn { @@ -1166,6 +1329,7 @@ form { } .aside { + padding: 0; width: 0; transition: width 200ms linear; @@ -1174,12 +1338,16 @@ form { display: block; height: 50px; line-height: 50px; - text-align: right; + text-align: center; padding-right: 10px; - } - &.aside_feed { - padding: 0; + &:hover { + background-color: color.adjust( $color_nav, $lightness: 0%); + } + + .icon { + filter: brightness(3); + } } &.aside_feed .configure-feeds { @@ -1195,8 +1363,26 @@ form { } } + #slider { + .toggle_aside { + background: $color_aside; + display: block; + height: 50px; + line-height: 50px; + text-align: center; + padding-right: 10px; + + &:hover { + background-color: color.adjust( $color_nav, $lightness: 0%); + } + + .icon { + filter: brightness(3); + } + } + } + .nav_menu { - position: initial; height: 71px; .btn { @@ -1211,17 +1397,18 @@ form { } } - .search { - position: absolute !important; + .item.search { top: 3px; - left: 37px; + margin-left: 77px; + width: calc(100% - 4 * 38px); + position: relative; form { display: block; } input { - width: 85%; + width: 100%; } } } @@ -1232,14 +1419,24 @@ form { display: block; height: 50px; line-height: 50px; - text-align: right; + text-align: center; padding-right: 10px; + + &:hover { + background-color: color.adjust( $color_nav, $lightness: 0%); + } } + .dropdown-target:target ~ .dropdown-toggle::after, .dropdown-target:target ~ .dropdown-toggle.btn::after { display: none; } + .share .dropdown-menu { + right: 3%; + left: auto; + } + .day .name { font-size: 1.1rem; } @@ -1330,7 +1527,6 @@ form { } button.as-link { - color: $color_light; outline: none; } @@ -1379,11 +1575,6 @@ button.as-link { } } -#dropdown-query ~ .dropdown-menu .dropdown-header .icon { - vertical-align: middle; - float: right; -} - #stream.reader .flux { padding: 0 0 50px; background: $color_light; @@ -1397,9 +1588,16 @@ button.as-link { } } -#nav_menu_actions, #nav_menu_read_all { +#nav_menu_actions { ul.dropdown-menu { - left: 0px; + left: 0; + } +} + +#nav_menu_read_all { + ul.dropdown-menu { + right: 0; + left: auto; } } @@ -1407,11 +1605,4 @@ button.as-link { label { min-height: initial; } - - .form-group { - &:hover { - background: initial; - } - } - } diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css index d640a2c9c..e5332f8a4 100644 --- a/p/themes/base-theme/template.css +++ b/p/themes/base-theme/template.css @@ -22,6 +22,15 @@ html, body { font-size: 100%; } +main.prompt { + margin: 3rem auto; + padding: 2rem; + max-width: 400px; + min-width: 300px; + width: 33%; + text-align: center; +} + /*=== Links */ a { text-decoration: none; @@ -64,6 +73,7 @@ p { p.help, .prompt p.help { margin: 5px 0 0.5em; + text-align: left; } p.help .icon { @@ -210,6 +220,15 @@ input[type="checkbox"] { min-height: 15px !important; } +.prompt textarea, +.prompt input, +.prompt select, +.prompt .stick { + margin: 5px auto; + width: 100%; + box-sizing: border-box; +} + .dropdown-menu label > input[type="text"] { width: 150px; width: calc(99% - 5em); @@ -746,6 +765,8 @@ input[type="checkbox"]:focus-visible { .box .box-content { padding: 8px 8px 8px 16px; display: block; + min-height: 2.5em; + max-height: 260px; overflow: auto; } @@ -835,7 +856,7 @@ li.drag-hover { } #sidebar:hover, - .scrollbar-thin { + .scrollbar-thin:hover { scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05); } } diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css index 610561e79..126ca04a3 100644 --- a/p/themes/base-theme/template.rtl.css +++ b/p/themes/base-theme/template.rtl.css @@ -22,6 +22,15 @@ html, body { font-size: 100%; } +main.prompt { + margin: 3rem auto; + padding: 2rem; + max-width: 400px; + min-width: 300px; + width: 33%; + text-align: center; +} + /*=== Links */ a { text-decoration: none; @@ -64,6 +73,7 @@ p { p.help, .prompt p.help { margin: 5px 0 0.5em; + text-align: right; } p.help .icon { @@ -210,6 +220,15 @@ input[type="checkbox"] { min-height: 15px !important; } +.prompt textarea, +.prompt input, +.prompt select, +.prompt .stick { + margin: 5px auto; + width: 100%; + box-sizing: border-box; +} + .dropdown-menu label > input[type="text"] { width: 150px; width: calc(99% - 5em); @@ -746,6 +765,8 @@ input[type="checkbox"]:focus-visible { .box .box-content { padding: 8px 16px 8px 8px; display: block; + min-height: 2.5em; + max-height: 260px; overflow: auto; } @@ -835,7 +856,7 @@ li.drag-hover { } #sidebar:hover, - .scrollbar-thin { + .scrollbar-thin:hover { scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05); } } -- cgit v1.2.3