pub / selfoss-tweaks

commit dfe3d679d8e82035374494a0cf470c7a38f49d7f
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date:   Mon, 12 Aug 2024 18:33:15 +0200

feat: add desktop and dark CSS rules

Diffstat:
A
Makefile
 | 
40
++++++++++++++++++++++++++++++++++++++++
A
css/dark.css
 | 
93
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A
css/dark.min.css
 | 
2
++
A
css/desktop.css
 | 
21
+++++++++++++++++++++
A
css/desktop.min.css
 | 
2
++
A
css/user.css
 | 
5
+++++
A
user.css
 | 
93
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

7 files changed, 256 insertions(+), 0 deletions(-)
diff --git a/Makefile b/Makefile
@@ -0,0 +1,40 @@
+all:
+	make minify-css
+	make user-css
+
+minify-css:
+	cat css/desktop.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/desktop.min.css > /dev/null
+	cat css/dark.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.min.css > /dev/null
+
+user-css:
+	printf "/* Desktop Rules */\n" | tee 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
+
diff --git a/css/dark.css b/css/dark.css
@@ -0,0 +1,93 @@
+/* Only if dark theme is requested */
+@media (prefers-color-scheme: dark) {
+
+    /* Style body and content */
+    body, #content > .entry.expanded.selected {
+        color: #fff;
+        background-color: #2e3436;
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUUFBQMDAzbIvKLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QkPDBUFCnr7XwAAACZJREFUCNdj+PmB4dsHhvcFDPc3MOy/wFD/AISADCAXKAiU+vkBAFyKE1feGt/VAAAAAElFTkSuQmCC');
+    }
+
+    /* 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 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;
+    }
+
+    /* Misc */
+    #fullscreen-entry {
+        background: transparent;
+    }
+    .source-showparams.saved
+        color: white !important;
+    }
+}
diff --git a/css/dark.min.css b/css/dark.min.css
@@ -0,0 +1 @@
+@media (prefers-color-scheme:dark){body,#content>.entry.expanded.selected{color:#fff;background-color:#2e3436;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUUFBQMDAzbIvKLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QkPDBUFCnr7XwAAACZJREFUCNdj+PmB4dsHhvcFDPc3MOy/wFD/AISADCAXKAiU+vkBAFyKE1feGt/VAAAAAElFTkSuQmCC');}#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;}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;}#fullscreen-entry{background:transparent;}.source-showparams.saved color:white !important;}}
+\ No newline at end of file
diff --git a/css/desktop.css b/css/desktop.css
@@ -0,0 +1,21 @@
+/* Only on big screens (desktop/tablet) */
+
+@media screen and (min-width: 641px) {
+
+    /* makes the toolbar come up on mouse hover */
+    .entry:not(.expanded) .entry-toolbar {
+        display: block;
+        padding: 0px;
+        background: inherit;
+        border: 0;
+        margin-top: -2px;
+        opacity: 0.0;
+    }
+
+    /* On hover, show the toolbar */
+    .entry:not(.expanded):hover .entry-toolbar {
+        opacity: 1.0;
+    }
+
+}
+
diff --git a/css/desktop.min.css b/css/desktop.min.css
@@ -0,0 +1 @@
+@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;}}
+\ No newline at end of file
diff --git a/css/user.css b/css/user.css
@@ -0,0 +1,4 @@
+/* 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;}}
+/* Dark Mode Rules */
+@media (prefers-color-scheme:dark){body,#content>.entry.expanded.selected{color:#fff;background-color:#2e3436;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUUFBQMDAzbIvKLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QkPDBUFCnr7XwAAACZJREFUCNdj+PmB4dsHhvcFDPc3MOy/wFD/AISADCAXKAiU+vkBAFyKE1feGt/VAAAAAElFTkSuQmCC');}#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;}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;}#fullscreen-entry{background:transparent;}.source-showparams.saved color:white !important;}}
+\ No newline at end of file
diff --git a/user.css b/user.css
@@ -0,0 +1,93 @@
+/*
+Show toolbar in listview
+*/
+/*.entry:not(.expanded) .entry-toolbar {
+    display: block;
+    padding: 0px;
+    background: inherit;
+    border: 0;
+    margin-top: -2px;
+}*/
+
+/* makes the toolbar come up on mouse hover -- big screens only */
+@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;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+button {
+    color: white;
+}
+
+#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;
+}
+
+body {
+    color: white;
+    background-color: #2e3436;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUUFBQMDAzbIvKLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QkPDBUFCnr7XwAAACZJREFUCNdj+PmB4dsHhvcFDPc3MOy/wFD/AISADCAXKAiU+vkBAFyKE1feGt/VAAAAAElFTkSuQmCC');
+}
+.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: white;
+}
+
+.refresh-source {
+    color: white;
+}
+
+#fullscreen-entry {
+    background: transparent;
+}
+.source-showparams.saved
+    color: white !important;
+}
+}