Improved: Remove <li> as separator (#4597)

* templates

* themes

* fix

* fix

* fixes

* fix

34 files changed, 203 insertions, 175 deletions

diff --git a/app/layout/aside_feed.phtml b/app/layout/aside_feed.phtml
index 79a83e1ba..3c4f1ec2e 100644
--- a/app/layout/aside_feed.phtml
+++ b/app/layout/aside_feed.phtml
@@ -163,9 +163,7 @@
 		<li class="item"><a href="<?= _url('stats', 'repartition', 'id', '------') ?>"><?= _t('index.menu.stats') ?></a></li>
 		<?php } ?>
 		<li class="item link website"><a target="_blank" rel="noreferrer" href="http://example.net/"><?= _t('gen.action.see_website') ?></a></li>
-		<?php if (FreshRSS_Auth::hasAccess()) { ?>
-		<li class="separator"></li>
-		<?php
+		<?php if (FreshRSS_Auth::hasAccess()) {
 		$get = Minz_Request::param('get');
 		if (!$get) {
 			$url = _url('subscription', 'feed', 'id', '------', 'from', $actual_view);
diff --git a/app/layout/header.phtml b/app/layout/header.phtml
index fc83b2044..f8e54c7ce 100644
--- a/app/layout/header.phtml
+++ b/app/layout/header.phtml
@@ -55,7 +55,6 @@
 				<?php else: ?>
 				<li class="item"><span class="signout">(<?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8') ?>)</span></li>
 				<?php endif; ?>
-				<li class="separator"></li>
 				<li class="dropdown-header"><?= _t('gen.menu.configuration') ?></li>
 				<li class="item"><a href="<?= _url('configure', 'display') ?>"><?= _t('gen.menu.display') ?></a></li>
 				<li class="item"><a href="<?= _url('configure', 'reading') ?>"><?= _t('gen.menu.reading') ?></a></li>
@@ -67,7 +66,6 @@
 				<?= Minz_ExtensionManager::callHook('menu_configuration_entry') ?>
 
 				<?php if (FreshRSS_Auth::hasAccess('admin')) { ?>
-				<li class="separator"></li>
 				<li class="dropdown-header"><?= _t('gen.menu.admin') ?></li>
 				<li class="item"><a href="<?= _url('configure', 'system') ?>"><?= _t('gen.menu.system') ?></a></li>
 				<li class="item"><a href="<?= _url('user', 'manage') ?>"><?= _t('gen.menu.user_management') ?></a></li>
@@ -79,7 +77,6 @@
 				<?= Minz_ExtensionManager::callHook('menu_admin_entry') ?>
 				<?php } ?>
 
-				<li class="separator"></li>
 				<li class="item"><a href="<?= _url('index', 'logs') ?>"><?= _t('gen.menu.logs') ?></a></li>
 				<li class="item"><a href="<?= _url('index', 'about') ?>"><?= _t('gen.menu.about') ?></a></li>
 				<?= Minz_ExtensionManager::callHook('menu_other_entry') ?>
diff --git a/app/layout/nav_menu.phtml b/app/layout/nav_menu.phtml
index ee15cfe61..e8c4170c9 100644
--- a/app/layout/nav_menu.phtml
+++ b/app/layout/nav_menu.phtml
@@ -50,16 +50,17 @@
 					</li>
 				<?php endforeach; ?>
 
-				<?php if (count(FreshRSS_Context::$user_conf->queries) > 0) { ?>
-				<li class="separator"></li>
-				<?php } ?>
-
 				<?php
-					$url_query = Minz_Request::currentRequest();;
+					$classSeparator = '';
+					if (count(FreshRSS_Context::$user_conf->queries) > 0) {
+						$classSeparator = ' separator';
+					}
+
+					$url_query = Minz_Request::currentRequest();
 					$url_query['c'] = 'configure';
 					$url_query['a'] = 'bookmarkQuery';
 				?>
-				<li class="item"><a href="<?= Minz_Url::display($url_query) ?>"><?= _i('bookmark-add') ?> <?= _t('index.menu.bookmark_query') ?></a></li>
+				<li class="item<?= $classSeparator ?>"><a href="<?= Minz_Url::display($url_query) ?>"><?= _i('bookmark-add') ?> <?= _t('index.menu.bookmark_query') ?></a></li>
 			</ul>
 			<a class="dropdown-close" href="#close">❌</a>
 		</div>
@@ -112,7 +113,6 @@
 						formaction="<?= Minz_Url::display($mark_read_url) ?>"
 						type="submit"><?= $string_mark ?></button>
 				</li>
-				<li class="separator"></li>
 <?php
 	$today = @strtotime('today');
 	$mark_before_today = $mark_read_url;
@@ -121,7 +121,7 @@
 	$mark_before_one_week['params']['idMax'] = ($today - 604800) . '000000';
 	$mark_unread_enabled = FreshRSS_Context::isStateEnabled(FreshRSS_Entry::STATE_READ) or !FreshRSS_Context::isStateEnabled(FreshRSS_Entry::STATE_NOT_READ);
 ?>
-				<li class="item">
+				<li class="item separator">
 					<button class="as-link <?= $confirm ?>"
 						form="mark-read-menu"
 						formaction="<?= Minz_Url::display($mark_before_today) ?>"
@@ -133,8 +133,7 @@
 						formaction="<?= Minz_Url::display($mark_before_one_week) ?>"
 						type="submit"><?= _t('index.menu.before_one_week') ?></button>
 				</li>
-				<li class="separator"></li>
-				<li class="item">
+				<li class="item separator">
 					<button class="as-link <?= $mark_unread_enabled ? $confirm : '" disabled="disabled' ?>"
 						form="mark-read-menu"
 						formaction="<?= Minz_Url::display($mark_unread_url) ?>"
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 7b6efda44..9a771e51c 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -409,9 +409,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid var(--border-color-dark);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: var(--border-color-dark);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index c461a2896..0368a9761 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -409,9 +409,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid var(--border-color-dark);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: var(--border-color-dark);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index acb2430ff..35298b4de 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -38,8 +38,7 @@
 	}
 
 	.dropdown-header {
-		// padding: 0 5px 5px;
-		margin: 1rem 0.5rem 1rem 1rem;
+		padding: 1rem 0.5rem 1rem 1rem;
 		font-weight: bold;
 		text-align: left;
 		color: variables.$grey-dark;
@@ -74,12 +73,35 @@
 			}
 		}
 
+		&:not(.addItem) {
+			a:hover,
+			button:hover {
+				background: variables.$main-first;
+				color: variables.$white;
+
+				.icon {
+					filter: brightness(3);
+				}
+			}
+		}
+
 		&[aria-checked="true"] {
 			a::before {
 				margin: 0 0 0 -14px;
 				font-weight: bold;
 			}
 		}
+
+		~ .dropdown-header {
+			margin-top: 0.75rem;
+			padding-top: 1.75rem;
+			border-top-color: variables.$grey-light;
+		}
+
+		&.separator {
+			margin-top: 0.75rem;
+			border-top-color: variables.$grey-light;
+		}
 	}
 
 	.input {
@@ -90,12 +112,6 @@
 		}
 	}
 
