Spaces:
Sleeping
Sleeping
| :root { | |
| /* Colors - Light Theme (Modern Minimalist) */ | |
| --bg-body: #fafafa; | |
| --bg-card: #ffffff; | |
| --bg-card-hover: #f4f4f5; | |
| --bg-input: #ffffff; | |
| --border-color: #e4e4e7; | |
| --border-hover: #d4d4d8; | |
| /* Primary: Teal/Emerald (Modern & Elegant) */ | |
| --primary: #0d9488; | |
| --primary-hover: #0f766e; | |
| --primary-glow: rgba(13, 148, 136, 0.15); | |
| /* Accents */ | |
| --danger: #ef4444; | |
| --danger-hover: #dc2626; | |
| --success: #10b981; | |
| --success-hover: #059669; | |
| --text-main: #18181b; | |
| --text-muted: #71717a; | |
| /* Spacing & Radius */ | |
| --radius-sm: 6px; | |
| --radius-md: 10px; | |
| --radius-lg: 16px; | |
| --radius-xl: 24px; | |
| --space-xs: 4px; | |
| --space-sm: 8px; | |
| --space-md: 16px; | |
| --space-lg: 24px; | |
| --space-xl: 32px; | |
| /* Effects */ | |
| --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02); | |
| --glass-blur: blur(16px); | |
| --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| [data-theme="dark"] { | |
| /* Colors - Dark Theme (Slate/Zinc) */ | |
| --bg-body: #09090b; | |
| --bg-card: rgba(24, 24, 27, 0.6); | |
| --bg-card-hover: rgba(39, 39, 42, 0.6); | |
| --bg-input: rgba(39, 39, 42, 0.5); | |
| --border-color: rgba(255, 255, 255, 0.08); | |
| --border-hover: rgba(255, 255, 255, 0.12); | |
| /* Primary: Lighter Teal for Dark Mode */ | |
| --primary: #14b8a6; | |
| --primary-hover: #2dd4bf; | |
| --primary-glow: rgba(20, 184, 166, 0.25); | |
| --danger: #f87171; | |
| --danger-hover: #ef4444; | |
| --success: #34d399; | |
| --success-hover: #10b981; | |
| --text-main: #f4f4f5; | |
| --text-muted: #a1a1aa; | |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background-color: var(--bg-body); | |
| color: var(--text-main); | |
| min-height: 100vh; | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* Elegant Background Pattern */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| background-image: radial-gradient(circle at 1px 1px, var(--border-color) 1px, transparent 0); | |
| background-size: 40px 40px; | |
| opacity: 0.4; | |
| z-index: -1; | |
| } | |
| [data-theme="dark"] body { | |
| background-image: | |
| radial-gradient(circle at 20% 20%, rgba(20, 184, 166, 0.05), transparent 40%), | |
| radial-gradient(circle at 80% 80%, rgba(20, 184, 166, 0.05), transparent 40%); | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border-color); | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-muted); | |
| } | |
| /* Utilities */ | |
| .hidden { | |
| display: none ; | |
| } | |
| .screen { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Login Screen */ | |
| .login-container { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-xl); | |
| } | |
| .login-container h1 { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| letter-spacing: -0.03em; | |
| margin-bottom: var(--space-xs); | |
| background: linear-gradient(135deg, var(--text-main) 0%, var(--text-muted) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .login-container h2 { | |
| color: var(--text-muted); | |
| font-size: 1.1rem; | |
| font-weight: 400; | |
| margin-bottom: var(--space-xl); | |
| } | |
| #login-form { | |
| background: var(--bg-card); | |
| backdrop-filter: var(--glass-blur); | |
| padding: 48px; | |
| border-radius: var(--radius-xl); | |
| border: 1px solid var(--border-color); | |
| box-shadow: var(--shadow-lg); | |
| width: 100%; | |
| max-width: 400px; | |
| transition: var(--transition); | |
| } | |
| #login-form input { | |
| width: 100%; | |
| padding: 14px 16px; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| color: var(--text-main); | |
| font-size: 0.95rem; | |
| margin-bottom: var(--space-lg); | |
| transition: var(--transition); | |
| } | |
| #login-form input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px var(--primary-glow); | |
| } | |
| #login-form button { | |
| width: 100%; | |
| padding: 14px; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| box-shadow: 0 4px 12px var(--primary-glow); | |
| } | |
| #login-form button:hover { | |
| background: var(--primary-hover); | |
| transform: translateY(-1px); | |
| } | |
| .error-message { | |
| color: var(--danger); | |
| margin-top: var(--space-md); | |
| text-align: center; | |
| font-size: 0.85rem; | |
| min-height: 20px; | |
| } | |
| .login-info { | |
| margin-top: var(--space-xl); | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| padding: var(--space-md) var(--space-lg); | |
| border-radius: var(--radius-lg); | |
| } | |
| /* Navbar */ | |
| .navbar { | |
| background: rgba(var(--bg-card), 0.8); | |
| backdrop-filter: blur(12px); | |
| padding: 16px 32px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid var(--border-color); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .navbar h1 { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| letter-spacing: -0.01em; | |
| color: var(--text-main); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .navbar h1::before { | |
| content: ''; | |
| display: block; | |
| width: 10px; | |
| height: 10px; | |
| background: var(--primary); | |
| border-radius: 50%; | |
| box-shadow: 0 0 10px var(--primary); | |
| } | |
| .nav-info { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| } | |
| #user-info, #admin-user-info { | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| color: var(--text-main); | |
| background: var(--bg-card); | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .logout-btn { | |
| padding: 8px 16px; | |
| background: transparent; | |
| color: var(--text-muted); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .logout-btn:hover { | |
| background: var(--bg-card-hover); | |
| color: var(--danger); | |
| border-color: var(--danger); | |
| } | |
| /* Theme Toggle */ | |
| .theme-toggle { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| padding: 8px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .theme-toggle:hover { | |
| color: var(--text-main); | |
| background: var(--bg-card-hover); | |
| } | |
| /* Main Container */ | |
| .container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: var(--space-xl); | |
| width: 100%; | |
| } | |
| /* Stats Grid */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: var(--space-md); | |
| margin-bottom: var(--space-xl); | |
| } | |
| .stat-card { | |
| background: var(--bg-card); | |
| padding: var(--space-lg); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-color); | |
| text-align: left; | |
| transition: var(--transition); | |
| } | |
| .stat-card:hover { | |
| border-color: var(--primary); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .stat-card h3 { | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: var(--space-xs); | |
| } | |
| .stat-value { | |
| font-size: 2.2rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| letter-spacing: -0.03em; | |
| } | |
| /* Section */ | |
| .section { | |
| background: var(--bg-card); | |
| padding: var(--space-xl); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-color); | |
| margin-bottom: var(--space-xl); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-lg); | |
| padding-bottom: var(--space-md); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .section h2 { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| } | |
| /* Buttons */ | |
| .btn-primary, .btn-secondary, .btn-danger, .btn-success { | |
| padding: 10px 18px; | |
| border-radius: var(--radius-md); | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 0.9rem; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| border: 1px solid transparent; | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: white; | |
| box-shadow: 0 2px 8px var(--primary-glow); | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary-hover); | |
| transform: translateY(-1px); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-input); | |
| color: var(--text-main); | |
| border-color: var(--border-color); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--bg-card-hover); | |
| border-color: var(--border-hover); | |
| } | |
| .btn-danger { | |
| background: transparent; | |
| color: var(--danger); | |
| border-color: rgba(239, 68, 68, 0.3); | |
| } | |
| .btn-danger:hover { | |
| background: rgba(239, 68, 68, 0.1); | |
| border-color: var(--danger); | |
| } | |
| .btn-success { | |
| background: transparent; | |
| color: var(--success); | |
| border-color: rgba(16, 185, 129, 0.3); | |
| } | |
| .btn-success:hover { | |
| background: rgba(16, 185, 129, 0.1); | |
| border-color: var(--success); | |
| } | |
| /* Keys List */ | |
| .keys-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| } | |
| .group-title { | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin: var(--space-lg) 0 var(--space-sm) 0; | |
| } | |
| /* AI Provider Select */ | |
| #ai-provider-select { | |
| margin-bottom: var(--space-md); | |
| } | |
| /* Key Cards */ | |
| .key-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-md) var(--space-lg); | |
| display: flex; | |
| align-items: center; | |
| transition: var(--transition); | |
| } | |
| .key-card:hover { | |
| border-color: var(--border-hover); | |
| background: var(--bg-card-hover); | |
| } | |
| .key-card.admin { | |
| border-left: 3px solid var(--primary); | |
| } | |
| .regular-key-group { | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| background: var(--bg-card); | |
| } | |
| .regular-key-header { | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .regular-key-header:hover { | |
| background: var(--bg-card-hover); | |
| } | |
| .regular-key-header .key-card { | |
| border: none; | |
| background: transparent; | |
| } | |
| .nested-server-keys { | |
| padding: 0 var(--space-lg) var(--space-lg) calc(var(--space-lg) + 24px); | |
| border-top: 1px solid var(--border-color); | |
| background: var(--bg-card-hover); | |
| } | |
| .nested-server-keys h4 { | |
| color: var(--text-muted); | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| margin: var(--space-md) 0; | |
| opacity: 0.8; | |
| } | |
| .key-card.nested { | |
| padding: var(--space-md); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| } | |
| .toggle-icon-container { | |
| width: 24px; | |
| height: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: var(--space-md); | |
| background: var(--bg-input); | |
| border-radius: 50%; | |
| border: 1px solid var(--border-color); | |
| } | |
| .toggle-icon { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| transition: transform 0.2s; | |
| } | |
| .key-info { | |
| flex: 1; | |
| } | |
| .key-info h3 { | |
| display: flex; | |
| align-items: center; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| color: var(--text-main); | |
| } | |
| .key-info p { | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| margin-bottom: 2px; | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .key-badge { | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| margin-right: var(--space-sm); | |
| text-transform: uppercase; | |
| letter-spacing: 0.02em; | |
| } | |
| .key-badge.admin { background: var(--primary); color: white; } | |
| .key-badge.regular { background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-color); } | |
| .key-badge.server { background: transparent; color: var(--text-muted); border: 1px solid var(--border-color); } | |
| .key-badge.active { color: var(--success); background: rgba(16, 185, 129, 0.1); } | |
| .key-badge.inactive { color: var(--text-muted); background: var(--bg-input); } | |
| .key-actions { | |
| display: flex; | |
| gap: var(--space-sm); | |
| margin-left: var(--space-lg); | |
| } | |
| /* Forms & Inputs */ | |
| .form-group { | |
| margin-bottom: var(--space-lg); | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 6px; | |
| font-weight: 500; | |
| color: var(--text-main); | |
| font-size: 0.85rem; | |
| } | |
| input[type="text"], | |
| input[type="password"], | |
| textarea, | |
| select { | |
| width: 100%; | |
| padding: 10px 14px; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| color: var(--text-main); | |
| font-family: inherit; | |
| font-size: 0.9rem; | |
| transition: var(--transition); | |
| } | |
| input:focus, textarea:focus, select:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px var(--primary-glow); | |
| } | |
| .hint { | |
| display: block; | |
| margin-top: 6px; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| /* Events List */ | |
| .events-list { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: 0; | |
| } | |
| .event-item { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| border-left: 3px solid transparent; | |
| transition: var(--transition); | |
| } | |
| .event-item:last-child { | |
| border-bottom: none; | |
| } | |
| .event-item:hover { | |
| background: var(--bg-card-hover); | |
| border-left-color: var(--primary); | |
| } | |
| .event-item strong { | |
| color: var(--text-main); | |
| font-weight: 600; | |
| } | |
| .event-item pre { | |
| background: var(--bg-body); | |
| padding: 10px; | |
| border-radius: var(--radius-sm); | |
| margin-top: 8px; | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| border: 1px solid var(--border-color); | |
| } | |
| /* Command Console */ | |
| .command-history { | |
| height: 300px; | |
| overflow-y: auto; | |
| background: #0f172a; /* Always dark for terminal feel */ | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-md); | |
| font-family: 'JetBrains Mono', monospace; | |
| margin-top: var(--space-md); | |
| } | |
| .command-item { | |
| margin-bottom: 8px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #e2e8f0; | |
| font-size: 0.85rem; | |
| } | |
| .command-item .timestamp { | |
| color: #64748b; | |
| font-size: 0.75rem; | |
| margin-top: 4px; | |
| } | |
| .command-form { | |
| display: flex; | |
| gap: var(--space-sm); | |
| } | |
| /* Modal */ | |
| .modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.4); | |
| backdrop-filter: blur(4px); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| animation: fadeIn 0.2s ease-out; | |
| } | |
| .modal-content { | |
| background: var(--bg-card); | |
| padding: 32px; | |
| border-radius: var(--radius-xl); | |
| border: 1px solid var(--border-color); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .modal-actions { | |
| margin-top: 32px; | |
| padding-top: 24px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| /* AI Status */ | |
| .ai-status { | |
| margin-top: var(--space-md); | |
| padding: 12px 16px; | |
| border-radius: var(--radius-md); | |
| font-size: 0.85rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .ai-status::before { | |
| content: ''; | |
| display: block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| } | |
| .ai-status.success { background: rgba(16, 185, 129, 0.1); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.2); } | |
| .ai-status.success::before { background: var(--success); } | |
| .ai-status.error { background: rgba(239, 68, 68, 0.1); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); } | |
| .ai-status.error::before { background: var(--danger); } | |
| .ai-status.info { background: rgba(13, 148, 136, 0.1); color: var(--primary); border: 1px solid rgba(13, 148, 136, 0.2); } | |
| .ai-status.info::before { background: var(--primary); } | |
| .modal-parent-info { | |
| color: var(--primary); | |
| font-size: 0.85rem; | |
| margin-bottom: var(--space-lg); | |
| padding: 12px; | |
| background: var(--primary-glow); | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-md); | |
| font-weight: 500; | |
| } | |
| .modal-parent-info.danger-bg { | |
| color: var(--danger); | |
| background: rgba(239, 68, 68, 0.1); | |
| border: 1px solid rgba(239, 68, 68, 0.2); | |
| } |