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

* CSS

* fix order

* no X icon

* improved CSS

* Update queries.phtml

4 files changed, 38 insertions, 2 deletions

diff --git a/app/views/extension/index.phtml b/app/views/extension/index.phtml
index b94af7947..dea2a9977 100644
--- a/app/views/extension/index.phtml
+++ b/app/views/extension/index.phtml
@@ -77,7 +77,6 @@
 			</table>
 		</div>
 	<?php } ?>
-
 	<?php $class = isset($this->extension) ? ' active' : ''; ?>
 	<a href="#" id="close-slider" class="<?= $class ?>">
 		<?= _i('close') ?>
diff --git a/app/views/subscription/index.phtml b/app/views/subscription/index.phtml
index fd3d1e69e..446d64bff 100644
--- a/app/views/subscription/index.phtml
+++ b/app/views/subscription/index.phtml
@@ -73,7 +73,6 @@
 			</div>
 		</div>
 	</div>
-
 	<?php $class = $this->displaySlider ? ' active' : ''; ?>
 	<a href="#" id="close-slider" class="<?= $class ?>">
 		<?= _i('close') ?>
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;
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index be934009b..48a48efd5 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -1445,6 +1445,7 @@ br {
 	overflow: auto;
 	border-right: 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;
 	right: 0;
+	z-index: 99;
 }
 
 #close-slider img {
 	display: none;
 }
 
+#close-slider.active img {
+	padding: 0.5rem;
+	display: inline-block;
+	position: absolute;
+	top: 0.5rem;
+	right: 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;