-	.separator {
-		margin: 0.75rem 0;
-		border-bottom: 1px solid variables.$grey-light;
-		// display: none;
-	}
-
 }
 
 .tree .tree-folder .tree-folder-items .dropdown-menu {
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 0aeae0e08..8e2ace58e 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -243,7 +243,7 @@ form th {
 	right: 17px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1rem 0.5rem 1rem 1rem;
+	padding: 1rem 0.5rem 1rem 1rem;
 	font-weight: bold;
 	text-align: left;
 	color: #766556;
@@ -270,19 +270,33 @@ form th {
 .dropdown-menu .item:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
+.dropdown-menu .item:not(.addItem) a:hover,
+.dropdown-menu .item:not(.addItem) button:hover {
+	background: #ca7227;
+	color: #fff;
+}
+.dropdown-menu .item:not(.addItem) a:hover .icon,
+.dropdown-menu .item:not(.addItem) button:hover .icon {
+	filter: brightness(3);
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 0 0 -14px;
 	font-weight: bold;
 }
+.dropdown-menu .item ~ .dropdown-header {
+	margin-top: 0.75rem;
+	padding-top: 1.75rem;
+	border-top-color: #f5f0ec;
+}
+.dropdown-menu .item.separator {
+	margin-top: 0.75rem;
+	border-top-color: #f5f0ec;
+}
 .dropdown-menu .input select, .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 	border-radius: 3px;
 }
-.dropdown-menu .separator {
-	margin: 0.75rem 0;
-	border-bottom: 1px solid #f5f0ec;
-}
 
 .tree .tree-folder .tree-folder-items .dropdown-menu .item {
 	padding: 0;
@@ -1363,6 +1377,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
-
-/*# sourceMappingURL=ansum.css.map */
+}
\ No newline at end of file
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 429cb36aa..f09f5c1bf 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -243,7 +243,7 @@ form th {
 	left: 17px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1rem 1rem 1rem 0.5rem;
+	padding: 1rem 1rem 1rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #766556;
@@ -270,19 +270,33 @@ form th {
 .dropdown-menu .item:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
+.dropdown-menu .item:not(.addItem) a:hover,
+.dropdown-menu .item:not(.addItem) button:hover {
+	background: #ca7227;
+	color: #fff;
+}
+.dropdown-menu .item:not(.addItem) a:hover .icon,
+.dropdown-menu .item:not(.addItem) button:hover .icon {
+	filter: brightness(3);
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 -14px 0 0;
 	font-weight: bold;
 }
+.dropdown-menu .item ~ .dropdown-header {
+	margin-top: 0.75rem;
+	padding-top: 1.75rem;
+	border-top-color: #f5f0ec;
+}
+.dropdown-menu .item.separator {
+	margin-top: 0.75rem;
+	border-top-color: #f5f0ec;
+}
 .dropdown-menu .input select, .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 	border-radius: 3px;
 }
-.dropdown-menu .separator {
-	margin: 0.75rem 0;
-	border-bottom: 1px solid #f5f0ec;
-}
 
 .tree .tree-folder .tree-folder-items .dropdown-menu .item {
 	padding: 0;
@@ -1363,4 +1377,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
+}
\ No newline at end of file
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index a375427ff..00b9589b0 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -365,10 +365,6 @@ a.btn {
 	transform: rotate(45deg);
 }
 
-.configure .dropdown-header {
-	display: none;
-}
-
 .dropdown-header {
 	padding: 0 5px 5px;
 	color: #ccc;
@@ -404,10 +400,9 @@ a.btn {
 	margin: 0 0 0 -14px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #171717;
-	box-shadow: 0 1px rgba(255,255,255,0.08);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: rgba(255,255,255,0.08);
 }
 
 /*=== Alerts */
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 778a5cecd..d2d0c0d5d 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -365,10 +365,6 @@ a.btn {
 	transform: rotate(-45deg);
 }
 
-.configure .dropdown-header {
-	display: none;
-}
-
 .dropdown-header {
 	padding: 0 5px 5px;
 	color: #ccc;
@@ -404,10 +400,9 @@ a.btn {
 	margin: 0 -14px 0 0;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #171717;
-	box-shadow: 0 1px rgba(255,255,255,0.08);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: rgba(255,255,255,0.08);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 0b05dfba4..e1bfd7bd4 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -384,9 +384,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #333;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #333;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index e12b45368..5e1cfdba5 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -384,9 +384,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #333;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #333;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 14efcf175..548a02036 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -386,9 +386,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #ddd;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index aa18c40db..bd3f38cd8 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -386,9 +386,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #ddd;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index 594ef4371..cf7aca73d 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -38,13 +38,12 @@
 	}
 
 	.dropdown-header {
-		margin: 1rem 0.5rem 1rem 1rem;
+		padding: 1rem 0.5rem 1rem 1rem;
 		font-weight: bold;
 		text-align: left;
 		color: variables.$grey-dark;
 		text-transform: uppercase;
 		letter-spacing: 1px;
-
 	}
 
 	.item {
@@ -58,17 +57,15 @@
 			line-height: 2.5em;
 		}
 
-		&:not(.addItem):hover {
-			background: variables.$main-first;
-			color: variables.$white;
-
-			.icon {
-				filter: brightness(3);
-			}
-
-			a, button, label {
-				text-decoration: none;
+		&:not(.addItem) {
+			a:hover,
+			button:hover {
+				background: variables.$main-first;
 				color: variables.$white;
+
+				.icon {
+					filter: brightness(3);
+				}
 			}
 		}
 
@@ -78,6 +75,17 @@
 				font-weight: bold;
 			}
 		}
+
+		~ .dropdown-header {
+			margin-top: 0.75rem;
+			padding-top: 1.75rem;
+			border-top-color: variables.$grey-light;
+		}
+
+		&.separator {
+			margin-top: 0.75rem;
+			border-top-color: variables.$grey-light;
+		}
 	}
 
 	.input {
@@ -87,12 +95,6 @@
 			border-radius: 3px;
 		}
 	}
-
-	.separator {
-		margin: 0.75rem 0;
-		border-bottom: 1px solid variables.$grey-light;
-	}
-
 }
 
 .tree .tree-folder .tree-folder-items .dropdown-menu {
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index e1c1d262c..01586510b 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -242,7 +242,7 @@ form th {
 	right: 18px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1rem 0.5rem 1rem 1rem;
+	padding: 1rem 0.5rem 1rem 1rem;
 	font-weight: bold;
 	text-align: left;
 	color: #5b6871;
@@ -258,30 +258,33 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem):hover {
+.dropdown-menu .item:not(.addItem) a:hover,
+.dropdown-menu .item:not(.addItem) button:hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem):hover .icon {
+.dropdown-menu .item:not(.addItem) a:hover .icon,
+.dropdown-menu .item:not(.addItem) button:hover .icon {
 	filter: brightness(3);
 }
-.dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label {
-	text-decoration: none;
-	color: #fff;
-}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 0 0 -14px;
 	font-weight: bold;
 }
+.dropdown-menu .item ~ .dropdown-header {
+	margin-top: 0.75rem;
+	padding-top: 1.75rem;
+	border-top-color: #eff0f2;
+}
+.dropdown-menu .item.separator {
+	margin-top: 0.75rem;
+	border-top-color: #eff0f2;
+}
 .dropdown-menu .input select, .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 	border-radius: 3px;
 }
-.dropdown-menu .separator {
-	margin: 0.75rem 0;
-	border-bottom: 1px solid #eff0f2;
-}
 
 .tree .tree-folder .tree-folder-items .dropdown-menu .item {
 	padding: 0;
@@ -1394,6 +1397,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
-
-/*# sourceMappingURL=mapco.css.map */
+}
\ No newline at end of file
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 5aa6c6ee6..1a14433c0 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -242,7 +242,7 @@ form th {
 	left: 18px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1rem 1rem 1rem 0.5rem;
+	padding: 1rem 1rem 1rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #5b6871;
@@ -258,30 +258,33 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem):hover {
+.dropdown-menu .item:not(.addItem) a:hover,
+.dropdown-menu .item:not(.addItem) button:hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem):hover .icon {
+.dropdown-menu .item:not(.addItem) a:hover .icon,
+.dropdown-menu .item:not(.addItem) button:hover .icon {
 	filter: brightness(3);
 }
-.dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label {
-	text-decoration: none;
-	color: #fff;
-}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 -14px 0 0;
 	font-weight: bold;
 }
+.dropdown-menu .item ~ .dropdown-header {
+	margin-top: 0.75rem;
+	padding-top: 1.75rem;
+	border-top-color: #eff0f2;
+}
+.dropdown-menu .item.separator {
+	margin-top: 0.75rem;
+	border-top-color: #eff0f2;
+}
 .dropdown-menu .input select, .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 	border-radius: 3px;
 }
-.dropdown-menu .separator {
-	margin: 0.75rem 0;
-	border-bottom: 1px solid #eff0f2;
-}
 
 .tree .tree-folder .tree-folder-items .dropdown-menu .item {
 	padding: 0;
@@ -1394,4 +1397,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
+}
\ No newline at end of file
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 5b41edcd4..3c7a1241a 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -289,9 +289,9 @@ a.btn {
 	display: none;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid var(--border);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: var(--border);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index fd6aa7dd3..dee347419 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -289,9 +289,9 @@ a.btn {
 	display: none;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid var(--border);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: var(--border);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index 0ff045c8c..16e7143ad 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -45,6 +45,11 @@ a.btn,
 }
 
 /*=== Dropdown */
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
+}
+
 /*=== Alerts */
 /*=== Pagination */
 /*=== Boxes */
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index 368200eaf..9ddfe00c4 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -45,6 +45,11 @@ a.btn,
 }
 
 /*=== Dropdown */
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
+}
+
 /*=== Alerts */
 /*=== Pagination */
 /*=== Boxes */
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 6ef335fdd..8bcfc0ff8 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -389,9 +389,9 @@ a.btn,
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #ddd;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index f52dcc1c3..216585cbe 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -389,9 +389,9 @@ a.btn,
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #ddd;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index aef22b4ca..4c69851fb 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -346,9 +346,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #ddd;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index dea595bda..12405ef12 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -346,9 +346,9 @@ a.btn {
 	border-radius: 3px;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #ddd;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #ddd;
 }
 
 /*=== Alerts */
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index a34547044..668423af9 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -359,10 +359,6 @@ a.btn {
 	border-color: #171717;
 }
 
