/* Report Hub v2 — единая таблица стилей (без сборки, только vanilla CSS). * * Темы переключаются атрибутом data-zone на : * work — светлая «консоль» на Space Grotesk / Space Mono (как v1); * personal — тёмная в стиле Discord на Inter (как v1); * neutral — нейтральная светлая (выбор зоны, вход, справка). * Все цвета — только через переменные: одна тема = один блок :root[data-zone]. * * Брейкпоинты: 480 / 768 / 1024 / 1440 / 2000. Горизонтального скролла нет * нигде: широкие таблицы и код прокручиваются внутри своей обёртки. */ /* ── темы ──────────────────────────────────────────────────────────────── */ :root, :root[data-zone="neutral"], :root[data-zone="work"] { --bg: #eef1f5; --bg2: #fff; --card: #fff; --raise: #f5f8fc; --ink: #1d2733; --mut: #7c8a99; --faint: #9aa7b5; --line: #e2e7ee; --line2: #dde4ec; --acc: #4d76a8; --acc-d: #436a9a; --acc-soft: #e9f0f8; --bad: #c0584a; --good: #3fae74; --warn: #c79438; --radius: 12px; --radius-lg: 16px; --mono: 'Space Mono', ui-monospace, Menlo, Consolas, monospace; --sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --shadow: 0 1px 2px rgba(30, 50, 80, .05); --shadow-h: 0 12px 28px -16px rgba(30, 50, 80, .34); --side-bg: #fff; --side-line: #e2e7ee; --topbar: #fff; --meta-transform: uppercase; --meta-spacing: .02em; } :root[data-zone="personal"] { --bg: #1a1b1e; --bg2: #2b2d31; --card: #2b2d31; --raise: #383a40; --ink: #f2f3f5; --mut: #b5bac1; --faint: #949ba4; --line: #26272b; --line2: #3a3c42; --acc: #5865f2; --acc-d: #4752c4; --acc-soft: rgba(88, 101, 242, .16); --bad: #f23f43; --good: #23a55a; --warn: #d79a2b; --radius: 16px; --radius-lg: 22px; --mono: 'Inter', ui-monospace, Menlo, Consolas, monospace; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --shadow: 0 1px 0 rgba(0, 0, 0, .2); --shadow-h: 0 14px 34px -14px rgba(88, 101, 242, .55); --side-bg: #202124; --side-line: #26272b; --topbar: #202124; --meta-transform: none; --meta-spacing: 0; } /* ── база ──────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } :root[data-zone="personal"] body { background: radial-gradient(1100px 520px at 82% -12%, rgba(88, 101, 242, .14), transparent 60%), radial-gradient(900px 480px at -8% 0%, rgba(88, 101, 242, .08), transparent 55%), var(--bg); } a { color: var(--acc-d); } :root[data-zone="personal"] a { color: #9aa4f8; } button, input, select, textarea { font-family: inherit; } img { max-width: 100%; } h1, h2, h3 { letter-spacing: -.01em; } h1 { font-size: clamp(21px, 2.4vw, 27px); margin: 0 0 6px; } h2 { font-size: 17px; margin: 26px 0 10px; } /* ── каркас ────────────────────────────────────────────────────────────── */ .app { display: grid; grid-template-columns: 276px minmax(0, 1fr); min-height: 100vh; } .side { position: sticky; top: 0; align-self: start; height: 100vh; z-index: 40; display: flex; flex-direction: column; gap: 4px; min-width: 0; background: var(--side-bg); border-right: 1px solid var(--side-line); padding: 22px 16px 16px; } .side-head { display: flex; align-items: center; gap: 11px; min-width: 0; } .side-logo { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--acc-soft); border: 1px solid var(--line2); color: var(--acc-d); } :root[data-zone="personal"] .side-logo { background: linear-gradient(160deg, #5865f2, #4049b0); border-color: transparent; color: #fff; } .brand { font-weight: 700; font-size: 18px; letter-spacing: .02em; } .brand-sub { margin-top: 3px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 14px -6px 0 0; padding-right: 6px; } .side-sep { margin: 18px 0 9px; padding-bottom: 8px; border-bottom: 1px solid var(--line2); color: var(--mut); font-weight: 700; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .side-sep-role { font-weight: 400; font-size: 10px; letter-spacing: .02em; color: var(--faint); text-transform: none; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--ink); border: 1px solid transparent; min-width: 0; } .nav a:hover { background: var(--raise); border-color: var(--line2); } .nav a.on { background: var(--acc-soft); border-color: var(--line2); font-weight: 600; } .nav .ni { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--raise); border: 1px solid var(--line2); border-radius: 8px; color: var(--ink); } .nav .ni svg { display: block; width: 18px; height: 18px; } .nav .nb { flex: 1; min-width: 0; } .nav .nt { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav .nd { display: block; font-size: 11.5px; color: var(--faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav .sub { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line2); } .side-foot { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line2); display: flex; flex-direction: column; gap: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--mut); } .side-foot .mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-foot .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .side-foot a { color: var(--faint); text-decoration: none; } .side-foot a:hover { color: var(--acc); } .main { min-width: 0; padding: clamp(14px, 2.4vw, 32px) clamp(14px, 2.6vw, 36px); } .main > .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .head-sub { margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--faint); } /* мобильная шапка со «шторкой» */ .topbar { display: none; position: sticky; top: 0; z-index: 50; align-items: center; gap: 12px; padding: 10px 14px; background: var(--topbar); border-bottom: 1px solid var(--side-line); } .burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line2); background: var(--raise); color: var(--ink); cursor: pointer; } .scrim { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(10, 14, 20, .5); } .scrim.on { display: block; } /* ── элементы интерфейса ───────────────────────────────────────────────── */ .chip, .tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; padding: 3px 8px; border-radius: 5px; white-space: nowrap; text-transform: uppercase; } .chip.ed { color: var(--acc-d); border: 1px solid var(--line2); background: var(--acc-soft); } .chip.ro { color: var(--mut); border: 1px solid var(--line2); background: var(--card); } :root[data-zone="personal"] .chip.ed { color: #fff; background: var(--acc); border-color: transparent; } .flash { border-radius: 9px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; font-weight: 600; font-family: var(--mono); overflow-wrap: anywhere; } .flash.ok { background: rgba(63, 174, 116, .14); color: var(--good); border: 1px solid rgba(63, 174, 116, .32); } .flash.err { background: rgba(192, 88, 74, .13); color: var(--bad); border: 1px solid rgba(192, 88, 74, .3); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--acc); border: 1px solid var(--acc-d); border-radius: 9px; padding: 10px 15px; font-weight: 600; font-size: 13px; color: #fff; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--acc-d); } .btn.ghost { background: var(--card); border-color: var(--line2); color: var(--ink); } .btn.ghost:hover { border-color: var(--acc); color: var(--acc-d); } .btn.bad { background: var(--card); border-color: var(--line2); color: var(--bad); } .btn[disabled] { opacity: .55; cursor: not-allowed; } .ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--mut); background: var(--card); border: 1px solid var(--line2); border-radius: 8px; cursor: pointer; text-decoration: none; } .ic:hover { border-color: var(--acc); color: var(--acc-d); } .ic.del:hover { border-color: var(--bad); color: var(--bad); } .up { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-top: 18px; } .filebtn { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 10px; border: 1px dashed var(--acc); border-radius: 9px; padding: 11px 13px; cursor: pointer; color: var(--mut); background: var(--raise); font-family: var(--mono); font-size: 12.5px; } .filebtn:hover { color: var(--acc-d); } .filebtn input { display: none; } .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .titlein, .field input, .field select, .field textarea, .inp { border: 1px solid var(--line2); border-radius: 9px; padding: 10px 12px; font-size: 13.5px; color: var(--ink); background: var(--bg2); outline: none; min-width: 0; max-width: 100%; } .titlein { flex: 0 1 240px; } .titlein:focus, .inp:focus, .field input:focus, .field textarea:focus { border-color: var(--acc); } .hint { margin-top: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); } .toolbar { margin-top: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .search { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line2); border-radius: 9px; padding: 9px 12px; } .search:focus-within { border-color: var(--acc); } .search input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink); } .seg { display: flex; border: 1px solid var(--line2); border-radius: 9px; overflow: hidden; background: var(--card); font-family: var(--mono); font-size: 11px; } .seg span { padding: 9px 13px; cursor: pointer; user-select: none; color: var(--mut); white-space: nowrap; } .seg span + span { border-left: 1px solid var(--line2); } .seg span.on { background: var(--acc); color: #fff; } .count { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; } /* ── карточки ──────────────────────────────────────────────────────────── */ .grid { margin-top: 16px; display: grid; gap: clamp(12px, 1.6vw, 18px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .rep { display: flex; flex-direction: column; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: border-color .18s, box-shadow .18s, transform .18s; } .rep:hover { border-color: var(--acc); box-shadow: var(--shadow-h); } :root[data-zone="personal"] .rep:hover { transform: translateY(-3px); } .pv { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--raise); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; } .pv img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .pv .ph { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--faint); font-family: var(--mono); font-size: 10.5px; text-align: center; padding: 10px; } .rep .body { padding: 12px 14px 13px; min-width: 0; } .rep .t { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rep .d { margin-top: 5px; font-size: 12.5px; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rep .m { margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--mut); letter-spacing: var(--meta-spacing); text-transform: var(--meta-transform); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .rep .m b { color: var(--ink); font-weight: 700; } .rep .m .sep { color: var(--line2); } .rep .m .vw { display: inline-flex; align-items: center; gap: 4px; } .acts { display: flex; gap: 7px; margin-top: 12px; align-items: center; flex-wrap: wrap; } .acts .open { flex: 1 1 120px; } .acts form { margin: 0; display: flex; } .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; } .dot.ok { background: var(--good); } .dot.warn { background: var(--warn); } .dot.fail { background: var(--bad); } .dot.unknown { background: var(--faint); } .empty { margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 5vw, 48px); text-align: center; font-family: var(--mono); font-size: 13px; color: var(--faint); } .foot { margin-top: 22px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); line-height: 1.55; } /* ── панели, таблицы, документы ────────────────────────────────────────── */ .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-top: 16px; min-width: 0; } .panel h2 { margin-top: 0; } .doc { max-width: 980px; } .rowline { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .rowline form { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .field { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; font-size: 13px; color: var(--mut); } .field textarea { min-height: 88px; } .muted { color: var(--mut); } .kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 14px; font-size: 13.5px; } .kv dt { color: var(--mut); font-family: var(--mono); font-size: 11px; text-transform: uppercase; } .kv dd { margin: 0; overflow-wrap: anywhere; } .tablewrap { overflow-x: auto; margin-top: 12px; } table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; color: var(--mut); letter-spacing: .04em; } code, .code { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; } .codebox { position: relative; background: #1d2733; color: #eef1f5; border-radius: 10px; padding: 14px 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; margin-top: 10px; } .codebox .copy { position: absolute; right: 8px; top: 8px; border: 1px solid #526171; background: #27323f; color: #fff; border-radius: 7px; padding: 4px 8px; cursor: pointer; font-size: 11px; } .steps { counter-reset: s; list-style: none; padding: 0; margin: 12px 0 0; } .steps li { counter-increment: s; position: relative; padding: 0 0 14px 42px; } .steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--acc-soft); border: 1px solid var(--line2); color: var(--acc-d); font-family: var(--mono); font-weight: 700; font-size: 12px; } .schema { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--mut); } .schema span { border: 1px dashed var(--line2); border-radius: 9px; padding: 9px 11px; background: var(--raise); } /* ── страница элемента ─────────────────────────────────────────────────── */ .vbar { display: flex; gap: 12px; align-items: center; padding: 10px 14px; flex-wrap: wrap; background: #1d2733; color: #fff; } :root[data-zone="personal"] .vbar { background: var(--bg2); border-bottom: 1px solid var(--line); } .vbar a { color: #aab8c6; text-decoration: none; font-size: 13px; } .vbar a:hover { color: #fff; } .vbar b { font-weight: 700; } .vbar label { color: #8595a4; font-family: var(--mono); font-size: 12px; display: flex; gap: 6px; align-items: center; } .vbar select { background: #27323f; color: #fff; border: 1px solid #3a4756; border-radius: 8px; padding: 6px 10px; font-family: var(--mono); font-size: 12px; } :root[data-zone="personal"] .vbar select { background: var(--bg); border-color: var(--line2); color: var(--ink); } .vbar .grow { flex: 1; } .frame { display: block; border: 0; width: 100%; height: min(78vh, 900px); background: #fff; } .itemgrid { display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; } /* ── доски ─────────────────────────────────────────────────────────────── */ .kanban { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 16px; } .col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0; } .col h3 { margin: 0 0 10px; font-size: 13px; font-family: var(--mono); text-transform: uppercase; color: var(--mut); letter-spacing: .05em; } .cardx { background: var(--raise); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 11px; margin-bottom: 9px; } .cardx .ct { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; } .cardx .cm { margin-top: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cardx .cm button { border: 1px solid var(--line2); background: var(--card); color: var(--ink); border-radius: 7px; padding: 2px 8px; cursor: pointer; font-size: 11px; } /* ── экраны входа и выбора зоны ────────────────────────────────────────── */ .center { max-width: 440px; margin: 12vh auto 0; padding: 0 16px; text-align: center; } .center h1 { letter-spacing: .02em; } .sub { color: var(--mut); font-size: 13.5px; margin: 0 0 20px; } .authcard { width: 100%; max-width: 400px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 30px 26px; text-align: center; box-shadow: var(--shadow-h); } .authcard .logo { width: 62px; height: 62px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 30px; border-radius: var(--radius-lg); background: var(--acc-soft); border: 1px solid var(--line2); } :root[data-zone="personal"] .authcard .logo { background: linear-gradient(160deg, #5865f2, #4049b0); border-color: transparent; } .btn-oauth { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 10px; padding: 12px 15px; border-radius: 11px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; border: 1px solid var(--line2); background: var(--bg2); color: var(--ink); } .btn-oauth.discord { background: var(--acc); color: #fff; border-color: transparent; } .btn-oauth.google { background: #fff; color: #1f2023; } .zones { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; } .zone { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 20px; box-shadow: var(--shadow); min-height: 190px; } .zone:hover { border-color: var(--acc); box-shadow: var(--shadow-h); } .zone .zic { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--acc-soft); border: 1px solid var(--line2); border-radius: 15px; } .zone.pers .zic { background: #2b2d31; border-color: #3a3c42; } .zone .zt { font-weight: 700; font-size: 19px; } .zone .zd { color: var(--mut); font-size: 13px; } .zone .zgo { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--acc-d); } .choose { max-width: 760px; margin: 9vh auto 0; padding: 0 16px; } .choose h1, .choose .lead { text-align: center; } .choose .lead { color: var(--mut); font-family: var(--mono); font-size: 12px; letter-spacing: .03em; margin: 0 0 6px; } /* ── адаптивность ──────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .app { grid-template-columns: minmax(0, 1fr); } .topbar { display: flex; } .side { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); height: 100dvh; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .35); border-right: 1px solid var(--side-line); } .side.open { transform: none; } .itemgrid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 768px) { body { font-size: 14.5px; } .zones { grid-template-columns: 1fr; } .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .main { padding: 14px; } .frame { height: 64vh; } } @media (max-width: 480px) { .grid { grid-template-columns: 1fr; } .toolbar .seg { flex: 1 1 100%; } .seg span { flex: 1; text-align: center; } .acts .open { flex: 1 1 100%; } .panel { padding: 13px 14px; } .center { margin-top: 7vh; } .up { padding: 11px; } } @media (min-width: 1440px) { .main { padding: 34px 44px; } .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } } @media (min-width: 2000px) { .app { grid-template-columns: 320px minmax(0, 1fr); } .main > * { max-width: 1880px; } .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } } @media print { .side, .topbar { display: none; } .app { grid-template-columns: 1fr; } }