From 42eeb402ad574236902e40d35d630fa15d29a985 Mon Sep 17 00:00:00 2001
From: Alexandre Alapetite <alexandre@alapetite.fr>
Date: Tue, 15 Nov 2022 15:42:26 +0100
Subject: Fix type hints regressions (#4855)

Fix regressions from https://github.com/FreshRSS/FreshRSS/pull/4561

Example:

```
PHP Fatal error:  Uncaught TypeError: Argument 1 passed to checkToken() must be an instance of FreshRSS_UserConfiguration, instance of Minz_Configuration given, called in /var/www/FreshRSS/p/api/greader.php on line 1091 and defined in /var/www/FreshRSS/p/api/greader.php:223
Stack trace:
#0 /var/www/FreshRSS/p/api/greader.php(1091): checkToken()
#1 {main}
  thrown in /var/www/FreshRSS/p/api/greader.php on line 223
```

Improvement of https://github.com/FreshRSS/FreshRSS/pull/4110
---
 app/layout/aside_configure.phtml | 6 +++---
 app/layout/header.phtml          | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'app/layout')

diff --git a/app/layout/aside_configure.phtml b/app/layout/aside_configure.phtml
index 5f1762834..f4a05a47c 100644
--- a/app/layout/aside_configure.phtml
+++ b/app/layout/aside_configure.phtml
@@ -1,8 +1,8 @@
 <nav class="nav nav-list aside" id="aside_feed">
 	<a class="toggle_aside" href="#close"><?= _i('close') ?></a>
-	
+
 	<ul>
-		<li class="nav-header"><?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8')?></li>	
+		<li class="nav-header"><?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8')?></li>
 		<li class="item<?= Minz_Request::controllerName() === 'user' && Minz_Request::actionName() === 'profile' ? ' active' : '' ?>">
 			<a href="<?= _url('user', 'profile') ?>"><?= _t('gen.menu.user_profile') ?></a>
 		</li>
@@ -54,7 +54,7 @@
 		<li class="item<?= Minz_Request::controllerName() === 'update' && Minz_Request::actionName() === 'checkInstall' ? ' active' : '' ?>">
 			<a href="<?= _url('update', 'checkInstall') ?>"><?= _t('gen.menu.check_install') ?></a>
 		</li>
