Преглед изворни кода

Improve sidebar toggle button position (#8286)

Ref https://github.com/FreshRSS/FreshRSS/pull/8201#issuecomment-3610813235

<img width="422" height="119" alt="grafik" src="https://github.com/user-attachments/assets/0859bf55-d8e6-4401-adda-e854bf41a64a" />
maTh пре 4 месеци
родитељ
комит
d9ac9c513f

+ 1 - 1
p/themes/Ansum/_layout.css

@@ -154,7 +154,7 @@ main.prompt {
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
-	padding: 5px 0;
+	padding: 5px 0 5px 3.75rem;
 
 	.btn {
 		border-left-width: 0;

+ 1 - 1
p/themes/Ansum/_layout.rtl.css

@@ -154,7 +154,7 @@ main.prompt {
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
-	padding: 5px 0;
+	padding: 5px 3.75rem 5px 0;
 
 	.btn {
 		border-right-width: 0;

+ 2 - 0
p/themes/Ansum/_mobile.css

@@ -61,6 +61,8 @@
 	}
 
 	.nav_menu {
+		padding-left: 0;
+
 		.btn {
 			margin: 0;
 			padding: 0.85rem 1.25rem;

+ 2 - 0
p/themes/Ansum/_mobile.rtl.css

@@ -61,6 +61,8 @@
 	}
 
 	.nav_menu {
+		padding-right: 0;
+
 		.btn {
 			margin: 0;
 			padding: 0.85rem 1.25rem;

+ 1 - 1
p/themes/Mapco/_layout.css

@@ -163,7 +163,7 @@ main.prompt {
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
-	padding: 5px 0;
+	padding: 5px 0 5px 3.75rem;
 
 	.btn {
 		border-left-width: 0;

+ 1 - 1
p/themes/Mapco/_layout.rtl.css

@@ -163,7 +163,7 @@ main.prompt {
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
-	padding: 5px 0;
+	padding: 5px 3.75rem 5px 0;
 
 	.btn {
 		border-right-width: 0;

+ 2 - 0
p/themes/Mapco/_mobile.css

@@ -68,6 +68,8 @@
 	}
 
 	.nav_menu {
+		padding-left: 0;
+
 		.btn {
 			margin: 0;
 			padding: 0.85rem 1.25rem;

+ 2 - 0
p/themes/Mapco/_mobile.rtl.css

@@ -68,6 +68,8 @@
 	}
 
 	.nav_menu {
+		padding-right: 0;
+
 		.btn {
 			margin: 0;
 			padding: 0.85rem 1.25rem;

+ 16 - 12
p/themes/Pafat/pafat.css

@@ -784,7 +784,7 @@ a.signin {
 
 /*=== Index menu */
 .nav_menu {
-	padding: 5px 0;
+	padding: 5px 0 0 2.5rem;
 	background-color: var(--background-color-grey-light);
 	border-bottom: 1px solid var(--border-color-grey-dark);
 	text-align: center;
@@ -1087,19 +1087,23 @@ a.signin {
 		padding: 0;
 	}
 
-	.nav_menu .btn {
-		margin: 5px 10px;
-	}
+	.nav_menu {
+		padding-left: 0;
 
-	.nav_menu .stick,
-	.nav_menu .group {
-		margin: 0 10px;
-		min-width: 0;
-	}
+		.nav_menu .btn {
+			margin: 5px 10px;
+		}
+
+		.nav_menu .stick,
+		.nav_menu .group {
+			margin: 0 10px;
+			min-width: 0;
+		}
 
-	.nav_menu .stick .btn,
-	.nav_menu .group .btn {
-		margin: 5px 0;
+		.nav_menu .stick .btn,
+		.nav_menu .group .btn {
+			margin: 5px 0;
+		}
 	}
 
 	.dropdown-target:target ~ .dropdown-toggle::after {

+ 16 - 12
p/themes/Pafat/pafat.rtl.css

@@ -784,7 +784,7 @@ a.signin {
 
 /*=== Index menu */
 .nav_menu {
-	padding: 5px 0;
+	padding: 5px 2.5rem 0 0;
 	background-color: var(--background-color-grey-light);
 	border-bottom: 1px solid var(--border-color-grey-dark);
 	text-align: center;
@@ -1087,19 +1087,23 @@ a.signin {
 		padding: 0;
 	}
 
-	.nav_menu .btn {
-		margin: 5px 10px;
-	}
+	.nav_menu {
+		padding-right: 0;
 
-	.nav_menu .stick,
-	.nav_menu .group {
-		margin: 0 10px;
-		min-width: 0;
-	}
+		.nav_menu .btn {
+			margin: 5px 10px;
+		}
+
+		.nav_menu .stick,
+		.nav_menu .group {
+			margin: 0 10px;
+			min-width: 0;
+		}
 
-	.nav_menu .stick .btn,
-	.nav_menu .group .btn {
-		margin: 5px 0;
+		.nav_menu .stick .btn,
+		.nav_menu .group .btn {
+			margin: 5px 0;
+		}
 	}
 
 	.dropdown-target:target ~ .dropdown-toggle::after {

+ 9 - 1
p/themes/Swage/swage.css

@@ -955,7 +955,7 @@ main.post .drop-section li.item.feed a:hover .icon {
 
 
 .nav_menu {
-	padding: 0;
+	padding: 0 0 0 2rem;
 	width: 100%;
 	font-size: 0;
 	background-color: var(--color-background-nav);
@@ -975,6 +975,10 @@ main.post .drop-section li.item.feed a:hover .icon {
 		}
 	}
 
+	#nav_menu_toggle_aside {
+		left: 0;
+	}
+
 	#toggle-unread,
 	#toggle-starred {
 		.icon {
@@ -1473,6 +1477,10 @@ main.global {
 				width: 100%;
 			}
 		}
+
+		#nav_menu_toggle_aside {
+			position: absolute;
+		}
 	}
 
 	#overlay .close,

+ 9 - 1
p/themes/Swage/swage.rtl.css

@@ -955,7 +955,7 @@ main.post .drop-section li.item.feed a:hover .icon {
 
 
 .nav_menu {
-	padding: 0;
+	padding: 0 2rem 0 0;
 	width: 100%;
 	font-size: 0;
 	background-color: var(--color-background-nav);
@@ -975,6 +975,10 @@ main.post .drop-section li.item.feed a:hover .icon {
 		}
 	}
 
+	#nav_menu_toggle_aside {
+		right: 0;
+	}
+
 	#toggle-unread,
 	#toggle-starred {
 		.icon {
@@ -1473,6 +1477,10 @@ main.global {
 				width: 100%;
 			}
 		}
+
+		#nav_menu_toggle_aside {
+			position: absolute;
+		}
 	}
 
 	#overlay .close,

+ 24 - 10
p/themes/base-theme/frss.css

@@ -2338,19 +2338,25 @@ html.slider-active {
 .nav_menu {
 	padding-top: var(--frss-padding-top-bottom);
 	padding-bottom: var(--frss-padding-top-bottom);
-	padding-left: 0.5rem;
+	padding-left: 3rem;
 	padding-right: 0.5rem;
 	background: inherit;
 	text-align: center;
-}
+	position: relative;
 
-.nav_menu .stick {
-	max-width: 500px;
-}
+	.stick {
+		max-width: 500px;
+	}
+
+	select {
+		max-width: 300px;
+		width: 60%;
+	}
 
-.nav_menu select {
-	max-width: 300px;
-	width: 60%;
+	#nav_menu_toggle_aside {
+		position: absolute;
+		left: 0.5rem;
+	}
 }
 
 .nav_mobile {
@@ -2652,8 +2658,16 @@ html.slider-active {
 		display: block;
 	}
 
-	.nav_menu .toggle_aside {
-		display: inline-block;
+	.nav_menu {
+		padding-left: 0.5rem;
+
+		.toggle_aside {
+			display: inline-block;
+		}
+
+		#nav_menu_toggle_aside {
+			position: unset;
+		}
 	}
 
 	.aside.visible + .close-aside,

+ 24 - 10
p/themes/base-theme/frss.rtl.css

@@ -2338,19 +2338,25 @@ html.slider-active {
 .nav_menu {
 	padding-top: var(--frss-padding-top-bottom);
 	padding-bottom: var(--frss-padding-top-bottom);
-	padding-right: 0.5rem;
+	padding-right: 3rem;
 	padding-left: 0.5rem;
 	background: inherit;
 	text-align: center;
-}
+	position: relative;
 
-.nav_menu .stick {
-	max-width: 500px;
-}
+	.stick {
+		max-width: 500px;
+	}
+
+	select {
+		max-width: 300px;
+		width: 60%;
+	}
 
-.nav_menu select {
-	max-width: 300px;
-	width: 60%;
+	#nav_menu_toggle_aside {
+		position: absolute;
+		right: 0.5rem;
+	}
 }
 
 .nav_mobile {
@@ -2652,8 +2658,16 @@ html.slider-active {
 		display: block;
 	}
 
-	.nav_menu .toggle_aside {
-		display: inline-block;
+	.nav_menu {
+		padding-right: 0.5rem;
+
+		.toggle_aside {
+			display: inline-block;
+		}
+
+		#nav_menu_toggle_aside {
+			position: unset;
+		}
 	}
 
 	.aside.visible + .close-aside,