Improved: Slider: Close area = grey background (#4292)

* CSS

* fix order

* no X icon

* improved CSS

* Update queries.phtml

1 files changed, 19 insertions, 0 deletions

diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index df0f6d323..8c301c5ef 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -1445,6 +1445,7 @@ br {
 	overflow: auto;
 	border-left: 1px solid #aaa;
 	transition: width 200ms linear;
+	z-index: 100;
 }
 
 #slider.active {
@@ -1459,13 +1460,25 @@ br {
 }
 
 #close-slider.active {
+	background: rgba(0, 0, 0, 0.2);
+	font-size: 0;
 	left: 0;
+	z-index: 99;
 }
 
 #close-slider img {
 	display: none;
 }
 
+#close-slider.active img {
+	padding: 0.5rem;
+	display: inline-block;
+	position: absolute;
+	top: 0.5rem;
+	left: 0.5rem;
+	filter: grayscale(100%) brightness(2.5);
+}
+
 /*=== SLIDESHOW */
 /*==============*/
 .slides {
@@ -1881,6 +1894,12 @@ input:checked + .slide-container .properties {
 		display: initial;
 	}
 
+	#close-slider.active img {
+		display: initial;
+		position: initial;
+		filter: initial;
+	}
+
 	#close-slider.active {
 		background: #f6f6f6;
 		display: block;