Navigation buttons: Group icons (.group instead of .stick) (#5737)

* replace stick with group + update the themes

* Update nav_menu.phtml

---------

Co-authored-by: math-gh <>

24 files changed, 347 insertions, 140 deletions

diff --git a/app/layout/nav_menu.phtml b/app/layout/nav_menu.phtml
index 0937fe61f..418b6c54c 100644
--- a/app/layout/nav_menu.phtml
+++ b/app/layout/nav_menu.phtml
@@ -4,11 +4,13 @@
 
 <nav class="nav_menu">
 	<?php if ($actual_view === 'normal' || $actual_view === 'reader') { ?>
-	<a class="btn toggle_aside" href="#aside_feed"><?= _i('category') ?></a>
+		<div class="group">
+			<a class="btn toggle_aside" href="#aside_feed"><?= _i('category') ?></a>
+		</div>
 	<?php } ?>
 
 	<?php if (FreshRSS_Auth::hasAccess()) { ?>
-	<div id="nav_menu_actions" class="stick">
+	<div id="nav_menu_actions" class="group">
 		<?php
 			$states = array(
 				'read' => FreshRSS_Entry::STATE_READ,
@@ -136,7 +138,7 @@
 		$mark_unread_url['params']['nextGet'] = $get;
 	?>
 
-	<div class="stick" id="nav_menu_read_all">
+	<div class="group stick" id="nav_menu_read_all">
 		<form id="mark-read-menu" method="post">
 		<?php $confirm = FreshRSS_Context::$user_conf->reading_confirm ? 'confirm" disabled="disabled' : ''; ?>
 		<button class="read_all btn <?= $confirm ?>"
@@ -190,7 +192,7 @@
 	<?php } ?>
 
 	<?php $url_output = Minz_Request::currentRequest(); ?>
-	<div class="stick" id="nav_menu_views">
+	<div class="group" id="nav_menu_views">
 		<?php
 		$readingModes = FreshRSS_ReadingMode::getReadingModes();
 		$readingModes = Minz_ExtensionManager::callHook('nav_reading_modes', $readingModes);
@@ -223,7 +225,7 @@
 
 	<?php $nav_menu_hooks = Minz_ExtensionManager::callHook('nav_menu'); ?>
 	<?php if ($nav_menu_hooks != '') { ?>
-	<div class="stick" id="nav_menu_hooks">
+	<div class="group" id="nav_menu_hooks">
 		<?= $nav_menu_hooks ?>
 	</div>
 	<?php } ?>
@@ -241,12 +243,16 @@
 		$url_order = Minz_Request::currentRequest();
 		$url_order['params']['order'] = $order;
 	?>
-	<a id="toggle-order" class="btn" href="<?= Minz_Url::display($url_order) ?>" title="<?= $title ?>">
-		<?= _i($icon) ?>
-	</a>
+	<div class="group">
+		<a id="toggle-order" class="btn" href="<?= Minz_Url::display($url_order) ?>" title="<?= $title ?>">
+			<?= _i($icon) ?>
+		</a>
+	</div>
 
 	<?php if (FreshRSS_Auth::hasAccess() || FreshRSS_Context::$system_conf->allow_anonymous_refresh) { ?>
-	<a id="actualize" class="btn" href="<?= _url('feed', 'actualize') ?>" title="<?= _t('gen.action.actualize') ?>"><?= _i('refresh') ?></a>
+		<div class="group">
+			<a id="actualize" class="btn" href="<?= _url('feed', 'actualize') ?>" title="<?= _t('gen.action.actualize') ?>"><?= _i('refresh') ?></a>
+		</div>
 	<?php } ?>
 </nav>
 <?php flush(); ?>
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index bc8d06104..bdb46856e 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -159,12 +159,15 @@ form th {
 
 /*=== Buttons */
 .stick input,
+.group .btn,
 .stick .btn {
 	border-radius: 0;
 }
 
 .stick .btn:first-child,
-.stick input:first-child {
+.group .btn:first-child,
+.stick input:first-child,
+.group input:first-child {
 	border-radius: 3px 0 0 3px;
 }
 
@@ -173,23 +176,30 @@ form th {
 }
 
 .stick .btn:last-child,
-.stick input:last-child {
+.group .btn:last-child,
+.stick input:last-child,
+.group input:last-child {
 	border-radius: 0 3px 3px 0;
 }
 
 .stick .btn + .btn,
+.group .btn + .btn,
 .stick .btn + input,
 .stick .btn + .dropdown > .btn,
+.group .btn + .dropdown > .btn,
 .stick input + .btn,
 .stick input + input,
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
+.group .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .dropdown + .dropdown > .btn {
 	border-left: none;
 }
 
-.stick .btn + .dropdown > .btn {
+.stick .btn + .dropdown > .btn,
+.group .dropdown + .dropdown > .btn {
 	border-left: none;
 	border-radius: 0 3px 3px 0;
 }
@@ -1094,11 +1104,13 @@ kbd {
 		min-height: 0;
 	}
 
-	.nav_menu .stick {
+	.nav_menu .stick,
+	.nav_menu .group {
 		margin: 0 10px;
 	}
 
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+	.nav_menu .group .btn {
 		margin: 5px 0;
 	}
 
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 2f36a3b6f..6d6225484 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -159,12 +159,15 @@ form th {
 
 /*=== Buttons */
 .stick input,
+.group .btn,
 .stick .btn {
 	border-radius: 0;
 }
 
 .stick .btn:first-child,
-.stick input:first-child {
+.group .btn:first-child,
+.stick input:first-child,
+.group input:first-child {
 	border-radius: 0 3px 3px 0;
 }
 
@@ -173,23 +176,30 @@ form th {
 }
 
 .stick .btn:last-child,
-.stick input:last-child {
+.group .btn:last-child,
+.stick input:last-child,
+.group input:last-child {
 	border-radius: 3px 0 0 3px;
 }
 
 .stick .btn + .btn,
+.group .btn + .btn,
 .stick .btn + input,
 .stick .btn + .dropdown > .btn,
+.group .btn + .dropdown > .btn,
 .stick input + .btn,
 .stick input + input,
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
+.group .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .dropdown + .dropdown > .btn {
 	border-right: none;
 }
 
-.stick .btn + .dropdown > .btn {
+.stick .btn + .dropdown > .btn,
+.group .dropdown + .dropdown > .btn {
 	border-right: none;
 	border-radius: 3px 0 0 3px;
 }
@@ -1094,11 +1104,13 @@ kbd {
 		min-height: 0;
 	}
 
-	.nav_menu .stick {
+	.nav_menu .stick,
+	.nav_menu .group {
 		margin: 0 10px;
 	}
 
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+	.nav_menu .group .btn {
 		margin: 5px 0;
 	}
 
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index ed1201d71..c0d0a4f96 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -172,7 +172,8 @@ main.prompt {
 		}
 	}
 
-	.stick {
+	.stick,
+	.group {
 		.btn {
 			border-left-width: 0;
 			padding: 0.5rem 1rem;
diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss
index 5256ac636..720211a2a 100644
--- a/p/themes/Ansum/_mobile.scss
+++ b/p/themes/Ansum/_mobile.scss
@@ -70,7 +70,8 @@
 			padding: 0.85rem 1.25rem;
 		}
 
-		.stick {
+		.stick,
+		.group {
 			margin: 0.5rem 0.5rem;
 
 			.btn {
diff --git a/p/themes/Ansum/_sidebar.scss b/p/themes/Ansum/_sidebar.scss
index 7c21d159d..3e1540e5e 100644
--- a/p/themes/Ansum/_sidebar.scss
+++ b/p/themes/Ansum/_sidebar.scss
@@ -84,7 +84,8 @@
 }
 
 /*=== Buttons */
-.stick {
+.stick,
+.group {
 	input, .btn {
 		border-radius: 0;
 	}
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 07ccab094..e89a3d3e2 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -517,13 +517,19 @@ form th {
 }
 
 /*=== Buttons */
-.stick input, .stick .btn {
+.stick input, .stick .btn,
+.group input,
+.group .btn {
 	border-radius: 0;
 }
-.stick .btn:first-child {
+.stick .btn:first-child,
+.group .btn:first-child {
 	border-radius: 5px 0 0 5px;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn,
+.group .btn:last-child,
+.group input:last-child,
+.group .dropdown:last-child > .btn {
 	border-radius: 0 5px 5px 0;
 }
 .stick .btn + .btn,
@@ -534,7 +540,16 @@ form th {
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .btn + .btn,
+.group .btn + input,
+.group .btn + .dropdown > .btn,
+.group input + .btn,
+.group input + input,
+.group input + .dropdown > .btn,
+.group .dropdown + .btn,
+.group .dropdown + input,
+.group .dropdown + .dropdown > .btn {
 	border-left: 1px solid #e4d8cc;
 }
 
@@ -798,7 +813,8 @@ main.prompt {
 .nav_menu .btn:hover {
 	background-color: #e4d8cc;
 }
-.nav_menu .stick .btn {
+.nav_menu .stick .btn,
+.nav_menu .group .btn {
 	border-left-width: 0;
 	padding: 0.5rem 1rem;
 	background-color: #fcfaf8;
@@ -806,32 +822,40 @@ main.prompt {
 	background-repeat: no-repeat;
 	transition: all 0.15s ease-in-out;
 }
-.nav_menu .stick .btn:hover {
+.nav_menu .stick .btn:hover,
+.nav_menu .group .btn:hover {
 	background-color: #e4d8cc;
 }
-.nav_menu .stick .btn.active {
+.nav_menu .stick .btn.active,
+.nav_menu .group .btn.active {
 	background-color: #ca7227;
 }
-.nav_menu .stick .btn.active .icon {
+.nav_menu .stick .btn.active .icon,
+.nav_menu .group .btn.active .icon {
 	filter: brightness(5);
 }
-.nav_menu .stick .btn.read_all {
+.nav_menu .stick .btn.read_all,
+.nav_menu .group .btn.read_all {
 	padding: 5px 16px;
 	color: #363330;
 	background-color: #fcfaf8;
 	transition: all 0.15s ease-in-out;
 }
-.nav_menu .stick .btn.read_all:hover {
+.nav_menu .stick .btn.read_all:hover,
+.nav_menu .group .btn.read_all:hover {
 	background-color: #e4d8cc;
 }
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle,
+.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-left-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon,
+.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
-.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle,
+.nav_menu .group #dropdown-search-wrapper.dropdown a.dropdown-toggle {
 	border-left-width: 0;
 }
 
@@ -1225,14 +1249,17 @@ main.prompt {
 		margin: 0;
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .stick {
+	.nav_menu .stick,
+.nav_menu .group {
 		margin: 0.5rem 0.5rem;
 	}
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+.nav_menu .group .btn {
 		margin: 0;
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .stick .btn.read_all {
+	.nav_menu .stick .btn.read_all,
+.nav_menu .group .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
 	.nav_menu .search .input {
@@ -1305,6 +1332,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 b37713da3..871f7e033 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -517,13 +517,19 @@ form th {
 }
 
 /*=== Buttons */
-.stick input, .stick .btn {
+.stick input, .stick .btn,
+.group input,
+.group .btn {
 	border-radius: 0;
 }
-.stick .btn:first-child {
+.stick .btn:first-child,
+.group .btn:first-child {
 	border-radius: 0 5px 5px 0;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn,
+.group .btn:last-child,
+.group input:last-child,
+.group .dropdown:last-child > .btn {
 	border-radius: 5px 0 0 5px;
 }
 .stick .btn + .btn,
@@ -534,7 +540,16 @@ form th {
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .btn + .btn,
+.group .btn + input,
+.group .btn + .dropdown > .btn,
+.group input + .btn,
+.group input + input,
+.group input + .dropdown > .btn,
+.group .dropdown + .btn,
+.group .dropdown + input,
+.group .dropdown + .dropdown > .btn {
 	border-right: 1px solid #e4d8cc;
 }
 
@@ -798,7 +813,8 @@ main.prompt {
 .nav_menu .btn:hover {
 	background-color: #e4d8cc;
 }
-.nav_menu .stick .btn {
+.nav_menu .stick .btn,
+.nav_menu .group .btn {
 	border-right-width: 0;
 	padding: 0.5rem 1rem;
 	background-color: #fcfaf8;
@@ -806,32 +822,40 @@ main.prompt {
 	background-repeat: no-repeat;
 	transition: all 0.15s ease-in-out;
 }
-.nav_menu .stick .btn:hover {
+.nav_menu .stick .btn:hover,
+.nav_menu .group .btn:hover {
 	background-color: #e4d8cc;
 }
-.nav_menu .stick .btn.active {
+.nav_menu .stick .btn.active,
+.nav_menu .group .btn.active {
 	background-color: #ca7227;
 }
-.nav_menu .stick .btn.active .icon {
+.nav_menu .stick .btn.active .icon,
+.nav_menu .group .btn.active .icon {
 	filter: brightness(5);
 }
-.nav_menu .stick .btn.read_all {
+.nav_menu .stick .btn.read_all,
+.nav_menu .group .btn.read_all {
 	padding: 5px 16px;
 	color: #363330;
 	background-color: #fcfaf8;
 	transition: all 0.15s ease-in-out;
 }
-.nav_menu .stick .btn.read_all:hover {
+.nav_menu .stick .btn.read_all:hover,
+.nav_menu .group .btn.read_all:hover {
 	background-color: #e4d8cc;
 }
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle,
+.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-right-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon,
+.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
-.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle,
+.nav_menu .group #dropdown-search-wrapper.dropdown a.dropdown-toggle {
 	border-right-width: 0;
 }
 
@@ -1225,14 +1249,17 @@ main.prompt {
 		margin: 0;
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .stick {
+	.nav_menu .stick,
+.nav_menu .group {
 		margin: 0.5rem 0.5rem;
 	}
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+.nav_menu .group .btn {
 		margin: 0;
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .stick .btn.read_all {
+	.nav_menu .stick .btn.read_all,
+.nav_menu .group .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
 	.nav_menu .search .input {
@@ -1305,4 +1332,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
+}
\ No newline at end of file
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 409174a62..396bbb9e4 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -136,30 +136,38 @@ form th {
 
 /*=== Buttons */
 .stick input,
-.stick .btn {
+.stick .btn,
+.group .btn {
 	border-radius: 0;
 }
 
 .stick .btn:first-child,
+.group .btn:first-child,
 .stick input:first-child {
 	border-radius: 5px 0 0 5px;
 }
 
 .stick .btn:last-child,
+.group .btn:last-child,
 .stick input:last-child,
-.stick .dropdown:last-child > .btn {
+.stick .dropdown:last-child > .btn,
+.group .dropdown:last-child > .btn {
 	border-radius: 0 5px 5px 0;
 }
 
 .stick .btn + .btn,
+.group .btn + .btn,
 .stick .btn + input,
 .stick .btn + .dropdown > .btn,
+.group .btn + .dropdown > .btn,
 .stick input + .btn,
 .stick input + input,
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
+.group .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .dropdown + .dropdown > .btn {
 	border-left-width: 1px;
 	border-left-style: solid;
 }
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 656aa2018..c18369e6e 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -136,30 +136,38 @@ form th {
 
 /*=== Buttons */
 .stick input,
-.stick .btn {
+.stick .btn,
+.group .btn {
 	border-radius: 0;
 }
 
 .stick .btn:first-child,
+.group .btn:first-child,
 .stick input:first-child {
 	border-radius: 0 5px 5px 0;
 }
 
 .stick .btn:last-child,
+.group .btn:last-child,
 .stick input:last-child,
-.stick .dropdown:last-child > .btn {
+.stick .dropdown:last-child > .btn,
+.group .dropdown:last-child > .btn {
 	border-radius: 5px 0 0 5px;
 }
 
 .stick .btn + .btn,
+.group .btn + .btn,
 .stick .btn + input,
 .stick .btn + .dropdown > .btn,
+.group .btn + .dropdown > .btn,
 .stick input + .btn,
 .stick input + input,
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
+.group .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .dropdown + .dropdown > .btn {
 	border-right-width: 1px;
 	border-right-style: solid;
 }
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index d20c837fb..4404fd211 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -181,7 +181,8 @@ main.prompt {
 		}
 	}
 
-	.stick {
+	.stick,
+	.group {
 		.btn {
 			border-left-width: 0;
 			padding: 0.5rem 1rem;
diff --git a/p/themes/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.scss
index 5c57545c1..9c1ad44c7 100644
--- a/p/themes/Mapco/_mobile.scss
+++ b/p/themes/Mapco/_mobile.scss
@@ -77,7 +77,8 @@
 			padding: 0.85rem 1.25rem;
 		}
 
-		.stick {
+		.stick,
+		.group {
 			margin: 0.5rem 0.5rem;
 
 			.btn {
diff --git a/p/themes/Mapco/_sidebar.scss b/p/themes/Mapco/_sidebar.scss
index 090a69580..c12a59cc6 100644
--- a/p/themes/Mapco/_sidebar.scss
+++ b/p/themes/Mapco/_sidebar.scss
@@ -84,7 +84,8 @@
 }
 
 /*=== Buttons */
-.stick {
+.stick,
+.group {
 	input, .btn {
 		border-radius: 0;
 	}
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 1786f7475..0a15b195f 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -531,13 +531,19 @@ form th {
 }
 
 /*=== Buttons */
-.stick input, .stick .btn {
+.stick input, .stick .btn,
+.group input,
+.group .btn {
 	border-radius: 0;
 }
-.stick .btn:first-child {
+.stick .btn:first-child,
+.group .btn:first-child {
 	border-radius: 5px 0 0 5px;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn,
+.group .btn:last-child,
+.group input:last-child,
+.group .dropdown:last-child > .btn {
 	border-radius: 0 5px 5px 0;
 }
 .stick .btn + .btn,
@@ -548,7 +554,16 @@ form th {
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .btn + .btn,
+.group .btn + input,
+.group .btn + .dropdown > .btn,
+.group input + .btn,
+.group input + input,
+.group input + .dropdown > .btn,
+.group .dropdown + .btn,
+.group .dropdown + input,
+.group .dropdown + .dropdown > .btn {
 	border-left: 1px solid #d5d8db;
 }
 
@@ -819,7 +834,8 @@ main.prompt {
 .nav_menu .btn:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .btn {
+.nav_menu .stick .btn,
+.nav_menu .group .btn {
 	border-left-width: 0;
 	padding: 0.5rem 1rem;
 	background-color: #f9fafb;
@@ -827,35 +843,44 @@ main.prompt {
 	background-repeat: no-repeat;
 	transition: all 0.15s ease-in-out;
 }
-.nav_menu .stick .btn:hover {
+.nav_menu .stick .btn:hover,
+.nav_menu .group .btn:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .btn.active {
+.nav_menu .stick .btn.active,
+.nav_menu .group .btn.active {
 	background-color: #36c;
 }
-.nav_menu .stick .btn#toggle-read.active .icon {
+.nav_menu .stick .btn#toggle-read.active .icon,
+.nav_menu .group .btn#toggle-read.active .icon {
 	filter: brightness(3.5);
 }
-.nav_menu .stick .btn#toggle-unread.active .icon {
+.nav_menu .stick .btn#toggle-unread.active .icon,
+.nav_menu .group .btn#toggle-unread.active .icon {
 	filter: brightness(3.5) grayscale(1);
 }
-.nav_menu .stick .btn.read_all {
+.nav_menu .stick .btn.read_all,
+.nav_menu .group .btn.read_all {
 	padding: 5px 16px;
 	color: #303136;
 	background-color: #f9fafb;
 	transition: all 0.15s ease-in-out;
 }
-.nav_menu .stick .btn.read_all:hover {
+.nav_menu .stick .btn.read_all:hover,
+.nav_menu .group .btn.read_all:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle,
+.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-left-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon,
+.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
-.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle,
+.nav_menu .group #dropdown-search-wrapper.dropdown a.dropdown-toggle {
 	border-left-width: 0;
 }
 
@@ -1244,14 +1269,17 @@ main.prompt {
 		margin: 0;
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .stick {
+	.nav_menu .stick,
+.nav_menu .group {
 		margin: 0.5rem 0.5rem;
 	}
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+.nav_menu .group .btn {
 		margin: 0;
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .stick .btn.read_all {
+	.nav_menu .stick .btn.read_all,
+.nav_menu .group .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
 	.nav_menu .search .input {
@@ -1324,6 +1352,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 bda493487..c52c22a57 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -531,13 +531,19 @@ form th {
 }
 
 /*=== Buttons */
-.stick input, .stick .btn {
+.stick input, .stick .btn,
+.group input,
+.group .btn {
 	border-radius: 0;
 }
-.stick .btn:first-child {
+.stick .btn:first-child,
+.group .btn:first-child {
 	border-radius: 0 5px 5px 0;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn,
+.group .btn:last-child,
+.group input:last-child,
+.group .dropdown:last-child > .btn {
 	border-radius: 5px 0 0 5px;
 }
 .stick .btn + .btn,
@@ -548,7 +554,16 @@ form th {
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .btn + .btn,
+.group .btn + input,
+.group .btn + .dropdown > .btn,
+.group input + .btn,
+.group input + input,
+.group input + .dropdown > .btn,
+.group .dropdown + .btn,
+.group .dropdown + input,
+.group .dropdown + .dropdown > .btn {
 	border-right: 1px solid #d5d8db;
 }
 
@@ -819,7 +834,8 @@ main.prompt {
 .nav_menu .btn:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .btn {
+.nav_menu .stick .btn,
+.nav_menu .group .btn {
 	border-right-width: 0;
 	padding: 0.5rem 1rem;
 	background-color: #f9fafb;
@@ -827,35 +843,44 @@ main.prompt {
 	background-repeat: no-repeat;
 	transition: all 0.15s ease-in-out;
 }
-.nav_menu .stick .btn:hover {
+.nav_menu .stick .btn:hover,
+.nav_menu .group .btn:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .btn.active {
+.nav_menu .stick .btn.active,
+.nav_menu .group .btn.active {
 	background-color: #36c;
 }
-.nav_menu .stick .btn#toggle-read.active .icon {
+.nav_menu .stick .btn#toggle-read.active .icon,
+.nav_menu .group .btn#toggle-read.active .icon {
 	filter: brightness(3.5);
 }
-.nav_menu .stick .btn#toggle-unread.active .icon {
+.nav_menu .stick .btn#toggle-unread.active .icon,
+.nav_menu .group .btn#toggle-unread.active .icon {
 	filter: brightness(3.5) grayscale(1);
 }
-.nav_menu .stick .btn.read_all {
+.nav_menu .stick .btn.read_all,
+.nav_menu .group .btn.read_all {
 	padding: 5px 16px;
 	color: #303136;
 	background-color: #f9fafb;
 	transition: all 0.15s ease-in-out;
 }
-.nav_menu .stick .btn.read_all:hover {
+.nav_menu .stick .btn.read_all:hover,
+.nav_menu .group .btn.read_all:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle,
+.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-right-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon,
+.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
-.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle,
+.nav_menu .group #dropdown-search-wrapper.dropdown a.dropdown-toggle {
 	border-right-width: 0;
 }
 
@@ -1244,14 +1269,17 @@ main.prompt {
 		margin: 0;
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .stick {
+	.nav_menu .stick,
+.nav_menu .group {
 		margin: 0.5rem 0.5rem;
 	}
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+.nav_menu .group .btn {
 		margin: 0;
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .stick .btn.read_all {
+	.nav_menu .stick .btn.read_all,
+.nav_menu .group .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
 	.nav_menu .search .input {
@@ -1324,4 +1352,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
+}
\ No newline at end of file
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index a0c7899b7..f1f3b0bf1 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -217,11 +217,13 @@ form th {
 
 /*=== Buttons */
 .stick input,
-.stick .btn {
+.stick .btn,
+.group .btn {
 	border-radius: 0;
 }
 
 .stick .btn:first-child,
+.group .btn:first-child,
 .stick input:first-child,
 .stick select:first-child {
 	border-radius: 3px 0 0 3px;
@@ -232,20 +234,25 @@ form th {
 }
 
 .stick .btn:last-child,
+.group .btn:last-child,
 .stick input:last-child {
 	border-radius: 0 3px 3px 0;
 }
 
 .stick .btn + .btn,
+.group .btn + .btn,
 .stick .btn + input,
 .stick .btn + .dropdown > .btn,
+.group .btn + .dropdown > .btn,
 .stick input + .btn,
 .stick select + .btn,
 .stick input + input,
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
+.group .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .dropdown + .dropdown > .btn {
 	border-left: none;
 }
 
@@ -253,7 +260,8 @@ form th {
 	border-top: 1px solid var(--border-color);
 }
 
-.stick .btn + .dropdown > .btn {
+.stick .dropdown:last-child > .btn,
+.group .dropdown:last-child > .btn {
 	border-left: none;
 	border-radius: 0 3px 3px 0;
 }
@@ -1143,11 +1151,13 @@ a:hover .icon {
 		min-height: 0;
 	}
 
-	.nav_menu .stick {
+	.nav_menu .stick,
+	.nav_menu .group {
 		margin: 0 10px;
 	}
 
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+	.nav_menu .group .btn {
 		margin: 5px 0;
 	}
 
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 521f1bc08..249cf2fd7 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -217,11 +217,13 @@ form th {
 
 /*=== Buttons */
 .stick input,
-.stick .btn {
+.stick .btn,
+.group .btn {
 	border-radius: 0;
 }
 
 .stick .btn:first-child,
+.group .btn:first-child,
 .stick input:first-child,
 .stick select:first-child {
 	border-radius: 0 3px 3px 0;
@@ -232,20 +234,25 @@ form th {
 }
 
 .stick .btn:last-child,
+.group .btn:last-child,
 .stick input:last-child {
 	border-radius: 3px 0 0 3px;
 }
 
 .stick .btn + .btn,
+.group .btn + .btn,
 .stick .btn + input,
 .stick .btn + .dropdown > .btn,
+.group .btn + .dropdown > .btn,
 .stick input + .btn,
 .stick select + .btn,
 .stick input + input,
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
+.group .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .dropdown + .dropdown > .btn {
 	border-right: none;
 }
 
@@ -253,7 +260,8 @@ form th {
 	border-top: 1px solid var(--border-color);
 }
 
-.stick .btn + .dropdown > .btn {
+.stick .dropdown:last-child > .btn,
+.group .dropdown:last-child > .btn {
 	border-right: none;
 	border-radius: 3px 0 0 3px;
 }
@@ -1143,11 +1151,13 @@ a:hover .icon {
 		min-height: 0;
 	}
 
-	.nav_menu .stick {
+	.nav_menu .stick,
+	.nav_menu .group {
 		margin: 0 10px;
 	}
 
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+	.nav_menu .group .btn {
 		margin: 5px 0;
 	}
 
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 743f5d7e3..cb34ec861 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -185,11 +185,13 @@ form th {
 
 /*=== Buttons */
 .stick input,
-.stick .btn {
+.stick .btn,
+.group .btn {
 	border-radius: 0;
 }
 
 .stick .btn:first-child,
+.group .btn:first-child,
 .stick input:first-child {
 	border-radius: 3px 0 0 3px;
 }
@@ -199,24 +201,31 @@ form th {
 }
 
 .stick .btn:last-child,
+.group .btn:last-child,
 .stick input:last-child {
 	border-radius: 0 3px 3px 0;
 }
 
 .stick .btn + .btn,
+.group .btn + .btn,
 .stick .btn + input,
 .stick .btn + .dropdown > .btn,
+.group .btn + .dropdown > .btn,
 .stick input + .btn,
 .stick input + input,
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
+.group .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .dropdown + .dropdown > .btn {
 	border-left: none;
 
 }
 
-.stick .btn + .dropdown > .btn {
+.stick .btn + .dropdown > .btn,
+.group .btn + .dropdown > .btn,
+.group .dropdown + .dropdown > .btn {
 	border-left: none;
 	border-radius: 0 3px 3px 0;
 }
@@ -1068,12 +1077,14 @@ a.signin {
 		margin: 5px 10px;
 	}
 
-	.nav_menu .stick {
+	.nav_menu .stick,
+	.nav_menu .group {
 		margin: 0 10px;
 		min-width: 0;
 	}
 
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+	.nav_menu .group .btn {
 		margin: 5px 0;
 	}
 
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 1d95f3abd..12f1409f4 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -185,11 +185,13 @@ form th {
 
 /*=== Buttons */
 .stick input,
-.stick .btn {
+.stick .btn,
+.group .btn {
 	border-radius: 0;
 }
 
 .stick .btn:first-child,
+.group .btn:first-child,
 .stick input:first-child {
 	border-radius: 0 3px 3px 0;
 }
@@ -199,24 +201,31 @@ form th {
 }
 
 .stick .btn:last-child,
+.group .btn:last-child,
 .stick input:last-child {
 	border-radius: 3px 0 0 3px;
 }
 
 .stick .btn + .btn,
+.group .btn + .btn,
 .stick .btn + input,
 .stick .btn + .dropdown > .btn,
+.group .btn + .dropdown > .btn,
 .stick input + .btn,
 .stick input + input,
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
+.group .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .dropdown + .dropdown > .btn {
 	border-right: none;
 
 }
 
-.stick .btn + .dropdown > .btn {
+.stick .btn + .dropdown > .btn,
+.group .btn + .dropdown > .btn,
+.group .dropdown + .dropdown > .btn {
 	border-right: none;
 	border-radius: 3px 0 0 3px;
 }
@@ -1068,12 +1077,14 @@ a.signin {
 		margin: 5px 10px;
 	}
 
-	.nav_menu .stick {
+	.nav_menu .stick,
+	.nav_menu .group {
 		margin: 0 10px;
 		min-width: 0;
 	}
 
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+	.nav_menu .group .btn {
 		margin: 5px 0;
 	}
 
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 5e27656aa..fa9e58972 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -993,10 +993,12 @@ a.signin {
 	.nav_menu .btn {
 		margin: 0;
 	}
-	.nav_menu .stick {
+	.nav_menu .stick,
+.nav_menu .group {
 		margin: 0;
 	}
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+.nav_menu .group .btn {
 		margin: 0;
 	}
 	.nav_menu .item.search {
@@ -1181,6 +1183,4 @@ button.as-link {
 
 #slider label {
 	min-height: initial;
-}
-
-/*# sourceMappingURL=swage.css.map */
+}
\ No newline at end of file
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 656136d59..2cf7a60ef 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -993,10 +993,12 @@ a.signin {
 	.nav_menu .btn {
 		margin: 0;
 	}
-	.nav_menu .stick {
+	.nav_menu .stick,
+.nav_menu .group {
 		margin: 0;
 	}
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+.nav_menu .group .btn {
 		margin: 0;
 	}
 	.nav_menu .item.search {
@@ -1181,4 +1183,4 @@ button.as-link {
 
 #slider label {
 	min-height: initial;
-}
+}
\ No newline at end of file
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 3c4244dc1..eabcf1cce 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -1276,7 +1276,8 @@ a.signin {
 			margin: 0;
 		}
 
-		.stick {
+		.stick,
+		.group {
 			margin: 0;
 
 			.btn {
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 7c5ac5caa..8a9da627e 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -441,7 +441,8 @@ td.numeric {
 }
 
 /*=== Buttons */
-.stick {
+.stick,
+.group {
 	display: inline-flex;
 	max-width: 100%;
 	white-space: nowrap;
@@ -457,7 +458,8 @@ td.numeric {
 	flex-shrink: 1;
 }
 
-.stick > .btn {
+.stick > .btn,
+.group > .btn {
 	flex-shrink: 0;
 }
 
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 8182997ec..64e3b0fae 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -441,7 +441,8 @@ td.numeric {
 }
 
 /*=== Buttons */
-.stick {
+.stick,
+.group {
 	display: inline-flex;
 	max-width: 100%;
 	white-space: nowrap;
@@ -457,7 +458,8 @@ td.numeric {
 	flex-shrink: 1;
 }
 
-.stick > .btn {
+.stick > .btn,
+.group > .btn {
 	flex-shrink: 0;
 }