From 1ae5a5af147bca616497a53e94805362add21807 Mon Sep 17 00:00:00 2001 From: maTh Date: Fri, 12 Nov 2021 08:57:36 +0100 Subject: Improve mobile view: access to the config menu (#3881) * wip * improve the header * Fix theme "Adark" * fixed theme: Ansum * Fixed theme: BlueLagoon * fixed Ansum after PR comment of Frenzie * Fixed theme: Dark * fixed theme: Flat * fixed theme: Mapco * fixed theme: Origine compact * fixed theme: Pafat * fixed theme: Screwdriver * fixed theme: Swage * hide the close button in wide view * fixed base/template RTL * fixed SCSS of theme Swage * stylelint fix * fixed theme Swage * make fix-all Co-authored-by: Alexandre Alapetite --- app/layout/header.phtml | 17 +------- p/themes/Alternative-Dark/adark.css | 3 +- p/themes/Alternative-Dark/adark.rtl.css | 3 +- p/themes/Ansum/_mobile.scss | 15 +++---- p/themes/Ansum/ansum.css | 12 +++--- p/themes/Ansum/ansum.rtl.css | 12 +++--- p/themes/BlueLagoon/BlueLagoon.css | 16 +++---- p/themes/BlueLagoon/BlueLagoon.rtl.css | 16 +++---- p/themes/Dark/dark.css | 8 +--- p/themes/Dark/dark.rtl.css | 8 +--- p/themes/Flat/flat.css | 4 +- p/themes/Flat/flat.rtl.css | 4 +- p/themes/Mapco/_mobile.scss | 14 +++--- p/themes/Mapco/mapco.css | 14 +++--- p/themes/Mapco/mapco.rtl.css | 14 +++--- p/themes/Origine-compact/origine-compact.css | 3 +- p/themes/Origine-compact/origine-compact.rtl.css | 3 +- p/themes/Origine/origine.css | 8 +--- p/themes/Origine/origine.rtl.css | 8 +--- p/themes/Pafat/pafat.css | 4 +- p/themes/Pafat/pafat.rtl.css | 4 +- p/themes/Screwdriver/screwdriver.css | 7 +-- p/themes/Screwdriver/screwdriver.rtl.css | 7 +-- p/themes/Swage/swage.css | 45 +++++++++++-------- p/themes/Swage/swage.rtl.css | 43 ++++++++++-------- p/themes/Swage/swage.scss | 55 +++++++++++++++--------- p/themes/base-theme/template.css | 51 +++++++++++++++++++--- p/themes/base-theme/template.rtl.css | 51 +++++++++++++++++++--- 28 files changed, 250 insertions(+), 199 deletions(-) diff --git a/app/layout/header.phtml b/app/layout/header.phtml index 2c92b9a5c..e872a5918 100644 --- a/app/layout/header.phtml +++ b/app/layout/header.phtml @@ -1,17 +1,3 @@ - -
@@ -52,7 +38,8 @@ if (FreshRSS_Auth::accessNeedsAction()) {
-
    +
      +
    • ❌
    • :
      • diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css index 3b8c6084b..0d83af6f2 100644 --- a/p/themes/Alternative-Dark/adark.css +++ b/p/themes/Alternative-Dark/adark.css @@ -1105,7 +1105,8 @@ a.btn { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #262626; display: block; width: 100%; diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css index e2e6cc7e6..a146afef2 100644 --- a/p/themes/Alternative-Dark/adark.rtl.css +++ b/p/themes/Alternative-Dark/adark.rtl.css @@ -1105,7 +1105,8 @@ a.btn { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #262626; display: block; width: 100%; diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss index 9b67ed6fa..f74331de5 100644 --- a/p/themes/Ansum/_mobile.scss +++ b/p/themes/Ansum/_mobile.scss @@ -56,7 +56,8 @@ .aside .toggle_aside, #panel .close, - #close-slider.active { + #close-slider.active, + .dropdown-menu .toggle_aside { background: $main-first-alt; display: block; width: 100%; @@ -69,13 +70,13 @@ padding: 0.5rem; .item { - &.title { - display: none; - } - &.search { display: block; + form { + display: inherit; + } + .stick { display: flex; } @@ -95,10 +96,6 @@ padding: 0.5rem 2rem; } } - - &.configure { - display: none; - } } } diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css index 2be5b797b..75c1d8960 100644 --- a/p/themes/Ansum/ansum.css +++ b/p/themes/Ansum/ansum.css @@ -1480,8 +1480,9 @@ form th { } .aside .toggle_aside, -#panel .close, -#close-slider.active { + #panel .close, + #close-slider.active, + .dropdown-menu .toggle_aside { background: #b7641d; display: block; width: 100%; @@ -1493,8 +1494,8 @@ form th { .header { padding: 0.5rem; } - .header .item.title { - display: none; + .header .item.search form { + display: inherit; } .header .item.search { display: block; @@ -1513,9 +1514,6 @@ form th { min-height: 49px; padding: 0.5rem 2rem; } - .header .item.configure { - display: none; - } .post { padding-left: 1rem; diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css index ae61d4b94..b718a9218 100644 --- a/p/themes/Ansum/ansum.rtl.css +++ b/p/themes/Ansum/ansum.rtl.css @@ -1480,8 +1480,9 @@ form th { } .aside .toggle_aside, -#panel .close, -#close-slider.active { + #panel .close, + #close-slider.active, + .dropdown-menu .toggle_aside { background: #b7641d; display: block; width: 100%; @@ -1493,8 +1494,8 @@ form th { .header { padding: 0.5rem; } - .header .item.title { - display: none; + .header .item.search form { + display: inherit; } .header .item.search { display: block; @@ -1513,9 +1514,6 @@ form th { min-height: 49px; padding: 0.5rem 2rem; } - .header .item.configure { - display: none; - } .post { padding-right: 1rem; diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css index b2299d440..98de631e3 100644 --- a/p/themes/BlueLagoon/BlueLagoon.css +++ b/p/themes/BlueLagoon/BlueLagoon.css @@ -1262,6 +1262,10 @@ a.btn { display: table; } + .header > .item.title .logo { + height: 24px; + } + .nav-login { display: none; } @@ -1278,7 +1282,8 @@ a.btn { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #171717; display: block; width: 100%; @@ -1355,15 +1360,6 @@ a.btn { } @media (max-width: 700px) { - .header { - display: none; - } - - .nav-login { - display: inline-block; - width: 100%; - } - .nav_menu .search { display: inline-block; } diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css index 65a50472c..c8e9d7462 100644 --- a/p/themes/BlueLagoon/BlueLagoon.rtl.css +++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css @@ -1262,6 +1262,10 @@ a.btn { display: table; } + .header > .item.title .logo { + height: 24px; + } + .nav-login { display: none; } @@ -1278,7 +1282,8 @@ a.btn { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #171717; display: block; width: 100%; @@ -1355,15 +1360,6 @@ a.btn { } @media (max-width: 700px) { - .header { - display: none; - } - - .nav-login { - display: inline-block; - width: 100%; - } - .nav_menu .search { display: inline-block; } diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css index 0c0190581..10af7bb7e 100644 --- a/p/themes/Dark/dark.css +++ b/p/themes/Dark/dark.css @@ -583,10 +583,6 @@ a.btn { /*=== STRUCTURE */ /*===============*/ /*=== Header */ -.header { - height: 85px; -} - .header > .item { padding: 10px; vertical-align: middle; @@ -599,7 +595,6 @@ a.btn { } .header > .item.title .logo { - margin: 0.5em 0; filter: grayscale(60%) brightness(1.1); } @@ -1136,7 +1131,8 @@ a.btn { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #111; display: block; width: 100%; diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css index c7fee3617..6c6830a3f 100644 --- a/p/themes/Dark/dark.rtl.css +++ b/p/themes/Dark/dark.rtl.css @@ -583,10 +583,6 @@ a.btn { /*=== STRUCTURE */ /*===============*/ /*=== Header */ -.header { - height: 85px; -} - .header > .item { padding: 10px; vertical-align: middle; @@ -599,7 +595,6 @@ a.btn { } .header > .item.title .logo { - margin: 0.5em 0; filter: grayscale(60%) brightness(1.1); } @@ -1136,7 +1131,8 @@ a.btn { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #111; display: block; width: 100%; diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css index 09599d133..304f27b8b 100644 --- a/p/themes/Flat/flat.css +++ b/p/themes/Flat/flat.css @@ -584,7 +584,6 @@ a.btn { /*=== Header */ .header { background: #ecf0f1; - height: 85px; } .header > .item { @@ -1123,7 +1122,8 @@ a.btn { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #2c3e50; display: block; width: 100%; diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css index 381072e3f..b78536316 100644 --- a/p/themes/Flat/flat.rtl.css +++ b/p/themes/Flat/flat.rtl.css @@ -584,7 +584,6 @@ a.btn { /*=== Header */ .header { background: #ecf0f1; - height: 85px; } .header > .item { @@ -1123,7 +1122,8 @@ a.btn { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #2c3e50; display: block; width: 100%; diff --git a/p/themes/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.scss index 844196ceb..65b31fb89 100644 --- a/p/themes/Mapco/_mobile.scss +++ b/p/themes/Mapco/_mobile.scss @@ -55,7 +55,8 @@ .aside .toggle_aside, #panel .close, - #close-slider.active { + #close-slider.active, + .dropdown-menu .toggle_aside { background: $main-first-alt; display: block; width: 100%; @@ -68,13 +69,13 @@ padding: 0.5rem; .item { - &.title { - display: none; - } - &.search { display: block; + form { + display: inherit; + } + .stick { display: flex; } @@ -95,9 +96,6 @@ } } - &.configure { - display: none; - } } } diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css index 551d431ce..3201e2855 100644 --- a/p/themes/Mapco/mapco.css +++ b/p/themes/Mapco/mapco.css @@ -1492,8 +1492,9 @@ form th { } .aside .toggle_aside, -#panel .close, -#close-slider.active { + #panel .close, + #close-slider.active, + .dropdown-menu .toggle_aside { background: #25c; display: block; width: 100%; @@ -1505,12 +1506,12 @@ form th { .header { padding: 0.5rem; } - .header .item.title { - display: none; - } .header .item.search { display: block; } + .header .item.search form { + display: inherit; + } .header .item.search .stick { display: flex; } @@ -1525,9 +1526,6 @@ form th { min-height: 49px; padding: 0.5rem 2rem; } - .header .item.configure { - display: none; - } .post { padding-left: 1rem; diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css index 0c04ba406..615d425b1 100644 --- a/p/themes/Mapco/mapco.rtl.css +++ b/p/themes/Mapco/mapco.rtl.css @@ -1492,8 +1492,9 @@ form th { } .aside .toggle_aside, -#panel .close, -#close-slider.active { + #panel .close, + #close-slider.active, + .dropdown-menu .toggle_aside { background: #25c; display: block; width: 100%; @@ -1505,12 +1506,12 @@ form th { .header { padding: 0.5rem; } - .header .item.title { - display: none; - } .header .item.search { display: block; } + .header .item.search form { + display: inherit; + } .header .item.search .stick { display: flex; } @@ -1525,9 +1526,6 @@ form th { min-height: 49px; padding: 0.5rem 2rem; } - .header .item.configure { - display: none; - } .post { padding-right: 1rem; diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css index a7bed815e..c56ab4181 100644 --- a/p/themes/Origine-compact/origine-compact.css +++ b/p/themes/Origine-compact/origine-compact.css @@ -1208,7 +1208,8 @@ a.btn, } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #f6f6f6; display: block; width: 100%; diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css index 64e1c3aed..3cad54d28 100644 --- a/p/themes/Origine-compact/origine-compact.rtl.css +++ b/p/themes/Origine-compact/origine-compact.rtl.css @@ -1208,7 +1208,8 @@ a.btn, } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #f6f6f6; display: block; width: 100%; diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index 31b9cc4fd..3c0a43eab 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -590,7 +590,6 @@ a.btn { /*=== Header */ .header { background: #f4f4f4; - height: 85px; } .header > .item { @@ -604,10 +603,6 @@ a.btn { width: 230px; } -.header > .item.title .logo { - margin: 0.5em 0; -} - .header > .item.search input { width: 230px; } @@ -1148,7 +1143,8 @@ a.btn { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #f6f6f6; display: block; width: 100%; diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css index da0837a27..de24dbd87 100644 --- a/p/themes/Origine/origine.rtl.css +++ b/p/themes/Origine/origine.rtl.css @@ -590,7 +590,6 @@ a.btn { /*=== Header */ .header { background: #f4f4f4; - height: 85px; } .header > .item { @@ -604,10 +603,6 @@ a.btn { width: 230px; } -.header > .item.title .logo { - margin: 0.5em 0; -} - .header > .item.search input { width: 230px; } @@ -1148,7 +1143,8 @@ a.btn { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #f6f6f6; display: block; width: 100%; diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css index 4f5443d2d..4e69ce75c 100644 --- a/p/themes/Pafat/pafat.css +++ b/p/themes/Pafat/pafat.css @@ -553,7 +553,6 @@ a.btn { /*=== Header */ .header { background: #41444f; - height: 85px; } .header > .item { @@ -1134,7 +1133,8 @@ a.signin { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #f6f6f6; display: block; width: 100%; diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css index 3c3ea2476..92f12077a 100644 --- a/p/themes/Pafat/pafat.rtl.css +++ b/p/themes/Pafat/pafat.rtl.css @@ -553,7 +553,6 @@ a.btn { /*=== Header */ .header { background: #41444f; - height: 85px; } .header > .item { @@ -1134,7 +1133,8 @@ a.signin { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #f6f6f6; display: block; width: 100%; diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css index 965980014..a7b8511d3 100644 --- a/p/themes/Screwdriver/screwdriver.css +++ b/p/themes/Screwdriver/screwdriver.css @@ -1263,7 +1263,8 @@ a.btn { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #171717; display: block; width: 100%; @@ -1344,10 +1345,6 @@ a.btn { } @media (max-width: 700px) { - .header { - display: none; - } - .nav-login { display: inline-block; width: 100%; diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css index 86489b0b4..24068a534 100644 --- a/p/themes/Screwdriver/screwdriver.rtl.css +++ b/p/themes/Screwdriver/screwdriver.rtl.css @@ -1263,7 +1263,8 @@ a.btn { } .aside .toggle_aside, - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: #171717; display: block; width: 100%; @@ -1344,10 +1345,6 @@ a.btn { } @media (max-width: 700px) { - .header { - display: none; - } - .nav-login { display: inline-block; width: 100%; diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css index 6710ae8da..d824201c0 100644 --- a/p/themes/Swage/swage.css +++ b/p/themes/Swage/swage.css @@ -179,6 +179,7 @@ form th { .form-group .group-controls .control { line-height: 2em; } + .stick { vertical-align: middle; font-size: 0; @@ -469,6 +470,7 @@ form th { max-height: 260px; } .box .box-content .item { + padding: 0 10px; font-size: 0.9rem; line-height: 2.5em; } @@ -586,7 +588,7 @@ form th { } .header .item.configure { position: fixed; - right: 0px; + right: 0; z-index: 1000; width: 35px; } @@ -921,6 +923,11 @@ form th { .header .item.title .logo { display: none; } + .header .item.configure { + padding: 0; + position: absolute; + right: 77px; + } .header > .item.title a { display: block; @@ -929,8 +936,7 @@ form th { left: 10px; } - .header .item.configure, -button.read_all.btn { + button.read_all.btn { display: none; } @@ -971,18 +977,21 @@ button.read_all.btn { height: 71px; } .nav_menu .btn { - margin: 5px 10px; + margin: 0; } .nav_menu .stick { - margin: 0 10px; + margin: 0; } .nav_menu .stick .btn { - margin: 5px 0; + margin: 0; } .nav_menu .search { position: absolute !important; - top: 35px; - left: 55px; + top: 3px; + left: 37px; + } + .nav_menu .search form { + display: block; } .nav_menu .search input { width: 85%; @@ -992,7 +1001,8 @@ button.read_all.btn { margin: 0 0 3.5em; } - #panel .close { + #panel .close, +.dropdown-menu .toggle_aside { background: #22303d; display: block; height: 50px; @@ -1035,7 +1045,7 @@ button.read_all.btn { a.btn.toggle_aside { position: absolute; - top: 29px; + top: 0; } form#mark-read-menu, @@ -1047,24 +1057,23 @@ div#nav_menu_views { } form#mark-read-menu { - right: 46px; - top: 30px; - z-index: 1100; + right: 38px; + top: 0; } a#actualize, a#toggle-order { - right: 0px; + right: 0; } a#actualize { - top: 29px; + top: 0; } a#toggle-order, div#nav_menu_actions, div#nav_menu_views { - top: 65px; + top: 36px; } div#nav_menu_actions { @@ -1152,6 +1161,4 @@ button.as-link { } #slider .form-group:hover { background: inital; -} - -/*# sourceMappingURL=swage.css.map */ +} \ No newline at end of file diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css index c100cfc30..faf51cd68 100644 --- a/p/themes/Swage/swage.rtl.css +++ b/p/themes/Swage/swage.rtl.css @@ -179,6 +179,7 @@ form th { .form-group .group-controls .control { line-height: 2em; } + .stick { vertical-align: middle; font-size: 0; @@ -469,6 +470,7 @@ form th { max-height: 260px; } .box .box-content .item { + padding: 0 10px; font-size: 0.9rem; line-height: 2.5em; } @@ -586,7 +588,7 @@ form th { } .header .item.configure { position: fixed; - left: 0px; + left: 0; z-index: 1000; width: 35px; } @@ -921,6 +923,11 @@ form th { .header .item.title .logo { display: none; } + .header .item.configure { + padding: 0; + position: absolute; + left: 77px; + } .header > .item.title a { display: block; @@ -929,8 +936,7 @@ form th { right: 10px; } - .header .item.configure, -button.read_all.btn { + button.read_all.btn { display: none; } @@ -971,18 +977,21 @@ button.read_all.btn { height: 71px; } .nav_menu .btn { - margin: 5px 10px; + margin: 0; } .nav_menu .stick { - margin: 0 10px; + margin: 0; } .nav_menu .stick .btn { - margin: 5px 0; + margin: 0; } .nav_menu .search { position: absolute !important; - top: 35px; - right: 55px; + top: 3px; + right: 37px; + } + .nav_menu .search form { + display: block; } .nav_menu .search input { width: 85%; @@ -992,7 +1001,8 @@ button.read_all.btn { margin: 0 0 3.5em; } - #panel .close { + #panel .close, +.dropdown-menu .toggle_aside { background: #22303d; display: block; height: 50px; @@ -1035,7 +1045,7 @@ button.read_all.btn { a.btn.toggle_aside { position: absolute; - top: 29px; + top: 0; } form#mark-read-menu, @@ -1047,24 +1057,23 @@ div#nav_menu_views { } form#mark-read-menu { - left: 46px; - top: 30px; - z-index: 1100; + left: 38px; + top: 0; } a#actualize, a#toggle-order { - left: 0px; + left: 0; } a#actualize { - top: 29px; + top: 0; } a#toggle-order, div#nav_menu_actions, div#nav_menu_views { - top: 65px; + top: 36px; } div#nav_menu_actions { @@ -1152,4 +1161,4 @@ button.as-link { } #slider .form-group:hover { background: inital; -} +} \ No newline at end of file diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss index aee9a0769..d7338e66a 100644 --- a/p/themes/Swage/swage.scss +++ b/p/themes/Swage/swage.scss @@ -576,13 +576,15 @@ form { background: darken( $color_light, 10%); color: darken( $color_light, 40% ); border-bottom: 1px solid darken( $color_light, 10%); - } - .configure { - margin-right: 4px; + .configure { + margin-right: 4px; + } } + + .box-content { padding-left: 30px; max-height: 260px; @@ -735,7 +737,7 @@ form { .item.configure { position: fixed; - right: 0px; + right: 0; z-index: 1000; width: 35px; } @@ -927,9 +929,11 @@ form { } } - .date { - color: darken( $color_light, 40% ); - font-size: 0.7rem; + .item { + &.date { + color: darken( $color_light, 40% ); + font-size: 0.7rem; + } } .bottom { @@ -1149,6 +1153,12 @@ form { .item.title .logo { display: none; } + + .item.configure { + padding: 0; + position: absolute; + right: 77px; + } } .header > .item.title a { @@ -1158,7 +1168,6 @@ form { left: 10px; } - .header .item.configure, button.read_all.btn { display: none; } @@ -1204,21 +1213,25 @@ form { height: 71px; .btn { - margin: 5px 10px; + margin: 0; } .stick { - margin: 0 10px; + margin: 0; .btn { - margin: 5px 0; + margin: 0; } } .search { position: absolute !important; - top: 35px; - left: 55px; + top: 3px; + left: 37px; + + form { + display: block; + } input { width: 85%; @@ -1230,7 +1243,8 @@ form { margin: 0 0 3.5em; } - #panel .close { + #panel .close, + .dropdown-menu .toggle_aside { background: $color_aside; display: block; height: 50px; @@ -1276,7 +1290,7 @@ form { a.btn.toggle_aside { position: absolute; - top: 29px; + top: 0; } form#mark-read-menu, @@ -1288,24 +1302,23 @@ form { } form#mark-read-menu { - right: 46px; - top: 30px; - z-index: 1100; + right: 38px; + top: 0; } a#actualize, a#toggle-order { - right: 0px; + right: 0; } a#actualize { - top: 29px; + top: 0; } a#toggle-order, div#nav_menu_actions, div#nav_menu_views { - top: 65px; + top: 36px; } div#nav_menu_actions { diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css index e7254e683..703ce2e13 100644 --- a/p/themes/base-theme/template.css +++ b/p/themes/base-theme/template.css @@ -525,30 +525,35 @@ a.btn { /*=== Scrollbar */ @supports (scrollbar-width: thin) { - #sidebar { + #sidebar, + .scrollbar-thin { overflow-y: auto; scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05); scrollbar-width: thin; } - #sidebar:hover { + #sidebar:hover, + .scrollbar-thin { scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05); } } @supports not (scrollbar-width: thin) { - #sidebar::-webkit-scrollbar { + #sidebar::-webkit-scrollbar, + .scrollbar-thin { background: rgba(0, 0, 0, 0.05); width: 8px; } - #sidebar::-webkit-scrollbar-thumb { + #sidebar::-webkit-scrollbar-thumb, + .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); display: unset; border-radius: 5px; } - #sidebar:hover::-webkit-scrollbar-thumb { + #sidebar:hover::-webkit-scrollbar-thumb, + .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); } } @@ -1299,7 +1304,8 @@ input:checked + .slide-container .properties { .nav-login, .nav_menu .search, .aside .toggle_aside, -.nav_menu .toggle_aside { +.nav_menu .toggle_aside, +.configure .dropdown-header-close { display: none; } @@ -1345,7 +1351,6 @@ input:checked + .slide-container .properties { /*===========*/ @media (max-width: 840px) { - .header, .flux_header .item.website span, .item.date, .day .date, .dropdown-menu > .no-mobile, @@ -1353,6 +1358,19 @@ input:checked + .slide-container .properties { display: none; } + .header > .item { + padding: 5px; + } + + .header > .item.title .logo { + height: 24px; + } + + + .item.search form { + display: none; + } + .form-group { margin-bottom: 10px; } @@ -1372,11 +1390,30 @@ input:checked + .slide-container .properties { position: fixed; } + .configure .dropdown .dropdown-menu { + width: 90%; + height: 100vh; + overflow: auto; + box-shadow: -3px 0 3px #aaa; + } + + .dropdown-target ~ .dropdown-menu { + width: 0; + + } + + .dropdown-target:target ~ .dropdown-menu { + display: table-cell; + z-index: 1000; + + } + .dropdown-menu::after { display: none; } .aside .toggle_aside, + .configure .dropdown-header-close, .nav-login { display: block; } diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css index 7c51cec74..9b111b756 100644 --- a/p/themes/base-theme/template.rtl.css +++ b/p/themes/base-theme/template.rtl.css @@ -525,30 +525,35 @@ a.btn { /*=== Scrollbar */ @supports (scrollbar-width: thin) { - #sidebar { + #sidebar, + .scrollbar-thin { overflow-y: auto; scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05); scrollbar-width: thin; } - #sidebar:hover { + #sidebar:hover, + .scrollbar-thin { scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05); } } @supports not (scrollbar-width: thin) { - #sidebar::-webkit-scrollbar { + #sidebar::-webkit-scrollbar, + .scrollbar-thin { background: rgba(0, 0, 0, 0.05); width: 8px; } - #sidebar::-webkit-scrollbar-thumb { + #sidebar::-webkit-scrollbar-thumb, + .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); display: unset; border-radius: 5px; } - #sidebar:hover::-webkit-scrollbar-thumb { + #sidebar:hover::-webkit-scrollbar-thumb, + .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); } } @@ -1299,7 +1304,8 @@ input:checked + .slide-container .properties { .nav-login, .nav_menu .search, .aside .toggle_aside, -.nav_menu .toggle_aside { +.nav_menu .toggle_aside, +.configure .dropdown-header-close { display: none; } @@ -1345,7 +1351,6 @@ input:checked + .slide-container .properties { /*===========*/ @media (max-width: 840px) { - .header, .flux_header .item.website span, .item.date, .day .date, .dropdown-menu > .no-mobile, @@ -1353,6 +1358,19 @@ input:checked + .slide-container .properties { display: none; } + .header > .item { + padding: 5px; + } + + .header > .item.title .logo { + height: 24px; + } + + + .item.search form { + display: none; + } + .form-group { margin-bottom: 10px; } @@ -1372,11 +1390,30 @@ input:checked + .slide-container .properties { position: fixed; } + .configure .dropdown .dropdown-menu { + width: 90%; + height: 100vh; + overflow: auto; + box-shadow: 3px 0 3px #aaa; + } + + .dropdown-target ~ .dropdown-menu { + width: 0; + + } + + .dropdown-target:target ~ .dropdown-menu { + display: table-cell; + z-index: 1000; + + } + .dropdown-menu::after { display: none; } .aside .toggle_aside, + .configure .dropdown-header-close, .nav-login { display: block; } -- cgit v1.2.3