mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 14:50:00 -07:00
Revamp UI styling to slate/cyan
This commit is contained in:
Smittix
@@ -21,25 +21,34 @@ html {
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-primary);
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
background-image:
|
||||
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-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TYPOGRAPHY
|
||||
============================================ */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: var(--font-semibold);
|
||||
line-height: var(--leading-tight);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: var(--font-semibold);
|
||||
line-height: var(--leading-tight);
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
h1 { font-size: var(--text-4xl); }
|
||||
h2 { font-size: var(--text-3xl); }
|
||||
@@ -80,18 +89,20 @@ code, kbd, pre, samp {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--bg-tertiary);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
code {
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--bg-tertiary);
|
||||
padding: var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
}
|
||||
pre {
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: none;
|
||||
@@ -122,38 +133,38 @@ button:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
color: var(--text-primary);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
color: var(--text-primary);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-cyan);
|
||||
box-shadow: 0 0 0 3px var(--accent-cyan-dim);
|
||||
}
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-cyan);
|
||||
box-shadow: 0 0 0 2px var(--accent-cyan-dim);
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
padding-right: 28px;
|
||||
}
|
||||
select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239fb0c7' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
@@ -188,18 +199,18 @@ td {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-secondary);
|
||||
text-transform: uppercase;
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
th {
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-tertiary);
|
||||
text-transform: uppercase;
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LISTS
|
||||
|
||||
@@ -9,21 +9,24 @@
|
||||
============================================ */
|
||||
|
||||
/* Base button */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
font-family: var(--font-mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
outline: 2px solid var(--border-focus);
|
||||
@@ -36,38 +39,39 @@
|
||||
}
|
||||
|
||||
/* Button variants */
|
||||
.btn-primary {
|
||||
background: var(--accent-cyan);
|
||||
color: var(--text-inverse);
|
||||
border-color: var(--accent-cyan);
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--accent-cyan);
|
||||
color: var(--text-inverse);
|
||||
border-color: var(--accent-cyan);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--accent-cyan-hover);
|
||||
border-color: var(--accent-cyan-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
.btn-secondary {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn-ghost:hover:not(:disabled) {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-ghost:hover:not(:disabled) {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--accent-red);
|
||||
@@ -118,21 +122,23 @@
|
||||
/* ============================================
|
||||
CARDS / PANELS
|
||||
============================================ */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card {
|
||||
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
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);
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
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);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-header-title {
|
||||
font-size: var(--text-xs);
|
||||
@@ -153,26 +159,58 @@
|
||||
}
|
||||
|
||||
/* Panel variant (used in dashboards) */
|
||||
.panel {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
.panel {
|
||||
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
@supports (clip-path: polygon(0 0)) {
|
||||
.card,
|
||||
.panel {
|
||||
--notch-size: 6px;
|
||||
border-radius: 0;
|
||||
clip-path: polygon(
|
||||
var(--notch-size) 0,
|
||||
calc(100% - var(--notch-size)) 0,
|
||||
100% var(--notch-size),
|
||||
100% calc(100% - var(--notch-size)),
|
||||
calc(100% - var(--notch-size)) 100%,
|
||||
var(--notch-size) 100%,
|
||||
0 calc(100% - var(--notch-size)),
|
||||
0 var(--notch-size)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
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%);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.panel-header {
|
||||
display: flex;
|
||||
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%);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-secondary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-header::before,
|
||||
.panel-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: var(--space-3);
|
||||
width: 36px;
|
||||
height: 2px;
|
||||
background: var(--accent-cyan);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.panel-indicator {
|
||||
width: 8px;
|
||||
@@ -193,17 +231,18 @@
|
||||
/* ============================================
|
||||
BADGES
|
||||
============================================ */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: 2px var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-medium);
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: 2px var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-medium);
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background: var(--accent-cyan-dim);
|
||||
@@ -220,10 +259,53 @@
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background: var(--accent-red-dim);
|
||||
color: var(--accent-red);
|
||||
}
|
||||
.badge-danger {
|
||||
background: var(--accent-red-dim);
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
DATA TAGS
|
||||
============================================ */
|
||||
.data-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: 2px var(--space-2);
|
||||
font-size: 10px;
|
||||
font-family: var(--font-mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
box-shadow: inset 0 0 0 1px var(--border-glow);
|
||||
}
|
||||
|
||||
.data-tag--accent {
|
||||
border-color: var(--accent-cyan);
|
||||
color: var(--accent-cyan);
|
||||
background: var(--accent-cyan-dim);
|
||||
}
|
||||
|
||||
.data-tag--warning {
|
||||
border-color: var(--accent-amber);
|
||||
color: var(--accent-amber);
|
||||
background: var(--accent-amber-dim);
|
||||
}
|
||||
|
||||
.data-tag--success {
|
||||
border-color: var(--accent-green);
|
||||
color: var(--accent-green);
|
||||
background: var(--accent-green-dim);
|
||||
}
|
||||
|
||||
.data-tag--danger {
|
||||
border-color: var(--accent-red);
|
||||
color: var(--accent-red);
|
||||
background: var(--accent-red-dim);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
STATUS INDICATORS
|
||||
@@ -236,16 +318,16 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-dot.online,
|
||||
.status-dot.active {
|
||||
background: var(--status-online);
|
||||
box-shadow: 0 0 6px var(--status-online);
|
||||
}
|
||||
.status-dot.online,
|
||||
.status-dot.active {
|
||||
background: var(--status-online);
|
||||
box-shadow: 0 0 4px var(--status-online);
|
||||
}
|
||||
|
||||
.status-dot.warning {
|
||||
background: var(--status-warning);
|
||||
box-shadow: 0 0 6px var(--status-warning);
|
||||
}
|
||||
.status-dot.warning {
|
||||
background: var(--status-warning);
|
||||
box-shadow: 0 0 4px var(--status-warning);
|
||||
}
|
||||
|
||||
.status-dot.error,
|
||||
.status-dot.offline {
|
||||
@@ -565,44 +647,69 @@
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.section-title {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-secondary);
|
||||
position: relative;
|
||||
padding-left: var(--space-3);
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
background: var(--accent-cyan);
|
||||
transform: translateY(-50%);
|
||||
opacity: 0.7;
|
||||
box-shadow: 0 6px 0 var(--accent-cyan);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
DIVIDERS
|
||||
============================================ */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
margin: var(--space-4) 0;
|
||||
}
|
||||
|
||||
.divider-vertical {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: var(--border-color);
|
||||
margin: 0 var(--space-3);
|
||||
}
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-image: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--border-light),
|
||||
var(--border-light) 6px,
|
||||
transparent 6px,
|
||||
transparent 12px
|
||||
);
|
||||
margin: var(--space-4) 0;
|
||||
}
|
||||
|
||||
.divider-vertical {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-image: repeating-linear-gradient(
|
||||
180deg,
|
||||
var(--border-light),
|
||||
var(--border-light) 6px,
|
||||
transparent 6px,
|
||||
transparent 12px
|
||||
);
|
||||
margin: 0 var(--space-3);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
UX POLISH - ENHANCED INTERACTIONS
|
||||
============================================ */
|
||||
|
||||
/* Button hover lift */
|
||||
.btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.btn:hover:not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--border-light);
|
||||
}
|
||||
|
||||
.btn:active:not(:disabled) {
|
||||
box-shadow: inset 0 0 0 1px var(--border-light);
|
||||
}
|
||||
|
||||
/* Card/Panel hover effects */
|
||||
.card,
|
||||
@@ -635,23 +742,23 @@
|
||||
animation: statusGlow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes statusGlow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 6px var(--status-online);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 12px var(--status-online), 0 0 20px var(--status-online);
|
||||
}
|
||||
}
|
||||
@keyframes statusGlow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 4px var(--status-online);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 8px var(--status-online), 0 0 12px var(--status-online);
|
||||
}
|
||||
}
|
||||
|
||||
/* Badge hover effect */
|
||||
.badge {
|
||||
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.badge:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.badge:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Alert entrance animation */
|
||||
.alert {
|
||||
@@ -680,26 +787,38 @@
|
||||
}
|
||||
|
||||
/* Input focus glow */
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
border-color: var(--accent-cyan);
|
||||
box-shadow: 0 0 0 3px var(--accent-cyan-dim), 0 0 20px rgba(74, 158, 255, 0.1);
|
||||
}
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
border-color: var(--accent-cyan);
|
||||
box-shadow: 0 0 0 2px var(--accent-cyan-dim);
|
||||
}
|
||||
|
||||
/* Nav item active indicator */
|
||||
.mode-nav-btn.active::after,
|
||||
.mobile-nav-btn.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60%;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
.nav-item,
|
||||
.mode-nav-btn,
|
||||
.mobile-nav-btn {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-item.active::after,
|
||||
.mode-nav-btn.active::after,
|
||||
.mobile-nav-btn.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 12%;
|
||||
right: 12%;
|
||||
bottom: 2px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
||||
opacity: 0.75;
|
||||
animation: railPulse 2.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes railPulse {
|
||||
0%, 100% { opacity: 0.45; }
|
||||
50% { opacity: 0.9; }
|
||||
}
|
||||
|
||||
/* Smooth tooltip appearance */
|
||||
[data-tooltip]::after {
|
||||
|
||||
@@ -22,18 +22,31 @@
|
||||
/* ============================================
|
||||
GLOBAL HEADER
|
||||
============================================ */
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--header-height);
|
||||
padding: 0 var(--space-4);
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-sticky);
|
||||
}
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--header-height);
|
||||
padding: 0 var(--space-4);
|
||||
background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-sticky);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.app-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app-header-left {
|
||||
display: flex;
|
||||
@@ -116,16 +129,29 @@
|
||||
/* ============================================
|
||||
GLOBAL NAVIGATION
|
||||
============================================ */
|
||||
.app-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--bg-tertiary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 0 var(--space-4);
|
||||
height: var(--nav-height);
|
||||
gap: var(--space-1);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.app-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 0 var(--space-4);
|
||||
height: var(--nav-height);
|
||||
gap: var(--space-1);
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-nav::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app-nav::-webkit-scrollbar {
|
||||
height: 0;
|
||||
@@ -176,14 +202,14 @@
|
||||
}
|
||||
|
||||
/* Dropdown menu */
|
||||
.nav-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
min-width: 180px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
.nav-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
min-width: 180px;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: var(--space-1);
|
||||
opacity: 0;
|
||||
@@ -273,14 +299,27 @@
|
||||
/* ============================================
|
||||
MOBILE NAVIGATION
|
||||
============================================ */
|
||||
.mobile-nav {
|
||||
display: none;
|
||||
background: var(--bg-tertiary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
overflow-x: auto;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.mobile-nav {
|
||||
display: none;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
overflow-x: auto;
|
||||
gap: var(--space-2);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-nav::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mobile-nav::-webkit-scrollbar {
|
||||
height: 0;
|
||||
@@ -357,13 +396,13 @@
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.app-sidebar {
|
||||
width: var(--sidebar-width);
|
||||
background: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border-color);
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.app-sidebar {
|
||||
width: var(--sidebar-width);
|
||||
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
|
||||
border-right: 1px solid var(--border-color);
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
padding: var(--space-4);
|
||||
@@ -408,15 +447,28 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dashboard-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dashboard-header-logo {
|
||||
font-size: var(--text-lg);
|
||||
@@ -443,10 +495,10 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dashboard-sidebar {
|
||||
width: 320px;
|
||||
background: var(--bg-secondary);
|
||||
border-left: 1px solid var(--border-color);
|
||||
.dashboard-sidebar {
|
||||
width: 320px;
|
||||
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
|
||||
border-left: 1px solid var(--border-color);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -587,14 +639,26 @@
|
||||
============================================ */
|
||||
|
||||
/* Mode Navigation Bar */
|
||||
.mode-nav {
|
||||
display: none;
|
||||
background: #151a23 !important; /* Explicit color - forced to ensure consistency */
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
.mode-nav {
|
||||
display: none;
|
||||
background: var(--bg-secondary) !important; /* Explicit color - forced to ensure consistency */
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.mode-nav::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.mode-nav {
|
||||
|
||||
@@ -10,51 +10,56 @@
|
||||
============================================ */
|
||||
|
||||
/* Backgrounds - layered depth system */
|
||||
--bg-primary: #0a0c10;
|
||||
--bg-secondary: #0f1218;
|
||||
--bg-tertiary: #151a23;
|
||||
--bg-card: #121620;
|
||||
--bg-elevated: #1a202c;
|
||||
--bg-overlay: rgba(0, 0, 0, 0.7);
|
||||
--bg-primary: #0b1118;
|
||||
--bg-secondary: #101823;
|
||||
--bg-tertiary: #151f2b;
|
||||
--bg-card: #121a25;
|
||||
--bg-elevated: #1b2734;
|
||||
--bg-overlay: rgba(8, 13, 20, 0.75);
|
||||
|
||||
/* Background aliases for components */
|
||||
--bg-dark: var(--bg-primary);
|
||||
--bg-panel: var(--bg-secondary);
|
||||
|
||||
/* Accent colors */
|
||||
--accent-cyan: #4a9eff;
|
||||
--accent-cyan-dim: rgba(74, 158, 255, 0.15);
|
||||
--accent-cyan: #4aa3ff;
|
||||
--accent-cyan-dim: rgba(74, 163, 255, 0.16);
|
||||
--accent-cyan-hover: #6bb3ff;
|
||||
--accent-green: #22c55e;
|
||||
--accent-green-dim: rgba(34, 197, 94, 0.15);
|
||||
--accent-red: #ef4444;
|
||||
--accent-red-dim: rgba(239, 68, 68, 0.15);
|
||||
--accent-orange: #f59e0b;
|
||||
--accent-orange-dim: rgba(245, 158, 11, 0.15);
|
||||
--accent-amber: #d4a853;
|
||||
--accent-amber-dim: rgba(212, 168, 83, 0.15);
|
||||
--accent-yellow: #eab308;
|
||||
--accent-purple: #a855f7;
|
||||
--accent-green: #38c180;
|
||||
--accent-green-dim: rgba(56, 193, 128, 0.18);
|
||||
--accent-red: #e25d5d;
|
||||
--accent-red-dim: rgba(226, 93, 93, 0.16);
|
||||
--accent-orange: #d6a85e;
|
||||
--accent-orange-dim: rgba(214, 168, 94, 0.16);
|
||||
--accent-amber: #d6a85e;
|
||||
--accent-amber-dim: rgba(214, 168, 94, 0.18);
|
||||
--accent-yellow: #e1c26b;
|
||||
--accent-purple: #8f7bd6;
|
||||
|
||||
/* Text hierarchy */
|
||||
--text-primary: #e8eaed;
|
||||
--text-secondary: #9ca3af;
|
||||
--text-dim: #4b5563;
|
||||
--text-muted: #374151;
|
||||
--text-inverse: #0a0c10;
|
||||
--text-primary: #d7e0ee;
|
||||
--text-secondary: #9fb0c7;
|
||||
--text-dim: #6f7f94;
|
||||
--text-muted: #445266;
|
||||
--text-inverse: #0b1118;
|
||||
|
||||
/* Borders */
|
||||
--border-color: #1f2937;
|
||||
--border-light: #374151;
|
||||
--border-glow: rgba(74, 158, 255, 0.2);
|
||||
--border-color: #263246;
|
||||
--border-light: #354458;
|
||||
--border-glow: rgba(74, 163, 255, 0.25);
|
||||
--border-focus: var(--accent-cyan);
|
||||
|
||||
/* Status colors */
|
||||
--status-online: #22c55e;
|
||||
--status-warning: #f59e0b;
|
||||
--status-error: #ef4444;
|
||||
--status-offline: #6b7280;
|
||||
--status-info: #3b82f6;
|
||||
--status-online: #38c180;
|
||||
--status-warning: #d6a85e;
|
||||
--status-error: #e25d5d;
|
||||
--status-offline: #6f7f94;
|
||||
--status-info: #4aa3ff;
|
||||
|
||||
/* Subtle grid/pattern */
|
||||
--grid-line: rgba(74, 163, 255, 0.1);
|
||||
--grid-dot: rgba(255, 255, 255, 0.03);
|
||||
--noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");
|
||||
|
||||
/* ============================================
|
||||
SPACING SCALE
|
||||
@@ -73,8 +78,8 @@
|
||||
/* ============================================
|
||||
TYPOGRAPHY
|
||||
============================================ */
|
||||
--font-sans: 'Space Mono', ui-monospace, 'SF Mono', monospace;
|
||||
--font-mono: 'Space Mono', ui-monospace, 'SF Mono', 'Consolas', monospace;
|
||||
--font-sans: 'IBM Plex Mono', 'Space Mono', ui-monospace, 'SF Mono', 'Consolas', 'Menlo', monospace;
|
||||
--font-mono: 'IBM Plex Mono', 'Space Mono', ui-monospace, 'SF Mono', 'Consolas', 'Menlo', monospace;
|
||||
|
||||
/* Font sizes */
|
||||
--text-xs: 10px;
|
||||
@@ -100,19 +105,19 @@
|
||||
/* ============================================
|
||||
BORDERS & RADIUS
|
||||
============================================ */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 12px;
|
||||
--radius-sm: 3px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 6px;
|
||||
--radius-xl: 8px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* ============================================
|
||||
SHADOWS
|
||||
============================================ */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
|
||||
--shadow-glow: 0 0 20px rgba(74, 158, 255, 0.15);
|
||||
--shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.35);
|
||||
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
|
||||
--shadow-lg: 0 12px 18px rgba(0, 0, 0, 0.45);
|
||||
--shadow-glow: 0 0 18px rgba(74, 163, 255, 0.16);
|
||||
|
||||
/* ============================================
|
||||
TRANSITIONS
|
||||
@@ -147,43 +152,47 @@
|
||||
LIGHT THEME OVERRIDES
|
||||
============================================ */
|
||||
[data-theme="light"] {
|
||||
--bg-primary: #f8fafc;
|
||||
--bg-secondary: #f1f5f9;
|
||||
--bg-tertiary: #e2e8f0;
|
||||
--bg-primary: #f4f7fb;
|
||||
--bg-secondary: #e9eef5;
|
||||
--bg-tertiary: #dde5f0;
|
||||
--bg-card: #ffffff;
|
||||
--bg-elevated: #f8fafc;
|
||||
--bg-overlay: rgba(255, 255, 255, 0.9);
|
||||
--bg-elevated: #f1f4f9;
|
||||
--bg-overlay: rgba(244, 247, 251, 0.92);
|
||||
|
||||
/* Background aliases for components */
|
||||
--bg-dark: var(--bg-primary);
|
||||
--bg-panel: var(--bg-secondary);
|
||||
|
||||
--accent-cyan: #2563eb;
|
||||
--accent-cyan-dim: rgba(37, 99, 235, 0.1);
|
||||
--accent-cyan-hover: #1d4ed8;
|
||||
--accent-green: #16a34a;
|
||||
--accent-green-dim: rgba(22, 163, 74, 0.1);
|
||||
--accent-red: #dc2626;
|
||||
--accent-red-dim: rgba(220, 38, 38, 0.1);
|
||||
--accent-orange: #d97706;
|
||||
--accent-orange-dim: rgba(217, 119, 6, 0.1);
|
||||
--accent-amber: #b45309;
|
||||
--accent-amber-dim: rgba(180, 83, 9, 0.1);
|
||||
--accent-cyan: #1f5fa8;
|
||||
--accent-cyan-dim: rgba(31, 95, 168, 0.12);
|
||||
--accent-cyan-hover: #2c73bf;
|
||||
--accent-green: #1f8a57;
|
||||
--accent-green-dim: rgba(31, 138, 87, 0.12);
|
||||
--accent-red: #c74444;
|
||||
--accent-red-dim: rgba(199, 68, 68, 0.12);
|
||||
--accent-orange: #b5863a;
|
||||
--accent-orange-dim: rgba(181, 134, 58, 0.12);
|
||||
--accent-amber: #b5863a;
|
||||
--accent-amber-dim: rgba(181, 134, 58, 0.12);
|
||||
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #475569;
|
||||
--text-dim: #94a3b8;
|
||||
--text-muted: #cbd5e1;
|
||||
--text-inverse: #f8fafc;
|
||||
--text-primary: #122034;
|
||||
--text-secondary: #3a4a5f;
|
||||
--text-dim: #6b7c93;
|
||||
--text-muted: #aab6c8;
|
||||
--text-inverse: #f4f7fb;
|
||||
|
||||
--border-color: #e2e8f0;
|
||||
--border-light: #cbd5e1;
|
||||
--border-glow: rgba(37, 99, 235, 0.15);
|
||||
--border-color: #d1d9e6;
|
||||
--border-light: #c1ccdb;
|
||||
--border-glow: rgba(31, 95, 168, 0.12);
|
||||
|
||||
--grid-line: rgba(31, 95, 168, 0.14);
|
||||
--grid-dot: rgba(12, 18, 24, 0.06);
|
||||
--noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23000000'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
|
||||
--shadow-glow: 0 0 20px rgba(37, 99, 235, 0.1);
|
||||
--shadow-glow: 0 0 18px rgba(31, 95, 168, 0.1);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
||||
Reference in New Issue
Block a user