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

* templates

* themes

* fix

* fix

* fixes

* fix

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

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') ?>

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) ?>"

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 */

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 */

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 {

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 */
+}

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

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 */

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 */

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 */

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 */

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 */

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 */

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 {

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 */
+}

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

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 */

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 */

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 */

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 */

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 */

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 */

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 */

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 */

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 */

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 */

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

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

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

p/themes/base-theme/base.css

@@ -289,10 +289,6 @@ a.btn {
 	padding: 2px 5px;
 }
 
-.separator {
-	margin: 5px 0;
-}
-
 /*=== Alerts */
 .alert {
 	margin: 15px auto;

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;

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 */

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 */