1 files changed, 182 insertions, 39 deletions

diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index e0ef320e1..6a5ef8b87 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -39,6 +39,7 @@
 	--frss-loading-image: url("loader.gif");
 
 	--frss-padding-flux-items: 0.75rem;
+	--frss-padding-top-bottom: 0.5rem;
 
 	line-height: 1.5;
 }
@@ -114,10 +115,13 @@ h3 {
 	display: none;
 }
 
+.only-mobile {
+	display: none !important;
+}
+
 /*=== Paragraphs */
 p {
 	margin: 1rem 0 0.5rem;
-	font-size: 1rem;
 }
 
 p.help, .prompt p.help {
@@ -194,7 +198,8 @@ label {
 }
 
 input {
-	width: 180px;
+	max-width: 90%;
+	width: 300px;
 }
 
 input[type=number] {
@@ -203,8 +208,7 @@ input[type=number] {
 
 textarea,
 input[type="file"],
-input.long,
-input.extend:focus {
+input.long {
 	width: 300px;
 }
 
@@ -212,6 +216,11 @@ input, select, textarea {
 	display: inline-block;
 	max-width: 100%;
 	font-size: 0.8rem;
+	box-sizing: border-box;
+}
+
+select {
+	min-width: 6em;
 }
 
 input.w50,
@@ -286,8 +295,8 @@ input[type="checkbox"] {
 	width: calc(99% - 5em);
 }
 
-.dropdown-menu > .item > a:hover,
-.dropdown-menu > .item > button:hover {
+.dropdown-menu .item > a:hover,
+.dropdown-menu .item > button:hover {
 	text-decoration: none;
 }
 
@@ -317,7 +326,6 @@ button.as-link:hover,
 button.as-link:active {
 	background: transparent;
 	color: inherit;
-	font-size: 1.1rem;
 	border: none;
 	cursor: pointer;
 	text-align: left;
@@ -333,9 +341,14 @@ button.as-link[disabled] {
 }
 
 table {
+	margin: 0.5rem 0;
 	max-width: 100%;
 }
 
+th, td {
+	padding: 0.5rem;
+}
+
 th.numeric,
 td.numeric {
 	text-align: center;
@@ -389,10 +402,11 @@ td.numeric {
 	display: block;
 	float: left;
 	width: 200px;
+	text-align: right;
 }
 
 .form-group .group-controls {
-	min-width: 250px;
+	min-width: 200px;
 	margin: 0 0 0 220px;
 	overflow-x: auto;
 }
@@ -437,7 +451,7 @@ td.numeric {
 	flex-shrink: 0;
 }
 
-.stick form {
+#nav_menu_read_all form {
 	display: inline-flex;
 }
 
@@ -554,6 +568,10 @@ input[type="checkbox"]:focus-visible {
 }
 
 /*=== Navigation */
+.nav-list {
+	padding-bottom: 3rem;
+}
+
 .nav-list .nav-header,
 .nav-list .item {
 	display: block;
@@ -583,7 +601,7 @@ input[type="checkbox"]:focus-visible {
 }
 
 .horizontal-list .item .item-element {
-	padding: 0.5rem 0;
+	padding: var(--frss-padding-top-bottom) 0;
 }
 
 /*=== manage-list */
@@ -649,13 +667,13 @@ input[type="checkbox"]:focus-visible {
 	display: block;
 }
 
-.dropdown-menu > .item {
+.dropdown-menu .item {
 	display: block;
 }
 
-.dropdown-menu > .item > a,
-.dropdown-menu > .item > .as-link,
-.dropdown-menu > .item > span {
+.dropdown-menu .item > a,
+.dropdown-menu .item > .as-link,
+.dropdown-menu .item > span {
 	display: block;
 	width: 100%;
 	white-space: nowrap;
@@ -696,6 +714,7 @@ input[type="checkbox"]:focus-visible {
 }
 
 .item ~ .dropdown-header,
+.dropdown-section ~ .dropdown-section,
 .item.separator {
 	margin-top: 5px;
 	padding-top: 5px;
@@ -705,6 +724,8 @@ input[type="checkbox"]:focus-visible {
 
 /*=== Alerts */
 .alert {
+	margin: 1rem auto;
+	padding: 0.75rem 1rem;
 	display: block;
 	width: 90%;
 }
@@ -826,6 +847,7 @@ input[type="checkbox"]:focus-visible {
 
 .box .box-content .item.feed {
 	display: block;
+	padding-top: var(--frss-padding-top-bottom);
 }
 
 .box .box-content .item.feed.moved {
@@ -955,6 +977,11 @@ li.drag-hover {
 	transition: max-height .3s linear;
 }
 
+.tree-folder-title {
+	padding-top: var(--frss-padding-top-bottom);
+	padding-bottom: var(--frss-padding-top-bottom);
+}
+
 .tree-folder-title .title {
 	display: inline-block;
 	width: 100%;
@@ -993,16 +1020,19 @@ li.drag-hover {
 .header {
 	display: table;
 	width: 100%;
-	height: 85px;
+	height: calc(2.5rem + 2 * var(--frss-padding-top-bottom));
 	table-layout: fixed;
 }
 
 .header > .item {
+	padding-top: var(--frss-padding-top-bottom);
+	padding-bottom: var(--frss-padding-top-bottom);
 	display: table-cell;
 }
 
 .header > .item.title {
-	width: 250px;
+	width: 300px;
+	text-align: center;
 	white-space: nowrap;
 }
 
@@ -1010,12 +1040,22 @@ li.drag-hover {
 	display: inline-block;
 }
 
+.header > .item.title a {
+	padding: 0.25rem 1rem;
+	display: inline-block;
+}
+
 .header > .item.title .logo {
 	display: inline-block;
-	height: 32px;
+	height: 2rem;
 	vertical-align: middle;
 }
 
+.header > .item.title a:hover .logo {
+	filter: brightness(1.4);
+	transition: filter 0.1s linear;
+}
+
 .header > .item.configure {
 	width: 100px;
 }
@@ -1029,7 +1069,7 @@ input[type="search"] {
 	background: inherit;
 	display: table;
 	width: 100%;
-	height: calc(100vh - 85px);
+	height: calc(100vh - (calc(2.5rem + 2 * var(--frss-padding-top-bottom) + 1px)));
 	table-layout: fixed;
 }
 
@@ -1061,7 +1101,7 @@ input[type="search"] {
 }
 
 .aside_feed .tree-folder-items .item.feed {
-	padding: 0 0.75rem;
+	padding: var(--frss-padding-top-bottom) 0.75rem;
 }
 
 .aside_feed .tree-folder-items:not(.active) {
@@ -1104,6 +1144,7 @@ input[type="search"] {
 }
 
 #new-article > a {
+	padding: calc(0.25rem + var(--frss-padding-top-bottom)) 1rem;
 	display: block;
 }
 
@@ -1132,7 +1173,7 @@ input[type="search"] {
 }
 
 .flux .flux_header .item .item-element {
-	padding: 0.5rem 0;
+	padding: var(--frss-padding-top-bottom) 0;
 	line-height: 1.5rem;
 }
 
@@ -1163,7 +1204,7 @@ a.website:hover .favicon {
 }
 
 .flux:not(.current):hover .item.title {
-	background-color: var(--frss-background-color);
+	background-color: inherit;
 	max-width: calc(100% - 320px);
 	position: absolute;
 }
@@ -1179,10 +1220,14 @@ a.website:hover .favicon {
 
 .flux .item.thumbnail {
 	line-height: 0;
-	padding: 0.75rem;
+	padding: var(--frss-padding-top-bottom) var(--frss-padding-flux-items);
 	height: 80px;
 }
 
+.flux .item.thumbnail .item-element {
+	padding: 0;
+}
+
 .flux .item.thumbnail.small {
 	height: 40px;
 }
@@ -1225,6 +1270,7 @@ a.website:hover .favicon {
 	color: var(--frss-font-color-grey-dark);
 	font-size: 0.9rem;
 	font-weight: normal;
+	overflow: hidden;
 	text-overflow: ellipsis;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
@@ -1272,16 +1318,38 @@ a.website:hover .favicon {
 	word-wrap: break-word;
 }
 
+.content .text {
+	overflow-x: auto;
+}
+
+.content .text div {
+	overflow-x: auto;
+}
+
+.content header,
+.content .text,
+.content footer {
+	padding: 0 3rem;
+}
+
+.content header {
+	padding-top: calc(2 * var(--frss-padding-top-bottom));
+}
+
+.content footer {
+	padding-bottom: calc(2 * var(--frss-padding-top-bottom));
+}
+
 .content.large {
-	max-width: 1000px;
+	max-width: 1100px;
 }
 
 .content.medium {
-	max-width: 800px;
+	max-width: 900px;
 }
 
 .content.thin {
-	max-width: 550px;
+	max-width: 650px;
 }
 
 .content .article-header-topline {
@@ -1295,14 +1363,13 @@ a.website:hover .favicon {
 }
 
 .content > footer {
-	margin: 2rem 0 2rem;
 	padding-top: 1rem;
-	border-top: 2px solid var(--frss-border-color);
 	clear: both;
 }
 
 .content > footer .subtitle {
-	padding-bottom: 1rem;
+	padding: 2rem 0 1rem;
+	border-top: 2px solid var(--frss-border-color);
 }
 
 .content > header .tags,
@@ -1312,8 +1379,9 @@ a.website:hover .favicon {
 }
 
 .content > header .tags .icon,
+.content > header .website .favicon,
 .content > footer .tags .icon {
-	padding: 0 1rem 0 0;
+	margin: 0 0.5rem 0 0;
 	line-height: 1.5;
 }
 
@@ -1362,15 +1430,19 @@ a.website:hover .favicon {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 10px 50px 10px 10px;
+	padding: 0.75rem 3.5rem 0.75rem 0.75rem;
 	position: absolute;
-	top: 1em;
+	top: 1rem;
 	left: 25%; right: 25%;
 	z-index: 9999;
 	background-color: var(--frss-background-color);
+	font-weight: bold;
+	font-size: 0.9rem;
 	border: 1px solid var(--frss-border-color);
 	opacity: 1;
+	text-align: center;
 	line-height: 2;
+	vertical-align: middle;
 	visibility: visible;
 	transition: visibility 0s, opacity .3s linear;
 }
@@ -1381,10 +1453,12 @@ a.website:hover .favicon {
 }
 
 .notification a.close {
+	padding: 0 1rem;
 	position: absolute;
 	top: 0; bottom: 0;
 	right: 0;
 	display: inline-block;
+	line-height: 3;
 }
 
 .notification a.close:hover {
@@ -1771,18 +1845,23 @@ input:checked + .slide-container .properties {
 
 .item.share.error a::after,
 .category .title.error::before,
-.item.feed.error .item-title::before {
+.item.feed.error .item-title::before,
+.properties .error::before {
 	content: " ⚠ ";
 	color: var(--frss-font-color-error);
 }
 
+.deprecated {
+	font-weight: bold;
+}
+
 .feed.item.error.active .item-title::before {
 	color: var(--frss-font-color-light);
 }
 
 .aside .category .title:not([data-unread="0"])::after,
 .aside .feed .item-title:not([data-unread="0"])::after {
-	margin: 0.6rem 0 0 0;
+	margin: calc(0.125rem + var(--frss-padding-top-bottom)) 0 0 0;
 	padding: 0.25rem 0.5rem;
 	min-width: 2rem;
 	display: block;
@@ -1833,6 +1912,26 @@ input:checked + .slide-container .properties {
 	margin: 1em 0 0 0;
 }
 
+#stream.global .feed {
+	position: relative;
+}
+
+#stream.global .feed .item-title:not([data-unread="0"])::after {
+	margin: 0.5rem 0px 0px;
+	padding: 5px 10px;
+	min-width: 20px;
+	display: block;
+	content: attr(data-unread);
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	text-align: center;
+	font-size: 0.75rem;
+	border-radius: 12px;
+	line-height: 1;
+	font-weight: initial;
+}
+
 .feed.active .item-title:not([data-unread="0"])::after {
 	color: var(--frss-font-color-light);
 	border: 1px solid var(--frss-border-color);
@@ -1850,7 +1949,10 @@ input:checked + .slide-container .properties {
 }
 
 .nav_menu {
+	padding-top: var(--frss-padding-top-bottom);
+	padding-bottom: var(--frss-padding-top-bottom);
 	background: inherit;
+	text-align: center;
 }
 
 .nav_mobile {
@@ -1858,7 +1960,6 @@ input:checked + .slide-container .properties {
 }
 
 .nav-login,
-.nav_menu .search,
 .aside .toggle_aside,
 #slider .toggle_aside,
 .nav_menu .toggle_aside,
@@ -1909,7 +2010,7 @@ input:checked + .slide-container .properties {
 }
 
 .reader .flux .content {
-	padding: 3rem;
+	padding: 3rem 0;
 	background-color: var(--frss-background-color);
 	border: 1px solid var(--frss-border-color);
 }
@@ -1933,10 +2034,19 @@ input:checked + .slide-container .properties {
 		display: none;
 	}
 
+	.only-mobile {
+		display: unset !important;
+	}
+
 	.header > .item {
 		padding: 5px;
 	}
 
+	.header > .item.title {
+		width: 75%;
+		text-align: left;
+	}
+
 	.header > .item.title .logo {
 		height: 24px;
 	}
@@ -1954,7 +2064,7 @@ input:checked + .slide-container .properties {
 	#panel .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
-		padding: 1rem;
+		padding: 1rem 0;
 		display: block;
 		width: 100%;
 		border-bottom: 1px solid var(--frss-border-color);
@@ -1968,6 +2078,7 @@ input:checked + .slide-container .properties {
 	.form-group .group-name {
 		float: none;
 		width: auto;
+		text-align: left;
 	}
 
 	.form-group .group-controls {
@@ -1978,7 +2089,8 @@ input:checked + .slide-container .properties {
 		position: inherit;
 	}
 
-	.dropdown .dropdown-header {
+	.dropdown .dropdown-header,
+	.dropdown .dropdown-section {
 		line-height: 2;
 	}
 
@@ -1994,6 +2106,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%;
@@ -2018,7 +2147,7 @@ input:checked + .slide-container .properties {
 	}
 
 	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
-		margin-top: 0;
+		margin-top: 10px;
 	}
 
 	.configure .dropdown .dropdown-menu {
@@ -2056,7 +2185,6 @@ input:checked + .slide-container .properties {
 	}
 
 	.nav_menu .toggle_aside,
-	.nav_menu .search,
 	#panel .close img {
 		display: inline-block;
 	}
@@ -2109,7 +2237,22 @@ input:checked + .slide-container .properties {
 		top: 0;
 	}
 
+	.content header,
+	.content .text,
+	.content footer {
+		padding: 1rem;
+	}
+
+	table {
+		font-size: 0.9rem;
+	}
+
+	th, td {
+		padding: 0.25rem;
+	}
+
 	.notification {
+		padding: 0.75rem;
 		top: 0;
 		left: 0;
 		right: 0;