Apply global map theme updates and UI improvements

This commit is contained in:
Smittix
2026-02-20 00:32:58 +00:00
parent 963bcdf9fa
commit 1466fc2d30
22 changed files with 1365 additions and 351 deletions

View File

@@ -28,14 +28,16 @@ body {
color: var(--text-primary);
background-color: var(--bg-primary);
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%),
var(--noise-image),
radial-gradient(circle at 15% 0%, var(--grid-dot), transparent 45%),
linear-gradient(180deg, var(--grid-dot), transparent 35%),
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 40px 40px, auto, auto, 48px 48px, 48px 48px;
background-size: auto, auto, auto, 40px 40px, 48px 48px, 48px 48px;
background-attachment: fixed;
min-height: 100vh;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

View File

@@ -123,11 +123,12 @@
CARDS / PANELS
============================================ */
.card {
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
border: 1px solid var(--border-color);
background: var(--surface-panel-gradient);
border: 1px solid rgba(74, 163, 255, 0.24);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(5px);
}
.card-header {
@@ -135,8 +136,8 @@
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-color);
background: var(--bg-secondary);
border-bottom: 1px solid rgba(74, 163, 255, 0.18);
background: linear-gradient(180deg, rgba(25, 38, 55, 0.88) 0%, rgba(17, 27, 40, 0.9) 100%);
position: relative;
}
@@ -160,11 +161,12 @@
/* Panel variant (used in dashboards) */
.panel {
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
border: 1px solid var(--border-color);
background: var(--surface-panel-gradient);
border: 1px solid rgba(74, 163, 255, 0.24);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(5px);
}
@supports (clip-path: polygon(0 0)) {
@@ -190,8 +192,8 @@
align-items: center;
justify-content: space-between;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--border-color);
background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
border-bottom: 1px solid rgba(74, 163, 255, 0.18);
background: linear-gradient(180deg, rgba(25, 38, 55, 0.88) 0%, rgba(17, 27, 40, 0.9) 100%);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
@@ -720,10 +722,23 @@
transform var(--transition-base);
}
.card:hover,
.panel:hover {
border-color: var(--border-light);
}
.card:hover,
.panel:hover {
border-color: var(--border-glow);
box-shadow: var(--shadow-md), var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
}
[data-theme="light"] .card,
[data-theme="light"] .panel {
border-color: rgba(31, 95, 168, 0.24);
}
[data-theme="light"] .card-header,
[data-theme="light"] .panel-header {
border-bottom-color: rgba(31, 95, 168, 0.2);
background: linear-gradient(180deg, rgba(243, 247, 252, 0.96) 0%, rgba(233, 239, 247, 0.95) 100%);
}
/* Stats strip value highlight on hover */
.strip-stat {

View File

@@ -16,6 +16,11 @@
--bg-card: #121a25;
--bg-elevated: #1b2734;
--bg-overlay: rgba(8, 13, 20, 0.75);
--surface-glass: rgba(16, 25, 37, 0.82);
--surface-panel-gradient: linear-gradient(160deg, rgba(20, 32, 47, 0.94) 0%, rgba(11, 18, 27, 0.96) 100%);
--ambient-top-left: rgba(74, 163, 255, 0.14);
--ambient-top-right: rgba(56, 193, 128, 0.09);
--ambient-bottom: rgba(214, 168, 94, 0.06);
/* Background aliases for components */
--bg-dark: var(--bg-primary);
@@ -158,6 +163,11 @@
--bg-card: #ffffff;
--bg-elevated: #f1f4f9;
--bg-overlay: rgba(244, 247, 251, 0.92);
--surface-glass: rgba(255, 255, 255, 0.84);
--surface-panel-gradient: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 251, 0.97) 100%);
--ambient-top-left: rgba(31, 95, 168, 0.1);
--ambient-top-right: rgba(31, 138, 87, 0.06);
--ambient-bottom: rgba(181, 134, 58, 0.05);
/* Background aliases for components */
--bg-dark: var(--bg-primary);