matryoshka

commit c38924b61323387f015a751a1fae027fa6ea3e5a
parent 8c81d080c100e4e80502337d42a4f693c718a127
Author: Hunter
Date:   Thu,  4 Jun 2026 12:23:52 -0400

add goblin theme

Diffstat:
M
resources/main.css
 | 
57
+++++++++++++++++++++++++++++++++++++++++++++++++++++++--
M
resources/state.js
 | 
2
+-

2 files changed, 56 insertions(+), 3 deletions(-)
diff --git a/resources/main.css b/resources/main.css
@@ -13,7 +13,6 @@
 	--pollen: #f4a127;
 	--loam: #5a352b;
 	--chlorophyll: #5aa83b;
-	--terracotta: #b15c2e;
 
 	--wheat: #d2c3a3;
 	--earth: #4a3c31;
@@ -38,6 +37,10 @@
 	--muscat: #663399;
 	--cask: #722f37;
 	--bloom: #f8f6ff;
+
+	--lipstick: #da0531;
+	--bakelite: #221917;
+	--mothball: #f1e7c9;
 }
 
 /* custom fonts */
@@ -67,7 +70,7 @@
 	--background: var(--pollen);
 	--text: var(--loam);
 	--highlight: var(--chlorophyll);
-	--accent: var(--terracotta);
+	--accent: var(--loam);
 	--icon: '🌻';
 }
 
@@ -191,6 +194,56 @@
 	scrollbar-color: color-mix(in srgb, var(--muscat) 75%, transparent) color-mix(in srgb, var(--bloom) 75%, transparent);
 }
 
+:root[data-theme="goblin"] {
+	--background: var(--lipstick);
+	--text: var(--bakelite);
+	--highlight: var(--bakelite);
+	--accent: var(--mothball);
+	--icon: '👺';
+	& input[type="text"] {
+		font-family: BasteleurMoonlight, Arial, sans-serif;
+	}
+	.active input[type="text"] {
+		color: var(--mothball);
+		text-shadow: 1px 1px 1px var(--bakelite);
+	}
+	.parent-task {
+		--text: var(--mothball)
+	}
+	.parent-task input[type="text"] {
+		text-shadow: 1px 1px 1px var(--bakelite);
+	}
+	.checkbox-label {
+		border-color: var(--bakelite);
+	}
+	.custom-checkbox:checked + .checkbox-label {
+		background-color: var(--bakelite);
+	}
+	.custom-checkbox:checked + .checkbox-label::before {
+		border-color: var(--lipstick);
+	}
+	.custom-checkbox:indeterminate + .checkbox-label::before {
+		background-color: var(--bakelite);
+	}
+	.active .checkbox-label {
+		border-color: var(--mothball);
+		background-color: var(--bakelite);
+	}
+	.active .custom-checkbox:checked + .checkbox-label {
+		background-color: var(--mothball);
+	}
+	.active .custom-checkbox:checked + .checkbox-label::before {
+		border-color: var(--bakelite);
+	}
+	.active .custom-checkbox:indeterminate + .checkbox-label::before {
+		background-color: var(--mothball);
+	}
+	input[type="text"]::selection {
+		background-color: var(--lipstick);
+		color: var(--mothball);
+	}
+}
+
 /* interface styling */
 @keyframes shake {
 	0% { transform: translateX(0); }
diff --git a/resources/state.js b/resources/state.js
@@ -10,7 +10,7 @@ var state = {
 	saveTimer: null,
 	currentThemeIndex: 0,
 	isF2Pressed: false,
-	themes: ['gak', 'swamp', 'sunflower', 'harvest', 'medieval', 'woodstove', 'sugar', 'vineyard'],
+	themes: ['gak', 'swamp', 'sunflower', 'harvest', 'sugar', 'vineyard', 'woodstove', 'medieval', 'goblin'],
 	isInWheelEvent: false,
 
 	// Multi-select state