-		<?php if (!Minz_Configuration::get('system')->disable_update) { ?>
+		<?php if (!FreshRSS_Context::$system_conf->disable_update) { ?>
 		<li class="item<?= Minz_Request::controllerName() === 'update' && Minz_Request::actionName() === 'index' ? ' active' : '' ?>">
 			<a href="<?= _url('update', 'index') ?>"><?= _t('gen.menu.update') ?></a>
 		</li>
diff --git a/app/layout/header.phtml b/app/layout/header.phtml
index f8e54c7ce..9977a2b2c 100644
--- a/app/layout/header.phtml
+++ b/app/layout/header.phtml
@@ -71,7 +71,7 @@
 				<li class="item"><a href="<?= _url('user', 'manage') ?>"><?= _t('gen.menu.user_management') ?></a></li>
 				<li class="item"><a href="<?= _url('auth', 'index') ?>"><?= _t('gen.menu.authentication') ?></a></li>
 				<li class="item"><a href="<?= _url('update', 'checkInstall') ?>"><?= _t('gen.menu.check_install') ?></a></li>
-				<?php if (!Minz_Configuration::get('system')->disable_update) { ?>
+				<?php if (!FreshRSS_Context::$system_conf->disable_update) { ?>
 				<li class="item"><a href="<?= _url('update', 'index') ?>"><?= _t('gen.menu.update') ?></a></li>
 				<?php } ?>
 				<?= Minz_ExtensionManager::callHook('menu_admin_entry') ?>
-- 
cgit v1.2.3


From ef5483490cf42beeec8f77ed1669ab9a05b9cbc0 Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
Date: Wed, 23 Nov 2022 22:40:23 +0100
Subject: Improved: config dropdown structure (#4891)

* phtml and frss.css

* theme Origine

* theme adark

* theme Ansum

* theme Mapco

* theme BlueLagoon

* theme dark

* theme flat

* theme nord

* theme Screwdriver

* theme swage

* fix

* fix

* RTL

* fix nord theme

* fix SourceMap lines
---
 app/layout/header.phtml                  | 81 ++++++++++++++++++++------------
 p/themes/Alternative-Dark/adark.css      | 29 ++++++++----
 p/themes/Alternative-Dark/adark.rtl.css  | 29 ++++++++----
 p/themes/Ansum/_components.scss          | 32 ++++++++-----
 p/themes/Ansum/ansum.css                 | 22 +++++----
 p/themes/Ansum/ansum.rtl.css             | 22 +++++----
 p/themes/BlueLagoon/BlueLagoon.css       | 24 +++++++---
 p/themes/BlueLagoon/BlueLagoon.rtl.css   | 24 +++++++---
 p/themes/Dark/dark.css                   | 27 ++++++++---
 p/themes/Dark/dark.rtl.css               | 27 ++++++++---
 p/themes/Flat/flat.css                   | 27 ++++++++---
 p/themes/Flat/flat.rtl.css               | 27 ++++++++---
 p/themes/Mapco/_components.scss          | 24 +++++++---
 p/themes/Mapco/mapco.css                 | 20 +++++---
 p/themes/Mapco/mapco.rtl.css             | 20 +++++---
 p/themes/Nord/nord.css                   | 28 +++++++++--
 p/themes/Nord/nord.rtl.css               | 28 +++++++++--
 p/themes/Origine/origine.css             | 37 +++++++++++----
 p/themes/Origine/origine.rtl.css         | 37 +++++++++++----
 p/themes/Pafat/pafat.css                 | 27 ++++++++---
 p/themes/Pafat/pafat.rtl.css             | 27 ++++++++---
 p/themes/Screwdriver/screwdriver.css     | 30 ++++++++----
 p/themes/Screwdriver/screwdriver.rtl.css | 30 ++++++++----
 p/themes/Swage/swage.css                 | 15 +++++-
 p/themes/Swage/swage.rtl.css             | 15 +++++-
 p/themes/Swage/swage.scss                | 22 ++++++++-
 p/themes/base-theme/frss.css             | 18 +++----
 p/themes/base-theme/frss.rtl.css         | 18 +++----
 28 files changed, 553 insertions(+), 214 deletions(-)

(limited to 'app/layout')

diff --git a/app/layout/header.phtml b/app/layout/header.phtml
index 9977a2b2c..75dacfe1d 100644
--- a/app/layout/header.phtml
+++ b/app/layout/header.phtml
@@ -48,38 +48,59 @@
 			<ul class="dropdown-menu scrollbar-thin">
 				<li class="dropdown-header-close"><a class="toggle_aside" href="#close"><?= _i('close') ?></a></li>
 
-				<li class="dropdown-header"><?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8') ?></li>
-				<li class="item"><a href="<?= _url('user', 'profile') ?>"><?= _t('gen.menu.user_profile') ?></a></li>
-				<?php if (FreshRSS_Auth::accessNeedsAction()): ?>
-				<li class="item"><a class="signout" href="<?= _url('auth', 'logout') ?>"><?= _t('gen.auth.logout'); ?><?= _i('logout') ?></a></li>
-				<?php else: ?>
-				<li class="item"><span class="signout">(<?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8') ?>)</span></li>
-				<?php endif; ?>
-				<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>
-				<li class="item"><a href="<?= _url('configure', 'archiving') ?>"><?= _t('gen.menu.archiving') ?></a></li>
-				<li class="item"><a href="<?= _url('configure', 'integration') ?>"><?= _t('gen.menu.sharing') ?></a></li>
-				<li class="item"><a href="<?= _url('configure', 'shortcut') ?>"><?= _t('gen.menu.shortcuts') ?></a></li>
-				<li class="item"><a href="<?= _url('configure', 'queries') ?>"><?= _t('gen.menu.queries') ?></a></li>
-				<li class="item"><a href="<?= _url('extension', 'index') ?>"><?= _t('gen.menu.extensions') ?></a></li>
-				<?= Minz_ExtensionManager::callHook('menu_configuration_entry') ?>
-
+				<li class="item dropdown-section">
+					<div class="dropdown-section-title">
+						<?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8') ?>
+					</div>
+					<ul>
+						<li class="item"><a href="<?= _url('user', 'profile') ?>"><?= _t('gen.menu.user_profile') ?></a></li>
+						<?php if (FreshRSS_Auth::accessNeedsAction()): ?>
+						<li class="item"><a class="signout" href="<?= _url('auth', 'logout') ?>"><?= _t('gen.auth.logout'); ?><?= _i('logout') ?></a></li>
+						<?php else: ?>
+						<li class="item"><span class="signout">(<?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8') ?>)</span></li>
+						<?php endif; ?>
+					</ul>
+				</li>
+				<li class="item dropdown-section">
+					<div class="dropdown-section-title">
+						<?= _t('gen.menu.configuration') ?>
+					</div>
+					<ul>
+						<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>
+						<li class="item"><a href="<?= _url('configure', 'archiving') ?>"><?= _t('gen.menu.archiving') ?></a></li>
+						<li class="item"><a href="<?= _url('configure', 'integration') ?>"><?= _t('gen.menu.sharing') ?></a></li>
+						<li class="item"><a href="<?= _url('configure', 'shortcut') ?>"><?= _t('gen.menu.shortcuts') ?></a></li>
+						<li class="item"><a href="<?= _url('configure', 'queries') ?>"><?= _t('gen.menu.queries') ?></a></li>
+						<li class="item"><a href="<?= _url('extension', 'index') ?>"><?= _t('gen.menu.extensions') ?></a></li>
+						<?= Minz_ExtensionManager::callHook('menu_configuration_entry') ?>
+					</ul>
+				</li>
 				<?php if (FreshRSS_Auth::hasAccess('admin')) { ?>
-				<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>
-				<li class="item"><a href="<?= _url('auth', 'index') ?>"><?= _t('gen.menu.authentication') ?></a></li>
-				<li class="item"><a href="<?= _url('update', 'checkInstall') ?>"><?= _t('gen.menu.check_install') ?></a></li>
-				<?php if (!FreshRSS_Context::$system_conf->disable_update) { ?>
-				<li class="item"><a href="<?= _url('update', 'index') ?>"><?= _t('gen.menu.update') ?></a></li>
-				<?php } ?>
-				<?= Minz_ExtensionManager::callHook('menu_admin_entry') ?>
+				<li class="item dropdown-section">
+					<div class="dropdown-section-title">	
+						<?= _t('gen.menu.admin') ?>
+					</div>
+					<ul>
+						<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>
+						<li class="item"><a href="<?= _url('auth', 'index') ?>"><?= _t('gen.menu.authentication') ?></a></li>
+						<li class="item"><a href="<?= _url('update', 'checkInstall') ?>"><?= _t('gen.menu.check_install') ?></a></li>
+						<?php if (!FreshRSS_Context::$system_conf->disable_update) { ?>
+						<li class="item"><a href="<?= _url('update', 'index') ?>"><?= _t('gen.menu.update') ?></a></li>
+						<?php } ?>
+						<?= Minz_ExtensionManager::callHook('menu_admin_entry') ?>
+					</ul>
+				</li>
 				<?php } ?>
-
-				<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') ?>
+				
+				<li class="item dropdown-section">
+					<ul>
+						<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') ?>
+					</ul>
+				</li>
 			</ul>
 			<a class="dropdown-close" href="#close">❌</a>
 		</div>
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 35480c31b..f32d91e53 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -341,7 +341,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: var(--background-color-active);
 	font-size: 0.8rem;
 	border: 2px solid var(--background-color-light);
@@ -353,23 +353,35 @@ a.btn {
 	border-color: var(--border-color-dark);
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
+	padding: 0.25rem 0.5rem 0.25rem 1rem;
 	color: var(--font-color-middle);
 	font-weight: bold;
 	text-align: left;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: var(--background-color-hover);
 	color: var(--font-color-light);
 }
@@ -387,6 +399,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: var(--border-color-dark);
 }
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index c01f77896..9cb07185d 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -341,7 +341,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: var(--background-color-active);
 	font-size: 0.8rem;
 	border: 2px solid var(--background-color-light);
@@ -353,23 +353,35 @@ a.btn {
 	border-color: var(--border-color-dark);
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
+	padding: 0.25rem 1rem 0.25rem 0.5rem;
 	color: var(--font-color-middle);
 	font-weight: bold;
 	text-align: right;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: var(--background-color-hover);
 	color: var(--font-color-light);
 }
@@ -387,6 +399,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: var(--border-color-dark);
 }
diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index 35298b4de..001d31578 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -37,15 +37,14 @@
 		right: 17px;
 	}
 
-	.dropdown-header {
-		padding: 1rem 0.5rem 1rem 1rem;
+	.dropdown-header,
+	.dropdown-section .dropdown-section-title {
+		padding: 1rem 1.5rem;
 		font-weight: bold;
 		text-align: left;
 		color: variables.$grey-dark;
 		text-transform: uppercase;
 		letter-spacing: 1px;
-
-
 	}
 
 	.item {
@@ -57,19 +56,28 @@
 			color: variables.$main-font-color;
 			font-size: 1rem;
 			line-height: 2.5em;
+
+			&:not(.addItem):hover {
+				background: variables.$main-first;
+				color: variables.$white;
+
+				.icon {
+					filter: grayscale(100%) brightness(2.5);
+				}
+			}
 		}
 
-		&:not(.addItem):hover {
-			background: variables.$main-first;
-			color: variables.$white;
+		&.dropdown-section {
+			margin-top: 0.75rem;
 
-			a, button, label {
-				text-decoration: none;
-				color: variables.$white;
+			~ .dropdown-section {
+				border-top-color: variables.$grey-light;
 			}
 
-			.icon {
-				filter: grayscale(100%) brightness(2.5);
+			.item {
+				a, span, .as-link {
+					padding-left: 2rem;
+				}
 			}
 		}
 
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 07586f8fb..f07ba86ad 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -240,8 +240,9 @@ form th {
 	border: none;
 	right: 17px;
 }
-.dropdown-menu .dropdown-header {
-	padding: 1rem 0.5rem 1rem 1rem;
+.dropdown-menu .dropdown-header,
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	padding: 1rem 1.5rem;
 	font-weight: bold;
 	text-align: left;
 	color: #766556;
@@ -257,17 +258,22 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem):hover {
+.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item span:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.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:not(.addItem):hover .icon {
+.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item span:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
+.dropdown-menu .item.dropdown-section {
+	margin-top: 0.75rem;
+}
+.dropdown-menu .item.dropdown-section ~ .dropdown-section {
+	border-top-color: #f5f0ec;
+}
+.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item span, .dropdown-menu .item.dropdown-section .item .as-link {
+	padding-left: 2rem;
+}
 .dropdown-menu .item:not(.addItem) a:hover,
 .dropdown-menu .item:not(.addItem) button:hover {
 	background: #ca7227;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 7ab296aa5..beb5de8a8 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -240,8 +240,9 @@ form th {
 	border: none;
 	left: 17px;
 }
-.dropdown-menu .dropdown-header {
-	padding: 1rem 1rem 1rem 0.5rem;
+.dropdown-menu .dropdown-header,
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	padding: 1rem 1.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #766556;
@@ -257,17 +258,22 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem):hover {
+.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item span:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.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:not(.addItem):hover .icon {
+.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item span:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
+.dropdown-menu .item.dropdown-section {
+	margin-top: 0.75rem;
+}
+.dropdown-menu .item.dropdown-section ~ .dropdown-section {
+	border-top-color: #f5f0ec;
+}
+.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item span, .dropdown-menu .item.dropdown-section .item .as-link {
+	padding-right: 2rem;
+}
 .dropdown-menu .item:not(.addItem) a:hover,
 .dropdown-menu .item:not(.addItem) button:hover {
 	background: #ca7227;
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index 56e43bf04..276b50c8a 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -350,7 +350,8 @@ a.btn {
 	transform: rotate(45deg);
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	color: #ccc;
 	font-weight: bold;
@@ -360,9 +361,9 @@ a.btn {
 	filter: grayscale(100%) brightness(2.5);
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	color: #ccc;
@@ -373,8 +374,19 @@ a.btn {
 	color: #ccc;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: linear-gradient(180deg,  #0090ff 0%, #0062be 100%) #e4992c;
 	background: -webkit-linear-gradient(top,  #0090ff 0%, #0062be 100%);
 	color: #fff;
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 035898fa9..1713a89ed 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -350,7 +350,8 @@ a.btn {
 	transform: rotate(-45deg);
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	color: #ccc;
 	font-weight: bold;
@@ -360,9 +361,9 @@ a.btn {
 	filter: grayscale(100%) brightness(2.5);
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	color: #ccc;
@@ -373,8 +374,19 @@ a.btn {
 	color: #ccc;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: linear-gradient(-180deg,  #0090ff 0%, #0062be 100%) #e4992c;
 	background: -webkit-linear-gradient(top,  #0090ff 0%, #0062be 100%);
 	color: #fff;
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index a4aed0c2d..4a13c4099 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -336,23 +336,35 @@ a.btn {
 	border-color: #888;
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
+	padding: 0.25rem 0.5rem 0.25rem 1rem;
 	font-weight: bold;
 	text-align: left;
 	color: #888;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #26303f;
 	color: #888;
 }
@@ -370,6 +382,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: #333;
 }
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 4736e069f..82f30827e 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -336,23 +336,35 @@ a.btn {
 	border-color: #888;
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
+	padding: 0.25rem 1rem 0.25rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #888;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #26303f;
 	color: #888;
 }
@@ -370,6 +382,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: #333;
 }
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 5bdc1779a..67d823cac 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -311,7 +311,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 0.5rem 0 0;
-	padding: 0.5rem 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: #fafafa;
 	font-size: 0.8rem;
 	border: 1px solid #95a5a6;
@@ -324,7 +324,8 @@ a.btn {
 	right: 12px;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 0.5rem 0.5rem;
 	font-weight: bold;
 	text-align: left;
@@ -336,16 +337,27 @@ a.btn {
 	right: 0.5rem;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #2980b9;
 	color: #fff;
 }
@@ -368,6 +380,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: #ddd;
 }
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index b6c95b7a6..dbbb9a6aa 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -311,7 +311,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 0.5rem 0 0;
-	padding: 0.5rem 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: #fafafa;
 	font-size: 0.8rem;
 	border: 1px solid #95a5a6;
@@ -324,7 +324,8 @@ a.btn {
 	left: 12px;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 0.5rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
@@ -336,16 +337,27 @@ a.btn {
 	left: 0.5rem;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #2980b9;
 	color: #fff;
 }
@@ -368,6 +380,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: #ddd;
 }
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index cf7aca73d..55542f2e7 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -37,8 +37,9 @@
 		right: 18px;
 	}
 
-	.dropdown-header {
-		padding: 1rem 0.5rem 1rem 1rem;
+	.dropdown-header,
+	.dropdown-section .dropdown-section-title {
+		padding: 1rem 1.5rem;
 		font-weight: bold;
 		text-align: left;
 		color: variables.$grey-dark;
@@ -55,11 +56,8 @@
 			color: variables.$main-font-color;
 			font-size: 1rem;
 			line-height: 2.5em;
-		}
 
-		&:not(.addItem) {
-			a:hover,
-			button:hover {
+			&:not(.addItem):hover {
 				background: variables.$main-first;
 				color: variables.$white;
 
@@ -69,6 +67,20 @@
 			}
 		}
 
+		&.dropdown-section {
+			margin-top: 0.75rem;
+
+			~ .dropdown-section {
+				border-top-color: variables.$grey-light;
+			}
+
+			.item {
+				a, span, .as-link {
+					padding-left: 2rem;
+				}
+			}
+		}
+
 		&[aria-checked="true"] {
 			a::before {
 				margin: 0 0 0 -14px;
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 7d014cb0b..170938509 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -239,8 +239,9 @@ form th {
 	border: none;
 	right: 18px;
 }
-.dropdown-menu .dropdown-header {
-	padding: 1rem 0.5rem 1rem 1rem;
+.dropdown-menu .dropdown-header,
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	padding: 1rem 1.5rem;
 	font-weight: bold;
 	text-align: left;
 	color: #5b6871;
@@ -256,15 +257,22 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem) a:hover,
-.dropdown-menu .item:not(.addItem) button:hover {
+.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item span:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem) a:hover .icon,
-.dropdown-menu .item:not(.addItem) button:hover .icon {
+.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item span:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
 	filter: brightness(3);
 }
+.dropdown-menu .item.dropdown-section {
+	margin-top: 0.75rem;
+}
+.dropdown-menu .item.dropdown-section ~ .dropdown-section {
+	border-top-color: #eff0f2;
+}
+.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item span, .dropdown-menu .item.dropdown-section .item .as-link {
+	padding-left: 2rem;
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 0 0 -14px;
 	font-weight: bold;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 4c5cc5944..c2096b11c 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -239,8 +239,9 @@ form th {
 	border: none;
 	left: 18px;
 }
-.dropdown-menu .dropdown-header {
-	padding: 1rem 1rem 1rem 0.5rem;
+.dropdown-menu .dropdown-header,
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	padding: 1rem 1.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #5b6871;
@@ -256,15 +257,22 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:not(.addItem) a:hover,
-.dropdown-menu .item:not(.addItem) button:hover {
+.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item span:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem) a:hover .icon,
-.dropdown-menu .item:not(.addItem) button:hover .icon {
+.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item span:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
 	filter: brightness(3);
 }
+.dropdown-menu .item.dropdown-section {
+	margin-top: 0.75rem;
+}
+.dropdown-menu .item.dropdown-section ~ .dropdown-section {
+	border-top-color: #eff0f2;
+}
+.dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item span, .dropdown-menu .item.dropdown-section .item .as-link {
+	padding-right: 2rem;
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 -14px 0 0;
 	font-weight: bold;
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 3a6fc12af..8ce9727a3 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -198,7 +198,7 @@ a.btn {
 
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: var(--accent-bg);
 	font-size: 0.8rem;
 	border: 1px solid var(--border);
@@ -206,21 +206,38 @@ a.btn {
 	text-align: left;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	font-weight: bold;
 	text-align: left;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	color: var(--text);
 	line-height: 2.5em;
 	min-width: 200px;
 }
 
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
+	/* no hover color */
+}
+
 .dropdown-menu > .item[aria-checked="true"] > a::before {
 	font-weight: bold;
 	margin: 0 0 0 -14px;
@@ -276,6 +293,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: var(--border);
 }
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index e3b3a7d78..f7b0c4a64 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -198,7 +198,7 @@ a.btn {
 
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: var(--accent-bg);
 	font-size: 0.8rem;
 	border: 1px solid var(--border);
@@ -206,21 +206,38 @@ a.btn {
 	text-align: right;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	font-weight: bold;
 	text-align: right;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	color: var(--text);
 	line-height: 2.5em;
 	min-width: 200px;
 }
 
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
+	/* no hover color */
+}
+
 .dropdown-menu > .item[aria-checked="true"] > a::before {
 	font-weight: bold;
 	margin: 0 -14px 0 0;
@@ -276,6 +293,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: var(--border);
 }
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index b8bf4c5ab..457a25ecc 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -436,33 +436,45 @@ a:hover .icon {
 	border-color: var(--border-color);
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
+	padding: 0.25rem 0.5rem 0.25rem 1rem;
 	color: var(--font-color-grey);
 	font-weight: bold;
 	text-align: left;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover,
-.dropdown-menu > .item > label:hover:not(.noHover) {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background-color: var(--contrast-background-color-active);
 	color: var(--font-color-light);
 }
 
-.dropdown-menu > .item > label {
+.dropdown-menu .item > label {
 	padding: 0;
 }
 
-.dropdown-menu > .item:hover .icon {
+.dropdown-menu > .item:hover > a > .icon,
+.dropdown-menu .item.dropdown-section .item:hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 
@@ -479,6 +491,7 @@ a:hover .icon {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: var(--border-color);
 }
@@ -1164,6 +1177,10 @@ a:hover .icon {
 		border-left: 1px solid var(--border-color);
 	}
 
+	.dropdown-menu .dropdown-section:last-child {
+		margin-bottom: 3rem;
+	}
+
 	.form-group.form-actions {
 		margin-left: -15px;
 		margin-right: -15px;
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 2a85b77ad..72cf63969 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -436,33 +436,45 @@ a:hover .icon {
 	border-color: var(--border-color);
 }
 
-.dropdown-header {
-	padding: 0 5px 5px;
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
+	padding: 0.25rem 1rem 0.25rem 0.5rem;
 	color: var(--font-color-grey);
 	font-weight: bold;
 	text-align: right;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover,
-.dropdown-menu > .item > label:hover:not(.noHover) {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background-color: var(--contrast-background-color-active);
 	color: var(--font-color-light);
 }
 
-.dropdown-menu > .item > label {
+.dropdown-menu .item > label {
 	padding: 0;
 }
 
-.dropdown-menu > .item:hover .icon {
+.dropdown-menu > .item:hover > a > .icon,
+.dropdown-menu .item.dropdown-section .item:hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 
@@ -479,6 +491,7 @@ a:hover .icon {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: var(--border-color);
 }
@@ -1164,6 +1177,10 @@ a:hover .icon {
 		border-right: 1px solid var(--border-color);
 	}
 
+	.dropdown-menu .dropdown-section:last-child {
+		margin-bottom: 3rem;
+	}
+
 	.form-group.form-actions {
 		margin-right: -15px;
 		margin-left: -15px;
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index f390a1c1c..d64521573 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -283,7 +283,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	font-size: 0.8rem;
 	border: 1px solid #aaa;
 	border-radius: 5px;
@@ -295,24 +295,36 @@ a.btn {
 	right: 8px;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	color: #888;
 	font-weight: bold;
 	text-align: left;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5;
 	color: #666;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #eee;
 	color: #666;
 }
@@ -330,6 +342,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: #ddd;
 }
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 20c204cb9..55e255369 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -283,7 +283,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	font-size: 0.8rem;
 	border: 1px solid #aaa;
 	border-radius: 5px;
@@ -295,24 +295,36 @@ a.btn {
 	left: 8px;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	color: #888;
 	font-weight: bold;
 	text-align: right;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5;
 	color: #666;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
+}
+
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #eee;
 	color: #666;
 }
@@ -330,6 +342,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: #ddd;
 }
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index eddbdd136..490381fb6 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -331,7 +331,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: #222;
 	font-size: 0.8rem;
 	border: 1px solid #171717;
@@ -344,30 +344,43 @@ a.btn {
 	border-color: #171717;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	color: #ccc;
 	font-weight: bold;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	color: #ccc;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > label {
-	color: #ccc;
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-left: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #171717;
 	color: #fff;
 }
 
+.dropdown-menu > .item > label {
+	color: #ccc;
+}
+
 .dropdown-menu > .item[aria-checked="true"] > a::before {
 	font-weight: bold;
 	margin: 0 0 0 -14px;
@@ -379,6 +392,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: rgba(255,255,255,0.08);
 }
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index aef02ecdb..e8a30d326 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -331,7 +331,7 @@ a.btn {
 /*=== Dropdown */
 .dropdown-menu {
 	margin: 5px 0 0;
-	padding: 5px 0;
+	padding: 0.5rem 0 0.25rem 0;
 	background: #222;
 	font-size: 0.8rem;
 	border: 1px solid #171717;
@@ -344,30 +344,43 @@ a.btn {
 	border-color: #171717;
 }
 
-.dropdown-header {
+.dropdown-header,
+.dropdown-section .dropdown-section-title {
 	padding: 0 5px 5px;
 	color: #ccc;
 	font-weight: bold;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > span,
-.dropdown-menu > .item > .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 22px;
 	line-height: 2.5em;
 	color: #ccc;
 	font-size: 0.8rem;
 }
 
-.dropdown-menu > .item > label {
-	color: #ccc;
+.dropdown-menu .dropdown-section .item > a,
+.dropdown-menu .dropdown-section .item > span,
+.dropdown-menu .dropdown-section .item > .as-link {
+	padding-right: 2rem;
+}
+
+.dropdown-menu .dropdown-section .item:last-child {
+	margin-bottom: 0.5rem;
 }
 
-.dropdown-menu > .item:hover {
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover,
+.dropdown-menu .item > label:hover:not(.noHover) {
 	background: #171717;
 	color: #fff;
 }
 
+.dropdown-menu > .item > label {
+	color: #ccc;
+}
+
 .dropdown-menu > .item[aria-checked="true"] > a::before {
 	font-weight: bold;
 	margin: 0 -14px 0 0;
@@ -379,6 +392,7 @@ a.btn {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	border-top-color: rgba(255,255,255,0.08);
 }
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 3a3202154..2397160b2 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -332,12 +332,23 @@ form th {
 .dropdown-menu .dropdown-header a:hover {
 	background-color: var(--color-background-nav);
 }
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	cursor: default;
+	padding: 0.25rem 0.5rem 0.125rem 0.25rem;
+	font-weight: bold;
+	color: var(--color-text-light);
+}
+.dropdown-menu .dropdown-section .item a {
+	padding: 0 22px;
+}
+.dropdown-menu .dropdown-section .item a:hover {
+	background-color: var(--color-background-nav);
+}
 .dropdown-menu::after {
 	content: none;
 }
 .dropdown-menu > .item {
-	padding: 0;
-	margin-left: 10px;
+	padding: 0 0 0 0.5rem;
 }
 .dropdown-menu > .item > a {
 	min-width: initial;
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 35cda9308..a021a70cd 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -332,12 +332,23 @@ form th {
 .dropdown-menu .dropdown-header a:hover {
 	background-color: var(--color-background-nav);
 }
+.dropdown-menu .dropdown-section .dropdown-section-title {
+	cursor: default;
+	padding: 0.25rem 0.25rem 0.125rem 0.5rem;
+	font-weight: bold;
+	color: var(--color-text-light);
+}
+.dropdown-menu .dropdown-section .item a {
+	padding: 0 22px;
+}
+.dropdown-menu .dropdown-section .item a:hover {
+	background-color: var(--color-background-nav);
+}
 .dropdown-menu::after {
 	content: none;
 }
 .dropdown-menu > .item {
-	padding: 0;
-	margin-right: 10px;
+	padding: 0 0.5rem 0 0;
 }
 .dropdown-menu > .item > a {
 	min-width: initial;
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index fddb287be..9ca316aff 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -431,6 +431,25 @@ form {
 		}
 	}
 
+	.dropdown-section {
+		.dropdown-section-title {
+			cursor: default;
+			padding: 0.25rem 0.5rem 0.125rem 0.25rem;
+			font-weight: bold;
+			color: var(--color-text-light);
+		}
+
+		.item {
+			a {
+				padding: 0 22px;
+
+				&:hover {
+					background-color: var(--color-background-nav);
+				}
+			}
+		}
+	}
+
 	&::after {
 		content: none;
 	}
@@ -439,8 +458,7 @@ form {
 		.item {
 
 			@extend %dropdown;
-			padding: 0;
-			margin-left: 10px;
+			padding: 0 0 0 0.5rem;
 
 			> a,
 			> span,
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 235012fb7..50671f556 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -286,8 +286,8 @@ input[type="checkbox"] {
 	width: calc(99% - 5em);
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover {
 	text-decoration: none;
 }
 
@@ -655,13 +655,13 @@ input[type="checkbox"]:focus-visible {
 	display: block;
 }
 
-.dropdown-menu > .item {
+.dropdown-menu .item {
 	display: block;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > .as-link,
-.dropdown-menu > .item > span {
+.dropdown-menu .item > a,
+.dropdown-menu .item > .as-link,
+.dropdown-menu .item > span {
 	display: block;
 	width: 100%;
 	white-space: nowrap;
@@ -702,6 +702,7 @@ input[type="checkbox"]:focus-visible {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	margin-top: 5px;
 	padding-top: 5px;
@@ -1980,7 +1981,7 @@ input:checked + .slide-container .properties {
 	#panel .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
-		padding: 1rem;
+		padding: 1rem 0;
 		display: block;
 		width: 100%;
 		border-bottom: 1px solid var(--frss-border-color);
@@ -2005,7 +2006,8 @@ input:checked + .slide-container .properties {
 		position: inherit;
 	}
 
-	.dropdown .dropdown-header {
+	.dropdown .dropdown-header,
+	.dropdown .dropdown-section {
 		line-height: 2;
 	}
 
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 582836b48..cb76b53ca 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -286,8 +286,8 @@ input[type="checkbox"] {
 	width: calc(99% - 5em);
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover {
 	text-decoration: none;
 }
 
@@ -655,13 +655,13 @@ input[type="checkbox"]:focus-visible {
 	display: block;
 }
 
-.dropdown-menu > .item {
+.dropdown-menu .item {
 	display: block;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > .as-link,
-.dropdown-menu > .item > span {
+.dropdown-menu .item > a,
+.dropdown-menu .item > .as-link,
+.dropdown-menu .item > span {
 	display: block;
 	width: 100%;
 	white-space: nowrap;
@@ -702,6 +702,7 @@ input[type="checkbox"]:focus-visible {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	margin-top: 5px;
 	padding-top: 5px;
@@ -1980,7 +1981,7 @@ input:checked + .slide-container .properties {
 	#panel .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
-		padding: 1rem;
+		padding: 1rem 0;
 		display: block;
 		width: 100%;
 		border-bottom: 1px solid var(--frss-border-color);
@@ -2005,7 +2006,8 @@ input:checked + .slide-container .properties {
 		position: inherit;
 	}
 
-	.dropdown .dropdown-header {
+	.dropdown .dropdown-header,
+	.dropdown .dropdown-section {
 		line-height: 2;
 	}
 
-- 
cgit v1.2.3


From c05e931d5ed2ce315e9556db9ebf6afd9918f6fc Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
Date: Sat, 26 Nov 2022 11:31:30 +0100
Subject: Deleted: bookmark.svg (#4897)

* delete bookmark.svg

* optimize Pafat theme
---
 app/Models/Themes.php                   |  1 -
 app/layout/aside_feed.phtml             |  2 +-
 app/views/configure/display.phtml       |  2 +-
 p/themes/BlueLagoon/icons/bookmark.svg  |  3 ---
 p/themes/Pafat/icons/all.svg            | 12 +++++-------
 p/themes/Pafat/icons/bookmark.svg       |  5 -----
 p/themes/Pafat/pafat.css                |  1 +
 p/themes/Pafat/pafat.rtl.css            |  1 +
 p/themes/Screwdriver/icons/bookmark.svg |  5 -----
 p/themes/Swage/icons/bookmark.svg       |  6 ------
 p/themes/icons/bookmark.svg             |  5 -----
 11 files changed, 9 insertions(+), 34 deletions(-)
 delete mode 100644 p/themes/BlueLagoon/icons/bookmark.svg
 delete mode 100644 p/themes/Pafat/icons/bookmark.svg
 delete mode 100644 p/themes/Screwdriver/icons/bookmark.svg
 delete mode 100644 p/themes/Swage/icons/bookmark.svg
 delete mode 100644 p/themes/icons/bookmark.svg

(limited to 'app/layout')

diff --git a/app/Models/Themes.php b/app/Models/Themes.php
index d652ada5b..86125c5f5 100644
--- a/app/Models/Themes.php
+++ b/app/Models/Themes.php
@@ -79,7 +79,6 @@ class FreshRSS_Themes extends Minz_Model {
 		static $alts = array(
 			'add' => '➕',	//✚
 			'all' => '☰',
-			'bookmark' => '✨',	//★
 			'bookmark-add' => '➕',	//✚
 			'bookmark-tag' => '📑',
 			'category' => '🗂️',	//☷
diff --git a/app/layout/aside_feed.phtml b/app/layout/aside_feed.phtml
index 3c4f1ec2e..bb9d678dc 100644
--- a/app/layout/aside_feed.phtml
+++ b/app/layout/aside_feed.phtml
@@ -37,7 +37,7 @@
 
 		<li class="tree-folder category favorites<?= FreshRSS_Context::isCurrentGet('s') ? ' active' : '' ?>">
 			<div class="tree-folder-title">
-				<?= _i('bookmark') ?>
+				<?= _i('starred') ?>
 				<a class="title" data-unread="<?= format_number(FreshRSS_Context::$total_starred['unread']) ?>" href="<?= _url('index', $actual_view, 'get', 's') . $state_filter_manual ?>">
 					<?= _t('index.menu.favorites', format_number(FreshRSS_Context::$total_starred['all'])) ?>
 				</a>
diff --git a/app/views/configure/display.phtml b/app/views/configure/display.phtml
index e3e18f5a0..d49986981 100644
--- a/app/views/configure/display.phtml
+++ b/app/views/configure/display.phtml
@@ -126,7 +126,7 @@
 						<tr>
 							<th> </th>
 							<th title="<?= _t('conf.shortcut.mark_read') ?>"><?= _i('read') ?></th>
-							<th title="<?= _t('conf.shortcut.mark_favorite') ?>"><?= _i('bookmark') ?></th>
+							<th title="<?= _t('conf.shortcut.mark_favorite') ?>"><?= _i('starred') ?></th>
 							<th><?= _t('conf.display.icon.related_tags') ?></th>
 							<th><?= _t('conf.display.icon.sharing') ?></th>
 							<th><?= _t('conf.display.icon.summary') ?></th>
diff --git a/p/themes/BlueLagoon/icons/bookmark.svg b/p/themes/BlueLagoon/icons/bookmark.svg
deleted file mode 100644
index 898488038..000000000
--- a/p/themes/BlueLagoon/icons/bookmark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14.031" height="12.989">
-  <path fill="#666" d="M69.003 398.01a1.03 1.03 0 0 0-.665.24c-.166.138-.277.32-.39.5-.224.357-.392.768-.565 1.203-.173.435-.347.888-.504 1.232a2.606 2.606 0 0 1-.36.588 2.621 2.621 0 0 1-.695.152c-.388.035-.881.05-1.363.07-.482.02-.97.036-1.393.128-.211.038-.415.11-.604.21a.987.987 0 0 0-.45.53.994.994 0 0 0 .036.7c.085.196.227.366.368.524.283.317.633.606 1.008.899.375.293.777.559 1.068.81.29.251.454.508.459.523.018.235 0 .472-.055.702-.085.367-.223.812-.352 1.26-.13.449-.252.902-.292 1.319-.02.208-.043.407.005.614a.987.987 0 0 0 1.067.752c.22-.018.436-.07.636-.152.4-.162.801-.428 1.206-.682.405-.254.808-.522 1.146-.711.337-.19.648-.269.664-.269.016 0 .303.095.639.288.336.192.725.465 1.128.722.402.257.82.497 1.218.663.199.082.389.15.607.17.219.02.48-.03.696-.18a.947.947 0 0 0 .389-.56c.05-.206.043-.435.025-.643-.037-.417-.16-.864-.284-1.314-.126-.45-.262-.887-.345-1.255a2.64 2.64 0 0 1-.066-.701c.005-.015.187-.253.48-.501.293-.249.676-.538 1.054-.827.378-.29.767-.572 1.053-.886a1.93 1.93 0 0 0 .329-.53.916.916 0 0 0 .055-.672c-.082-.245-.271-.413-.46-.523a1.965 1.965 0 0 0-.577-.23c-.422-.095-.914-.14-1.396-.164-.482-.024-.946-.039-1.334-.077a3.698 3.698 0 0 1-.729-.14 2.713 2.713 0 0 1-.338-.582 28.41 28.41 0 0 1-.496-1.224c-.168-.437-.334-.865-.556-1.224a2.01 2.01 0 0 0-.398-.494 1.061 1.061 0 0 0-.669-.258z" style="color:#000;text-indent:0;text-align:start;text-transform:none;direction:ltr;baseline-shift:baseline;enable-background:accumulate;fill:#0062bf;fill-opacity:1" transform="translate(-61.966 -398.01)"/>
-</svg>
diff --git a/p/themes/Pafat/icons/all.svg b/p/themes/Pafat/icons/all.svg
index 14fa80366..1c7ba3ffe 100644
--- a/p/themes/Pafat/icons/all.svg
+++ b/p/themes/Pafat/icons/all.svg
@@ -1,7 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
-<g transform="translate(-40.0002,-746)" fill="#FFF">
-<rect style="color:#FFF;" height="2.0002" width="9.9996" y="749" x="43"/>
-<rect style="color:#FFF;" height="2.0002" width="9.9996" y="753" x="43"/>
-<rect style="color:#FFF;" height="2.0002" width="9.9996" y="757" x="43"/>
-</g>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <g style="fill:#666;fill-opacity:1">
+    <path d="M43 749h10v2H43zM43 753h10v2H43zM43 757h10v2H43z" style="fill:#666;fill-opacity:1" transform="translate(-40 -746)"/>
+  </g>
+</svg>
diff --git a/p/themes/Pafat/icons/bookmark.svg b/p/themes/Pafat/icons/bookmark.svg
deleted file mode 100644
index 70d0c81fb..000000000
--- a/p/themes/Pafat/icons/bookmark.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
-<g transform="translate(-41.000202,-397)">
-<path style="enable-background:accumulate;color:#000000;" d="m530.95,186.71c-0.77941,0.55189-3.1576-1.906-4.1125-1.9179-0.95532-0.0119-3.3949,2.3858-4.161,1.8149-0.76573-0.57072,0.83698-3.592,0.55319-4.5039-0.2839-0.91223-3.3182-2.4915-3.0119-3.3965,0.30617-0.90461,3.6749-0.31399,4.4544-0.86567,0.77986-0.5519,1.3442-3.9257,2.2995-3.914,0.95494,0.0116,1.4342,3.398,2.1998,3.9689,0.76588,0.57114,4.1489,0.0653,4.4331,0.97746,0.28402,0.9118-2.7885,2.414-3.0949,3.3186-0.30652,0.90489,1.22,3.966,0.44027,4.5182z" fill-rule="nonzero" transform="matrix(1.0472113,-0.00871584,0.00871584,1.0472113,-504.35434,220.15425)" fill="#FFF"/>
-</g>
-</svg>
\ No newline at end of file
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index d64521573..fe8770c88 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -476,6 +476,7 @@ a.btn {
 	line-height: 1;
 }
 
+.tree-folder-title > .icon,
 .tree-folder-title .title .icon {
 	filter: brightness(2.5);
 }
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 55e255369..60877e1ad 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -476,6 +476,7 @@ a.btn {
 	line-height: 1;
 }
 
+.tree-folder-title > .icon,
 .tree-folder-title .title .icon {
 	filter: brightness(2.5);
 }
diff --git a/p/themes/Screwdriver/icons/bookmark.svg b/p/themes/Screwdriver/icons/bookmark.svg
deleted file mode 100644
index edf5a02db..000000000
--- a/p/themes/Screwdriver/icons/bookmark.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
-<g transform="translate(-41.000202,-397)">
-<path style="color:#000000;enable-background:accumulate;" d="m530.95,186.71c-0.77941,0.55189-3.1576-1.906-4.1125-1.9179-0.95532-0.0119-3.3949,2.3858-4.161,1.8149-0.76573-0.57072,0.83698-3.592,0.55319-4.5039-0.2839-0.91223-3.3182-2.4915-3.0119-3.3965,0.30617-0.90461,3.6749-0.31399,4.4544-0.86567,0.77986-0.5519,1.3442-3.9257,2.2995-3.914,0.95494,0.0116,1.4342,3.398,2.1998,3.9689,0.76588,0.57114,4.1489,0.0653,4.4331,0.97746,0.28402,0.9118-2.7885,2.414-3.0949,3.3186-0.30652,0.90489,1.22,3.966,0.44027,4.5182z" fill-rule="nonzero" transform="matrix(1.0472113,-0.00871584,0.00871584,1.0472113,-504.35434,220.15425)" fill="#d18104"/>
-</g>
-</svg>
\ No newline at end of file
diff --git a/p/themes/Swage/icons/bookmark.svg b/p/themes/Swage/icons/bookmark.svg
deleted file mode 100644
index 09bf263fd..000000000
--- a/p/themes/Swage/icons/bookmark.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 16 16" version="1.1" viewBox="0 0 16 16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-<style type="text/css">.st0{fill:#FFD255;}</style>
-<path class="st0" d="M8,12.6l4.9,3L11.6,10L16,6.2l-5.7-0.5L8,0.4L5.8,5.7L0,6.2L4.4,10l-1.3,5.6L8,12.6z"/>
-</svg>
-
diff --git a/p/themes/icons/bookmark.svg b/p/themes/icons/bookmark.svg
deleted file mode 100644
index 63a44908f..000000000
--- a/p/themes/icons/bookmark.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
-<g transform="translate(-41.000202,-397)">
-<path style="enable-background:accumulate;color:#000000;" d="m530.95,186.71c-0.77941,0.55189-3.1576-1.906-4.1125-1.9179-0.95532-0.0119-3.3949,2.3858-4.161,1.8149-0.76573-0.57072,0.83698-3.592,0.55319-4.5039-0.2839-0.91223-3.3182-2.4915-3.0119-3.3965,0.30617-0.90461,3.6749-0.31399,4.4544-0.86567,0.77986-0.5519,1.3442-3.9257,2.2995-3.914,0.95494,0.0116,1.4342,3.398,2.1998,3.9689,0.76588,0.57114,4.1489,0.0653,4.4331,0.97746,0.28402,0.9118-2.7885,2.414-3.0949,3.3186-0.30652,0.90489,1.22,3.966,0.44027,4.5182z" fill-rule="nonzero" transform="matrix(1.0472113,-0.00871584,0.00871584,1.0472113,-504.35434,220.15425)" fill="#f1c40f"/>
-</g>
-</svg>
\ No newline at end of file
-- 
cgit v1.2.3


From 92d1b0cda731b7c4ce244f4cd3f759056a2f1534 Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
Date: Mon, 2 Jan 2023 21:54:00 +0100
Subject: Keep view for search landing page (#4981)

---
 app/layout/header.phtml   | 5 +++++
 app/layout/nav_menu.phtml | 5 +++++
 2 files changed, 10 insertions(+)

(limited to 'app/layout')

diff --git a/app/layout/header.phtml b/app/layout/header.phtml
index 75dacfe1d..b9d5c0a13 100644
--- a/app/layout/header.phtml
+++ b/app/layout/header.phtml
@@ -18,6 +18,11 @@
 				<input type="search" name="search" id="search" class="extend"
 					value="<?= htmlspecialchars(htmlspecialchars_decode(FreshRSS_Context::$search, ENT_QUOTES), ENT_COMPAT, 'UTF-8') ?>"
 					placeholder="<?= _t('gen.menu.search') ?>" />
+				
+				<?php $param_a = Minz_Request::actionName(); ?>
+				<?php if (in_array($param_a, ['normal', 'global', 'reader'])) { ?>
+				<input type="hidden" name="a" value="<?= $param_a ?>" />
+				<?php } ?>
 
 				<?php $get = Minz_Request::param('get', ''); ?>
 				<?php if ($get != '') { ?>
diff --git a/app/layout/nav_menu.phtml b/app/layout/nav_menu.phtml
index e8c4170c9..f719538fd 100644
--- a/app/layout/nav_menu.phtml
+++ b/app/layout/nav_menu.phtml
@@ -190,6 +190,11 @@
 			<input type="search" name="search" class="extend" value="<?php
 				echo htmlspecialchars(htmlspecialchars_decode(FreshRSS_Context::$search, ENT_QUOTES), ENT_COMPAT, 'UTF-8'); ?>" placeholder="<?= _t('index.menu.search_short') ?>" />
 
+			<?php $param_a = Minz_Request::actionName(); ?>
+			<?php if (in_array($param_a, ['normal', 'global', 'reader'])) { ?>
+			<input type="hidden" name="a" value="<?= $param_a ?>" />
+			<?php } ?>
+			
 			<?php $get = Minz_Request::param('get', ''); ?>
 			<?php if($get != '') { ?>
 			<input type="hidden" name="get" value="<?= $get ?>" />
-- 
cgit v1.2.3


From bbe3eb8f41ca9c25d1619cda9609392ffc803146 Mon Sep 17 00:00:00 2001
From: Sadetdin EYILI <sad270@users.noreply.github.com>
Date: Mon, 9 Jan 2023 10:37:35 +0100
Subject: Lazy load logo on install, logo on header and theme thumbs in config
 slide (#4998)

* feat: lazy load logo on install, logo on header and theme thumbs in config slide
---
 app/install.php                   | 4 ++--
 app/layout/header.phtml           | 8 ++++----
 app/layout/simple.phtml           | 2 +-
 app/views/configure/display.phtml | 2 +-
 p/index.html                      | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'app/layout')

diff --git a/app/install.php b/app/install.php
index 48f39d25e..3163367f4 100644
--- a/app/install.php
+++ b/app/install.php
@@ -445,7 +445,7 @@ function printStep1() {
 	<?php } else { ?>
 	<p class="alert alert-error"><?= _t('install.action.fix_errors_before') ?></p>
 	<a id="actualize" class="btn" href="./index.php?step=1" title="<?= _t('install.check.reload') ?>">
-		<img class="icon" src="../themes/icons/refresh.svg" alt="🔃" />
+		<img class="icon" src="../themes/icons/refresh.svg" alt="🔃" loading="lazy" />
 	</a>
 	<?php } ?>
 <?php
@@ -676,7 +676,7 @@ if (_t('gen.dir') === 'rtl') {
 	<div class="item title">
 		<div id="logo-wrapper">
 			<a href="./">
-				<img class="logo" src="../themes/icons/FreshRSS-logo.svg" alt="">
+				<img class="logo" src="../themes/icons/FreshRSS-logo.svg" alt="" loading="lazy">
 			</a>
 		</div>
 	</div>
diff --git a/app/layout/header.phtml b/app/layout/header.phtml
index b9d5c0a13..45eb9a3ce 100644
--- a/app/layout/header.phtml
+++ b/app/layout/header.phtml
@@ -2,7 +2,7 @@
 	<div class="item title">
 		<a href="<?= _url('index', 'index') ?>">
 			<?php if (FreshRSS_Context::$system_conf->logo_html == '') { ?>
-				<img class="logo" src="<?= _i('FreshRSS-logo', FreshRSS_Themes::ICON_URL) ?>" alt="FreshRSS" />
+				<img class="logo" src="<?= _i('FreshRSS-logo', FreshRSS_Themes::ICON_URL) ?>" alt="FreshRSS" loading="lazy" />
 			<?php
 				} else {
 					echo FreshRSS_Context::$system_conf->logo_html;
@@ -18,7 +18,7 @@
 				<input type="search" name="search" id="search" class="extend"
 					value="<?= htmlspecialchars(htmlspecialchars_decode(FreshRSS_Context::$search, ENT_QUOTES), ENT_COMPAT, 'UTF-8') ?>"
 					placeholder="<?= _t('gen.menu.search') ?>" />
-				
+
 				<?php $param_a = Minz_Request::actionName(); ?>
 				<?php if (in_array($param_a, ['normal', 'global', 'reader'])) { ?>
 				<input type="hidden" name="a" value="<?= $param_a ?>" />
@@ -83,7 +83,7 @@
 				</li>
 				<?php if (FreshRSS_Auth::hasAccess('admin')) { ?>
 				<li class="item dropdown-section">
-					<div class="dropdown-section-title">	
+					<div class="dropdown-section-title">
 						<?= _t('gen.menu.admin') ?>
 					</div>
 					<ul>
@@ -98,7 +98,7 @@
 					</ul>
 				</li>
 				<?php } ?>
-				
+
 				<li class="item dropdown-section">
 					<ul>
 						<li class="item"><a href="<?= _url('index', 'logs') ?>"><?= _t('gen.menu.logs') ?></a></li>
diff --git a/app/layout/simple.phtml b/app/layout/simple.phtml
index 8a2ee14bb..c9d209999 100644
--- a/app/layout/simple.phtml
+++ b/app/layout/simple.phtml
@@ -31,7 +31,7 @@
 		<div class="item title">
 			<a href="<?= _url('index', 'index') ?>">
 				<?php if (FreshRSS_Context::$system_conf->logo_html == '') { ?>
-					<img class="logo" src="<?= _i('FreshRSS-logo', FreshRSS_Themes::ICON_URL) ?>" alt="FreshRSS" />
+					<img class="logo" src="<?= _i('FreshRSS-logo', FreshRSS_Themes::ICON_URL) ?>" alt="FreshRSS" loading="lazy" />
 				<?php
 					} else {
 						echo FreshRSS_Context::$system_conf->logo_html;
diff --git a/app/views/configure/display.phtml b/app/views/configure/display.phtml
index 0391e59b3..0fde2b50e 100644
--- a/app/views/configure/display.phtml
+++ b/app/views/configure/display.phtml
@@ -60,7 +60,7 @@
 							data-leave-validation="<?= (FreshRSS_Context::$user_conf->theme === $theme['id']) ? 1 : 0 ?>" />
 						<li class="slide-container">
 							<div class="slide">
-								<img src="<?= Minz_Url::display('/themes/' . $theme['id'] . '/thumbs/original.png') ?>" />
+								<img src="<?= Minz_Url::display('/themes/' . $theme['id'] . '/thumbs/original.png') ?>" loading="lazy" />
 							</div>
 							<div class="nav">
 								<?php if ($i !== 1) {?>
diff --git a/p/index.html b/p/index.html
index 3f4284eb5..86cd81c84 100644
--- a/p/index.html
+++ b/p/index.html
@@ -14,6 +14,6 @@
 
 <body>
 <h1><a href="i/">FreshRSS</a></h1>
-<p><a href="i/"><img class="logo" width="25%" src="themes/icons/icon.svg" alt="⊚" /></a></p>
+<p><a href="i/"><img class="logo" width="25%" src="themes/icons/icon.svg" alt="⊚" loading="lazy" /></a></p>
 </body>
 </html>
-- 
cgit v1.2.3


From b5a418ec1618cb1a058aee3dd47baa63562c9194 Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
Date: Mon, 9 Jan 2023 10:40:38 +0100
Subject: Added: Dark mode for Origine +Origine compact themes (#4843)

* first draft

* fix: theme slider: properties box

* improved colors

* option to enable/disable dark mode

* fixes

* Update app/i18n/fr/conf.php

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* i18n english improved

* fix dark background color for favorites + hover colors

* select list: no, auto

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
---
 app/Controllers/configureController.php          |   2 +
 app/Models/ConfigurationSetter.php               |   7 ++
 app/Models/UserConfiguration.php                 |   1 +
 app/i18n/cz/conf.php                             |   1 +
 app/i18n/de/conf.php                             |   1 +
 app/i18n/el/conf.php                             |   1 +
 app/i18n/en-us/conf.php                          |   1 +
 app/i18n/en/conf.php                             |   1 +
 app/i18n/es/conf.php                             |   1 +
 app/i18n/fr/conf.php                             |   1 +
 app/i18n/he/conf.php                             |   1 +
 app/i18n/id/conf.php                             |   1 +
 app/i18n/it/conf.php                             |   1 +
 app/i18n/ja/conf.php                             |   1 +
 app/i18n/ko/conf.php                             |   1 +
 app/i18n/nl/conf.php                             |   1 +
 app/i18n/oc/conf.php                             |   1 +
 app/i18n/pl/conf.php                             |   1 +
 app/i18n/pt-br/conf.php                          |   1 +
 app/i18n/ru/conf.php                             |   1 +
 app/i18n/sk/conf.php                             |   1 +
 app/i18n/tr/conf.php                             |   1 +
 app/i18n/zh-cn/conf.php                          |   1 +
 app/i18n/zh-tw/conf.php                          |   1 +
 app/layout/layout.phtml                          |   2 +-
 app/views/configure/display.phtml                |  10 ++
 config-user.default.php                          |   1 +
 p/themes/Origine-compact/origine-compact.css     |   5 -
 p/themes/Origine-compact/origine-compact.rtl.css |   5 -
 p/themes/Origine/origine.css                     | 119 +++++++++++++++++++++--
 p/themes/Origine/origine.rtl.css                 | 119 +++++++++++++++++++++--
 31 files changed, 265 insertions(+), 27 deletions(-)

(limited to 'app/layout')

diff --git a/app/Controllers/configureController.php b/app/Controllers/configureController.php
index 926ab2272..710a927d6 100755
--- a/app/Controllers/configureController.php
+++ b/app/Controllers/configureController.php
@@ -25,6 +25,7 @@ class FreshRSS_configure_Controller extends FreshRSS_ActionController {
 	 * The options available on the page are:
 	 *   - language (default: en)
 	 *   - theme (default: Origin)
+	 *   - darkMode (default: no)
 	 *   - content width (default: thin)
 	 *   - display of read action in header
 	 *   - display of favorite action in header
@@ -44,6 +45,7 @@ class FreshRSS_configure_Controller extends FreshRSS_ActionController {
 			FreshRSS_Context::$user_conf->language = Minz_Request::param('language', 'en');
 			FreshRSS_Context::$user_conf->timezone = Minz_Request::param('timezone', '');
 			FreshRSS_Context::$user_conf->theme = Minz_Request::param('theme', FreshRSS_Themes::$defaultTheme);
+			FreshRSS_Context::$user_conf->darkMode = Minz_Request::param('darkMode', 'no');
 			FreshRSS_Context::$user_conf->content_width = Minz_Request::param('content_width', 'thin');
 			FreshRSS_Context::$user_conf->topline_read = Minz_Request::param('topline_read', false);
 			FreshRSS_Context::$user_conf->topline_favorite = Minz_Request::param('topline_favorite', false);
diff --git a/app/Models/ConfigurationSetter.php b/app/Models/ConfigurationSetter.php
index c822bcf4d..258c2ad58 100644
--- a/app/Models/ConfigurationSetter.php
+++ b/app/Models/ConfigurationSetter.php
@@ -234,6 +234,13 @@ class FreshRSS_ConfigurationSetter {
 		$data['sticky_post'] = $this->handleBool($value);
 	}
 
+	private function _darkMode(&$data, $value) {
+		if (!in_array($value, [ 'no', 'auto'], true)) {
+			$value = 'no';
+		}
+		$data['darkMode'] = $value;
+	}
+
 	private function _bottomline_date(&$data, $value) {
 		$data['bottomline_date'] = $this->handleBool($value);
 	}
diff --git a/app/Models/UserConfiguration.php b/app/Models/UserConfiguration.php
index 157737cb8..53b12cc2e 100644
--- a/app/Models/UserConfiguration.php
+++ b/app/Models/UserConfiguration.php
@@ -53,6 +53,7 @@
  * @property bool $sides_close_article
  * @property bool $sticky_post
  * @property string $theme
+ * @property string $darkMode
  * @property string $token
  * @property bool $topline_date
  * @property bool $topline_display_authors
diff --git a/app/i18n/cz/conf.php b/app/i18n/cz/conf.php
index 7b0b85465..9d646be36 100644
--- a/app/i18n/cz/conf.php
+++ b/app/i18n/cz/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Zobrazení',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Spodní řádek',
 			'display_authors' => 'Autoři',
diff --git a/app/i18n/de/conf.php b/app/i18n/de/conf.php
index 52826353b..33604b618 100644
--- a/app/i18n/de/conf.php
+++ b/app/i18n/de/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Anzeige',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Fußzeile',
 			'display_authors' => 'Autoren',
diff --git a/app/i18n/el/conf.php b/app/i18n/el/conf.php
index a068282ea..e2629bd54 100644
--- a/app/i18n/el/conf.php
+++ b/app/i18n/el/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Display',	// TODO
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Bottom line',	// TODO
 			'display_authors' => 'Authors',	// TODO
diff --git a/app/i18n/en-us/conf.php b/app/i18n/en-us/conf.php
index 8a572def3..760cbf37f 100644
--- a/app/i18n/en-us/conf.php
+++ b/app/i18n/en-us/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Display',	// IGNORE
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Bottom line',	// IGNORE
 			'display_authors' => 'Authors',	// IGNORE
diff --git a/app/i18n/en/conf.php b/app/i18n/en/conf.php
index d6633f981..02f95b6a8 100644
--- a/app/i18n/en/conf.php
+++ b/app/i18n/en/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Display',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Bottom line',
 			'display_authors' => 'Authors',
diff --git a/app/i18n/es/conf.php b/app/i18n/es/conf.php
index 8c77dcd7e..74d324c24 100755
--- a/app/i18n/es/conf.php
+++ b/app/i18n/es/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Visualización',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Línea inferior',
 			'display_authors' => 'Autores/Autoras',
diff --git a/app/i18n/fr/conf.php b/app/i18n/fr/conf.php
index 71902d96d..88a51eee1 100644
--- a/app/i18n/fr/conf.php
+++ b/app/i18n/fr/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Affichage',
+		'darkMode' => 'Mode sombre automatique (bêta)',
 		'icon' => array(
 			'bottom_line' => 'Ligne du bas',
 			'display_authors' => 'Auteurs',
diff --git a/app/i18n/he/conf.php b/app/i18n/he/conf.php
index ec322fddf..2d0eea4b9 100644
--- a/app/i18n/he/conf.php
+++ b/app/i18n/he/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'תצוגה',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'שורה תחתונה',
 			'display_authors' => 'Authors',	// TODO
diff --git a/app/i18n/id/conf.php b/app/i18n/id/conf.php
index f46347fe2..10f649823 100644
--- a/app/i18n/id/conf.php
+++ b/app/i18n/id/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Display',	// TODO
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Bottom line',	// TODO
 			'display_authors' => 'Authors',	// TODO
diff --git a/app/i18n/it/conf.php b/app/i18n/it/conf.php
index 8efe6be41..5065fe7ea 100644
--- a/app/i18n/it/conf.php
+++ b/app/i18n/it/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Visualizzazione',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Barra in fondo',
 			'display_authors' => 'Autori',
diff --git a/app/i18n/ja/conf.php b/app/i18n/ja/conf.php
index f84354c36..1247a0ce9 100644
--- a/app/i18n/ja/conf.php
+++ b/app/i18n/ja/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => '表示',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => '行の下部',
 			'display_authors' => '著者',
diff --git a/app/i18n/ko/conf.php b/app/i18n/ko/conf.php
index 95fda6969..9ee82802e 100644
--- a/app/i18n/ko/conf.php
+++ b/app/i18n/ko/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => '표시',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => '하단',
 			'display_authors' => '저자',
diff --git a/app/i18n/nl/conf.php b/app/i18n/nl/conf.php
index 261c3aa33..8a22f9e27 100644
--- a/app/i18n/nl/conf.php
+++ b/app/i18n/nl/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Opmaak',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Onderaan',
 			'display_authors' => 'Auteurs',
diff --git a/app/i18n/oc/conf.php b/app/i18n/oc/conf.php
index 9f157a497..4d1e03786 100644
--- a/app/i18n/oc/conf.php
+++ b/app/i18n/oc/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Afichatge',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Linha enbàs',
 			'display_authors' => 'Autors',
diff --git a/app/i18n/pl/conf.php b/app/i18n/pl/conf.php
index 3349bbf53..f026fe128 100644
--- a/app/i18n/pl/conf.php
+++ b/app/i18n/pl/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Wyświetlanie',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Dolny margines',
 			'display_authors' => 'Autorzy',
diff --git a/app/i18n/pt-br/conf.php b/app/i18n/pt-br/conf.php
index bcf9fbd2f..dc05a0fa0 100644
--- a/app/i18n/pt-br/conf.php
+++ b/app/i18n/pt-br/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Exibição',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Linha inferior',
 			'display_authors' => 'Autores',
diff --git a/app/i18n/ru/conf.php b/app/i18n/ru/conf.php
index 98e6f5003..4d65a9dcb 100644
--- a/app/i18n/ru/conf.php
+++ b/app/i18n/ru/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Отображение',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Нижняя линия',
 			'display_authors' => 'Авторы',
diff --git a/app/i18n/sk/conf.php b/app/i18n/sk/conf.php
index 822de7b09..ab68d07ca 100644
--- a/app/i18n/sk/conf.php
+++ b/app/i18n/sk/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Zobrazenie',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Spodný riadok',
 			'display_authors' => 'Autori',
diff --git a/app/i18n/tr/conf.php b/app/i18n/tr/conf.php
index 14eb152c3..cb72d3973 100644
--- a/app/i18n/tr/conf.php
+++ b/app/i18n/tr/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => 'Görünüm',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => 'Alt çizgi',
 			'display_authors' => 'Yazarlar',
diff --git a/app/i18n/zh-cn/conf.php b/app/i18n/zh-cn/conf.php
index a4d293aeb..d558c025e 100644
--- a/app/i18n/zh-cn/conf.php
+++ b/app/i18n/zh-cn/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => '显示',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => '底栏',
 			'display_authors' => '作者',
diff --git a/app/i18n/zh-tw/conf.php b/app/i18n/zh-tw/conf.php
index 61ba44151..3001f64c5 100644
--- a/app/i18n/zh-tw/conf.php
+++ b/app/i18n/zh-tw/conf.php
@@ -32,6 +32,7 @@ return array(
 	),
 	'display' => array(
 		'_' => '顯示',
+		'darkMode' => 'Automatic dark mode (beta)',	// TODO
 		'icon' => array(
 			'bottom_line' => '底欄',
 			'display_authors' => '作者',
diff --git a/app/layout/layout.phtml b/app/layout/layout.phtml
index 48ada7183..1e9ce6905 100644
--- a/app/layout/layout.phtml
+++ b/app/layout/layout.phtml
@@ -52,7 +52,7 @@ if (_t('gen.dir') === 'rtl') {
 		<meta name="robots" content="noindex,nofollow" />
 <?php } ?>
 	</head>
-	<body class="<?= Minz_Request::actionName() ?>">
+	<body class="<?= Minz_Request::actionName() ?><?= (FreshRSS_Context::$user_conf->darkMode === 'no') ? '' : ' darkMode_' . FreshRSS_Context::$user_conf->darkMode ?>">
 <?php
 	if (!Minz_Request::param('ajax')) {
 		flush();
diff --git a/app/views/configure/display.phtml b/app/views/configure/display.phtml
index 0fde2b50e..2fda0cb19 100644
--- a/app/views/configure/display.phtml
+++ b/app/views/configure/display.phtml
@@ -95,6 +95,16 @@
 			</div>
 		</div>
 
+		<div class="form-group">
+			<label class="group-name" for="darkMode"><?= _t('conf.display.darkMode') ?></label>
+			<div class="group-controls">
+				<select name="darkMode" id="darkMode" data-leave-validation="<?= FreshRSS_Context::$user_conf->darkMode ?>">
+					<option value="no"<?php FreshRSS_Context::$user_conf->darkMode === 'no' ? ' selected' : '' ?>>No</option>
+					<option value="auto"<?php FreshRSS_Context::$user_conf->darkMode === 'auto' ? ' selected' : '' ?>>Auto</option>
+				</select>
+			</div>
+		</div>
+
 		<?php $width = FreshRSS_Context::$user_conf->content_width; ?>
 		<div class="form-group">
 			<label class="group-name" for="content_width"><?= _t('conf.display.width.content') ?></label>
diff --git a/config-user.default.php b/config-user.default.php
index e1f332bf2..5a26841ac 100644
--- a/config-user.default.php
+++ b/config-user.default.php
@@ -64,6 +64,7 @@ return array (
 		'site' => true,
 	),
 	'theme' => 'Origine',
+	'darkMode' => 'no',
 	'content_width' => 'thin',
 	'shortcuts' => array (
 		'actualize' => 'q',
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index bea5d5cf6..d94b09fb7 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -40,11 +40,6 @@ 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 8929847bb..c98c5f6da 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -40,11 +40,6 @@ 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 fd119fe19..af9d3330a 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -12,8 +12,10 @@
 	--background-color-hover: #f6f6f6;
 
 	--unread-article-background-color: #fff3ed;
+	--unread-article-background-color-hover: #faeee8;
 	--unread-article-border-color: #ff5300;
 	--favorite-article-background-color: #fff6da;
+	--favorite-article-background-color-hover: #fcf2d6;
 	--favorite-article-border-color: #ffc300;
 
 	--contrast-background-color: #0084cc;
@@ -825,34 +827,42 @@ a:hover .icon {
 	border-left: 2px solid var(--contrast-border-color-active);
 }
 
-.flux .flux_header:hover {
-	background-color: var(--background-color-hover) !important;
+.flux .flux_header:hover,
+.flux .flux_header:hover .item {
+	background-color: var(--background-color-hover);
 }
 
-.flux .flux_header:not(.current):hover .item.title {
-	background: inherit;
+.flux .flux_header:not(.current):hover .flux_header,
+.flux .flux_header:not(.current):hover .flux_header .item {
+	background-color: var(--background-color-hover);
 }
 
 .flux.not_read {
 	border-left: 2px solid var(--unread-article-border-color);
 }
 
-.flux.not_read .flux_header {
+.flux.not_read .flux_header .item {
 	background-color: var(--unread-article-background-color);
 }
 
-.flux.not_read:not(.current):hover .item.title {
-	background: inherit;
+.flux.not_read:not(.current):hover .flux_header,
+.flux.not_read:not(.current):hover .flux_header .item {
+	background-color: var(--unread-article-background-color-hover);
 }
 
 .flux.favorite {
 	border-left: 2px solid var(--favorite-article-border-color);
 }
 
-.flux.favorite:not(.current) {
+.flux.favorite:not(.current) .flux_header .item {
 	background-color: var(--favorite-article-background-color);
 }
 
+.flux.favorite:not(.current):hover .flux_header,
+.flux.favorite:not(.current):hover .flux_header .item {
+	background-color: var(--favorite-article-background-color-hover);
+}
+
 .flux_header {
 	font-size: 0.9rem;
 	border-top: 1px solid var(--border-color);
@@ -1188,3 +1198,96 @@ a:hover .icon {
 		display: none;
 	}
 }
+
+@media screen and (prefers-color-scheme: dark) {
+	:root .darkMode_auto {
+		--frss-background-color: #000;
+		--frss-background-color-middle: #222;
+		--frss-border-color: #444;
+		--frss-font-color-grey-dark: #999;
+		--frss-font-color-dark: #ddd;
+		--frss-modal-background-color-transparent: #000000a3;
+		--frss-background-color-transparent: #000000a3;
+		--frss-scrollbar-handle: #fff1;
+		--frss-scrollbar-handle-hover: #fff4;
+
+		--background-color-light-gradient: #111;
+		--background-color-light: #111;
+		--background-color-light-shadowed: #191919;
+		--background-color-grey: #1f1f1f;
+		--background-color-hover: #09090977;
+
+		--unread-article-background-color: #201f1e;
+		--unread-article-background-color-hover: #1a1918;
+		--unread-article-border-color: #ff5300;
+		--favorite-article-background-color: #24221d;
+		--favorite-article-background-color-hover: #1d1b17;
+		--favorite-article-border-color: #ffc300;
+
+		--contrast-background-color: #0084cc;
+		--contrast-background-color-gradient: #0045cc;
+		--contrast-background-color-hover: #06c;
+		--contrast-background-color-active: #038;
+		--contrast-border-color: #0062b7;
+
+		--contrast-background-font-color: #eee;
+
+		--attention-background-color-gradient1: #ea4a46;
+		--attention-background-color-gradient2: #911811;
+
+		--attention-background-color-gradient1-hover: #d14641;
+		--attention-background-color-gradient2-hover: #bd362f;
+		--attention-background-color-active: #bd362f;
+		--attention-border-color: #c44742;
+
+		--empty-feed-color: #e67e22;
+		--error-feed-color: #bd362f;
+
+		--alert-warn-background-color: #ffffe022;
+		--alert-warn-font-color: #ccc;
+		--alert-warn-border-color: #eeb;
+		--alert-success-background-color: #e8ffe814;
+		--alert-success-font-color: #96c196;
+		--alert-success-border-color: #cec;
+		--alert-error-background-color: #fdda;
+		--alert-error-font-color: #693a3a;
+		--alert-error-boder-color: #ecc;
+
+		--notification-good-background-color: #ffe;
+		--notification-good-border-color: #eeb;
+		--notification-good-font-color: #916a37;
+		--notification-bad-background-color: #fdd;
+		--notification-bad-font-color: #643838;
+		--notification-bad-border-color: #ecc;
+		--notification-close-background-color-hover: #aaa2;
+
+		--font-color: #ccc;
+		--font-color-grey: #aaa;
+		--font-color-light-shadowed: #555;
+		--font-color-light: #ccc;
+
+		--text-shadow-color: #1c1c1c;
+		--text-shadow-color-dark: #666;
+		--box-shadow-color: #4446;
+		--box-shadow-color-inset: #1f1f1f;
+
+		--font-color-link: #467eb3;
+		--font-color-link-hover: #0062be;
+
+		--border-color: #222;
+		--border-color-shadow-side: #333;
+		--contrast-border-color-active: #0062be;
+
+		--form-element-font-color-focus: #879db1;
+		--form-element-border-color-focus: #0062be;
+		--form-element-focus-box-shadow-color-inset: #110;
+		--form-element-border-color-invalid: #f00;
+		--form-element-invalid-box-shadow-color-inset: #fdd;
+	}
+
+	.btn.active,
+	.btn:active,
+	.dropdown-target:target ~ .btn.dropdown-toggle {
+		background: var(--border-color);
+	}
+}
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 9127ac9e8..27c381f6a 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -12,8 +12,10 @@
 	--background-color-hover: #f6f6f6;
 
 	--unread-article-background-color: #fff3ed;
+	--unread-article-background-color-hover: #faeee8;
 	--unread-article-border-color: #ff5300;
 	--favorite-article-background-color: #fff6da;
+	--favorite-article-background-color-hover: #fcf2d6;
 	--favorite-article-border-color: #ffc300;
 
 	--contrast-background-color: #0084cc;
@@ -825,34 +827,42 @@ a:hover .icon {
 	border-right: 2px solid var(--contrast-border-color-active);
 }
 
-.flux .flux_header:hover {
-	background-color: var(--background-color-hover) !important;
+.flux .flux_header:hover,
+.flux .flux_header:hover .item {
+	background-color: var(--background-color-hover);
 }
 
-.flux .flux_header:not(.current):hover .item.title {
-	background: inherit;
+.flux .flux_header:not(.current):hover .flux_header,
+.flux .flux_header:not(.current):hover .flux_header .item {
+	background-color: var(--background-color-hover);
 }
 
 .flux.not_read {
 	border-right: 2px solid var(--unread-article-border-color);
 }
 
-.flux.not_read .flux_header {
+.flux.not_read .flux_header .item {
 	background-color: var(--unread-article-background-color);
 }
 
-.flux.not_read:not(.current):hover .item.title {
-	background: inherit;
+.flux.not_read:not(.current):hover .flux_header,
+.flux.not_read:not(.current):hover .flux_header .item {
+	background-color: var(--unread-article-background-color-hover);
 }
 
 .flux.favorite {
 	border-right: 2px solid var(--favorite-article-border-color);
 }
 
-.flux.favorite:not(.current) {
+.flux.favorite:not(.current) .flux_header .item {
 	background-color: var(--favorite-article-background-color);
 }
 
+.flux.favorite:not(.current):hover .flux_header,
+.flux.favorite:not(.current):hover .flux_header .item {
+	background-color: var(--favorite-article-background-color-hover);
+}
+
 .flux_header {
 	font-size: 0.9rem;
 	border-top: 1px solid var(--border-color);
@@ -1188,3 +1198,96 @@ a:hover .icon {
 		display: none;
 	}
 }
+
+@media screen and (prefers-color-scheme: dark) {
+	:root .darkMode_auto {
+		--frss-background-color: #000;
+		--frss-background-color-middle: #222;
+		--frss-border-color: #444;
+		--frss-font-color-grey-dark: #999;
+		--frss-font-color-dark: #ddd;
+		--frss-modal-background-color-transparent: #000000a3;
+		--frss-background-color-transparent: #000000a3;
+		--frss-scrollbar-handle: #fff1;
+		--frss-scrollbar-handle-hover: #fff4;
+
+		--background-color-light-gradient: #111;
+		--background-color-light: #111;
+		--background-color-light-shadowed: #191919;
+		--background-color-grey: #1f1f1f;
+		--background-color-hover: #09090977;
+
+		--unread-article-background-color: #201f1e;
+		--unread-article-background-color-hover: #1a1918;
+		--unread-article-border-color: #ff5300;
+		--favorite-article-background-color: #24221d;
+		--favorite-article-background-color-hover: #1d1b17;
+		--favorite-article-border-color: #ffc300;
+
+		--contrast-background-color: #0084cc;
+		--contrast-background-color-gradient: #0045cc;
+		--contrast-background-color-hover: #06c;
+		--contrast-background-color-active: #038;
+		--contrast-border-color: #0062b7;
+
+		--contrast-background-font-color: #eee;
+
+		--attention-background-color-gradient1: #ea4a46;
+		--attention-background-color-gradient2: #911811;
+
+		--attention-background-color-gradient1-hover: #d14641;
+		--attention-background-color-gradient2-hover: #bd362f;
+		--attention-background-color-active: #bd362f;
+		--attention-border-color: #c44742;
+
+		--empty-feed-color: #e67e22;
+		--error-feed-color: #bd362f;
+
+		--alert-warn-background-color: #ffffe022;
+		--alert-warn-font-color: #ccc;
+		--alert-warn-border-color: #eeb;
+		--alert-success-background-color: #e8ffe814;
+		--alert-success-font-color: #96c196;
+		--alert-success-border-color: #cec;
+		--alert-error-background-color: #fdda;
+		--alert-error-font-color: #693a3a;
+		--alert-error-boder-color: #ecc;
+
+		--notification-good-background-color: #ffe;
+		--notification-good-border-color: #eeb;
+		--notification-good-font-color: #916a37;
+		--notification-bad-background-color: #fdd;
+		--notification-bad-font-color: #643838;
+		--notification-bad-border-color: #ecc;
+		--notification-close-background-color-hover: #aaa2;
+
+		--font-color: #ccc;
+		--font-color-grey: #aaa;
+		--font-color-light-shadowed: #555;
+		--font-color-light: #ccc;
+
+		--text-shadow-color: #1c1c1c;
+		--text-shadow-color-dark: #666;
+		--box-shadow-color: #4446;
+		--box-shadow-color-inset: #1f1f1f;
+
+		--font-color-link: #467eb3;
+		--font-color-link-hover: #0062be;
+
+		--border-color: #222;
+		--border-color-shadow-side: #333;
+		--contrast-border-color-active: #0062be;
+
+		--form-element-font-color-focus: #879db1;
+		--form-element-border-color-focus: #0062be;
+		--form-element-focus-box-shadow-color-inset: #110;
+		--form-element-border-color-invalid: #f00;
+		--form-element-invalid-box-shadow-color-inset: #fdd;
+	}
+
+	.btn.active,
+	.btn:active,
+	.dropdown-target:target ~ .btn.dropdown-toggle {
+		background: var(--border-color);
+	}
+}
-- 
cgit v1.2.3


From 33468def4a5fc0e3af92e5759f463d4d4872fd84 Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
Date: Tue, 17 Jan 2023 15:52:29 +0100
Subject: Improved: navigation menu structure (#4937)

---
 app/layout/aside_configure.phtml         | 136 +++++++++++++++++--------------
 app/layout/aside_subscription.phtml      |  57 +++++++------
 p/themes/Alternative-Dark/adark.css      |  14 ++--
 p/themes/Alternative-Dark/adark.rtl.css  |  14 ++--
 p/themes/Ansum/_sidebar.scss             |  24 ++++--
 p/themes/Ansum/ansum.css                 |  18 ++--
 p/themes/Ansum/ansum.rtl.css             |  18 ++--
 p/themes/BlueLagoon/BlueLagoon.css       |  15 ++--
 p/themes/BlueLagoon/BlueLagoon.rtl.css   |  15 ++--
 p/themes/Dark/dark.css                   |  15 ++--
 p/themes/Dark/dark.rtl.css               |  15 ++--
 p/themes/Flat/flat.css                   |  15 ++--
 p/themes/Flat/flat.rtl.css               |  15 ++--
 p/themes/Mapco/_sidebar.scss             |  24 ++++--
 p/themes/Mapco/mapco.css                 |  22 +++--
 p/themes/Mapco/mapco.rtl.css             |  20 +++--
 p/themes/Nord/nord.css                   |  21 +++--
 p/themes/Nord/nord.rtl.css               |  21 +++--
 p/themes/Origine/origine.css             |  20 ++---
 p/themes/Origine/origine.rtl.css         |  20 ++---
 p/themes/Pafat/pafat.css                 |  15 ++--
 p/themes/Pafat/pafat.rtl.css             |  15 ++--
 p/themes/Screwdriver/screwdriver.css     |  15 ++--
 p/themes/Screwdriver/screwdriver.rtl.css |  15 ++--
 p/themes/Swage/swage.css                 |  10 ++-
 p/themes/Swage/swage.rtl.css             |  10 ++-
 p/themes/Swage/swage.scss                |  23 +++---
 p/themes/base-theme/frss.css             |   4 +
 p/themes/base-theme/frss.rtl.css         |   4 +
 29 files changed, 377 insertions(+), 253 deletions(-)

(limited to 'app/layout')

diff --git a/app/layout/aside_configure.phtml b/app/layout/aside_configure.phtml
index f4a05a47c..03b8108f7 100644
--- a/app/layout/aside_configure.phtml
+++ b/app/layout/aside_configure.phtml
@@ -2,71 +2,89 @@
 	<a class="toggle_aside" href="#close"><?= _i('close') ?></a>
 
 	<ul>
-		<li class="nav-header"><?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8')?></li>
-		<li class="item<?= Minz_Request::controllerName() === 'user' && Minz_Request::actionName() === 'profile' ? ' active' : '' ?>">
-			<a href="<?= _url('user', 'profile') ?>"><?= _t('gen.menu.user_profile') ?></a>
+		<li class="item nav-section">
+			<div class="item nav-header"><?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8')?></div>
+			<ul>
+				<li class="item<?= Minz_Request::controllerName() === 'user' && Minz_Request::actionName() === 'profile' ? ' active' : '' ?>">
+					<a href="<?= _url('user', 'profile') ?>"><?= _t('gen.menu.user_profile') ?></a>
+				</li>
+				<li class="item">
+					<a class="signout" href="<?= _url('auth', 'logout') ?>">
+						<?php
+						echo _t('gen.auth.logout'); ?> <?= _i('logout') ?></a>
+				</li>
+			</ul>
 		</li>
-		<li class="item">
-			<a class="signout" href="<?= _url('auth', 'logout') ?>">
-				<?php
-				echo _t('gen.auth.logout'); ?> <?= _i('logout') ?></a>
-		</li>
-		<li class="nav-header"><?= _t('gen.menu.configuration') ?></li>
-		<li class="item<?= Minz_Request::actionName() === 'display' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'display') ?>"><?= _t('gen.menu.display') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() === 'reading' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'reading') ?>"><?= _t('gen.menu.reading') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() === 'archiving' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'archiving') ?>"><?= _t('gen.menu.archiving') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() === 'integration' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'integration') ?>"><?= _t('gen.menu.sharing') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() === 'shortcut' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'shortcut') ?>"><?= _t('gen.menu.shortcuts') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() === 'queries' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'queries') ?>"><?= _t('gen.menu.queries') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::controllerName() === 'extension' ? ' active' : '' ?>">
-			<a href="<?= _url('extension', 'index') ?>"><?= _t('gen.menu.extensions') ?></a>
-		</li>
-		<?php if (!FreshRSS_Auth::hasAccess('admin')) { ?>
-		<li class="item<?= Minz_Request::actionName() === 'logs' ? ' active' : '' ?>">
-			<a href="<?= _url('index', 'logs') ?>"><?= _t('gen.menu.logs') ?></a>
+
+		<li class="item nav-section">
+			<div class="item nav-header"><?= _t('gen.menu.configuration') ?></div>
+			<ul>
+				<li class="item<?= Minz_Request::actionName() === 'display' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'display') ?>"><?= _t('gen.menu.display') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() === 'reading' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'reading') ?>"><?= _t('gen.menu.reading') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() === 'archiving' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'archiving') ?>"><?= _t('gen.menu.archiving') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() === 'integration' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'integration') ?>"><?= _t('gen.menu.sharing') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() === 'shortcut' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'shortcut') ?>"><?= _t('gen.menu.shortcuts') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() === 'queries' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'queries') ?>"><?= _t('gen.menu.queries') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::controllerName() === 'extension' ? ' active' : '' ?>">
+					<a href="<?= _url('extension', 'index') ?>"><?= _t('gen.menu.extensions') ?></a>
+				</li>
+				<?php if (!FreshRSS_Auth::hasAccess('admin')) { ?>
+				<li class="item<?= Minz_Request::actionName() === 'logs' ? ' active' : '' ?>">
+					<a href="<?= _url('index', 'logs') ?>"><?= _t('gen.menu.logs') ?></a>
+				</li>
+				<?php } ?>
+				<?= Minz_ExtensionManager::callHook('menu_configuration_entry') ?>
+			</ul>
 		</li>
-		<?php } ?>
-		<?= Minz_ExtensionManager::callHook('menu_configuration_entry') ?>
 
 		<?php if (FreshRSS_Auth::hasAccess('admin')) { ?>
-		<li class="nav-header"><?= _t('gen.menu.admin') ?></li>
-		<li class="item<?= Minz_Request::actionName() === 'system' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'system') ?>"><?= _t('gen.menu.system') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::controllerName() === 'user' && Minz_Request::actionName() === 'manage' ? ' active' : '' ?>">
-			<a href="<?= _url('user', 'manage') ?>"><?= _t('gen.menu.user_management') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::controllerName() === 'auth' ? ' active' : '' ?>">
-			<a href="<?= _url('auth', 'index') ?>"><?= _t('gen.menu.authentication') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::controllerName() === 'update' && Minz_Request::actionName() === 'checkInstall' ? ' active' : '' ?>">
-			<a href="<?= _url('update', 'checkInstall') ?>"><?= _t('gen.menu.check_install') ?></a>
-		</li>
-		<?php if (!FreshRSS_Context::$system_conf->disable_update) { ?>
-		<li class="item<?= Minz_Request::controllerName() === 'update' && Minz_Request::actionName() === 'index' ? ' active' : '' ?>">
-			<a href="<?= _url('update', 'index') ?>"><?= _t('gen.menu.update') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() === 'logs' ? ' active' : '' ?>">
-			<a href="<?= _url('index', 'logs') ?>"><?= _t('gen.menu.logs') ?></a>
+		<li class="item nav-section">
+			<div class="item nav-header"><?= _t('gen.menu.admin') ?></div>
+			<ul>
+				<li class="item<?= Minz_Request::actionName() === 'system' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'system') ?>"><?= _t('gen.menu.system') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::controllerName() === 'user' && Minz_Request::actionName() === 'manage' ? ' active' : '' ?>">
+					<a href="<?= _url('user', 'manage') ?>"><?= _t('gen.menu.user_management') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::controllerName() === 'auth' ? ' active' : '' ?>">
+					<a href="<?= _url('auth', 'index') ?>"><?= _t('gen.menu.authentication') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::controllerName() === 'update' && Minz_Request::actionName() === 'checkInstall' ? ' active' : '' ?>">
+					<a href="<?= _url('update', 'checkInstall') ?>"><?= _t('gen.menu.check_install') ?></a>
+				</li>
+				<?php if (!FreshRSS_Context::$system_conf->disable_update) { ?>
+				<li class="item<?= Minz_Request::controllerName() === 'update' && Minz_Request::actionName() === 'index' ? ' active' : '' ?>">
+					<a href="<?= _url('update', 'index') ?>"><?= _t('gen.menu.update') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() === 'logs' ? ' active' : '' ?>">
+					<a href="<?= _url('index', 'logs') ?>"><?= _t('gen.menu.logs') ?></a>
+				</li>
+				<?php } ?>
+				<?= Minz_ExtensionManager::callHook('menu_admin_entry') ?>
+			</ul>
 		</li>
 		<?php } ?>
-		<?= Minz_ExtensionManager::callHook('menu_admin_entry') ?>
-		<?php } ?>
-		<li class="nav-header"><!-- empty headline --></li>
-		<li class="item<?= Minz_Request::actionName() === 'about' ? ' active' : '' ?>">
-			<a href="<?= _url('index', 'about') ?>"><?= _t('gen.menu.about') ?></a>
+
+		<li class="item nav-section">
+			<div class="item nav-header"><!-- empty headline --></div>
+			<ul>
+				<li class="item<?= Minz_Request::actionName() === 'about' ? ' active' : '' ?>">
+					<a href="<?= _url('index', 'about') ?>"><?= _t('gen.menu.about') ?></a>
+				</li>
+			</ul>
 		</li>
 	</ul>
 </nav>
diff --git a/app/layout/aside_subscription.phtml b/app/layout/aside_subscription.phtml
index aa7857f74..e1f520f34 100644
--- a/app/layout/aside_subscription.phtml
+++ b/app/layout/aside_subscription.phtml
@@ -1,38 +1,45 @@
 <nav class="nav nav-list aside" id="aside_feed">
 	<a class="toggle_aside" href="#close"><?= _i('close') ?></a>
 	<ul>
-		<li class="nav-header"><?= _t('sub.menu.subscription_management') ?></li>
+		<li class="item nav-section">
+			<div class="nav-header"><?= _t('sub.menu.subscription_management') ?></div>
+			<ul>
+				<li class="item<?= Minz_Request::controllerName() === 'subscription' && Minz_Request::actionName() === 'add' ? ' active' : '' ?>">
+					<a href="<?= _url('subscription', 'add') ?>"><?= _t('sub.menu.add') ?></a>
+				</li>
 
-		<li class="item<?= Minz_Request::controllerName() === 'subscription' && Minz_Request::actionName() === 'add' ? ' active' : '' ?>">
-			<a href="<?= _url('subscription', 'add') ?>"><?= _t('sub.menu.add') ?></a>
-		</li>
+				<li class="item<?= Minz_Request::controllerName() === 'subscription' && Minz_Request::actionName() === 'index' ? ' active' : '' ?>">
+					<a href="<?= _url('subscription', 'index') ?>"><?= _t('sub.menu.subscription_management') ?></a>
+				</li>
 
-		<li class="item<?= Minz_Request::controllerName() === 'subscription' && Minz_Request::actionName() === 'index' ? ' active' : '' ?>">
-			<a href="<?= _url('subscription', 'index') ?>"><?= _t('sub.menu.subscription_management') ?></a>
-		</li>
+				<li class="item<?= Minz_Request::controllerName() === 'tag' ? ' active' : '' ?>">
+					<a href="<?= _url('tag', 'index') ?>"><?= _t('sub.menu.label_management') ?></a>
+				</li>
 
-		<li class="item<?= Minz_Request::controllerName() === 'tag' ? ' active' : '' ?>">
-			<a href="<?= _url('tag', 'index') ?>"><?= _t('sub.menu.label_management') ?></a>
-		</li>
+				<li class="item<?= Minz_Request::controllerName() === 'importExport' ? ' active' : '' ?>">
+					<a href="<?= _url('importExport', 'index') ?>"><?= _t('sub.menu.import_export') ?></a>
+				</li>
 
-		<li class="item<?= Minz_Request::controllerName() === 'importExport' ? ' active' : '' ?>">
-			<a href="<?= _url('importExport', 'index') ?>"><?= _t('sub.menu.import_export') ?></a>
+				<li class="item<?= Minz_Request::controllerName() === 'subscription' && Minz_Request::actionName() === 'bookmarklet' ? ' active' : '' ?>">
+					<a href="<?= _url('subscription', 'bookmarklet') ?>"><?= _t('sub.menu.subscription_tools') ?></a>
+				</li>
+			</ul>
 		</li>
 
-		<li class="item<?= Minz_Request::controllerName() === 'subscription' && Minz_Request::actionName() === 'bookmarklet' ? ' active' : '' ?>">
-			<a href="<?= _url('subscription', 'bookmarklet') ?>"><?= _t('sub.menu.subscription_tools') ?></a>
-		</li>
-		<li class="nav-header"><?= _t('admin.stats') ?></li>
-		<li class="item<?= Minz_Request::controllerName() == 'stats' && Minz_Request::actionName() == 'index' ? ' active' : '' ?>">
-			<a href="<?= _url('stats', 'index') ?>"><?= _t('sub.menu.stats.main') ?></a>
+		<li class="item nav-section">
+			<div class="nav-header"><?= _t('admin.stats') ?></div>
+			<ul>
+				<li class="item<?= Minz_Request::controllerName() == 'stats' && Minz_Request::actionName() == 'index' ? ' active' : '' ?>">
+					<a href="<?= _url('stats', 'index') ?>"><?= _t('sub.menu.stats.main') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() == 'idle' ? ' active' : '' ?>">
+					<a href="<?= _url('stats', 'idle') ?>"><?= _t('sub.menu.stats.idle') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() == 'repartition' ? ' active' : '' ?>">
+					<a href="<?= _url('stats', 'repartition') ?>"><?= _t('sub.menu.stats.repartition') ?></a>
+				</li>
+			</ul>
 		</li>
-		<li class="item<?= Minz_Request::actionName() == 'idle' ? ' active' : '' ?>">
-			<a href="<?= _url('stats', 'idle') ?>"><?= _t('sub.menu.stats.idle') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() == 'repartition' ? ' active' : '' ?>">
-			<a href="<?= _url('stats', 'repartition') ?>"><?= _t('sub.menu.stats.repartition') ?></a>
-		</li>
-
 	</ul>
 </nav>
 <a class="close-aside" href="#close">❌</a>
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 8106f775b..38135720a 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -280,13 +280,17 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	line-height: 2.5;
+.nav-list {
 	color: var(--font-color-light);
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a {
 	color: var(--font-color-middle);
 }
@@ -302,7 +306,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -310,7 +314,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	color: var(--font-color-middle);
 	font-weight: bold;
 }
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index d40403fc8..81ef43765 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -280,13 +280,17 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	line-height: 2.5;
+.nav-list {
 	color: var(--font-color-light);
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a {
 	color: var(--font-color-middle);
 }
@@ -302,7 +306,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -310,7 +314,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	color: var(--font-color-middle);
 	font-weight: bold;
 }
diff --git a/p/themes/Ansum/_sidebar.scss b/p/themes/Ansum/_sidebar.scss
index d73cf7439..e92dd2ec4 100644
--- a/p/themes/Ansum/_sidebar.scss
+++ b/p/themes/Ansum/_sidebar.scss
@@ -135,15 +135,23 @@
 
 /*=== Navigation */
 .nav-list {
-	.nav-header,
+	font-size: 1rem;
+
+	.item.nav-header,
 	.item {
-		height: 2.5em;
+		min-height: 2.5em;
 		line-height: 2.5em;
-		font-size: 1rem;
 	}
 
 	.item {
 		background: variables.$sid-bg;
+		min-height: 2.5em;
+		line-height: 2.5em;
+
+		&.nav-header {
+			min-height: 2.5em;
+			line-height: 2.5em;
+		}
 
 		a {
 			padding: 0 1rem;
@@ -152,11 +160,9 @@
 			@include mixins.transition(all, 0.15s, ease-in-out);
 		}
 
-		&:hover {
-			a {
-				background: variables.$sid-bg-dark;
-				text-decoration: none;
-			}
+		a:hover {
+			background: variables.$sid-bg-dark;
+			text-decoration: none;
 		}
 
 		&.active {
@@ -172,7 +178,7 @@
 	}
 
 	.nav-header {
-		padding: 0 10px;
+		padding: 0 1rem;
 		font-weight: bold;
 		color: variables.$grey-dark;
 		text-transform: uppercase;
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 5c7433fce..6789320b5 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -552,21 +552,29 @@ form th {
 
 /* Sidebar des pages de configuration */
 /*=== Navigation */
-.nav-list .nav-header,
+.nav-list {
+	font-size: 1rem;
+}
+.nav-list .item.nav-header,
 .nav-list .item {
-	height: 2.5em;
+	min-height: 2.5em;
 	line-height: 2.5em;
-	font-size: 1rem;
 }
 .nav-list .item {
 	background: #fbf9f6;
+	min-height: 2.5em;
+	line-height: 2.5em;
+}
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5em;
 }
 .nav-list .item a {
 	padding: 0 1rem;
 	color: #363330;
 	transition: all 0.15s ease-in-out;
 }
-.nav-list .item:hover a {
+.nav-list .item a:hover {
 	background: #efe3d3;
 	text-decoration: none;
 }
@@ -580,7 +588,7 @@ form th {
 	text-decoration: none;
 }
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	color: #766556;
 	text-transform: uppercase;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index d8e6eaa99..82ea37a3c 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -552,21 +552,29 @@ form th {
 
 /* Sidebar des pages de configuration */
 /*=== Navigation */
-.nav-list .nav-header,
+.nav-list {
+	font-size: 1rem;
+}
+.nav-list .item.nav-header,
 .nav-list .item {
-	height: 2.5em;
+	min-height: 2.5em;
 	line-height: 2.5em;
-	font-size: 1rem;
 }
 .nav-list .item {
 	background: #fbf9f6;
+	min-height: 2.5em;
+	line-height: 2.5em;
+}
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5em;
 }
 .nav-list .item a {
 	padding: 0 1rem;
 	color: #363330;
 	transition: all 0.15s ease-in-out;
 }
-.nav-list .item:hover a {
+.nav-list .item a:hover {
 	background: #efe3d3;
 	text-decoration: none;
 }
@@ -580,7 +588,7 @@ form th {
 	text-decoration: none;
 }
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	color: #766556;
 	text-transform: uppercase;
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index e37f35228..31bf28d06 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -265,13 +265,16 @@ a.btn {
 	box-shadow: 0 -1px rgba(255,255,255,0.08) inset;
 }
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	text-shadow: 0 0 2px rgba(255,255,255,0.28);
 	color: #fff;
@@ -286,7 +289,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 	color: #ccc;
 }
 
@@ -295,7 +298,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	background: transparent;
 	color: #222;
 }
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index faa7250f3..f971dbace 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -265,13 +265,16 @@ a.btn {
 	box-shadow: 0 -1px rgba(255,255,255,0.08) inset;
 }
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	text-shadow: 0 0 2px rgba(255,255,255,0.28);
 	color: #fff;
@@ -286,7 +289,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 	color: #ccc;
 }
 
@@ -295,7 +298,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	background: transparent;
 	color: #222;
 }
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 3ddb59755..dfcc1b2e7 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -261,13 +261,16 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	background: #26303f;
 }
@@ -282,7 +285,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -290,7 +293,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	background: #111;
 	border-bottom: 1px solid #333;
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index faea0df5e..0ef5f06b4 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -261,13 +261,16 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	background: #26303f;
 }
@@ -282,7 +285,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -290,7 +293,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	background: #111;
 	border-bottom: 1px solid #333;
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index c6c2a6aec..fa667c899 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -250,13 +250,16 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover,
 .nav-list .item.active {
 	background: #2980b9;
@@ -268,7 +271,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -276,7 +279,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	background: #34495e;
 	color: #fff;
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 2ef0e42ea..da3722f18 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -250,13 +250,16 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover,
 .nav-list .item.active {
 	background: #2980b9;
@@ -268,7 +271,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -276,7 +279,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	background: #34495e;
 	color: #fff;
diff --git a/p/themes/Mapco/_sidebar.scss b/p/themes/Mapco/_sidebar.scss
index 9f546da61..a71960b1d 100644
--- a/p/themes/Mapco/_sidebar.scss
+++ b/p/themes/Mapco/_sidebar.scss
@@ -133,16 +133,24 @@
 
 /*=== Navigation */
 .nav-list {
-	.nav-header,
+	font-size: 1rem;
+
+	.item.nav-header,
 	.item {
-		height: 2.5em;
+		min-height: 2.5em;
 		line-height: 2.5em;
-		font-size: 1rem;
 	}
 
 	.item {
 		background: variables.$sid-bg;
 		color: variables.$white;
+		min-height: 2.5em;
+		line-height: 2.5em;
+
+		&.nav-header {
+			min-height: 2.5em;
+			line-height: 2.5em;
+		}
 
 		a {
 			padding: 0 1rem;
@@ -151,11 +159,9 @@
 			@include mixins.transition(all, 0.15s, ease-in-out);
 		}
 
-		&:hover {
-			a {
-				background: variables.$sid-bg-dark;
-				text-decoration: none;
-			}
+		a:hover {
+			background: variables.$sid-bg-dark;
+			text-decoration: none;
 		}
 
 		&.active {
@@ -171,7 +177,7 @@
 	}
 
 	.nav-header {
-		padding: 0 10px;
+		padding: 0 1rem;
 		font-weight: bold;
 		color: variables.$grey-dark;
 		text-transform: uppercase;
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 94be46e9f..c34dc08e0 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -565,22 +565,30 @@ form th {
 
 /* Sidebar des pages de configuration */
 /*=== Navigation */
-.nav-list .nav-header,
+.nav-list {
+	font-size: 1rem;
+}
+.nav-list .item.nav-header,
 .nav-list .item {
-	height: 2.5em;
+	min-height: 2.5em;
 	line-height: 2.5em;
-	font-size: 1rem;
 }
 .nav-list .item {
 	background: #303136;
 	color: #fff;
+	min-height: 2.5em;
+	line-height: 2.5em;
+}
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5em;
 }
 .nav-list .item a {
 	padding: 0 1rem;
 	color: #ffffff;
 	transition: all 0.15s ease-in-out;
 }
-.nav-list .item:hover a {
+.nav-list .item a:hover {
 	background: #17181a;
 	text-decoration: none;
 }
@@ -594,7 +602,7 @@ form th {
 	text-decoration: none;
 }
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	color: #5b6871;
 	text-transform: uppercase;
@@ -1335,6 +1343,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 5b042c849..112ca94c7 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -565,22 +565,30 @@ form th {
 
 /* Sidebar des pages de configuration */
 /*=== Navigation */
-.nav-list .nav-header,
+.nav-list {
+	font-size: 1rem;
+}
+.nav-list .item.nav-header,
 .nav-list .item {
-	height: 2.5em;
+	min-height: 2.5em;
 	line-height: 2.5em;
-	font-size: 1rem;
 }
 .nav-list .item {
 	background: #303136;
 	color: #fff;
+	min-height: 2.5em;
+	line-height: 2.5em;
+}
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5em;
 }
 .nav-list .item a {
 	padding: 0 1rem;
 	color: #ffffff;
 	transition: all 0.15s ease-in-out;
 }
-.nav-list .item:hover a {
+.nav-list .item a:hover {
 	background: #17181a;
 	text-decoration: none;
 }
@@ -594,7 +602,7 @@ form th {
 	text-decoration: none;
 }
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	color: #5b6871;
 	text-transform: uppercase;
@@ -1335,4 +1343,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 e0eda2af9..5e8004903 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -208,13 +208,6 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	font-size: 0.9rem;
-	line-height: 2.5em;
-}
-
 .dropdown-menu {
 	margin: 5px 0 0;
 	padding: 0.5rem 0 0.25rem 0;
@@ -859,8 +852,18 @@ input.extend {
 }
 
 /*=== Navigation */
+.nav-list {
+	font-size: 0.9rem;
+}
+
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -868,7 +871,7 @@ input.extend {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 }
 
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index d2b5146a1..fd38ef26c 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -208,13 +208,6 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	font-size: 0.9rem;
-	line-height: 2.5em;
-}
-
 .dropdown-menu {
 	margin: 5px 0 0;
 	padding: 0.5rem 0 0.25rem 0;
@@ -859,8 +852,18 @@ input.extend {
 }
 
 /*=== Navigation */
+.nav-list {
+	font-size: 0.9rem;
+}
+
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -868,7 +871,7 @@ input.extend {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 }
 
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index af9d3330a..9e30e429d 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -353,21 +353,22 @@ a:hover .icon {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5;
+.nav-list {
 	font-size: 0.9rem;
 }
 
-.nav-list .item:hover {
-	background-color: var(--background-color-hover);
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
 }
 
-.nav-list .item:hover a {
+.nav-list .nav-section .item:hover a {
+	background-color: var(--background-color-hover);
 	color: var(--font-color-link-hover);
 }
 
+.nav-list .nav-section .item.active:hover a,
 .nav-list .item.active {
 	background-color: var(--contrast-background-color-active);
 	color: var(--font-color-light);
@@ -378,8 +379,8 @@ a:hover .icon {
 }
 
 .nav-list .item > a,
-.nav-list .item > span {
-	padding: 0 10px;
+.nav-list .item > div {
+	padding: 0 1rem;
 }
 
 .nav-list .item > span {
@@ -392,7 +393,6 @@ a:hover .icon {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
 	background-color: var(--background-color-grey);
 	color: var(--font-color-grey);
 	border-bottom: 1px solid var(--border-color);
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 27c381f6a..53e623917 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -353,21 +353,22 @@ a:hover .icon {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5;
+.nav-list {
 	font-size: 0.9rem;
 }
 
-.nav-list .item:hover {
-	background-color: var(--background-color-hover);
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
 }
 
-.nav-list .item:hover a {
+.nav-list .nav-section .item:hover a {
+	background-color: var(--background-color-hover);
 	color: var(--font-color-link-hover);
 }
 
+.nav-list .nav-section .item.active:hover a,
 .nav-list .item.active {
 	background-color: var(--contrast-background-color-active);
 	color: var(--font-color-light);
@@ -378,8 +379,8 @@ a:hover .icon {
 }
 
 .nav-list .item > a,
-.nav-list .item > span {
-	padding: 0 10px;
+.nav-list .item > div {
+	padding: 0 1rem;
 }
 
 .nav-list .item > span {
@@ -392,7 +393,6 @@ a:hover .icon {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
 	background-color: var(--background-color-grey);
 	color: var(--font-color-grey);
 	border-bottom: 1px solid var(--border-color);
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 5a7fb876f..8c5b7a9f4 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -294,13 +294,16 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	color: var(--font-color-link-general-hover);
 	background-color: var(--background-color-grey-hover);
@@ -317,7 +320,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -325,7 +328,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	background-color: var(--background-color-grey);
 	color: var(--font-color-grey);
 	border-bottom: 1px solid var(--border-color-grey-light);
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 0181e60ed..1ff2ea70e 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -294,13 +294,16 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	color: var(--font-color-link-general-hover);
 	background-color: var(--background-color-grey-hover);
@@ -317,7 +320,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -325,7 +328,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	background-color: var(--background-color-grey);
 	color: var(--font-color-grey);
 	border-bottom: 1px solid var(--border-color-grey-light);
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 39d1dd152..e5ca98ab7 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -263,13 +263,16 @@ a.btn {
 	box-shadow: 0 -1px rgba(255,255,255,0.08) inset;
 }
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	text-shadow: 0 0 2px rgba(255,255,255,0.28);
 	color: #fff;
@@ -290,7 +293,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 	color: #ccc;
 }
 
@@ -299,7 +302,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	background: transparent;
 	color: #222;
 }
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index e29b0e1b2..664331ac7 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -263,13 +263,16 @@ a.btn {
 	box-shadow: 0 -1px rgba(255,255,255,0.08) inset;
 }
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	text-shadow: 0 0 2px rgba(255,255,255,0.28);
 	color: #fff;
@@ -290,7 +293,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 	color: #ccc;
 }
 
@@ -299,7 +302,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	background: transparent;
 	color: #222;
 }
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 0ebdfa3fb..3bf9d8684 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -54,10 +54,9 @@ select:invalid {
 	box-shadow: none;
 }
 
-.nav-list .item, .nav-list .nav-header {
-	height: 2.5em;
+.nav-list .item .nav-header, .nav-list .item {
+	min-height: 2.5em;
 	line-height: 2.5;
-	font-size: 0.9rem;
 }
 
 .dropdown-menu > .item a,
@@ -263,7 +262,10 @@ form th {
 	background-image: url("./icons/disabled-light.svg");
 }
 
-.nav-list .nav-header {
+.nav-list {
+	font-size: 0.9rem;
+}
+.nav-list .item .nav-header {
 	padding: 0 1rem;
 	font-weight: bold;
 	background-color: var(--color-background-aside);
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index f8f031567..d2282f52c 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -54,10 +54,9 @@ select:invalid {
 	box-shadow: none;
 }
 
-.nav-list .item, .nav-list .nav-header {
-	height: 2.5em;
+.nav-list .item .nav-header, .nav-list .item {
+	min-height: 2.5em;
 	line-height: 2.5;
-	font-size: 0.9rem;
 }
 
 .dropdown-menu > .item a,
@@ -263,7 +262,10 @@ form th {
 	background-image: url("./icons/disabled-light.svg");
 }
 
-.nav-list .nav-header {
+.nav-list {
+	font-size: 0.9rem;
+}
+.nav-list .item .nav-header {
 	padding: 0 1rem;
 	font-weight: bold;
 	background-color: var(--color-background-aside);
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index a0570bb16..e24e9da7f 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -76,9 +76,8 @@ $color_hover:	#fff;
 }
 
 %nav-list {
-	height: 2.5em;
+	min-height: 2.5em;
 	line-height: 2.5;
-	font-size: 0.9rem;
 }
 
 %dropdown {
@@ -338,20 +337,22 @@ form {
 }
 
 .nav-list {
-	.nav-header {
-
-		@extend %nav-list;
-		padding: 0 1rem;
-		font-weight: bold;
-		background-color: var(--color-background-aside);
-		color: var(--color-text-light);
-		cursor: default;
-	}
+	font-size: 0.9rem;
 
 	.item {
 
 		@extend %nav-list;
 
+		.nav-header {
+
+			@extend %nav-list;
+			padding: 0 1rem;
+			font-weight: bold;
+			background-color: var(--color-background-aside);
+			color: var(--color-text-light);
+			cursor: default;
+		}
+
 		a:hover {
 			background-color: var(--color-background-nav-darker);
 			color: var(--color-text-light);
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index a24d7c32c..56e99ec70 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -559,6 +559,10 @@ input[type="checkbox"]:focus-visible {
 }
 
 /*=== Navigation */
+.nav-list {
+	padding-bottom: 3rem;
+}
+
 .nav-list .nav-header,
 .nav-list .item {
 	display: block;
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 4a8782c7e..4c8326e32 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -559,6 +559,10 @@ input[type="checkbox"]:focus-visible {
 }
 
 /*=== Navigation */
+.nav-list {
+	padding-bottom: 3rem;
+}
+
 .nav-list .nav-header,
 .nav-list .item {
 	display: block;
-- 
cgit v1.2.3


From 1c4b328ae14ce94c56171eb28ca4dc0c665051f4 Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
Date: Wed, 25 Jan 2023 22:23:51 +0100
Subject: Improved: expanding inputs (#5040)

* fix

* wider input element
---
 app/layout/header.phtml                  |  2 +-
 app/views/configure/system.phtml         |  4 ++--
 app/views/feed/add.phtml                 |  2 +-
 app/views/helpers/category/update.phtml  |  2 +-
 app/views/helpers/configure/query.phtml  |  4 ++--
 app/views/subscription/add.phtml         |  8 ++++----
 p/themes/Alternative-Dark/adark.css      |  8 --------
 p/themes/Alternative-Dark/adark.rtl.css  |  8 --------
 p/themes/Ansum/_forms.scss               |  5 -----
 p/themes/Ansum/_layout.scss              |  4 +---
 p/themes/Ansum/ansum.css                 |  7 +------
 p/themes/Ansum/ansum.rtl.css             |  7 +------
 p/themes/BlueLagoon/BlueLagoon.css       |  8 --------
 p/themes/BlueLagoon/BlueLagoon.rtl.css   |  8 --------
 p/themes/Dark/dark.css                   |  8 --------
 p/themes/Dark/dark.rtl.css               |  8 --------
 p/themes/Flat/flat.css                   |  8 --------
 p/themes/Flat/flat.rtl.css               |  8 --------
 p/themes/Mapco/_forms.scss               |  5 -----
 p/themes/Mapco/_layout.scss              |  4 +---
 p/themes/Mapco/mapco.css                 |  7 +------
 p/themes/Mapco/mapco.rtl.css             |  7 +------
 p/themes/Nord/nord.css                   | 11 -----------
 p/themes/Nord/nord.rtl.css               | 11 -----------
 p/themes/Origine/origine.css             |  8 --------
 p/themes/Origine/origine.rtl.css         |  8 --------
 p/themes/Pafat/pafat.css                 |  6 +-----
 p/themes/Pafat/pafat.rtl.css             |  6 +-----
 p/themes/Screwdriver/screwdriver.css     |  8 --------
 p/themes/Screwdriver/screwdriver.rtl.css |  8 --------
 p/themes/Swage/swage.css                 |  7 -------
 p/themes/Swage/swage.rtl.css             |  7 -------
 p/themes/Swage/swage.scss                | 10 ----------
 p/themes/base-theme/base.css             |  8 --------
 p/themes/base-theme/base.rtl.css         |  8 --------
 p/themes/base-theme/frss.css             |  7 ++++---
 p/themes/base-theme/frss.rtl.css         |  7 ++++---
 37 files changed, 27 insertions(+), 225 deletions(-)

(limited to 'app/layout')

diff --git a/app/layout/header.phtml b/app/layout/header.phtml
index 45eb9a3ce..0a49d5992 100644
--- a/app/layout/header.phtml
+++ b/app/layout/header.phtml
@@ -15,7 +15,7 @@
 		<?php if (FreshRSS_Auth::hasAccess() || FreshRSS_Context::$system_conf->allow_anonymous) { ?>
 		<form action="<?= _url('index', 'index') ?>" method="get">
 			<div class="stick">
-				<input type="search" name="search" id="search" class="extend"
+				<input type="search" name="search" id="search"
 					value="<?= htmlspecialchars(htmlspecialchars_decode(FreshRSS_Context::$search, ENT_QUOTES), ENT_COMPAT, 'UTF-8') ?>"
 					placeholder="<?= _t('gen.menu.search') ?>" />
 
diff --git a/app/views/configure/system.phtml b/app/views/configure/system.phtml
index 94fe34b94..bf14cac5d 100644
--- a/app/views/configure/system.phtml
+++ b/app/views/configure/system.phtml
@@ -16,7 +16,7 @@
 		<div class="form-group">
 			<label class="group-name" for="instance-name"><?= _t('admin.system.instance-name') ?></label>
 			<div class="group-controls">
-				<input type="text" class="extend" id="instance-name" name="instance-name" value="<?= FreshRSS_Context::$system_conf->title ?>"
+				<input type="text" id="instance-name" name="instance-name" value="<?= FreshRSS_Context::$system_conf->title ?>"
 					data-leave-validation="<?= FreshRSS_Context::$system_conf->title ?>"/>
 			</div>
 		</div>
@@ -24,7 +24,7 @@
 		<div class="form-group">
 			<label class="group-name" for="auto-update-url"><?= _t('admin.system.auto-update-url') ?></label>
 			<div class="group-controls">
-				<input type="text" class="extend" id="auto-update-url" name="auto-update-url" value="<?= FreshRSS_Context::$system_conf->auto_update_url ?>"
+				<input type="text" id="auto-update-url" name="auto-update-url" value="<?= FreshRSS_Context::$system_conf->auto_update_url ?>"
 					data-leave-validation="<?= FreshRSS_Context::$system_conf->auto_update_url ?>"/>
 			</div>
 		</div>
diff --git a/app/views/feed/add.phtml b/app/views/feed/add.phtml
index 8f5594526..3461e6e61 100644
--- a/app/views/feed/add.phtml
+++ b/app/views/feed/add.phtml
@@ -67,7 +67,7 @@
 		<div class="form-group">
 			<label class="group-name" for="http_user"><?= _t('sub.feed.auth.username') ?></label>
 			<div class="group-controls">
-				<input type="text" name="http_user" id="http_user" class="extend" value="<?= $auth['username'] ?>" autocomplete="off" />
+				<input type="text" name="http_user" id="http_user" value="<?= $auth['username'] ?>" autocomplete="off" />
 				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.auth.help') ?></p>
 			</div>
 
diff --git a/app/views/helpers/category/update.phtml b/app/views/helpers/category/update.phtml
index 171ee20a4..a0986ff04 100644
--- a/app/views/helpers/category/update.phtml
+++ b/app/views/helpers/category/update.phtml
@@ -16,7 +16,7 @@
 		<div class="form-group">
 			<label class="group-name" for="name"><?= _t('sub.category.title') ?></label>
 			<div class="group-controls">
-				<input type="text" name="name" id="name" class="extend" value="<?= $this->category->name()  ?>" <?php
+				<input type="text" name="name" id="name" value="<?= $this->category->name()  ?>" <?php
 					//Disallow changing the name of the default category
 					echo $this->category->id() == FreshRSS_CategoryDAO::DEFAULTCATEGORYID ? 'disabled="disabled"' : '';
 				?> />
diff --git a/app/views/helpers/configure/query.phtml b/app/views/helpers/configure/query.phtml
index a75333cfc..f8d51c193 100644
--- a/app/views/helpers/configure/query.phtml
+++ b/app/views/helpers/configure/query.phtml
@@ -12,7 +12,7 @@
 		<div class="form-group">
 			<label class="group-name" for="name"><?= _t('conf.query.name') ?></label>
 			<div class="group-controls">
-				<input type="text" name="name" id="name" class="extend" value="<?= $this->query->getName()  ?>" />
+				<input type="text" name="name" id="name" value="<?= $this->query->getName()  ?>" />
 			</div>
 		</div>
 		<legend><?= _t('conf.query.filter') ?></legend>
@@ -20,7 +20,7 @@
 		<div class="form-group">
 			<label class="group-name" for=""><?= _t('conf.query.filter.search') ?></label>
 			<div class="group-controls">
-				<input type="text" id="query_search" name="query[search]"  class="extend" value="<?= htmlspecialchars($this->query->getSearch(), ENT_COMPAT, 'UTF-8') ?>"/>
+				<input type="text" id="query_search" name="query[search]" value="<?= htmlspecialchars($this->query->getSearch(), ENT_COMPAT, 'UTF-8') ?>"/>
 			</div>
 		</div>
 		<div class="form-group">
diff --git a/app/views/subscription/add.phtml b/app/views/subscription/add.phtml
index 800093bed..212574002 100644
--- a/app/views/subscription/add.phtml
+++ b/app/views/subscription/add.phtml
@@ -190,7 +190,7 @@
 			<div class="form-group">
 				<label class="group-name" for="curl_params_cookie"><?= _t('sub.feed.css_cookie') ?></label>
 				<div class="group-controls">
-					<input type="text" name="curl_params_cookie" id="curl_params_cookie" class="extend" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
+					<input type="text" name="curl_params_cookie" id="curl_params_cookie" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.css_cookie_help') ?></p>
 					<label for="curl_params_cookiefile">
 						<input type="checkbox" name="curl_params_cookiefile" id="curl_params_cookiefile" value="1" />
@@ -203,7 +203,7 @@
 			<div class="form-group">
 				<label class="group-name" for="curl_params_redirects"><?= _t('sub.feed.max_http_redir') ?></label>
 				<div class="group-controls">
-					<input type="number" name="curl_params_redirects" id="curl_params_redirects" class="extend" min="-1" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
+					<input type="number" name="curl_params_redirects" id="curl_params_redirects" min="-1" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.max_http_redir_help') ?></p>
 				</div>
 			</div>
@@ -212,7 +212,7 @@
 				<label class="group-name" for="curl_params_useragent"><?= _t('sub.feed.useragent') ?></label>
 				<div class="group-controls">
 					<div class="stick">
-						<input type="text" name="curl_params_useragent" id="curl_params_useragent" class="extend" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
+						<input type="text" name="curl_params_useragent" id="curl_params_useragent" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 					</div>
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.useragent_help') ?></p>
 				</div>
@@ -228,7 +228,7 @@
 					?>
 					</select>
 					<div class="stick">
-						<input type="text" name="curl_params" id="curl_params" class="extend" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
+						<input type="text" name="curl_params" id="curl_params" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 					</div>
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.proxy_help') ?></p>
 				</div>
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index aa3d7eab8..25df31194 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -114,10 +114,6 @@ input:disabled, select:disabled {
 	border-color: var(--border-color-dark);
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -556,10 +552,6 @@ kbd {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 99fe8fb34..6fb1bf25a 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -114,10 +114,6 @@ input:disabled, select:disabled {
 	border-color: var(--border-color-dark);
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -556,10 +552,6 @@ kbd {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Ansum/_forms.scss b/p/themes/Ansum/_forms.scss
index 4f3f9e698..3bdb30664 100644
--- a/p/themes/Ansum/_forms.scss
+++ b/p/themes/Ansum/_forms.scss
@@ -120,11 +120,6 @@ input:disabled, select:disabled {
 	border-color: variables.$grey-medium-dark;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index c5a1a2b3e..cb5271dcd 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -29,7 +29,7 @@
 
 		&.search {
 			input {
-				width: 230px;
+				width: 350px;
 				color: variables.$sid-font-color;
 				border: none;
 				border-radius: 2px 0 0 2px;
@@ -42,9 +42,7 @@
 				}
 
 				&:focus {
-					width: 350px;
 					color: variables.$grey-dark;
-
 					background-color: variables.$white;
 				}
 			}
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 6789320b5..03aa67e67 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -164,10 +164,6 @@ input:disabled, select:disabled {
 	border-color: #ba9;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
@@ -673,7 +669,7 @@ form th {
 	filter: invert(80%) opacity(80%);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #363330;
 	border: none;
 	border-radius: 2px 0 0 2px;
@@ -684,7 +680,6 @@ form th {
 	background-color: #efe3d3;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #766556;
 	background-color: #fff;
 }
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 82ea37a3c..b106da359 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -164,10 +164,6 @@ input:disabled, select:disabled {
 	border-color: #ba9;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
@@ -673,7 +669,7 @@ form th {
 	filter: invert(80%) opacity(80%);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #363330;
 	border: none;
 	border-radius: 0 2px 2px 0;
@@ -684,7 +680,6 @@ form th {
 	background-color: #efe3d3;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #766556;
 	background-color: #fff;
 }
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index d24a1cd1c..14a369a2e 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -66,10 +66,6 @@ input:disabled, select:disabled {
 	border-color: #ccc;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -593,10 +589,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 3fa917e5f..7c16ee958 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -66,10 +66,6 @@ input:disabled, select:disabled {
 	border-color: #ccc;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -593,10 +589,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 11c4c7d1b..859397eb1 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -78,10 +78,6 @@ input:disabled, select:disabled {
 	border-color: #000;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -544,10 +540,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 19d368165..a75552d51 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -78,10 +78,6 @@ input:disabled, select:disabled {
 	border-color: #000;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -544,10 +540,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 518e6b07b..aefe3d454 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -70,10 +70,6 @@ input:disabled, select:disabled {
 	background: #eee;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -547,10 +543,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index d82f6d268..43ada0a4c 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -70,10 +70,6 @@ input:disabled, select:disabled {
 	background: #eee;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -547,10 +543,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Mapco/_forms.scss b/p/themes/Mapco/_forms.scss
index 479f40d44..977a70346 100644
--- a/p/themes/Mapco/_forms.scss
+++ b/p/themes/Mapco/_forms.scss
@@ -119,11 +119,6 @@ input:disabled, select:disabled {
 	background: variables.$grey-light;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index 495c19ebf..7be890369 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -29,7 +29,7 @@
 
 		&.search {
 			input {
-				width: 230px;
+				width: 350px;
 				color: variables.$sid-font-color;
 				border: none;
 				border-radius: 2px 0 0 2px;
@@ -42,9 +42,7 @@
 				}
 
 				&:focus {
-					width: 350px;
 					color: variables.$grey-dark;
-
 					background-color: variables.$white;
 				}
 			}
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index c34dc08e0..d2978c217 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -163,10 +163,6 @@ input:disabled, select:disabled {
 	background: #eff0f2;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
@@ -687,7 +683,7 @@ form th {
 	filter: grayscale(100%) brightness(2.2);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #ffffff;
 	border: none;
 	border-radius: 2px 0 0 2px;
@@ -698,7 +694,6 @@ form th {
 	background-color: #17181a;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #5b6871;
 	background-color: #fff;
 }
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 112ca94c7..7ed00631a 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -163,10 +163,6 @@ input:disabled, select:disabled {
 	background: #eff0f2;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 .form-group {
 	padding: 5px;
 	border-radius: 3px;
@@ -687,7 +683,7 @@ form th {
 	filter: grayscale(100%) brightness(2.2);
 }
 .header .item.search input {
-	width: 230px;
+	width: 350px;
 	color: #ffffff;
 	border: none;
 	border-radius: 0 2px 2px 0;
@@ -698,7 +694,6 @@ form th {
 	background-color: #17181a;
 }
 .header .item.search input:focus {
-	width: 350px;
 	color: #5b6871;
 	background-color: #fff;
 }
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index fb4e71147..403a27dd0 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -448,10 +448,6 @@ img.favicon {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
@@ -833,17 +829,10 @@ textarea {
 	height: 100px;
 }
 
-
 option {
 	padding: 0 .5em;
 }
 
-
-input.extend {
-	transition: width 200ms linear;
-}
-
-
 /*=== COMPONENTS */
 /*===============*/
 /*=== Forms */
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index 95e4625cf..2ae7464fa 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -448,10 +448,6 @@ img.favicon {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
@@ -833,17 +829,10 @@ textarea {
 	height: 100px;
 }
 
-
 option {
 	padding: 0 .5em;
 }
 
-
-input.extend {
-	transition: width 200ms linear;
-}
-
-
 /*=== COMPONENTS */
 /*===============*/
 /*=== Forms */
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 1db88e0a9..319e6a2a4 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -151,10 +151,6 @@ input:disabled, select:disabled {
 	background-color: var(--background-color-light-shadowed);
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -656,10 +652,6 @@ a:hover .icon {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 2cc8e15b4..983b1743e 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -151,10 +151,6 @@ input:disabled, select:disabled {
 	background-color: var(--background-color-light-shadowed);
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -656,10 +652,6 @@ a:hover .icon {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index f6ee43cf5..f5d418f15 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -140,10 +140,6 @@ input:invalid, select:invalid {
 	box-shadow: 0 0 2px 2px var(--invalid-box-shadow-color) inset;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -611,7 +607,7 @@ a.signin {
 	height: 29px;
 }
 
-.header .item.search input:focus {
+.header .item.search input {
 	width: 350px;
 }
 
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 338a4355f..cc8d72da4 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -140,10 +140,6 @@ input:invalid, select:invalid {
 	box-shadow: 0 0 2px 2px var(--invalid-box-shadow-color) inset;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -611,7 +607,7 @@ a.signin {
 	height: 29px;
 }
 
-.header .item.search input:focus {
+.header .item.search input {
 	width: 350px;
 }
 
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 74a43c890..e66861563 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -64,10 +64,6 @@ input:disabled, select:disabled {
 	background: #eee;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -577,10 +573,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index de4b33242..a823dc93d 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -64,10 +64,6 @@ input:disabled, select:disabled {
 	background: #eee;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -577,10 +573,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 17fb8e77f..02fd9471f 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -148,10 +148,6 @@ select {
 	padding-bottom: 8px;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 option {
 	padding: 0 0.5em;
 }
@@ -580,9 +576,6 @@ form th {
 	top: 5px;
 	filter: grayscale(100%) brightness(100);
 }
-.header .item.search input:focus {
-	width: 350px;
-}
 .header .item.search {
 	display: none;
 }
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 9e8d826e1..9cee872c9 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -148,10 +148,6 @@ select {
 	padding-bottom: 8px;
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 option {
 	padding: 0 0.5em;
 }
@@ -580,9 +576,6 @@ form th {
 	top: 5px;
 	filter: grayscale(100%) brightness(100);
 }
-.header .item.search input:focus {
-	width: 350px;
-}
 .header .item.search {
 	display: none;
 }
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 584841de2..c3092b2e1 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -186,12 +186,6 @@ select {
 	padding-bottom: 8px;
 }
 
-input {
-	&.extend {
-		transition: width 200ms linear;
-	}
-}
-
 option {
 	padding: 0 .5em;
 }
@@ -744,10 +738,6 @@ form {
 		}
 	}
 
-	.item.search input:focus {
-		width: 350px;
-	}
-
 	.item.search {
 		display: none;
 	}
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index cd133939d..095ef49c0 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -52,10 +52,6 @@ input:invalid, select:invalid {
 input:disabled, select:disabled {
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -404,10 +400,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index ab5156b68..a97d4876c 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -52,10 +52,6 @@ input:invalid, select:invalid {
 input:disabled, select:disabled {
 }
 
-input.extend {
-	transition: width 200ms linear;
-}
-
 /*=== Tables */
 table {
 	border-collapse: collapse;
@@ -404,10 +400,6 @@ a.btn {
 }
 
 .header > .item.search input {
-	width: 230px;
-}
-
-.header .item.search input:focus {
 	width: 350px;
 }
 
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 56e99ec70..9c3f16b1c 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -194,7 +194,8 @@ label {
 }
 
 input {
-	width: 180px;
+	max-width: 90%;
+	width: 300px;
 }
 
 input[type=number] {
@@ -203,8 +204,7 @@ input[type=number] {
 
 textarea,
 input[type="file"],
-input.long,
-input.extend:focus {
+input.long {
 	width: 300px;
 }
 
@@ -212,6 +212,7 @@ input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
 	font-size: 0.8rem;
+	box-sizing: border-box;
 }
 
 input.w50,
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 4c8326e32..6555c95ce 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -194,7 +194,8 @@ label {
 }
 
 input {
-	width: 180px;
+	max-width: 90%;
+	width: 300px;
 }
 
 input[type=number] {
@@ -203,8 +204,7 @@ input[type=number] {
 
 textarea,
 input[type="file"],
-input.long,
-input.extend:focus {
+input.long {
 	width: 300px;
 }
 
@@ -212,6 +212,7 @@ input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
 	font-size: 0.8rem;
+	box-sizing: border-box;
 }
 
 input.w50,
-- 
cgit v1.2.3


From e53ba88bb96ba1343ffc771f6170baa4342b4e39 Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
Date: Mon, 30 Jan 2023 20:32:55 +0100
Subject: Search Improved: dropdown (#4994)

* first draft

* fix

* RTL CSS

* add link to documentation

* hide search button in desktop view

* rename .no-desktop to .only-mobile

* i18n

* add ID

* Theme: Swage

* Theme Scewdriver

* Theme Pafat

* Theme flat

* Theme: Adark

* Theme: Dark

* i18n: German

* i18n en-us

* fix i18n

* Update app/i18n/fr/gen.php

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update app/layout/nav_menu.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update app/layout/nav_menu.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update app/layout/nav_menu.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* wip

* mapco theme

* RTL for Ansum and Mapco

* fix

* fix

---------

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
---
 app/i18n/cz/gen.php                      |  1 +
 app/i18n/de/gen.php                      |  1 +
 app/i18n/el/gen.php                      |  1 +
 app/i18n/en-us/gen.php                   |  1 +
 app/i18n/en/gen.php                      |  1 +
 app/i18n/es/gen.php                      |  1 +
 app/i18n/fr/gen.php                      |  1 +
 app/i18n/he/gen.php                      |  1 +
 app/i18n/id/gen.php                      |  1 +
 app/i18n/it/gen.php                      |  1 +
 app/i18n/ja/gen.php                      |  1 +
 app/i18n/ko/gen.php                      |  1 +
 app/i18n/nl/gen.php                      |  1 +
 app/i18n/oc/gen.php                      |  1 +
 app/i18n/pl/gen.php                      |  1 +
 app/i18n/pt-br/gen.php                   |  1 +
 app/i18n/ru/gen.php                      |  1 +
 app/i18n/sk/gen.php                      |  1 +
 app/i18n/tr/gen.php                      |  1 +
 app/i18n/zh-cn/gen.php                   |  1 +
 app/i18n/zh-tw/gen.php                   |  1 +
 app/layout/nav_menu.phtml                | 72 +++++++++++++++++++-------------
 p/themes/Alternative-Dark/adark.css      | 15 -------
 p/themes/Alternative-Dark/adark.rtl.css  | 15 -------
 p/themes/Ansum/_components.scss          | 15 ++++++-
 p/themes/Ansum/_layout.scss              |  8 +++-
 p/themes/Ansum/_mobile.scss              | 32 +-------------
 p/themes/Ansum/_sidebar.scss             |  2 +-
 p/themes/Ansum/ansum.css                 | 58 ++++++++++---------------
 p/themes/Ansum/ansum.rtl.css             | 58 ++++++++++---------------
 p/themes/Dark/dark.css                   | 14 -------
 p/themes/Dark/dark.rtl.css               | 14 -------
 p/themes/Flat/flat.css                   |  2 +-
 p/themes/Flat/flat.rtl.css               |  2 +-
 p/themes/Mapco/_components.scss          | 13 +++++-
 p/themes/Mapco/_layout.scss              |  8 +++-
 p/themes/Mapco/_mobile.scss              | 27 +-----------
 p/themes/Mapco/_sidebar.scss             |  2 +-
 p/themes/Mapco/mapco.css                 | 54 +++++++++++-------------
 p/themes/Mapco/mapco.rtl.css             | 52 ++++++++++-------------
 p/themes/Origine/origine.css             | 20 ++-------
 p/themes/Origine/origine.rtl.css         | 20 ++-------
 p/themes/Pafat/pafat.css                 | 15 -------
 p/themes/Pafat/pafat.rtl.css             | 15 -------
 p/themes/Screwdriver/screwdriver.css     |  4 --
 p/themes/Screwdriver/screwdriver.rtl.css |  4 --
 p/themes/Swage/swage.css                 | 28 +++++++++++++
 p/themes/Swage/swage.rtl.css             | 28 +++++++++++++
 p/themes/Swage/swage.scss                | 32 ++++++++++++++
 p/themes/base-theme/frss.css             | 29 +++++++++++--
 p/themes/base-theme/frss.rtl.css         | 29 +++++++++++--
 51 files changed, 350 insertions(+), 358 deletions(-)

(limited to 'app/layout')

diff --git a/app/i18n/cz/gen.php b/app/i18n/cz/gen.php
index 3c9b0ec16..cf7973a3c 100644
--- a/app/i18n/cz/gen.php
+++ b/app/i18n/cz/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'Uživatelské dotazy',
 		'reading' => 'Čtení',
 		'search' => 'Hledat slova nebo #štítky',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Sdílení',
 		'shortcuts' => 'Zkratky',
 		'stats' => 'Statistika',
diff --git a/app/i18n/de/gen.php b/app/i18n/de/gen.php
index e3cf385fd..e4dac4282 100644
--- a/app/i18n/de/gen.php
+++ b/app/i18n/de/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'Benutzerabfragen',
 		'reading' => 'Lesen',
 		'search' => 'Suche Worte oder #Tags',
+		'search_help' => 'Siehe Dokumentation zu den <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">Suchparametern</a>',
 		'sharing' => 'Teilen',
 		'shortcuts' => 'Tastaturkürzel',
 		'stats' => 'Statistiken',
diff --git a/app/i18n/el/gen.php b/app/i18n/el/gen.php
index aa1051564..d6816a5d8 100644
--- a/app/i18n/el/gen.php
+++ b/app/i18n/el/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'User queries',	// TODO
 		'reading' => 'Reading',	// TODO
 		'search' => 'Search words or #tags',	// TODO
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Sharing',	// TODO
 		'shortcuts' => 'Shortcuts',	// TODO
 		'stats' => 'Statistics',	// TODO
diff --git a/app/i18n/en-us/gen.php b/app/i18n/en-us/gen.php
index 5eb409fdc..52baba32b 100644
--- a/app/i18n/en-us/gen.php
+++ b/app/i18n/en-us/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'User queries',	// IGNORE
 		'reading' => 'Reading',	// IGNORE
 		'search' => 'Search words or #tags',	// IGNORE
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// IGNORE
 		'sharing' => 'Sharing',	// IGNORE
 		'shortcuts' => 'Shortcuts',	// IGNORE
 		'stats' => 'Statistics',	// IGNORE
diff --git a/app/i18n/en/gen.php b/app/i18n/en/gen.php
index 2ce5871e3..a30690a25 100644
--- a/app/i18n/en/gen.php
+++ b/app/i18n/en/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'User queries',
 		'reading' => 'Reading',
 		'search' => 'Search words or #tags',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Sharing',
 		'shortcuts' => 'Shortcuts',
 		'stats' => 'Statistics',
diff --git a/app/i18n/es/gen.php b/app/i18n/es/gen.php
index 54877d3df..a636d407a 100755
--- a/app/i18n/es/gen.php
+++ b/app/i18n/es/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'Peticiones de usuario',
 		'reading' => 'Lectura',
 		'search' => 'Buscar palabras o #etiquetas',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Compartir',
 		'shortcuts' => 'Atajos',
 		'stats' => 'Estadísticas',
diff --git a/app/i18n/fr/gen.php b/app/i18n/fr/gen.php
index fec2b7d4a..4baa93d18 100644
--- a/app/i18n/fr/gen.php
+++ b/app/i18n/fr/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'Filtres utilisateurs',
 		'reading' => 'Lecture',
 		'search' => 'Rechercher des mots ou des #tags',
+		'search_help' => 'Voir <a href="https://freshrss.github.io/FreshRSS/fr/users/03_Main_view.html#gr%C3%A2ce-au-champ-de-recherche" target="_blank">la documentation pour la syntaxe des recherches avancées</a>',
 		'sharing' => 'Partage',
 		'shortcuts' => 'Raccourcis',
 		'stats' => 'Statistiques',
diff --git a/app/i18n/he/gen.php b/app/i18n/he/gen.php
index 20b93eb7e..317482a09 100644
--- a/app/i18n/he/gen.php
+++ b/app/i18n/he/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'שאילתות',
 		'reading' => 'קריאה',
 		'search' => 'חיפוש מילים או #תגים',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'שיתוף',
 		'shortcuts' => 'קיצורי דרך',
 		'stats' => 'סטטיסטיקות',
diff --git a/app/i18n/id/gen.php b/app/i18n/id/gen.php
index 3e791c607..a2baff42f 100644
--- a/app/i18n/id/gen.php
+++ b/app/i18n/id/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'User queries',	// TODO
 		'reading' => 'Reading',	// TODO
 		'search' => 'Search words or #tags',	// TODO
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Sharing',	// TODO
 		'shortcuts' => 'Shortcuts',	// TODO
 		'stats' => 'Statistics',	// TODO
diff --git a/app/i18n/it/gen.php b/app/i18n/it/gen.php
index 09844d072..465b758c0 100644
--- a/app/i18n/it/gen.php
+++ b/app/i18n/it/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'Ricerche personali',
 		'reading' => 'Lettura',
 		'search' => 'Ricerca parole o #tags',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Condivisione',
 		'shortcuts' => 'Comandi tastiera',
 		'stats' => 'Statistiche',
diff --git a/app/i18n/ja/gen.php b/app/i18n/ja/gen.php
index 85d130e37..7ad2f2eb8 100644
--- a/app/i18n/ja/gen.php
+++ b/app/i18n/ja/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'ユーザークエリ',
 		'reading' => 'リーディング',
 		'search' => '単語で検索するかハッシュタグで検索する',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => '共有',
 		'shortcuts' => 'ショートカット',
 		'stats' => '統計',
diff --git a/app/i18n/ko/gen.php b/app/i18n/ko/gen.php
index ba15726a3..63e3ba478 100644
--- a/app/i18n/ko/gen.php
+++ b/app/i18n/ko/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => '사용자 쿼리',
 		'reading' => '읽기',
 		'search' => '단어 또는 #태그 검색',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => '공유',
 		'shortcuts' => '단축키',
 		'stats' => '통계',
diff --git a/app/i18n/nl/gen.php b/app/i18n/nl/gen.php
index e06e05db7..0c5122643 100644
--- a/app/i18n/nl/gen.php
+++ b/app/i18n/nl/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'Gebruikers informatie',
 		'reading' => 'Lezen',
 		'search' => 'Zoek woorden of #labels',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Delen',
 		'shortcuts' => 'Snelle toegang',
 		'stats' => 'Statistieken',
diff --git a/app/i18n/oc/gen.php b/app/i18n/oc/gen.php
index a55b2c147..281696a89 100644
--- a/app/i18n/oc/gen.php
+++ b/app/i18n/oc/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'Filtres utilizaire',
 		'reading' => 'Lectura',
 		'search' => 'Recercar de mots o d’#etiquetas',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Partatge',
 		'shortcuts' => 'Acorchis',
 		'stats' => 'Estatisticas',
diff --git a/app/i18n/pl/gen.php b/app/i18n/pl/gen.php
index 56bd3c082..28863ff59 100644
--- a/app/i18n/pl/gen.php
+++ b/app/i18n/pl/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'Zapisane zapytania',
 		'reading' => 'Czytanie',
 		'search' => 'Wyszukaj wyrazy lub #tagi',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Podawanie dalej',
 		'shortcuts' => 'Skróty klawiszowe',
 		'stats' => 'Statystyki',
diff --git a/app/i18n/pt-br/gen.php b/app/i18n/pt-br/gen.php
index acf954b77..0a8c56d6a 100644
--- a/app/i18n/pt-br/gen.php
+++ b/app/i18n/pt-br/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'Queries de usuário',
 		'reading' => 'Leitura',
 		'search' => 'Procurar por palavras ou #tags',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Compartilhamento',
 		'shortcuts' => 'Atalhos',
 		'stats' => 'Estatísticas',
diff --git a/app/i18n/ru/gen.php b/app/i18n/ru/gen.php
index 9ba61ae59..3fd4b9190 100644
--- a/app/i18n/ru/gen.php
+++ b/app/i18n/ru/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'Пользовательские запросы',
 		'reading' => 'Чтение',
 		'search' => 'Искать слова или #теги',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Обмен',
 		'shortcuts' => 'Горячие клавиши',
 		'stats' => 'Статистика',
diff --git a/app/i18n/sk/gen.php b/app/i18n/sk/gen.php
index aa8f1767b..4fa7a74eb 100644
--- a/app/i18n/sk/gen.php
+++ b/app/i18n/sk/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'Používateľské dopyty',
 		'reading' => 'Čítanie',
 		'search' => 'Hľadajte slová alebo #značky',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Zdieľanie',
 		'shortcuts' => 'Skratky',
 		'stats' => 'Štatistiky',
diff --git a/app/i18n/tr/gen.php b/app/i18n/tr/gen.php
index c65815e8e..bf1f18848 100644
--- a/app/i18n/tr/gen.php
+++ b/app/i18n/tr/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => 'Kullanıcı sorguları',
 		'reading' => 'Okuma',
 		'search' => 'Kelime veya #etiket ara',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => 'Paylaşım',
 		'shortcuts' => 'Kısayollar',
 		'stats' => 'İstatistikler',
diff --git a/app/i18n/zh-cn/gen.php b/app/i18n/zh-cn/gen.php
index 0b6f1cba6..0732ae707 100644
--- a/app/i18n/zh-cn/gen.php
+++ b/app/i18n/zh-cn/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => '自定义查询',
 		'reading' => '阅读',
 		'search' => '搜索内容或#标签',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => '分享',
 		'shortcuts' => '快捷键',
 		'stats' => '统计',
diff --git a/app/i18n/zh-tw/gen.php b/app/i18n/zh-tw/gen.php
index 31ef0f692..cf09fa3df 100644
--- a/app/i18n/zh-tw/gen.php
+++ b/app/i18n/zh-tw/gen.php
@@ -174,6 +174,7 @@ return array(
 		'queries' => '自定義查詢',
 		'reading' => '閱讀',
 		'search' => '搜尋內容或#標簽',
+		'search_help' => 'See documentation for advanced <a href="https://freshrss.github.io/FreshRSS/en/users/10_filter.html#with-the-search-field" target="_blank">search parameters</a>',	// TODO
 		'sharing' => '分享',
 		'shortcuts' => '快捷鍵',
 		'stats' => '統計',
diff --git a/app/layout/nav_menu.phtml b/app/layout/nav_menu.phtml
index f719538fd..848144568 100644
--- a/app/layout/nav_menu.phtml
+++ b/app/layout/nav_menu.phtml
@@ -29,10 +29,53 @@
 			href="<?= Minz_Url::display($url_state) ?>"><?= _i($state_str) ?></a>
 		<?php } ?>
 
+		<div class="dropdown only-mobile" id="dropdown-search-wrapper">
+			<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
+			<div id="dropdown-search" class="dropdown-target"></div>
+
+			<a id="toggle-search" class="dropdown-toggle btn<?= (strlen(FreshRSS_Context::$search) > 0) ? ' active' : ''; ?>" title="<?= _t('gen.menu.search') ?>"
+				href="#dropdown-search"><?= _i('search') ?></a>
+			<ul class="dropdown-menu">
+				<li class="item">
+					<span>
+						<form action="<?= _url('index', 'index') ?>" method="get">
+							<?php $param_a = Minz_Request::actionName(); ?>
+							<?php if (in_array($param_a, ['normal', 'global', 'reader'])) { ?>
+							<input type="hidden" name="a" value="<?= $param_a ?>" />
+							<?php } ?>
+
+							<?php $get = Minz_Request::param('get', ''); ?>
+							<?php if ($get != '') { ?>
+							<input type="hidden" name="get" value="<?= $get ?>" />
+							<?php } ?>
+
+							<?php $order = Minz_Request::param('order', ''); ?>
+							<?php if ($order != '') { ?>
+							<input type="hidden" name="order" value="<?= $order ?>" />
+							<?php } ?>
+
+							<?php $state = Minz_Request::param('state', ''); ?>
+							<?php if ($state != '') { ?>
+							<input type="hidden" name="state" value="<?= $state ?>" />
+							<?php } ?>	
+
+							<div class="stick search">
+								<input type="search" name="search" 
+									value="<?= htmlspecialchars(htmlspecialchars_decode(FreshRSS_Context::$search, ENT_QUOTES), ENT_COMPAT, 'UTF-8'); ?>"
+									placeholder="<?= _t('gen.menu.search') ?>" title="<?= _t('gen.menu.search') ?>" /><button class="btn" type="submit" title="<?= _t('index.menu.search_short') ?>"><?= _i('search') ?></button>
+							</div>
+							<p class="help"><?= _i('help') ?> <?= _t('gen.menu.search_help') ?></a></p>
+						</form>
+					</span>
+				</li>
+			</ul>
+			<a class="dropdown-close" href="#close">❌</a>
+		</div>
+
 		<div class="dropdown">
 			<div id="dropdown-query" class="dropdown-target"></div>
 
-			<a class="dropdown-toggle btn" href="#dropdown-query" title="<?= _t('index.menu.queries') ?>"><?= _i('bookmark-tag') ?></a>
+			<a id="toggle-userqueries" class="dropdown-toggle btn" href="#dropdown-query" title="<?= _t('index.menu.queries') ?>"><?= _i('bookmark-tag') ?></a>
 			<ul class="dropdown-menu">
 				<li class="dropdown-header">
 					<?= _t('index.menu.queries') ?>
@@ -185,33 +228,6 @@
 	</div>
 	<?php } ?>
 
-	<div class="item search">
-		<form action="<?= _url('index', 'index') ?>" method="get">
-			<input type="search" name="search" class="extend" value="<?php
-				echo htmlspecialchars(htmlspecialchars_decode(FreshRSS_Context::$search, ENT_QUOTES), ENT_COMPAT, 'UTF-8'); ?>" placeholder="<?= _t('index.menu.search_short') ?>" />
-
-			<?php $param_a = Minz_Request::actionName(); ?>
-			<?php if (in_array($param_a, ['normal', 'global', 'reader'])) { ?>
-			<input type="hidden" name="a" value="<?= $param_a ?>" />
-			<?php } ?>
-			
-			<?php $get = Minz_Request::param('get', ''); ?>
-			<?php if($get != '') { ?>
-			<input type="hidden" name="get" value="<?= $get ?>" />
-			<?php } ?>
-
-			<?php $order = Minz_Request::param('order', ''); ?>
-			<?php if($order != '') { ?>
-			<input type="hidden" name="order" value="<?= $order ?>" />
-			<?php } ?>
-
-			<?php $state = Minz_Request::param('state', ''); ?>
-			<?php if($state != '') { ?>
-			<input type="hidden" name="state" value="<?= $state ?>" />
-			<?php } ?>
-		</form>
-	</div>
-
 	<?php
 		if (FreshRSS_Context::$order === 'DESC') {
 			$order = 'ASC';
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 25df31194..0f600fa2e 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -1105,21 +1105,6 @@ kbd {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		padding: 3px 5px;
-		max-width: 97%;
-		width: 90px;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: var(--background-color-active);
 		border-top: 2px solid var(--background-color-light);
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 6fb1bf25a..a42fa2a71 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -1105,21 +1105,6 @@ kbd {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		padding: 3px 5px;
-		max-width: 97%;
-		width: 90px;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: var(--background-color-active);
 		border-top: 2px solid var(--background-color-light);
diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index 36b660345..88ab37296 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -22,6 +22,12 @@
 }
 
 /*=== Dropdown */
+.dropdown {
+	.dropdown-target:target + .btn {
+		background-color: variables.$grey-medium-light;
+	}
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -51,7 +57,9 @@
 
 		@include mixins.transition(all, 0.075s, ease-in-out);
 
-		a, .as-link {
+		> a,
+		> span,
+		> .as-link {
 			padding: 0 2rem;
 			color: variables.$main-font-color;
 			font-size: inherit;
@@ -60,7 +68,10 @@
 			span.icon {
 				padding: 0 0.25rem !important;
 			}
+		}
 
+		> a,
+		> .as-link {
 			&:not(.addItem):hover {
 				background: variables.$main-first;
 				color: variables.$white;
@@ -86,7 +97,7 @@
 		}
 
 		&:not(.addItem) {
-			a:hover,
+			> a:hover,
 			button:hover {
 				background: variables.$main-first;
 				color: variables.$white;
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index cb5271dcd..78431f462 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -207,7 +207,7 @@ main.prompt {
 			}
 		}
 
-		.dropdown {
+		.dropdown:not(#dropdown-search-wrapper) {
 			a.dropdown-toggle {
 				border-left-width: 0;
 				background-image: url(icons/more.svg);
@@ -217,6 +217,12 @@ main.prompt {
 				}
 			}
 		}
+
+		#dropdown-search-wrapper.dropdown {
+			a.dropdown-toggle {
+				border-left-width: 0;
+			}
+		}
 	}
 }
 
diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss
index bb13a0e83..6fbca4a52 100644
--- a/p/themes/Ansum/_mobile.scss
+++ b/p/themes/Ansum/_mobile.scss
@@ -35,35 +35,9 @@
 	}
 
 	.header {
-		display: block;
-		height: 8rem;
-
 		.item {
 			&.search {
-				display: block;
-
-				form {
-					display: inherit;
-				}
-
-				.stick {
-					display: flex;
-				}
-
-				input {
-					width: 90%;
-					height: 3.5rem;
-
-					&:focus {
-						width: 100%;
-
-					}
-				}
-
-				.btn {
-					min-height: 49px;
-					padding: 0.5rem 2rem;
-				}
+				display: none;
 			}
 
 			&.configure {
@@ -103,11 +77,7 @@
 		}
 
 		.search {
-			display: none;
-			max-width: 97%;
-
 			.input {
-
 				max-width: 97%;
 				width: 90px;
 
diff --git a/p/themes/Ansum/_sidebar.scss b/p/themes/Ansum/_sidebar.scss
index e92dd2ec4..7c21d159d 100644
--- a/p/themes/Ansum/_sidebar.scss
+++ b/p/themes/Ansum/_sidebar.scss
@@ -93,7 +93,7 @@
 		border-radius: 5px 0 0 5px;
 	}
 
-	.btn:last-child, input:last-child, .btn + .dropdown > .btn {
+	.btn:last-child, input:last-child, .dropdown:last-child > .btn {
 		border-radius: 0 5px 5px 0;
 	}
 
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 03aa67e67..709861e18 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -221,6 +221,10 @@ form th {
 }
 
 /*=== Dropdown */
+.dropdown .dropdown-target:target + .btn {
+	background-color: #e4d8cc;
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -247,20 +251,26 @@ form th {
 .dropdown-menu .item {
 	transition: all 0.075s ease-in-out;
 }
-.dropdown-menu .item a, .dropdown-menu .item .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 2rem;
 	color: #363330;
 	font-size: inherit;
 	line-height: 2.5em;
 }
-.dropdown-menu .item a span.icon, .dropdown-menu .item .as-link span.icon {
+.dropdown-menu .item > a span.icon,
+.dropdown-menu .item > span span.icon,
+.dropdown-menu .item > .as-link span.icon {
 	padding: 0 0.25rem !important;
 }
-.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
+.dropdown-menu .item > a:not(.addItem):hover,
+.dropdown-menu .item > .as-link:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
+.dropdown-menu .item > a:not(.addItem):hover .icon,
+.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 .dropdown-menu .item.dropdown-section {
@@ -272,12 +282,12 @@ form th {
 .dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
 	padding-left: 2rem;
 }
-.dropdown-menu .item:not(.addItem) a:hover,
+.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) > a:hover .icon,
 .dropdown-menu .item:not(.addItem) button:hover .icon {
 	filter: brightness(3);
 }
@@ -518,7 +528,7 @@ form th {
 .stick .btn:first-child {
 	border-radius: 5px 0 0 5px;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
 	border-radius: 0 5px 5px 0;
 }
 .stick .btn + .btn,
@@ -819,13 +829,16 @@ main.prompt {
 .nav_menu .stick .btn.read_all:hover {
 	background-color: #e4d8cc;
 }
-.nav_menu .stick .dropdown a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-left-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+	border-left-width: 0;
+}
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
@@ -1196,29 +1209,8 @@ main.prompt {
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
-	.header {
-		display: block;
-		height: 8rem;
-	}
 	.header .item.search {
-		display: block;
-	}
-	.header .item.search form {
-		display: inherit;
-	}
-	.header .item.search .stick {
-		display: flex;
-	}
-	.header .item.search input {
-		width: 90%;
-		height: 3.5rem;
-	}
-	.header .item.search input:focus {
-		width: 100%;
-	}
-	.header .item.search .btn {
-		min-height: 49px;
-		padding: 0.5rem 2rem;
+		display: none;
 	}
 	.header .item.configure {
 		position: absolute;
@@ -1246,10 +1238,6 @@ main.prompt {
 	.nav_menu .stick .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .search {
-		display: none;
-		max-width: 97%;
-	}
 	.nav_menu .search .input {
 		max-width: 97%;
 		width: 90px;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index b106da359..ad480c952 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -221,6 +221,10 @@ form th {
 }
 
 /*=== Dropdown */
+.dropdown .dropdown-target:target + .btn {
+	background-color: #e4d8cc;
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -247,20 +251,26 @@ form th {
 .dropdown-menu .item {
 	transition: all 0.075s ease-in-out;
 }
-.dropdown-menu .item a, .dropdown-menu .item .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 2rem;
 	color: #363330;
 	font-size: inherit;
 	line-height: 2.5em;
 }
-.dropdown-menu .item a span.icon, .dropdown-menu .item .as-link span.icon {
+.dropdown-menu .item > a span.icon,
+.dropdown-menu .item > span span.icon,
+.dropdown-menu .item > .as-link span.icon {
 	padding: 0 0.25rem !important;
 }
-.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
+.dropdown-menu .item > a:not(.addItem):hover,
+.dropdown-menu .item > .as-link:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
+.dropdown-menu .item > a:not(.addItem):hover .icon,
+.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 .dropdown-menu .item.dropdown-section {
@@ -272,12 +282,12 @@ form th {
 .dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
 	padding-right: 2rem;
 }
-.dropdown-menu .item:not(.addItem) a:hover,
+.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) > a:hover .icon,
 .dropdown-menu .item:not(.addItem) button:hover .icon {
 	filter: brightness(3);
 }
@@ -518,7 +528,7 @@ form th {
 .stick .btn:first-child {
 	border-radius: 0 5px 5px 0;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
 	border-radius: 5px 0 0 5px;
 }
 .stick .btn + .btn,
@@ -819,13 +829,16 @@ main.prompt {
 .nav_menu .stick .btn.read_all:hover {
 	background-color: #e4d8cc;
 }
-.nav_menu .stick .dropdown a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-right-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+	border-right-width: 0;
+}
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
@@ -1196,29 +1209,8 @@ main.prompt {
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
-	.header {
-		display: block;
-		height: 8rem;
-	}
 	.header .item.search {
-		display: block;
-	}
-	.header .item.search form {
-		display: inherit;
-	}
-	.header .item.search .stick {
-		display: flex;
-	}
-	.header .item.search input {
-		width: 90%;
-		height: 3.5rem;
-	}
-	.header .item.search input:focus {
-		width: 100%;
-	}
-	.header .item.search .btn {
-		min-height: 49px;
-		padding: 0.5rem 2rem;
+		display: none;
 	}
 	.header .item.configure {
 		position: absolute;
@@ -1246,10 +1238,6 @@ main.prompt {
 	.nav_menu .stick .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .search {
-		display: none;
-		max-width: 97%;
-	}
 	.nav_menu .search .input {
 		max-width: 97%;
 		width: 90px;
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 859397eb1..fa194bb9e 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -995,20 +995,6 @@ a.btn {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		max-width: 97%;
-		width: 90px;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: #1a1a1a;
 		border-top: 1px solid #888;
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index a75552d51..2610e49d5 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -995,20 +995,6 @@ a.btn {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		max-width: 97%;
-		width: 90px;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: #1a1a1a;
 		border-top: 1px solid #888;
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index aefe3d454..8fd09bb35 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -147,7 +147,7 @@ form th {
 
 .stick .btn:last-child,
 .stick input:last-child,
-.stick .btn + .dropdown > .btn {
+.stick .dropdown:last-child > .btn {
 	border-radius: 0 5px 5px 0;
 }
 
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 43ada0a4c..43327ddeb 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -147,7 +147,7 @@ form th {
 
 .stick .btn:last-child,
 .stick input:last-child,
-.stick .btn + .dropdown > .btn {
+.stick .dropdown:last-child > .btn {
 	border-radius: 5px 0 0 5px;
 }
 
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index 8b60dcf0f..5f7e04e56 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -22,6 +22,12 @@
 }
 
 /*=== Dropdown */
+.dropdown {
+	.dropdown-target:target + .btn {
+		background-color: variables.$grey-medium-light;
+	}
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -51,7 +57,9 @@
 
 		@include mixins.transition(all, 0.075s, ease-in-out);
 
-		a, .as-link {
+		> a,
+		> span,
+		> .as-link {
 			padding: 0 2rem;
 			color: variables.$main-font-color;
 			font-size: inherit;
@@ -60,7 +68,10 @@
 			span.icon {
 				padding: 0 0.25rem !important;
 			}
+		}
 
+		> a,
+		> .as-link {
 			&:not(.addItem):hover {
 				background: variables.$main-first;
 				color: variables.$white;
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index 7be890369..b57a48fd0 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -226,7 +226,7 @@ main.prompt {
 			}
 		}
 
-		.dropdown {
+		.dropdown:not(#dropdown-search-wrapper) {
 			a.dropdown-toggle {
 				border-left-width: 0;
 				background-image: url(icons/more.svg);
@@ -236,6 +236,12 @@ main.prompt {
 				}
 			}
 		}
+
+		#dropdown-search-wrapper.dropdown {
+			a.dropdown-toggle {
+				border-left-width: 0;
+			}
+		}
 	}
 }
 
diff --git a/p/themes/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.scss
index 6960873bf..3faea3d7e 100644
--- a/p/themes/Mapco/_mobile.scss
+++ b/p/themes/Mapco/_mobile.scss
@@ -35,30 +35,9 @@
 	}
 
 	.header {
-		display: block;
-		height: 8rem;
-
 		.item {
 			&.search {
-				display: block;
-
-				form {
-					display: inherit;
-				}
-
-				.stick {
-					display: flex;
-				}
-
-				input {
-					width: 90%;
-					height: 3.5rem;
-
-					&:focus {
-						width: 100%;
-
-					}
-				}
+				display: none;
 			}
 
 			&.configure {
@@ -105,11 +84,7 @@
 		}
 
 		.search {
-			display: none;
-			max-width: 97%;
-
 			.input {
-
 				max-width: 97%;
 				width: 90px;
 
diff --git a/p/themes/Mapco/_sidebar.scss b/p/themes/Mapco/_sidebar.scss
index a71960b1d..090a69580 100644
--- a/p/themes/Mapco/_sidebar.scss
+++ b/p/themes/Mapco/_sidebar.scss
@@ -93,7 +93,7 @@
 		border-radius: 5px 0 0 5px;
 	}
 
-	.btn:last-child, input:last-child, .btn + .dropdown > .btn {
+	.btn:last-child, input:last-child, .dropdown:last-child > .btn {
 		border-radius: 0 5px 5px 0;
 	}
 
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index d2978c217..967accc00 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -220,6 +220,10 @@ form th {
 }
 
 /*=== Dropdown */
+.dropdown .dropdown-target:target + .btn {
+	background-color: #d5d8db;
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -246,20 +250,26 @@ form th {
 .dropdown-menu .item {
 	transition: all 0.075s ease-in-out;
 }
-.dropdown-menu .item a, .dropdown-menu .item .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 2rem;
 	color: #303136;
 	font-size: inherit;
 	line-height: 2.5em;
 }
-.dropdown-menu .item a span.icon, .dropdown-menu .item .as-link span.icon {
+.dropdown-menu .item > a span.icon,
+.dropdown-menu .item > span span.icon,
+.dropdown-menu .item > .as-link span.icon {
 	padding: 0 0.25rem !important;
 }
-.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
+.dropdown-menu .item > a:not(.addItem):hover,
+.dropdown-menu .item > .as-link:not(.addItem):hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
+.dropdown-menu .item > a:not(.addItem):hover .icon,
+.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
 	filter: brightness(3);
 }
 .dropdown-menu .item.dropdown-section {
@@ -532,7 +542,7 @@ form th {
 .stick .btn:first-child {
 	border-radius: 5px 0 0 5px;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
 	border-radius: 0 5px 5px 0;
 }
 .stick .btn + .btn,
@@ -843,13 +853,16 @@ main.prompt {
 .nav_menu .stick .btn.read_all:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .dropdown a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-left-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+	border-left-width: 0;
+}
 
 /*=== Content of feed articles */
 .content, .content.thin {
@@ -1213,25 +1226,8 @@ main.prompt {
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
-	.header {
-		display: block;
-		height: 8rem;
-	}
 	.header .item.search {
-		display: block;
-	}
-	.header .item.search form {
-		display: inherit;
-	}
-	.header .item.search .stick {
-		display: flex;
-	}
-	.header .item.search input {
-		width: 90%;
-		height: 3.5rem;
-	}
-	.header .item.search input:focus {
-		width: 100%;
+		display: none;
 	}
 	.header .item.configure {
 		position: absolute;
@@ -1264,10 +1260,6 @@ main.prompt {
 	.nav_menu .stick .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .search {
-		display: none;
-		max-width: 97%;
-	}
 	.nav_menu .search .input {
 		max-width: 97%;
 		width: 90px;
@@ -1338,4 +1330,6 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
\ No newline at end of file
+}
+
+/*# sourceMappingURL=mapco.css.map */
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 7ed00631a..b962e5fe0 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -220,6 +220,10 @@ form th {
 }
 
 /*=== Dropdown */
+.dropdown .dropdown-target:target + .btn {
+	background-color: #d5d8db;
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -246,20 +250,26 @@ form th {
 .dropdown-menu .item {
 	transition: all 0.075s ease-in-out;
 }
-.dropdown-menu .item a, .dropdown-menu .item .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 2rem;
 	color: #303136;
 	font-size: inherit;
 	line-height: 2.5em;
 }
-.dropdown-menu .item a span.icon, .dropdown-menu .item .as-link span.icon {
+.dropdown-menu .item > a span.icon,
+.dropdown-menu .item > span span.icon,
+.dropdown-menu .item > .as-link span.icon {
 	padding: 0 0.25rem !important;
 }
-.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
+.dropdown-menu .item > a:not(.addItem):hover,
+.dropdown-menu .item > .as-link:not(.addItem):hover {
 	background: #36c;
 	color: #fff;
 }
-.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
+.dropdown-menu .item > a:not(.addItem):hover .icon,
+.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
 	filter: brightness(3);
 }
 .dropdown-menu .item.dropdown-section {
@@ -532,7 +542,7 @@ form th {
 .stick .btn:first-child {
 	border-radius: 0 5px 5px 0;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
 	border-radius: 5px 0 0 5px;
 }
 .stick .btn + .btn,
@@ -843,13 +853,16 @@ main.prompt {
 .nav_menu .stick .btn.read_all:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .dropdown a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-right-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+	border-right-width: 0;
+}
 
 /*=== Content of feed articles */
 .content, .content.thin {
@@ -1213,25 +1226,8 @@ main.prompt {
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
-	.header {
-		display: block;
-		height: 8rem;
-	}
 	.header .item.search {
-		display: block;
-	}
-	.header .item.search form {
-		display: inherit;
-	}
-	.header .item.search .stick {
-		display: flex;
-	}
-	.header .item.search input {
-		width: 90%;
-		height: 3.5rem;
-	}
-	.header .item.search input:focus {
-		width: 100%;
+		display: none;
 	}
 	.header .item.configure {
 		position: absolute;
@@ -1264,10 +1260,6 @@ main.prompt {
 	.nav_menu .stick .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .search {
-		display: none;
-		max-width: 97%;
-	}
 	.nav_menu .search .input {
 		max-width: 97%;
 		width: 90px;
@@ -1338,4 +1330,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 319e6a2a4..eba455f52 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -291,6 +291,10 @@ a:hover .icon {
 	filter: brightness(1.1);
 }
 
+#toggle-search.active > .icon {
+	filter: invert(8%) sepia(99%) saturate(7064%) hue-rotate(248deg) brightness(99%) contrast(142%);
+}
+
 .btn.active,
 .btn:active,
 .dropdown-target:target ~ .btn.dropdown-toggle {
@@ -1138,22 +1142,6 @@ a:hover .icon {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		padding: 3px 5px;
-		max-width: 97%;
-		width: 90px;
-		line-height: 2;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: var(--background-color-light);
 		border-top: 1px solid var(--border-color);
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 983b1743e..081f1814f 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -291,6 +291,10 @@ a:hover .icon {
 	filter: brightness(1.1);
 }
 
+#toggle-search.active > .icon {
+	filter: invert(8%) sepia(99%) saturate(7064%) hue-rotate(248deg) brightness(99%) contrast(142%);
+}
+
 .btn.active,
 .btn:active,
 .dropdown-target:target ~ .btn.dropdown-toggle {
@@ -1138,22 +1142,6 @@ a:hover .icon {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		padding: 3px 5px;
-		max-width: 97%;
-		width: 90px;
-		line-height: 2;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		background-color: var(--background-color-light);
 		border-top: 1px solid var(--border-color);
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index f5d418f15..4ff9d2812 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -1093,21 +1093,6 @@ a.signin {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		max-width: 97%;
-		width: 90px;
-		line-height: 2;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		border-top: 1px solid var(--border-color-grey-dark);
 		border-left: 1px solid var(--border-color-grey-dark);
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index cc8d72da4..8a71232bb 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -1093,21 +1093,6 @@ a.signin {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: inline-block;
-		max-width: 97%;
-	}
-
-	.nav_menu .search input {
-		max-width: 97%;
-		width: 90px;
-		line-height: 2;
-	}
-
-	.nav_menu .search input:focus {
-		width: 400px;
-	}
-
 	.dropdown-target:target ~ .dropdown-toggle::after {
 		border-top: 1px solid var(--border-color-grey-dark);
 		border-right: 1px solid var(--border-color-grey-dark);
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index e66861563..859e34f35 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -1117,10 +1117,6 @@ a.btn {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: none;
-	}
-
 	.nav_menu .search input {
 		padding: 3px 5px;
 		max-width: 97%;
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index a823dc93d..216c84262 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -1117,10 +1117,6 @@ a.btn {
 		margin: 5px 0;
 	}
 
-	.nav_menu .search {
-		display: none;
-	}
-
 	.nav_menu .search input {
 		padding: 3px 5px;
 		max-width: 97%;
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 02fd9471f..6478c0581 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -342,12 +342,32 @@ form th {
 	font-weight: bold;
 	margin: 0 0 0 -14px;
 }
+.dropdown-menu .help a {
+	color: var(--color-text-light);
+	text-decoration: underline;
+	text-decoration-style: dotted;
+}
+.dropdown-menu .help a:hover {
+	text-decoration-style: solid;
+}
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 }
 
+#dropdown-search-wrapper .dropdown-menu {
+	padding-top: 1rem;
+	padding-bottom: 0.25rem;
+}
+#dropdown-search-wrapper .dropdown-menu .stick.search {
+	width: 100%;
+}
+#dropdown-search-wrapper .dropdown-menu .stick.search input[type=search] {
+	width: 100%;
+	border: 0;
+}
+
 .labels .dropdown-menu,
 .tags .dropdown-menu,
 .share .dropdown-menu {
@@ -912,6 +932,9 @@ a.signin {
 	.dropdown {
 		position: relative;
 	}
+	.dropdown .dropdown-menu {
+		width: auto;
+	}
 	#new-article {
 		margin-top: 2rem;
 		width: 100%;
@@ -1151,10 +1174,15 @@ button.as-link {
 	left: 0;
 	right: auto;
 }
+
 #nav_menu_actions ul.dropdown-menu::after {
 	display: none;
 }
 
+#nav_menu_actions .dropdown.only-mobile {
+	display: initial !important;
+}
+
 #nav_menu_read_all ul.dropdown-menu {
 	right: 0;
 	left: auto;
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 9cee872c9..a4ba4f159 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -342,12 +342,32 @@ form th {
 	font-weight: bold;
 	margin: 0 -14px 0 0;
 }
+.dropdown-menu .help a {
+	color: var(--color-text-light);
+	text-decoration: underline;
+	text-decoration-style: dotted;
+}
+.dropdown-menu .help a:hover {
+	text-decoration-style: solid;
+}
 .dropdown-menu .input select,
 .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 }
 
+#dropdown-search-wrapper .dropdown-menu {
+	padding-top: 1rem;
+	padding-bottom: 0.25rem;
+}
+#dropdown-search-wrapper .dropdown-menu .stick.search {
+	width: 100%;
+}
+#dropdown-search-wrapper .dropdown-menu .stick.search input[type=search] {
+	width: 100%;
+	border: 0;
+}
+
 .labels .dropdown-menu,
 .tags .dropdown-menu,
 .share .dropdown-menu {
@@ -912,6 +932,9 @@ a.signin {
 	.dropdown {
 		position: relative;
 	}
+	.dropdown .dropdown-menu {
+		width: auto;
+	}
 	#new-article {
 		margin-top: 2rem;
 		width: 100%;
@@ -1151,10 +1174,15 @@ button.as-link {
 	right: 0;
 	left: auto;
 }
+
 #nav_menu_actions ul.dropdown-menu::after {
 	display: none;
 }
 
+#nav_menu_actions .dropdown.only-mobile {
+	display: initial !important;
+}
+
 #nav_menu_read_all ul.dropdown-menu {
 	left: 0;
 	right: auto;
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index c3092b2e1..cc7aed10e 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -455,6 +455,16 @@ form {
 		}
 	}
 
+	.help a {
+		color: var(--color-text-light);
+		text-decoration: underline;
+		text-decoration-style: dotted;
+
+		&:hover {
+			text-decoration-style: solid;
+		}
+	}
+
 	.input {
 		select,
 		input {
@@ -464,6 +474,20 @@ form {
 	}
 }
 
+#dropdown-search-wrapper .dropdown-menu {
+	padding-top: 1rem;
+	padding-bottom: 0.25rem;
+
+	.stick.search {
+		width: 100%;
+
+		input[type="search"] {
+			width: 100%;
+			border: 0;
+		}
+	}
+}
+
 .labels,
 .tags,
 .share {
@@ -1171,6 +1195,10 @@ a.signin {
 
 	.dropdown {
 		position: relative;
+
+		.dropdown-menu {
+			width: auto;
+		}
 	}
 
 	#new-article {
@@ -1476,6 +1504,10 @@ button.as-link {
 			display: none;
 		}
 	}
+
+	.dropdown.only-mobile {
+		display: initial !important;
+	}
 }
 
 #nav_menu_read_all {
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index a546de43a..d142308bc 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -115,6 +115,10 @@ h3 {
 	display: none;
 }
 
+.only-mobile {
+	display: none !important;
+}
+
 /*=== Paragraphs */
 p {
 	margin: 1rem 0 0.5rem;
@@ -443,7 +447,7 @@ td.numeric {
 	flex-shrink: 0;
 }
 
-.stick form {
+#nav_menu_read_all form {
 	display: inline-flex;
 }
 
@@ -1933,7 +1937,6 @@ input:checked + .slide-container .properties {
 }
 
 .nav-login,
-.nav_menu .search,
 .aside .toggle_aside,
 #slider .toggle_aside,
 .nav_menu .toggle_aside,
@@ -2008,6 +2011,10 @@ input:checked + .slide-container .properties {
 		display: none;
 	}
 
+	.only-mobile {
+		display: unset !important;
+	}
+
 	.header > .item {
 		padding: 5px;
 	}
@@ -2076,6 +2083,23 @@ input:checked + .slide-container .properties {
 		margin: 2px 0;
 	}
 
+	.dropdown .dropdown-menu .item .stick .btn {
+		margin: 0;
+	}
+
+	.dropdown .dropdown-menu .item form {
+		display: block;
+		text-align: center;
+	}
+
+	.dropdown .dropdown-menu .item .stick.search {
+		width: calc(100% - 20px);
+	}
+
+	.dropdown .dropdown-menu .item .stick.search input {
+		width: 95%;
+	}
+
 	.dropdown .dropdown-menu .item button.as-link,
 	.dropdown .dropdown-menu .item button.as-link:hover, button.as-link:active {
 		width: 100%;
@@ -2138,7 +2162,6 @@ input:checked + .slide-container .properties {
 	}
 
 	.nav_menu .toggle_aside,
-	.nav_menu .search,
 	#panel .close img {
 		display: inline-block;
 	}
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 610144fcb..6353f1a39 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -115,6 +115,10 @@ h3 {
 	display: none;
 }
 
+.only-mobile {
+	display: none !important;
+}
+
 /*=== Paragraphs */
 p {
 	margin: 1rem 0 0.5rem;
@@ -443,7 +447,7 @@ td.numeric {
 	flex-shrink: 0;
 }
 
-.stick form {
+#nav_menu_read_all form {
 	display: inline-flex;
 }
 
@@ -1933,7 +1937,6 @@ input:checked + .slide-container .properties {
 }
 
 .nav-login,
-.nav_menu .search,
 .aside .toggle_aside,
 #slider .toggle_aside,
 .nav_menu .toggle_aside,
@@ -2008,6 +2011,10 @@ input:checked + .slide-container .properties {
 		display: none;
 	}
 
+	.only-mobile {
+		display: unset !important;
+	}
+
 	.header > .item {
 		padding: 5px;
 	}
@@ -2076,6 +2083,23 @@ input:checked + .slide-container .properties {
 		margin: 2px 0;
 	}
 
+	.dropdown .dropdown-menu .item .stick .btn {
+		margin: 0;
+	}
+
+	.dropdown .dropdown-menu .item form {
+		display: block;
+		text-align: center;
+	}
+
+	.dropdown .dropdown-menu .item .stick.search {
+		width: calc(100% - 20px);
+	}
+
+	.dropdown .dropdown-menu .item .stick.search input {
+		width: 95%;
+	}
+
 	.dropdown .dropdown-menu .item button.as-link,
 	.dropdown .dropdown-menu .item button.as-link:hover, button.as-link:active {
 		width: 100%;
@@ -2138,7 +2162,6 @@ input:checked + .slide-container .properties {
 	}
 
 	.nav_menu .toggle_aside,
-	.nav_menu .search,
 	#panel .close img {
 		display: inline-block;
 	}
-- 
cgit v1.2.3