Improved: dropdown close area (#4293)

* fix Ansum theme: close X in white

* fix Mapco theme: close X in white

* move the dropdown-close outside of the list

* CSS

* bring flux elemt behind the grey background

* Update main.js

8 files changed, 48 insertions, 42 deletions

diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss
index cc5ce3f1c..e84dfe1cd 100644
--- a/p/themes/Ansum/_mobile.scss
+++ b/p/themes/Ansum/_mobile.scss
@@ -68,6 +68,10 @@
 		height: 50px;
 		line-height: 50px;
 		text-align: center;
+
+		.icon {
+			filter: grayscale(100%) brightness(2.5);
+		}
 	}
 
 	.header {
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index d60f11be4..7cdb2eed5 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -1442,6 +1442,12 @@ form th {
 		line-height: 50px;
 		text-align: center;
 	}
+	.aside .toggle_aside .icon,
+#panel .close .icon,
+#close-slider.active .icon,
+.dropdown-menu .toggle_aside .icon {
+		filter: grayscale(100%) brightness(2.5);
+	}
 
 	.header {
 		padding: 0.5rem;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index c3cda7f4d..458460573 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -1442,6 +1442,12 @@ form th {
 		line-height: 50px;
 		text-align: center;
 	}
+	.aside .toggle_aside .icon,
+#panel .close .icon,
+#close-slider.active .icon,
+.dropdown-menu .toggle_aside .icon {
+		filter: grayscale(100%) brightness(2.5);
+	}
 
 	.header {
 		padding: 0.5rem;
diff --git a/p/themes/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.scss
index 7cd15514c..92e5d833f 100644
--- a/p/themes/Mapco/_mobile.scss
+++ b/p/themes/Mapco/_mobile.scss
@@ -67,6 +67,10 @@
 		height: 50px;
 		line-height: 50px;
 		text-align: center;
+
+		.icon {
+			filter: grayscale(100%) brightness(2.5);
+		}
 	}
 
 	.header {
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index ac88f6a2f..b8a2281ba 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -1427,6 +1427,12 @@ form th {
 		line-height: 50px;
 		text-align: center;
 	}
+	.aside .toggle_aside .icon,
+#panel .close .icon,
+#close-slider.active .icon,
+.dropdown-menu .toggle_aside .icon {
+		filter: grayscale(100%) brightness(2.5);
+	}
 
 	.header {
 		padding: 0.5rem;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 82b3fdcfd..f38c8837e 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -1427,6 +1427,12 @@ form th {
 		line-height: 50px;
 		text-align: center;
 	}
+	.aside .toggle_aside .icon,
+#panel .close .icon,
+#close-slider.active .icon,
+.dropdown-menu .toggle_aside .icon {
+		filter: grayscale(100%) brightness(2.5);
+	}
 
 	.header {
 		padding: 0.5rem;
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 989ce74af..c1a34cf87 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -561,32 +561,18 @@ input[type="checkbox"]:focus-visible {
 	z-index: 1000;
 }
 
-.dropdown-close {
-	display: inline;
+.dropdown-menu + .dropdown-close {
+	display: none;
 }
 
-.dropdown-close a {
+.dropdown-target:target ~ .dropdown-close {
 	display: block;
 	font-size: 0;
 	position: fixed;
 	top: 0; bottom: 0;
 	left: 0; right: 0;
-	z-index: -11;
-	cursor: default;
-}
-
-.dropdown div.dropdown-close {
-	display: none;
-}
-
-.dropdown-target:target ~ div.dropdown-close {
-	display: block;
 	z-index: 999;
-	position: relative;
-}
-
-.dropdown-menu-scrollable .dropdown-close {
-	display: none;
+	cursor: default;
 }
 
 .separator {
@@ -993,7 +979,7 @@ input[type="search"] {
 /*=== Feed article header and footer */
 .flux_header {
 	background: inherit;
-	position: relative;
+	position: static;
 }
 
 .flux .item {
@@ -1795,7 +1781,8 @@ input:checked + .slide-container .properties {
 		display: inline-block;
 	}
 
-	.aside:target + .close-aside {
+	.aside:target + .close-aside,
+	.configure .dropdown-target:target ~ .dropdown-close {
 		background: rgba(0, 0, 0, 0.2);
 		display: block;
 		font-size: 0;
@@ -1804,7 +1791,7 @@ input:checked + .slide-container .properties {
 		bottom: 0;
 		left: 0;
 		right: 0;
-		cursor: pointer;
+		cursor: default;
 		z-index: 99;
 	}
 
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index a3fd59119..61ce3b0d2 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -561,32 +561,18 @@ input[type="checkbox"]:focus-visible {
 	z-index: 1000;
 }
 
-.dropdown-close {
-	display: inline;
+.dropdown-menu + .dropdown-close {
+	display: none;
 }
 
-.dropdown-close a {
+.dropdown-target:target ~ .dropdown-close {
 	display: block;
 	font-size: 0;
 	position: fixed;
 	top: 0; bottom: 0;
 	right: 0; left: 0;
-	z-index: -11;
-	cursor: default;
-}
-
-.dropdown div.dropdown-close {
-	display: none;
-}
-
-.dropdown-target:target ~ div.dropdown-close {
-	display: block;
 	z-index: 999;
-	position: relative;
-}
-
-.dropdown-menu-scrollable .dropdown-close {
-	display: none;
+	cursor: default;
 }
 
 .separator {
@@ -993,7 +979,7 @@ input[type="search"] {
 /*=== Feed article header and footer */
 .flux_header {
 	background: inherit;
-	position: relative;
+	position: static;
 }
 
 .flux .item {
@@ -1795,7 +1781,8 @@ input:checked + .slide-container .properties {
 		display: inline-block;
 	}
 
-	.aside:target + .close-aside {
+	.aside:target + .close-aside,
+	.configure .dropdown-target:target ~ .dropdown-close {
 		background: rgba(0, 0, 0, 0.2);
 		display: block;
 		font-size: 0;
@@ -1804,7 +1791,7 @@ input:checked + .slide-container .properties {
 		bottom: 0;
 		right: 0;
 		left: 0;
-		cursor: pointer;
+		cursor: default;
 		z-index: 99;
 	}