*, *::before, *::after { box-sizing: border-box; } /* === Темы === * Дефолт - тёмная. data-theme="light" на переключает на светлую. * Если data-theme не выставлен (JS не успел или отключён) - слушаем * prefers-color-scheme: light как fallback, чтобы не было FOUC. */ :root { --bg: #0d1117; --fg: #e6edf3; --muted: #9da7b1; --accent: #ddfa00; --accent-fg: #0d1117; --border: #30363d; --card: #161b22; --card-2: #1f2530; --danger: #ef4444; --success: #10b981; --shadow: 0 1px 2px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.18); } :root[data-theme="light"] { --bg: #ffffff; --fg: #0d1117; --muted: #57606a; --accent: #ddfa00; --accent-fg: #0d1117; --border: #d0d7de; --card: #f6f8fa; --card-2: #eaeef2; --danger: #cf222e; --success: #1a7f37; --shadow: 0 1px 2px rgba(31,35,40,.06), 0 4px 16px rgba(31,35,40,.08); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #ffffff; --fg: #0d1117; --muted: #57606a; --accent: #ddfa00; --accent-fg: #0d1117; --border: #d0d7de; --card: #f6f8fa; --card-2: #eaeef2; --danger: #cf222e; --success: #1a7f37; --shadow: 0 1px 2px rgba(31,35,40,.06), 0 4px 16px rgba(31,35,40,.08); } } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; transition: background-color .2s, color .2s; } .hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; border-bottom: 1px solid var(--border); } .brand { color: var(--fg); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; } .hdr-right { display: flex; align-items: center; gap: 12px; } .nav a { color: var(--muted); text-decoration: none; margin-left: 16px; font-size: 14px; } .nav a:hover { color: var(--fg); } .theme-toggle { background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; width: 34px; height: 34px; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background .15s, border-color .15s; } .theme-toggle:hover { border-color: var(--accent); } .main { flex: 1; max-width: 920px; margin: 0 auto; padding: 48px 32px; width: 100%; } .main h1 { margin: 0 0 12px; font-size: 32px; letter-spacing: -0.02em; } .lead { color: var(--muted); margin: 0 0 32px; font-size: 16px; } /* === Dropzone === */ .dropzone { border: 2px dashed var(--border); border-radius: 12px; padding: 64px 24px; text-align: center; background: var(--card); transition: border-color .15s, background .15s, transform .15s; cursor: pointer; color: var(--muted); } .dropzone:hover { border-color: var(--accent); background: var(--card-2); color: var(--fg); } .dropzone.dragover { border-color: var(--accent); background: var(--card-2); color: var(--fg); transform: scale(1.005); } .dropzone p { margin: 0; font-size: 16px; } .link-btn { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; } :root[data-theme="light"] .link-btn { color: #5a6f00; } /* === File list === */ .file-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 8px; } .file-row { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; transition: border-color .2s, background .2s; } .file-row[data-status="done"] { border-color: var(--success); } .file-row[data-status="error"] { border-color: var(--danger); } .file-meta { min-width: 0; } .file-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-info { display: flex; gap: 8px; color: var(--muted); font-size: 13px; margin-top: 2px; } .file-format { background: var(--card-2); padding: 1px 8px; border-radius: 999px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.05em; } .file-format[data-format="unknown"] { color: var(--danger); } .file-arrow { color: var(--muted); } .format-picker { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font: inherit; cursor: pointer; } .format-picker:disabled { opacity: 0.5; cursor: not-allowed; } .file-status { display: flex; align-items: center; gap: 8px; min-width: 100px; } .status-icon { width: 18px; text-align: center; font-size: 14px; color: var(--muted); } .status-icon[data-status="done"] { color: var(--success); } .status-icon[data-status="error"] { color: var(--danger); } .status-icon[data-status="running"] { color: var(--accent); animation: spin 1s linear infinite; display: inline-block; } @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .status-progress { flex: 1; height: 6px; accent-color: var(--accent); } .btn-action { background: var(--card-2); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 14px; font: inherit; cursor: pointer; transition: background .15s, border-color .15s, transform .05s; min-width: 130px; } .btn-action:hover:not(:disabled) { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .btn-action:active:not(:disabled) { transform: translateY(1px); } .btn-action:disabled { opacity: 0.5; cursor: not-allowed; } .btn-action[data-role="download"] { background: var(--success); border-color: var(--success); color: white; } /* === Главные действия === */ .actions { display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end; } .btn { border: 1px solid var(--border); border-radius: 8px; padding: 10px 20px; font: inherit; cursor: pointer; transition: background .15s, border-color .15s, transform .05s, filter .15s; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; } .btn-primary:hover { filter: brightness(1.08); } .btn-secondary { background: var(--card-2); color: var(--fg); } .btn-secondary:hover { border-color: var(--accent); } /* === Focus-visible (доступность) === */ button:focus-visible, a:focus-visible, .format-picker:focus-visible, .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* === Promote (обновлённая карточка после успеха) === */ .promote-host { margin: 24px 0 0; } .promote { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); } .promote-success { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; padding: 20px 24px; align-items: center; } @media (prefers-reduced-motion: no-preference) { .promote-success { animation: promote-in .25s ease-out; } } @keyframes promote-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .promote-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; } .promote-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .promote-col-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 0 2px 2px; border-bottom: 1px solid var(--border); } .promote-card { background: var(--card-2); border-radius: 6px; padding: 6px 8px; font-size: 11px; display: grid; grid-template-columns: auto auto 1fr; gap: 4px 6px; align-items: center; line-height: 1.3; } .promote-card-text { grid-column: 1 / -1; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .promote-card-done .promote-card-text { color: var(--muted); text-decoration: line-through; } .promote-tag { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 9px; color: var(--muted); letter-spacing: 0.04em; } .promote-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--muted); } .promote-dot-high { background: var(--danger); } .promote-dot-med { background: var(--accent); } .promote-dot-low { background: var(--success); } .promote-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .promote-eyebrow { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .promote-title { font-size: 18px; color: var(--fg); line-height: 1.25; } .promote-text { color: var(--muted); margin: 0 0 8px; font-size: 14px; } .promote-cta { align-self: flex-start; text-decoration: none; } /* === Contacts (главная) === */ .contacts { margin-top: 48px; padding: 20px 24px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 14px; } .contacts p { margin: 0; } .contacts a { color: var(--accent); text-decoration: none; } .contacts a:hover { text-decoration: underline; } :root[data-theme="light"] .contacts a { color: #5a6f00; } /* === Footer === */ .ftr { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; color: var(--muted); padding: 16px; border-top: 1px solid var(--border); font-size: 13px; } .ftr .dot { opacity: .5; } .ftr a { color: var(--muted); text-decoration: none; } .ftr a:hover { color: var(--fg); } /* === Mobile === */ @media (max-width: 640px) { .hdr { padding: 12px 16px; } .main { padding: 24px 16px; } .file-row { grid-template-columns: 1fr; gap: 8px; } .file-arrow { display: none; } .actions { flex-direction: column; } .actions .btn { width: 100%; } .promote-success { grid-template-columns: 1fr; gap: 16px; padding: 16px; } .promote-board { order: 2; } .promote-body { order: 1; } .promote-cta { align-self: stretch; text-align: center; } }