Spaces:
Running
Running
| .batch-add-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1000; | |
| background: rgba(0,0,0,0.6); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px; | |
| } | |
| .batch-add { | |
| width: min(560px, 92vw); | |
| max-height: 80vh; | |
| background: var(--chrome-bg); | |
| border: 1px solid var(--chrome-border-strong); | |
| border-radius: 14px; | |
| box-shadow: 0 12px 48px rgba(0,0,0,0.5); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| animation: batch-in 0.2s ease-out; | |
| } | |
| @keyframes batch-in { | |
| from { opacity: 0; transform: scale(0.95); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| .batch-add__head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 14px 18px; | |
| border-bottom: 1px solid var(--chrome-border); | |
| } | |
| .batch-add__title { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-family: var(--font-mono); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: var(--chrome-fg); | |
| } | |
| .batch-add__close { | |
| background: none; | |
| border: none; | |
| color: var(--chrome-fg-muted); | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: 6px; | |
| transition: background 0.15s; | |
| } | |
| .batch-add__close:hover { | |
| background: var(--chrome-hover-bg); | |
| } | |
| .batch-add__body { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 16px 18px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .batch-add__drop { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| padding: 28px 16px; | |
| border: 2px dashed var(--chrome-border); | |
| border-radius: 10px; | |
| color: var(--chrome-fg-muted); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-size: 0.82rem; | |
| } | |
| .batch-add__drop:hover, | |
| .batch-add__drop.is-over { | |
| border-color: var(--chrome-accent); | |
| background: rgba(255,255,255,0.02); | |
| color: var(--chrome-fg); | |
| } | |
| .batch-add__drop-hint { | |
| font-family: var(--font-mono); | |
| font-size: 0.65rem; | |
| color: var(--chrome-fg-dim); | |
| } | |
| .batch-add__file-input { | |
| display: none; | |
| } | |
| .batch-add__files { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .batch-add__kicker { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-family: var(--font-mono); | |
| font-size: 0.62rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: var(--chrome-fg-dim); | |
| margin-bottom: 4px; | |
| } | |
| .batch-add__file-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 8px; | |
| background: var(--chrome-hover-bg); | |
| border-radius: 6px; | |
| font-size: 0.76rem; | |
| } | |
| .batch-add__file-name { | |
| flex: 1; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| color: var(--chrome-fg); | |
| } | |
| .batch-add__file-size { | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| color: var(--chrome-fg-dim); | |
| flex-shrink: 0; | |
| } | |
| .batch-add__file-x { | |
| background: none; | |
| border: none; | |
| color: var(--chrome-fg-dim); | |
| cursor: pointer; | |
| padding: 2px; | |
| border-radius: 4px; | |
| } | |
| .batch-add__file-x:hover { color: var(--color-danger); } | |
| .batch-add__settings { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .batch-add__field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .batch-add__select { | |
| font-size: 0.78rem; | |
| } | |
| .batch-add__toggle { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.78rem; | |
| color: var(--chrome-fg); | |
| cursor: pointer; | |
| } | |
| .batch-add__toggle input { cursor: pointer; } | |
| .batch-add__foot { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 18px; | |
| border-top: 1px solid var(--chrome-border); | |
| } | |
| .batch-add__estimate { | |
| flex: 1; | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| color: var(--chrome-fg-dim); | |
| } | |