Spaces:
Sleeping
Sleeping
| /* Universal Media Downloader - Enhanced Styles */ | |
| /* Based on Dark Mode First Design with High Contrast */ | |
| /* CSS Custom Properties */ | |
| :root { | |
| /* Colors - Dark Mode First */ | |
| --primary-100: #A5F3FC; | |
| --primary-500: #06B6D4; | |
| --primary-700: #0E7490; | |
| --bg-page: #000000; | |
| --bg-surface: #141414; | |
| --border-default: #262626; | |
| --text-primary: #E4E4E7; | |
| --text-secondary: #A3A3A3; | |
| --text-heading: #FAFAFA; | |
| --success: #22C55E; | |
| --warning: #FBBF24; | |
| --error: #F43F5E; | |
| /* Typography */ | |
| --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; | |
| /* Spacing (4px Grid System) */ | |
| --space-xs: 8px; | |
| --space-sm: 12px; | |
| --space-md: 16px; | |
| --space-lg: 24px; | |
| --space-xl: 32px; | |
| --space-xxl: 48px; | |
| --space-xxxl: 64px; | |
| /* Border Radius */ | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| /* Transitions */ | |
| --transition-fast: 150ms ease-out; | |
| --transition-normal: 200ms ease-out; | |
| --transition-slow: 300ms cubic-bezier(0.25, 1, 0.5, 1); | |
| /* Shadows */ | |
| --shadow-focus: 0 0 0 3px rgba(6, 182, 212, 0.4); | |
| --shadow-hover: 0 0 12px 0 rgba(6, 182, 212, 0.2); | |
| } | |
| /* Reset and Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 16px; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: var(--font-family); | |
| font-size: 16px; | |
| line-height: 1.5; | |
| color: var(--text-primary); | |
| background-color: var(--bg-page); | |
| min-height: 100vh; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| overflow-x: hidden; | |
| } | |
| /* Screen Reader Only */ | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border: 0; | |
| } | |
| /* App Container */ | |
| .app-container { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: var(--space-xl); | |
| } | |
| /* Header */ | |
| .app-header { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| margin-bottom: var(--space-xl); | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .app-title { | |
| font-size: 48px; | |
| font-weight: 700; | |
| line-height: 1.2; | |
| color: var(--text-heading); | |
| margin: 0; | |
| } | |
| .header-controls { | |
| display: flex; | |
| gap: var(--space-sm); | |
| } | |
| .icon-btn { | |
| width: 48px; | |
| height: 48px; | |
| background: transparent; | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition-normal); | |
| } | |
| .icon-btn:hover { | |
| border-color: var(--primary-500); | |
| color: var(--primary-500); | |
| box-shadow: var(--shadow-hover); | |
| } | |
| .icon-btn:focus { | |
| outline: none; | |
| box-shadow: var(--shadow-focus); | |
| } | |
| .icon { | |
| width: 20px; | |
| height: 20px; | |
| fill: currentColor; | |
| } | |
| /* Main Content */ | |
| .app-main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-xl); | |
| padding-bottom: 80px; /* Space for bottom nav on mobile */ | |
| } | |
| /* Section Styles */ | |
| .section-title { | |
| font-size: 24px; | |
| font-weight: 600; | |
| line-height: 1.3; | |
| color: var(--text-heading); | |
| margin-bottom: var(--space-md); | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-md); | |
| } | |
| /* Input Section */ | |
| .input-section { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| } | |
| .url-form { | |
| margin: 0; | |
| } | |
| .input-group { | |
| margin-bottom: var(--space-sm); | |
| } | |
| .input-label { | |
| display: block; | |
| font-size: 16px; | |
| font-weight: 500; | |
| color: var(--text-heading); | |
| margin-bottom: var(--space-xs); | |
| } | |
| .url-input-container { | |
| display: flex; | |
| gap: var(--space-sm); | |
| align-items: stretch; | |
| } | |
| .url-input { | |
| flex: 1; | |
| height: 56px; | |
| background: var(--bg-page); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| font-size: 16px; | |
| padding: 0 var(--space-md); | |
| transition: all var(--transition-normal); | |
| } | |
| .url-input::placeholder { | |
| color: var(--text-secondary); | |
| font-family: var(--font-mono); | |
| } | |
| .url-input:focus { | |
| outline: none; | |
| border-color: var(--primary-500); | |
| box-shadow: var(--shadow-focus); | |
| } | |
| .analyze-btn { | |
| min-width: 120px; | |
| height: 56px; | |
| background: var(--primary-500); | |
| color: var(--text-heading); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-size: 16px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--transition-slow); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-xs); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .analyze-btn:hover { | |
| background: var(--primary-700); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-hover); | |
| } | |
| .analyze-btn:active { | |
| transform: translateY(0); | |
| background: var(--primary-700); | |
| } | |
| .analyze-btn:focus { | |
| outline: none; | |
| box-shadow: var(--shadow-focus); | |
| } | |
| .analyze-btn:disabled { | |
| background: var(--border-default); | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| .btn-loading { | |
| display: none; | |
| } | |
| .analyze-btn.loading .btn-text { | |
| display: none; | |
| } | |
| .analyze-btn.loading .btn-loading { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .spinner { | |
| width: 20px; | |
| height: 20px; | |
| animation: spin 1s linear infinite; | |
| } | |
| .path { | |
| stroke-dasharray: 90, 150; | |
| stroke-dashoffset: 0; | |
| stroke-linecap: round; | |
| animation: dash 1.5s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes dash { | |
| 0% { | |
| stroke-dasharray: 1, 150; | |
| stroke-dashoffset: 0; | |
| } | |
| 50% { | |
| stroke-dasharray: 90, 150; | |
| stroke-dashoffset: -35; | |
| } | |
| 100% { | |
| stroke-dashoffset: -124; | |
| } | |
| } | |
| .help-text { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| line-height: 1.4; | |
| } | |
| /* Status Section */ | |
| .status-section { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| } | |
| .status-container { | |
| min-height: 60px; | |
| } | |
| .status-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| .status-icon { | |
| font-size: 18px; | |
| } | |
| .status-text { | |
| color: var(--text-primary); | |
| line-height: 1.5; | |
| } | |
| /* Progress Section */ | |
| .progress-section { | |
| margin-top: var(--space-md); | |
| } | |
| .progress-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .progress-title { | |
| font-size: 16px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| } | |
| .progress-speed { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| font-family: var(--font-mono); | |
| } | |
| .progress-bar-container { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| .progress-bar { | |
| flex: 1; | |
| height: 8px; | |
| background: var(--border-default); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .progress-bar::-webkit-progress-bar { | |
| background: var(--border-default); | |
| border-radius: 4px; | |
| } | |
| .progress-bar::-webkit-progress-value { | |
| background: var(--primary-500); | |
| border-radius: 4px; | |
| transition: width var(--transition-normal); | |
| } | |
| .progress-bar::-moz-progress-bar { | |
| background: var(--primary-500); | |
| border-radius: 4px; | |
| } | |
| .progress-percentage { | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| min-width: 40px; | |
| text-align: right; | |
| } | |
| /* Media Info Section */ | |
| .media-info-section { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| } | |
| .media-info { | |
| display: flex; | |
| gap: var(--space-lg); | |
| align-items: flex-start; | |
| } | |
| .media-thumbnail { | |
| flex-shrink: 0; | |
| width: 120px; | |
| height: 80px; | |
| background: var(--bg-page); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-sm); | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .media-thumbnail img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .placeholder-icon { | |
| width: 32px; | |
| height: 32px; | |
| fill: var(--text-secondary); | |
| } | |
| .media-details { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .media-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| line-height: 1.4; | |
| color: var(--text-heading); | |
| margin-bottom: var(--space-xs); | |
| word-wrap: break-word; | |
| } | |
| .media-meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--space-sm); | |
| margin-bottom: var(--space-xs); | |
| align-items: center; | |
| } | |
| .media-uploader { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .platform-badge { | |
| background: var(--primary-500); | |
| color: var(--text-heading); | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| } | |
| .duration { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| font-family: var(--font-mono); | |
| } | |
| .media-stats { | |
| display: flex; | |
| gap: var(--space-md); | |
| } | |
| .stat-item { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| /* Formats Section */ | |
| .formats-section { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| } | |
| .format-filters { | |
| display: flex; | |
| gap: var(--space-xs); | |
| } | |
| .filter-btn { | |
| padding: var(--space-xs) var(--space-sm); | |
| background: transparent; | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| } | |
| .filter-btn:hover { | |
| border-color: var(--primary-500); | |
| color: var(--primary-500); | |
| } | |
| .filter-btn.active { | |
| background: var(--primary-500); | |
| color: var(--text-heading); | |
| border-color: var(--primary-500); | |
| } | |
| .format-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| margin-top: var(--space-md); | |
| } | |
| .format-item { | |
| background: var(--bg-page); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-md); | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| min-height: 72px; | |
| } | |
| .format-item:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-color: var(--primary-500); | |
| transform: translateY(-1px); | |
| } | |
| .format-item:focus { | |
| outline: none; | |
| border-color: var(--primary-500); | |
| box-shadow: var(--shadow-focus); | |
| } | |
| .format-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .format-title { | |
| font-size: 16px; | |
| font-weight: 500; | |
| color: var(--text-heading); | |
| line-height: 1.3; | |
| margin-bottom: 2px; | |
| word-wrap: break-word; | |
| } | |
| .format-details { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| line-height: 1.4; | |
| font-family: var(--font-mono); | |
| } | |
| .format-actions { | |
| display: flex; | |
| gap: var(--space-xs); | |
| align-items: center; | |
| } | |
| .format-item.downloading { | |
| background: var(--primary-500); | |
| color: var(--text-heading); | |
| border-color: var(--primary-500); | |
| } | |
| .format-item.completed { | |
| background: var(--success); | |
| color: var(--bg-page); | |
| border-color: var(--success); | |
| } | |
| .format-item.error { | |
| background: var(--error); | |
| color: var(--text-heading); | |
| border-color: var(--error); | |
| } | |
| /* Download Options Section */ | |
| .download-options-container { | |
| margin-top: var(--space-md); | |
| } | |
| .download-options-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--text-heading); | |
| margin-bottom: var(--space-sm); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-xs); | |
| } | |
| .download-options-title::before { | |
| content: "⚠️"; | |
| font-size: 20px; | |
| } | |
| .download-instruction { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| margin-bottom: var(--space-md); | |
| padding: var(--space-sm); | |
| background: rgba(255, 193, 7, 0.1); | |
| border: 1px solid rgba(255, 193, 7, 0.3); | |
| border-radius: var(--radius-sm); | |
| line-height: 1.4; | |
| } | |
| .download-link { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| padding: var(--space-md); | |
| margin-bottom: var(--space-sm); | |
| background: var(--bg-page); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| transition: all var(--transition-normal); | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .download-link:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-color: var(--primary-500); | |
| transform: translateY(-1px); | |
| color: var(--primary-500); | |
| } | |
| .download-link:focus { | |
| outline: none; | |
| border-color: var(--primary-500); | |
| box-shadow: var(--shadow-focus); | |
| } | |
| .download-icon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 16px; | |
| height: 16px; | |
| color: var(--primary-500); | |
| flex-shrink: 0; | |
| } | |
| .download-text-container { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .download-text { | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| word-break: break-all; | |
| margin-bottom: 2px; | |
| } | |
| .download-file-info { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| font-family: var(--font-mono); | |
| word-break: break-all; | |
| opacity: 0.8; | |
| } | |
| /* Queue Section */ | |
| .queue-section { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| } | |
| .queue-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| } | |
| .queue-item { | |
| background: var(--bg-page); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-md); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| min-height: 80px; | |
| } | |
| .queue-thumbnail { | |
| width: 64px; | |
| height: 40px; | |
| background: var(--border-default); | |
| border-radius: var(--radius-sm); | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .queue-thumbnail img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| border-radius: var(--radius-sm); | |
| } | |
| .queue-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .queue-title { | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--text-heading); | |
| line-height: 1.3; | |
| margin-bottom: 2px; | |
| word-wrap: break-word; | |
| } | |
| .queue-url { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| font-family: var(--font-mono); | |
| word-wrap: break-word; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .queue-progress { | |
| width: 120px; | |
| text-align: center; | |
| } | |
| .queue-progress .progress-bar { | |
| height: 4px; | |
| margin-bottom: 4px; | |
| } | |
| .queue-status { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| /* Error and Success Sections */ | |
| .error-section, | |
| .success-section { | |
| background: rgba(244, 63, 94, 0.1); | |
| border: 1px solid var(--error); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| } | |
| .success-section { | |
| background: rgba(34, 197, 94, 0.1); | |
| border-color: var(--success); | |
| } | |
| .error-container, | |
| .success-container { | |
| min-height: 60px; | |
| } | |
| .error-item, | |
| .success-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .error-item:last-child, | |
| .success-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .error-icon { | |
| color: var(--error); | |
| font-size: 18px; | |
| } | |
| .success-icon { | |
| color: var(--success); | |
| font-size: 18px; | |
| } | |
| .error-text, | |
| .success-text { | |
| font-size: 16px; | |
| line-height: 1.5; | |
| } | |
| /* Secondary Button */ | |
| .secondary-btn { | |
| padding: var(--space-xs) var(--space-md); | |
| background: transparent; | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| } | |
| .secondary-btn:hover { | |
| border-color: var(--text-primary); | |
| color: var(--text-heading); | |
| } | |
| /* Bottom Navigation */ | |
| .bottom-nav { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: var(--bg-surface); | |
| border-top: 1px solid var(--border-default); | |
| display: none; | |
| padding: var(--space-sm) var(--space-md); | |
| gap: var(--space-sm); | |
| z-index: 1000; | |
| } | |
| .nav-item { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| padding: var(--space-sm); | |
| border-radius: var(--radius-sm); | |
| transition: all var(--transition-normal); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .nav-item.active { | |
| background: var(--primary-500); | |
| color: var(--text-heading); | |
| } | |
| .nav-icon { | |
| width: 20px; | |
| height: 20px; | |
| fill: currentColor; | |
| } | |
| .nav-label { | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| /* Settings Modal */ | |
| .modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 2000; | |
| padding: var(--space-md); | |
| } | |
| .modal-content { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| max-width: 500px; | |
| width: 100%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-lg); | |
| border-bottom: 1px solid var(--border-default); | |
| } | |
| .modal-header h3 { | |
| font-size: 20px; | |
| font-weight: 600; | |
| color: var(--text-heading); | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 24px; | |
| cursor: pointer; | |
| padding: 0; | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| transition: all var(--transition-normal); | |
| } | |
| .modal-close:hover { | |
| background: var(--border-default); | |
| color: var(--text-primary); | |
| } | |
| .modal-body { | |
| padding: var(--space-lg); | |
| } | |
| .setting-group { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-lg); | |
| } | |
| .setting-label { | |
| font-size: 16px; | |
| color: var(--text-primary); | |
| } | |
| .toggle { | |
| position: relative; | |
| display: inline-block; | |
| width: 48px; | |
| height: 24px; | |
| } | |
| .toggle input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--border-default); | |
| border-radius: 24px; | |
| transition: var(--transition-normal); | |
| } | |
| .toggle-slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 18px; | |
| width: 18px; | |
| left: 3px; | |
| bottom: 3px; | |
| background: var(--text-primary); | |
| border-radius: 50%; | |
| transition: var(--transition-normal); | |
| } | |
| .toggle input:checked + .toggle-slider { | |
| background: var(--primary-500); | |
| } | |
| .toggle input:checked + .toggle-slider:before { | |
| transform: translateX(24px); | |
| background: var(--text-heading); | |
| } | |
| .setting-select { | |
| background: var(--bg-page); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| padding: var(--space-xs) var(--space-sm); | |
| font-size: 14px; | |
| cursor: pointer; | |
| } | |
| .setting-select:focus { | |
| outline: none; | |
| border-color: var(--primary-500); | |
| box-shadow: var(--shadow-focus); | |
| } | |
| .modal-footer { | |
| padding: var(--space-lg); | |
| border-top: 1px solid var(--border-default); | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .primary-btn { | |
| padding: var(--space-sm) var(--space-lg); | |
| background: var(--primary-500); | |
| color: var(--text-heading); | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| font-size: 16px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| } | |
| .primary-btn:hover { | |
| background: var(--primary-700); | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-hover); | |
| } | |
| .primary-btn:focus { | |
| outline: none; | |
| box-shadow: var(--shadow-focus); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 767px) { | |
| .app-container { | |
| padding: var(--space-md); | |
| } | |
| .app-title { | |
| font-size: 32px; | |
| } | |
| .header-content { | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| text-align: center; | |
| } | |
| .url-input-container { | |
| flex-direction: column; | |
| } | |
| .analyze-btn { | |
| width: 100%; | |
| } | |
| .section-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: var(--space-sm); | |
| } | |
| .media-info { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .media-thumbnail { | |
| align-self: center; | |
| } | |
| .format-item { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: var(--space-sm); | |
| } | |
| .format-actions { | |
| align-self: flex-end; | |
| } | |
| .queue-item { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: var(--space-sm); | |
| } | |
| .queue-progress { | |
| width: 100%; | |
| } | |
| .bottom-nav { | |
| display: flex; | |
| } | |
| .app-main { | |
| padding-bottom: 100px; /* More space for bottom nav */ | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .bottom-nav { | |
| display: none; | |
| } | |
| .app-main { | |
| padding-bottom: 0; | |
| } | |
| } | |
| /* High Contrast Mode */ | |
| @media (prefers-contrast: high) { | |
| :root { | |
| --border-default: #666666; | |
| --text-secondary: #CCCCCC; | |
| } | |
| .url-input, | |
| .analyze-btn, | |
| .format-item, | |
| .queue-item { | |
| border-width: 2px; | |
| } | |
| } | |
| /* Reduced Motion */ | |
| @media (prefers-reduced-motion: reduce) { | |
| * { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| .spinner { | |
| animation: none; | |
| } | |
| .path { | |
| animation: none; | |
| } | |
| } | |
| /* Print Styles */ | |
| @media print { | |
| .app-header, | |
| .bottom-nav, | |
| .icon-btn, | |
| .analyze-btn { | |
| display: none; | |
| } | |
| .app-container { | |
| padding: 0; | |
| } | |
| body { | |
| background: white; | |
| color: black; | |
| } | |
| } |