Improved: CSS .toggle_aside (#4664)

* all themes

* fixed order

* fix end of file

* fixed swage

27 files changed, 88 insertions, 197 deletions

diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss
index f397e0f86..9e90010c6 100644
--- a/p/themes/Ansum/_mobile.scss
+++ b/p/themes/Ansum/_mobile.scss
@@ -25,14 +25,13 @@
 
 	.aside .toggle_aside,
 	#panel .close,
-	#close-slider.active,
-	.dropdown-menu .toggle_aside {
-		background: variables.$main-first-alt;
-		display: block;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
+	.dropdown-menu .toggle_aside,
+	#slider .toggle_aside {
+		background-color: variables.$main-first;
+
+		&:hover {
+			background-color: variables.$main-first-alt;
+		}
 
 		.icon {
 			filter: grayscale(100%) brightness(2.5);
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index ad48d4f8f..0aeae0e08 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -1219,19 +1219,20 @@ main.prompt {
 
 	.aside .toggle_aside,
 #panel .close,
-#close-slider.active,
-.dropdown-menu .toggle_aside {
-		background: #b7641d;
-		display: block;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
+.dropdown-menu .toggle_aside,
+#slider .toggle_aside {
+		background-color: #ca7227;
+	}
+	.aside .toggle_aside:hover,
+#panel .close:hover,
+.dropdown-menu .toggle_aside:hover,
+#slider .toggle_aside:hover {
+		background-color: #b7641d;
 	}
 	.aside .toggle_aside .icon,
 #panel .close .icon,
-#close-slider.active .icon,
-.dropdown-menu .toggle_aside .icon {
+.dropdown-menu .toggle_aside .icon,
+#slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
 
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 2052a1598..429cb36aa 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -1219,19 +1219,20 @@ main.prompt {
 
 	.aside .toggle_aside,
 #panel .close,
-#close-slider.active,
-.dropdown-menu .toggle_aside {
-		background: #b7641d;
-		display: block;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
+.dropdown-menu .toggle_aside,
+#slider .toggle_aside {
+		background-color: #ca7227;
+	}
+	.aside .toggle_aside:hover,
+#panel .close:hover,
+.dropdown-menu .toggle_aside:hover,
+#slider .toggle_aside:hover {
+		background-color: #b7641d;
 	}
 	.aside .toggle_aside .icon,
 #panel .close .icon,
-#close-slider.active .icon,
-.dropdown-menu .toggle_aside .icon {
+.dropdown-menu .toggle_aside .icon,
+#slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
 
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index 31e283209..a375427ff 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -1171,13 +1171,9 @@ a.btn {
 
 	.aside .toggle_aside,
 	#panel .close,
-	.dropdown-menu .toggle_aside {
+	.dropdown-menu .toggle_aside,
+	#slider .toggle_aside {
 		background: #171717;
-		display: block;
-		width: 100%;
-		height: 40px;
-		line-height: 40px;
-		text-align: center;
 		box-shadow: 0 1px rgba(255,255,255,0.08);
 	}
 
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 8537af83c..778a5cecd 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -1171,13 +1171,9 @@ a.btn {
 
 	.aside .toggle_aside,
 	#panel .close,
-	.dropdown-menu .toggle_aside {
+	.dropdown-menu .toggle_aside,
+	#slider .toggle_aside {
 		background: #171717;
-		display: block;
-		width: 100%;
-		height: 40px;
-		line-height: 40px;
-		text-align: center;
 		box-shadow: 0 1px rgba(255,255,255,0.08);
 	}
 
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 751834798..0b05dfba4 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -1018,12 +1018,7 @@ a.btn {
 	#panel .close,
 	.dropdown-menu .toggle_aside {
 		background: #111;
-		display: block;
-		width: 100%;
-		height: 50px;
 		border-bottom: 1px solid #333;
-		line-height: 50px;
-		text-align: center;
 	}
 
 	.aside.aside_feed {
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 9522cb3c7..e12b45368 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -1018,12 +1018,7 @@ a.btn {
 	#panel .close,
 	.dropdown-menu .toggle_aside {
 		background: #111;
-		display: block;
-		width: 100%;
-		height: 50px;
 		border-bottom: 1px solid #333;
-		line-height: 50px;
-		text-align: center;
 	}
 
 	.aside.aside_feed {
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index ac6585c6f..14efcf175 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -1026,11 +1026,6 @@ a.btn {
 	#panel .close,
 	.dropdown-menu .toggle_aside {
 		background: #2c3e50;
-		display: block;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
 	}
 
 	.aside.aside_feed {
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index dc57e6d24..aa18c40db 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -1026,11 +1026,6 @@ a.btn {
 	#panel .close,
 	.dropdown-menu .toggle_aside {
 		background: #2c3e50;
-		display: block;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
 	}
 
 	.aside.aside_feed {
diff --git a/p/themes/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.scss
index 769434892..1c11448f0 100644
--- a/p/themes/Mapco/_mobile.scss
+++ b/p/themes/Mapco/_mobile.scss
@@ -25,14 +25,13 @@
 
 	.aside .toggle_aside,
 	#panel .close,
-	#close-slider.active,
-	.dropdown-menu .toggle_aside {
-		background: variables.$main-first-alt;
-		display: block;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
+	.dropdown-menu .toggle_aside,
+	#slider .toggle_aside {
+		background-color: variables.$main-first;
+
+		&:hover {
+			background-color: variables.$main-first-alt;
+		}
 
 		.icon {
 			filter: grayscale(100%) brightness(2.5);
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 06d612a8d..e1c1d262c 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -1248,19 +1248,20 @@ main.prompt {
 
 	.aside .toggle_aside,
 #panel .close,
-#close-slider.active,
-.dropdown-menu .toggle_aside {
-		background: #25c;
-		display: block;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
+.dropdown-menu .toggle_aside,
+#slider .toggle_aside {
+		background-color: #36c;
+	}
+	.aside .toggle_aside:hover,
+#panel .close:hover,
+.dropdown-menu .toggle_aside:hover,
+#slider .toggle_aside:hover {
+		background-color: #25c;
 	}
 	.aside .toggle_aside .icon,
 #panel .close .icon,
-#close-slider.active .icon,
-.dropdown-menu .toggle_aside .icon {
+.dropdown-menu .toggle_aside .icon,
+#slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
 
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 804483193..5aa6c6ee6 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -1248,19 +1248,20 @@ main.prompt {
 
 	.aside .toggle_aside,
 #panel .close,
-#close-slider.active,
-.dropdown-menu .toggle_aside {
-		background: #25c;
-		display: block;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
+.dropdown-menu .toggle_aside,
+#slider .toggle_aside {
+		background-color: #36c;
+	}
+	.aside .toggle_aside:hover,
+#panel .close:hover,
+.dropdown-menu .toggle_aside:hover,
+#slider .toggle_aside:hover {
+		background-color: #25c;
 	}
 	.aside .toggle_aside .icon,
 #panel .close .icon,
-#close-slider.active .icon,
-.dropdown-menu .toggle_aside .icon {
+.dropdown-menu .toggle_aside .icon,
+#slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
 
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index fcad17acc..5b41edcd4 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -1109,15 +1109,6 @@ input.extend {
 		transition: width 200ms linear;
 	}
 
-	.aside .toggle_aside,
-	#panel .close {
-		display: block;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
-	}
-
 	.aside.aside_feed {
 		padding: 0;
 	}
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index fe2fe4de8..fd6aa7dd3 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -1109,15 +1109,6 @@ input.extend {
 		transition: width 200ms linear;
 	}
 
-	.aside .toggle_aside,
-	#panel .close {
-		display: block;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
-	}
-
 	.aside.aside_feed {
 		padding: 0;
 	}
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 83e0822a2..6ef335fdd 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -1021,12 +1021,7 @@ a.btn,
 	#panel .close,
 	.dropdown-menu .toggle_aside {
 		background: #f6f6f6;
-		display: block;
-		width: 100%;
-		height: 50px;
 		border-bottom: 1px solid #ddd;
-		line-height: 50px;
-		text-align: center;
 	}
 
 	.aside.aside_feed {
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 9efd136ad..f52dcc1c3 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -1021,12 +1021,7 @@ a.btn,
 	#panel .close,
 	.dropdown-menu .toggle_aside {
 		background: #f6f6f6;
-		display: block;
-		width: 100%;
-		height: 50px;
 		border-bottom: 1px solid #ddd;
-		line-height: 50px;
-		text-align: center;
 	}
 
 	.aside.aside_feed {
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 14266cc79..aef22b4ca 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -1006,12 +1006,7 @@ a.signin {
 	#panel .close,
 	.dropdown-menu .toggle_aside {
 		background: #f6f6f6;
-		display: block;
-		width: 100%;
-		height: 40px;
 		border-bottom: 1px solid #ddd;
-		line-height: 40px;
-		text-align: center;
 	}
 
 	.aside.aside_feed {
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 2a9daf39f..dea595bda 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -1006,12 +1006,7 @@ a.signin {
 	#panel .close,
 	.dropdown-menu .toggle_aside {
 		background: #f6f6f6;
-		display: block;
-		width: 100%;
-		height: 40px;
 		border-bottom: 1px solid #ddd;
-		line-height: 40px;
-		text-align: center;
 	}
 
 	.aside.aside_feed {
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 9672a25d5..a34547044 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -1149,13 +1149,8 @@ a.btn {
 	#panel .close,
 	.dropdown-menu .toggle_aside {
 		background: #171717;
-		display: block;
-		width: 100%;
-		height: 40px;
 		border-radius: 0 8px 0 8px;
 		box-shadow: 0 1px rgba(255,255,255,0.08);
-		line-height: 40px;
-		text-align: center;
 	}
 
 	.aside.aside_feed {
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 716316660..97f3590b2 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -1149,13 +1149,8 @@ a.btn {
 	#panel .close,
 	.dropdown-menu .toggle_aside {
 		background: #171717;
-		display: block;
-		width: 100%;
-		height: 40px;
 		border-radius: 8px 0 8px 0;
 		box-shadow: 0 1px rgba(255,255,255,0.08);
-		line-height: 40px;
-		text-align: center;
 	}
 
 	.aside.aside_feed {
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 08c9b380d..a6cc3a09a 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -710,11 +710,6 @@ form th {
 
 .reader .aside .toggle_aside {
 	background: #22303d;
-	display: block;
-	width: 100%;
-	height: 50px;
-	line-height: 50px;
-	text-align: center;
 }
 .reader .aside .toggle_aside .icon {
 	filter: brightness(3);
@@ -1027,11 +1022,6 @@ a.signin {
 	}
 	.aside .toggle_aside {
 		background: #22303d;
-		display: block;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
-		padding-right: 10px;
 	}
 	.aside .toggle_aside:hover {
 		background-color: #0062be;
@@ -1052,11 +1042,6 @@ a.signin {
 
 	#slider .toggle_aside {
 		background: #22303d;
-		display: block;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
-		padding-right: 10px;
 	}
 	#slider .toggle_aside:hover {
 		background-color: #0062be;
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index f486cd030..6b1712877 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -710,11 +710,6 @@ form th {
 
 .reader .aside .toggle_aside {
 	background: #22303d;
-	display: block;
-	width: 100%;
-	height: 50px;
-	line-height: 50px;
-	text-align: center;
 }
 .reader .aside .toggle_aside .icon {
 	filter: brightness(3);
@@ -1027,11 +1022,6 @@ a.signin {
 	}
 	.aside .toggle_aside {
 		background: #22303d;
-		display: block;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
-		padding-left: 10px;
 	}
 	.aside .toggle_aside:hover {
 		background-color: #0062be;
@@ -1052,11 +1042,6 @@ a.signin {
 
 	#slider .toggle_aside {
 		background: #22303d;
-		display: block;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
-		padding-left: 10px;
 	}
 	#slider .toggle_aside:hover {
 		background-color: #0062be;
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index c690e13c2..ea9a83716 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -908,11 +908,6 @@ form {
 	.aside {
 		.toggle_aside {
 			background: $color_aside;
-			display: block;
-			width: 100%;
-			height: 50px;
-			line-height: 50px;
-			text-align: center;
 
 			.icon {
 				filter: brightness(3);
@@ -1297,11 +1292,6 @@ a.signin {
 
 		.toggle_aside {
 			background: $color_aside;
-			display: block;
-			height: 50px;
-			line-height: 50px;
-			text-align: center;
-			padding-right: 10px;
 
 			&:hover {
 				background-color: color.adjust( $color_nav, $lightness: 0%);
@@ -1328,11 +1318,6 @@ a.signin {
 	#slider {
 		.toggle_aside {
 			background: $color_aside;
-			display: block;
-			height: 50px;
-			line-height: 50px;
-			text-align: center;
-			padding-right: 10px;
 
 			&:hover {
 				background-color: color.adjust( $color_nav, $lightness: 0%);
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 7ce91c584..6c0531969 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -812,12 +812,18 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
-		display: block;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
+	#panel .close,
+	.dropdown-menu .toggle_aside,
+	#slider .toggle_aside {
+		background: #fff;
+		border-bottom-color: #ddd;
+	}
+
+	.aside .toggle_aside:hover,
+	#panel .close:hover,
+	.dropdown-menu .toggle_aside:hover,
+	#slider .toggle_aside:hover {
+		background-color: #ddd;
 	}
 
 	.aside.aside_feed {
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index 380afb972..a25776f1d 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -812,12 +812,18 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
-		display: block;
-		width: 100%;
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
+	#panel .close,
+	.dropdown-menu .toggle_aside,
+	#slider .toggle_aside {
+		background: #fff;
+		border-bottom-color: #ddd;
+	}
+
+	.aside .toggle_aside:hover,
+	#panel .close:hover,
+	.dropdown-menu .toggle_aside:hover,
+	#slider .toggle_aside:hover {
+		background-color: #ddd;
 	}
 
 	.aside.aside_feed {
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 1ce760690..1f97f0483 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1921,11 +1921,10 @@ input:checked + .slide-container .properties {
 	#panel .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
+		padding: 1rem;
 		display: block;
 		width: 100%;
-		height: 50px;
 		border-bottom: 1px solid var(--frss-border-color);
-		line-height: 50px;
 		text-align: center;
 	}
 
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index d5aeb3429..718b888d9 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1921,11 +1921,10 @@ input:checked + .slide-container .properties {
 	#panel .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
+		padding: 1rem;
 		display: block;
 		width: 100%;
-		height: 50px;
 		border-bottom: 1px solid var(--frss-border-color);
-		line-height: 50px;
 		text-align: center;
 	}