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

1 files changed, 39 insertions, 5 deletions

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