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

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(

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(

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(

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(

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(

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(

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(

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(

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(

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(

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(

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(

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(

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(

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(

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(

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(

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(

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(

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(

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

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>

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

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

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

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;

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 {

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 {

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;

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;

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;

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;

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;

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 {

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 {

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

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

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;

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;

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 {

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 {

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 {

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

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

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

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