implement CSS variable --frss-padding-top-bottom (#4794)

6 files changed, 74 insertions, 138 deletions

diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index 880af2433..d85d5c065 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -2,6 +2,10 @@
 
 /*=== GENERAL */
 /*============*/
+:root {
+	--frss-padding-top-bottom: 0.125rem;
+}
+
 input, select, textarea {
 	padding: 3px 5px 2px 5px;
 	min-height: 25px;
@@ -41,14 +45,6 @@ a.btn,
 	font-size: 0.9rem;
 }
 
-.horizontal-list .item {
-	line-height: 2.2;
-}
-
-.horizontal-list .item .item-element {
-	padding: 1px 0 0 0;
-}
-
 /*=== Dropdown */
 .item ~ .dropdown-header,
 .item.separator {
@@ -59,27 +55,9 @@ a.btn,
 /*=== Pagination */
 /*=== Boxes */
 /*=== Tree */
-.tree-folder-title {
-	padding: 0 5px;
-	line-height: 2.2;
-	font-size: 0.9rem;
-}
-
-.tree-folder-items > .item {
-	line-height: 2.4;
-}
-
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
-.header {
-	height: 40px;
-}
-
-.header > .item {
-	padding: 0px;
-}
-
 .header .item.configure .btn,
 .header .item.search .btn {
 	min-height: 18px;
@@ -88,7 +66,7 @@ a.btn,
 }
 
 .header > .item.title .logo {
-	height: 25px;
+	height: 1.5rem;
 }
 
 .header > .item.search input {
@@ -97,17 +75,17 @@ a.btn,
 
 /*=== Body */
 #global {
-	height: calc(100vh - 40px);
+	height: calc(100vh - (calc(1.5rem + 2 * var(--frss-padding-top-bottom))))
 }
 
 /*=== Aside main page (categories) */
 .aside.aside_feed .category .title:not([data-unread="0"])::after,
 .global .box.category .title:not([data-unread="0"])::after {
-	margin: 0.4em 0 0 0;
+	font-size: 0.8rem;
 }
 
 .aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
-	margin: 0.5em 0 0 0;
+	font-size: 0.7rem;
 }
 
 /*=== Day indication */
@@ -123,10 +101,6 @@ a.btn,
 
 /*=== Index menu */
 /*=== Feed articles */
-.flux .item {
-	padding: 0;
-}
-
 .flux .item.thumbnail {
 	padding: 5px;
 	height: 50px;
@@ -169,14 +143,6 @@ a.btn,
 }
 
 /*=== Content of feed articles */
-.content {
-	padding: 10px 10px;
-}
-
-#stream.normal .content > h1.title {
-	display: none;
-}
-
 /*=== Notification and actualize notification */
 /*=== "Load more" part */
 #bigMarkAsRead {
@@ -188,10 +154,6 @@ a.btn,
 }
 
 /*=== Navigation menu (for articles) */
-#nav_entries {
-	line-height: 2.2;
-}
-
 /*=== READER VIEW */
 /*================*/
 /*=== GLOBAL VIEW */
@@ -213,7 +175,7 @@ a.btn,
 	}
 
 	.post {
-		padding-left: 15px;
-		padding-right: 15px;
+		padding-left: 1rem;
+		padding-right: 1rem;
 	}
 }
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index cfa978650..1273cfc55 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -2,6 +2,10 @@
 
 /*=== GENERAL */
 /*============*/
+:root {
+	--frss-padding-top-bottom: 0.125rem;
+}
+
 input, select, textarea {
 	padding: 3px 5px 2px 5px;
 	min-height: 25px;
@@ -41,14 +45,6 @@ a.btn,
 	font-size: 0.9rem;
 }
 
-.horizontal-list .item {
-	line-height: 2.2;
-}
-
-.horizontal-list .item .item-element {
-	padding: 1px 0 0 0;
-}
-
 /*=== Dropdown */
 .item ~ .dropdown-header,
 .item.separator {
@@ -59,27 +55,9 @@ a.btn,
 /*=== Pagination */
 /*=== Boxes */
 /*=== Tree */
-.tree-folder-title {
-	padding: 0 5px;
-	line-height: 2.2;
-	font-size: 0.9rem;
-}
-
-.tree-folder-items > .item {
-	line-height: 2.4;
-}
-
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
-.header {
-	height: 40px;
-}
-
-.header > .item {
-	padding: 0px;
-}
-
 .header .item.configure .btn,
 .header .item.search .btn {
 	min-height: 18px;
@@ -88,7 +66,7 @@ a.btn,
 }
 
 .header > .item.title .logo {
-	height: 25px;
+	height: 1.5rem;
 }
 
 .header > .item.search input {
@@ -97,17 +75,17 @@ a.btn,
 
 /*=== Body */
 #global {
-	height: calc(100vh - 40px);
+	height: calc(100vh - (calc(1.5rem + 2 * var(--frss-padding-top-bottom))))
 }
 
 /*=== Aside main page (categories) */
 .aside.aside_feed .category .title:not([data-unread="0"])::after,
 .global .box.category .title:not([data-unread="0"])::after {
-	margin: 0.4em 0 0 0;
+	font-size: 0.8rem;
 }
 
 .aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
-	margin: 0.5em 0 0 0;
+	font-size: 0.7rem;
 }
 
 /*=== Day indication */
