feat: add minecraft dark mode CSS

2026-05-18 03:57:44 -06:00
parent 29d8ed18c0
commit 9d4cb74280
1 changed files with 166 additions and 0 deletions
--- a/style.css
+++ b/style.css
@@ -1840,3 +1840,169 @@ html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a:hover {
    transform: none !important;
  }
 }
+
+/* ─── Minecraft — Stone & Cave / Overworld Day ──────────────── */
+html[data-design-theme="minecraft"] {
+  color-scheme: dark;
+
+  --accent: #5aaa3a;
+  --accent-rgb: 90, 170, 58;
+  --accent-2: #3d8a2a;
+  --accent-3: #2a6e1a;
+  --accent-secondary-rgb: 91, 191, 232;
+
+  --page-gradient: #1a1a1a;
+  --page-texture: none;
+  --title-gradient: linear-gradient(135deg, #5bbfe8 0%, #5aaa3a 100%);
+
+  --control-bg: rgba(62, 62, 62, 0.92);
+  --control-border: #1a1a1a;
+  --control-inset: rgba(255, 255, 255, 0.2);
+  --control-fg: #f0f0f0;
+}
+
+html[data-theme="dark"][data-design-theme="minecraft"] {
+  color-scheme: dark;
+
+  --accent: #5aaa3a;
+  --accent-rgb: 90, 170, 58;
+  --accent-2: #3d8a2a;
+  --accent-3: #2a6e1a;
+  --accent-secondary-rgb: 91, 191, 232;
+
+  --page-gradient: #1a1a1a;
+  --page-texture: none;
+  --title-gradient: linear-gradient(135deg, #5bbfe8 0%, #5aaa3a 100%);
+
+  --control-bg: rgba(62, 62, 62, 0.92);
+  --control-border: #1a1a1a;
+  --control-inset: rgba(255, 255, 255, 0.2);
+  --control-fg: #f0f0f0;
+}
+
+html[data-design-theme="minecraft"] body {
+  font-family: ui-monospace, "Courier New", Courier, monospace;
+  letter-spacing: 0.04em;
+  color: #f0f0f0;
+}
+
+html[data-theme="dark"][data-design-theme="minecraft"] body {
+  color: #f0f0f0;
+}
+
+html[data-design-theme="minecraft"] body::before {
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+  background-size: 16px 16px;
+}
+
+html[data-design-theme="minecraft"] .design-theme-button,
+html[data-design-theme="minecraft"] .theme-toggle {
+  border-radius: 0;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow:
+    inset 2px 2px 0 rgba(255, 255, 255, 0.25),
+    inset -2px -2px 0 rgba(0, 0, 0, 0.5);
+  transition: all 0.1s steps(2, end);
+}
+
+html[data-design-theme="minecraft"] .design-theme-button:hover,
+html[data-design-theme="minecraft"] .theme-toggle:hover {
+  background: rgba(82, 82, 82, 0.95);
+  box-shadow:
+    inset 2px 2px 0 rgba(255, 255, 255, 0.35),
+    inset -2px -2px 0 rgba(0, 0, 0, 0.4);
+  transform: none;
+  border-color: rgba(var(--accent-rgb), 0.7);
+}
+
+html[data-design-theme="minecraft"] .design-theme-button:active,
+html[data-design-theme="minecraft"] .theme-toggle:active {
+  box-shadow:
+    inset 2px 2px 0 rgba(0, 0, 0, 0.4),
+    inset -2px -2px 0 rgba(255, 255, 255, 0.12);
+}
+
+html[data-design-theme="minecraft"] .design-theme-list {
+  border-radius: 0;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: rgba(30, 30, 30, 0.96);
+  border: 2px solid #111111;
+  box-shadow:
+    inset 2px 2px 0 rgba(255, 255, 255, 0.1),
+    inset -2px -2px 0 rgba(0, 0, 0, 0.6);
+}
+
+html[data-design-theme="minecraft"] .design-theme-list [role="option"] {
+  border-radius: 0;
+}
+
+html[data-design-theme="minecraft"]
+  .design-theme-list
+  [role="option"]:hover,
+html[data-design-theme="minecraft"]
+  .design-theme-list
+  [role="option"][aria-selected="true"] {
+  background: rgba(var(--accent-rgb), 0.25);
+  color: var(--control-fg);
+}
+
+html[data-theme="dark"][data-design-theme="minecraft"] .card {
+  background: #3c3c3c;
+  border: 2px solid #111111;
+  border-radius: 0;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow:
+    inset 2px 2px 0 rgba(255, 255, 255, 0.2),
+    inset -2px -2px 0 rgba(0, 0, 0, 0.5);
+  transition: all 0.1s steps(2, end);
+  transform: none;
+}
+
+html[data-theme="dark"][data-design-theme="minecraft"] .card::before {
+  display: none;
+}
+
+html[data-theme="dark"][data-design-theme="minecraft"] .card.pin {
+  background: #454545;
+}
+
+html[data-theme="dark"][data-design-theme="minecraft"] .card h2 {
+  color: #f0f0f0;
+}
+
+html[data-theme="dark"][data-design-theme="minecraft"] .card p {
+  color: #c8c8c8;
+}
+
+html[data-theme="dark"][data-design-theme="minecraft"] .card:hover,
+html[data-theme="dark"][data-design-theme="minecraft"] .card:focus {
+  background: #484848;
+  transform: none;
+  border-color: #5aaa3a;
+  box-shadow:
+    inset 2px 2px 0 rgba(0, 0, 0, 0.35),
+    inset -2px -2px 0 rgba(255, 255, 255, 0.12);
+}
+
+html[data-theme="dark"][data-design-theme="minecraft"] .card:hover h2,
+html[data-theme="dark"][data-design-theme="minecraft"] .card:focus h2 {
+  color: #5aaa3a;
+}
+
+html[data-theme="dark"][data-design-theme="minecraft"] .card:hover p,
+html[data-theme="dark"][data-design-theme="minecraft"] .card:focus p {
+  color: #e0e0e0;
+}
+
+html[data-theme="dark"][data-design-theme="minecraft"] .beian a {
+  color: #c8c8c8;
+}
+
+html[data-theme="dark"][data-design-theme="minecraft"] .beian a:hover {
+  color: #5aaa3a;
+}