OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Update dark theme color for dashboard animator to enhance visual consistency

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 10:28:20 -05:00
parent accdfa9d70
commit 5d09382d0d
2 changed files with 53 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
theme/assets/css/main.css
View File

@@ -1993,6 +1993,9 @@ p:last-child { margin-bottom: 0; }
padding: 0; padding: 0;
overflow: visible; overflow: visible;
box-shadow: none; box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
} }
/* ── Dashboard TV frame ────────────────────────── */ /* ── Dashboard TV frame ────────────────────────── */
@@ -2000,14 +2003,16 @@ p:last-child { margin-bottom: 0; }
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%;
margin: 0 auto;
} }
.dashboard-tv__body { .dashboard-tv__body {
width: 100%; width: 100%;
max-width: 520px; max-width: 520px;
background: var(--color-bg-alt); background: #111;
border: 4px solid var(--color-bg-alt); border: 4px solid #111;
border-radius: 6px 6px 4px 4px; border-radius: 6px 6px 4px 4px;
outline: 1px solid var(--color-border); outline: 1px solid #000;
padding: 3px; padding: 3px;
position: relative; position: relative;
box-shadow: 0 14px 48px rgba(0,0,0,0.55); box-shadow: 0 14px 48px rgba(0,0,0,0.55);
@@ -2024,7 +2029,7 @@ p:last-child { margin-bottom: 0; }
.dashboard-tv__screen { .dashboard-tv__screen {
width: 100%; width: 100%;
aspect-ratio: 16/9; aspect-ratio: 16/9;
background: #111; background: var(--color-bg);
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@@ -2045,8 +2050,8 @@ p:last-child { margin-bottom: 0; }
.dashboard-tv__foot { .dashboard-tv__foot {
width: 12px; width: 12px;
height: 8px; height: 8px;
background: var(--color-bg-alt); background: #111;
border: 1px solid var(--color-border); border: 1px solid #000;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
} }
@@ -2145,8 +2150,8 @@ p:last-child { margin-bottom: 0; }
.da-tablet .da-body { .da-tablet .da-body {
width: 128px; width: 128px;
height: 194px; height: 194px;
background: var(--color-bg-alt); background: #111;
border: 2px solid var(--color-border); border: 2px solid #000;
border-radius: 14px; border-radius: 14px;
padding: 10px 8px 14px; padding: 10px 8px 14px;
display: flex; display: flex;
@@ -2162,7 +2167,7 @@ p:last-child { margin-bottom: 0; }
transform: translateX(-50%); transform: translateX(-50%);
width: 6px; width: 6px;
height: 6px; height: 6px;
background: var(--color-border); background: #333;
border-radius: 50%; border-radius: 50%;
} }
.da-tablet .da-body::after { .da-tablet .da-body::after {
@@ -2173,17 +2178,17 @@ p:last-child { margin-bottom: 0; }
transform: translateX(-50%); transform: translateX(-50%);
width: 36px; width: 36px;
height: 3px; height: 3px;
background: var(--color-border); background: #333;
border-radius: 2px; border-radius: 2px;
} }
/* ── Small Monitor ─────────────────────────────── */ /* ── Small Monitor ─────────────────────────────── */
.da-monitor-sm .da-body { .da-monitor-sm .da-body {
width: 236px; width: 236px;
height: 146px; height: 146px;
background: var(--color-bg-alt); background: #111;
border: 5px solid var(--color-bg-alt); border: 5px solid #111;
border-radius: 6px; border-radius: 6px;
outline: 1px solid var(--color-border); outline: 1px solid #000;
padding: 3px; padding: 3px;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
@@ -2206,25 +2211,25 @@ p:last-child { margin-bottom: 0; }
.da-monitor-sm .da-stem { .da-monitor-sm .da-stem {
width: 14px; width: 14px;
height: 20px; height: 20px;
background: var(--color-bg-alt); background: #111;
border-left: 1px solid var(--color-border); border-left: 1px solid #000;
border-right: 1px solid var(--color-border); border-right: 1px solid #000;
} }
.da-monitor-sm .da-base { .da-monitor-sm .da-base {
width: 68px; width: 68px;
height: 5px; height: 5px;
background: var(--color-bg-alt); background: #111;
border: 1px solid var(--color-border); border: 1px solid #000;
border-radius: 3px; border-radius: 3px;
} }
/* ── Large Monitor ─────────────────────────────── */ /* ── Large Monitor ─────────────────────────────── */
.da-monitor-lg .da-body { .da-monitor-lg .da-body {
width: 298px; width: 298px;
height: 177px; height: 177px;
background: var(--color-bg-alt); background: #111;
border: 4px solid var(--color-bg-alt); border: 4px solid #111;
border-radius: 6px; border-radius: 6px;
outline: 1px solid var(--color-border); outline: 1px solid #000;
padding: 3px; padding: 3px;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
@@ -2234,25 +2239,25 @@ p:last-child { margin-bottom: 0; }
.da-monitor-lg .da-stem { .da-monitor-lg .da-stem {
width: 16px; width: 16px;
height: 26px; height: 26px;
background: var(--color-bg-alt); background: #111;
border-left: 1px solid var(--color-border); border-left: 1px solid #000;
border-right: 1px solid var(--color-border); border-right: 1px solid #000;
} }
.da-monitor-lg .da-base { .da-monitor-lg .da-base {
width: 88px; width: 88px;
height: 5px; height: 5px;
background: var(--color-bg-alt); background: #111;
border: 1px solid var(--color-border); border: 1px solid #000;
border-radius: 3px; border-radius: 3px;
} }
/* ── TV ────────────────────────────────────────── */ /* ── TV ────────────────────────────────────────── */
.da-tv .da-body { .da-tv .da-body {
width: 320px; width: 320px;
height: 188px; height: 188px;
background: var(--color-bg-alt); background: #111;
border: 4px solid var(--color-bg-alt); border: 4px solid #111;
border-radius: 6px 6px 4px 4px; border-radius: 6px 6px 4px 4px;
outline: 1px solid var(--color-border); outline: 1px solid #000;
padding: 3px; padding: 3px;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
@@ -2272,8 +2277,8 @@ p:last-child { margin-bottom: 0; }
.da-tv .da-foot { .da-tv .da-foot {
width: 12px; width: 12px;
height: 8px; height: 8px;
background: var(--color-bg-alt); background: #111;
border: 1px solid var(--color-border); border: 1px solid #000;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
} }
/* ── Projector ─────────────────────────────────── */ /* ── Projector ─────────────────────────────────── */
@@ -2281,8 +2286,8 @@ p:last-child { margin-bottom: 0; }
.da-projector .da-proj-body { .da-projector .da-proj-body {
width: 156px; width: 156px;
height: 62px; height: 62px;
background: var(--color-bg-alt); background: #111;
border: 1px solid var(--color-border); border: 1px solid #000;
border-radius: 10px 10px 8px 8px; border-radius: 10px 10px 8px 8px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -2311,8 +2316,8 @@ p:last-child { margin-bottom: 0; }
height: 8px; height: 8px;
background: repeating-linear-gradient( background: repeating-linear-gradient(
90deg, 90deg,
var(--color-border) 0px, #333 0px,
var(--color-border) 2px, #333 2px,
transparent 2px, transparent 2px,
transparent 5px transparent 5px
); );
@@ -2322,7 +2327,7 @@ p:last-child { margin-bottom: 0; }
width: 38px; width: 38px;
height: 38px; height: 38px;
background: #080c12; background: #080c12;
border: 2px solid var(--color-border); border: 2px solid #000;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
@@ -2348,8 +2353,8 @@ p:last-child { margin-bottom: 0; }
.da-projector .da-proj-screen { .da-projector .da-proj-screen {
width: 240px; width: 240px;
height: 72px; height: 72px;
background: var(--color-bg-alt); background: #111;
border: 1px solid var(--color-border); border: 1px solid #000;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
padding: 3px; padding: 3px;
@@ -2363,15 +2368,15 @@ p:last-child { margin-bottom: 0; }
gap: 5px; gap: 5px;
background: #0a0d12; background: #0a0d12;
padding: 5px; padding: 5px;
border: 1px solid var(--color-border); border: 1px solid #000;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 14px 48px rgba(0,0,0,0.60); box-shadow: 0 14px 48px rgba(0,0,0,0.60);
} }
.da-vwall .da-panel { .da-vwall .da-panel {
width: 148px; width: 148px;
height: 90px; height: 90px;
background: var(--color-bg-alt); background: #111;
border: 2px solid var(--color-bg-alt); border: 2px solid #111;
padding: 2px; padding: 2px;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
@@ -2425,10 +2430,10 @@ p:last-child { margin-bottom: 0; }
.ts-tv__body { .ts-tv__body {
width: 320px; width: 320px;
height: 188px; height: 188px;
background: var(--color-bg-alt); background: #111;
border: 4px solid var(--color-bg-alt); border: 4px solid #111;
border-radius: 6px 6px 4px 4px; border-radius: 6px 6px 4px 4px;
outline: 1px solid var(--color-border); outline: 1px solid #000;
padding: 3px; padding: 3px;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
@@ -2491,7 +2496,7 @@ p:last-child { margin-bottom: 0; }
width: 6px; width: 6px;
height: 14px; height: 14px;
background: #1a1a1a; background: #1a1a1a;
border: 1px solid var(--color-border); border: 1px solid #000;
border-left: none; border-left: none;
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
z-index: 1; z-index: 1;
@@ -2515,8 +2520,8 @@ p:last-child { margin-bottom: 0; }
.ts-tv__foot { .ts-tv__foot {
width: 12px; width: 12px;
height: 8px; height: 8px;
background: var(--color-bg-alt); background: #111;
border: 1px solid var(--color-border); border: 1px solid #000;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
} }
/* ── Stick device ── */ /* ── Stick device ── */

2
theme/assets/js/dashboard-animator.js
View File

@@ -13,7 +13,7 @@
var LINE_W = 340; // line graph width in SVG units var LINE_W = 340; // line graph width in SVG units
var PIE_R = 55; // pie chart radius var PIE_R = 55; // pie chart radius
var DARK = { text: '#E0E0E0', muted: '#9E9E9E', border: '#333', center: '#222' }; var DARK = { text: '#E0E0E0', muted: '#9E9E9E', border: '#333', center: '#1A1A1A' };
var LIGHT = { text: '#333333', muted: '#666666', border: '#E0E0E0', center: '#fff' }; var LIGHT = { text: '#333333', muted: '#666666', border: '#E0E0E0', center: '#fff' };
function isDark() { return document.documentElement.getAttribute('data-theme') === 'dark'; } function isDark() { return document.documentElement.getAttribute('data-theme') === 'dark'; }