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