From 301d3c81baae71655b003625e7609cf7e97fab5d Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
Date: Sun, 30 Oct 2022 11:02:53 +0100
Subject: Improved: implement CSS variable --frss-padding-flux-items (#4789)

* frss.css

* mobile view: a bit compacter cols
---
 p/themes/base-theme/frss.css     | 17 ++++++++++++++---
 p/themes/base-theme/frss.rtl.css | 17 ++++++++++++++---
 2 files changed, 28 insertions(+), 6 deletions(-)

(limited to 'p')

diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 0ca3b694c..8c1fd1cdb 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -38,6 +38,8 @@
 
 	--frss-loading-image: url("loader.gif");
 
+	--frss-padding-flux-items: 0.75rem;
+
 	line-height: 1.5;
 }
 
@@ -1129,15 +1131,20 @@ input[type="search"] {
 	line-height: 1.5rem;
 }
 
+.flux .flux_header .item.manage .item-element,
+.flux .flux_header .item.website .item-element,
+.flux .flux_header .item.link .item-element {
+	padding-left: var(--frss-padding-flux-items);
+	padding-right: var(--frss-padding-flux-items);
+}
+
 .flux .item.manage,
 .flux .item.link {
-	width: 40px;
-	text-align: center;
+	width: calc(1rem + 2 * var(--frss-padding-flux-items));
 }
 
 .flux .item.website {
 	width: 200px;
-	padding-right: 10px;
 }
 
 .website a:hover .favicon,
@@ -1910,6 +1917,10 @@ input:checked + .slide-container .properties {
 /*===========*/
 
 @media (max-width: 840px) {
+	:root {
+		--frss-padding-flux-items: 0.5rem;
+	}
+
 	.flux_header .item.website span,
 	.item.date, .day .date,
 	.dropdown-menu > .no-mobile,
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 8cccaa5fa..93326f96c 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -38,6 +38,8 @@
 
 	--frss-loading-image: url("loader.gif");
 
+	--frss-padding-flux-items: 0.75rem;
+
 	line-height: 1.5;
 }
 
@@ -1129,15 +1131,20 @@ input[type="search"] {
 	line-height: 1.5rem;
 }
 
+.flux .flux_header .item.manage .item-element,
+.flux .flux_header .item.website .item-element,
+.flux .flux_header .item.link .item-element {
+	padding-right: var(--frss-padding-flux-items);
+	padding-left: var(--frss-padding-flux-items);
+}
+
 .flux .item.manage,
 .flux .item.link {
-	width: 40px;
-	text-align: center;
+	width: calc(1rem + 2 * var(--frss-padding-flux-items));
 }
 
 .flux .item.website {
 	width: 200px;
-	padding-left: 10px;
 }
 
 .website a:hover .favicon,
@@ -1910,6 +1917,10 @@ input:checked + .slide-container .properties {
 /*===========*/
 
 @media (max-width: 840px) {
+	:root {
+		--frss-padding-flux-items: 0.5rem;
+	}
+
 	.flux_header .item.website span,
 	.item.date, .day .date,
 	.dropdown-menu > .no-mobile,
-- 
cgit v1.2.3