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

@@ -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',

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',

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

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

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',

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',

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',

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' => 'סטטיסטיקות',

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

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',

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' => '統計',

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' => '통계',

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',

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',

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',

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',

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' => 'Статистика',

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',

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',

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' => '统计',

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' => '統計',

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

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

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

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;

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

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;
 

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

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;

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;

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;

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;

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

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

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;

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

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;
 

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

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;
-}
+}
+
+/*# sourceMappingURL=mapco.css.map */

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

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

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

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

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

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

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

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;

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;

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 {

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

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