commit 7dc6aeb0743090cf12bca64b397c2ced2e359d64
parent aa3c389aa5642d197a6109f02c3d55fee05e5af1
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Thu, 25 Dec 2025 13:26:03 +0100
feat: replace dark mode with simplecss theme
Diffstat:
8 files changed, 80 insertions(+), 143 deletions(-)
diff --git a/Makefile b/Makefile
@@ -31,7 +31,7 @@ minify-css:
-e 's/\s*>\s*/>/g' \
-e 's/\s*<\s*/</g' | \
tee css/desktop.min.css > /dev/null
- cat css/dark.css | \
+ cat css/simple.css | \
sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' | \
tr -d '\t' | \
tr -d '\n' | \
@@ -44,21 +44,7 @@ minify-css:
-e 's/\s*,\s*/,/g' \
-e 's/\s*>\s*/>/g' \
-e 's/\s*<\s*/</g' | \
- tee css/dark.min.css > /dev/null
- cat css/dark_injection.css | \
- sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' | \
- tr -d '\t' | \
- tr -d '\n' | \
- tr -s ' ' ' ' | \
- sed -E \
- -e 's/\s*;\s*/;/g' \
- -e 's/\s*:\s*/:/g' \
- -e 's/\s*\{\s*/{/g' \
- -e 's/\s*\}\s*/}/g' \
- -e 's/\s*,\s*/,/g' \
- -e 's/\s*>\s*/>/g' \
- -e 's/\s*<\s*/</g' | \
- tee css/dark_injection.min.css > /dev/null
+ tee css/simple.min.css > /dev/null
user-css:
printf "/* selfoss-tweaks all-in-one user style sheet */\n" | \
@@ -67,7 +53,7 @@ user-css:
cat css/mobile.min.css | tee --append css/user.css > /dev/null
printf "\n/* Desktop Rules */\n" | tee --append css/user.css > /dev/null
cat css/desktop.min.css | tee --append css/user.css > /dev/null
- printf "\n/* Dark Mode Rules */\n" | tee --append css/user.css > /dev/null
- cat css/dark.min.css | tee --append css/user.css > /dev/null
+ printf "\n/* Simple CSS Rules */\n" | tee --append css/user.css > /dev/null
+ cat css/simple.min.css | tee --append css/user.css > /dev/null
printf "\n" | tee --append css/user.css > /dev/null
diff --git a/css/dark.css b/css/dark.css
@@ -1,108 +0,0 @@
-/* Only if dark theme is requested */
-@media (prefers-color-scheme: dark) {
-
- /* Style body and content */
- html, body, #content > .entry.expanded.selected {
- color: #fff;
- background-color: #000;
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUUFBQMDAzbIvKLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QkPDBUFCnr7XwAAACZJREFUCNdj+PmB4dsHhvcFDPc3MOy/wFD/AISADCAXKAiU+vkBAFyKE1feGt/VAAAAAElFTkSuQmCC') !important;
- }
-
- /* Mobile: white color for title entry of expanded articles */
- #content > .entry.expanded.selected > .entry-title {
- color: #fff;
- }
-
- /* Style opened navigation bar */
- #nav-open {
- padding: 10px;
- border: none;
- border-radius: 2px;
- background-color: #272325;
- cursor: pointer;
- margin-left: 15px;
- margin-right: 15px;
- margin-top: 5px;
- font-size: 0.9em;
- text-align: center;
- }
-
- /* Style Links */
- a,
- .entry-content a
- {
- color: #8af2ea;
- }
-
- /* Style Buttons */
- button {
- color: white;
- }
-
- /* Style entries in lists */
- .entry.unread .entry-title {
- color: #eeeeec;
- }
- .entry-title {
- color: #999999;
- }
- .source-edit-form {
- color: #cececc;
- }
- .source-title {
- color: #eeeeec;
- }
- .source-add {
- color: inherit;
- }
- .entry, .source {
- background: #2e343666;
- border: 1px solid #fff0;
- }
-
- /* Opened Entry */
- .entry.selected {
- background: #0D1211;
- border-color: #444F4E;
- }
-
- /* Style Toolbar */
- .entry-toolbar {
- border-top-color: #444F4E;
- background-color: #0D1211;
- }
-
- /* Toolbar */
- .entry-smartphone-share button,
- .entry-toolbar button,
- .entry-toolbar a
- {
- color: #fff;
- }
-
- /* Action icons */
- .refresh-source,
- #nav-toolbar,
- #nav-refresh,
- #nav-settings,
- #nav-logout
- {
- color: #fff;
- }
-
- /* Load More Button */
- .stream-button,
- .stream-more
- {
- background-color: #212426;
- color: #fff;
- }
-
- /* Misc */
- #fullscreen-entry {
- background: transparent;
- }
- .source-showparams.saved
- color: white !important;
- }
-}
diff --git a/css/dark.min.css b/css/dark.min.css
@@ -1 +0,0 @@
-@media (prefers-color-scheme:dark){html,body,#content>.entry.expanded.selected{color:#fff;background-color:#000;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUUFBQMDAzbIvKLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QkPDBUFCnr7XwAAACZJREFUCNdj+PmB4dsHhvcFDPc3MOy/wFD/AISADCAXKAiU+vkBAFyKE1feGt/VAAAAAElFTkSuQmCC') !important;}#content>.entry.expanded.selected>.entry-title{color:#fff;}#nav-open{padding:10px;border:none;border-radius:2px;background-color:#272325;cursor:pointer;margin-left:15px;margin-right:15px;margin-top:5px;font-size:0.9em;text-align:center;}a,.entry-content a{color:#8af2ea;}button{color:white;}.entry.unread .entry-title{color:#eeeeec;}.entry-title{color:#999999;}.source-edit-form{color:#cececc;}.source-title{color:#eeeeec;}.source-add{color:inherit;}.entry,.source{background:#2e343666;border:1px solid #fff0;}.entry.selected{background:#0D1211;border-color:#444F4E;}.entry-toolbar{border-top-color:#444F4E;background-color:#0D1211;}.entry-smartphone-share button,.entry-toolbar button,.entry-toolbar a{color:#fff;}.refresh-source,#nav-toolbar,#nav-refresh,#nav-settings,#nav-logout{color:#fff;}.stream-button,.stream-more{background-color:#212426;color:#fff;}#fullscreen-entry{background:transparent;}.source-showparams.saved color:white !important;}}
-\ No newline at end of file
diff --git a/css/dark_injection.css b/css/dark_injection.css
@@ -1,11 +0,0 @@
-/* This will be injected within the "public/index.[0-9a-z]+.css" file in order
- * to prevent being "flash-banged", when opening the selfoss webclient in dark
- * mode
- */
-@media (prefers-color-scheme: dark) {
- body{
- background-color: #000;
- color: #fff;
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUUFBQMDAzbIvKLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QkPDBUFCnr7XwAAACZJREFUCNdj+PmB4dsHhvcFDPc3MOy/wFD/AISADCAXKAiU+vkBAFyKE1feGt/VAAAAAElFTkSuQmCC');
- }
-}
diff --git a/css/dark_injection.min.css b/css/dark_injection.min.css
@@ -1 +0,0 @@
-@media (prefers-color-scheme:dark){body{background-color:#000;color:#fff;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUUFBQMDAzbIvKLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QkPDBUFCnr7XwAAACZJREFUCNdj+PmB4dsHhvcFDPc3MOy/wFD/AISADCAXKAiU+vkBAFyKE1feGt/VAAAAAElFTkSuQmCC');}}
-\ No newline at end of file
diff --git a/css/simple.css b/css/simple.css
@@ -0,0 +1,72 @@
+/* Set colour scheme from https://simplecss.org/ */
+:root {
+ --primary: #0d47a1;
+ --primary-contrast: #dcdcdc;
+ --primary-highlight: #1266e2;
+ --primary-highlight-shadow: #1266e250;
+ --text-color: #212121;
+ --background-color: #ffffff;
+}
+@media (prefers-color-scheme: dark) {
+ :root {
+ --primary: #ffb300;
+ --primary-contrast: #2d291f;
+ --primary-highlight: #ffe099;
+ --primary-highlight-shadow: #ffe09950;
+ --text-color: #dcdcdc;
+ --background-color: #212121;
+ }
+}
+
+/* Enforce background colours */
+html, body, #content > .entry.expanded.selected {
+ color: var(--primary) !important;
+ background-color: var(--background-color) !important;
+ background-image: none !important;
+}
+
+/* Style navigation bar */
+#nav-mark, #nav-mark:hover {
+ color: var(--primary-contrast);
+}
+#nav {
+ background-color: var(--background-color);
+}
+#nav-filter li a.active {
+ background: var(--primary);
+ color: var(--primary-contrast) !important;
+}
+#nav-filter > .active > span.offline-count,
+#nav-filter .active span
+{
+ color: var(--primary-contrast) !important;
+}
+.nav-toolbar > button {
+ background: transparent !important;
+}
+
+/* Style Article entries */
+div.entry, .source {
+ background: var(--background-color);
+}
+.entry.selected {
+ border-color: var(--primary);
+}
+
+/* Active article */
+#content > .entry.expanded.selected {
+ color: var(--text-color) !important;
+
+}
+.entry-toolbar {
+ background-color: var(--background-color);
+ border-top: 1p solid var(--text-color);
+}
+
+/* Search bar */
+#search {
+ background-color: var(--primary);
+}
+#search-term:focus {
+ color: var(--text-color);
+}
diff --git a/css/simple.min.css b/css/simple.min.css
@@ -0,0 +1 @@
+:root{--primary:#0d47a1;--primary-contrast:#dcdcdc;--primary-highlight:#1266e2;--primary-highlight-shadow:#1266e250;--text-color:#212121;--background-color:#ffffff;}@media (prefers-color-scheme:dark){:root{--primary:#ffb300;--primary-contrast:#2d291f;--primary-highlight:#ffe099;--primary-highlight-shadow:#ffe09950;--text-color:#dcdcdc;--background-color:#212121;}}html,body,#content>.entry.expanded.selected{color:var(--primary) !important;background-color:var(--background-color) !important;background-image:none !important;}#nav-mark,#nav-mark:hover{color:var(--primary-contrast);}#nav{background-color:var(--background-color);}#nav-filter li a.active{background:var(--primary);color:var(--primary-contrast) !important;}#nav-filter>.active>span.offline-count,#nav-filter .active span{color:var(--primary-contrast) !important;}.nav-toolbar>button{background:transparent !important;}div.entry,.source{background:var(--background-color);}.entry.selected{border-color:var(--primary);}#content>.entry.expanded.selected{color:var(--text-color) !important;}.entry-toolbar{background-color:var(--background-color);border-top:1p solid var(--text-color);}#search{background-color:var(--primary);}#search-term:focus{color:var(--text-color);}
+\ No newline at end of file
diff --git a/css/user.css b/css/user.css
@@ -4,5 +4,5 @@
@media screen and (max-width:641px){#nav-mobile{position:fixed;z-index:1;}#nav,#content{margin-top:50px;}#nav-filter-title,#nav-filter,#nav-tags-title,#nav-sources-title{font-size:1.1em;}#nav-tags,#nav-sources{font-size:1.25em;}#search>input[type="search"],#search-button{width:100%;margin-left:10px;}.entry-title{font-size:1.25em;}.entry-tags,.entry-source,.entry-separator,.entry-author,.entry-datetime,.entry-readtime{font-size:1.1em;overflow-wrap:anywhere;}.entry-content{font-size:1.075em;}.entry:not(.expanded) .entry-toolbar{display:block;border-bottom:2px solid grey;border-top:none;}.entry-loadimages{display:none !important;}.stream-button.mark-these-read{display:none;}}
/* Desktop Rules */
@media screen and (min-width:641px){.entry:not(.expanded) .entry-toolbar{display:block;padding:0px;background:inherit;border:0;margin-top:-2px;opacity:0.0;}.entry:not(.expanded):hover .entry-toolbar{opacity:1.0;}.entry-content{column-count:1;}}
-/* Dark Mode Rules */
-@media (prefers-color-scheme:dark){html,body,#content>.entry.expanded.selected{color:#fff;background-color:#000;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUUFBQMDAzbIvKLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QkPDBUFCnr7XwAAACZJREFUCNdj+PmB4dsHhvcFDPc3MOy/wFD/AISADCAXKAiU+vkBAFyKE1feGt/VAAAAAElFTkSuQmCC') !important;}#content>.entry.expanded.selected>.entry-title{color:#fff;}#nav-open{padding:10px;border:none;border-radius:2px;background-color:#272325;cursor:pointer;margin-left:15px;margin-right:15px;margin-top:5px;font-size:0.9em;text-align:center;}a,.entry-content a{color:#8af2ea;}button{color:white;}.entry.unread .entry-title{color:#eeeeec;}.entry-title{color:#999999;}.source-edit-form{color:#cececc;}.source-title{color:#eeeeec;}.source-add{color:inherit;}.entry,.source{background:#2e343666;border:1px solid #fff0;}.entry.selected{background:#0D1211;border-color:#444F4E;}.entry-toolbar{border-top-color:#444F4E;background-color:#0D1211;}.entry-smartphone-share button,.entry-toolbar button,.entry-toolbar a{color:#fff;}.refresh-source,#nav-toolbar,#nav-refresh,#nav-settings,#nav-logout{color:#fff;}.stream-button,.stream-more{background-color:#212426;color:#fff;}#fullscreen-entry{background:transparent;}.source-showparams.saved color:white !important;}}
+/* Simple CSS Rules */
+:root{--primary:#0d47a1;--primary-contrast:#dcdcdc;--primary-highlight:#1266e2;--primary-highlight-shadow:#1266e250;--text-color:#212121;--background-color:#ffffff;}@media (prefers-color-scheme:dark){:root{--primary:#ffb300;--primary-contrast:#2d291f;--primary-highlight:#ffe099;--primary-highlight-shadow:#ffe09950;--text-color:#dcdcdc;--background-color:#212121;}}html,body,#content>.entry.expanded.selected{color:var(--primary) !important;background-color:var(--background-color) !important;background-image:none !important;}#nav-mark,#nav-mark:hover{color:var(--primary-contrast);}#nav{background-color:var(--background-color);}#nav-filter li a.active{background:var(--primary);color:var(--primary-contrast) !important;}#nav-filter>.active>span.offline-count,#nav-filter .active span{color:var(--primary-contrast) !important;}.nav-toolbar>button{background:transparent !important;}div.entry,.source{background:var(--background-color);}.entry.selected{border-color:var(--primary);}#content>.entry.expanded.selected{color:var(--text-color) !important;}.entry-toolbar{background-color:var(--background-color);border-top:1p solid var(--text-color);}#search{background-color:var(--primary);}#search-term:focus{color:var(--text-color);}
