Improved: CSS .toggle_aside (#4664)

* all themes

* fixed order

* fix end of file

* fixed swage

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);

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);
 	}
 

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);
 	}
 

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);
 	}
 

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);
 	}
 

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 {

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 {

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 {

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 {

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);

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);
 	}
 

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);
 	}
 

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;
 	}

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;
 	}

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 {

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 {

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 {

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 {

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 {

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 {

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;

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;

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%);

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 {

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 {

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;
 	}
 

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;
 	}