/* ============================================================================ * SNLab CodeCopilot - Core Design System CSS * * Purpose: Centralized styling for all HTML pages in the application. * Based on file-processor.html reference implementation. * * Requirements: * - Include Google Fonts link for JetBrains Mono in HTML * - Link this file after Google Fonts in HTML * * Author: iDevOpsLLC * Date: 2025-12-09 * Version: 1.0.0 * ============================================================================ */ /* ============================================================================ * 1. CSS VARIABLES (Design Tokens) * ============================================================================ */ :root { /* Background Colors */ --bg-primary: #1E1E1E; --bg-secondary: #252526; --bg-tertiary: #2D2D2D; --bg-hover: #3C3C3C; /* Text Colors */ --text-primary: #D4D4D4; --text-secondary: #808080; --text-muted: #6A6A6A; /* Accent Colors (Semantic) */ --accent-blue: #569CD6; --accent-green: #4EC9B0; --accent-orange: #CE9178; --accent-purple: #C586C0; --accent-yellow: #DCDCAA; --accent-red: #F44747; /* Semantic Aliases */ --success: #4EC9B0; --warning: #CE9178; --error: #F44747; /* Border */ --border-color: #404040; } /* ============================================================================ * 2. RESET & BASE STYLES * ============================================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'JetBrains Mono', monospace; background-color: var(--bg-primary); color: var(--text-primary); min-height: 100vh; line-height: 1.6; font-size: 0.9rem; } /* ============================================================================ * 3. HEADER * ============================================================================ */ .header { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; } .header h1 { font-size: 1.5rem; color: var(--accent-blue); display: flex; align-items: center; gap: 10px; font-weight: 600; } .header-actions { display: flex; gap: 15px; align-items: center; } /* ============================================================================ * 4. BUTTONS * ============================================================================ */ .btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; } .btn-primary { background: var(--accent-blue); color: white; } .btn-primary:hover { background: #4A8BC2; } .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover { background: var(--bg-hover); } .btn-success { background: var(--accent-green); color: white; } .btn-success:hover { background: #3DAA9A; } .btn-danger { background: var(--accent-red); color: white; } .btn-danger:hover { background: #D93A3A; } /* Stop/Cancel Generation Button - Killswitch for AI operations */ .btn-stop-generation { background: linear-gradient(135deg, var(--accent-red), #D93636); color: white; border: none; padding: 8px 16px; border-radius: 4px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; font-family: inherit; font-size: 0.85rem; } .btn-stop-generation:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(244, 71, 71, 0.3); background: linear-gradient(135deg, #D93636, #C42929); } .btn-stop-generation:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } /* Action button group container for Generate + Cancel buttons */ .action-button-group { display: flex; gap: 10px; align-items: center; } .btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Icon Button */ .btn-icon { width: 32px; height: 32px; padding: 0; border: none; border-radius: 4px; background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .btn-icon:hover { background: var(--bg-hover); color: var(--accent-blue); } /* ============================================================================ * 5. CONTAINER & LAYOUT * ============================================================================ */ .container { display: grid; grid-template-columns: 1fr 350px; gap: 20px; padding: 20px; max-width: 1600px; margin: 0 auto; } .container.full-width { grid-template-columns: 1fr; } /* ============================================================================ * 6. SIDEBAR & CARDS * ============================================================================ */ .sidebar { display: flex; flex-direction: column; gap: 20px; } .sidebar-card { background: var(--bg-secondary); border-radius: 8px; padding: 20px; } .sidebar-card h3 { font-size: 0.9rem; color: var(--accent-blue); margin-bottom: 15px; display: flex; align-items: center; gap: 8px; font-weight: 500; } .card { background: var(--bg-secondary); border-radius: 8px; padding: 20px; } .card-header { padding: 15px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } /* ============================================================================ * 7. STATISTICS * ============================================================================ */ .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .stat-item { background: var(--bg-tertiary); padding: 15px; border-radius: 6px; text-align: center; } .stat-value { font-size: 1.5rem; font-weight: 600; color: var(--accent-green); } .stat-label { font-size: 0.7rem; color: var(--text-secondary); margin-top: 5px; } /* ============================================================================ * 8. LISTS & LIST ITEMS * ============================================================================ */ .list-item, .file-item { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--border-color); transition: background 0.2s; } .list-item:hover, .file-item:hover { background: var(--bg-tertiary); } .list-item:last-child, .file-item:last-child { border-bottom: none; } .item-icon, .file-icon { width: 40px; height: 40px; background: var(--bg-tertiary); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px; color: var(--accent-blue); } .item-info, .file-info { flex: 1; } .item-name, .file-name { color: var(--text-primary); font-size: 0.9rem; margin-bottom: 4px; } .item-meta, .file-meta { color: var(--text-secondary); font-size: 0.75rem; } .item-actions, .file-actions { display: flex; gap: 8px; } .file-actions button { width: 32px; height: 32px; border: none; border-radius: 4px; background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; } .file-actions button:hover { background: var(--bg-hover); color: var(--accent-blue); } /* File List Container */ .file-list { background: var(--bg-secondary); border-radius: 8px; margin-top: 20px; } .file-list-header { padding: 15px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .file-list-header h2 { font-size: 1rem; color: var(--text-primary); font-weight: 500; } /* ============================================================================ * 9. TABS * ============================================================================ */ .tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; } .tab { padding: 10px 20px; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; /* Overlap container border for proper underline effect */ transition: all 0.2s; } .tab:hover { color: var(--text-primary); } .tab.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); } /* ============================================================================ * 10. FORMS * ============================================================================ */ .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: 0.85rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-family: inherit; font-size: 0.9rem; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-blue); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { background: var(--bg-primary); color: var(--text-muted); cursor: not-allowed; } /* Standalone input styling (without form-group wrapper) */ input, select, textarea { padding: 10px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-family: inherit; font-size: 0.9rem; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-blue); } /* ============================================================================ * 11. MODALS * ============================================================================ */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; z-index: 1000; } .modal-overlay.active { display: flex; } .modal { background: var(--bg-secondary); border-radius: 8px; width: 90%; max-width: 500px; max-height: 80vh; overflow: auto; } .modal-header { padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { color: var(--accent-blue); font-weight: 500; } .modal-close { background: none; border: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; } .modal-close:hover { color: var(--text-primary); } .modal-body { padding: 20px; } .modal-footer { padding: 15px 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 10px; } /* ============================================================================ * 12. TOAST NOTIFICATIONS * ============================================================================ */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 1001; } .toast { background: var(--bg-secondary); border-left: 4px solid var(--accent-blue); padding: 15px 20px; margin-bottom: 10px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); animation: slideIn 0.3s ease; } .toast.success { border-left-color: var(--success); } .toast.error { border-left-color: var(--error); } .toast.warning { border-left-color: var(--warning); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================================================ * 13. UPLOAD ZONE * ============================================================================ */ .upload-zone { background: var(--bg-secondary); border: 2px dashed var(--border-color); border-radius: 8px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.3s; } .upload-zone:hover, .upload-zone.dragover { border-color: var(--accent-blue); background: rgba(86, 156, 214, 0.1); } .upload-zone i { font-size: 3rem; color: var(--accent-blue); margin-bottom: 15px; } .upload-zone h3 { color: var(--text-primary); margin-bottom: 10px; } .upload-zone p { color: var(--text-secondary); font-size: 0.85rem; } /* ============================================================================ * 14. PROGRESS BAR & LOADING * ============================================================================ */ .progress-bar { height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; margin-top: 10px; } .progress-bar-fill { height: 100%; background: var(--accent-blue); transition: width 0.3s; } /* Loading Spinner */ .spinner { width: 20px; height: 20px; border: 2px solid var(--bg-tertiary); border-top-color: var(--accent-blue); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================================ * 15. EMPTY STATE * ============================================================================ */ .empty-state { text-align: center; padding: 40px; color: var(--text-secondary); } .empty-state i { font-size: 3rem; margin-bottom: 15px; opacity: 0.5; } /* ============================================================================ * 16. STATUS INDICATORS * ============================================================================ */ .status-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 12px; } .status-dot.pending { background: var(--warning); } .status-dot.processing { background: var(--accent-blue); animation: pulse 1s infinite; } .status-dot.completed { background: var(--success); } .status-dot.failed { background: var(--error); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Job Items */ .job-item { display: flex; align-items: center; padding: 12px; background: var(--bg-tertiary); border-radius: 6px; margin-bottom: 10px; } .job-status { width: 10px; height: 10px; border-radius: 50%; margin-right: 12px; } .job-status.pending { background: var(--warning); } .job-status.processing { background: var(--accent-blue); animation: pulse 1s infinite; } .job-status.completed { background: var(--success); } .job-status.failed { background: var(--error); } .job-info { flex: 1; } .job-type { font-size: 0.85rem; color: var(--text-primary); } .job-meta { font-size: 0.7rem; color: var(--text-secondary); } /* ============================================================================ * 17. FORMAT BUTTONS * ============================================================================ */ .format-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .format-btn { padding: 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); cursor: pointer; transition: all 0.2s; text-align: center; font-size: 0.8rem; } .format-btn:hover { background: var(--bg-hover); border-color: var(--accent-blue); } .format-btn.selected { background: rgba(86, 156, 214, 0.2); border-color: var(--accent-blue); color: var(--accent-blue); } /* ============================================================================ * 18. TABLES * ============================================================================ */ table { width: 100%; border-collapse: collapse; } table th, table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); } table th { background: var(--bg-tertiary); color: var(--text-primary); font-weight: 500; } table tr:hover { background: var(--bg-tertiary); } /* ============================================================================ * 19. BADGES * ============================================================================ */ .badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 500; } .badge-primary { background: rgba(86, 156, 214, 0.2); color: var(--accent-blue); } .badge-success { background: rgba(78, 201, 176, 0.2); color: var(--success); } .badge-warning { background: rgba(206, 145, 120, 0.2); color: var(--warning); } .badge-danger { background: rgba(244, 71, 71, 0.2); color: var(--error); } /* ============================================================================ * 20. ALERTS * ============================================================================ */ .alert { padding: 15px 20px; border-radius: 6px; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .alert-info { background: rgba(86, 156, 214, 0.1); border: 1px solid var(--accent-blue); color: var(--accent-blue); } .alert-success { background: rgba(78, 201, 176, 0.1); border: 1px solid var(--success); color: var(--success); } .alert-warning { background: rgba(206, 145, 120, 0.1); border: 1px solid var(--warning); color: var(--warning); } .alert-danger { background: rgba(244, 71, 71, 0.1); border: 1px solid var(--error); color: var(--error); } /* ============================================================================ * 21. TOOLTIPS * ============================================================================ */ [data-tooltip] { position: relative; } [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 6px 10px; background: var(--bg-tertiary); color: var(--text-primary); font-size: 0.75rem; border-radius: 4px; white-space: nowrap; z-index: 1000; } /* ============================================================================ * 22. RESPONSIVE BREAKPOINTS * ============================================================================ */ @media (max-width: 1024px) { .container { grid-template-columns: 1fr; } .sidebar { order: -1; } .format-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .header { flex-direction: column; gap: 15px; padding: 15px; } .header-actions { width: 100%; justify-content: center; } .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab { padding: 10px 15px; white-space: nowrap; } .stat-grid { grid-template-columns: 1fr; } .format-grid { grid-template-columns: 1fr; } } /* ============================================================================ * 23. ACCESSIBILITY * ============================================================================ */ /* Focus visible for keyboard navigation */ .btn:focus-visible, .tab:focus-visible, .format-btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================================ * 24. UTILITY CLASSES * ============================================================================ */ .text-center { text-align: center; } .text-right { text-align: right; } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-error { color: var(--error); } .text-blue { color: var(--accent-blue); } .bg-primary { background-color: var(--bg-primary); } .bg-secondary { background-color: var(--bg-secondary); } .bg-tertiary { background-color: var(--bg-tertiary); } .hidden { display: none !important; } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-sm { gap: 8px; } .gap-md { gap: 15px; } .gap-lg { gap: 20px; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mb-1 { margin-bottom: 10px; } .mb-2 { margin-bottom: 20px; } .p-1 { padding: 10px; } .p-2 { padding: 20px; } /* ============================================================================ * 25. SCROLLBAR STYLING * ============================================================================ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--border-color) var(--bg-primary); }