/* ═══════════════════════════════════════════════════════════════════ DrapyCore — Design System v2 Theme: light / dark via [data-theme] attribute on ═══════════════════════════════════════════════════════════════════ */ /* ── 1. Variables ─────────────────────────────────────────────────── */ :root { --font: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* Border radius */ --r-sm: 0.35rem; --r: 0.6rem; --r-lg: 0.875rem; --r-xl: 1.25rem; /* Transitions */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 160ms; --dur2: 280ms; /* ── Light Palette ── */ --bg: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc; --border: #e2e8f0; --border-2: #f1f5f9; --text: #0f172a; --muted: #64748b; --subtle: #94a3b8; /* Brand */ --primary: #6366f1; --primary-d: #4f46e5; --primary-bg: rgba(99, 102, 241, 0.1); --primary-ring: rgba(99, 102, 241, 0.35); --violet: #8b5cf6; --cyan: #06b6d4; --emerald: #10b981; --amber: #f59e0b; --rose: #f43f5e; --blue: #3b82f6; /* Semantic aliases */ --success: var(--emerald); --warning: var(--amber); --danger: var(--rose); --info: var(--cyan); /* Topbar */ --tb-bg: #ffffff; --tb-bdr: #e2e8f0; --tb-h: 3.5rem; /* Cards */ --card-bg: #ffffff; --card-bdr: #e2e8f0; --card-shd: 0 1px 2px rgba(0,0,0,0.04), 0 3px 10px rgba(0,0,0,0.06); --card-shd-h: 0 4px 16px rgba(0,0,0,0.10), 0 8px 28px rgba(0,0,0,0.07); /* Tables */ --th-bg: #f8fafc; --tr-hover: rgba(99, 102, 241, 0.045); /* Inputs */ --inp-bg: #ffffff; --inp-bdr: #d1d5db; /* Badges (custom) */ --badge-r: 0.3rem; } /* ── 2. Dark mode overrides ───────────────────────────────────────── */ [data-theme="dark"] { --bg: #0d1117; --surface: #161b22; --surface-2: #1c2333; --border: #21262d; --border-2: #1c2333; --text: #cdd9e5; --muted: #768390; --subtle: #444c56; --primary-bg: rgba(99, 102, 241, 0.18); --primary-ring: rgba(99, 102, 241, 0.5); --tb-bg: #161b22; --tb-bdr: #21262d; --card-bg: #161b22; --card-bdr: #21262d; --card-shd: 0 1px 3px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.25); --card-shd-h: 0 6px 24px rgba(0,0,0,0.5); --th-bg: #1c2333; --tr-hover: rgba(99, 102, 241, 0.08); --inp-bg: #1c2333; --inp-bdr: #2d333b; } /* ── 3. Base Reset ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 15px; scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--dur2) var(--ease), color var(--dur2) var(--ease); } h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.015em; color: var(--text); } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-d); text-decoration: underline; } code, pre, .font-monospace { font-family: var(--font-mono) !important; font-size: 0.85em; } /* ── 4. Bootstrap overrides — surfaces ───────────────────────────── */ .card { background: var(--card-bg); border-color: var(--card-bdr); border-radius: var(--r-lg) !important; box-shadow: var(--card-shd); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); color: var(--text); } .card:hover { box-shadow: var(--card-shd-h); } .card-header { background: var(--surface-2); border-bottom-color: var(--border); padding: 0.75rem 1.1rem; font-size: 0.88rem; border-radius: var(--r-lg) var(--r-lg) 0 0 !important; color: var(--text); } .card-footer { background: var(--surface-2); border-top-color: var(--border); padding: 0.6rem 1.1rem; border-radius: 0 0 var(--r-lg) var(--r-lg) !important; color: var(--muted); font-size: 0.82rem; } .card-body { color: var(--text); } /* ── 5. Tables ────────────────────────────────────────────────────── */ .table { color: var(--text); border-color: var(--border); font-size: 0.86rem; margin-bottom: 0; } .table th { background: var(--th-bg); color: var(--muted); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom-color: var(--border) !important; white-space: nowrap; padding: 0.6rem 0.85rem; } .table td { border-bottom-color: var(--border); padding: 0.55rem 0.85rem; vertical-align: middle; } .table-dark th { background: var(--th-bg) !important; color: var(--muted) !important; border-bottom-color: var(--border) !important; } .table-hover tbody tr:hover { background: var(--tr-hover); } .table-active { background: var(--primary-bg) !important; } .table-responsive { border-radius: 0 0 var(--r-lg) var(--r-lg); } /* ── 6. Forms ─────────────────────────────────────────────────────── */ .form-control, .form-select { background: var(--inp-bg); border-color: var(--inp-bdr); color: var(--text); border-radius: var(--r); font-size: 0.88rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .form-control:focus, .form-select:focus { background: var(--inp-bg); color: var(--text); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none; } .form-control::placeholder { color: var(--subtle); } .form-label { font-size: 0.82rem; font-weight: 500; color: var(--muted); margin-bottom: 0.35rem; } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } /* ── 7. Buttons ───────────────────────────────────────────────────── */ .btn { font-weight: 500; font-size: 0.85rem; border-radius: var(--r); transition: all var(--dur) var(--ease); letter-spacing: 0.01em; } .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--primary-d); border-color: var(--primary-d); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); } .btn-outline-secondary { color: var(--muted); border-color: var(--border); background: transparent; } .btn-outline-secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-outline-danger { color: var(--danger); border-color: var(--danger); } .btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-outline-warning { color: var(--warning); border-color: var(--warning); } .btn-outline-success { color: var(--success); border-color: var(--success); } .btn-outline-success:hover { background: var(--success); border-color: var(--success); color: #fff; } .btn-success { background: var(--success); border-color: var(--success); color: #fff; } .btn-success:hover { background: #0da070; border-color: #0da070; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35); } .btn:focus-visible { box-shadow: 0 0 0 3px var(--primary-ring) !important; outline: none; } /* Button size helpers */ .btn-xs { font-size: 0.75rem; padding: 0.2rem 0.55rem; border-radius: var(--r-sm); } /* ── 8. Badges ────────────────────────────────────────────────────── */ .badge { font-weight: 500; font-size: 0.72rem; border-radius: var(--badge-r); letter-spacing: 0.02em; padding: 0.28em 0.6em; } /* Ensure custom badge colors work in dark mode too */ .bg-success { background-color: var(--success) !important; color: #fff !important; } .bg-danger { background-color: var(--danger) !important; color: #fff !important; } .bg-warning { background-color: var(--warning) !important; } .bg-info { background-color: var(--info) !important; } .bg-primary { background-color: var(--primary) !important; color: #fff !important; } /* ── 9. Alerts ────────────────────────────────────────────────────── */ .alert { border-radius: var(--r-lg); border: 1px solid transparent; font-size: 0.88rem; } .alert-success { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); color: #0a7a55; } .alert-danger { background: rgba(244,63,94,.1); border-color: rgba(244,63,94,.3); color: #c01040; } .alert-warning { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #9a6300; } .alert-info { background: rgba(6,182,212,.1); border-color: rgba(6,182,212,.3); color: #0369a1; } [data-theme="dark"] .alert-success { color: #34d399; } [data-theme="dark"] .alert-danger { color: #fb7185; } [data-theme="dark"] .alert-warning { color: #fbbf24; } [data-theme="dark"] .alert-info { color: #38bdf8; } /* ── 10. List groups ──────────────────────────────────────────────── */ .list-group-item { background: var(--card-bg); border-color: var(--border); color: var(--text); font-size: 0.88rem; } .list-group-item:hover, .list-group-item-action:hover { background: var(--tr-hover); color: var(--text); } .list-group-item.active { background: var(--primary-bg); border-color: var(--border); color: var(--primary); } /* ── 11. Modals / overlays ────────────────────────────────────────── */ .modal-backdrop-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); z-index: 1050; overflow-y: auto; animation: fade-in var(--dur2) var(--ease); } .modal-backdrop-overlay .card { animation: slide-up var(--dur2) var(--ease); } /* ── 12. Utility classes ──────────────────────────────────────────── */ .text-muted { color: var(--muted) !important; } .text-subtle { color: var(--subtle) !important; } .border-subtle { border-color: var(--border) !important; } .content { padding-top: 1.25rem; } h1:focus { outline: none; } /* ── 13. Form validation ──────────────────────────────────────────── */ .valid.modified:not([type=checkbox]) { outline: 2px solid var(--success); outline-offset: -1px; } .invalid { outline: 2px solid var(--danger); outline-offset: -1px; } .validation-message { color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem; } /* ── 14. Blazor error UI ──────────────────────────────────────────── */ .blazor-error-boundary { background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.3); border-radius: var(--r-lg); padding: 1rem 1rem 1rem 3.5rem; color: var(--danger); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f43f5e'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 1rem 1rem; background-size: 1.5rem; } .blazor-error-boundary::after { content: "An error has occurred."; } #blazor-error-ui { background: rgba(244, 63, 94, 0.95); color: white; bottom: 0; left: 0; padding: 0.75rem 1.5rem; position: fixed; width: 100%; z-index: 9999; display: none; font-size: 0.88rem; font-weight: 500; box-shadow: 0 -4px 16px rgba(0,0,0,0.2); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; opacity: 0.8; } #blazor-error-ui .dismiss:hover { opacity: 1; } /* ── 15. Spinner ──────────────────────────────────────────────────── */ .spinner-border { color: var(--primary) !important; } /* ── 16. Scrollbar (webkit) ───────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--subtle); } /* ── 17. pre / code blocks ────────────────────────────────────────── */ pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 0.75rem 1rem; font-size: 0.82rem; color: var(--text); white-space: pre-wrap; word-break: break-word; } /* ── 18. Keyframe animations ──────────────────────────────────────── */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-in-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } @keyframes gradient-bg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes float-orb { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-24px) scale(1.06); } } /* ── 19. Page content enter animation ────────────────────────────── */ article.content > * { animation: fade-in var(--dur2) var(--ease); } /* ── 20. Dashboard stat card styles ──────────────────────────────── */ .stat-card { border-radius: var(--r-lg) !important; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); overflow: hidden; position: relative; } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--card-shd-h) !important; } .stat-card .card-footer { transition: background var(--dur) var(--ease); } .stat-card .card-footer:hover { background: var(--primary-bg) !important; color: var(--primary) !important; } .stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; margin-bottom: 0.3rem; } .stat-value { font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--text); letter-spacing: -0.03em; } .stat-sub { font-size: 0.76rem; margin-top: 0.35rem; } .stat-icon { font-size: 1.75rem; opacity: 0.55; line-height: 1; flex-shrink: 0; } /* Accent border variants */ .stat-primary { border-left: 3px solid var(--primary) !important; } .stat-info { border-left: 3px solid var(--cyan) !important; } .stat-warning { border-left: 3px solid var(--warning) !important; } .stat-success { border-left: 3px solid var(--success) !important; } /* Status dot */ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; } .status-dot.running { background: var(--success); animation: pulse-dot 2s infinite; } .status-dot.stopped { background: var(--subtle); } .status-dot.unhealthy { background: var(--danger); animation: pulse-dot 1s infinite; } /* ── 21. Login page ───────────────────────────────────────────────── */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; position: relative; overflow: hidden; background: #0d1117; } .login-bg { position: absolute; inset: 0; background: linear-gradient(-45deg, #0d1117, #1a1f35, #1e1b4b, #1f1635, #0d1117); background-size: 400% 400%; animation: gradient-bg 18s ease infinite; } .login-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.35; } .login-orb-1 { width: 400px; height: 400px; background: radial-gradient(circle, #6366f1, transparent); top: -10%; left: -5%; animation: float-orb 9s ease-in-out infinite; } .login-orb-2 { width: 320px; height: 320px; background: radial-gradient(circle, #8b5cf6, transparent); bottom: -5%; right: -5%; animation: float-orb 12s ease-in-out infinite reverse; } .login-orb-3 { width: 200px; height: 200px; background: radial-gradient(circle, #06b6d4, transparent); top: 40%; left: 60%; animation: float-orb 7s ease-in-out 2s infinite; } .login-card { position: relative; z-index: 10; width: 100%; max-width: 400px; background: rgba(22, 27, 34, 0.85); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-xl); box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset; animation: slide-up 0.4s var(--ease); overflow: hidden; } .login-card-header { padding: 2rem 2rem 1.25rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.07); } .login-logo { width: 52px; height: 52px; background: linear-gradient(135deg, var(--primary), var(--violet)); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; box-shadow: 0 4px 16px rgba(99,102,241,0.5); } .login-title { font-size: 1.3rem; font-weight: 700; color: #e6edf3; margin-bottom: 0.2rem; letter-spacing: -0.02em; } .login-subtitle { font-size: 0.82rem; color: rgba(255,255,255,0.4); } .login-card-body { padding: 1.5rem 2rem; } .login-card .form-label { color: rgba(255,255,255,0.6); font-size: 0.8rem; font-weight: 500; } .login-card .form-control { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #e6edf3; border-radius: var(--r); font-size: 0.9rem; padding: 0.6rem 0.9rem; transition: all var(--dur) var(--ease); } .login-card .form-control::placeholder { color: rgba(255,255,255,0.25); } .login-card .form-control:focus { background: rgba(255,255,255,0.1); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.3); color: #e6edf3; } .login-card .btn-primary { background: linear-gradient(135deg, var(--primary), var(--violet)); border: none; border-radius: var(--r); padding: 0.65rem; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; transition: all var(--dur2) var(--ease); box-shadow: 0 4px 12px rgba(99,102,241,0.35); } .login-card .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.5); filter: brightness(1.05); } .login-card .btn-primary:active { transform: translateY(0); } .login-card-footer { padding: 0.85rem 2rem; border-top: 1px solid rgba(255,255,255,0.07); text-align: center; font-size: 0.78rem; color: rgba(255,255,255,0.3); } .login-card .alert-danger { background: rgba(244,63,94,0.15); border-color: rgba(244,63,94,0.3); color: #fda4af; border-radius: var(--r); font-size: 0.84rem; } /* ── 22. Input with icon ──────────────────────────────────────────── */ .input-with-icon { position: relative; } .input-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.3); font-size: 0.85rem; pointer-events: none; z-index: 2; } .ps-input-icon { padding-left: 2.3rem !important; } /* ── 23. Dark-mode checkbox ───────────────────────────────────────── */ .darker-border-checkbox.form-check-input { border-color: var(--subtle); }