Spaces:
Running
Running
| /* Transparent root: on /job-launcher the page background is the surface (no nested card). */ | |
| .root { | |
| font-family: var(--font-body, system-ui, sans-serif); | |
| background: transparent; | |
| color: inherit; | |
| padding: 0 0 0.5rem; | |
| max-width: 960px; | |
| margin: 0 auto; | |
| } | |
| .root * { | |
| box-sizing: border-box; | |
| } | |
| .title { | |
| font-size: clamp(1.35rem, 2.2vw, 1.65rem); | |
| font-weight: 700; | |
| letter-spacing: -0.035em; | |
| margin-bottom: 1.5rem; | |
| color: var(--text, inherit); | |
| } | |
| .section { | |
| margin-bottom: 1.5rem; | |
| } | |
| /* Distinct raised surface (site targeting, search strings, preview) */ | |
| .surfacePanel { | |
| padding: 18px 20px; | |
| border-radius: var(--radius-xl, 16px); | |
| background: var(--surface-glass, var(--surface-card)); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid var(--surface-glass-border, var(--border-subtle)); | |
| box-shadow: var(--border-glow, var(--shadow-elevated)); | |
| } | |
| .hint { | |
| font-size: 11px; | |
| color: var(--job-launcher-nudge-fg, var(--muted)); | |
| margin-bottom: 6px; | |
| font-family: var(--font-mono); | |
| letter-spacing: 0.04em; | |
| } | |
| .tag { | |
| font-size: var(--job-launcher-font-tag, 13px); | |
| padding: 4px 10px; | |
| border-radius: var(--job-launcher-radius-pill, 8px); | |
| border: 0.5px solid var(--job-launcher-chip-off-border, #ddd); | |
| cursor: pointer; | |
| background: var(--job-launcher-chip-off-bg); | |
| color: var(--text); | |
| transition: | |
| background var(--motion-xs, 0.18s) var(--ease-soft, ease), | |
| border-color var(--motion-xs, 0.18s) var(--ease-soft, ease); | |
| display: inline-block; | |
| } | |
| .tag:hover { | |
| background: var(--surface-muted); | |
| } | |
| .tagOn { | |
| background: var(--job-launcher-chip-on-bg); | |
| color: var(--job-launcher-chip-on-fg); | |
| border-color: var(--job-launcher-chip-on-border); | |
| } | |
| .tagList { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--job-launcher-space-tight, 6px); | |
| } | |
| /* Inline nudge: niche job boards — uses app/globals.css tokens */ | |
| .jobBoardsNudge { | |
| font-size: var(--job-launcher-font-meta, 12px); | |
| line-height: 1.45; | |
| color: var(--job-launcher-nudge-fg, #666); | |
| margin: var(--job-launcher-space-tight, 6px) 0 | |
| var(--job-launcher-space-block, 10px); | |
| padding: 6px 0 6px 10px; | |
| border-left: 2px solid var(--job-launcher-nudge-accent); | |
| } | |
| .jobBoardsRow { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px 12px; | |
| margin: 2px 0 6px; | |
| } | |
| .jobBoardsRowEnd { | |
| display: inline-flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 10px 14px; | |
| margin-left: auto; | |
| } | |
| .jobBoardsRowLabel { | |
| font-size: var(--job-launcher-font-meta, 11px); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: var(--muted, #888); | |
| } | |
| .jobBoardsCount { | |
| font-size: var(--job-launcher-font-meta, 11px); | |
| color: var(--muted, #888); | |
| } | |
| .jobBoardsNotice { | |
| font-size: var(--job-launcher-font-meta, 11px); | |
| color: var(--muted, #888); | |
| margin: 4px 0 0; | |
| line-height: 1.35; | |
| } | |
| .jobBoardsEmpty { | |
| font-size: var(--job-launcher-font-meta, 12px); | |
| color: var(--muted, #999); | |
| margin: 0 0 6px; | |
| line-height: 1.4; | |
| } | |
| .stats { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 10px; | |
| margin: 1rem 0; | |
| } | |
| .stat { | |
| background: var(--surface-muted); | |
| border-radius: var(--radius-lg, 12px); | |
| border: 1px solid var(--border-subtle); | |
| padding: 0.85rem 1.1rem; | |
| box-shadow: var(--shadow-xs, none); | |
| } | |
| .statN { | |
| font-size: 22px; | |
| font-weight: 500; | |
| } | |
| .statL { | |
| font-size: 12px; | |
| color: var(--muted); | |
| margin-top: 2px; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| margin: 1rem 0; | |
| } | |
| .btnMain { | |
| background: transparent; | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md, 8px); | |
| padding: 9px 16px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| font-family: inherit; | |
| color: var(--text); | |
| box-shadow: none; | |
| transition: | |
| background var(--motion-xs, 0.18s) var(--ease-soft, ease), | |
| border-color var(--motion-xs, 0.18s) var(--ease-soft, ease), | |
| box-shadow var(--motion-xs, 0.18s) var(--ease-soft, ease), | |
| color var(--motion-xs, 0.18s) ease; | |
| } | |
| .btnMain:hover:not(:disabled) { | |
| background: var(--surface-muted); | |
| border-color: var(--border-subtle); | |
| } | |
| .btnMain:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .btnGo { | |
| background: var(--gradient-accent); | |
| color: var(--text-on-accent, #f4f1ea); | |
| border: 1px solid transparent; | |
| font-weight: 600; | |
| box-shadow: | |
| 0 1px 3px rgba(92, 84, 176, 0.45), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.1); | |
| } | |
| .btnGo:hover:not(:disabled) { | |
| background: var(--gradient-accent-hover); | |
| box-shadow: | |
| 0 4px 16px rgba(92, 84, 176, 0.4), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.1); | |
| } | |
| .progressBar { | |
| height: 6px; | |
| background: var(--surface-muted); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| margin: 6px 0; | |
| } | |
| .progressFill { | |
| height: 100%; | |
| background: var(--gradient-accent); | |
| border-radius: 3px; | |
| /* Smooth fill between polls (poll cadence is ~1.6s) so the bar glides instead of jumping. */ | |
| transition: width 1.6s ease-out; | |
| } | |
| .queueInfo { | |
| font-size: 13px; | |
| color: var(--muted); | |
| margin-top: 4px; | |
| } | |
| .batchRecentBlock { | |
| margin-top: 10px; | |
| padding-top: 8px; | |
| border-top: 0.5px solid var(--border-subtle); | |
| } | |
| .batchRecentTitle { | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--muted); | |
| margin-bottom: 6px; | |
| } | |
| .batchRecentList { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .batchRecentRow { | |
| font-size: 13px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: baseline; | |
| gap: 6px 10px; | |
| } | |
| .batchRecentRow a { | |
| color: var(--link); | |
| text-decoration: underline; | |
| font-weight: 500; | |
| } | |
| .batchRecentRow a:hover { | |
| color: var(--color-primary-hover); | |
| } | |
| .batchRecentMeta { | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .select { | |
| font-family: inherit; | |
| font-size: 13px; | |
| padding: 6px 10px; | |
| border: 0.5px solid var(--border-subtle); | |
| border-radius: 8px; | |
| background: var(--surface-input); | |
| color: var(--text); | |
| } | |
| .customInput { | |
| font-family: ui-monospace, monospace; | |
| font-size: 12px; | |
| padding: 8px 10px; | |
| border: 0.5px solid var(--border-subtle); | |
| border-radius: 8px; | |
| background: var(--surface-input); | |
| color: var(--text); | |
| width: 100%; | |
| margin-top: 6px; | |
| outline: none; | |
| } | |
| .customInputRow { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| margin-top: 6px; | |
| } | |
| .customInputRow input { | |
| flex: 1; | |
| } | |
| .tagRemove { | |
| margin-left: 6px; | |
| font-weight: 400; | |
| cursor: pointer; | |
| opacity: 0.6; | |
| } | |
| .tagRemove:hover { | |
| opacity: 1; | |
| } | |
| .clearAllBtn { | |
| background: none; | |
| border: none; | |
| text-decoration: underline; | |
| color: var(--muted); | |
| cursor: pointer; | |
| font-size: 11px; | |
| margin-left: auto; | |
| font-family: inherit; | |
| padding: 0; | |
| } | |
| .clearAllBtn:hover { | |
| color: var(--text); | |
| } | |
| .customInput::placeholder { | |
| color: var(--color-text-subtle); | |
| } | |
| .negPresetPreview { | |
| font-size: 11px; | |
| color: var(--muted); | |
| line-height: 1.35; | |
| margin-top: 6px; | |
| margin-bottom: 4px; | |
| word-break: break-word; | |
| } | |
| .previewTa { | |
| font-family: var(--font-mono, ui-monospace, monospace); | |
| font-size: 12px; | |
| padding: 12px 14px; | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md, 8px); | |
| background: var(--surface-input); | |
| color: var(--text); | |
| width: 100%; | |
| margin-top: 6px; | |
| outline: none; | |
| min-height: 140px; | |
| resize: vertical; | |
| line-height: 1.5; | |
| box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); | |
| background-image: linear-gradient( | |
| color-mix(in srgb, var(--accent) 6%, transparent) 0%, | |
| color-mix(in srgb, var(--accent) 6%, transparent) 100% | |
| ); | |
| tab-size: 2; | |
| } | |
| .divider { | |
| height: 1px; | |
| background: var(--border-subtle); | |
| margin: 1.25rem 0; | |
| } | |
| .row2 { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .chk { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| } | |
| /* Phrase style: vertical stack so long checkbox labels align and wrap cleanly */ | |
| .phraseStyleStack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| align-items: stretch; | |
| width: 100%; | |
| } | |
| .phraseStyleStack .select { | |
| align-self: flex-start; | |
| width: 100%; | |
| max-width: min(100%, 300px); | |
| } | |
| /* Grid keeps checkbox + caption aligned; flex+flex:1 on the text was splitting badly in some layouts */ | |
| .chkMultiline { | |
| display: grid; | |
| grid-template-columns: auto minmax(0, 1fr); | |
| column-gap: 10px; | |
| align-items: start; | |
| font-size: 13px; | |
| cursor: pointer; | |
| line-height: 1.45; | |
| margin: 0; | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| .chkMultiline input[type="checkbox"] { | |
| margin: 0.2em 0 0; | |
| justify-self: start; | |
| } | |
| .chkLabelText { | |
| min-width: 0; | |
| } | |
| .previewToolbar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .seg { | |
| display: inline-flex; | |
| border: 0.5px solid var(--border-subtle); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .seg button { | |
| border: none; | |
| background: var(--surface-card); | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| font-family: inherit; | |
| color: var(--text); | |
| } | |
| /* `aria-pressed` beats global `button` rules + matches module scope reliably. */ | |
| .seg button[aria-pressed="true"] { | |
| background: var(--job-launcher-chip-on-bg); | |
| color: var(--job-launcher-chip-on-fg); | |
| font-weight: 600; | |
| } | |
| .headlessCard { | |
| border: 0.5px solid var(--border-subtle); | |
| border-radius: 8px; | |
| padding: 8px 10px; | |
| background: transparent; | |
| } | |
| .headlessMeta { | |
| font-size: 12px; | |
| color: var(--muted); | |
| margin-bottom: 4px; | |
| } | |
| .headlessTitle { | |
| font-size: 13px; | |
| font-weight: 500; | |
| line-height: 1.35; | |
| } | |
| .headlessUrl { | |
| font-size: 12px; | |
| color: var(--muted); | |
| word-break: break-all; | |
| margin-top: 2px; | |
| } | |
| .headlessGhost { | |
| font-size: 11px; | |
| font-style: italic; | |
| color: var(--color-text-subtle); | |
| margin-top: 4px; | |
| letter-spacing: 0.01em; | |
| } | |
| .headlessErr { | |
| font-size: 12px; | |
| color: var(--danger); | |
| margin-top: 4px; | |
| } | |
| .headlessScoreLine { | |
| font-size: 12px; | |
| color: var(--muted); | |
| margin-top: 4px; | |
| } | |
| .headlessActions { | |
| display: flex; | |
| gap: 8px; | |
| margin-top: 6px; | |
| } | |
| .headlessHelp { | |
| margin-top: 8px; | |
| font-size: 12px; | |
| } | |
| .headlessHelpSummary { | |
| cursor: pointer; | |
| list-style: none; | |
| color: var(--link); | |
| font-weight: 500; | |
| user-select: none; | |
| } | |
| .headlessHelpSummary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .headlessHelpIcon { | |
| display: inline-block; | |
| font-size: 13px; | |
| line-height: 1; | |
| vertical-align: -1px; | |
| } | |
| .headlessHelpPanel { | |
| margin-top: 8px; | |
| padding: 8px 10px; | |
| border-radius: 8px; | |
| background: var(--surface-muted); | |
| border: 0.5px solid var(--border-subtle); | |
| color: var(--text); | |
| line-height: 1.45; | |
| } | |
| .headlessHelpPanel p { | |
| margin: 0 0 6px; | |
| } | |
| .headlessHelpPanel p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .openLink { | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| } | |
| .batchApplyToolbar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 10px 14px; | |
| } | |
| .batchApplySticky { | |
| position: sticky; | |
| top: 0; | |
| z-index: 4; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 8px 14px; | |
| padding: 10px 12px; | |
| margin-bottom: 12px; | |
| border-radius: 8px; | |
| border: 0.5px solid var(--hairline); | |
| font-size: 13px; | |
| line-height: 1.4; | |
| background: var(--surface-muted); | |
| } | |
| .batchApplyStickyRunning { | |
| border-color: color-mix(in srgb, var(--accent) 45%, transparent); | |
| background: color-mix(in srgb, var(--accent) 12%, transparent); | |
| } | |
| .batchApplyStickyInterrupted { | |
| border-color: color-mix(in srgb, var(--warning) 45%, transparent); | |
| background: var(--warning-bg); | |
| } | |
| .batchApplyStickyCancelled { | |
| border-color: color-mix(in srgb, var(--danger) 40%, transparent); | |
| background: var(--danger-bg); | |
| } | |
| .batchApplyStickyCompleted { | |
| border-color: color-mix(in srgb, var(--success) 40%, transparent); | |
| background: var(--success-bg); | |
| } | |
| .batchApplyStickyLead { | |
| flex: 1 1 220px; | |
| min-width: 0; | |
| } | |
| .batchApplyStickyMeta { | |
| font-size: 12px; | |
| color: var(--muted, #888); | |
| white-space: nowrap; | |
| } | |
| .batchApplyCancel { | |
| margin-left: auto; | |
| padding: 4px 10px; | |
| font-size: 12px; | |
| font-family: inherit; | |
| cursor: pointer; | |
| border-radius: 6px; | |
| border: 0.5px solid var(--hairline); | |
| background: var(--surface); | |
| color: inherit; | |
| } | |
| .batchApplyCancel:hover { | |
| background: var(--surface-muted); | |
| } | |
| .batchApplyPartialFail { | |
| padding: 8px 10px; | |
| border-radius: 8px; | |
| border: 0.5px dashed color-mix(in srgb, var(--warning) 50%, transparent); | |
| background: var(--warning-bg); | |
| } | |
| .batchApplyRetry { | |
| padding: 4px 10px; | |
| font-size: 12px; | |
| font-family: inherit; | |
| cursor: pointer; | |
| border-radius: 6px; | |
| border: 0.5px solid var(--hairline); | |
| background: transparent; | |
| color: var(--muted); | |
| } | |
| .batchApplyRetry:hover:not(:disabled) { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .batchApplyCardActive { | |
| animation: batchApplyPulse 1.2s ease-in-out infinite; | |
| border-color: var(--accent) ; | |
| box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); | |
| } | |
| @keyframes batchApplyPulse { | |
| 0%, | |
| 100% { | |
| box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); | |
| } | |
| 50% { | |
| box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); | |
| } | |
| } | |
| .doneMsg { | |
| color: var(--success); | |
| } | |
| /* First-time UX: subtle pulse (CSS only) */ | |
| @keyframes ftuxPulseGlow { | |
| 0%, | |
| 100% { | |
| box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); | |
| } | |
| 50% { | |
| box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); | |
| } | |
| } | |
| .ftuxPulse { | |
| border-radius: 6px; | |
| animation: ftuxPulseGlow 2s ease-in-out infinite; | |
| } | |
| .ftuxTip { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| font-size: 12px; | |
| line-height: 1.45; | |
| color: var(--job-launcher-nudge-fg); | |
| margin: 0 0 8px; | |
| padding: 8px 10px; | |
| border-radius: 6px; | |
| border: 1px solid var(--job-launcher-chip-on-border); | |
| background: var(--surface-muted); | |
| } | |
| .ftuxTipDismiss { | |
| flex-shrink: 0; | |
| width: 24px; | |
| height: 24px; | |
| border: none; | |
| border-radius: 4px; | |
| background: transparent; | |
| color: var(--muted); | |
| font-size: 18px; | |
| line-height: 1; | |
| cursor: pointer; | |
| } | |
| .ftuxTipDismiss:hover { | |
| background: var(--surface); | |
| color: var(--text); | |
| } | |
| /* Smart Search: footer shown above the partial result list while more are streaming in. */ | |
| .partialFooter { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| align-self: flex-start; | |
| padding: 4px 10px; | |
| border-radius: 999px; | |
| background: var(--surface-muted); | |
| border: 1px solid var(--job-launcher-chip-on-border); | |
| color: var(--muted); | |
| font-size: 12px; | |
| line-height: 1.4; | |
| } | |
| .partialDot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| animation: partialPulse 1.2s ease-in-out infinite; | |
| } | |
| @keyframes partialPulse { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| opacity: 0.55; | |
| } | |
| 50% { | |
| transform: scale(1.25); | |
| opacity: 1; | |
| } | |
| } | |