/* festbot web — «стол секретаря оргкома». Бумага протокола + оттенок оргкома (--ah, град оттенка задаёт base.html на ): Ростов — индиго Танабаты, ВРН — янтарь. Светлая и тёмная темы; тёмная — авто по системе (prefers-color-scheme) с ручным переключателем (data-theme на ). Шрифты: PT Serif (заголовки, «протокольный» голос), Golos Text (интерфейс), JetBrains Mono (данные: даты, id, диффы). */ /* --- шрифты (self-hosted, cyr+latin) --- */ @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/static/fonts/golos-text-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/static/fonts/golos-text-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; } @font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/pt-serif-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/pt-serif-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/static/fonts/jetbrains-mono-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+2116; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/static/fonts/jetbrains-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; } /* --- токены --------------------------------------------------------------- */ :root { --ah: 282; /* оттенок оргкома; base.html переопределяет на */ --font-ui: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "PT Serif", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --r: 10px; --r-lg: 14px; --topbar-h: 52px; --shadow: 0 1px 2px rgba(16, 18, 26, .05); --shadow-2: 0 10px 30px rgba(16, 18, 26, .16); /* светлая тема (hex-фолбэк; ниже @supports уточняет oklch-оттенком оргкома) */ --paper: #f5f5f1; --card: #ffffff; --ink: #22262d; --muted: #6a7180; --line: #e4e3dc; --accent: #564fb4; --accent-text: #4c4498; --accent-soft: #edecf7; --accent-ink: #ffffff; --tip-bg: #24272e; --tip-ink: #f2f2ee; --ok-ink: #276b3a; --ok-bg: #e4f2e4; --warn-ink: #8a5b12; --warn-bg: #fbf0dc; --danger: #b0372e; --danger-bg: #faebe9; --hole-shadow: rgba(18, 16, 28, .5); } @supports (color: oklch(50% 0.1 200)) { :root { --paper: oklch(96.8% 0.005 var(--ah)); --line: oklch(90% 0.008 var(--ah)); --accent: oklch(50% 0.125 var(--ah)); --accent-text: oklch(44% 0.125 var(--ah)); --accent-soft: oklch(94% 0.025 var(--ah)); } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #17181c; --card: #212329; --ink: #e9e9e4; --muted: #9aa1ac; --line: #363a43; --accent: #a49df0; --accent-text: #b5aff5; --accent-soft: #2e2c44; --accent-ink: #191727; --tip-bg: #343945; --tip-ink: #e9e9e4; --ok-ink: #8fd19b; --ok-bg: #253b2a; --warn-ink: #e2b566; --warn-bg: #3c3122; --danger: #ee8b80; --danger-bg: #442a28; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 10px 30px rgba(0, 0, 0, .5); --hole-shadow: rgba(4, 4, 8, .66); } @supports (color: oklch(50% 0.1 200)) { :root:not([data-theme="light"]) { --paper: oklch(20% 0.01 var(--ah)); --card: oklch(25% 0.012 var(--ah)); --line: oklch(33% 0.015 var(--ah)); --accent: oklch(72% 0.105 var(--ah)); --accent-text: oklch(78% 0.09 var(--ah)); --accent-soft: oklch(31% 0.045 var(--ah)); --accent-ink: oklch(20% 0.03 var(--ah)); } } } :root[data-theme="dark"] { --paper: #17181c; --card: #212329; --ink: #e9e9e4; --muted: #9aa1ac; --line: #363a43; --accent: #a49df0; --accent-text: #b5aff5; --accent-soft: #2e2c44; --accent-ink: #191727; --tip-bg: #343945; --tip-ink: #e9e9e4; --ok-ink: #8fd19b; --ok-bg: #253b2a; --warn-ink: #e2b566; --warn-bg: #3c3122; --danger: #ee8b80; --danger-bg: #442a28; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 10px 30px rgba(0, 0, 0, .5); --hole-shadow: rgba(4, 4, 8, .66); } @supports (color: oklch(50% 0.1 200)) { :root[data-theme="dark"] { --paper: oklch(20% 0.01 var(--ah)); --card: oklch(25% 0.012 var(--ah)); --line: oklch(33% 0.015 var(--ah)); --accent: oklch(72% 0.105 var(--ah)); --accent-text: oklch(78% 0.09 var(--ah)); --accent-soft: oklch(31% 0.045 var(--ah)); --accent-ink: oklch(20% 0.03 var(--ah)); } } /* --- база ------------------------------------------------------------------ */ * { box-sizing: border-box; } html { scrollbar-gutter: stable; } body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font: 700 1.5rem/1.25 var(--font-display); margin: .4em 0 .6em; text-wrap: balance; } h2 { font-size: 1.06rem; font-weight: 600; margin: 1.2em 0 .5em; } h3 { font-size: .98rem; font-weight: 600; margin: 1em 0 .4em; } code { background: var(--accent-soft); padding: 0 4px; border-radius: 4px; font: .88em var(--font-mono); } kbd { font: 500 .72rem var(--font-mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; background: var(--paper); color: var(--muted); } s { color: var(--muted); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::placeholder { color: var(--muted); opacity: .8; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* --- верхняя панель --------------------------------------------------------- */ .topbar { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .topbar-in { height: var(--topbar-h); margin: 0 auto; padding: 0 14px; display: flex; align-items: center; gap: 10px; } .burger { display: none; } .brand { display: flex; align-items: center; gap: 7px; color: var(--ink); font: 700 1.06rem var(--font-display); letter-spacing: .01em; padding: 4px 6px; } .brand:hover { text-decoration: none; } .brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .orgswitch { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; } .orgswitch a { padding: 3px 12px; border-radius: 999px; color: var(--muted); font-size: .92em; white-space: nowrap; } .orgswitch a:hover { text-decoration: none; color: var(--ink); } .orgswitch a.on { background: var(--accent); color: var(--accent-ink); } .spacer { flex: 1; } .searchbtn { display: flex; align-items: center; gap: 8px; min-width: 200px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); border-radius: 8px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: .92em; } .searchbtn:hover { border-color: var(--accent); } .searchbtn kbd { margin-left: auto; } .iconbtn { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 1.05rem; padding: 6px 8px; border-radius: 8px; cursor: pointer; line-height: 1; } .iconbtn:hover { background: var(--accent-soft); color: var(--accent-text); } .me { display: flex; align-items: center; gap: 8px; color: var(--ink); padding: 4px 6px; border-radius: 8px; } .me:hover { background: var(--accent-soft); text-decoration: none; } .ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--accent-soft); } .ava-ph { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-text); font-weight: 600; } .ava.lg { width: 72px; height: 72px; font-size: 1.6rem; } .usermenu { position: relative; } .usermenu summary { list-style: none; cursor: pointer; display: flex; border-radius: 50%; } .usermenu summary::-webkit-details-marker { display: none; } .menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); display: flex; flex-direction: column; min-width: 230px; padding: 6px; z-index: 50; } .menu a, .menu button { text-align: left; padding: 8px 10px; border-radius: 7px; color: var(--ink); background: none; border: 0; font: inherit; cursor: pointer; width: 100%; } .menu a:hover, .menu button:hover { background: var(--accent-soft); text-decoration: none; } .menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 2px; } .menu .menu-name { padding: 6px 10px 2px; font-weight: 600; } .menu .menu-sub { padding: 0 10px 6px; } /* --- каркас с боковой навигацией -------------------------------------------- */ .shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 0; max-width: 1380px; margin: 0 auto; } .shell.no-side { grid-template-columns: minmax(0, 1fr); max-width: 1080px; } .snav { border-right: 1px solid var(--line); padding: 14px 10px 24px; position: sticky; top: var(--topbar-h); align-self: start; height: calc(100vh - var(--topbar-h)); overflow-y: auto; scrollbar-width: thin; } .sn-group { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 16px 10px 4px; } .sn { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: var(--ink); margin: 1px 0; } .sn:hover { background: var(--accent-soft); text-decoration: none; } .sn.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; box-shadow: inset 2.5px 0 0 var(--accent); } .sn .ico { width: 20px; text-align: center; flex: none; } .sn .badge { margin-left: auto; } .snav-foot { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; } .backdrop { display: none; } .page { min-width: 0; padding: 20px 26px 70px; max-width: 1010px; } .page-wide { max-width: none; } @media (max-width: 1000px) { .shell { grid-template-columns: 1fr; } .burger { display: inline-flex; } .snav { position: fixed; left: 0; top: var(--topbar-h); z-index: 45; width: 262px; background: var(--card); border-right: 1px solid var(--line); transform: translateX(-103%); transition: transform .18s ease; box-shadow: none; } .snav.open { transform: none; box-shadow: var(--shadow-2); } .backdrop { display: block; position: fixed; inset: var(--topbar-h) 0 0; z-index: 44; background: rgba(10, 10, 16, .38); opacity: 0; pointer-events: none; transition: opacity .18s; } .backdrop.show { opacity: 1; pointer-events: auto; } .page { padding: 16px 14px 70px; } .searchbtn { min-width: 0; } .searchbtn .searchbtn-t, .searchbtn kbd { display: none; } .orgswitch a { padding: 3px 9px; } } /* --- заголовок страницы ------------------------------------------------------ */ .page-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin: 2px 0 18px; } .page-head h1 { margin: 0; } .page-head .lead { color: var(--muted); margin: 4px 0 0; max-width: 64ch; font-size: .95em; } .page-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .crumb { font-size: .9em; margin: 0 0 8px; } /* --- подсказки (тултипы) ------------------------------------------------------ */ [data-tip] { position: relative; } span[data-tip], b[data-tip], .chip[data-tip], .status[data-tip], .tip-dot { cursor: help; } [data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(2px); background: var(--tip-bg); color: var(--tip-ink); border: 1px solid rgba(128, 128, 148, .25); font: 400 .8rem/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; white-space: normal; padding: 7px 10px; border-radius: 8px; width: max-content; max-width: 270px; text-align: left; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 70; box-shadow: var(--shadow-2); } [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%); } [data-tip].tip-down::after { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-2px); } [data-tip].tip-down:hover::after, [data-tip].tip-down:focus-visible::after { transform: translateX(-50%); } [data-tip].tip-left::after { left: auto; right: 0; transform: translateY(2px); } [data-tip].tip-left:hover::after, [data-tip].tip-left:focus-visible::after { transform: none; } .tip-dot { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font-size: .7rem; font-weight: 600; vertical-align: 2px; margin-left: 4px; } .tip-dot:hover { border-color: var(--accent); color: var(--accent-text); } /* --- карточки, плитки --------------------------------------------------------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin: 10px 0; box-shadow: var(--shadow); } .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 12px; margin: 14px 0; } .tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 15px; color: var(--ink); box-shadow: var(--shadow); transition: border-color .15s, transform .15s, box-shadow .15s; } .tile:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-2); } .tile-attn { border-color: var(--accent); background: var(--accent-soft); } .tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); font-size: 1.25rem; } .tile-attn .tile-icon { background: var(--card); } .tile-name { font-weight: 600; margin-top: 9px; } .tile-note { color: var(--muted); font-size: .88em; margin-top: 2px; } /* внимание-строка на обзоре */ .attn-card { display: flex; align-items: center; gap: 14px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--r-lg); padding: 14px 18px; margin: 12px 0; } .attn-card .attn-t { font-weight: 600; } .attn-card .btn { flex: none; } /* --- реплика секретаря (пустые состояния, онбординг-подводки) ----------------- */ .bot-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; } .bot-ava { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 600; } .bot-bubble { background: var(--card); border: 1px solid var(--line); border-radius: 14px; border-top-left-radius: 5px; padding: 10px 14px; max-width: 56ch; box-shadow: var(--shadow); } .bot-bubble .bot-name { font-size: .82em; color: var(--accent-text); font-weight: 600; margin-bottom: 2px; } .empty { text-align: center; padding: 34px 16px; color: var(--muted); } .empty .empty-art { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; background: var(--accent-soft); font-size: 1.7rem; margin-bottom: 10px; } .empty .empty-t { color: var(--ink); font-weight: 600; margin-bottom: 3px; } /* --- таблицы -------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; margin: 10px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); } .table-wrap .table { border: 0; margin: 0; box-shadow: none; border-radius: 0; } /* НЕ ставим overflow: hidden — иначе клиппит тултипы [data-tip] чипов в ячейках; скругление углов делаем через сами ячейки */ .table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); } .table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--paper); background: color-mix(in srgb, var(--card) 60%, var(--paper)); } .table thead tr:first-child th:first-child { border-top-left-radius: var(--r); } .table thead tr:first-child th:last-child { border-top-right-radius: var(--r); } .table tr:last-child td:first-child { border-bottom-left-radius: var(--r); } .table tr:last-child td:last-child { border-bottom-right-radius: var(--r); } .table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } .table tr:last-child td { border-bottom: 0; } .table tbody tr:hover td { background: var(--accent-soft); background: color-mix(in srgb, var(--accent-soft) 40%, var(--card)); } .dt { font: .8rem var(--font-mono); color: var(--muted); white-space: nowrap; } .num { font-variant-numeric: tabular-nums; } /* --- формы и кнопки --------------------------------------------------------------- */ input, select, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; width: 100%; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } textarea { resize: vertical; } label { display: block; font-size: .92em; color: var(--muted); margin-bottom: 2px; } label input, label select, label textarea { margin-top: 3px; color: var(--ink); } .stack > * + * { margin-top: 10px; } .row-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; } .row-form input, .row-form select { width: auto; flex: 0 1 auto; } .row-form input[name="q"], .row-form input[name="name"], .row-form input[name="title"] { flex: 1 1 180px; } .inline-form { display: inline-block; margin: 0 2px; } .filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px; margin: 0 0 14px; } .filter-bar label { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .88em; white-space: nowrap; } .filter-bar input, .filter-bar select { width: auto; padding: 5px 9px; } .filter-bar input[name="q"] { flex: 1 1 170px; min-width: 130px; } .count-pill { color: var(--muted); font-size: .88em; margin: 4px 2px 10px; } .mono-box { font-family: var(--font-mono); font-size: .86em; line-height: 1.5; white-space: pre; overflow: auto; margin-top: 8px; } .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; padding: 7px 14px; cursor: pointer; font: inherit; width: auto; } .btn:hover { border-color: var(--accent); color: var(--accent-text); text-decoration: none; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn.primary:hover { filter: brightness(1.07); color: var(--accent-ink); } .btn.danger { color: var(--danger); border-color: var(--line); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); } .btn.danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); } .btn.ghost { border-color: transparent; background: transparent; color: var(--muted); } .btn.ghost:hover { color: var(--accent-text); background: var(--accent-soft); } .btn.sm { padding: 3px 9px; font-size: .88em; } .btn.wide { width: 100%; justify-content: center; } summary.btn { list-style: none; } summary.btn::-webkit-details-marker { display: none; } /* --- мелочи ------------------------------------------------------------------------ */ .muted { color: var(--muted); } .small { font-size: .86em; } .nowrap { white-space: nowrap; } .dim { opacity: .62; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: .82em; margin-right: 4px; } .chip.quiet { background: var(--accent-soft); background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--muted); } .chip.attn { background: var(--warn-bg); color: var(--warn-ink); } .chip.ok { background: var(--ok-bg); color: var(--ok-ink); } .chip.role-admin { background: var(--accent); color: var(--accent-ink); } .chip.role-editor { background: var(--accent-soft); color: var(--accent-text); } .chip.role-reader { background: var(--accent-soft); background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--muted); } .chips { margin: 4px 0; } .badge { display: inline-block; min-width: 20px; text-align: center; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .8em; font-weight: 600; } .badge.quiet { background: var(--accent-soft); background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); font-weight: 400; } .status { padding: 1px 9px; border-radius: 999px; font-size: .84em; white-space: nowrap; } .st-open { background: var(--warn-bg); color: var(--warn-ink); } .st-decided { background: var(--ok-bg); color: var(--ok-ink); } .st-disputed { background: var(--danger-bg); color: var(--danger); } .st-postponed { background: var(--accent-soft); background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--muted); } .warn { background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; padding: 6px 10px; margin: 6px 0; font-size: .9em; } .error { background: var(--danger-bg); color: var(--danger); border-radius: 8px; padding: 8px 12px; margin: 8px 0; } .pager { display: flex; gap: 6px; margin: 14px 0; flex-wrap: wrap; } .pager a, .pager .on { padding: 3px 10px; border-radius: 6px; border: 1px solid var(--line); font-variant-numeric: tabular-nums; } .pager .on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .subnav { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; } .subnav a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .subnav a:hover { text-decoration: none; color: var(--ink); border-color: var(--accent); } .subnav a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cols.wrap { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } @media (max-width: 800px) { .cols { grid-template-columns: 1fr; } } ul.plain { list-style: none; padding: 0; } ul.plain li { padding: 3px 0; } .bar { height: 8px; background: var(--accent-soft); background: color-mix(in srgb, var(--muted) 14%, transparent); border-radius: 999px; overflow: hidden; } .bar-in { height: 100%; background: var(--accent); } .bar-in.hot { background: var(--danger); } .collapsible > summary { cursor: pointer; font-weight: 600; } .collapsible > summary:hover { color: var(--accent-text); } .inline-details { display: inline-block; position: relative; } .inline-details > .stack, .inline-details > form { position: absolute; z-index: 30; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); padding: 12px; min-width: 300px; } /* --- flash → тост ------------------------------------------------------------------- */ .toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; display: flex; gap: 9px; align-items: baseline; background: var(--tip-bg); color: var(--tip-ink); border-radius: 12px; padding: 11px 16px; box-shadow: var(--shadow-2); max-width: min(560px, 92vw); animation: toast-in .22s ease; } .toast .toast-x { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; font: inherit; padding: 0 0 0 6px; } .toast .toast-x:hover { opacity: 1; } @keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } } /* --- подтверждение (dialog) ---------------------------------------------------------- */ dialog.dlg { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--ink); box-shadow: var(--shadow-2); padding: 20px; width: min(400px, 92vw); } dialog.dlg::backdrop { background: rgba(12, 12, 18, .45); } .dlg-text { margin: 0 0 16px; } .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; } /* --- палитра поиска (Ctrl+K) ----------------------------------------------------------- */ .pal { position: fixed; inset: 0; z-index: 80; background: rgba(12, 12, 18, .38); display: flex; justify-content: center; align-items: flex-start; padding: 11vh 14px 0; } .pal[hidden] { display: none; } .pal-box { width: min(580px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; } .pal-in { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .pal-in input { border: 0; outline: none; padding: 0; background: transparent; font-size: 1.02rem; } .pal-in input:focus { outline: none; } .pal-list { max-height: 54vh; overflow-y: auto; padding: 6px; } .pal-h { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 3px; } .pal-it { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px; color: var(--ink); } .pal-it:hover { background: var(--accent-soft); text-decoration: none; } .pal-it.on { background: var(--accent-soft); box-shadow: inset 2.5px 0 0 var(--accent); } .pal-it .ico { flex: none; } .pal-it .pal-t { font-weight: 500; } .pal-it .pal-n { color: var(--muted); font-size: .86em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pal-empty { padding: 18px 12px; color: var(--muted); text-align: center; } /* --- знакомство (тур) -------------------------------------------------------------------- */ .tour-hole { position: fixed; z-index: 84; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 200vmax var(--hole-shadow); transition: all .25s ease; } .tour-pop { position: fixed; z-index: 85; width: min(330px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--line); border-radius: 16px; border-top-left-radius: 5px; box-shadow: var(--shadow-2); padding: 13px 15px; animation: tour-in .2s ease; } @keyframes tour-in { from { opacity: 0; transform: translateY(6px); } } .tour-head { display: flex; gap: 9px; align-items: center; margin-bottom: 6px; } .tour-who .tour-name { font-weight: 600; font-size: .93em; color: var(--accent-text); } .tour-who .tour-role { font-size: .78em; color: var(--muted); } .tour-text { margin: 0 0 12px; font-size: .95em; } .tour-foot { display: flex; align-items: center; gap: 8px; } .tour-dots { display: flex; gap: 4px; margin-right: auto; } .tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); } .tour-dots i.on { background: var(--accent); } /* --- вход ----------------------------------------------------------------------------- */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--paper); background-image: radial-gradient(56vw 56vh at 82% -10%, var(--accent-soft), transparent 60%); } .login-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-2); padding: 32px 30px; width: min(380px, 92vw); } .login-card h1 { margin: 0; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; } .login-card .muted { text-align: center; margin-top: 4px; } .login-card form { margin-top: 18px; display: grid; gap: 12px; } /* --- факты ------------------------------------------------------------------------------ */ .fact-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .fact-title { font-weight: 600; margin-top: 4px; } .fact-body { margin-top: 4px; white-space: pre-wrap; } .fact-actions { margin-top: 8px; display: flex; gap: 8px; align-items: flex-start; } .fact-actions details { flex: 1; } .chain { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; } .chain-item { color: var(--muted); font-size: .9em; padding: 2px 0; } /* --- переписка ---------------------------------------------------------------------------- */ .chatlog { display: grid; gap: 8px; } .msg { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; } .msg-head { display: flex; gap: 10px; align-items: baseline; } .msg-body { white-space: pre-wrap; } /* --- профили/люди ---------------------------------------------------------------------------- */ .people { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .person { display: flex; gap: 12px; align-items: flex-start; } .person-name { font-weight: 600; } /* --- база знаний ------------------------------------------------------------------------------ */ .kb-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 18px; } @media (max-width: 1100px) { .kb-layout { grid-template-columns: 1fr; } } .kb-side { position: sticky; top: calc(var(--topbar-h) + 14px); align-self: start; } @media (max-width: 1100px) { .kb-side { position: static; } } .kb-tree { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; } .kb-tree a { padding: 6px 10px; border-radius: 8px; color: var(--ink); } .kb-tree a:hover { background: var(--accent-soft); text-decoration: none; } .kb-tree a.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; box-shadow: inset 2.5px 0 0 var(--accent); } .kb-arts { display: grid; gap: 10px; margin: 12px 0; } .kb-art { display: block; } .kb-art:hover { border-color: var(--accent); text-decoration: none; } .kb-art-title { font-weight: 600; font-size: 1.02em; } .kb-art-head { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; } .facts-view summary { cursor: pointer; } .fact-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); } .fact-line:first-of-type { border-top: 0; } .title-input { font-size: 1.25rem; font-weight: 700; } .tabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .tab { border: 1px solid var(--line); background: var(--card); border-radius: 8px 8px 0 0; padding: 5px 14px; cursor: pointer; font: inherit; } .tab.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .tabs-hint { margin-left: auto; } #body { font-family: var(--font-mono); font-size: .9em; min-height: 320px; } .preview { border: 1px dashed var(--line); border-radius: var(--r); padding: 12px 16px; min-height: 320px; background: var(--card); } .access-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .access-pick label { display: block; margin: 2px 0; color: var(--ink); } .access-pick input { width: auto; } /* markdown-статьи */ .md { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; box-shadow: var(--shadow); max-width: 74ch; } .md h1 { font-size: 1.3rem; font-family: var(--font-ui); } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1.02rem; } .md table { border-collapse: collapse; margin: 10px 0; display: block; overflow-x: auto; } .md th, .md td { border: 1px solid var(--line); padding: 5px 10px; } .md blockquote { border-left: 3px solid var(--accent); margin: 8px 0; padding: 2px 12px; color: var(--muted); } .md pre { background: var(--paper); padding: 10px 12px; border-radius: 8px; overflow-x: auto; } .md img { max-width: 100%; } /* --- диффы ---------------------------------------------------------------------------------- */ .diff { font-family: var(--font-mono); font-size: .84em; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; overflow-x: auto; } .diff div { white-space: pre-wrap; } .d-add { background: var(--ok-bg); color: var(--ok-ink); } .d-del { background: var(--danger-bg); color: var(--danger); } .d-hunk { color: var(--muted); } /* --- очередь предложений ----------------------------------------------------------------------- */ .proposal .prop-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .prop-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } /* --- src в теме ---------------------------------------------------------------------------------- */ .src { border-top: 1px solid var(--line); padding: 7px 0; } .src:first-child { border-top: 0; } /* --- инструкция (/help/setup, перенос стилей webconfig) ------------------------------------------- */ .instr { max-width: 860px; } .instr .where { background: var(--accent-soft); border-radius: 8px; padding: 2px 8px; font-size: .85em; color: var(--accent-text); } .instr .place { font-weight: 600; } .instr .note { background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; padding: 8px 12px; margin: 8px 0; } .instr kbd { background: var(--tip-bg); color: var(--tip-ink); border: 0; } .instr pre { background: var(--paper); padding: 10px 12px; border-radius: 8px; overflow-x: auto; } .instr h2 { margin-top: 1.4em; } .instr table { border-collapse: collapse; } .instr th, .instr td { border: 1px solid var(--line); padding: 5px 10px; }