From 6e3f5d1afcbf6630442302a5cd7a90f03389d7fb Mon Sep 17 00:00:00 2001
From: Bonafidemetal <asbestoscake@protonmail.com>
Date: Sun, 17 Oct 2021 22:53:42 +0000
Subject: [PATCH] New Dark theme, "Twilight", retains vanilla feel and text
highlighting but softens the colors considerably for a lower contrast look.
---
themes/Twilight/01-variables/colors.css | 80 +++++++++++++++++++
.../Twilight/02-sugarcube/01-init-screen.css | 4 +
themes/Twilight/02-sugarcube/03-core.css | 44 ++++++++++
themes/Twilight/02-sugarcube/07-ui-dialog.css | 10 +++
themes/Twilight/02-sugarcube/08-ui.css | 10 +++
themes/Twilight/02-sugarcube/09-ui-bar.css | 34 ++++++++
themes/Twilight/arcologyBuilding.css | 38 +++++++++
themes/Twilight/cardStyle.css | 6 ++
themes/Twilight/main.css | 7 ++
themes/Twilight/options.css | 3 +
themes/Twilight/quicklinks.css | 18 +++++
11 files changed, 254 insertions(+)
create mode 100644 themes/Twilight/01-variables/colors.css
create mode 100644 themes/Twilight/02-sugarcube/01-init-screen.css
create mode 100644 themes/Twilight/02-sugarcube/03-core.css
create mode 100644 themes/Twilight/02-sugarcube/07-ui-dialog.css
create mode 100644 themes/Twilight/02-sugarcube/08-ui.css
create mode 100644 themes/Twilight/02-sugarcube/09-ui-bar.css
create mode 100644 themes/Twilight/arcologyBuilding.css
create mode 100644 themes/Twilight/cardStyle.css
create mode 100644 themes/Twilight/main.css
create mode 100644 themes/Twilight/options.css
create mode 100644 themes/Twilight/quicklinks.css
diff --git a/themes/Twilight/01-variables/colors.css b/themes/Twilight/01-variables/colors.css
new file mode 100644
index 00000000000..c7522cdb108
--- /dev/null
+++ b/themes/Twilight/01-variables/colors.css
@@ -0,0 +1,80 @@
+:root {
+ /* base */
+ --background-color: #1c1d24;
+ --sidebar-color: #212534;/*#2b2f42;*/
+ --sidebar-hover-color: #40486e;
+ --text-color: #e1e1e1;
+ --divider-color: #888;
+
+ /* button */
+ --button-color: #2b2640;
+ --button-border-color: #2b2640;
+ --button-selected-color: #524064;
+ --button-hover-color: #524064;
+ --button-disabled-color: #22162e;
+
+ --link-color: #6574cd;
+ --link-hover-color: #6589e7;
+}
+
+.aquamarine, .aquamarine a, .skill, .skill a { color: #43e9e9 }
+.coral, .coral a, .fetish.loss, .fetish.loss a { color: #ff8b39 }
+.cyan, .cyan a, .hotkey { color: #00dfdf }
+/*
+.darkgoldenrod, .darkgoldenrod a, .trust.extremely-terrified, .trust.extremely-terrified a { color: darkgoldenrod }
+.darkred, .darkred a, .defiant.full, .defiant.full a { color: darkred }
+.darkviolet, .darkviolet a, .devotion.hateful, .devotion.hateful a { color: darkviolet }
+*/
+.deeppink, .deeppink a, .devotion.devoted, .devotion.devoted a { color: #ff4dad }
+/*
+.steelblue, .steelblue a { color: steelblue }
+*/
+.deepskyblue, .deepskyblue a, .intelligent, .intelligent a { color: #26bdef }
+/*
+.dodgerblue, .dodgerblue a { color: dodgerblue }
+.blue, .blue a { color: blue }
+*/
+.gold, .gold a, .trust.dec, .trust.dec a, .trust.frightened, .trust.frightened a { color: #ffd90c }
+/*
+.goldenrod, .goldenrod a, .trust.terrified, .trust.terrified a { color: goldenrod }
+.gray, .gray a { color: gray }
+*/
+.green, .green a, .reputation.inc, .reputation.inc a, .improvement, .improvement a, .flaw.break, .flaw.break a, .skill.inc, .skill.inc a, .positive, .positive a { color: #18af18 }
+.hotpink, .hotpink a, .devotion.inc, .devotion.inc a, .devotion.accept, .devotion.accept a { color: #ff86c3 }
+/*
+.lawngreen, .lawngreen a { color: lawngreen }
+.lightblue, .lightblue a { color: lightblue }
+*/
+.lightcoral, .lightcoral a, .fetish.gain, .fetish.gain a { color: #e762e3 }
+.lightgreen, .lightgreen a, .relationship, .relationship a { color: #00cb7a }
+/*
+.lightpink, .lightpink a { color: lightpink }
+.lightsalmon, .lightsalmon a, .fetish.inc, .fetish.inc a { color: lightsalmon }
+*/
+.lime, .lime a, .change.positive, .change.positive a, .virginity.loss, .virginity.loss a, .pregnant, .pregnant a { color: #40ff40 }
+.limegreen, .limegreen a { color: limegreen }
+.magenta, .magenta a, .devotion.worship, .devotion.worship a { color: #ff36ff }
+.mediumaquamarine, .mediumaquamarine a, .trust.inc, .trust.inc a, .trust.careful, .trust.careful a { color: #52d3d3 }
+
+.mediumorchid, .mediumorchid a, .devotion.dec, .devotion.dec a, .devotion.resistant, .devotion.resistant a { color: #bc60d3 }
+/*
+.mediumseagreen, .mediumseagreen a, .trust.trusting, .trust.trusting a { color: mediumseagreen }
+*/
+.orange, .orange a, .stupid, .stupid a, .change.negative, .change.negative a, .defiant.careful, .defiant.careful a, .intro.question { color: #ffbb3e }
+/*
+.orangered, .orangered a, .defiant.inc, .defiant.inc a, .defiant.bold, .defiant.bold, .education.neg a { color: orangered }
+.orchid, .orchid a { color: orchid }
+*/
+.pink, .pink a, .slave.name.simple, .slave-name { color: #ff9fc3 }
+.red, .red a, .health.dec, .health.dec a, .cash.dec, .cash.dec a, .flaw.gain, .flaw.gain a, .error, .error a, .elites.loss, .elites.loss a, .reputation.dec, .reputation.dec a, .warning, .warning a { color: #ff3131 }
+/*.seagreen, .seagreen a, .trust.prof-trusting, .trust.prof-trusting a { color: seagreen }
+.springgreen, .springgreen a, .skill.player, .skill.player a { color: springgreen }
+*/
+.tan, .tan a { color: #d2b48c }
+/*
+.chocolate, .chocolate a { color: chocolate }
+.saddlebrown, .saddlebrown a { color: saddlebrown }
+.teal, .teal a { color: teal }
+*/
+.yellow, .yellow a, .noteworthy, .noteworthy a, .devotion.ambivalent, .devotion.ambivalent a, .trust.fearful, .trust.fearful a { color: #f7f754 }
+.yellowgreen, .yellowgreen a, .cash.inc, .cash.inc a, .cash, .cash a { color: #9acd32 }
diff --git a/themes/Twilight/02-sugarcube/01-init-screen.css b/themes/Twilight/02-sugarcube/01-init-screen.css
new file mode 100644
index 00000000000..13d22e295f5
--- /dev/null
+++ b/themes/Twilight/02-sugarcube/01-init-screen.css
@@ -0,0 +1,4 @@
+#init-screen {
+ color: var(--text-color);
+ background-color: var(--background-color);
+}
diff --git a/themes/Twilight/02-sugarcube/03-core.css b/themes/Twilight/02-sugarcube/03-core.css
new file mode 100644
index 00000000000..77a76765827
--- /dev/null
+++ b/themes/Twilight/02-sugarcube/03-core.css
@@ -0,0 +1,44 @@
+body {
+ color: var(--text-color);
+ background-color: var(--background-color);
+}
+
+a {
+ color: var(--link-color);
+}
+
+a:hover {
+ color: var(--link-hover-color);
+}
+
+button {
+ color: var(--text-color);
+ background-color: var(--button-color);
+ border: 1px solid var(--button-border-color);
+}
+
+button:hover {
+ background-color: var(--button-hover-color);
+ border-color: var(--button-border-color);
+}
+
+button:disabled {
+ background-color: var(--button-disabled-color);
+ border: 1px solid var(--button-border-color);
+}
+
+input, select, textarea {
+ color: #e1e1e1;
+ background-color: transparent;
+ border: 1px solid var(--button-border-color);
+}
+
+input:not(:disabled):focus, select:not(:disabled):focus, textarea:not(:disabled):focus,
+input:not(:disabled):hover, select:not(:disabled):hover, textarea:not(:disabled):hover {
+ background-color: #2b2640;
+ border-color: var(--button-selected-color);
+}
+
+hr {
+ border-top: 1px solid var(--divider-color);
+}
diff --git a/themes/Twilight/02-sugarcube/07-ui-dialog.css b/themes/Twilight/02-sugarcube/07-ui-dialog.css
new file mode 100644
index 00000000000..213f9aa2589
--- /dev/null
+++ b/themes/Twilight/02-sugarcube/07-ui-dialog.css
@@ -0,0 +1,10 @@
+#ui-dialog-titlebar {
+ background-color: var(--sidebar-color);
+}
+#ui-dialog-body {
+ background-color: var(--background-color);
+ border: 1px solid var(--divider-color);
+}
+#ui-dialog-body hr {
+ background-color: var(--divider-color);
+}
diff --git a/themes/Twilight/02-sugarcube/08-ui.css b/themes/Twilight/02-sugarcube/08-ui.css
new file mode 100644
index 00000000000..3d4f9732b21
--- /dev/null
+++ b/themes/Twilight/02-sugarcube/08-ui.css
@@ -0,0 +1,10 @@
+/* Saves dialog styling. */
+#ui-dialog-body.saves > *:not(:first-child) {
+ border-top-color: var(--divider-color);
+}
+#ui-dialog-body.saves tr:not(:first-child) {
+ border-top-color: var(--divider-color);
+}
+#ui-dialog-body.saves .empty {
+ color: var(--text-color);
+}
diff --git a/themes/Twilight/02-sugarcube/09-ui-bar.css b/themes/Twilight/02-sugarcube/09-ui-bar.css
new file mode 100644
index 00000000000..96f35b7ab04
--- /dev/null
+++ b/themes/Twilight/02-sugarcube/09-ui-bar.css
@@ -0,0 +1,34 @@
+#ui-bar {
+ background-color: var(--sidebar-color);
+ border-right: 1px solid var(--divider-color);
+}
+#ui-bar a:hover {
+ text-decoration: underline;
+}
+#ui-bar hr {
+ border-color: var(--divider-color);
+}
+#ui-bar-toggle{
+ color: #444;
+ border: 1px solid var(--divider-color);
+ border-right: none;
+}
+#ui-bar-toggle:hover {
+ background-color: var(--sidebar-hover-color);
+ border-color: var(--divider-color);
+}
+#menu ul {
+ border: 1px solid var(--divider-color);
+}
+#menu li:not(:first-child) {
+ border-top: 1px solid var(--divider-color);
+}
+#menu li a {
+ color: var(--text-color);
+ background-color: transparent;
+ border: none;
+}
+#menu li a:hover {
+ background-color: var(--sidebar-hover-color);
+ text-decoration: none;
+}
diff --git a/themes/Twilight/arcologyBuilding.css b/themes/Twilight/arcologyBuilding.css
new file mode 100644
index 00000000000..9f64ec3ca84
--- /dev/null
+++ b/themes/Twilight/arcologyBuilding.css
@@ -0,0 +1,38 @@
+div.building.basement {
+ border-top-color: #8F8F8F;
+ background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, #8F8F8F 20px, #8F8F8F 30px);
+}
+
+div.building .row .penthouse{
+ border-color: #5daad7;
+}
+
+div.building .row .apartments{
+ border-color: #3eaf3e;
+}
+
+div.building .row .private{
+ border-color: #cb1a1a;
+}
+
+div.building .row .pit{
+ border-color: #d94c18;
+}
+
+div.building div.innerCell {
+ background-color: var(--background-color);
+}
+
+div.building div.decorative {
+ outline-color: black;
+}
+
+/* introduction special formatting */
+/* makes all links unusable */
+.intro div.building a {
+ color: var(--text-color);
+}
+
+div.building div.row div.dairy {
+ border-color: saddlebrown;
+}
diff --git a/themes/Twilight/cardStyle.css b/themes/Twilight/cardStyle.css
new file mode 100644
index 00000000000..9fd029fcaf0
--- /dev/null
+++ b/themes/Twilight/cardStyle.css
@@ -0,0 +1,6 @@
+div.card {
+ /*border: none;*/
+ border-color: #384678;
+ background-color: #212534;
+ box-shadow: 10px 10px 5px #282d40;
+}
diff --git a/themes/Twilight/main.css b/themes/Twilight/main.css
new file mode 100644
index 00000000000..127f3bfde28
--- /dev/null
+++ b/themes/Twilight/main.css
@@ -0,0 +1,7 @@
+.lrgRender > div.mask, .lrgVector > div.mask {
+ background: linear-gradient(90deg, rgba(28, 29, 36, 1), rgba(28, 29, 36, 0.8) 60%, rgba(28, 29, 36, 0));
+}
+
+.clear-formatting {
+ color: var(--text-color);
+}
diff --git a/themes/Twilight/options.css b/themes/Twilight/options.css
new file mode 100644
index 00000000000..7d213df171c
--- /dev/null
+++ b/themes/Twilight/options.css
@@ -0,0 +1,3 @@
+div.options-group .comment {
+ color: #575757;
+}
diff --git a/themes/Twilight/quicklinks.css b/themes/Twilight/quicklinks.css
new file mode 100644
index 00000000000..5f43b8e1383
--- /dev/null
+++ b/themes/Twilight/quicklinks.css
@@ -0,0 +1,18 @@
+div.quick-links div.toggle {
+ background-color: var(--button-color);
+}
+
+div.quick-links div.toggle:hover {
+ background-color: var(--button-hover-color);
+}
+
+div.quick-links div.menu-link {
+ background-color: var(--button-disabled-color);
+ border-color: var(--button-border-color);
+ box-shadow: var(--button-border-color);
+}
+
+div.quick-links div.notification:not(.category)::after,
+div.quick-links div.category.notification.collapsed > div.toggle::after {
+ content: "\e80b";
+}
--
GitLab