-.configure .dropdown-header {
-	display: none;
-}
-
 .dropdown-header {
 	padding: 0 5px 5px;
 	color: #ccc;
@@ -397,10 +393,9 @@ a.btn {
 	text-decoration: none;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #171717;
-	box-shadow: 0 1px rgba(255,255,255,0.08);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: rgba(255,255,255,0.08);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 97f3590b2..1f7415bd8 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -359,10 +359,6 @@ a.btn {
 	border-color: #171717;
 }
 
-.configure .dropdown-header {
-	display: none;
-}
-
 .dropdown-header {
 	padding: 0 5px 5px;
 	color: #ccc;
@@ -397,10 +393,9 @@ a.btn {
 	text-decoration: none;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #171717;
-	box-shadow: 0 1px rgba(255,255,255,0.08);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: rgba(255,255,255,0.08);
 }
 
 /*=== Alerts */
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index f4e9a730b..e0190aac2 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -397,9 +397,9 @@ form th {
 	right: auto;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #e3e3e3;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #e3e3e3;
 	cursor: default;
 }
 
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 083c18163..35ebc4cc6 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -397,9 +397,9 @@ form th {
 	left: auto;
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid #e3e3e3;
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: #e3e3e3;
 	cursor: default;
 }
 
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 13da77b26..e2fc58ac1 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -522,9 +522,9 @@ form {
 	}
 }
 
-.separator {
-	margin: 5px 0;
-	border-bottom: 1px solid color.adjust( $color_light, $lightness: -10%);
+.item ~ .dropdown-header,
+.item.separator {
+	border-top-color: color.adjust( $color_light, $lightness: -10%);
 	cursor: default;
 }
 
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 6c0531969..f07f81b7f 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -289,10 +289,6 @@ a.btn {
 	padding: 2px 5px;
 }
 
-.separator {
-	margin: 5px 0;
-}
-
 /*=== Alerts */
 .alert {
 	margin: 15px auto;
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index a25776f1d..a7603ed44 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -289,10 +289,6 @@ a.btn {
 	padding: 2px 5px;
 }
 
-.separator {
-	margin: 5px 0;
-}
-
 /*=== Alerts */
 .alert {
 	margin: 15px auto;
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index fdc99e8a7..209b24431 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -691,10 +691,12 @@ input[type="checkbox"]:focus-visible {
 	cursor: default;
 }
 
-.separator {
-	display: block;
-	height: 0;
-	border-bottom: 1px solid var(--frss-border-color);
+.item ~ .dropdown-header,
+.item.separator {
+	margin-top: 5px;
+	padding-top: 5px;
+	border-top-width: 1px;
+	border-top-style: solid;
 }
 
 /*=== Alerts */
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 5d3b0eab7..4608af9b8 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -691,10 +691,12 @@ input[type="checkbox"]:focus-visible {
 	cursor: default;
 }
 
-.separator {
-	display: block;
-	height: 0;
-	border-bottom: 1px solid var(--frss-border-color);
+.item ~ .dropdown-header,
+.item.separator {
+	margin-top: 5px;
+	padding-top: 5px;
+	border-top-width: 1px;
+	border-top-style: solid;
 }
 
 /*=== Alerts */