Spaces:
Running
Running
| /* ============================================ | |
| S3 to HF Bucket Importer - Dark Theme | |
| Inspired by HF Buckets announcement design | |
| ============================================ */ | |
| :root { | |
| --bg-primary: #0a0e14; | |
| --bg-secondary: #131920; | |
| --bg-card: #161b22; | |
| --bg-input: #0d1117; | |
| --bg-hover: #1c2330; | |
| --border: #30363d; | |
| --border-focus: #40c9a2; | |
| --accent: #40c9a2; | |
| --accent-hover: #36b393; | |
| --accent-subtle: rgba(64, 201, 162, 0.1); | |
| --text-primary: #f0f0f0; | |
| --text-secondary: #8b949e; | |
| --text-muted: #6e7681; | |
| --error: #f85149; | |
| --error-bg: rgba(248, 81, 73, 0.1); | |
| --success: #3fb950; | |
| --success-bg: rgba(63, 185, 80, 0.1); | |
| --warning: #d29922; | |
| --warning-bg: rgba(210, 153, 34, 0.1); | |
| --radius: 8px; | |
| --radius-sm: 4px; | |
| --radius-lg: 12px; | |
| --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; | |
| --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; | |
| --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4); | |
| } | |
| /* ---- Reset & Base ---- */ | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| font-size: 16px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| body { | |
| font-family: var(--font-sans); | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| /* ---- Layout ---- */ | |
| .app-container { | |
| max-width: 860px; | |
| margin: 0 auto; | |
| padding: 24px 20px 80px; | |
| } | |
| /* ---- Header ---- */ | |
| .app-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px 0; | |
| margin-bottom: 32px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .app-header .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| text-decoration: none; | |
| color: var(--text-primary); | |
| } | |
| .app-header .logo-icon { | |
| font-size: 24px; | |
| } | |
| .app-header .logo-text { | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .app-header .logo-text span { | |
| color: var(--accent); | |
| } | |
| .user-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .user-info img { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| border: 2px solid var(--border); | |
| } | |
| .user-info .username { | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| } | |
| .btn-sign-out { | |
| background: none; | |
| border: 1px solid var(--border); | |
| color: var(--text-secondary); | |
| padding: 4px 12px; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| font-size: 13px; | |
| transition: all 0.15s; | |
| } | |
| .btn-sign-out:hover { | |
| border-color: var(--text-secondary); | |
| color: var(--text-primary); | |
| } | |
| /* ---- Sign-in Screen ---- */ | |
| .sign-in-screen { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 60vh; | |
| text-align: center; | |
| } | |
| .sign-in-screen .hero-icon { | |
| font-size: 64px; | |
| margin-bottom: 24px; | |
| } | |
| .sign-in-screen h1 { | |
| font-size: 32px; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| letter-spacing: -0.5px; | |
| } | |
| .sign-in-screen h1 span { | |
| color: var(--accent); | |
| } | |
| .sign-in-screen .subtitle { | |
| font-size: 16px; | |
| color: var(--text-secondary); | |
| margin-bottom: 40px; | |
| max-width: 460px; | |
| line-height: 1.7; | |
| } | |
| .btn-sign-in { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| background: var(--accent); | |
| color: #000; | |
| font-size: 16px; | |
| font-weight: 600; | |
| padding: 14px 32px; | |
| border: none; | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| box-shadow: var(--shadow); | |
| } | |
| .btn-sign-in:hover { | |
| background: var(--accent-hover); | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .btn-sign-in:active { | |
| transform: translateY(0); | |
| } | |
| .btn-sign-in svg { | |
| width: 22px; | |
| height: 22px; | |
| } | |
| .sign-in-screen .features { | |
| margin-top: 48px; | |
| display: flex; | |
| gap: 32px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .sign-in-screen .feature { | |
| text-align: center; | |
| max-width: 180px; | |
| } | |
| .sign-in-screen .feature-icon { | |
| font-size: 28px; | |
| margin-bottom: 8px; | |
| } | |
| .sign-in-screen .feature h3 { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| } | |
| .sign-in-screen .feature p { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| line-height: 1.5; | |
| } | |
| /* ---- Card / Section ---- */ | |
| .card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 24px; | |
| margin-bottom: 24px; | |
| box-shadow: var(--shadow); | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .card-header .step-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| color: #000; | |
| font-size: 14px; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| } | |
| .card-header h2 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .card-header .card-status { | |
| margin-left: auto; | |
| font-size: 13px; | |
| padding: 2px 10px; | |
| border-radius: 12px; | |
| font-weight: 500; | |
| } | |
| .card-header .card-status.connected { | |
| background: var(--success-bg); | |
| color: var(--success); | |
| } | |
| /* ---- Forms ---- */ | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .form-group.full-width { | |
| grid-column: 1 / -1; | |
| } | |
| .form-group label { | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| .form-group label .required { | |
| color: var(--error); | |
| } | |
| .form-group input, | |
| .form-group select { | |
| background: var(--bg-input); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 10px 12px; | |
| font-size: 14px; | |
| color: var(--text-primary); | |
| font-family: var(--font-sans); | |
| transition: border-color 0.15s; | |
| width: 100%; | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus { | |
| outline: none; | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 2px var(--accent-subtle); | |
| } | |
| .form-group input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .form-group .hint { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| line-height: 1.5; | |
| } | |
| /* ---- Field Help / Tooltips ---- */ | |
| .label-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .help-toggle { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| border: 1px solid var(--border); | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-size: 10px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| flex-shrink: 0; | |
| transition: all 0.15s; | |
| padding: 0; | |
| line-height: 1; | |
| font-family: var(--font-sans); | |
| } | |
| .help-toggle:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| background: var(--accent-subtle); | |
| } | |
| .field-help { | |
| display: none; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| padding: 8px 10px; | |
| margin-top: 2px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| } | |
| .field-help.visible { | |
| display: block; | |
| } | |
| .field-help code { | |
| background: var(--bg-input); | |
| padding: 1px 5px; | |
| border-radius: 3px; | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| } | |
| .field-help a { | |
| color: var(--accent); | |
| } | |
| .section-help { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| margin-bottom: 16px; | |
| padding: 12px 14px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| } | |
| .section-help a { | |
| color: var(--accent); | |
| } | |
| .form-row { | |
| display: flex; | |
| gap: 16px; | |
| align-items: flex-end; | |
| } | |
| .form-row .form-group { | |
| flex: 1; | |
| } | |
| /* ---- Buttons ---- */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| font-family: var(--font-sans); | |
| font-size: 14px; | |
| font-weight: 600; | |
| padding: 10px 20px; | |
| border-radius: var(--radius); | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| white-space: nowrap; | |
| } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .btn-primary { | |
| background: var(--accent); | |
| color: #000; | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| background: var(--accent-hover); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--text-primary); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background: var(--bg-hover); | |
| border-color: var(--text-secondary); | |
| } | |
| .btn-sm { | |
| font-size: 13px; | |
| padding: 6px 14px; | |
| } | |
| .btn-full { | |
| width: 100%; | |
| } | |
| .form-actions { | |
| margin-top: 20px; | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| } | |
| /* ---- Loading spinner ---- */ | |
| .spinner { | |
| display: inline-block; | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid transparent; | |
| border-top-color: currentColor; | |
| border-radius: 50%; | |
| animation: spin 0.6s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* ---- Alert / Messages ---- */ | |
| .alert { | |
| padding: 12px 16px; | |
| border-radius: var(--radius); | |
| font-size: 14px; | |
| line-height: 1.5; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| } | |
| .alert-error { | |
| background: var(--error-bg); | |
| border: 1px solid rgba(248, 81, 73, 0.3); | |
| color: var(--error); | |
| } | |
| .alert-success { | |
| background: var(--success-bg); | |
| border: 1px solid rgba(63, 185, 80, 0.3); | |
| color: var(--success); | |
| } | |
| .alert-warning { | |
| background: var(--warning-bg); | |
| border: 1px solid rgba(210, 153, 34, 0.3); | |
| color: var(--warning); | |
| } | |
| .alert-info { | |
| background: var(--accent-subtle); | |
| border: 1px solid rgba(64, 201, 162, 0.3); | |
| color: var(--accent); | |
| } | |
| .alert .alert-icon { | |
| flex-shrink: 0; | |
| font-size: 16px; | |
| } | |
| /* ---- File Browser / Tree View ---- */ | |
| .file-browser-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 16px; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .file-browser-stats { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| display: flex; | |
| gap: 16px; | |
| } | |
| .file-browser-stats .stat-value { | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| } | |
| .file-browser-actions { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .tree-container { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| background: var(--bg-input); | |
| max-height: 450px; | |
| overflow-y: auto; | |
| overflow-x: auto; | |
| } | |
| .tree-container::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| .tree-container::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .tree-container::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 4px; | |
| } | |
| .tree-container::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-muted); | |
| } | |
| .tree-node { | |
| display: flex; | |
| align-items: center; | |
| padding: 6px 12px; | |
| gap: 8px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| border-bottom: 1px solid rgba(48, 54, 61, 0.4); | |
| transition: background 0.1s; | |
| white-space: nowrap; | |
| } | |
| .tree-node:hover { | |
| background: var(--bg-hover); | |
| } | |
| .tree-node:last-child { | |
| border-bottom: none; | |
| } | |
| .tree-node .indent { | |
| flex-shrink: 0; | |
| } | |
| .tree-node .expand-icon { | |
| width: 16px; | |
| height: 16px; | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| transition: transform 0.15s; | |
| } | |
| .tree-node .expand-icon.expanded { | |
| transform: rotate(90deg); | |
| } | |
| .tree-node .expand-icon.hidden { | |
| visibility: hidden; | |
| } | |
| .tree-node .node-checkbox { | |
| width: 16px; | |
| height: 16px; | |
| flex-shrink: 0; | |
| accent-color: var(--accent); | |
| cursor: pointer; | |
| } | |
| .tree-node .node-icon { | |
| flex-shrink: 0; | |
| font-size: 14px; | |
| width: 18px; | |
| text-align: center; | |
| } | |
| .tree-node .node-name { | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| flex: 1; | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .tree-node .node-meta { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| flex-shrink: 0; | |
| margin-left: auto; | |
| padding-left: 16px; | |
| font-family: var(--font-mono); | |
| } | |
| .tree-node.loading .node-name { | |
| color: var(--text-muted); | |
| font-style: italic; | |
| } | |
| .tree-load-more { | |
| padding: 8px 12px; | |
| font-size: 13px; | |
| color: var(--accent); | |
| cursor: pointer; | |
| text-align: center; | |
| border-bottom: 1px solid rgba(48, 54, 61, 0.4); | |
| } | |
| .tree-load-more:hover { | |
| background: var(--bg-hover); | |
| } | |
| /* ---- CORS Fallback ---- */ | |
| .cors-fallback { | |
| margin-top: 16px; | |
| } | |
| .cors-fallback .cors-help { | |
| margin-top: 12px; | |
| } | |
| .cors-fallback details { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 12px 16px; | |
| background: var(--bg-secondary); | |
| } | |
| .cors-fallback details summary { | |
| cursor: pointer; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--accent); | |
| } | |
| .cors-fallback details pre { | |
| margin-top: 12px; | |
| padding: 12px; | |
| background: var(--bg-input); | |
| border-radius: var(--radius-sm); | |
| overflow-x: auto; | |
| font-size: 13px; | |
| font-family: var(--font-mono); | |
| color: var(--text-secondary); | |
| line-height: 1.5; | |
| } | |
| .manual-patterns { | |
| margin-top: 16px; | |
| } | |
| .manual-patterns textarea { | |
| width: 100%; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 10px 12px; | |
| font-size: 13px; | |
| font-family: var(--font-mono); | |
| color: var(--text-primary); | |
| resize: vertical; | |
| min-height: 60px; | |
| line-height: 1.5; | |
| } | |
| .manual-patterns textarea:focus { | |
| outline: none; | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 2px var(--accent-subtle); | |
| } | |
| /* ---- Destination Config ---- */ | |
| .dest-preview { | |
| margin-top: 12px; | |
| padding: 10px 14px; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| color: var(--accent); | |
| word-break: break-all; | |
| } | |
| /* ---- Import Config ---- */ | |
| .config-row { | |
| display: flex; | |
| gap: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .config-row .form-group { | |
| flex: 1; | |
| } | |
| .patterns-preview { | |
| margin-top: 12px; | |
| padding: 12px; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| max-height: 120px; | |
| overflow-y: auto; | |
| line-height: 1.6; | |
| white-space: pre-wrap; | |
| } | |
| /* ---- Job Status ---- */ | |
| .job-status-card { | |
| text-align: center; | |
| padding: 32px 24px; | |
| } | |
| .job-status-card .status-icon { | |
| font-size: 48px; | |
| margin-bottom: 16px; | |
| } | |
| .job-status-card h3 { | |
| font-size: 20px; | |
| margin-bottom: 8px; | |
| } | |
| .job-status-card .job-id { | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| margin-bottom: 20px; | |
| } | |
| .job-status-card .job-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: var(--accent); | |
| text-decoration: none; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .job-status-card .job-link:hover { | |
| text-decoration: underline; | |
| } | |
| .job-status-badge { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 12px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| margin-bottom: 16px; | |
| } | |
| .job-status-badge.scheduling { | |
| background: var(--warning-bg); | |
| color: var(--warning); | |
| } | |
| .job-status-badge.running { | |
| background: var(--accent-subtle); | |
| color: var(--accent); | |
| } | |
| .job-status-badge.completed { | |
| background: var(--success-bg); | |
| color: var(--success); | |
| } | |
| .job-status-badge.error { | |
| background: var(--error-bg); | |
| color: var(--error); | |
| } | |
| /* ---- Utility ---- */ | |
| .hidden { | |
| display: none ; | |
| } | |
| .text-muted { | |
| color: var(--text-secondary); | |
| } | |
| .text-accent { | |
| color: var(--accent); | |
| } | |
| .text-mono { | |
| font-family: var(--font-mono); | |
| } | |
| .mt-4 { margin-top: 16px; } | |
| .mb-4 { margin-bottom: 16px; } | |
| .mt-6 { margin-top: 24px; } | |
| hr { | |
| border: none; | |
| border-top: 1px solid var(--border); | |
| margin: 20px 0; | |
| } | |
| a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| /* ---- Responsive ---- */ | |
| @media (max-width: 640px) { | |
| .app-container { | |
| padding: 16px 12px 60px; | |
| } | |
| .form-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .config-row { | |
| flex-direction: column; | |
| } | |
| .sign-in-screen h1 { | |
| font-size: 24px; | |
| } | |
| .sign-in-screen .features { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .file-browser-header { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .app-header { | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| } | |