fix: use html[data-ui-tier] selector to beat index.css :root specificity; add body tier rules to index.css

This commit is contained in:
James Smith
2026-05-19 22:49:40 +01:00
parent 5b4b99707a
commit 076d17da18
2 changed files with 34 additions and 2 deletions
+2 -2
View File
@@ -269,7 +269,7 @@
/* ============================================
LEAN TIER — flat dark, no GPU effects
============================================ */
[data-ui-tier="lean"] {
html[data-ui-tier="lean"] {
--bg-primary: #111111;
--bg-secondary: #181818;
--bg-tertiary: #1f1f1f;
@@ -304,7 +304,7 @@
/* ============================================
ENHANCED TIER — amber military console
============================================ */
[data-ui-tier="enhanced"] {
html[data-ui-tier="enhanced"] {
--bg-primary: #080600;
--bg-secondary: #0c0a04;
--bg-tertiary: #100d06;
+32
View File
@@ -7642,3 +7642,35 @@ body[data-mode="tscm"] {
margin-right: 8px;
}
}
/* ============================================
LEAN TIER — strip body background and kill animations
============================================ */
[data-ui-tier="lean"] body {
background-image: none;
background-attachment: unset;
background-size: unset;
}
[data-ui-tier="lean"] *,
[data-ui-tier="lean"] *::before,
[data-ui-tier="lean"] *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0ms !important;
scroll-behavior: auto !important;
}
/* ============================================
ENHANCED TIER — 20px amber grid background
============================================ */
[data-ui-tier="enhanced"] body {
background-image:
radial-gradient(1200px 620px at 8% -12%, var(--ambient-top-left), transparent 62%),
radial-gradient(980px 560px at 92% -16%, var(--ambient-top-right), transparent 64%),
radial-gradient(900px 520px at 50% 126%, var(--ambient-bottom), transparent 68%),
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: auto, auto, auto, 20px 20px, 20px 20px;
background-attachment: fixed;
}