/* ============================================================================ Field Instrument — Content OS design tokens (see DESIGN.md) Fonts (IBM Plex Sans + IBM Plex Mono) are loaded via in index.html . ============================================================================ */ :root { --fi-teal-700: #0b6e66; --fi-teal-600: #0a5f58; --fi-teal: #2eb3a6; --fi-teal-100: #e3f4f1; --fi-ink: #1c2026; --fi-ink-muted: #5b626b; --fi-bg: #ffffff; --fi-surface: #f8fafb; --fi-border: #e2e5ea; --fi-border-strong: #cdd3da; --fi-success: #157a45; --fi-success-tint: #e6f5ec; --fi-warning: #8a6209; --fi-warning-tint: #fcf2dc; --fi-danger: #c0392f; --fi-danger-tint: #fbe9e7; --fi-queued: #52647d; --fi-queued-tint: #eef1f6; --fi-r-sm: 4px; --fi-r-md: 6px; --fi-r-lg: 10px; --fi-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --fi-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fi-shadow-overlay: 0 4px 16px -4px rgba(20, 24, 28, .16); --fi-shadow-modal: 0 16px 48px -12px rgba(20, 24, 28, .28); } /* Gentle global type upgrade — one clean humanist sans everywhere. */ body { font-family: var(--fi-sans); color: var(--fi-ink); } /* Shared chrome: the tab bar reads as an instrument's mode switch, not Bootstrap. */ #content-tabs.nav-tabs { border-bottom: 1px solid var(--fi-border); gap: 2px; } #content-tabs .nav-link { color: var(--fi-ink-muted); font-weight: 500; font-size: .9rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; transition: color .15s ease, border-color .15s ease; } #content-tabs .nav-link:hover { color: var(--fi-ink); border-bottom-color: var(--fi-border-strong); } #content-tabs .nav-link.active { color: var(--fi-ink); background: transparent; border-bottom-color: var(--fi-teal-700); } /* ============================================================================ Dashboard ("Загрузить и постить") — the Field Instrument layer. Scoped to #co-dashboard so other tabs keep their current styling. ============================================================================ */ #co-dashboard { color: var(--fi-ink); } /* The pipeline panel: one deliberate surface, hairline-sectioned. No card chrome. */ .fi-panel { background: var(--fi-bg); border: 1px solid var(--fi-border); border-radius: var(--fi-r-lg); overflow: hidden; } .fi-panel + .fi-panel { margin-top: 14px; } .fi-sec { padding: 16px 20px; } .fi-sec + .fi-sec { border-top: 1px solid var(--fi-border); } .fi-title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; } .fi-title h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--fi-ink); } .fi-title .fi-sub { font-size: .8125rem; color: var(--fi-ink-muted); } .fi-live { width: 9px; height: 9px; border-radius: 50%; background: var(--fi-teal); flex: none; } .fi-stat { margin-left: auto; font-family: var(--fi-mono); font-size: .75rem; color: var(--fi-ink-muted); } .fi-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--fi-ink-muted); } .fi-sec-head svg { width: 16px; height: 16px; stroke: var(--fi-teal-700); flex: none; } .fi-sec-head .fi-sec-aside { margin-left: auto; font-weight: 400; font-size: .75rem; } .fi-sec-head .fi-sec-aside .fi-count { font-family: var(--fi-mono); color: var(--fi-teal-700); } /* Upload dropzones */ .fi-drop { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; min-height: 62px; border: 1px dashed var(--fi-border-strong); background: var(--fi-bg); border-radius: var(--fi-r-md); padding: 12px 14px; cursor: pointer; color: var(--fi-ink-muted); transition: border-color .15s ease, background .15s ease; } .fi-drop:hover, .fi-drop.bg-info-subtle { border-color: var(--fi-teal); background: var(--fi-surface) !important; } .fi-drop.fi-filled { border-style: solid; border-color: var(--fi-teal); background: var(--fi-teal-100); } .fi-drop svg { width: 22px; height: 22px; stroke: var(--fi-teal-700); flex: none; } .fi-drop .fi-drop-title { font-size: .8125rem; color: var(--fi-ink); } .fi-drop .fi-drop-hint { font-size: .75rem; color: var(--fi-ink-muted); } .fi-drop .fi-drop-name { font-family: var(--fi-mono); font-size: .75rem; color: var(--fi-teal-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .fi-drop .fi-drop-size { font-family: var(--fi-mono); font-size: .6875rem; color: var(--fi-teal-700); } .fi-clear { font-size: .75rem; color: var(--fi-ink-muted); } .fi-clear:hover { color: var(--fi-danger); } /* Form controls — scoped, instrument-grade */ #co-dashboard .form-control, #co-dashboard .form-select { border: 1px solid var(--fi-border); border-radius: var(--fi-r-md); color: var(--fi-ink); font-size: .875rem; box-shadow: none; } #co-dashboard .form-control::placeholder { color: var(--fi-ink-muted); opacity: 1; } #co-dashboard .form-control:focus, #co-dashboard .form-select:focus { border-color: var(--fi-teal-700); box-shadow: 0 0 0 2px rgba(46, 179, 166, .35); } #co-dashboard .form-label { color: var(--fi-ink-muted); font-size: .75rem; font-weight: 500; } #co-dashboard textarea.form-control { font-size: .8125rem; line-height: 1.5; } /* Accounts picker — the signature dense surface */ #wm-accounts { border: 1px solid var(--fi-border) !important; background: var(--fi-bg) !important; border-radius: var(--fi-r-md); padding: 0 !important; max-height: 220px; } .wm-grp { border-top: 1px solid var(--fi-border); } .wm-grp:first-child { border-top: 0; } .wm-grp-head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--fi-surface); font-size: .8125rem; font-weight: 500; color: var(--fi-ink); } .wm-grp-head .wm-grp-count { font-family: var(--fi-mono); font-size: .75rem; color: var(--fi-ink-muted); } .wm-grp-head .wm-grp-actions { margin-left: auto; display: flex; gap: 8px; } .wm-grp-pick { font-size: .75rem; color: var(--fi-teal-700); text-decoration: none; } .wm-grp-pick:hover { text-decoration: underline; } .wm-grp-body { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 12px 10px 28px; } #wm-accounts .form-check { margin: 0; min-height: auto; padding-left: 0; display: inline-flex; align-items: center; gap: 7px; } #wm-accounts .form-check-input { width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--fi-border-strong); border-radius: var(--fi-r-sm); cursor: pointer; flex: none; } #wm-accounts .form-check-input:checked { background-color: var(--fi-teal); border-color: var(--fi-teal); } #wm-accounts .form-check-input:focus { box-shadow: 0 0 0 2px rgba(46, 179, 166, .35); border-color: var(--fi-teal); } #wm-accounts .form-check-label { font-family: var(--fi-mono); font-size: .75rem; color: var(--fi-ink); cursor: pointer; } .wm-pick-bar { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: .75rem; } .wm-pick-bar a { color: var(--fi-teal-700); text-decoration: none; } .wm-pick-bar a:hover { text-decoration: underline; } .wm-pick-bar .wm-pick-count { margin-left: auto; font-family: var(--fi-mono); color: var(--fi-teal-700); } /* Segmented control (scheduling mode) */ .fi-seg { display: inline-flex; border: 1px solid var(--fi-border-strong); border-radius: var(--fi-r-md); overflow: hidden; } .fi-seg button { border: 0; background: var(--fi-bg); color: var(--fi-ink-muted); font-size: .8125rem; font-weight: 500; padding: 7px 16px; cursor: pointer; border-left: 1px solid var(--fi-border); transition: color .15s ease, background .15s ease; } .fi-seg button:first-child { border-left: 0; } .fi-seg button:hover { color: var(--fi-ink); background: var(--fi-surface); } .fi-seg button.fi-seg-on { background: var(--fi-teal-700); color: #fff; } .fi-seg button:focus-visible { outline: 2px solid var(--fi-teal); outline-offset: -2px; } /* Checkboxes (caption rotation, preview-first) */ #co-dashboard .form-check-input:checked { background-color: var(--fi-teal); border-color: var(--fi-teal); } #co-dashboard .form-check-input:focus { box-shadow: 0 0 0 2px rgba(46, 179, 166, .35); border-color: var(--fi-teal); } #co-dashboard .form-check-label { color: var(--fi-ink); } #co-dashboard .form-check-label.small, #co-dashboard .text-muted { color: var(--fi-ink-muted) !important; } /* Buttons — one primary action, restrained secondaries */ #wm-submit, #co-dashboard .fi-btn-primary { background: var(--fi-teal-700); border: 1px solid var(--fi-teal-700); color: #fff; font-weight: 500; font-size: .875rem; border-radius: var(--fi-r-md); padding: 8px 18px; display: inline-flex; align-items: center; gap: 7px; transition: background .15s ease; } #wm-submit:hover:not(:disabled), #co-dashboard .fi-btn-primary:hover { background: var(--fi-teal-600); border-color: var(--fi-teal-600); color: #fff; } #wm-submit:disabled { background: var(--fi-surface); border-color: var(--fi-border); color: var(--fi-ink-muted); opacity: 1; } #wm-submit:focus-visible { outline: 2px solid var(--fi-teal); outline-offset: 2px; } #wm-preview-publish { background: var(--fi-teal-700); border-color: var(--fi-teal-700); color: #fff; font-weight: 500; border-radius: var(--fi-r-md); } #wm-preview-publish:hover { background: var(--fi-teal-600); border-color: var(--fi-teal-600); } #co-dashboard .btn-outline-secondary { color: var(--fi-ink); border-color: var(--fi-border); background: var(--fi-bg); font-weight: 500; border-radius: var(--fi-r-md); } #co-dashboard .btn-outline-secondary:hover { background: var(--fi-surface); border-color: var(--fi-border-strong); color: var(--fi-ink); } #co-dashboard .btn svg { width: 16px; height: 16px; stroke: currentColor; } /* Progress — clean determinate teal, no stripes */ #co-dashboard .progress { height: 6px; background: var(--fi-surface); border-radius: var(--fi-r-pill, 999px); overflow: hidden; } #wm-bar { background: var(--fi-teal) !important; background-image: none !important; animation: none !important; color: transparent; } #wm-status { color: var(--fi-ink); font-size: .8125rem; } #wm-log { font-family: var(--fi-mono); font-size: .75rem; color: var(--fi-ink-muted); background: var(--fi-surface); border-radius: var(--fi-r-md); padding: 8px 10px; } /* Status badges (shared vocabulary) */ .fi-badge { display: inline-block; font-size: .75rem; font-weight: 500; padding: 2px 8px; border-radius: var(--fi-r-sm); font-variant-numeric: tabular-nums; } .fi-badge-success { background: var(--fi-success-tint); color: var(--fi-success); } .fi-badge-queued { background: var(--fi-queued-tint); color: var(--fi-queued); } .fi-badge-warning { background: var(--fi-warning-tint); color: var(--fi-warning); } .fi-badge-danger { background: var(--fi-danger-tint); color: var(--fi-danger); } /* History rows */ #wm-history .wm-hist-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--fi-border); } #wm-history .wm-hist-row:first-child { border-top: 0; } #wm-history .wm-hist-meta { font-family: var(--fi-mono); font-size: .6875rem; color: var(--fi-ink-muted); } #wm-history .wm-hist-where { font-size: .6875rem; color: var(--fi-ink-muted); } /* Result links */ #wm-result-links a, #co-dashboard a { color: var(--fi-teal-700); } #co-dashboard hr { border-color: var(--fi-border); opacity: 1; } /* tabular numbers anywhere data lines up */ #co-dashboard .fi-num, #wm-result-links { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { #wm-bar, .fi-drop, #wm-submit, #content-tabs .nav-link, .fi-seg button { transition: none !important; } } /* ============================================================================ Overview ("Обзор") — the mission-control home. ============================================================================ */ #co-overview { color: var(--fi-ink); } .fi-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 4px 0 14px; } .fi-kpi { background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-r-md); padding: 12px 14px; } .fi-kpi-label { font-size: .75rem; color: var(--fi-ink-muted); margin-bottom: 4px; } .fi-kpi-num { font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--fi-ink); font-variant-numeric: tabular-nums; } .fi-kpi-num small { font-size: .8125rem; color: var(--fi-ink-muted); font-weight: 400; } .fi-kpi-num.fi-ok { color: var(--fi-teal-700); } .ov-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--fi-border); font-size: .8125rem; } .ov-row:first-child { border-top: 0; } .ov-row .ov-time { font-family: var(--fi-mono); font-size: .75rem; color: var(--fi-ink-muted); width: 84px; flex: none; } .ov-row .ov-handle { font-family: var(--fi-mono); font-size: .75rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-row a { color: var(--fi-teal-700); text-decoration: none; font-size: .75rem; } .ov-row a:hover { text-decoration: underline; } .ov-empty { color: var(--fi-ink-muted); font-size: .8125rem; padding: 8px 0; } .ov-health-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-bottom: 10px; background: var(--fi-surface); } .ov-health-bar span { display: block; } .ov-health-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .75rem; color: var(--fi-ink-muted); } .ov-health-legend b { font-weight: 500; color: var(--fi-ink); font-variant-numeric: tabular-nums; } .ov-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; } .ov-alert { background: var(--fi-danger-tint); border-radius: var(--fi-r-md); padding: 12px 14px; } .ov-alert .ov-alert-title { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 500; color: var(--fi-danger); } .ov-alert .ov-alert-body { font-size: .75rem; color: var(--fi-danger); margin-top: 4px; } .ov-alert.ov-alert-ok { background: var(--fi-success-tint); } .ov-alert.ov-alert-ok .ov-alert-title { color: var(--fi-success); } /* ============================================================================ Legacy Animagen rules (original image viewer) — unchanged. ============================================================================ */ /* Character card image styling */ .character-card-image { height: 200px; object-fit: contain; cursor: pointer; background-color: #f8f9fa; } /* Image viewer modal styling */ #image-viewer-modal .modal-dialog { max-width: 95vw; max-height: 95vh; margin: auto; display: flex; align-items: center; justify-content: center; } #image-viewer-modal .modal-content { background: transparent; border: none; box-shadow: none; } #image-viewer-img { max-width: 100%; max-height: 95vh; display: block; margin: auto; }