93 lines
2.2 KiB
CSS
93 lines
2.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
@source "../src/**/*.{ts,html,ejs}";
|
|
@source "../src/dashboard/**/*.{html,js}";
|
|
|
|
@theme {
|
|
--color-brand: #3b82f6;
|
|
--color-surface: #141418;
|
|
--color-surface-hover: #1a1a1f;
|
|
--color-surface-solid: #141418;
|
|
--color-border-subtle: #232329;
|
|
--color-border-strong: #2e2e36;
|
|
--shadow-glow-sm: 0 0 20px rgba(59, 130, 246, 0.08);
|
|
--shadow-glow-md: 0 0 40px rgba(59, 130, 246, 0.12);
|
|
}
|
|
|
|
/* ─── Card base ─── */
|
|
@layer components {
|
|
.card {
|
|
background: #141418;
|
|
border: 1px solid #232329;
|
|
border-radius: 0.75rem;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
.card:hover {
|
|
border-color: #3b82f6aa;
|
|
box-shadow: 0 0 24px rgba(59, 130, 246, 0.08);
|
|
}
|
|
.card-static {
|
|
background: #141418;
|
|
border: 1px solid #232329;
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
/* ─── Input focus glow ─── */
|
|
.input-base {
|
|
background: #0f0f12;
|
|
border: 1px solid #232329;
|
|
border-radius: 0.5rem;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
.input-base:focus {
|
|
outline: none;
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 0 16px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
/* ─── Buttons ─── */
|
|
.btn-primary {
|
|
background: #2563eb;
|
|
color: white;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.15);
|
|
}
|
|
.btn-primary:hover {
|
|
background: #3b82f6;
|
|
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3), 0 0 20px rgba(59, 130, 246, 0.2);
|
|
}
|
|
.btn-secondary {
|
|
background: #1a1a1f;
|
|
border: 1px solid #2e2e36;
|
|
color: #d1d5db;
|
|
font-weight: 500;
|
|
border-radius: 0.5rem;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-secondary:hover {
|
|
background: #222228;
|
|
border-color: #3a3a44;
|
|
color: white;
|
|
}
|
|
|
|
/* ─── Status dot glow ─── */
|
|
.dot-up {
|
|
background: #22c55e;
|
|
box-shadow: 0 0 10px rgba(34, 197, 94, 0.5), 0 0 4px rgba(34, 197, 94, 0.8);
|
|
}
|
|
.dot-down {
|
|
background: #ef4444;
|
|
box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 0 4px rgba(239, 68, 68, 0.8);
|
|
}
|
|
.dot-unknown {
|
|
background: #4b5563;
|
|
}
|
|
|
|
/* ─── Section dividers ─── */
|
|
.divider {
|
|
border-color: #1e1e24;
|
|
}
|
|
}
|