From 1ae5a5af147bca616497a53e94805362add21807 Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
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 <alexandre@alapetite.fr>
---
 p/themes/base-theme/template.css     | 51 +++++++++++++++++++++++++++++++-----
 p/themes/base-theme/template.rtl.css | 51 +++++++++++++++++++++++++++++++-----
 2 files changed, 88 insertions(+), 14 deletions(-)

(limited to 'p/themes/base-theme')

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