commit 72fb354d0c83a0e112033fc0f1e217cf3996f41e
parent f4bdedb5e8d2b3d62e0228c6f98ea99305d3ae35
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Mon, 15 Jul 2024 18:40:10 +0200
feat: implement light mode of css theme
Diffstat:
| D | css/darkmode.css | | | 235 | ------------------------------------------------------------------------------- |
| A | css/purpleish.css | | | 244 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
2 files changed, 244 insertions(+), 235 deletions(-)
diff --git a/css/darkmode.css b/css/darkmode.css
@@ -1,235 +0,0 @@
-@media (prefers-color-scheme: dark) {
- :root
- {
- --bg1: #212121;
- --bg2: #2b2b2b;
- --fg1: #dcdcdc;
- --hl1: #7277cf;
- --hl2: #3f426c;
- --invalid: #848484;
- --danger: #ff0000;
- }
-
- /* Whole Content */
- body,
- table,
- tbody,
- tr,
- td
- {
- background-color: var(--bg1) !important;
- color: var(--fg1) !important;
- }
-
- /* Text */
- p,
- label,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6
- {
- color: var(--fg1) !important;
- }
-
- /* Links */
- a:not(.item)
- {
- color: var(--hl1) !important;
- }
- a:not(.item):hover
- {
- color: var(--hl1) !important;
- text-decoration: underline;
- }
-
-
- /* Navigation Bar */
- nav,
- nav > .item,
- nav .menu,
- nav .container .item .menu,
- nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item
- {
- background: var(--bg2) !important;
- color: var(--fg1) !important;
- }
- nav .item:hover,
- nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:hover,
- nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:active,
- nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:hover > p > a,
- nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:active > p > a
- {
- background: var(--hl1) !important;
- color: var(--fg1) !!important;
- }
-
- /* Footer */
- nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item:hover p a,
- nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item p:hover a,
- nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item p a:hover
- {
- color: var(--fg1) !important;
- }
-
- /* Menu Entries */
- .ui.stackable.secondary.menu .item,
- .ui.stackable.secondary.menu .item a
- {
- color: var(--fg1) !important;
- text-decoration: none !important;
- }
- .ui.stackable.secondary.menu .item:hover,
- .ui.stackable.secondary.menu .item a:hover
- {
- color: var(--hl1) !important;
- text-decoration: none !important;
- }
-
- /* Editor Form */
- trix-editor,
- textarea,
- .trix-dialog,
- input,
- table,
- .ui.selection.dropdown
- {
- background-color: var(--bg2) !important;
- color: var(--fg1) !important;
- box-shadow: 0 0 0.1em var(--hl1) !important;
- }
-
- /* Editor Buttons */
- .ui.compact.mini.icon.menu,
- .ui.compact.mini.icon.menu .item,
- .ui.buttons .ui.button
- {
- color: var(--fg1) !important;
- background-color: var(--hl1) !important;
- }
- .ui.compact.mini.icon.menu .trix-active,
- .ui.buttons .ui.button:active,
- .buttons .ui.button:hover
- {
- background-color: var(--hl2) !important;
- }
-
- /* Posts */
- section.ui.feed,
- section.ui.feed .content,
- section.ui.feed .content .label,
- section.ui.feed .content .summary,
- section.ui.feed .content .extra.text,
- section.ui.feed .content .meta
- {
- color: var(--fg1) !important;
- }
-
- /* Post Labels */
- .ui.text.container .ui.feed .detailed.event .content .extra.detail .ui.labels .ui.small.label
- {
- background-color: var(--bg2) !important;
- color: var(--fg1) !important;
- }
-
- /* Post Actions */
- .ui.button,
- section.ui.feed .content .meta .ui.inline.form,
- section.ui.feed .content .meta a,
- .ui.mini.iconic,
- .ui.mini.iconic.button .icon,
- .ui.mini.iconic.button.iconic.dangerous
- {
- color: var(--fg1) !important;
- }
- section.ui.feed .content .meta a.blue,
- .ui.mini.iconic.blue,
- .ui.mini.iconic.button.blue,
- .ui.mini.iconic.button.blue .icon
- {
- color: var(--hl1) !important
- }
- .ui.button:hover,
- section.ui.feed .content .meta .ui.inline.form:hover,
- section.ui.feed .content .meta a:hover,
- .ui.mini.iconic:hover,
- .ui.mini.iconic.button .icon:hover
- .ui.feed > .event > .content .meta a:hover,
- .ui.feed > .event > .content .meta a:hover > button > .icon,
- .ui.feed > .event > .content .meta .ui.inline.form:hover > button,
- .ui.feed > .event > .content .meta .ui.inline.form:hover > button > .icon,
- .ui.button:active,
- section.ui.feed .content .meta .ui.inline.form:active,
- section.ui.feed .content .meta a:active,
- .ui.mini.iconic:active,
- .ui.mini.iconic.button .icon:active,
- .ui.feed > .event > .content .meta a:active,
- .ui.feed > .event > .content .meta a:active > button > .icon,
- .ui.feed > .event > .content .meta .ui.inline.form:active > button,
- .ui.feed > .event > .content .meta .ui.inline.form:active > button > .icon
- {
- color: var(--hl1) !important;
- }
- .ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous,
- .ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous > .icon
- {
- color: var(--danger) !important;
- }
-
- /* Profile Button */
- .ui.button
- {
- color: var(--fg1) !important;
- background-color: var(--hl1) !important;
- }
-
- /* Profile cards */
- .ui.text.container .ui.cards .ui.fluid.actor.card,
- .ui.text.container .ui.cards .ui.fluid.actor.card .extra.content
- {
- color: var(--fg1) !important;
- background-color: var(--bg2) !important;
- }
- .ui.text.container .ui.cards .ui.fluid.actor.card .extra.content a .meta {
- color: var(--hl1) !important;
- }
-
- /* Code Blocks */
- code, pre
- {
- background-color: var(--bg2) !important
- }
-
- /* Paging Buttons */
- .ui.pagination.menu,
- .ui.pagination.menu a
- {
- color: var(--fg1) !important;
- background-color: var(--bg1) !important;
- }
-
- /* Filter */
- .ui.text.container #terms .terms .ui.very.basic.table tbody .term td .ui.filter.term .wildcard
- {
- background-color: var(--bg1) !important;
- color: var(--fg1) !important;
- }
-
- /* There is nothing there yet notification */
- .ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header,
- .ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header .icon
- {
- color: var(--fg1) !important;
- }
-
- /* Danger Buttons */
- .ui.dangerous.button,
- .ui.text.container .ui.cards .ui.fluid.actor.card .extra.content .ui.form.right.floated .ui.button.dangerous
- {
- background-color: var(--danger) !important;
- color: var(--fg1) !important;
- }
-
-}
diff --git a/css/purpleish.css b/css/purpleish.css
@@ -0,0 +1,244 @@
+:root
+{
+ --bg1: #f8f8f2;
+ --bg2: #e3e3d9;
+ --fg1: #1d1e26;
+ --hl1: #7277cf;
+ --hl2: #3f426c;
+ --invalid: #848484;
+ --danger: #ff0000;
+}
+
+
+@media (prefers-color-scheme: dark) {
+ :root
+ {
+ --bg1: #212121;
+ --bg2: #2b2b2b;
+ --fg1: #dcdcdc;
+ }
+}
+
+/* Whole Content */
+body,
+table,
+tbody,
+tr,
+td
+{
+ background-color: var(--bg1) !important;
+ color: var(--fg1) !important;
+}
+
+/* Text */
+p,
+label,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+{
+ color: var(--fg1) !important;
+}
+
+/* Links */
+a:not(.item)
+{
+ color: var(--hl1) !important;
+}
+a:not(.item):hover
+{
+ color: var(--hl1) !important;
+ text-decoration: underline;
+}
+
+
+/* Navigation Bar */
+nav,
+nav > .item,
+nav .menu,
+nav .container .item .menu,
+nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item,
+nav.ui.top.fixed.inverted.navigation.menu .ui.text.container .item
+{
+ background: var(--bg2) !important;
+ color: var(--fg1) !important;
+}
+nav .item:hover,
+nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:hover,
+nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:active,
+nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:hover > p > a,
+nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:active > p > a
+{
+ background: var(--hl1) !important;
+ color: var(--fg1) !!important;
+}
+
+/* Footer */
+nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item:hover p a,
+nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item p:hover a,
+nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item p a:hover
+{
+ color: var(--fg1) !important;
+}
+
+/* Menu Entries */
+.ui.stackable.secondary.menu .item,
+.ui.stackable.secondary.menu .item a
+{
+ color: var(--fg1) !important;
+ text-decoration: none !important;
+}
+.ui.stackable.secondary.menu .item:hover,
+.ui.stackable.secondary.menu .item a:hover
+{
+ color: var(--hl1) !important;
+ text-decoration: none !important;
+}
+
+/* Editor Form */
+trix-editor,
+textarea,
+.trix-dialog,
+input,
+table,
+.ui.selection.dropdown
+{
+ background-color: var(--bg2) !important;
+ color: var(--fg1) !important;
+ box-shadow: 0 0 0.1em var(--hl1) !important;
+}
+
+/* Editor Buttons */
+.ui.compact.mini.icon.menu,
+.ui.compact.mini.icon.menu .item,
+.ui.buttons .ui.button
+{
+ color: var(--fg1) !important;
+ background-color: var(--hl1) !important;
+}
+.ui.compact.mini.icon.menu .trix-active,
+.ui.buttons .ui.button:active,
+.buttons .ui.button:hover
+{
+ background-color: var(--hl2) !important;
+}
+
+/* Posts */
+section.ui.feed,
+section.ui.feed .content,
+section.ui.feed .content .label,
+section.ui.feed .content .summary,
+section.ui.feed .content .extra.text,
+section.ui.feed .content .meta
+{
+ color: var(--fg1) !important;
+}
+
+/* Post Labels */
+.ui.text.container .ui.feed .detailed.event .content .extra.detail .ui.labels .ui.small.label
+{
+ background-color: var(--bg2) !important;
+ color: var(--fg1) !important;
+}
+
+/* Post Actions */
+.ui.button,
+section.ui.feed .content .meta .ui.inline.form,
+section.ui.feed .content .meta a,
+.ui.mini.iconic,
+.ui.mini.iconic.button .icon,
+.ui.mini.iconic.button.iconic.dangerous
+{
+ color: var(--fg1) !important;
+}
+section.ui.feed .content .meta a.blue,
+.ui.mini.iconic.blue,
+.ui.mini.iconic.button.blue,
+.ui.mini.iconic.button.blue .icon
+{
+ color: var(--hl1) !important
+}
+.ui.button:hover,
+section.ui.feed .content .meta .ui.inline.form:hover,
+section.ui.feed .content .meta a:hover,
+.ui.mini.iconic:hover,
+.ui.mini.iconic.button .icon:hover
+.ui.feed > .event > .content .meta a:hover,
+.ui.feed > .event > .content .meta a:hover > button > .icon,
+.ui.feed > .event > .content .meta .ui.inline.form:hover > button,
+.ui.feed > .event > .content .meta .ui.inline.form:hover > button > .icon,
+.ui.button:active,
+section.ui.feed .content .meta .ui.inline.form:active,
+section.ui.feed .content .meta a:active,
+.ui.mini.iconic:active,
+.ui.mini.iconic.button .icon:active,
+.ui.feed > .event > .content .meta a:active,
+.ui.feed > .event > .content .meta a:active > button > .icon,
+.ui.feed > .event > .content .meta .ui.inline.form:active > button,
+.ui.feed > .event > .content .meta .ui.inline.form:active > button > .icon
+{
+ color: var(--hl1) !important;
+}
+.ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous,
+.ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous > .icon
+{
+ color: var(--danger) !important;
+}
+
+/* Profile Button */
+.ui.button
+{
+ color: var(--fg1) !important;
+ background-color: var(--hl1) !important;
+}
+
+/* Profile cards */
+.ui.text.container .ui.cards .ui.fluid.actor.card,
+.ui.text.container .ui.cards .ui.fluid.actor.card .extra.content
+{
+ color: var(--fg1) !important;
+ background-color: var(--bg2) !important;
+}
+.ui.text.container .ui.cards .ui.fluid.actor.card .extra.content a .meta {
+ color: var(--hl1) !important;
+}
+
+/* Code Blocks */
+code, pre
+{
+ background-color: var(--bg2) !important
+}
+
+/* Paging Buttons */
+.ui.pagination.menu,
+.ui.pagination.menu a
+{
+ color: var(--fg1) !important;
+ background-color: var(--bg1) !important;
+}
+
+/* Filter */
+.ui.text.container #terms .terms .ui.very.basic.table tbody .term td .ui.filter.term .wildcard
+{
+ background-color: var(--bg1) !important;
+ color: var(--fg1) !important;
+}
+
+/* There is nothing there yet notification */
+.ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header,
+.ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header .icon
+{
+ color: var(--fg1) !important;
+}
+
+/* Danger Buttons */
+.ui.dangerous.button,
+.ui.text.container .ui.cards .ui.fluid.actor.card .extra.content .ui.form.right.floated .ui.button.dangerous
+{
+ background-color: var(--danger) !important;
+ color: var(--fg1) !important;
+}
+
