From 1c92d55917029d291d00009b674d8552934a69ec Mon Sep 17 00:00:00 2001 From: Alexandre Alapetite Date: Sun, 23 Nov 2025 13:15:10 +0100 Subject: Use native CSS instead of SCSS (#8241) I was tired of having to handle the SCSS themes differently. fix https://github.com/FreshRSS/FreshRSS/issues/7611 Follow-up of https://github.com/FreshRSS/FreshRSS/pull/8200 Convert Ansum and Mapco themes from SCSS to native CSS. The changes are actually quite limited (mostly changing the syntax of the variables and a few other things) Require support for: * https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix SCSS and SAAS tools and references are also removed. Tests welcome. The styles are left as individual CSS files as designed originally in SCSS. I expect proper HTTP caching and HTTP/2 to be sufficient instead of aggregating back to a single CSS, but might be done in another PR if needed. At the same time, fixed the fact that we had various whitespace styles in our JSON files, in particular in those themes, sometimes with 2 spaces, or 4 spaces, or tabs. Use tabs everywhere as defined in editorconfig. I would like to merge this one first to complete https://github.com/FreshRSS/FreshRSS/pull/8230 * RTLCSS stringMap https://github.com/FreshRSS/FreshRSS/pull/8241#discussion_r2553175514 https://github.com/MohammadYounes/rtlcss/issues/108#issuecomment-347033134 --- p/themes/Swage/metadata.json | 12 ++++++------ p/themes/Swage/swage.css | 13 +++++++------ p/themes/Swage/swage.rtl.css | 13 +++++++------ 3 files changed, 20 insertions(+), 18 deletions(-) (limited to 'p/themes/Swage') diff --git a/p/themes/Swage/metadata.json b/p/themes/Swage/metadata.json index f9aded562..cb482155c 100644 --- a/p/themes/Swage/metadata.json +++ b/p/themes/Swage/metadata.json @@ -1,8 +1,8 @@ { - "name": "Swage", - "author": "Patrick Crandol", - "description": "A Fresh take on the interface, inspired by the Flat Theme.", - "version": 1.0, - "files": ["_frss.css", "swage.css"], - "theme-color": "#22303d" + "name": "Swage", + "author": "Patrick Crandol", + "description": "A Fresh take on the interface, inspired by the Flat Theme.", + "version": 1.0, + "files": ["_frss.css", "swage.css"], + "theme-color": "#22303d" } diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css index 3e02bf336..4d03c5955 100644 --- a/p/themes/Swage/swage.css +++ b/p/themes/Swage/swage.css @@ -66,6 +66,7 @@ } /* Compatibility: CSS Color Module Level 4, Relative Color */ + @supports not (color: color(from white hsl h s calc(l - 10%))) { :root { --color-text-light-darker: #988484; @@ -911,15 +912,15 @@ main.post .drop-section li.item.feed a:hover .icon { } #new-article { - background-color: var(--color-background-nav); + width: var(--width-aside); font-size: 1em; + background-color: var(--color-background-nav); text-align: center; position: fixed; bottom: 48px; z-index: 900; left: 0; line-height: 1.5; - width: var(--width-aside); > a { padding: 1rem; @@ -987,11 +988,11 @@ main.post .drop-section li.item.feed a:hover .icon { background-color: var(--color-background-light); &::after { - display: block; - clear: both; margin: 0 auto; + display: block; width: 90%; border-top: 1px solid var(--color-border-light-darker); + clear: both; } .flux_header:hover, @@ -1046,11 +1047,12 @@ main.post .drop-section li.item.feed a:hover .icon { .notification { padding: 10px 0; - background-color: var(--color-background-light-darker); + width: var(--width-aside); height: auto; color: var(--color-text-light-darker); font-size: 1em; border: none; + background-color: var(--color-background-light-darker); text-align: center; font-weight: bold; vertical-align: middle; @@ -1058,7 +1060,6 @@ main.post .drop-section li.item.feed a:hover .icon { bottom: 48px; left: 0; top: auto; - width: var(--width-aside); &.good, &.bad { diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css index 0020335f5..f6b55232a 100644 --- a/p/themes/Swage/swage.rtl.css +++ b/p/themes/Swage/swage.rtl.css @@ -66,6 +66,7 @@ } /* Compatibility: CSS Color Module Level 4, Relative Color */ + @supports not (color: color(from white hsl h s calc(l - 10%))) { :root { --color-text-light-darker: #988484; @@ -911,15 +912,15 @@ main.post .drop-section li.item.feed a:hover .icon { } #new-article { - background-color: var(--color-background-nav); + width: var(--width-aside); font-size: 1em; + background-color: var(--color-background-nav); text-align: center; position: fixed; bottom: 48px; z-index: 900; right: 0; line-height: 1.5; - width: var(--width-aside); > a { padding: 1rem; @@ -987,11 +988,11 @@ main.post .drop-section li.item.feed a:hover .icon { background-color: var(--color-background-light); &::after { - display: block; - clear: both; margin: 0 auto; + display: block; width: 90%; border-top: 1px solid var(--color-border-light-darker); + clear: both; } .flux_header:hover, @@ -1046,11 +1047,12 @@ main.post .drop-section li.item.feed a:hover .icon { .notification { padding: 10px 0; - background-color: var(--color-background-light-darker); + width: var(--width-aside); height: auto; color: var(--color-text-light-darker); font-size: 1em; border: none; + background-color: var(--color-background-light-darker); text-align: center; font-weight: bold; vertical-align: middle; @@ -1058,7 +1060,6 @@ main.post .drop-section li.item.feed a:hover .icon { bottom: 48px; right: 0; top: auto; - width: var(--width-aside); &.good, &.bad { -- cgit v1.2.3