/** * Weavr Dark Theme - Powdr Blue Edition * Shared CSS variables and base styles */ :root { /* Powdr Blue palette */ --powdr-blue: #6BBFEA; --powdr-blue-light: #8ED0F0; --powdr-blue-dark: #4AA3CF; --powdr-blue-darker: #2E87B5; /* Theme colors */ --primary: var(--powdr-blue); --primary-light: var(--powdr-blue-light); --primary-dark: var(--powdr-blue-dark); --primary-darker: var(--powdr-blue-darker); /* Dark theme base */ --background: #0f0f1a; --surface: #1a1a2e; --surface-light: #252540; --surface-hover: #2d2d4a; /* Text colors */ --text: #ffffff; --text-secondary: #e0e0e8; --text-muted: #a0a0b0; --text-light: #707085; /* Status colors */ --success: #2ed573; --success-bg: rgba(46, 213, 115, 0.15); --error: #ff4757; --error-bg: rgba(255, 71, 87, 0.15); --warning: #ffa502; --warning-bg: rgba(255, 165, 2, 0.15); --info: var(--powdr-blue); --info-bg: rgba(107, 191, 234, 0.15); /* Border */ --border: #333355; --border-dark: #444466; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5); /* Accent for running/active states */ --accent-green: #2ed573; --accent-green-bg: rgba(46, 213, 115, 0.15); /* Selected nav item. Owned here so every page matches - pages must NOT redefine .nav-item/.sidebar/.logo/.nav-section; this file is the one source of truth for the sidebar chrome. */ --nav-active-bg: rgba(107, 191, 234, 0.15); --nav-active-fg: var(--primary); } * { box-sizing: border-box; margin: 0; padding: 0; } /* The background belongs on , not only . The browser paints the page canvas from the ROOT element, so with the colour set on body alone every navigation flashed white before the new document's body painted - which reads as the page reloading rather than moving. Weavr is a multi-page app, so this happened on every single link. color-scheme also tells the browser to paint its own surfaces (canvas, scrollbars, form controls) dark, before any of our CSS applies. */ html { background: var(--background); color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* Smooth cross-document transitions where the browser supports them; ignored everywhere else, so it costs nothing to leave on. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--background); color: var(--text); min-height: 100vh; line-height: 1.6; } /* Sidebar */ .sidebar { position: fixed; left: 0; top: 0; bottom: 0; /* Snapshot the sidebar separately during cross-document view transitions: being identical on both pages, it holds perfectly still while the content cross-fades, instead of being swept up in the root fade. */ view-transition-name: weavr-sidebar; width: 260px; background: var(--surface); border-right: 1px solid var(--border); padding: 1.5rem; display: flex; flex-direction: column; box-shadow: var(--shadow); } .logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; } .logo svg { width: 40px; height: 40px; } .logo h1 { font-size: 1.5rem; font-weight: 700; background: linear-gradient(135deg, var(--powdr-blue) 0%, var(--powdr-blue-darker) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav { flex: 1; } .nav-section { margin-bottom: 1.5rem; } .nav-section h3 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); margin-bottom: 0.5rem; padding: 0 0.75rem; font-weight: 600; } .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.75rem; color: var(--text-secondary); text-decoration: none; border-radius: 8px; transition: all 0.15s ease; font-weight: 500; } .nav-item:hover { background: var(--surface-light); color: var(--text); } .nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 600; } .nav-item svg { width: 20px; height: 20px; stroke-width: 2; } .status-indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; color: var(--text-muted); font-size: 0.85rem; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--success-bg); } /* Main content */ .main { margin-left: 260px; padding: 2rem; } .header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; gap: 1rem; } .header h2 { font-size: 1.75rem; color: var(--text); font-weight: 700; margin-bottom: 0.25rem; } .header p { color: var(--text-muted); font-size: 0.95rem; } /* Cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; box-shadow: var(--shadow-sm); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .card-header h3 { font-size: 1.1rem; font-weight: 600; color: var(--text); } /* Buttons */ .btn { padding: 0.6rem 1.1rem; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary { background: var(--primary); color: white; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--primary-dark); box-shadow: var(--shadow); } .btn-secondary { background: var(--surface-light); color: var(--text-secondary); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface-hover); border-color: var(--border-dark); } .btn-success { background: var(--success); color: white; } .btn-success:hover { background: #16A34A; } .btn-danger { background: var(--error-bg); color: var(--error); border: 1px solid rgba(239, 68, 68, 0.3); } .btn-danger:hover { background: rgba(239, 68, 68, 0.2); } /* Form elements */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.7rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.9rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-light); } .form-group textarea { min-height: 100px; resize: vertical; font-family: inherit; } /* Chips/tags */ .chip { display: inline-block; font-size: 0.78rem; font-weight: 500; color: var(--primary-darker); background: var(--primary-light); border-radius: 999px; padding: 0.2rem 0.7rem; margin-right: 0.4rem; margin-bottom: 0.35rem; } .chip.success { background: var(--success-bg); color: #16A34A; } /* Status badges */ .status-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; } .status-badge.running { background: var(--accent-green-bg); color: var(--accent-green); } .status-badge.stopped { background: var(--surface-light); color: var(--text-muted); } .status-badge.error { background: var(--error-bg); color: var(--error); } /* Alerts */ .alert { border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .alert.success { background: var(--success-bg); border: 1px solid rgba(34, 197, 94, 0.3); color: #166534; } .alert.error { background: var(--error-bg); border: 1px solid rgba(239, 68, 68, 0.3); color: #991B1B; } .alert.info { background: var(--info-bg); border: 1px solid rgba(107, 191, 234, 0.3); color: var(--primary-darker); } /* Grid layout */ .grid { display: grid; gap: 1rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* Stats cards */ .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; box-shadow: var(--shadow-sm); } .stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1.2; } .stat-card .stat-label { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; } .stat-card.primary { border-top: 3px solid var(--primary); } .stat-card.success { border-top: 3px solid var(--success); } .stat-card.warning { border-top: 3px solid var(--warning); } .stat-card.error { border-top: 3px solid var(--error); } /* Tables */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); } th { font-weight: 600; font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; background: var(--surface-light); } tr:hover { background: var(--surface-light); } /* Modal */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; } .modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { font-size: 1.25rem; font-weight: 600; } .modal-body { padding: 1.5rem; } .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 0.75rem; } /* Responsive */ @media (max-width: 768px) { .sidebar { width: 100%; position: relative; } .main { margin-left: 0; } .header { flex-direction: column; align-items: flex-start; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* Utility classes */ .muted { color: var(--text-muted); } .text-center { text-align: center; } .text-right { text-align: right; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; }