Improved: Subscription management page (#6816)

* i18n: Add an RSS feed -> Add a feed

* manage mouse title for category

* no white space between manage icon and favicon and title

* add feed link: use icon instead of plus character

* better CSS class for empty category and its alert text box

* show muted icon and warning icon

* the CSS magic incl. the themes improvements

* fix

* mute icon is more important than warning

* feed mouse hover title

* fix feed navigation sidebar: show error

* fix btn with icon and text

* fix aside feed: muted icon over warning icon

46 files changed, 129 insertions, 147 deletions

diff --git a/app/i18n/cs/sub.php b/app/i18n/cs/sub.php
index a9f7d198a..cb9bd02c6 100644
--- a/app/i18n/cs/sub.php
+++ b/app/i18n/cs/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Přijímat soubory cookie',
 		'accept_cookies_help' => 'Povolit serveru feedu nastavit soubory cookie (uložené v paměti pouze po dobu trvání požadavku).',
-		'add' => 'Přidat kanál RSS',
+		'add' => 'Přidat kanál',
 		'advanced' => 'Rozšířené',
 		'archiving' => 'Archivace',
 		'auth' => array(
diff --git a/app/i18n/de/sub.php b/app/i18n/de/sub.php
index 958107e8a..f2b8012df 100644
--- a/app/i18n/de/sub.php
+++ b/app/i18n/de/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Cookies zulassen',
 		'accept_cookies_help' => 'Erlaubt dem Feed-Server das Setzen von Cookies (wird nur für die Dauer der Anfrage im Speicher gehalten)',
-		'add' => 'Einen RSS-Feed hinzufügen',
+		'add' => 'Einen Feed hinzufügen',
 		'advanced' => 'Erweitert',
 		'archiving' => 'Archivierung',
 		'auth' => array(
diff --git a/app/i18n/el/sub.php b/app/i18n/el/sub.php
index 3d95d0e31..80f420811 100644
--- a/app/i18n/el/sub.php
+++ b/app/i18n/el/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Accept cookies',	// TODO
 		'accept_cookies_help' => 'Allow the feed server to set cookies (stored in memory for the duration of the request only)',	// TODO
-		'add' => 'Add an RSS feed',	// TODO
+		'add' => 'Add a feed',	// TODO
 		'advanced' => 'Advanced',	// TODO
 		'archiving' => 'Archiving',	// TODO
 		'auth' => array(
diff --git a/app/i18n/en-us/sub.php b/app/i18n/en-us/sub.php
index 7c574f326..7f4469ff1 100644
--- a/app/i18n/en-us/sub.php
+++ b/app/i18n/en-us/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Accept cookies',	// IGNORE
 		'accept_cookies_help' => 'Allow the feed server to set cookies (stored in memory for the duration of the request only)',	// IGNORE
-		'add' => 'Add an RSS feed',	// IGNORE
+		'add' => 'Add a feed',	// IGNORE
 		'advanced' => 'Advanced',	// IGNORE
 		'archiving' => 'Archiving',	// IGNORE
 		'auth' => array(
diff --git a/app/i18n/en/sub.php b/app/i18n/en/sub.php
index 4c514ac0c..f514df5f3 100644
--- a/app/i18n/en/sub.php
+++ b/app/i18n/en/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Accept cookies',
 		'accept_cookies_help' => 'Allow the feed server to set cookies (stored in memory for the duration of the request only)',
-		'add' => 'Add an RSS feed',
+		'add' => 'Add a feed',
 		'advanced' => 'Advanced',
 		'archiving' => 'Archiving',
 		'auth' => array(
diff --git a/app/i18n/es/sub.php b/app/i18n/es/sub.php
index 853684712..cfb2bf550 100644
--- a/app/i18n/es/sub.php
+++ b/app/i18n/es/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Aceptar cookies',
 		'accept_cookies_help' => 'Permitir que el servidor de fuentes configure las cookies (guardadas en memoria únicamente para el tiempo de vida de la solicitud)',
-		'add' => 'Añadir fuente RSS',
+		'add' => 'Añadir fuente',
 		'advanced' => 'Avanzado',
 		'archiving' => 'Archivo',
 		'auth' => array(
diff --git a/app/i18n/fa/sub.php b/app/i18n/fa/sub.php
index 5dfd82c60..9aa388e27 100644
--- a/app/i18n/fa/sub.php
+++ b/app/i18n/fa/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => ' کوکی ها را بپذیرید',
 		'accept_cookies_help' => ' به سرور فید اجازه دهید تا کوکی ها را تنظیم کند (فقط برای مدت زمان درخواست در حافظه ذخیره می شود)',
-		'add' => ' یک فید RSS اضافه کنید',
+		'add' => ' یک فید اضافه کنید',
 		'advanced' => ' پیشرفته',
 		'archiving' => ' بایگانی',
 		'auth' => array(
diff --git a/app/i18n/fr/sub.php b/app/i18n/fr/sub.php
index 4a8c21d69..6dd205356 100644
--- a/app/i18n/fr/sub.php
+++ b/app/i18n/fr/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Autoriser les cookies',
 		'accept_cookies_help' => 'Accepte les cookies du flux (stocké en mémoire seulement le temps de la requête)',
-		'add' => 'Ajouter un flux RSS',
+		'add' => 'Ajouter un flux',
 		'advanced' => 'Avancé',
 		'archiving' => 'Archivage',
 		'auth' => array(
diff --git a/app/i18n/hu/sub.php b/app/i18n/hu/sub.php
index c91a6c5b4..7c45b2951 100644
--- a/app/i18n/hu/sub.php
+++ b/app/i18n/hu/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Sütik elfogadása',
 		'accept_cookies_help' => 'Engedélyezze hogy a hírforrás szerver beállíthasson sütiket (memóriában lesznek tárolva a kapcsolat idejére)',
-		'add' => 'RSS hírforrás hozzáadása',
+		'add' => 'hírforrás hozzáadása',
 		'advanced' => 'Haladó',
 		'archiving' => 'Archiválás',
 		'auth' => array(
diff --git a/app/i18n/id/sub.php b/app/i18n/id/sub.php
index 24a8dad2f..6f637c316 100644
--- a/app/i18n/id/sub.php
+++ b/app/i18n/id/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Accept cookies',	// TODO
 		'accept_cookies_help' => 'Allow the feed server to set cookies (stored in memory for the duration of the request only)',	// TODO
-		'add' => 'Add an RSS feed',	// TODO
+		'add' => 'Add a feed',	// TODO
 		'advanced' => 'Advanced',	// TODO
 		'archiving' => 'Archiving',	// TODO
 		'auth' => array(
diff --git a/app/i18n/it/sub.php b/app/i18n/it/sub.php
index 683785d45..ff1c6f36b 100644
--- a/app/i18n/it/sub.php
+++ b/app/i18n/it/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Accetta i cookie',
 		'accept_cookies_help' => 'Consenti al server dei feed di impostare dei cookie (salvati in memoria solo per la durata della richiesta)',
-		'add' => 'Aggiungi un Feed RSS',
+		'add' => 'Aggiungi un Feed',
 		'advanced' => 'Avanzate',
 		'archiving' => 'Archiviazione',
 		'auth' => array(
diff --git a/app/i18n/ja/sub.php b/app/i18n/ja/sub.php
index 0395d78c9..465637307 100644
--- a/app/i18n/ja/sub.php
+++ b/app/i18n/ja/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'クッキーを受け入れる',
 		'accept_cookies_help' => 'クッキーをこのサーバーから受け入れます(このリクエストだけにメモリへ保存されます)',
-		'add' => 'RSSフィードに追加する',
+		'add' => 'フィードに追加する',
 		'advanced' => '高度な設定',
 		'archiving' => 'アーカイブ',
 		'auth' => array(
diff --git a/app/i18n/ko/sub.php b/app/i18n/ko/sub.php
index 00190e9c8..470d61478 100644
--- a/app/i18n/ko/sub.php
+++ b/app/i18n/ko/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => '쿠키 사용 동의',
 		'accept_cookies_help' => '피드 서버가 쿠키를 사용하도록 허용 (요청 지속 기간 동안에만 메모리에 저장)',
-		'add' => 'RSS 피드 추가',
+		'add' => '피드 추가',
 		'advanced' => '고급 설정',
 		'archiving' => '보관',
 		'auth' => array(
diff --git a/app/i18n/lv/sub.php b/app/i18n/lv/sub.php
index bacc28500..c5e5b388f 100644
--- a/app/i18n/lv/sub.php
+++ b/app/i18n/lv/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Pieņemt sīkfailus',
 		'accept_cookies_help' => 'Atļaut barotnes serverim iestatīt sīkfailus (atmiņā tiek saglabāti tikai uz pieprasījuma laiku).',
-		'add' => 'Pievienot RSS barotni',
+		'add' => 'Pievienot barotni',
 		'advanced' => 'Advancēts',
 		'archiving' => 'Arhivēšana',
 		'auth' => array(
diff --git a/app/i18n/nl/sub.php b/app/i18n/nl/sub.php
index d624d01c4..38cd24d10 100644
--- a/app/i18n/nl/sub.php
+++ b/app/i18n/nl/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Cookies accepteren',
 		'accept_cookies_help' => 'De feed-server toestaan cookies te plaatsen (die alleen voor de duur van de aanvraag in het geheugen worden opgeslagen)',
-		'add' => 'Voeg een RSS-feed toe',
+		'add' => 'Voeg een feed toe',
 		'advanced' => 'Geavanceerd',
 		'archiving' => 'Archiveren',
 		'auth' => array(
diff --git a/app/i18n/oc/sub.php b/app/i18n/oc/sub.php
index 95e810171..4fcc50781 100644
--- a/app/i18n/oc/sub.php
+++ b/app/i18n/oc/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Acceptar los cookies',
 		'accept_cookies_help' => 'Permetre al servidor del flux de definir de cookies (gardatz en memòria pendent la durada de la requèsta sonque)',
-		'add' => 'Ajustar un flux RSS',
+		'add' => 'Ajustar un flux',
 		'advanced' => 'Avançat',
 		'archiving' => 'Archivar',
 		'auth' => array(
diff --git a/app/i18n/pt-br/sub.php b/app/i18n/pt-br/sub.php
index d7fef476c..2593b3648 100644
--- a/app/i18n/pt-br/sub.php
+++ b/app/i18n/pt-br/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Aceitar cookies',
 		'accept_cookies_help' => 'Permitir que o servidor de Feed defina os cookies (sarmazenados na memória apenas durante a solicitação)',
-		'add' => 'Adicionar um RSS feed',
+		'add' => 'Adicionar um feed',
 		'advanced' => 'Avançado',
 		'archiving' => 'Arquivar',
 		'auth' => array(
diff --git a/app/i18n/ru/sub.php b/app/i18n/ru/sub.php
index 6f4a4da18..a9f802738 100644
--- a/app/i18n/ru/sub.php
+++ b/app/i18n/ru/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Разрешить файлы cookies',
 		'accept_cookies_help' => 'Разрешить серверу ленты использовать cookies (файлы будут храниться в памяти лишь в течение запроса)',
-		'add' => 'Добавить RSS-ленту',
+		'add' => 'Добавить ленту',
 		'advanced' => 'Дополнительно',
 		'archiving' => 'Архивирование',
 		'auth' => array(
diff --git a/app/i18n/sk/sub.php b/app/i18n/sk/sub.php
index a3b9856cd..766d75e8f 100644
--- a/app/i18n/sk/sub.php
+++ b/app/i18n/sk/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Prijať cookies',
 		'accept_cookies_help' => 'Povoliť serveru kanála nastaviť cookies (uložené v pamäti iba počas dopytu)',
-		'add' => 'Pridať RSS kanál',
+		'add' => 'Pridať kanál',
 		'advanced' => 'Pokročilé',
 		'archiving' => 'Archivovanie',
 		'auth' => array(
diff --git a/app/i18n/tr/sub.php b/app/i18n/tr/sub.php
index c08132ce4..ad68d0611 100644
--- a/app/i18n/tr/sub.php
+++ b/app/i18n/tr/sub.php
@@ -40,7 +40,7 @@ return array(
 	'feed' => array(
 		'accept_cookies' => 'Cookieleri kabul et',
 		'accept_cookies_help' => 'Akış sağlayıcısının cookieler oluşturmasına izin ver. (Sadece istek süresince bellekte depolanmak üzere)',
-		'add' => 'RSS akışı ekle',
+		'add' => 'akışı ekle',
 		'advanced' => 'Gelişmiş',
 		'archiving' => 'Arşiv',
 		'auth' => array(
diff --git a/app/layout/aside_feed.phtml b/app/layout/aside_feed.phtml
index cd0e0464c..7ca3bd3db 100644
--- a/app/layout/aside_feed.phtml
+++ b/app/layout/aside_feed.phtml
@@ -106,7 +106,7 @@
 
 		$error_class = '';
 		$error_title = '';
-		if ($feed->inError() && !$feed->mute()) {
+		if ($feed->inError()) {
 			$error_class = ' error';
 			$error_title = _t('sub.feed.error');
 		}
diff --git a/app/views/subscription/index.phtml b/app/views/subscription/index.phtml
index 27c6e02ef..47f549faf 100644
--- a/app/views/subscription/index.phtml
+++ b/app/views/subscription/index.phtml
@@ -22,7 +22,7 @@
 
 	<?php if (!$this->onlyFeedsWithError && $this->signalError) { ?>
 		<div>
-			<a class="btn" href="<?= _url('subscription', 'index', 'error', '1') ?>"><?= _i('look') ?> <?= _t('sub.feed.show.error') ?></a>
+			<a class="btn btn-icon-text" href="<?= _url('subscription', 'index', 'error', '1') ?>"><?= _i('look') ?> <?= _t('sub.feed.show.error') ?></a>
 		</div>
 	<?php } ?>
 
@@ -34,7 +34,7 @@
 		?>
 		<div class="box">
 			<div class="box-title">
-				<a class="configure open-slider" href="<?= _url('category', 'update', 'id', $cat->id()) ?>" data-cat-position="<?= $cat->attributeString('position') ?>"><?= _i('configure') ?></a>
+				<a class="configure open-slider" href="<?= _url('category', 'update', 'id', $cat->id()) ?>" title="<?= _t('gen.action.manage') ?>" data-cat-position="<?= $cat->attributeString('position') ?>"><?= _i('configure') ?></a>
 				<h2><?= $cat->name() ?><?php if ($cat->kind() === FreshRSS_Category::KIND_DYNAMIC_OPML) { echo " " . _i('opml-dyn'); } ?></h2>
 			</div>
 			<ul class="box-content drop-zone scrollbar-thin" dropzone="move" data-cat-id="<?= $cat->id() ?>">
@@ -59,21 +59,25 @@
 							$empty_title = _t('sub.feed.empty');
 						}
 						$mute_class = $feed->mute() ? ' mute' : '';
+
+						$title = $error_title !== '' ? '⚠ ' . $error_title . '&#13;' : '';
+						$title .= $empty_title !== '' ? $empty_title . '&#13;' : '';
+						$title .= $feed->mute() ? '🔇 ' . _t('sub.feed.mute.state_is_muted') : '';
 				?>
-				<li class="item feed<?= $error_class, $empty_class, $mute_class ?>" title="<?= $error_title, $empty_title ?>"
+				<li class="item feed<?= $error_class, $empty_class, $mute_class ?>" title="<?= $title ?>"
 					draggable="true" data-feed-id="<?= $feed->id() ?>" data-priority="<?= $feed->priority() ?>">
-					<a class="configure open-slider" href="<?= _url('subscription', 'feed', 'id', $feed->id()) ?>" title="<?= _t('gen.action.manage') ?>"><?= _i('configure') ?></a>
-					<?php if (FreshRSS_Context::userConf()->show_favicons): ?><img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php endif; ?>
-					<span class="item-title"><?= $feed->name() ?></span>
+					<a class="configure open-slider" href="<?= _url('subscription', 'feed', 'id', $feed->id()) ?>" title="<?= _t('gen.action.manage') ?>"><?= _i('configure') ?></a><?php
+					if (FreshRSS_Context::userConf()->show_favicons): ?><img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php
+					endif; ?><span class="item-title"><?= $feed->name() ?></span>
 				</li>
 				<?php
 					}
 				} else {
 				?>
-				<li class="item feed disabled"><div class="alert-warn"><?= _t('sub.category.empty') ?></div></li>
+				<li class="item feed disabled emptyCategory"><div class="alert-warn"><?= _t('sub.category.empty') ?></div></li>
 				<?php } ?>
 				<?php if ($cat->kind() != FreshRSS_Category::KIND_DYNAMIC_OPML): ?>
-					<li class="item feed">✚ <a href="<?= _url('subscription', 'add', 'cat_id', $cat->id()) ?>"><?= _t('sub.feed.add') ?></a></li>
+					<li class="item feed"><a href="<?= _url('subscription', 'add', 'cat_id', $cat->id()) ?>"><?= _i('add') ?><?= _t('sub.feed.add') ?></a></li>
 				<?php endif; ?>
 			</ul>
 		</div>
@@ -81,7 +85,7 @@
 
 		<div class="box visible-semi">
 			<div class="box-title">
-				✚ <a href="<?= _url('subscription', 'add') ?>"><h2><?= _t('sub.category.add') ?></h2></a>
+				<a href="<?= _url('subscription', 'add') ?>"><?= _i('add') ?> <h2><?= _t('sub.category.add') ?></h2></a>
 			</div>
 			<div class="box-content">
 			</div>
diff --git a/p/scripts/category.js b/p/scripts/category.js
index d412bd6fb..1730f66db 100644
--- a/p/scripts/category.js
+++ b/p/scripts/category.js
@@ -25,7 +25,7 @@ function dragend_process(t) {
 
 		if (p.childElementCount <= 1) {
 			p.insertAdjacentHTML('afterbegin',
-				'<li class="item feed disabled"><div class="alert-warn">' + context.i18n.category_empty + '</div></li>');
+				'<li class="item feed disabled emptyCategory"><div class="alert-warn">' + context.i18n.category_empty + '</div></li>');
 		}
 	}
 }
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 6db38242d..bd0cad66b 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -457,8 +457,6 @@ kbd {
 }
 
 .box .box-title {
-	margin: 0;
-	padding: 5px 10px;
 	background: var(--background-color-light);
 	border-radius: 5px 5px 0 0;
 }
@@ -475,7 +473,6 @@ kbd {
 
 .box .box-content .item {
 	font-size: 0.9rem;
-	line-height: 2.5;
 }
 
 /*=== Tree */
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index a787d0bf3..bdaec3db6 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -457,8 +457,6 @@ kbd {
 }
 
 .box .box-title {
-	margin: 0;
-	padding: 5px 10px;
 	background: var(--background-color-light);
 	border-radius: 5px 5px 0 0;
 }
@@ -475,7 +473,6 @@ kbd {
 
 .box .box-content .item {
 	font-size: 0.9rem;
-	line-height: 2.5;
 }
 
 /*=== Tree */
diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index 88ab37296..44834b2c5 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -221,8 +221,6 @@
 	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
 
 	.box-title {
-		margin: 0;
-		padding: 0.5rem 0.75rem;
 		background: variables.$grey-light;
 		color: variables.$main-font-color;
 		border-radius: 2px 2px 0 0;
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 3967e8c11..9bb6ce263 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -376,8 +376,6 @@ th {
 	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
 }
 .box .box-title {
-	margin: 0;
-	padding: 0.5rem 0.75rem;
 	background: #f5f0ec;
 	color: #363330;
 	border-radius: 2px 2px 0 0;
@@ -910,12 +908,8 @@ main.prompt {
 	box-shadow: 0 2px 5px #ccc;
 }
 .content pre, .content.thin pre {
-	margin: 10px auto;
-	padding: 10px 20px;
-	overflow: auto;
 	background: #221f1d;
 	color: #fff;
-	font-size: 0.9rem;
 	border-radius: 3px;
 }
 .content pre code, .content.thin pre code {
@@ -924,9 +918,8 @@ main.prompt {
 	border: none;
 }
 .content code, .content.thin code {
-	padding: 2px 5px;
 	background: #fcfaf8;
-	border: 1px solid #f5f0ec;
+	border-color: #f5f0ec;
 	border-radius: 3px;
 }
 .content blockquote, .content.thin blockquote {
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 88ed5248a..927b67db8 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -376,8 +376,6 @@ th {
 	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
 }
 .box .box-title {
-	margin: 0;
-	padding: 0.5rem 0.75rem;
 	background: #f5f0ec;
 	color: #363330;
 	border-radius: 2px 2px 0 0;
@@ -910,12 +908,8 @@ main.prompt {
 	box-shadow: 0 2px 5px #ccc;
 }
 .content pre, .content.thin pre {
-	margin: 10px auto;
-	padding: 10px 20px;
-	overflow: auto;
 	background: #221f1d;
 	color: #fff;
-	font-size: 0.9rem;
 	border-radius: 3px;
 }
 .content pre code, .content.thin pre code {
@@ -924,9 +918,8 @@ main.prompt {
 	border: none;
 }
 .content code, .content.thin code {
-	padding: 2px 5px;
 	background: #fcfaf8;
-	border: 1px solid #f5f0ec;
+	border-color: #f5f0ec;
 	border-radius: 3px;
 }
 .content blockquote, .content.thin blockquote {
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 0beb474cf..53a8e57c2 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -424,8 +424,6 @@ th {
 }
 
 .box .box-title {
-	margin: 0;
-	padding: 5px 10px;
 	background: #ecf0f1;
 	color: #333;
 	border-bottom: 1px solid #ddd;
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 52f513337..17c70439b 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -424,8 +424,6 @@ th {
 }
 
 .box .box-title {
-	margin: 0;
-	padding: 5px 10px;
 	background: #ecf0f1;
 	color: #333;
 	border-bottom: 1px solid #ddd;
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index 5f7e04e56..7b2526428 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -209,8 +209,6 @@
 	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
 
 	.box-title {
-		margin: 0;
-		padding: 5px 10px;
 		background: variables.$grey-light;
 		color: variables.$main-font-color;
 		border-radius: 2px 2px 0 0;
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 130258de8..a1821bd01 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -366,8 +366,6 @@ th {
 	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
 }
 .box .box-title {
-	margin: 0;
-	padding: 5px 10px;
 	background: #eff0f2;
 	color: #303136;
 	border-radius: 2px 2px 0 0;
@@ -930,12 +928,8 @@ main.prompt {
 	box-shadow: 0 2px 5px #ccc;
 }
 .content pre, .content.thin pre {
-	margin: 10px auto;
-	padding: 10px 20px;
-	overflow: auto;
 	background: #1d1e22;
 	color: #fff;
-	font-size: 0.9rem;
 	border-radius: 3px;
 }
 .content pre code, .content.thin pre code {
@@ -944,7 +938,6 @@ main.prompt {
 	border: none;
 }
 .content code, .content.thin code {
-	padding: 2px 5px;
 	background: #fde3e3;
 	color: #e41212;
 	font-size: 1rem;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index f1ebe923e..2880bde0c 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -366,8 +366,6 @@ th {
 	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
 }
 .box .box-title {
-	margin: 0;
-	padding: 5px 10px;
 	background: #eff0f2;
 	color: #303136;
 	border-radius: 2px 2px 0 0;
@@ -930,12 +928,8 @@ main.prompt {
 	box-shadow: 0 2px 5px #ccc;
 }
 .content pre, .content.thin pre {
-	margin: 10px auto;
-	padding: 10px 20px;
-	overflow: auto;
 	background: #1d1e22;
 	color: #fff;
-	font-size: 0.9rem;
 	border-radius: 3px;
 }
 .content pre code, .content.thin pre code {
@@ -944,7 +938,6 @@ main.prompt {
 	border: none;
 }
 .content code, .content.thin code {
-	padding: 2px 5px;
 	background: #fde3e3;
 	color: #e41212;
 	font-size: 1rem;
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 16782895f..575ad2b70 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -509,22 +509,19 @@ img.favicon {
 	border-radius: 10px;
 }
 
-.box .box-title {
-	padding: 5px 10px;
-}
-
-.box .box-title,
-.box .box-content {
-	padding: 1rem 1rem .25rem 1rem;
-}
-
 .box .box-content {
 	padding-bottom: 1.5rem;
 	list-style: none;
 }
 
+.box .box-title {
+	padding-top: 0.75rem;
+	padding-bottom: 0.5rem;
+	border-bottom: 1px solid var(--nordX-background);
+}
+
 .box .box-title .configure {
-	padding-right: .5rem;
+	padding-right: .25rem;
 }
 
 .box .box-title h2 {
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index 84eca7e05..99f73a0c4 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -509,22 +509,19 @@ img.favicon {
 	border-radius: 10px;
 }
 
-.box .box-title {
-	padding: 5px 10px;
-}
-
-.box .box-title,
-.box .box-content {
-	padding: 1rem 1rem .25rem 1rem;
-}
-
 .box .box-content {
 	padding-bottom: 1.5rem;
 	list-style: none;
 }
 
+.box .box-title {
+	padding-top: 0.75rem;
+	padding-bottom: 0.5rem;
+	border-bottom: 1px solid var(--nordX-background);
+}
+
 .box .box-title .configure {
-	padding-left: .5rem;
+	padding-left: .25rem;
 }
 
 .box .box-title h2 {
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 2aace83eb..702ea855a 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -567,8 +567,6 @@ a:hover .icon {
 }
 
 .box .box-title {
-	margin: 0;
-	padding: 5px 10px;
 	background-color: var(--background-color-grey);
 	border-bottom: 1px solid var(--border-color);
 	border-radius: 5px 5px 0 0;
@@ -578,16 +576,8 @@ a:hover .icon {
 	margin-right: 4px;
 }
 
-.box .box-content {
-	padding-left: 30px;
-	min-height: 2.5em;
-	max-height: 260px;
-}
-
 .box .box-content .item {
 	padding-bottom: 0.25rem;
-	font-size: 0.9rem;
-	line-height: 1.5;
 }
 
 /*=== Tree */
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 9010ef8dc..5879a9e70 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -567,8 +567,6 @@ a:hover .icon {
 }
 
 .box .box-title {
-	margin: 0;
-	padding: 5px 10px;
 	background-color: var(--background-color-grey);
 	border-bottom: 1px solid var(--border-color);
 	border-radius: 5px 5px 0 0;
@@ -578,16 +576,8 @@ a:hover .icon {
 	margin-left: 4px;
 }
 
-.box .box-content {
-	padding-right: 30px;
-	min-height: 2.5em;
-	max-height: 260px;
-}
-
 .box .box-content .item {
 	padding-bottom: 0.25rem;
-	font-size: 0.9rem;
-	line-height: 1.5;
 }
 
 /*=== Tree */
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index d70b2f111..4633d30cd 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -458,8 +458,6 @@ th {
 }
 
 .box .box-title {
-	margin: 0;
-	padding: 5px 10px;
 	background-color: var(--background-color-grey);
 	border-bottom: 1px solid var(--border-color-grey-dark);
 	border-radius: 5px 5px 0 0;
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 5a5489d2b..8d98fdd80 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -458,8 +458,6 @@ th {
 }
 
 .box .box-title {
-	margin: 0;
-	padding: 5px 10px;
 	background-color: var(--background-color-grey);
 	border-bottom: 1px solid var(--border-color-grey-dark);
 	border-radius: 5px 5px 0 0;
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 0c1e13194..d30e427dd 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -468,7 +468,6 @@ form th {
 }
 .box .box-title {
 	margin: 0;
-	padding: 7px 10px;
 	background-color: var(--color-background-aside);
 	color: var(--color-text-light);
 	border-bottom: 1px solid var(--color-border-light-darker);
@@ -483,7 +482,6 @@ form th {
 	filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
 }
 .box .box-content {
-	padding-left: 30px;
 	max-height: 260px;
 }
 .box .box-content .item {
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 77967fa76..e8656d48f 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -468,7 +468,6 @@ form th {
 }
 .box .box-title {
 	margin: 0;
-	padding: 7px 10px;
 	background-color: var(--color-background-aside);
 	color: var(--color-text-light);
 	border-bottom: 1px solid var(--color-border-light-darker);
@@ -483,7 +482,6 @@ form th {
 	filter: invert(56%) sepia(87%) saturate(1185%) hue-rotate(327deg) brightness(104%) contrast(96%);
 }
 .box .box-content {
-	padding-right: 30px;
 	max-height: 260px;
 }
 .box .box-content .item {
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 8d748327c..ea7049086 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -599,7 +599,6 @@ form {
 
 	.box-title {
 		margin: 0;
-		padding: 7px 10px;
 		background-color: var(--color-background-aside);
 		color: var(--color-text-light);
 		border-bottom: 1px solid var(--color-border-light-darker);
@@ -620,7 +619,6 @@ form {
 	}
 
 	.box-content {
-		padding-left: 30px;
 		max-height: 260px;
 
 		.item {
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 776d743ac..e8752bb96 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -314,18 +314,12 @@ th {
 }
 
 .box .box-title {
-	margin: 0;
-	padding: 5px 10px;
 }
 
 .box .box-content {
-	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
-	font-size: 0.9rem;
-	line-height: 2.5;
 }
 
 /*=== Tree */
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index c8f213bda..e614bdafc 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -314,18 +314,12 @@ th {
 }
 
 .box .box-title {
-	margin: 0;
-	padding: 5px 10px;
 }
 
 .box .box-content {
-	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
-	font-size: 0.9rem;
-	line-height: 2.5;
 }
 
 /*=== Tree */
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 0c53deb06..2f7b977ec 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -204,7 +204,15 @@ img.favicon {
 	font-style: italic;
 }
 
-.feed.mute .item-title .title::before {
+.category .title.error::before,
+.item.feed.error .item-title .title::before,
+.box-content .item.feed.error .item-title::before {
+	content: " ⚠ ";
+	color: var(--frss-font-color-error);
+}
+
+.item.feed.mute .item-title .title::before,
+.box .box-content .item.feed.mute .item-title::before {
 	content: '🔇 ';
 }
 
@@ -503,6 +511,10 @@ td.numeric {
 	overflow: hidden;
 }
 
+.btn-icon-text > .icon {
+	margin-right: 0.25rem;
+}
+
 .btn-important {
 	font-weight: bold;
 }
@@ -901,6 +913,11 @@ input[type="checkbox"]:focus-visible {
 
 .box .box-title {
 	position: relative;
+	padding: 0.25rem 1rem;
+}
+
+.box .box-title .icon {
+	margin-bottom: 0.25rem;
 }
 
 .box .box-title h2 {
@@ -914,16 +931,35 @@ input[type="checkbox"]:focus-visible {
 }
 
 .box .box-content {
-	padding: 8px 8px 8px 16px;
+	padding: 0.5rem 0.5rem 0.5rem 1.75rem;
 	display: block;
 	min-height: 2.5em;
 	max-height: 260px;
 	overflow: auto;
 }
 
+.box .box-content .item {
+	font-size: 0.9rem;
+	line-height: 1.5;
+	text-indent: -3rem;
+}
+
 .box .box-content .item.feed {
+	padding: var(--frss-padding-top-bottom) 0 calc(var(--frss-padding-top-bottom) / 2) 2rem;
 	display: block;
-	padding-top: var(--frss-padding-top-bottom);
+}
+
+.box .box-content .item.feed.emptyCategory {
+	padding: 0.5rem 1rem 0.5rem 0;
+}
+
+.box .box-content .item.feed .favicon {
+	margin-right: 0.25rem;
+}
+
+.box .box-content .item.feed .icon {
+	margin-left: 0.25rem;
+	margin-right: 0.5rem;
 }
 
 .box .box-content .item.feed.moved {
@@ -2056,8 +2092,6 @@ html.slider-active {
 }
 
 .item.share.error a::after,
-.category .title.error::before,
-.item.feed.error .item-title .title::before,
 .theme-preview-list .properties .error::before {
 	content: " ⚠ ";
 	color: var(--frss-font-color-error);
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 59fe68aac..75ae5e92b 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -204,7 +204,15 @@ img.favicon {
 	font-style: italic;
 }
 
-.feed.mute .item-title .title::before {
+.category .title.error::before,
+.item.feed.error .item-title .title::before,
+.box-content .item.feed.error .item-title::before {
+	content: " ⚠ ";
+	color: var(--frss-font-color-error);
+}
+
+.item.feed.mute .item-title .title::before,
+.box .box-content .item.feed.mute .item-title::before {
 	content: '🔇 ';
 }
 
@@ -503,6 +511,10 @@ td.numeric {
 	overflow: hidden;
 }
 
+.btn-icon-text > .icon {
+	margin-left: 0.25rem;
+}
+
 .btn-important {
 	font-weight: bold;
 }
@@ -901,6 +913,11 @@ input[type="checkbox"]:focus-visible {
 
 .box .box-title {
 	position: relative;
+	padding: 0.25rem 1rem;
+}
+
+.box .box-title .icon {
+	margin-bottom: 0.25rem;
 }
 
 .box .box-title h2 {
@@ -914,16 +931,35 @@ input[type="checkbox"]:focus-visible {
 }
 
 .box .box-content {
-	padding: 8px 16px 8px 8px;
+	padding: 0.5rem 1.75rem 0.5rem 0.5rem;
 	display: block;
 	min-height: 2.5em;
 	max-height: 260px;
 	overflow: auto;
 }
 
+.box .box-content .item {
+	font-size: 0.9rem;
+	line-height: 1.5;
+	text-indent: -3rem;
+}
+
 .box .box-content .item.feed {
+	padding: var(--frss-padding-top-bottom) 2rem calc(var(--frss-padding-top-bottom) / 2) 0;
 	display: block;
-	padding-top: var(--frss-padding-top-bottom);
+}
+
+.box .box-content .item.feed.emptyCategory {
+	padding: 0.5rem 0 0.5rem 1rem;
+}
+
+.box .box-content .item.feed .favicon {
+	margin-left: 0.25rem;
+}
+
+.box .box-content .item.feed .icon {
+	margin-right: 0.25rem;
+	margin-left: 0.5rem;
 }
 
 .box .box-content .item.feed.moved {
@@ -2056,8 +2092,6 @@ html.slider-active {
 }
 
 .item.share.error a::after,
-.category .title.error::before,
-.item.feed.error .item-title .title::before,
 .theme-preview-list .properties .error::before {
 	content: " ⚠ ";
 	color: var(--frss-font-color-error);