/* Оформление интерфейса. Своё, без фреймворка: разделов много, а стилей мало — держать целый фреймворк ради сетки и кнопки дороже, чем эти строки. */ /* Тема по умолчанию — системная; переключатель ставит data-theme на и должен побеждать системную в обе стороны. */ :root { --bg: #f4f6f8; --surface: #ffffff; --surface-alt: #eceff3; --border: #d5dae1; --text: #1b232d; --text-muted: #5c6774; --accent: #2f5d8c; --accent-contrast: #ffffff; --positive: #18794e; --attention: #9a6700; --priority-bg: #fff7ed; --priority-border: #f0c9a4; --shadow: 0 1px 2px rgba(20, 30, 45, .10); --sidebar-w: 232px; --topbar-h: 52px; --radius: 6px; --gap: 16px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14181d; --surface: #1b2027; --surface-alt: #232a33; --border: #313a45; --text: #e2e7ee; --text-muted: #9aa5b3; --accent: #7ea9d6; --accent-contrast: #10151b; --positive: #56d364; --attention: #d29922; --priority-bg: #211b14; --priority-border: #4a3020; --shadow: 0 1px 2px rgba(0, 0, 0, .40); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #14181d; --surface: #1b2027; --surface-alt: #232a33; --border: #313a45; --text: #e2e7ee; --text-muted: #9aa5b3; --accent: #7ea9d6; --accent-contrast: #10151b; --positive: #56d364; --attention: #d29922; --priority-bg: #211b14; --priority-border: #4a3020; --shadow: 0 1px 2px rgba(0, 0, 0, .40); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; /* Горизонтальной прокрутки страницы не бывает ни на какой ширине: широкое содержимое прокручивается внутри своей обёртки, а не тянет весь макет. */ max-width: 100%; overflow-x: hidden; } body { background: var(--bg); color: var(--text); font: 15px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; } a { color: var(--accent); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--text); padding: 8px 12px; z-index: 40; } .skip-link:focus { left: 8px; top: 8px; } /* ── Раскладка ─────────────────────────────────────────────────────────── */ .layout { min-height: 100vh; } .main { min-width: 0; /* без этого длинная строка растягивает колонку */ display: flex; flex-direction: column; min-height: 100vh; } /* ── Меню ──────────────────────────────────────────────────────────────── */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); max-width: 84vw; background: var(--surface); border-right: 1px solid var(--border); padding: 12px 0; overflow-y: auto; z-index: 30; transform: translateX(-100%); /* до 768px меню уезжает за край, а не сжимает контент */ transition: transform .18s ease; } .sidebar.is-open { transform: translateX(0); } .brand { padding: 6px 16px 14px; font-weight: 600; letter-spacing: .01em; color: var(--text); } .nav ul { list-style: none; margin: 0; padding: 0; } .nav__link { display: block; padding: 9px 16px; color: var(--text-muted); text-decoration: none; border-left: 3px solid transparent; } .nav__link:hover { background: var(--surface-alt); color: var(--text); } .nav__link[aria-current="page"] { color: var(--text); background: var(--surface-alt); border-left-color: var(--accent); font-weight: 600; } .scrim { position: fixed; inset: 0; background: rgba(12, 17, 23, .42); z-index: 20; } .scrim[hidden] { display: none; } /* ── Шапка ─────────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; min-height: var(--topbar-h); padding: 6px 12px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .topbar__title { margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .counters { display: flex; gap: 12px; flex: 0 1 auto; min-width: 0; } .counter { display: flex; gap: 6px; align-items: baseline; padding: 3px 9px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); white-space: nowrap; font-size: 12px; } .counter__label { color: var(--text-muted); } .counter__value { font-variant-numeric: tabular-nums; font-weight: 600; } /* На узком экране подпись счётчика прячется, цифры остаются: они и есть смысл. */ @media (max-width: 599px) { .counter__label { display: none; } } .burger, .theme-toggle, .logout { flex: 0 0 auto; width: 36px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; } .burger:hover, .theme-toggle:hover, .logout:hover { background: var(--surface-alt); } .logout { width: auto; padding: 0 10px; font: inherit; } .burger__bars, .burger__bars::before, .burger__bars::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; } .burger__bars { position: relative; } .burger__bars::before, .burger__bars::after { content: ""; position: absolute; left: 0; } .burger__bars::before { top: -5px; } .burger__bars::after { top: 5px; } .theme-toggle__mark { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; /* Полукруг: слева залито — это и есть «светлая/тёмная» без картинок и шрифтов. */ background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); } /* ── Рабочая область ───────────────────────────────────────────────────── */ .content { flex: 1 1 auto; min-width: 0; padding: var(--gap); } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; max-width: 100%; } .panel__title { margin: 0 0 6px; font-size: 18px; font-weight: 600; } .muted { color: var(--text-muted); margin: 0; } .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .draft-control { display: grid; justify-items: end; gap: 3px; text-align: right; } .draft-control button { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); background: var(--surface-alt); } .draft-control .muted { font-size: 12px; } .vacancy-actions { display: grid; justify-items: end; gap: 10px; min-width: 0; } .vacancy-upload { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 100%; } .vacancy-upload label { width: 100%; color: var(--text-muted); font-size: 12px; text-align: right; } .vacancy-upload input { min-width: 0; max-width: 240px; color: var(--text); } .vacancy-upload button { padding: 8px 12px; border: 1px solid var(--accent); border-radius: var(--radius); color: var(--accent-contrast); background: var(--accent); font: inherit; font-weight: 600; cursor: pointer; } .vacancy-upload-error { margin: -6px 0 18px; } .vacancy-list { display: grid; gap: 8px; } .vacancy-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .vacancy-row { display: grid; grid-template-columns: minmax(240px, 2fr) repeat(4, minmax(max-content, 1fr)); gap: 12px; align-items: center; padding: 11px 12px; cursor: pointer; list-style-position: inside; } .vacancy-row:hover { background: var(--surface-alt); } .vacancy-row__title { display: grid; min-width: 0; } .vacancy-row__title strong { overflow-wrap: anywhere; } .vacancy-row__title small { color: var(--text-muted); overflow-wrap: anywhere; } .verdict { font-weight: 700; } .verdict--пропуск { color: #18794e; } .verdict--отказ { color: #b42318; } .vacancy-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 16px; border-top: 1px solid var(--border); background: var(--surface-alt); } .vacancy-details h3 { margin: 0 0 8px; font-size: 15px; } .vacancy-details pre { margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; } .gate-list, .notes-list { margin: 0; padding-left: 20px; } .gate-list li + li, .notes-list li + li { margin-top: 8px; } .empty-state { margin: 18px 0 0; color: var(--text-muted); } /* ── ТОП-лист ─────────────────────────────────────────────────────────── */ .top-list { padding: 0; overflow: hidden; } .top-list__heading { margin: 0; padding: 16px 18px; } .top-list__actions { display: grid; justify-items: end; gap: 4px; text-align: right; } .top-list__actions .muted { font-size: 12px; } .placeholder-action { padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text); background: var(--surface-alt); font: inherit; font-weight: 600; cursor: pointer; } .placeholder-action:hover { border-color: var(--accent); color: var(--accent); } .top-list__scroll { border-top: 1px solid var(--border); } .top-table { width: 100%; min-width: 1180px !important; table-layout: fixed; border-collapse: collapse; } .top-table th, .top-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: top; white-space: normal; overflow-wrap: anywhere; } .top-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-alt); color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .top-col-number { width: 52px; } .top-col-score { width: 64px; } .top-col-candidate { width: 22%; } .top-col-status { width: 140px; } .top-col-why { width: 31%; } .top-col-ask { width: 22%; } .top-col-link { width: 64px; } .top-section-row th { padding: 6px 8px; background: var(--surface-alt); color: var(--text-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .top-candidate-row:hover td { background: var(--surface-alt); } .top-candidate-row--first td { background: var(--priority-bg); } .top-candidate-row--first:hover td { background: var(--priority-bg); } .top-rank label { display: flex; align-items: center; gap: 7px; color: var(--text-muted); } .top-rank input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); } .top-score { text-align: center; font-variant-numeric: tabular-nums; } .top-score strong { display: block; font-size: 20px; line-height: 1; } .top-score small { display: block; margin-top: 3px; font-size: 9px; font-weight: 800; letter-spacing: .08em; } .top-score--first, .top-score--a { color: var(--positive); } .top-score--b { color: var(--attention); } .top-candidate-title { color: var(--text); } .top-candidate-meta { margin-top: 3px; color: var(--text-muted); font-size: 12px; } .top-dynamics { display: inline-block; margin-top: 5px; padding: 1px 7px; border: 1px solid var(--priority-border); border-radius: 999px; color: var(--attention); font-size: 11px; } .top-status { color: var(--positive); font-size: 12px; } .top-long-text { color: var(--text-muted); font-size: 13px; line-height: 1.5; } .top-call-questions { color: var(--text); } .top-resume-link { text-align: center !important; white-space: nowrap !important; } .top-card-button { display: block; width: 100%; margin-bottom: 5px; padding: 5px 7px; border: 0; border-radius: var(--radius); color: var(--accent-contrast); background: var(--accent); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; } .top-card-button::after { content: " ▸"; } .top-card-button[aria-expanded="true"]::after { content: " ▾"; } .top-resume-link a { font-weight: 700; text-decoration: none; } .top-resume-link a:hover { text-decoration: underline; } .top-candidate-details td { padding: 0; background: var(--surface-alt); } .top-candidate-details[hidden] { display: none; } .top-detail-card { padding: 14px 18px; border-left: 3px solid var(--accent); } .top-detail-card h3 { margin: 0 0 10px; font-size: 15px; } .top-detail-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 0; } .top-detail-card dl div { min-width: 0; } .top-detail-card dt { color: var(--text-muted); font-size: 11px; text-transform: uppercase; } .top-detail-card dd { margin: 2px 0 0; overflow-wrap: anywhere; } .top-section-empty td { color: var(--text-muted); font-size: 12px; } @media (max-width: 599px) { .top-list__actions { justify-items: start; text-align: left; } .top-detail-card dl { grid-template-columns: 1fr 1fr; } } @media (max-width: 1199px) { .vacancy-row { grid-template-columns: 1fr 1fr; } .vacancy-row__title { grid-column: 1 / -1; } .vacancy-details { grid-template-columns: 1fr; } } @media (max-width: 599px) { .section-heading { display: grid; } .vacancy-actions { justify-items: start; } .vacancy-upload { justify-content: flex-start; } .vacancy-upload label { text-align: left; } .draft-control { justify-items: start; text-align: left; } .vacancy-row { grid-template-columns: 1fr; } } /* Обёртка таблиц заведена заранее: таблицы найма широкие, и без неё первая же из них растянет страницу вместо того, чтобы прокручиваться внутри себя. */ .table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll > table { border-collapse: collapse; min-width: max-content; } .table-scroll th, .table-scroll td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; } img, svg, video { max-width: 100%; height: auto; } pre, code { overflow-x: auto; max-width: 100%; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Вход ──────────────────────────────────────────────────────────────── */ .login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; } .login-card { width: min(100%, 380px); padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .login-card__title { margin: 0 0 4px; font-size: 22px; } .login-form { display: grid; gap: 8px; margin-top: 20px; } .login-form input { width: 100%; padding: 9px 10px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; } .login-form button { margin-top: 8px; padding: 9px 14px; color: var(--accent-contrast); background: var(--accent); border: 0; border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer; } .form-error { color: #b42318; margin: 14px 0 0; } /* ── От 768px меню видно постоянно ─────────────────────────────────────── */ @media (min-width: 768px) { .layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .sidebar { position: sticky; top: 0; height: 100vh; transform: none; max-width: none; transition: none; } .burger, .scrim { display: none; } .content { padding: 20px 24px; } }