Spaces:
Sleeping
Sleeping
| /* ============================================================================ | |
| International Typographic Style - Swiss Design System | |
| ============================================================================ */ | |
| :root { | |
| /* Colors */ | |
| --color-white: #ffffff; | |
| --color-black: #000000; | |
| --color-red: #e63946; | |
| --color-gray-light: #f5f5f5; | |
| --color-gray-medium: #e0e0e0; | |
| --color-gray-dark: #333333; | |
| --color-success: #2d6a4f; | |
| --color-warning: #f77f00; | |
| --color-error: #d62828; | |
| /* Typography */ | |
| --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; | |
| --font-size-base: 14px; | |
| --font-size-small: 12px; | |
| --font-size-large: 16px; | |
| --font-size-xl: 20px; | |
| --font-size-2xl: 28px; | |
| --font-size-3xl: 36px; | |
| --line-height-base: 1.6; | |
| --line-height-tight: 1.2; | |
| /* Spacing (8px grid) */ | |
| --spacing-xs: 4px; | |
| --spacing-sm: 8px; | |
| --spacing-md: 16px; | |
| --spacing-lg: 24px; | |
| --spacing-xl: 32px; | |
| --spacing-2xl: 48px; | |
| --spacing-3xl: 64px; | |
| /* Borders */ | |
| --border-width: 1px; | |
| --border-color: var(--color-black); | |
| /* Shadows */ | |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); | |
| --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15); | |
| /* Transitions */ | |
| --transition-fast: 150ms ease-in-out; | |
| --transition-base: 300ms ease-in-out; | |
| } | |
| /* ============================================================================ | |
| Reset & Base Styles | |
| ============================================================================ */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 16px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| body { | |
| font-family: var(--font-family); | |
| font-size: var(--font-size-base); | |
| line-height: var(--line-height-base); | |
| color: var(--color-black); | |
| background-color: var(--color-white); | |
| } | |
| /* ============================================================================ | |
| Header & Navigation | |
| ============================================================================ */ | |
| .header { | |
| background-color: var(--color-white); | |
| border-bottom: var(--border-width) solid var(--border-color); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header-content { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: var(--spacing-lg) var(--spacing-md); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: var(--font-size-2xl); | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| text-transform: uppercase; | |
| } | |
| .nav { | |
| display: flex; | |
| gap: var(--spacing-xl); | |
| } | |
| .nav-link { | |
| font-size: var(--font-size-base); | |
| text-decoration: none; | |
| color: var(--color-black); | |
| border-bottom: 2px solid transparent; | |
| padding-bottom: var(--spacing-xs); | |
| transition: border-color var(--transition-fast); | |
| cursor: pointer; | |
| } | |
| .nav-link:hover { | |
| border-bottom-color: var(--color-black); | |
| } | |
| .nav-link.active { | |
| border-bottom-color: var(--color-red); | |
| color: var(--color-red); | |
| } | |
| /* ============================================================================ | |
| Main Container & Layout | |
| ============================================================================ */ | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| .main { | |
| flex: 1; | |
| max-width: 1400px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: var(--spacing-2xl) var(--spacing-md); | |
| } | |
| /* ============================================================================ | |
| Sections | |
| ============================================================================ */ | |
| .section { | |
| display: none; | |
| animation: fadeIn var(--transition-base); | |
| } | |
| .section.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| .section-header { | |
| margin-bottom: var(--spacing-2xl); | |
| } | |
| .section-header h2 { | |
| font-size: var(--font-size-3xl); | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .divider-line { | |
| width: 64px; | |
| height: 2px; | |
| background-color: var(--color-red); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| /* ============================================================================ | |
| Statistics Grid | |
| ============================================================================ */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: var(--spacing-lg); | |
| margin-bottom: var(--spacing-2xl); | |
| } | |
| .stat-card { | |
| padding: var(--spacing-lg); | |
| border: var(--border-width) solid var(--border-color); | |
| background-color: var(--color-white); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| transition: all var(--transition-base); | |
| } | |
| .stat-card:hover { | |
| box-shadow: var(--shadow-md); | |
| } | |
| .stat-value { | |
| font-size: var(--font-size-3xl); | |
| font-weight: 700; | |
| color: var(--color-red); | |
| line-height: var(--line-height-tight); | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .stat-label { | |
| font-size: var(--font-size-small); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--color-gray-dark); | |
| } | |
| /* ============================================================================ | |
| Cards | |
| ============================================================================ */ | |
| .card { | |
| padding: var(--spacing-lg); | |
| border: var(--border-width) solid var(--border-color); | |
| background-color: var(--color-white); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .card h3 { | |
| font-size: var(--font-size-xl); | |
| font-weight: 700; | |
| margin-bottom: var(--spacing-md); | |
| letter-spacing: -0.01em; | |
| } | |
| .status-content { | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .status-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--spacing-md) 0; | |
| border-bottom: var(--border-width) solid var(--color-gray-medium); | |
| } | |
| .status-row:last-child { | |
| border-bottom: none; | |
| } | |
| .status-label { | |
| font-weight: 600; | |
| color: var(--color-gray-dark); | |
| min-width: 150px; | |
| } | |
| .status-value { | |
| color: var(--color-black); | |
| font-weight: 500; | |
| } | |
| /* ============================================================================ | |
| Progress Bar | |
| ============================================================================ */ | |
| .progress-bar { | |
| flex: 1; | |
| height: 8px; | |
| background-color: var(--color-gray-light); | |
| border: var(--border-width) solid var(--border-color); | |
| margin: 0 var(--spacing-md); | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background-color: var(--color-red); | |
| transition: width var(--transition-base); | |
| } | |
| /* ============================================================================ | |
| Forms | |
| ============================================================================ */ | |
| .config-form { | |
| max-width: 600px; | |
| } | |
| .form-group { | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .form-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--spacing-lg); | |
| } | |
| label { | |
| display: block; | |
| font-weight: 600; | |
| margin-bottom: var(--spacing-sm); | |
| font-size: var(--font-size-base); | |
| } | |
| .form-input, | |
| .filter-select { | |
| width: 100%; | |
| padding: var(--spacing-md); | |
| border: var(--border-width) solid var(--border-color); | |
| background-color: var(--color-white); | |
| font-family: var(--font-family); | |
| font-size: var(--font-size-base); | |
| transition: all var(--transition-fast); | |
| } | |
| .form-input:focus, | |
| .filter-select:focus { | |
| outline: none; | |
| border-color: var(--color-red); | |
| box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.1); | |
| } | |
| /* ============================================================================ | |
| Buttons | |
| ============================================================================ */ | |
| .btn { | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| border: var(--border-width) solid var(--border-color); | |
| background-color: var(--color-white); | |
| color: var(--color-black); | |
| font-family: var(--font-family); | |
| font-size: var(--font-size-base); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .btn:hover { | |
| box-shadow: var(--shadow-md); | |
| } | |
| .btn:active { | |
| transform: scale(0.98); | |
| } | |
| .btn-primary { | |
| background-color: var(--color-red); | |
| color: var(--color-white); | |
| border-color: var(--color-red); | |
| } | |
| .btn-primary:hover { | |
| background-color: #d62828; | |
| border-color: #d62828; | |
| } | |
| .btn-secondary { | |
| background-color: var(--color-white); | |
| color: var(--color-black); | |
| border-color: var(--color-black); | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--color-gray-light); | |
| } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| /* ============================================================================ | |
| Tables | |
| ============================================================================ */ | |
| .queue-controls, | |
| .logs-controls { | |
| display: flex; | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-lg); | |
| align-items: center; | |
| } | |
| .filter-select { | |
| flex: 1; | |
| max-width: 200px; | |
| } | |
| .queue-table, | |
| .logs-table { | |
| border: var(--border-width) solid var(--border-color); | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| background-color: var(--color-white); | |
| } | |
| thead { | |
| background-color: var(--color-gray-light); | |
| border-bottom: var(--border-width) solid var(--border-color); | |
| } | |
| th { | |
| padding: var(--spacing-md); | |
| text-align: left; | |
| font-weight: 700; | |
| font-size: var(--font-size-small); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--color-gray-dark); | |
| } | |
| td { | |
| padding: var(--spacing-md); | |
| border-bottom: var(--border-width) solid var(--color-gray-medium); | |
| font-size: var(--font-size-base); | |
| } | |
| tbody tr:hover { | |
| background-color: var(--color-gray-light); | |
| } | |
| .empty-row td { | |
| text-align: center; | |
| color: var(--color-gray-dark); | |
| padding: var(--spacing-xl); | |
| } | |
| .status-badge { | |
| display: inline-block; | |
| padding: var(--spacing-xs) var(--spacing-sm); | |
| border-radius: 2px; | |
| font-size: var(--font-size-small); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .status-pending { | |
| background-color: #fff3cd; | |
| color: #856404; | |
| border: var(--border-width) solid #ffc107; | |
| } | |
| .status-uploading { | |
| background-color: #cfe2ff; | |
| color: #084298; | |
| border: var(--border-width) solid #0d6efd; | |
| } | |
| .status-completed { | |
| background-color: #d1e7dd; | |
| color: #0f5132; | |
| border: var(--border-width) solid #198754; | |
| } | |
| .status-failed { | |
| background-color: #f8d7da; | |
| color: #842029; | |
| border: var(--border-width) solid #f5c2c7; | |
| } | |
| /* ============================================================================ | |
| Toast Notifications | |
| ============================================================================ */ | |
| .toast { | |
| position: fixed; | |
| bottom: var(--spacing-lg); | |
| right: var(--spacing-lg); | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| background-color: var(--color-black); | |
| color: var(--color-white); | |
| border-radius: 2px; | |
| box-shadow: var(--shadow-lg); | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all var(--transition-base); | |
| pointer-events: none; | |
| max-width: 400px; | |
| z-index: 1000; | |
| } | |
| .toast.show { | |
| opacity: 1; | |
| transform: translateY(0); | |
| pointer-events: auto; | |
| } | |
| .toast.success { | |
| background-color: var(--color-success); | |
| } | |
| .toast.error { | |
| background-color: var(--color-error); | |
| } | |
| .toast.warning { | |
| background-color: var(--color-warning); | |
| } | |
| /* ============================================================================ | |
| Modal | |
| ============================================================================ */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| z-index: 999; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .modal.show { | |
| display: flex; | |
| } | |
| .modal-content { | |
| background-color: var(--color-white); | |
| padding: var(--spacing-lg); | |
| max-width: 800px; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| border: var(--border-width) solid var(--border-color); | |
| position: relative; | |
| } | |
| .modal-content h2 { | |
| font-size: var(--font-size-2xl); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .modal-close { | |
| position: absolute; | |
| top: var(--spacing-md); | |
| right: var(--spacing-md); | |
| background: none; | |
| border: none; | |
| font-size: var(--font-size-2xl); | |
| cursor: pointer; | |
| color: var(--color-black); | |
| padding: 0; | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-close:hover { | |
| color: var(--color-red); | |
| } | |
| .preview-content { | |
| background-color: var(--color-gray-light); | |
| padding: var(--spacing-lg); | |
| border: var(--border-width) solid var(--border-color); | |
| max-height: 500px; | |
| overflow-y: auto; | |
| font-family: "Courier New", monospace; | |
| font-size: var(--font-size-small); | |
| white-space: pre-wrap; | |
| word-break: break-all; | |
| } | |
| /* ============================================================================ | |
| Responsive Design | |
| ============================================================================ */ | |
| @media (max-width: 768px) { | |
| .header-content { | |
| flex-direction: column; | |
| gap: var(--spacing-lg); | |
| } | |
| .nav { | |
| flex-wrap: wrap; | |
| gap: var(--spacing-md); | |
| } | |
| .main { | |
| padding: var(--spacing-lg) var(--spacing-md); | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .form-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .queue-table, | |
| .logs-table { | |
| font-size: var(--font-size-small); | |
| } | |
| th, | |
| td { | |
| padding: var(--spacing-sm); | |
| } | |
| .section-header h2 { | |
| font-size: var(--font-size-2xl); | |
| } | |
| .modal-content { | |
| max-width: 90vw; | |
| max-height: 90vh; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .queue-controls { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .filter-select { | |
| max-width: none; | |
| } | |
| .nav { | |
| gap: var(--spacing-sm); | |
| } | |
| .nav-link { | |
| font-size: var(--font-size-small); | |
| } | |
| } | |