diff --git a/compile_themes.bat b/compile_themes.bat
new file mode 100644
index 0000000000000000000000000000000000000000..09d80826ae2fd8a199455467fc9176a4a1073882
--- /dev/null
+++ b/compile_themes.bat
@@ -0,0 +1,31 @@
+@echo off
+
+set back=%cd%
+for /d %%i in (%~dp0\themes\*) do (
+ CALL :compileDirectory %%i
+)
+cd %back%
+
+
+PAUSE
+EXIT /B %ERRORLEVEL%
+
+:compileDirectory
+REM ~1 is an absolute path, get name of directory here
+REM https://stackoverflow.com/a/5480568
+set var1=%~1%
+set var2=%var1%
+set i=0
+
+:loopprocess
+for /F "tokens=1* delims=\" %%A in ( "%var1%" ) do (
+ set /A i+=1
+ set var1=%%B
+ goto loopprocess
+)
+
+for /F "tokens=%i% delims=\" %%G in ( "%var2%" ) do set last=%%G
+
+REM compile
+CALL devTools/concatFiles.bat "%%~1" "*.css" bin\"%last%".css
+EXIT /B 0
diff --git a/js/003-data/miscData.js b/js/003-data/miscData.js
index 55af01d10c3cb37bf1e51849f29bd40e59a46930..9cbcf65a6eda38246f4ca99085e2f577094f0484 100644
--- a/js/003-data/miscData.js
+++ b/js/003-data/miscData.js
@@ -2592,134 +2592,6 @@ App.Data.misc = {
whoringAssignments: [Job.WHORE, Job.BROTHEL, Job.PUBLIC, Job.CLUB],
secExCombatPrestige: ["$He is well known for being a great commander.", "$He is famous for being an incredible commander.", "$He is known as a legendary commander all over the world."],
-
- lightColorMap: {
- "rgb(0, 0, 0)": "rgb(255, 255, 255)",
- "rgb(255, 255, 0)": "rgb(255, 255, 0)",
- "rgb(238, 238, 238)": "rgb(17, 17, 17)",
- "rgb(17, 17, 17)": "rgb(238, 238, 238)",
- "linear-gradient(90deg, rgb(17, 17, 17), rgba(17, 17, 17, 0.8) 60%, rgba(17, 17, 17, 0))": "linear-gradient(90deg, rgb(238, 238, 238), rgba(238, 238, 238, 0.8) 60%, rgba(238, 238, 238, 0))",
- "red": "red",
- "rgb(102, 136, 221)": "rgb(102, 136, 221)",
- "rgb(136, 170, 255)": "rgb(136, 170, 255)",
- "rgb(204, 34, 34)": "rgb(204, 34, 34)",
- "rgb(238, 68, 68)": "rgb(238, 68, 68)",
- "rgb(170, 170, 170)": "rgb(170, 170, 170)",
- "rgb(51, 85, 170)": "rgb(118, 145, 214)",
- "rgb(85, 119, 204)": "rgb(85, 119, 204)",
- "rgb(68, 68, 68)": "rgb(187, 187, 187)",
- "rgb(51, 51, 51)": "rgb(204, 204, 204)",
- "rgb(85, 17, 17)": "rgb(85, 17, 17)",
- "rgb(187, 68, 68)": "rgb(187, 68, 68)",
- "rgb(153, 153, 153)": "rgb(153, 153, 153)",
- "rgb(34, 136, 34)": "rgb(34, 136, 34)",
- "rgb(68, 170, 68)": "rgb(68, 170, 68)",
- "rgb(34, 34, 34)": "rgb(221, 221, 221)",
- "rgb(34, 51, 68)": "rgb(34, 51, 68)",
- "rgb(85, 85, 85)": "rgb(170, 170, 170)",
- "rgba(0, 0, 0, 0.25)": "rgba(0, 0, 0, 0.25)",
- "rgb(46, 46, 46)": "rgb(209, 209, 208)",
- "rgb(119, 119, 119)": "rgb(136, 136, 136)",
- "rgb(0, 30, 0)": "rgb(220, 245, 220)",
- "rgb(15, 40, 15)": "rgb(245, 255, 245)",
- "green": "green",
- "aquamarine": "lightseagreen",
- "coral": "coral",
- "cyan": "darkcyan",
- "darkgoldenrod": "darkgoldenrod",
- "darkred": "darkred",
- "darkviolet": "darkviolet",
- "deeppink": "deeppink",
- "deepskyblue": "deepskyblue",
- "gold": "gold",
- "goldenrod": "goldenrod",
- "gray": "gray",
- "hotpink": "hotpink",
- "lawngreen": "darkgreen",
- "lightblue": "lightblue",
- "lightcoral": "lightcoral",
- "lightgreen": "lightgreen",
- "lightpink": "lightpink",
- "lightsalmon": "lightsalmon",
- "lime": "green",
- "limegreen": "limegreen",
- "magenta": "magenta",
- "mediumaquamarine": "mediumaquamarine",
- "mediumorchid": "mediumorchid",
- "mediumseagreen": "mediumseagreen",
- "orange": "orange",
- "orangered": "orangered",
- "orchid": "orchid",
- "pink": "deeppink",
- "seagreen": "seagreen",
- "springgreen": "green",
- "tan": "brown",
- "yellow": "orange",
- "yellowgreen": "yellowgreen"
- },
-
- defaultColorMap: {
- "rgb(0, 0, 0)": "rgb(0, 0, 0)",
- "rgb(255, 255, 0)": "rgb(255, 255, 0)",
- "rgb(238, 238, 238)": "rgb(238, 238, 238)",
- "rgb(17, 17, 17)": "rgb(17, 17, 17)",
- "linear-gradient(90deg, rgba(17,17,17,1), rgba(17,17,17,0.8) 60%, rgba(17,17,17,0))": "linear-gradient(90deg, rgba(17,17,17,1), rgba(17,17,17,0.8) 60%, rgba(17,17,17,0))",
- "red": "red",
- "rgb(102, 136, 221)": "rgb(102, 136, 221)",
- "rgb(136, 170, 255)": "rgb(136, 170, 255)",
- "rgb(204, 34, 34)": "rgb(204, 34, 34)",
- "rgb(238, 68, 68)": "rgb(238, 68, 68)",
- "rgb(170, 170, 170)": "rgb(170, 170, 170)",
- "rgb(51, 85, 170)": "rgb(51, 85, 170)",
- "rgb(85, 119, 204)": "rgb(85, 119, 204)",
- "rgb(68, 68, 68)": "rgb(68, 68, 68)",
- "rgb(51, 51, 51)": "rgb(51, 51, 51)",
- "rgb(85, 17, 17)": "rgb(85, 17, 17)",
- "rgb(187, 68, 68)": "rgb(187, 68, 68)",
- "rgb(153, 153, 153)": "rgb(153, 153, 153)",
- "rgb(34, 136, 34)": "rgb(34, 136, 34)",
- "rgb(68, 170, 68)": "rgb(68, 170, 68)",
- "rgb(34, 34, 34)": "rgb(34, 34, 34)",
- "rgb(34, 51, 68)": "rgb(34, 51, 68)",
- "rgb(85, 85, 85)": "rgb(85, 85, 85)",
- "rgba(0, 0, 0, 0.25)": "rgba(0, 0, 0, 0.25)",
- "rgb(46, 46, 46)": "rgb(46, 46, 46)",
- "rgb(119, 119, 119)": "rgb(119, 119, 119)",
- "green": "green",
- "aquamarine": "aquamarine",
- "coral": "coral",
- "cyan": "cyan",
- "darkgoldenrod": "darkgoldenrod",
- "darkred": "darkred",
- "darkviolet": "darkviolet",
- "deeppink": "deeppink",
- "deepskyblue": "deepskyblue",
- "gold": "gold",
- "goldenrod": "goldenrod",
- "gray": "gray",
- "hotpink": "hotpink",
- "lawngreen": "lawngreen",
- "lightblue": "lightblue",
- "lightcoral": "lightcoral",
- "lightgreen": "lightgreen",
- "lightpink": "lightpink",
- "lightsalmon": "lightsalmon",
- "lime": "lime",
- "limegreen": "limegreen",
- "magenta": "magenta",
- "mediumaquamarine": "mediumaquamarine",
- "mediumorchid": "mediumorchid",
- "mediumseagreen": "mediumseagreen",
- "orange": "orange",
- "orangered": "orangered",
- "orchid": "orchid",
- "pink": "pink",
- "seagreen": "seagreen",
- "springgreen": "springgreen",
- "tan": "tan",
- "yellow": "yellow",
- "yellowgreen": "yellowgreen"
- }
};
/* Nationalities based on $continent value. Note that $continent can be undefined! */
diff --git a/src/arcologyBuilding/manufacturing.js b/src/arcologyBuilding/manufacturing.js
index e9dc8a2cd5b84a566de5ac2e307c7ed88c4ee5c6..e692f0340ab6f74299225144553cab557ba2454e 100644
--- a/src/arcologyBuilding/manufacturing.js
+++ b/src/arcologyBuilding/manufacturing.js
@@ -20,7 +20,7 @@ App.Arcology.Cell.Manufacturing = class extends App.Arcology.Cell.BaseCell {
case "Manufacturing":
return "manufacturing";
case "Dairy":
- return "diary";
+ return "dairy";
case "Farmyard":
return "farmyard";
case "Barracks":
diff --git a/src/gui/css/mainStyleSheet.css b/src/gui/css/mainStyleSheet.css
index 2c05d8d89b2e7cb0270f2b0652f5cbc872b0a6eb..ed503ea60d52cf9f261fb50c1b2927aadc6141a3 100644
--- a/src/gui/css/mainStyleSheet.css
+++ b/src/gui/css/mainStyleSheet.css
@@ -183,7 +183,7 @@ span.zeroButton > a:hover { text-decoration: none; }
.link, .link a { color: var(--link-color) } /* link color */
.aquamarine, .aquamarine a, .skill, .skill a { color: aquamarine }
.coral, .coral a, .fetish.loss, .fetish.loss a { color: coral }
-.cyan, .cyan a { color: cyan } /* used for aphrodisiac & neighbor arcs */
+.cyan, .cyan a, .hotkey { color: cyan } /* used for aphrodisiac & neighbor arcs */
.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 }
@@ -392,10 +392,6 @@ h3 + p {
font-style: normal;
}
-.hotkey {
- color: cyan;
-}
-
.major-warning {
font-weight: bold;
color: red;
diff --git a/src/gui/options/options.tw b/src/gui/options/options.tw
index b4a305781af4eb26b7c34102061c6a0d2b9cd43c..8a642e8a0059a78f6730e7fde9c27ccec89d15d7 100644
--- a/src/gui/options/options.tw
+++ b/src/gui/options/options.tw
@@ -114,8 +114,6 @@
<<set _options = new App.UI.OptionsGroup()>>
- <<run _options.addOption("Color Control").customButton("Flip lighting", () => flipColors(setup.lightColorMap))>>
-
<<run _options.addOption("Main menu leadership controls displayed", "positionMainLinks")
.addValueList([["Above", 1], ["Above and below", 0], ["Below", -1]])>>
@@ -158,6 +156,11 @@
<<includeDOM _options.render()>>
+ <p>
+ UI theme selector. Allows to select a single CSS file to be loaded. <span class="red">The file has to be located in the same directory as the HTML file otherwise it will simply not load at all.</span>
+ <<includeDOM App.UI.Theme.selector()>>
+ </p>
+
<h2>Sidebar</h2>
<<set _options = new App.UI.OptionsGroup()>>
@@ -711,11 +714,6 @@
Experimental means just that: experimental. Options below are likely to be in an <span class="yellow">even more incomplete or broken state than usual.</span> <span class="red">THEY MAY NOT WORK AT ALL.</span> Make sure you back up your save before enabling any of these, and if you are that interested, consider helping to improve them.
</div>
- <p>
- UI theme selector. Allows to select a single CSS file to be loaded. <span class="red">The file has to be located in the same directory as the HTML file otherwise it will simply not load at all.</span>
- <<includeDOM App.UI.Theme.selector()>>
- </p>
-
<<set _options = new App.UI.OptionsGroup()>>
<<if $seePreg !== 0>>
diff --git a/src/gui/theming.js b/src/gui/theming.js
index ceb8e641d968cf3655ab60bc3996d26a0132a6f4..6b0a083578c1187afed7368628d5cb3dd63d769f 100644
--- a/src/gui/theming.js
+++ b/src/gui/theming.js
@@ -5,19 +5,10 @@ App.UI.Theme = (function() {
let currentThemeElement = null;
let devTheme = null;
- // reload theme on page reload
- $(document).on(":storyready", () => {
- if (currentThemeElement === null) {
- const file = SugarCube.storage.get("theme");
- if (file !== null) {
- load(file);
- }
- }
- });
-
return {
selector: selector,
devTheme: reloadDevTheme,
+ init: loadFromStorage,
};
/**
@@ -31,13 +22,13 @@ App.UI.Theme = (function() {
selector.accept = ".css";
div.append(selector);
- div.append(App.UI.DOM.link("Apply", () => {
- unload();
+ div.append(" ", App.UI.DOM.link("Apply", () => {
+ unset();
if (selector.files.length > 0) {
const themeFile = selector.files[0];
- load(themeFile.name);
+ set(themeFile.name);
}
- }), " ", App.UI.DOM.link("Unload", unload));
+ }), " ", App.UI.DOM.link("Unload", unset));
return div;
}
@@ -45,12 +36,12 @@ App.UI.Theme = (function() {
/**
* @param {string} filename or filepath relative to the HTML file.
*/
- function load(filename) {
+ function set(filename) {
SugarCube.storage.set("theme", filename);
currentThemeElement = newTheme(filename);
}
- function unload() {
+ function unset() {
if (currentThemeElement !== null) {
document.head.removeChild(currentThemeElement);
currentThemeElement = null;
@@ -58,6 +49,13 @@ App.UI.Theme = (function() {
}
}
+ function loadFromStorage() {
+ const file = SugarCube.storage.get("theme");
+ if (file !== null) {
+ set(file);
+ }
+ }
+
/**
* Unloads current dev theme and loads new theme if specified.
* @param {string} [filename]
@@ -70,8 +68,6 @@ App.UI.Theme = (function() {
if (filename !== undefined) {
devTheme = newTheme(filename);
- // make it unique to force reloading instead of using the cached version
- devTheme.href += `?id=${Date.now()}`;
}
}
@@ -85,6 +81,8 @@ App.UI.Theme = (function() {
theme.setAttribute("rel", "stylesheet");
theme.setAttribute("type", "text/css");
theme.setAttribute("href", `./${filename}`);
+ // make it unique to force reloading instead of using the cached version
+ devTheme.href += `?id=${Date.now()}`;
document.head.appendChild(theme);
return theme;
}
diff --git a/src/js/colorModeJS.js b/src/js/colorModeJS.js
deleted file mode 100644
index 7a44f54f894ca31e7c47b6c891f0530a815d8267..0000000000000000000000000000000000000000
--- a/src/js/colorModeJS.js
+++ /dev/null
@@ -1,51 +0,0 @@
-globalThis.flipColors = function(lightColorMap) {
- if (!globalThis.savedColorMap) {
- globalThis.savedColorMap = setColors(lightColorMap);
- } else {
- restoreColors(globalThis.savedColorMap);
- globalThis.savedColorMap = null;
- }
-};
-
-globalThis.setColors = function(colorMap) {
- let originalState = [];
- let props = ["color", "backgroundColor", "backgroundImage"];
- let styleSheetArray = Array.from(document.styleSheets);
- styleSheetArray.forEach(styleSheet => {
- try {
- let cssRules = Array.from(styleSheet.cssRules);
- cssRules.forEach(cssRule => {
- if (cssRule.type === 1) {
- props.forEach(propName => {
- let currentValue = cssRule.style[propName];
- if (
- currentValue !== "" &&
- currentValue !== "inherit" &&
- currentValue !== "transparent") {
- let newVal = colorMap[currentValue];
- if (typeof newVal !== "undefined") {
- cssRule.style[propName] = newVal;
- originalState.push({
- element: cssRule,
- propName: propName,
- value: currentValue
- });
- }
- }
- });
- }
- });
- } catch (error) {
- // No need to do anthing, this is expected when there are user style sheets.
- }
- });
- return originalState;
-};
-
-globalThis.restoreColors = function(styleMap) {
- styleMap.forEach(
- item => {
- item.element.style[item.propName] = item.value;
- }
- );
-};
diff --git a/src/js/eventHandlers.js b/src/js/eventHandlers.js
index 9942b621297570890298d38d5fda9ec658ee5e4a..b3dc43b08a840f687bba11ff13a538fe3cacebd3 100644
--- a/src/js/eventHandlers.js
+++ b/src/js/eventHandlers.js
@@ -22,6 +22,7 @@ App.EventHandlers = function() {
}
function storyReady() {
+ App.UI.Theme.init();
App.UI.Hotkeys.init();
}
diff --git a/themes/light/01-variables/colors.css b/themes/light/01-variables/colors.css
index f1ccb1ab9141237f246f8a73b4895d096d2808b0..6abc1f7187a93a0f76141a38b1d5d94819a28ee2 100644
--- a/themes/light/01-variables/colors.css
+++ b/themes/light/01-variables/colors.css
@@ -11,8 +11,68 @@
--button-border-color: #9966cc;
--button-selected-color: #663399;
--button-hover-color: #ccb3e6;
- --button-disabled-color: #80609f;
+ --button-disabled-color: #8c70a9;
- --link-color: #1c377d;
- --link-hover-color: #2a53bb;
+ --link-color: #2A52B7;
+ --link-hover-color: #446DD5;
}
+
+.aquamarine, .aquamarine a, .skill, .skill a { color: #008563 }
+.coral, .coral a, .fetish.loss, .fetish.loss a { color: #8a5c2e }
+.cyan, .cyan a, .hotkey { color: #008585 }
+/*
+.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: deeppink }
+.steelblue, .steelblue a { color: steelblue }
+*/
+.deepskyblue, .deepskyblue a, .intelligent, .intelligent a { color: #00B4F0 }
+/*
+.dodgerblue, .dodgerblue a { color: dodgerblue }
+.blue, .blue a { color: blue }
+*/
+.gold, .gold a, .trust.dec, .trust.dec a, .trust.frightened, .trust.frightened a { color: #cc8d00 }
+/*
+.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: #006600 }
+/*
+.hotpink, .hotpink a, .devotion.inc, .devotion.inc a, .devotion.accept, .devotion.accept a { color: hotpink }
+.lawngreen, .lawngreen a { color: lawngreen }
+.lightblue, .lightblue a { color: lightblue }
+*/
+.lightcoral, .lightcoral a, .fetish.gain, .fetish.gain a { color: #B85C00 }
+.lightgreen, .lightgreen a, .relationship, .relationship a { color: #008550 }
+/*
+.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: lime }
+.limegreen, .limegreen a { color: limegreen }
+.magenta, .magenta a, .devotion.worship, .devotion.worship a { color: magenta }
+*/
+.mediumaquamarine, .mediumaquamarine a, .trust.inc, .trust.inc a, .trust.careful, .trust.careful a { color: #0F6161 }
+/*
+.mediumorchid, .mediumorchid a, .devotion.dec, .devotion.dec a, .devotion.resistant, .devotion.resistant a { color: mediumorchid }
+.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: #B85C00 }
+/*
+.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: #E00070 }
+/*
+.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: red }
+.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: #846E58 }
+/*
+.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: #cc9600 }
+.yellowgreen, .yellowgreen a, .cash.inc, .cash.inc a, .cash, .cash a { color: #677f1f }
diff --git a/themes/light/02-sugarcube/09-ui-bar.css b/themes/light/02-sugarcube/09-ui-bar.css
index 16b3d0ea5bf623e2dcb9eb95751edc33849f8e50..96f35b7ab046e380355fbeb9575a6cfa6b5e7520 100644
--- a/themes/light/02-sugarcube/09-ui-bar.css
+++ b/themes/light/02-sugarcube/09-ui-bar.css
@@ -30,4 +30,5 @@
}
#menu li a:hover {
background-color: var(--sidebar-hover-color);
+ text-decoration: none;
}
diff --git a/themes/light/arcologyBuilding.css b/themes/light/arcologyBuilding.css
index 5cae3dcc760d24fa44cc6abe73ff2cbaf7cc464d..30fc61297c1d7fbf2bba570d3e41a0cea075aa0f 100644
--- a/themes/light/arcologyBuilding.css
+++ b/themes/light/arcologyBuilding.css
@@ -1,6 +1,6 @@
div.building.basement {
- border-top-color: #999;
- background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, #999 20px, #999 30px);
+ border-top-color: #8F8F8F;
+ background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, #8F8F8F 20px, #8F8F8F 30px);
}
div.building div.innerCell {
@@ -16,3 +16,7 @@ div.building div.decorative {
.intro div.building a {
color: var(--text-color);
}
+
+div.building div.row div.dairy {
+ border-color: saddlebrown;
+}
diff --git a/themes/light/cardStyle.css b/themes/light/cardStyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..982c4fb3d188611176faa71616ac782ae670221d
--- /dev/null
+++ b/themes/light/cardStyle.css
@@ -0,0 +1,6 @@
+div.card {
+ /*border: none;*/
+ border-color: #cccccc;
+ background-color: #e6e6e6;
+ box-shadow: 10px 10px 5px #b3b3b3;
+}
diff --git a/themes/light/quicklinks.css b/themes/light/quicklinks.css
index 1aa56a6a2807153a48b1a51437728f2eeabd6620..791eb85b54db43027dbcded354b1a5d165ec3ef0 100644
--- a/themes/light/quicklinks.css
+++ b/themes/light/quicklinks.css
@@ -11,3 +11,8 @@ div.quick-links div.menu-link {
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";
+}