@@ -123,10 +101,6 @@ a.btn,
 
 /*=== Index menu */
 /*=== Feed articles */
-.flux .item {
-	padding: 0;
-}
-
 .flux .item.thumbnail {
 	padding: 5px;
 	height: 50px;
@@ -169,14 +143,6 @@ a.btn,
 }
 
 /*=== Content of feed articles */
-.content {
-	padding: 10px 10px;
-}
-
-#stream.normal .content > h1.title {
-	display: none;
-}
-
 /*=== Notification and actualize notification */
 /*=== "Load more" part */
 #bigMarkAsRead {
@@ -188,10 +154,6 @@ a.btn,
 }
 
 /*=== Navigation menu (for articles) */
-#nav_entries {
-	line-height: 2.2;
-}
-
 /*=== READER VIEW */
 /*================*/
 /*=== GLOBAL VIEW */
@@ -213,7 +175,7 @@ a.btn,
 	}
 
 	.post {
-		padding-right: 15px;
-		padding-left: 15px;
+		padding-right: 1rem;
+		padding-left: 1rem;
 	}
 }
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 4b41e1434..a53055a75 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -567,7 +567,7 @@ a:hover .icon {
 }
 
 .box .box-content .item {
-	padding: 0.5rem 0 0.25rem 0;
+	padding-bottom: 0.25rem;
 	font-size: 0.9rem;
 	line-height: 1.5;
 }
