feat: add lean/enhanced layout overrides; retire data-animations CSS

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
James Smith
2026-05-19 22:16:50 +01:00
parent 0b5d858187
commit 41a720f1f6
2 changed files with 88 additions and 50 deletions
+88 -13
View File
@@ -1041,19 +1041,6 @@
transform: rotate(90deg);
}
/* Effects/animations toggle icon states */
.nav-tool-btn .icon-effects-off {
display: none;
}
[data-animations="off"] .nav-tool-btn .icon-effects-on {
display: none;
}
[data-animations="off"] .nav-tool-btn .icon-effects-off {
display: flex;
}
/* Dashboard Button in Nav */
a.nav-dashboard-btn,
a.nav-dashboard-btn:link,
@@ -1172,3 +1159,91 @@ a.nav-dashboard-btn:hover {
background: rgba(220, 230, 244, 0.9);
box-shadow: var(--shadow-sm);
}
/* ============================================
LEAN TIER — flat nav and header
============================================ */
[data-ui-tier="lean"] .mode-nav {
background: #181818;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
[data-ui-tier="lean"] .mode-nav::after,
[data-ui-tier="lean"] .app-header::after,
[data-ui-tier="lean"] .mobile-nav::after,
[data-ui-tier="lean"] .dashboard-header::after {
display: none;
}
[data-ui-tier="lean"] .app-header {
background: #181818;
box-shadow: none;
}
[data-ui-tier="lean"] .mode-nav-dropdown-menu {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: #202020;
}
/* ============================================
ENHANCED TIER — amber console nav framing
============================================ */
[data-ui-tier="enhanced"] .mode-nav {
background: linear-gradient(180deg, rgba(14, 11, 3, 0.95), rgba(8, 6, 0, 0.92));
}
[data-ui-tier="enhanced"] .mode-nav::after,
[data-ui-tier="enhanced"] .app-header::after,
[data-ui-tier="enhanced"] .dashboard-header::after {
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}
[data-ui-tier="enhanced"] .mode-nav-btn.active {
background: rgba(200, 150, 40, 0.08);
color: var(--accent-cyan);
border-left: 2px solid var(--accent-cyan);
box-shadow: -2px 0 8px rgba(200, 150, 40, 0.15);
padding-left: 12px;
}
[data-ui-tier="enhanced"] .nav-clock .utc-time {
color: var(--accent-cyan);
text-shadow: 0 0 8px rgba(200, 150, 40, 0.3);
font-weight: 700;
}
[data-ui-tier="enhanced"] .mode-nav-btn .nav-label,
[data-ui-tier="enhanced"] .mode-nav-label {
font-family: var(--font-mono);
letter-spacing: 2px;
}
/* Tier toggle button — label visibility */
.nav-tier-btn .tier-label-lean { display: none; }
.nav-tier-btn .tier-label-enhanced { display: none; }
[data-ui-tier="lean"] .nav-tier-btn .tier-label-lean { display: inline; }
[data-ui-tier="enhanced"] .nav-tier-btn .tier-label-enhanced { display: inline; }
/* Tier toggle — icon visibility */
.nav-tier-btn .icon-tier-lean { display: flex; }
.nav-tier-btn .icon-tier-enhanced { display: none; }
[data-ui-tier="lean"] .nav-tier-btn .icon-tier-lean { display: flex; }
[data-ui-tier="lean"] .nav-tier-btn .icon-tier-enhanced { display: none; }
[data-ui-tier="enhanced"] .nav-tier-btn .icon-tier-lean { display: none; }
[data-ui-tier="enhanced"] .nav-tier-btn .icon-tier-enhanced { display: flex; }
/* Enhanced tier toggle button styling */
[data-ui-tier="enhanced"] .nav-tier-btn {
background: rgba(200, 150, 40, 0.10);
border-color: rgba(200, 150, 40, 0.4);
color: #c89628;
box-shadow: 0 0 8px rgba(200, 150, 40, 0.08);
text-shadow: 0 0 6px rgba(200, 150, 40, 0.3);
}
[data-ui-tier="enhanced"] .nav-tier-btn:hover {
background: rgba(200, 150, 40, 0.16);
border-color: rgba(200, 150, 40, 0.6);
}
-37
View File
@@ -7317,39 +7317,6 @@ body::before {
transform: rotate(-90deg);
}
[data-animations="off"] .nav-tool-btn .icon-effects-on {
opacity: 0;
transform: rotate(90deg);
}
[data-animations="off"] .nav-tool-btn .icon-effects-off {
opacity: 1;
transform: rotate(0deg);
}
/* Disable cosmetic animations when toggled off */
[data-animations="off"] .globe-svg,
[data-animations="off"] .rotating-meridians,
[data-animations="off"] .meridian-1,
[data-animations="off"] .meridian-2,
[data-animations="off"] .meridian-3,
[data-animations="off"] .welcome-scanline,
[data-animations="off"] .landing-scanline,
[data-animations="off"] .scanline,
[data-animations="off"] .signal-wave,
[data-animations="off"] .signal-wave-1,
[data-animations="off"] .signal-wave-2,
[data-animations="off"] .signal-wave-3,
[data-animations="off"] .logo-dot,
[data-animations="off"] .welcome-logo {
animation: none !important;
}
[data-animations="off"] body::before,
[data-animations="off"] .visuals-container::after {
display: none;
}
/* ============================================
VISUAL REFRESH OVERRIDES
============================================ */
@@ -7687,10 +7654,6 @@ body[data-mode="tscm"] {
box-shadow: 0 10px 24px rgba(18, 40, 66, 0.08);
}
[data-animations="off"] .mode-content.active {
animation: none !important;
}
@media (max-width: 1023px) {
.run-state-strip {
margin-left: 8px;