@@ -579,9 +579,9 @@ a:hover .icon {
 
 .tree-folder-title {
 	position: relative;
-	padding: 0 10px;
+	padding-left: 0.75rem;
+	padding-right: 0.75rem;
 	background-color: var(--background-color-light);
-	line-height: 2.5;
 	font-size: 1rem;
 }
 
@@ -615,7 +615,7 @@ a:hover .icon {
 
 .tree-folder-items > .item {
 	padding: 0 10px;
-	line-height: 3.125;
+	line-height: 1.7;
 	font-size: 0.8rem;
 }
 
@@ -643,19 +643,18 @@ a:hover .icon {
 /*===============*/
 /*=== Header */
 .header {
-	height: 4rem;
 	background-color: var(--background-color-grey);
 }
 
 .header > .item {
-	padding: 10px;
+	padding-left: 0.75rem;
+	padding-right: 0.75rem;
 	border-bottom: 1px solid var(--border-color);
 	vertical-align: middle;
 	text-align: center;
 }
 
 .header > .item.title {
-	padding: 10px 0;
 	width: 300px;
 }
 
@@ -781,7 +780,6 @@ a:hover .icon {
 }
 
 #new-article > a {
-	padding: 1em;
 	color: var(--font-color-light);
 	font-weight: bold;
 }
@@ -820,10 +818,8 @@ a:hover .icon {
 
 /*=== Index menu */
 .nav_menu {
-	padding: 0.5rem 0;
 	background-color: var(--background-color-light-shadowed);
 	border-bottom: 1px solid var(--border-color);
-	text-align: center;
 }
 
 /*=== Feed articles */
@@ -882,10 +878,6 @@ a:hover .icon {
 }
 
 /*=== Content of feed articles */
-.content {
-	padding: 20px 10px;
-}
-
 .content h1.title > a {
 	color: var(--font-color);
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 8f0c9095a..377ff9823 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -567,7 +567,7 @@ a:hover .icon {
 }
 
 .box .box-content .item {
-	padding: 0.5rem 0 0.25rem 0;
+	padding-bottom: 0.25rem;
 	font-size: 0.9rem;
 	line-height: 1.5;
 }
@@ -579,9 +579,9 @@ a:hover .icon {
 
 .tree-folder-title {
 	position: relative;
-	padding: 0 10px;
+	padding-right: 0.75rem;
+	padding-left: 0.75rem;
 	background-color: var(--background-color-light);
-	line-height: 2.5;
 	font-size: 1rem;
 }
 
@@ -615,7 +615,7 @@ a:hover .icon {
 
 .tree-folder-items > .item {
 	padding: 0 10px;
-	line-height: 3.125;
+	line-height: 1.7;
 	font-size: 0.8rem;
 }
 
@@ -643,19 +643,18 @@ a:hover .icon {
 /*===============*/
 /*=== Header */
 .header {
-	height: 4rem;
 	background-color: var(--background-color-grey);
 }
 
 .header > .item {
-	padding: 10px;
+	padding-right: 0.75rem;
+	padding-left: 0.75rem;
 	border-bottom: 1px solid var(--border-color);
 	vertical-align: middle;
 	text-align: center;
 }
 
 .header > .item.title {
-	padding: 10px 0;
 	width: 300px;
 }
 
@@ -781,7 +780,6 @@ a:hover .icon {
 }
 
 #new-article > a {
-	padding: 1em;
 	color: var(--font-color-light);
 	font-weight: bold;
 }
@@ -820,10 +818,8 @@ a:hover .icon {
 
 /*=== Index menu */
 .nav_menu {
-	padding: 0.5rem 0;
 	background-color: var(--background-color-light-shadowed);
 	border-bottom: 1px solid var(--border-color);
-	text-align: center;
 }
 
 /*=== Feed articles */
@@ -882,10 +878,6 @@ a:hover .icon {
 }
 
 /*=== Content of feed articles */
-.content {
-	padding: 20px 10px;
-}
-
 .content h1.title > a {
 	color: var(--font-color);
 }
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index e0ef320e1..6367e60f5 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;
 }
@@ -583,7 +584,7 @@ input[type="checkbox"]:focus-visible {
 }
 
 .horizontal-list .item .item-element {
-	padding: 0.5rem 0;
+	padding: var(--frss-padding-top-bottom) 0;
 }
 
 /*=== manage-list */
@@ -826,6 +827,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 +957,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,11 +1000,13 @@ li.drag-hover {
 .header {
 	display: table;
 	width: 100%;
-	height: 85px;
+	height: calc(2rem + 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;
 }
 
@@ -1012,7 +1021,7 @@ li.drag-hover {
 
 .header > .item.title .logo {
 	display: inline-block;
-	height: 32px;
+	height: 2rem;
 	vertical-align: middle;
 }
 
@@ -1029,7 +1038,7 @@ input[type="search"] {
 	background: inherit;
 	display: table;
 	width: 100%;
-	height: calc(100vh - 85px);
+	height: calc(100vh - (calc(2rem + 2 * var(--frss-padding-top-bottom))));
 	table-layout: fixed;
 }
 
@@ -1061,7 +1070,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 +1113,7 @@ input[type="search"] {
 }
 
 #new-article > a {
+	padding: calc(0.25rem + var(--frss-padding-top-bottom)) 1rem;
 	display: block;
 }
 
@@ -1132,7 +1142,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;
 }
 
@@ -1268,6 +1278,7 @@ a.website:hover .favicon {
 .content {
 	min-height: 20rem;
 	margin: auto;
+	padding: 0.75rem;
 	line-height: 1.5;
 	word-wrap: break-word;
 }
@@ -1782,7 +1793,7 @@ input:checked + .slide-container .properties {
 
 .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;
@@ -1850,7 +1861,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 {
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 1755291bd..73dc4f83d 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.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;
 }
@@ -583,7 +584,7 @@ input[type="checkbox"]:focus-visible {
 }
 
 .horizontal-list .item .item-element {
-	padding: 0.5rem 0;
+	padding: var(--frss-padding-top-bottom) 0;
 }
 
 /*=== manage-list */
@@ -826,6 +827,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 +957,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,11 +1000,13 @@ li.drag-hover {
 .header {
 	display: table;
 	width: 100%;
-	height: 85px;
+	height: calc(2rem + 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;
 }
 
@@ -1012,7 +1021,7 @@ li.drag-hover {
 
 .header > .item.title .logo {
 	display: inline-block;
-	height: 32px;
+	height: 2rem;
 	vertical-align: middle;
 }
 
@@ -1029,7 +1038,7 @@ input[type="search"] {
 	background: inherit;
 	display: table;
 	width: 100%;
-	height: calc(100vh - 85px);
+	height: calc(100vh - (calc(2rem + 2 * var(--frss-padding-top-bottom))));
 	table-layout: fixed;
 }
 
@@ -1061,7 +1070,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 +1113,7 @@ input[type="search"] {
 }
 
 #new-article > a {
+	padding: calc(0.25rem + var(--frss-padding-top-bottom)) 1rem;
 	display: block;
 }
 
@@ -1132,7 +1142,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;
 }
 
@@ -1268,6 +1278,7 @@ a.website:hover .favicon {
 .content {
 	min-height: 20rem;
 	margin: auto;
+	padding: 0.75rem;
 	line-height: 1.5;
 	word-wrap: break-word;
 }
@@ -1782,7 +1793,7 @@ input:checked + .slide-container .properties {
 
 .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;
@@ -1850,7 +1861,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 {