/* ГРАФИК·ОКРУГ — система R6 (production). Описание: DESIGN-SYSTEM.md. * * Подключается ПОСЛЕДНИМ (после стилей бандла, ux.css, ds.css). Заменяет * theme.css (R4). Устройство файла: * 1. шрифты 2. токены (свет/тьма) 3. перевод токенов бандла на наши * 4. основа 5. оболочка (shell.js) 6. общие компоненты * 7. экраны: главная · таблица · итог/мониторы · свод · расписание · * настройки · история 8. окна и тосты 9. Пульт 10. телефон * 11. движение * Правила: цвета — только токенами; анимируются только перечисленные * свойства; `transition: all` запрещён; цвет — только по смыслу. */ /* ── 1. шрифты (OFL — static/fonts/LICENSE-*.txt) ─────────────────────── */ /* Geist — интерфейс; Geist Mono — номера, время, коды; Unbounded — голос продукта: заголовки экранов и крупные рабочие числа */ @font-face { font-family: "Geist"; src: url("/static/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("/static/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Unbounded"; src: url("/static/fonts/Unbounded-cyr.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Unbounded"; src: url("/static/fonts/Unbounded-lat.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── 2. токены ──────────────────────────────────────────────────────────── */ /* Две полноценные темы. Тёмная — основная (стартовая в SPA), светлая спроектирована отдельно: не инверсия, а свой лист (off-white) с чёрной типографикой. Цвет = значение: red — критично, amber — внимание, green — здорово; синий — только фокус. */ :root { --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --display: "Unbounded", "Geist", -apple-system, "Segoe UI", Arial, sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --r-xs: 6px; --r-sm: 9px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --dur-1: 140ms; --dur-2: 220ms; --dur-3: 380ms; --dur-4: 620ms; --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-enter: cubic-bezier(.05, .7, .1, 1); --ease-exit: cubic-bezier(.3, 0, .8, .15); --spring-snap: cubic-bezier(.25, 1.08, .45, 1); --spring-glide: cubic-bezier(.16, 1, .3, 1); --spring-nav: cubic-bezier(.3, 1.24, .4, 1); --top-h: 60px; --tab-h: 64px; --ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--focus); } :root, :root[data-ui=light], html.ds-page[data-ui=light], html.ds-page:not([data-ui]) { color-scheme: light; --canvas: #f2f2f0; --surface: #ffffff; --surface-2: #e9e9e6; --hover: #e4e4e1; --field: #ffffff; --raised: #ffffff; --ink: #0d0d0e; --on-ink: #ffffff; --body: #3b3b3d; --mute: #626267; --faint: #66666a; --line: #e3e3e0; --line-strong: #cfcfcb; --line-control: #848488; --focus: #0a5fd6; /* R10.3 UI-REGLAMENT §4: одна палитра на сайт и листы (gtables.css) */ --crit: #c21f13; --crit-x: #d92d20; --on-crit: #ffffff; --crit-bg: #fde4e2; --warn: #8f4a00; --warn-x: #b25e00; --warn-bg: #fff1dc; --ok: #13774a; --ok-x: #1f8a4c; --ok-bg: #e2f3e9; /* текст (контраст ≥ 4.5) / заливка (-x) */ --hot: var(--crit); --hot-bg: var(--crit-bg); --mzi: #f2b705; --inv-bg: #0d0d0e; --inv-fg: #f4f4f4; --inv-mute: #9a9a9e; --inv-line: #2a2a2d; --inv-crit: #ff5d50; --inv-warn: #ffb224; --inv-ok: #3dd68c; --alert-bg: #0d0d0e; --pop-bg: #ffffff; --rail-crit: #ff5d50; --rail-warn: #ffb224; --rail-ok: #3dd68c; --rail-bg: #0d0d0e; --rail-fg: #f2f2f2; --rail-mute: #919191; --rail-hover: #191919; --rail-on: #f2f2f2; --rail-on-fg: #0c0c0c; --nav-bg: rgb(0 0 0 / .05); --nav-on: #ffffff; --nav-on-sh: 0 1px 2px rgb(0 0 0 / .10), 0 0 0 .5px rgb(0 0 0 / .06); --sh-1: 0 1px 0 rgb(0 0 0 / .03), 0 1px 2px rgb(0 0 0 / .06), 0 0 0 1px rgb(0 0 0 / .05); --sh-2: 0 1px 0 rgb(255 255 255 / .7) inset, 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px -12px rgb(0 0 0 / .18), 0 0 0 1px rgb(0 0 0 / .05); --sh-3: 0 0 0 1px rgb(0 0 0 / .06), 0 12px 32px -8px rgb(0 0 0 / .18), 0 32px 64px -24px rgb(0 0 0 / .22); --pop-shadow: var(--sh-3); --scrim: rgb(10 10 10 / .42); --metal-a: #2a2a2d; --metal-b: #7a7a80; --metal-c: #f6f6f8; } :root[data-ui=dark], html.ds-page[data-ui=dark] { color-scheme: dark; --canvas: #0a0a0b; --surface: #141416; --surface-2: #1d1d20; --hover: #222226; --field: #0f0f11; --raised: #19191c; --ink: #f3f3f4; --on-ink: #0b0b0c; --body: #c3c3c8; --mute: #8e8e93; --faint: #858589; --line: #232326; --line-strong: #333338; --line-control: #6e6e73; --focus: #5aa2ff; --crit: #ff5d50; --crit-x: #ff5d50; --on-crit: #0b0b0c; --crit-bg: #3a1512; --warn: #ffb224; --warn-x: #ffb224; --warn-bg: #33240a; --ok: #3dd68c; --ok-x: #3dd68c; --ok-bg: rgb(61 214 140 / .13); --inv-bg: #f3f3f4; --inv-fg: #0b0b0c; --inv-mute: #555558; --inv-line: #d4d4d8; --inv-crit: #c21f13; --inv-warn: #8f4a00; --inv-ok: #13774a; --alert-bg: #2a0e0b; --pop-bg: #19191c; --rail-crit: #ff5d50; --rail-warn: #ffb224; --rail-ok: #3dd68c; --rail-bg: #0a0a0b; --rail-fg: #f3f3f4; --rail-mute: #8c8c90; --rail-hover: #161618; --rail-on: #f3f3f4; --rail-on-fg: #0b0b0c; --nav-bg: rgb(255 255 255 / .05); --nav-on: rgb(255 255 255 / .11); --nav-on-sh: inset 0 1px 0 rgb(255 255 255 / .08); --sh-1: inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 1px 0 rgb(255 255 255 / .05); --sh-2: inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 1px 0 rgb(255 255 255 / .09), 0 24px 48px -32px rgb(0 0 0 / .9); --sh-3: 0 0 0 1px rgb(255 255 255 / .09), 0 24px 56px -16px rgb(0 0 0 / .8); --pop-shadow: var(--sh-3); --scrim: rgb(0 0 0 / .62); --metal-a: #2b2b2f; --metal-b: #bdbdc4; --metal-c: #ffffff; } /* ── 3. токены бандла и слоёв R3/R4 → наши ─────────────────────────────── */ :root, :root[data-ui], html.ds-page { --bg: var(--canvas); --txt: var(--ink); --muted: var(--mute); --surface-3: var(--hover); --card: var(--surface); --glass: var(--surface); --glass-2: var(--surface-2); --brd: var(--line); --brd-in: var(--line); --brd-strong: var(--line-strong); --chip: var(--surface-2); --chip-brd: var(--line); --chip-on: var(--surface); --sunk: var(--surface-2); --sv-solid: var(--surface); --sv-solid-alt: var(--surface-2); /* виды работ больше не окрашены: МКД и Территория различаются словом и значком */ --mkd: var(--ink); --mkd-2: var(--ink); --mkd-soft: color-mix(in srgb, var(--ink) 7%, transparent); --ter: var(--ink); --ter-2: var(--ink); --ter-soft: color-mix(in srgb, var(--ink) 7%, transparent); --crit-2: var(--crit); --crit-soft: var(--crit-bg); --warn-soft: var(--warn-bg); --ok-soft: var(--ok-bg); --m-over: var(--crit); --m-today: var(--warn); --m-soon: var(--warn); --m-near: var(--mute); --hi: transparent; --lo: transparent; --sh: none; --sh-pop: var(--pop-shadow); --neb-b: transparent; --neb-g: transparent; --blur: 0px; --fs-2xs: 12px; --fs-xs: 12px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-xl: 15px; --fs-2xl: 16px; --fs-3xl: 17px; --fs-4xl: 20px; --fs-5xl: 22px; --fs-6xl: 26px; --fs-7xl: 28px; --fw-med: 500; --fw-semi: 600; --fw-bold: 600; --fw-black: 600; --r-1: 3px; --r-2: 4px; --r-3: 6px; --r-4: 6px; --r-5: 6px; --r-6: 10px; --r-7: 10px; --r-8: 10px; --r-pill: 999px; --tr-tight: -.02em; --tr-snug: -.01em; --tr-caps: 0; --font-sans: var(--font); --font-mono: var(--mono); --dur: var(--dur-2); --ease: var(--ease-out); --focus-ring: var(--ring); } /* ── 4. основа ──────────────────────────────────────────────────────────── */ html body, html.ds-page body { font-family: var(--font); font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--body); background: var(--canvas) !important; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01" 0; } html body :is(h1, h2, h3, b, strong) { color: var(--ink); } /* .mono у бандла — это «цифры в столбик», а не моноширинный шрифт */ .mono { font-family: inherit; font-variant-numeric: tabular-nums; } code, kbd { font-family: var(--mono); } ::selection { background: color-mix(in srgb, var(--focus) 25%, transparent); color: inherit; } html body :is(button, input, select, textarea) { font-family: inherit; } /* украшения бандла — убраны целиком */ #root .bg, #stars, .neb, .glass::before, .wm, .accent, .navc .agraph, .stat::after, .live .pulse, .an-auto .pulse::after, .job .jstatus .lp::after, .cdline { display: none !important; } .glass { background: var(--surface) !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } [style*="backdrop-filter"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* фокус — один на всё */ html body :is(button, a, [role=button], [role=switch], [role=tab], [role=link], input, select, textarea, summary, [tabindex]):focus-visible { outline: none !important; box-shadow: var(--ring) !important; } html body :is(button, a, [role=button], [role=switch], [role=link]):focus:not(:focus-visible) { outline: none; } /* числа в столбик — моноширинные */ :is(.v, .gnum, .gterm, .gunit, .sg-v, .cnt b, .sv-t td, .sv-date, .k-big, .mt-day, .md-col b, .jr-t, .addr-row input.ar-u, .ds-table td.num, .facts dd, .nc-tag, .an-kpi .k-pill) { font-variant-numeric: tabular-nums; } :is(.gterm, .sv-date, .jr-t) { font-family: var(--mono); } /* ── 5. оболочка: верхняя шапка + пульс системы (shell.js) ──────────────── */ .go-skip { position: fixed; left: 8px; top: 8px; transform: translateY(-80px); z-index: 1000; padding: 8px 12px; border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink); font-weight: 500; text-decoration: none; transition: transform var(--dur-2) var(--ease-out); } .go-skip:focus { transform: none; } #go-top { position: fixed; inset: 0 0 auto 0; z-index: 50; box-sizing: border-box; padding: 0 clamp(12px, 1.6vw, 24px); background: color-mix(in srgb, var(--canvas) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); } #go-top * { box-sizing: border-box; } html.go-top-shell #root { padding-top: var(--top-h); } html.go-top-shell #root .app > .topbar { display: none !important; } html.go-top-shell #root nav.tabbar { display: none !important; } /* панель бандла (5 пунктов) заменена своей */ @media (min-width: 901px) { html.go-top-shell #root .app { max-width: none; width: auto; padding: 0 clamp(16px, 2.2vw, 36px); margin: 0; height: calc(100dvh - var(--top-h)) !important; } html.go-top-shell .tback { display: none !important; } } .go-row1 { display: flex; align-items: center; gap: 10px; height: var(--top-h); } .go-flex { flex: 1 1 auto; min-width: 0; } .go-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; } /* R9: знак — купола (логотип «ОКРУГ»), вырезаны в плашке цвета текста */ .go-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--ink); flex: none; position: relative; } .go-mark::before { content: ""; position: absolute; inset: 5px 5px 4px; background: var(--canvas); -webkit-mask: url(/static/img/logo-mark.svg) no-repeat center / contain; mask: url(/static/img/logo-mark.svg) no-repeat center / contain; } .go-brand-t { font-family: var(--font); font-size: 16px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; } .go-district { font-size: 12.5px; font-weight: 500; color: var(--body); white-space: nowrap; padding: 0 9px; height: 28px; display: inline-flex; align-items: center; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-strong); flex: none; } .go-district:empty { display: none; } /* разделы — таблетки в дорожке, выбранный — плашка, которая переезжает */ .go-nav { position: relative; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 11px; background: var(--nav-bg); margin-left: 4px; } .go-nav a, .go-sysbtn { all: unset; position: relative; z-index: 1; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; cursor: pointer; white-space: nowrap; font-size: 13.5px; font-weight: 520; color: var(--mute); user-select: none; transition: color var(--dur-1) var(--ease-out); } .go-nav a:hover, .go-sysbtn:hover, .go-nav a[aria-current=page], .go-sysbtn[aria-current=page] { color: var(--ink); } .go-nav a:focus-visible, .go-sysbtn:focus-visible { box-shadow: var(--ring); } .go-nav-n { font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--body); font-variant-numeric: tabular-nums; } .go-nav-n:empty { display: none; } .go-nav-gap { width: 1px; height: 16px; margin: 0 4px; background: color-mix(in srgb, var(--ink) 14%, transparent); } .go-nav-ind { position: absolute; z-index: 0; top: 3px; left: 0; height: 30px; border-radius: 8px; background: var(--nav-on); box-shadow: var(--nav-on-sh); opacity: 0; pointer-events: none; transition: transform var(--dur-3) var(--spring-nav), width var(--dur-3) var(--spring-glide), opacity var(--dur-1) var(--ease-out); } .go-nav-ind.on { opacity: 1; } .go-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--dur-2) var(--spring-snap); } .go-sysbtn[aria-expanded=true] .go-chev { transform: rotate(180deg); } .go-sys-li { position: relative; display: inline-flex; } /* меню */ .go-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; list-style: none; margin: 0; padding: 6px; min-width: 210px; background: var(--pop-bg); border-radius: 14px; box-shadow: var(--pop-shadow); display: grid; gap: 2px; transform-origin: 80% 0; } .go-sys-menu { left: -6px; right: auto; transform-origin: 24px 0; } .go-menu.go-in { animation: go-grow var(--dur-2) var(--ease-enter); } .go-menu[hidden] { display: none; } .go-menu li { display: contents; } .go-menu a, .go-menu button { all: unset; box-sizing: border-box; display: flex; width: 100%; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-weight: 500; cursor: pointer; font-size: 13.5px; } .go-menu form { display: contents; } .go-menu :is(a, button):hover, .go-menu :is(a, button):focus-visible { background: var(--hover); box-shadow: none; } .go-menu a[aria-current=page] { background: var(--surface-2); } .go-menu-h { display: grid !important; gap: 2px; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .go-menu-h b { font-weight: 600; color: var(--ink); } .go-menu-h span { font-size: 12px; color: var(--mute); } /* поиск — первоклассный элемент управления */ .go-find { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; height: 36px; width: clamp(180px, 20vw, 280px); flex: 0 1 auto; min-width: 120px; padding: 0 6px 0 12px; border-radius: 10px; background: var(--surface); box-shadow: var(--sh-1); color: var(--mute); cursor: text; font-size: 13.5px; transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--spring-snap); } .go-find:hover { box-shadow: var(--sh-1), 0 0 0 4px color-mix(in srgb, var(--ink) 5%, transparent); color: var(--body); } .go-find:active { transform: scale(.99); } .go-find:focus-visible { box-shadow: var(--ring); } .go-find-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .go-find kbd { display: inline-flex; gap: 3px; font-family: var(--font); } .go-find kbd b { font-size: 12px; font-weight: 600; color: var(--mute); background: var(--canvas); border-radius: 5px; padding: 2px 6px; box-shadow: inset 0 -1px 0 var(--line-strong), inset 0 0 0 1px var(--line); } .go-icon-btn, .go-user { all: unset; box-sizing: border-box; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--ink); cursor: pointer; flex: none; transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap); } .go-icon-btn:hover, .go-user:hover { background: var(--hover); } .go-icon-btn:active, .go-user:active { transform: scale(.92); } .go-icon-btn:focus-visible, .go-user:focus-visible { box-shadow: var(--ring); } .go-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } .go-user-wrap { position: relative; display: inline-flex; } .go-ava { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 650; background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3px var(--line-strong); } /* пульс системы: пять полосок = Портал · Таблица · Автомат · MAX · Мониторы */ .go-pulse { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px 0 11px; border-radius: 10px; cursor: pointer; flex: none; transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap); } .go-pulse:hover { background: var(--hover); } .go-pulse:active { transform: scale(.97); } .go-pulse:focus-visible { box-shadow: var(--ring); } .go-pulse-seg { display: flex; gap: 3px; align-items: center; height: 20px; } .go-pulse-seg i { width: 5px; height: 16px; border-radius: 2px; background: var(--line-control); transition: transform var(--dur-3) var(--spring-snap), background-color var(--dur-3) var(--ease-out); } .go-pulse-seg i.ok { background: var(--ok-x); } .go-pulse-seg i.warn { background: var(--warn-x); } .go-pulse-seg i.off { background: var(--line-control); transform: scaleY(.62); } .go-pulse-seg i.stop { background: var(--crit-x); transform: scaleY(1.25); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit-x) 18%, transparent); } .go-pulse-t { font-size: 12.5px; font-weight: 560; color: var(--ink); white-space: nowrap; } .go-pulse.stop .go-pulse-t { color: var(--crit); } .go-pulse.warn .go-pulse-t { color: var(--warn); } .go-pop { position: fixed; z-index: 70; width: min(440px, calc(100vw - 16px)); padding: 6px; border-radius: 18px; background: var(--pop-bg); box-shadow: var(--pop-shadow); color: var(--body); } .go-pop[hidden] { display: none; } .go-pop.go-in { animation: go-grow var(--dur-3) var(--ease-enter); } .go-pop-h { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 8px; } .go-pop-h b { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.015em; } .go-pop-at { font-family: var(--mono); font-size: 12px; color: var(--mute); } .go-pop-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 8px; border-top: 1px solid var(--line); margin-top: 4px; } .go-pop-f .go-attn-slot { display: contents; } /* строки состояния (одни и те же в окне пульса, на главной и в листе телефона) */ .go-sr-list { display: grid; } .go-sr { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 10px; border-radius: 10px; } .go-sr + .go-sr { box-shadow: inset 0 1px 0 var(--line); border-radius: 0 0 10px 10px; } .go-sr b { font-size: 13.5px; font-weight: 560; color: var(--ink); white-space: nowrap; } .go-sr-v { font-size: 12.5px; color: var(--mute); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } .go-sr.stop .go-sr-v { color: var(--crit); font-weight: 560; } .go-sr.warn .go-sr-v { color: var(--warn); font-weight: 520; } .go-sr-d { grid-column: 2 / -1; display: grid; gap: 8px; padding-top: 2px; } .go-sr-d p { margin: 0; font-size: 13px; line-height: 18px; color: var(--body); } .go-sr-a { display: flex; gap: 6px; flex-wrap: wrap; } .go-sr-a:empty { display: none; } .go-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-control); display: inline-block; flex: none; position: relative; } .go-dot.ok { background: var(--ok-x); } .go-dot.warn { background: var(--warn-x); } .go-dot.stop { background: var(--crit-x); } .go-dot.off { background: var(--line-control); } .go-dot.stop::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--crit-x); animation: go-ping 2.2s var(--ease-out) infinite; } @keyframes go-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } } /* «Требует решения» (ops.js: #ds-attn-btn) в окне пульса */ #go-top #ds-attn-btn, .go-sheet #ds-attn-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; font-size: 13px; background: var(--warn-bg); color: var(--warn); font-weight: 600; transition: filter var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap); } #go-top #ds-attn-btn::before, .go-sheet #ds-attn-btn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } #go-top #ds-attn-btn.stop, .go-sheet #ds-attn-btn.stop { background: var(--crit-bg); color: var(--crit); } #go-top #ds-attn-btn b { font-weight: 600; color: inherit; } #go-top #ds-attn-btn:hover { filter: brightness(1.06); } #go-top #ds-attn-btn:active { transform: scale(.97); } #go-top #ds-attn-btn:focus-visible { box-shadow: var(--ring); } .go-strip-holder { display: none !important; } /* телефон: нижняя панель и лист «Ещё» (shell.js) */ .go-tabbar { display: none; } .go-sheet { border: 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88vh; overflow: auto; border-radius: 22px 22px 0 0; background: var(--pop-bg); color: var(--body); box-shadow: var(--pop-shadow); box-sizing: border-box; } .go-sheet[open] { animation: go-sheet-in var(--dur-3) var(--ease-enter); } @keyframes go-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } .go-sheet::backdrop { background: var(--scrim); } .go-sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .go-sheet-h b { font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: -.02em; color: var(--ink); } .go-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; } .go-sheet-a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 560; text-decoration: none; box-shadow: var(--sh-1); } .go-sheet-a.on { background: var(--ink); color: var(--on-ink); } .go-sheet-k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin: 0 10px 4px; } .go-sheet-f { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 16px; } .go-sheet-f form { display: contents; } @media (max-width: 1359px) { .go-pulse-t { display: none; } .go-find { width: 200px; } } @media (min-width: 901px) and (max-width: 1279px) { .go-row1 { gap: 8px; } .go-nav a, .go-sysbtn { padding: 0 9px; font-size: 13px; } .go-district, .go-find-t, .go-pulse-t { display: none; } .go-find { width: auto; padding: 0 6px 0 10px; } .go-nav-n { display: none; } } @media (max-width: 900px) { :root { --top-h: 56px; } /* закреплена у окна: body высотой в экран — «липкая» шапка уезжала после первого экрана */ #go-top { position: fixed; top: 0; left: 0; right: 0; padding: 0 12px; } html.go-top-shell #root { padding-top: var(--top-h); padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); } html.go-top-shell #root .app { padding-bottom: 0 !important; } .go-row1 { height: 56px; gap: 8px; } .go-nav, .go-district, .go-user-wrap { display: none; } .go-find { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; flex: none; } .go-find-t, .go-find kbd { display: none; } .go-icon-btn { width: 44px; height: 44px; } .go-pulse { height: 44px; padding: 0 10px; } .go-pulse-t { display: none; } .go-pop { width: calc(100vw - 16px); left: 8px !important; } .go-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--canvas) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--line); } .go-tabbar a, .go-tabbar button { all: unset; box-sizing: border-box; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 12px; color: var(--mute); font-size: 12px; font-weight: 560; cursor: pointer; text-decoration: none; transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--spring-snap); } .go-tabbar a:active, .go-tabbar button:active { transform: scale(.92); } .go-tabbar [aria-current=page] { color: var(--ink); } .go-tabbar :is(a, button):focus-visible { box-shadow: var(--ring); } .go-tabbar .go-ic { width: 20px; height: 20px; } .go-tab-ind { position: absolute; z-index: 0; left: 0; top: 6px; height: 52px; border-radius: 12px; background: var(--nav-on); box-shadow: var(--nav-on-sh); pointer-events: none; opacity: 0; transition: transform var(--dur-4) var(--spring-nav), width var(--dur-3) var(--spring-glide), opacity var(--dur-1) var(--ease-out); } :root[data-ui=light] .go-tab-ind { background: var(--surface); } } /* ── 6. общие компоненты ───────────────────────────────────────────────── */ /* заголовок экрана — голос продукта (Unbounded), действия — справа в строку */ .thead-row { margin: clamp(28px, 4vw, 48px) 0 var(--s5); gap: var(--s3); min-height: 40px; align-items: center; flex-wrap: wrap; } .thead-row .stitle, .thead-row h1, .thead-row h2 { font-family: var(--display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; font-weight: 500; letter-spacing: -.035em; color: var(--ink); white-space: nowrap; view-transition-name: go-title; } .sec { margin: var(--s7) 0 var(--s4); } .sec .stitle, .stitle { font-family: var(--display); font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); } .foot { color: var(--mute); font-size: 12px; } /* плашки — заливкой, без рамок; цвет — маленькой меткой */ /* блоком, не flex: у бандла текст и число — соседние узлы, flex разрывал их пробелами */ .banner { border: 0 !important; border-radius: var(--r-md); background: var(--warn-bg); color: var(--ink); padding: 12px 16px 12px 36px; margin: var(--s4) 0 0; font-size: 14px; line-height: 20px; position: relative; display: flow-root !important; box-shadow: none; } .banner::before { content: ""; position: absolute; left: 16px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); } .banner.warn { background: var(--warn-bg); color: var(--ink); } .banner.warn b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; } .banner.err { background: var(--crit-bg); color: var(--ink); } .banner.err::before { background: var(--crit); } /* «Ждут отправки на участки» — это говорят пульс системы в шапке и рассылка на главной */ #root .banner.warn { display: none !important; } .banner .banner-act { float: right; margin: -6px -6px -6px var(--s4); height: 32px !important; padding: 0 14px !important; font-size: 13px !important; background: var(--canvas) !important; } .banner .banner-act:hover { background: var(--hover) !important; } /* действия экрана — справа, даже если у экрана нет счётчика */ .thead-row > .stitle + :not(.tcount) { margin-left: auto !important; } #ds-notes:empty { display: none; } #ds-notes { margin-top: var(--s3); display: grid; gap: var(--s2); } .ds-note, .ds-note.info { background: var(--surface) !important; } .ds-note { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; color: var(--body); border: 0 !important; border-radius: var(--r-md); padding: 12px 16px; margin: 0; font-size: 13px; line-height: 20px; } .ds-note:not(.info)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; } .ds-note[role=alert]::before { background: var(--crit); } .ds-note .ds-btn { margin-left: auto; } /* ── кнопки: одна система для своих (.go-btn, .ds-btn) и кнопок бандла ── */ :is(.go-btn, .ds-btn, .sf-btn, .j-refresh, .j-refmore, .sbtn, .gm-cancel, .gm-ok, .an-dlbtn, .banner-act, .send) { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px !important; border: 0 !important; font-family: var(--font); font-size: 14px !important; font-weight: 550 !important; line-height: 1; letter-spacing: -.005em; white-space: nowrap; text-decoration: none; cursor: pointer; position: relative; box-shadow: none !important; filter: none !important; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap), opacity var(--dur-1) var(--ease-out) !important; } :is(.go-btn, .ds-btn, .sf-btn, .j-refresh, .j-refmore, .sbtn, .gm-cancel, .gm-ok, .an-dlbtn, .banner-act, .send) svg { width: 16px; height: 16px; flex: none; } /* главная */ :is(.go-btn-pri, .ds-btn.pri, .sf-btn.pri, .gm-ok, .an-dlbtn, .selbar .sbtn.pri, .send) { background: var(--ink) !important; color: var(--on-ink) !important; } :is(.go-btn-pri, .ds-btn.pri, .sf-btn.pri, .gm-ok, .an-dlbtn, .selbar .sbtn.pri, .send) :is(svg, span) { color: inherit !important; } :is(.go-btn-pri, .ds-btn.pri, .sf-btn.pri, .gm-ok, .an-dlbtn, .selbar .sbtn.pri, .send):hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 82%, var(--canvas)) !important; } /* второстепенная — заливкой, без контура */ :is(.go-btn-sec, .ds-btn:not(.pri):not(.dng), .sf-btn:not(.pri), .j-refresh, .j-refmore, .sbtn:not(.pri):not(.danger), .gm-cancel, .banner-act) { background: var(--surface-2) !important; color: var(--ink) !important; } :is(.go-btn-sec, .ds-btn:not(.pri):not(.dng), .sf-btn:not(.pri), .j-refresh, .j-refmore, .sbtn:not(.pri):not(.danger), .gm-cancel, .banner-act):hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 12%, var(--surface-2)) !important; } /* на заливке панели второстепенная — белая */ :is(.set-card, .dir, .an-card, .card, .go-panel) :is(.ds-btn:not(.pri):not(.dng), .sbtn:not(.pri):not(.danger), .j-refresh) { background: var(--canvas) !important; } :is(.set-card, .dir, .an-card, .card, .go-panel) :is(.ds-btn:not(.pri):not(.dng), .sbtn:not(.pri):not(.danger), .j-refresh):hover:not(:disabled) { background: var(--hover) !important; } .ds-btn.dng, .gm-ok.danger { background: var(--crit) !important; color: var(--on-crit) !important; } .ds-btn.sm { height: 32px; padding: 0 12px; font-size: 13px !important; border-radius: 8px !important; } /* стрелка в кнопке «едет» при наведении */ .go-btn-ic { transition: transform var(--dur-2) var(--spring-snap); } :is(.go-btn, .ds-btn):hover .go-btn-ic { transform: translateX(3px); } /* нажатие — пружиной */ :is(.go-btn, .ds-btn, .sf-btn, .j-refresh, .j-refmore, .sbtn, .gm-cancel, .gm-ok, .an-dlbtn, .banner-act, .send, .tsend, .dir-open, .tback, .sgi, .seg button, .an-seg button):active:not(:disabled) { transform: scale(.965); } /* занято: подпись гаснет, поверх — кольцо */ :is(.go-btn, .ds-btn, .sf-btn, .j-refresh, .send, .gm-ok)[aria-busy=true] { color: transparent !important; pointer-events: none; } :is(.go-btn, .ds-btn, .sf-btn, .j-refresh, .send, .gm-ok)[aria-busy=true] :is(svg, span) { opacity: 0; } :is(.go-btn, .ds-btn, .sf-btn, .j-refresh, .send, .gm-ok)[aria-busy=true]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--mute); border-top-color: transparent; animation: go-spin .7s linear infinite; } :is(.go-btn-pri, .ds-btn.pri, .send, .gm-ok)[aria-busy=true]::after { border-color: var(--on-ink); border-top-color: transparent; } @keyframes go-spin { to { transform: rotate(1turn); } } /* выполнено */ :is(.go-btn, .ds-btn, .send).is-done, .send.done { background: var(--ok) !important; color: #fff !important; } :is(.go-btn, .ds-btn, .send).is-done :is(svg, span), .send.done :is(svg, span) { color: #fff !important; } :is(button, [role=button], .go-btn, .ds-btn):disabled, :is(button, [role=button])[aria-disabled=true] { cursor: not-allowed; opacity: .42; } /* квадратные кнопки-значки */ :is(.tback, .dir-open) { width: 40px !important; height: 40px !important; border-radius: 10px !important; border: 0 !important; background: var(--surface-2) !important; color: var(--ink) !important; box-shadow: none !important; display: inline-grid !important; place-items: center; transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap) !important; } :is(.tback, .dir-open):hover { background: color-mix(in srgb, var(--ink) 12%, var(--surface-2)) !important; } .dir .dir-open { background: var(--canvas) !important; } /* сегменты: дорожка-заливка, выбранный — белая «таблетка» с тенью */ .seg, .an-seg { border-radius: 10px; background: var(--surface) !important; border: 0 !important; padding: 3px; box-shadow: none !important; } .seg button, .an-seg button { border-radius: 7px; padding: 0 12px; height: 30px; font-size: 13px; font-weight: 500; color: var(--mute); white-space: nowrap; transition: color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap); } .seg button:hover, .an-seg button:hover { color: var(--ink); } .seg button.on, .an-seg button.on, .seg button[aria-pressed=true], .an-seg button[aria-pressed=true] { color: var(--ink); } .seg .segbg, .an-seg .an-segbg { border-radius: 7px; background: var(--canvas) !important; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px rgb(0 0 0 / .03) !important; } :root[data-ui=dark] :is(.seg .segbg, .an-seg .an-segbg) { background: var(--surface-2) !important; } /* переключатель: ползунок поджимается при нажатии (Animate UI switch) */ .sw { border-radius: 999px; background: var(--line-strong) !important; box-shadow: none !important; transition: background-color var(--dur-2) var(--ease-out) !important; } .sw.on { background: var(--ink) !important; } .sw .k { background: var(--canvas) !important; box-shadow: 0 1px 3px rgb(0 0 0 / .3) !important; transition: transform var(--dur-3) var(--spring-snap), scale var(--dur-2) var(--spring-snap) !important; } .sw:active .k { scale: 1.18 1; } :root[data-ui=dark] .sw.on .k { background: var(--on-ink) !important; } /* статус строки: точка + слово */ .tstatus { background: none !important; border: 0 !important; padding: 0 !important; font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--body) !important; } .tstatus::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-control); flex: none; } .tstatus.st-none { color: var(--crit) !important; } .tstatus.st-none::before { background: var(--crit); } .tstatus.st-rework { color: var(--warn) !important; } .tstatus.st-rework::before { background: var(--warn); } .tstatus.st-prep { color: var(--mute) !important; } .tstatus.st-done::before, .tstatus.st-ok::before { background: var(--ok); } /* шкала регламента: calm / near / over — «чернильная» плашка дня */ .gday, .tday, .mt-day { font-weight: 650 !important; font-size: 12px !important; font-variant-numeric: tabular-nums; border-radius: 6px !important; width: 32px !important; height: 24px !important; border: 0 !important; } :is(.gday, .tday, .mt-day).low { background: var(--surface) !important; color: var(--ink) !important; } :is(.gday, .tday, .mt-day).warn { background: var(--warn-bg) !important; color: var(--warn) !important; } :is(.gday, .tday, .mt-day).hot { background: var(--crit) !important; color: var(--on-crit) !important; } .gday.ctrl { background: none !important; box-shadow: inset 0 0 0 1px var(--line-control) !important; color: var(--mute) !important; } /* ── 7. экраны ─────────────────────────────────────────────────────────── */ /* главная: сводка смены (home.js). Плитки, полоса и карточки направлений бандла остаются в DOM — наши элементы нажимают на них и читают их числа — но не показываются. */ html[data-route=home] .fit-in > .sec, html[data-route=home] .fit-in > section.stats, html[data-route=home] .fit-in > .strip, html[data-route=home] .fit-in > nav.bento, html[data-route=home] .fit-in > p.foot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; margin: 0 !important; padding: 0 !important; pointer-events: none; } /* карточки направлений: содержимое скрыто (его зеркалит home.js), но окно подтверждения бандла (.go-modal-bg внутри .dir, position: fixed) должно показываться — поэтому без clip */ html[data-route=home] .fit-in > .dirs { display: block !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } html[data-route=home] .fit-in > .dirs .dir { display: contents !important; } html[data-route=home] .fit-in > .dirs .dir > :not(.go-modal-bg) { display: none !important; } .go-sronly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .fit-scale { overflow: hidden auto !important; scrollbar-width: thin; } .fit-scale > .fit-in { transform: none !important; padding-bottom: var(--s8); } /* таблица — прямо на листе, без коробки: «линейка ведомости» под шапкой */ .thead-row { justify-content: flex-start !important; } .thead-row .tcount { margin: 0 auto 0 6px !important; align-self: flex-end; padding-bottom: 4px; color: var(--mute); font-size: 13px; white-space: nowrap; } .thead-row .tcount b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; } .j-refwrap { display: inline-flex; gap: 2px; margin-left: 0 !important; } .thead-row > .j-refresh { margin-left: 0 !important; } .j-refwrap .j-refresh { border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; } .j-refwrap .j-refmore { border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; padding: 0 12px !important; } .switcher > .seg[data-go-label] { display: inline-flex; align-items: center; } .switcher > .seg[data-go-label]::before { content: attr(data-go-label); padding: 0 8px 0 9px; font-size: 12px; font-weight: 500; color: var(--mute); white-space: nowrap; } .switcher { gap: var(--s2) !important; margin-bottom: var(--s4) !important; flex-wrap: wrap; } /* поля ввода: белое поле с рамкой — рамка здесь несёт смысл «сюда пишут» */ .ds-input, .ds-select, .set-input, .addr-row input, .an-date input { background: var(--field) !important; border: 1px solid var(--line-control) !important; border-radius: 9px !important; color: var(--ink) !important; box-shadow: none !important; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out) !important; } :is(.ds-input, .ds-select, .set-input, .addr-row input, .an-date input):hover { border-color: var(--ink) !important; } :is(.ds-input, .ds-select, .set-input, .addr-row input, .an-date input):focus { border-color: var(--ink) !important; box-shadow: var(--ring) !important; outline: none; } /* столбцы «Порталов»: категории — место (обрезалась), адресу — гибкая доля. Подбор по встроенному шаблону бандла: у «Мониторов» другой шаблон, его не трогаем */ :is(.ghead, .grow)[style*="30px 42px 100px 118px"] { grid-template-columns: 32px 48px 92px 164px minmax(240px, 1fr) 64px 136px 44px 44px !important; } /* узкий компьютер: «Категория» уходит (она же — в фильтре столбца «Категория» мобильной карточки и в поиске) */ @media (min-width: 901px) and (max-width: 1279px) { :is(.ghead, .grow)[style*="30px 42px 100px 118px"] { grid-template-columns: 32px 44px 88px minmax(200px, 1fr) 60px 128px 40px 44px !important; } .ghead[style*="30px 42px 100px 118px"] > :nth-child(4), .grow[style*="30px 42px 100px 118px"] > .gcat { display: none !important; } } .sfwrap { margin-bottom: var(--s5) !important; } .sfbar { border-radius: 12px !important; border: 0 !important; background: var(--surface) !important; padding: 0 16px !important; min-height: 48px; gap: 10px !important; transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); } .sfbar:hover { background: var(--hover) !important; } .sfbar:focus-within { background: var(--field) !important; box-shadow: inset 0 0 0 1px var(--ink), var(--ring) !important; } .sfbar > svg { width: 18px; height: 18px; } .sfin { font-size: 15px !important; padding: 10px 0 !important; color: var(--ink) !important; } .sfin::placeholder { color: var(--mute) !important; } .gtbl, .gtbl.glass { border-radius: 0 !important; overflow: visible; background: transparent !important; border: 0 !important; } .ghead { background: var(--canvas) !important; border: 0 !important; border-bottom: 2px solid var(--ink) !important; padding: 0 12px !important; min-height: 40px; transition: box-shadow var(--dur-2) var(--ease-out); align-items: center; font-size: 12px !important; font-weight: 550 !important; color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; position: sticky; top: 0; z-index: 3; } .ghead .ghfilter { color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 550 !important; } .ghead .ghfilter svg { color: var(--mute); } .ghfilter .ghn { background: var(--ink) !important; color: var(--on-ink) !important; } /* шапка прилипла и под ней уже строки — отделяется тенью (shell.js ставит .go-stuck) */ .go-stuck .ghead { box-shadow: 0 10px 16px -12px rgb(0 0 0 / .28) !important; } .grow { min-height: 52px !important; padding: 6px 12px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; background: transparent !important; box-shadow: none !important; transition: background-color var(--dur-1) var(--ease-out); } .grow:hover { background: var(--surface) !important; } .grow.sel { background: var(--surface-2) !important; } .grow.rt-over, .grow.rt-today, .grow.rt-soon, .grow.rt-near { animation: none !important; box-shadow: none; } .gnum { font-size: 12.5px !important; color: var(--mute) !important; font-variant-numeric: tabular-nums; } .gcat { font-size: 13px !important; color: var(--body) !important; } .gaddr b { font-size: 14.5px !important; font-weight: 550 !important; color: var(--ink) !important; letter-spacing: -.005em; } .gsub { font-size: 13px !important; color: var(--mute) !important; } .gterm { font-size: 13px !important; color: var(--ink) !important; font-weight: 500 !important; } .gunit { font-size: 14px; color: var(--ink); font-weight: 600; } .gmon { background: var(--warn-bg) !important; color: var(--warn) !important; border: 0 !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 550 !important; text-transform: none !important; letter-spacing: 0 !important; } .gcheck { border: 1.5px solid var(--line-control) !important; border-radius: 6px !important; background: var(--field) !important; transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap) !important; } .gcheck:active { transform: scale(.88); } .gcheck.on { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--on-ink) !important; } .tsend { border-radius: 10px !important; color: var(--ink) !important; background: transparent !important; border: 0 !important; transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap) !important; } .tsend svg { transition: transform var(--dur-3) var(--spring-snap); } .tsend:hover:not(:disabled) { background: var(--ink) !important; color: var(--on-ink) !important; } /* действие строки — тише, пока строка не под указателем или в фокусе (Carbon / Attio); на сенсорных экранах — всегда в полную силу */ @media (hover: hover) { .grow .tsend:not(.warn) { opacity: .38; } .grow:hover .tsend, .grow:focus-within .tsend, .grow.sel .tsend { opacity: 1; } /* значок фильтра столбца — при наведении на шапку или когда фильтр задан */ .ghead .ghfilter svg { opacity: 0; transition: opacity var(--dur-1) var(--ease-out); } .ghead:hover .ghfilter svg, .ghead .ghfilter:focus-visible svg, .ghead .ghfilter:has(.ghn) svg { opacity: 1; } } .grow .tsend { transition: opacity var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap) !important; } .tsend:hover:not(:disabled) svg { transform: translate(2px, -2px); } .tsend.warn { color: var(--warn) !important; background: var(--warn-bg) !important; } .tsend.sent, .tsend.done { color: var(--ok) !important; } /* панель выбранных строк — чёрная плавающая полоса */ .selbar { background: var(--inv-bg) !important; color: var(--inv-fg) !important; border: 0 !important; box-shadow: var(--pop-shadow) !important; border-radius: 16px !important; animation: go-rise var(--dur-3) var(--spring-snap); } .selbar * { color: inherit; } .selbar .sbtn.pri { background: var(--inv-fg) !important; color: var(--inv-bg) !important; } .selbar .sbtn:not(.pri) { background: color-mix(in srgb, var(--inv-fg) 14%, var(--inv-bg)) !important; color: var(--inv-fg) !important; } @keyframes go-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } } /* итог и мониторы */ /* итог — сетка участок × день прямо на листе; название вида — заголовком */ .sv-blk, .sv-blk.dark { border-radius: 0 !important; border: 0 !important; background: transparent !important; margin: 0 0 var(--s7) !important; overflow: visible !important; } .sv-cap, .sv-blk.dark .sv-cap { background: transparent !important; color: var(--ink) !important; font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: -.03em; border: 0; border-bottom: 2px solid var(--ink); padding: 0 0 10px !important; margin-bottom: 0; } .sv-when, .sv-blk.dark .sv-when { color: var(--mute) !important; font-weight: 400 !important; font-size: 13px; font-family: var(--mono); } .sv-t th, .sv-t td { border-color: var(--line) !important; font-size: 13px !important; padding: 8px 6px !important; } .sv-t thead th { background: var(--surface); color: var(--mute); font-weight: 500 !important; } .sv-t th, .sv-t td { border-left: 0 !important; border-right: 0 !important; } .sv-t tbody tr:hover td { background: var(--surface) !important; } .sv-t .sv-day { font-size: 13px !important; color: var(--ink); font-weight: 600 !important; } .sv-t .sv-date { font-size: 12px !important; color: var(--mute); } .sv-t .h-hot { background: var(--crit) !important; color: var(--on-crit) !important; } .sv-t .sv-date.h-hot { color: var(--on-crit) !important; } .sv-t .h-warn { background: var(--warn-bg) !important; color: var(--warn) !important; } .sv-t .h-mid, .sv-t .h-calm { background: var(--surface) !important; color: var(--ink) !important; } .sv-t .sv-date:is(.h-mid, .h-calm) { color: var(--mute) !important; } .sv-mu, .sv-tot, .sv-blk.dark .sv-t thead .sv-mu, .sv-blk.dark .sv-t thead .sv-tot { background: var(--surface) !important; color: var(--ink) !important; } .sv-t thead .sv-mu, .sv-t thead .sv-tot { background: var(--surface) !important; color: var(--mute) !important; font-weight: 500 !important; } .sv-tot.sv-total { background: var(--canvas) !important; color: var(--ink) !important; font-family: var(--display); font-weight: 500 !important; letter-spacing: -.03em; } .sv-n { color: var(--faint) !important; } .sv-n.some { color: var(--ink) !important; font-weight: 600 !important; } .sv-sum td, .sv-blk.dark .sv-sum td, .sv-sum .sv-mu, .sv-sum .sv-tot, .sv-blk.dark .sv-sum .sv-mu, .sv-blk.dark .sv-sum .sv-tot { background: var(--inv-bg) !important; color: var(--inv-fg) !important; font-weight: 600 !important; border-color: var(--inv-bg) !important; } .sv-unknown { color: var(--warn) !important; font-style: normal !important; } .sv-pref { border-top: 0 !important; padding: 14px 0 0 !important; } .sv-pref-k { color: var(--mute) !important; font-weight: 500 !important; } .sv-pref b { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 500 !important; font-size: 22px; letter-spacing: -.04em; color: var(--ink); } .mon-t { background: transparent !important; } /* мониторы: срочность — в ячейке «Осталось» и полосой слева, а не заливкой всей строки */ .mon-t th, .mon-t td { text-align: left !important; } .mon-t th { background: transparent !important; color: var(--ink) !important; font-weight: 550 !important; font-size: 12px !important; border-bottom: 2px solid var(--ink) !important; } .mon-r td { background: transparent !important; vertical-align: top; } .mon-r td:first-child { font-variant-numeric: tabular-nums; } .mon-t .mon-addr { min-width: 240px !important; color: var(--ink); font-weight: 500; } .mon-t td:nth-child(4) { white-space: normal !important; min-width: 220px; color: var(--body); } .mon-t td:nth-child(5) { font-family: var(--mono); font-size: 12px !important; color: var(--mute); } .mon-t td:nth-child(6) { font-weight: 600; font-variant-numeric: tabular-nums; } .mon-r.over td:nth-child(6) { color: var(--crit); } .mon-r.today td:nth-child(6), .mon-r.soon td:nth-child(6) { color: var(--warn); } .mon-r.near td:nth-child(6) { color: var(--ink); } .mon-r:hover td { background: var(--surface) !important; } .mon-t th, .mon-t td { border-left: 0 !important; border-right: 0 !important; } .sv-cap > span:first-child { display: inline-flex; align-items: center; gap: 8px; } .sv-cap svg { width: 16px; height: 16px; color: var(--mute); } /* свод */ .an-bar { border-radius: var(--r-md) !important; padding: 8px 8px 8px 16px !important; gap: var(--s3) !important; } /* показатели свода — одна редакционная строка крупных чисел, без коробок */ .an-kpis { gap: 0 !important; border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: transparent; overflow: visible; margin-top: var(--s5) !important; } .an-kpi { border: 0 !important; border-radius: 0 !important; padding: 16px 24px 8px 0 !important; background: transparent !important; } .an-kpi + .an-kpi { border-left: 0 !important; } .an-kpi .k-top { color: var(--mute) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 500 !important; } .an-kpi .k-big { font-family: var(--display); font-variant-numeric: tabular-nums; font-size: clamp(40px, 4vw, 64px) !important; line-height: 1; font-weight: 400 !important; letter-spacing: -.06em; color: var(--ink); margin: 10px 0 12px !important; } .an-kpi .k-big.trend { font-size: clamp(22px, 2vw, 30px) !important; font-weight: 500 !important; letter-spacing: -.035em; } .an-kpi :is(.k-pill, .k-sub) { background: var(--surface-2) !important; border: 0 !important; color: var(--body) !important; font-size: 12px !important; } .an-grid { gap: var(--s4) !important; } .an-card { border-radius: var(--r-lg) !important; padding: var(--s5) !important; border: 0 !important; } .an-card h3 { font-family: var(--display); font-size: 16px !important; font-weight: 500 !important; letter-spacing: -.03em; color: var(--ink); } .cb-track { height: 4px !important; background: var(--surface-2) !important; } .cb-cur, .cb-cur.t-mkd, .cb-cur.t-ter { background: var(--ink) !important; } .an-dlmenu { border-radius: var(--r-md) !important; box-shadow: var(--pop-shadow) !important; background: var(--canvas) !important; border: 0 !important; transform-origin: top right; animation: go-pop-in var(--dur-3) var(--spring-snap); } .ds-own-chart .an-area, .ds-own-chart .an-xax, .ds-own-chart .an-legend { display: none !important; } #ds-daily .ds-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 0 0 8px; font-size: 12px; color: var(--mute); } #ds-daily .ds-legend .k::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; } #ds-daily .ds-legend .k.cur::before { background: var(--ink); } #ds-daily .ds-legend .k.prev::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-control); } #ds-daily .ds-legend .ds-hint { margin-left: auto; } .ds-chart { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font); font-variant-numeric: tabular-nums; } .ds-chart .grid { stroke: var(--line); stroke-width: 1; } .ds-chart .axis { stroke: var(--line-strong); stroke-width: 1; } .ds-chart .tick, .ds-chart .date { fill: var(--mute); font-size: 12px; } .ds-chart .dow { fill: var(--body); font-size: 12px; font-weight: 500; font-family: var(--font); } .ds-chart .cur { fill: var(--ink); } .ds-chart .prev { fill: transparent; stroke: var(--line-control); stroke-width: 1.5; } .ds-chart .val { fill: var(--ink); font-size: 12px; font-weight: 600; } .ds-chart .val.prev { fill: var(--mute); stroke: none; font-weight: 400; } .ds-chart .day.partial .cur { fill: color-mix(in srgb, var(--ink) 35%, transparent); stroke: var(--ink); stroke-dasharray: 3 2; } .ds-chart .day.partial .date { fill: var(--warn); } .ds-chart .hit { fill: transparent; cursor: pointer; } .ds-chart .day:hover .hit { fill: color-mix(in srgb, var(--ink) 5%, transparent); } .ds-chart .day:focus { outline: none; } .ds-chart .day:focus-visible .hit { stroke: var(--focus); stroke-width: 2; } /* расписание */ /* расписание: мастер — большая поверхность; задачи — список на листе */ .master { border-radius: var(--r-lg) !important; padding: var(--s5) var(--s6) !important; gap: var(--s4) !important; background: var(--surface) !important; border: 0 !important; } .master .mt b { font-family: var(--display); font-size: 22px !important; font-weight: 500 !important; letter-spacing: -.035em; } .job { border-radius: 0 !important; padding: 18px 4px !important; gap: var(--s4) !important; background: transparent !important; border: 0 !important; } .jobs { gap: 0 !important; border: 0; border-top: 2px solid var(--ink); border-radius: 0; overflow: visible; background: transparent; margin-top: var(--s5); } .jobs .job { border: 0 !important; border-radius: 0 !important; margin: 0 !important; } .jobs .job + .job { border-top: 1px solid var(--line) !important; } .master .mi, .job .jico { width: 32px !important; height: 32px !important; border-radius: 9px !important; background: var(--surface) !important; color: var(--ink) !important; } .master .mi { background: var(--canvas) !important; } .job .jico svg, .master .mi svg { width: 16px; height: 16px; } .job .jt { font-size: 15px !important; font-weight: 600 !important; color: var(--ink); letter-spacing: -.01em; } .job .jsub, .master .ms { color: var(--mute) !important; font-size: 13px !important; } .job .jstatus .lp { background: var(--ok) !important; } .job.off { filter: none !important; opacity: 1 !important; } .job.off .jt { color: var(--mute) !important; } /* «зашитые» пункты: не переключатель (он ничего не делал), а пометка словами */ .job .sw[aria-disabled=true] { display: none !important; } .jfix { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: var(--mute) !important; background: var(--surface-2) !important; border: 0 !important; border-radius: var(--r-xs) !important; padding: 2px 8px !important; margin-left: 8px; vertical-align: 1px; } .m-fixed { margin-left: 8px; color: var(--mute) !important; } .m-fixed svg { color: var(--mute) !important; } .jchip { font-variant-numeric: tabular-nums; background: var(--surface) !important; border: 0 !important; color: var(--body) !important; border-radius: var(--r-xs) !important; font-weight: 500 !important; } .jchip.over, .jchip.crit, .jchip.hot { background: var(--crit-bg) !important; color: var(--crit) !important; } :is(.job, .master) :is(.lock, .fix, .tag) { background: none !important; border: 1px solid var(--line) !important; color: var(--mute) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; border-radius: var(--r-xs) !important; } .job .tchip, .job .times span { font-variant-numeric: tabular-nums; background: var(--surface-2) !important; border: 0 !important; color: var(--body) !important; } .snote { color: var(--mute) !important; font-size: 13px !important; } /* настройки */ .set-grid { gap: var(--s4) !important; } .set-card { border-radius: var(--r-lg) !important; padding: var(--s5) !important; border: 0 !important; } .set-ic { display: none !important; } .set-card h3, .set-card .set-t b { font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); } .set-label, .set-card label > span:first-child { font-size: 12px !important; font-weight: 500 !important; color: var(--mute) !important; text-transform: none !important; letter-spacing: 0 !important; } .set-input { padding: 8px 12px !important; min-height: 42px; } .set-saved { font-size: 13px !important; color: var(--ok) !important; } .set-saved.err { color: var(--crit) !important; background: var(--crit-bg) !important; padding: 3px 8px; border-radius: var(--r-xs); } .addr-table { border-radius: 12px !important; border: 0 !important; background: var(--canvas) !important; } .addr-row input:focus { border-color: var(--ink) !important; } .addr-row input.ar-g { font-family: var(--mono); } /* история действий */ .j-wrap { border-radius: var(--r-lg) !important; border: 0 !important; } .j-wrap { padding: 8px !important; margin-bottom: var(--s4) !important; } .j-cap { font-family: var(--display); font-size: 15px !important; font-weight: 500; letter-spacing: -.02em; color: var(--ink) !important; padding: 14px 14px 6px !important; } .j-cap svg { color: var(--mute); } .jr { border-radius: 0 !important; padding: 10px 4px !important; border-bottom: 1px solid var(--line); background: none !important; } .jr-ic { width: 24px !important; height: 24px !important; border-radius: var(--r-xs) !important; background: var(--surface-2) !important; color: var(--ink) !important; } .jr-t { font-family: var(--mono); color: var(--mute); font-size: 12px; } .dj-ic.ok { background: var(--ok-bg) !important; color: var(--ok) !important; } .dj-ic.err { background: var(--crit-bg) !important; color: var(--crit) !important; } /* ── 8. окна, меню, тосты ──────────────────────────────────────────────── */ /* командное меню (cmdk.js) */ /* командное меню */ .go-cmdk { width: min(640px, calc(100vw - 24px)); max-height: min(70vh, 640px); margin: 12vh auto auto; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--pop-bg); color: var(--body); box-shadow: var(--pop-shadow); overflow: hidden; } .go-cmdk[open] { display: flex; flex-direction: column; animation: go-pop-in var(--dur-3) var(--spring-glide); } .go-cmdk.go-morph[open] { animation: none; } .go-cmdk::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: go-fade-in var(--dur-2) var(--ease-out); } .go-cmdk-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); } .go-cmdk-in { all: unset; flex: 1; font-family: var(--font); font-size: 18px; color: var(--ink); } .go-cmdk-in::placeholder { color: var(--mute); } html body .go-cmdk-in:focus-visible { box-shadow: none !important; } .go-cmdk-head kbd, .go-cmdk-foot { font-size: 12px; color: var(--mute); } .go-cmdk-head kbd { padding: 2px 6px; border-radius: 5px; background: var(--surface); } .go-cmdk-list { list-style: none; margin: 0; padding: 8px; overflow: auto; flex: 1; min-height: 0; } .go-cmdk-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; } .go-cmdk-row[aria-selected=true] { background: var(--hover); color: var(--ink); } .go-cmdk-row .go-cmdk-k.act { color: var(--ink); background: var(--surface-2); padding: 2px 7px; border-radius: 6px; font-weight: 600; } .go-cmdk-t { display: grid; min-width: 0; flex: 1; } .go-cmdk-t b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .go-cmdk-t small { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .go-cmdk-m { display: flex; align-items: center; gap: 8px; flex: none; font-size: 12px; } .go-cmdk-k, .go-cmdk-u { color: var(--mute); } .go-cmdk-st.none { color: var(--crit); } .go-cmdk-st.rework { color: var(--warn); } .go-cmdk-st.prep { color: var(--mute); } .go-cmdk-empty { padding: 20px 12px; color: var(--mute); font-size: 14px; } /* окна — белый лист на затемнении, без рамки; появление — «вырастают» из кнопки, которой открыты (motion.js), запасной вариант — подъём снизу */ .go-modal-bg { -webkit-backdrop-filter: blur(2px) !important; backdrop-filter: blur(2px) !important; background: var(--scrim) !important; } .go-modal { border-radius: var(--r-lg) !important; padding: 28px !important; background: var(--canvas) !important; border: 0 !important; box-shadow: var(--pop-shadow) !important; } .go-modal .gm-ic { background: var(--surface) !important; color: var(--ink) !important; border-radius: 12px !important; width: 44px !important; height: 44px !important; } .go-modal h3, .go-modal .gm-t { font-family: var(--display); font-weight: 500; letter-spacing: -.03em; color: var(--ink); } .go-toast { border-radius: 14px !important; box-shadow: var(--pop-shadow) !important; font-weight: 500; animation: go-rise var(--dur-3) var(--spring-snap); } .go-toast.ok { background: var(--inv-bg) !important; color: var(--inv-fg) !important; } .go-toast.err { background: var(--crit) !important; color: var(--on-crit) !important; } .ds-dlg { border-radius: var(--r-lg) !important; border: 0 !important; background: var(--canvas) !important; box-shadow: var(--pop-shadow) !important; color: var(--body); padding: 0 !important; } .ds-dlg::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: go-fade-in var(--dur-3) var(--ease-out); } @keyframes go-fade-in { from { opacity: 0; } } .ds-dlg .ds-body > * { animation: go-reveal var(--dur-3) var(--spring-glide) both; } dialog.ds-dlg[open] { display: flex; flex-direction: column; max-height: min(88vh, 920px); overflow: hidden; animation: go-pop-in var(--dur-3) var(--ease-enter); } dialog.ds-dlg[open].go-morph { animation: none; } @keyframes go-pop-in { from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } .ds-dlg > header, .ds-dlg > footer { flex: none; } .ds-dlg > header { padding: 24px 28px 8px !important; border: 0 !important; } .ds-dlg > footer { padding: 16px 28px 24px !important; border: 0 !important; background: var(--canvas); } .ds-dlg > header h2, .ds-dlg h2 { font-family: var(--display); font-size: 21px; font-weight: 500; letter-spacing: -.035em; color: var(--ink); line-height: 1.2; } .ds-dlg .ds-body { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: auto; padding: 8px 28px 8px !important; } .ds-check { display: flex; gap: 10px; align-items: center; margin: 4px 0 10px; font-size: 14px; cursor: pointer; } .ds-check input { width: 18px; height: 18px; accent-color: var(--ink); } .ds-table th { background: transparent; color: var(--ink); font-weight: 550; font-size: 12px; text-transform: none; letter-spacing: 0; border-bottom: 2px solid var(--ink) !important; } .ds-table td, .ds-table th { border-color: var(--line) !important; border-left: 0 !important; border-right: 0 !important; } .ds-table tbody tr:hover td { background: var(--surface); } .ds-badge { border-radius: 6px !important; font-weight: 550 !important; } .ds-badge.info { background: var(--surface) !important; color: var(--ink) !important; } /* «Требует решения» — чёрное окно, растёт из нажатой кнопки (ops.js задаёт точку роста) */ #ds-attn { border-radius: var(--r-lg) !important; box-shadow: var(--pop-shadow) !important; background: var(--inv-bg) !important; color: var(--inv-fg) !important; border: 0 !important; padding: 8px !important; width: min(420px, calc(100vw - 24px)); } #ds-attn.go-in { animation: go-grow var(--dur-3) var(--ease-enter); } #ds-attn.go-out { animation: go-shrink 150ms var(--ease-exit) both; } @keyframes go-shrink { to { opacity: 0; transform: scale(.94); filter: blur(4px); } } @keyframes go-grow { from { opacity: 0; transform: scale(.86); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } #ds-attn .ds-attn-item { border: 0 !important; border-radius: 14px; padding: 14px !important; background: transparent; } #ds-attn .ds-attn-item + .ds-attn-item { box-shadow: inset 0 1px 0 var(--inv-line); border-radius: 0; } #ds-attn .ds-attn-item .t { color: var(--inv-fg); font-weight: 600; } #ds-attn .ds-attn-item.stop .t { color: var(--inv-crit); } #ds-attn .ds-attn-item .d { color: color-mix(in srgb, var(--inv-fg) 72%, transparent); } #ds-attn .ds-btn { background: var(--inv-fg) !important; color: var(--inv-bg) !important; } #ds-attn .ds-empty { color: var(--inv-mute); padding: 14px; } /* скелетон загрузки (ui-kit.js loading): полосы на месте будущих строк */ .go-skel { display: grid; gap: 14px; padding: 8px 0 !important; text-align: left !important; } .go-skel-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 80px; gap: 16px; align-items: center; } .go-skel-row i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 40%, var(--surface) 80%) 0 0 / 300% 100%; animation: go-shimmer 1.4s linear infinite; } .go-skel-row i:nth-child(2) { height: 14px; } .go-skel-row:nth-child(odd) i:nth-child(2) { width: 72%; } @keyframes go-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } } @media (prefers-reduced-motion: reduce) { .go-skel-row i { animation: none !important; background: var(--surface); } } /* ── 9. «Пульт района» ─────────────────────────────────────────────────── */ html.ds-page body { background: var(--canvas) !important; } .card { background: var(--surface) !important; border: 0 !important; border-radius: var(--r-lg) !important; padding: var(--s5) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.ds-page .card h2 { font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); } html.ds-page .card .summary { font-size: 13px; font-weight: 500; color: var(--ink); } html.ds-page .facts { font-size: 13px; } html.ds-page .facts dt { color: var(--mute); } html.ds-page .facts dd { color: var(--ink); } html.ds-page { font-family: var(--font); } html.ds-page .desk-top, html.ds-page .desk-tabs, html.ds-page #main { max-width: none; } html.ds-page .desk-top { padding: var(--s6) var(--s6) 0; gap: var(--s3); background: none; border: 0; box-shadow: none; margin: 0; border-radius: 0; } html.ds-page .desk-title b { font-family: var(--display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; font-weight: 500; letter-spacing: -.035em; color: var(--ink); } html.ds-page .desk-title span { font-size: 13px; color: var(--mute); } html.ds-page .desk-tabs { padding: 0 var(--s6); margin: var(--s4) 0 var(--s5); gap: var(--s5); border-bottom: 0; position: relative; background: none; border-radius: 0; width: auto; } html.ds-page .desk-tabs a { padding: 10px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; color: var(--mute); font-weight: 500; font-size: 14px; background: none; box-shadow: none; white-space: nowrap; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); } html.ds-page .desk-tabs a:hover { color: var(--ink); background: none; } html.ds-page .desk-tabs a[aria-current=page] { color: var(--ink); border-bottom-color: var(--ink); background: none; box-shadow: none; font-weight: 600; } html.ds-page #main { padding: 0 var(--s6) var(--s7); } html.ds-page .section-title { font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); margin-top: var(--s7); } html.ds-page .inc { background: var(--canvas); border: 0; border-radius: 10px; position: relative; padding-left: 30px; } html.ds-page .inc .x { color: var(--mute); font-size: 12.5px; } html.ds-page .inc::before { content: ""; position: absolute; left: 12px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); } html.ds-page .inc.stop::before { background: var(--crit); } html.ds-page .inc.done::before { background: var(--ok); } html.ds-page .inc.done { opacity: 1; color: var(--mute); } html.ds-page .skip { background: var(--ink); color: var(--on-ink); } @media (min-width: 901px) { html.ds-page.go-shell .desk-top > a.ds-btn[href="/"] { display: none !important; } /* назад не нужен: разделы — в шапке */ } @media (min-width: 901px) { html.ds-page.go-top-shell body { padding-top: var(--top-h); } } @media (max-width: 900px) { html.ds-page.go-top-shell body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 900px) { html.ds-page .desk-top { padding: var(--s4) var(--s4) 0; flex-wrap: wrap; } html.ds-page .desk-top > a.ds-btn[href="/"] { flex: 1 0 100%; justify-content: flex-start !important; padding: 0 !important; height: 32px; background: none !important; color: var(--mute) !important; } html.ds-page .desk-title b { white-space: nowrap; } html.ds-page .desk-tabs { padding: 0 var(--s4); gap: var(--s4); overflow-x: auto; } html.ds-page #main { padding: 0 var(--s4) var(--s7); } } /* Пульт → «Состояние»: вердикт · схема · матрица (desk.js systemSurface) */ .go-sys { display: grid; gap: var(--s5); } .go-sys-verdict { border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); background: var(--surface); display: grid; gap: 8px; } .go-sys-verdict.stop { background: var(--inv-bg); color: var(--inv-fg); } .go-sys-verdict.warn { background: var(--warn-bg); } .go-sys-v { display: flex; align-items: center; gap: 14px; } .go-sys-v .ds-dot { width: 12px; height: 12px; } .go-sys-verdict.stop .ds-dot { background: var(--inv-crit); outline: 2px solid color-mix(in srgb, var(--inv-crit) 35%, transparent); outline-offset: 3px; } .go-sys-v b { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.045em; color: inherit; } .go-sys-verdict p { margin: 0; font-size: 15px; color: inherit; opacity: .82; } .go-sys-verdict .go-sys-at { font-family: var(--mono); font-size: 12px; opacity: .6; } .go-topo-box { display: grid; gap: var(--s4); padding: var(--s5) 0 var(--s2); } .go-topo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .go-topo-li { position: relative; display: flex; align-items: center; } /* соединение к следующему узлу. Осознанное исключение из правил детектора (повторяющийся градиент + бесконечная анимация): штрихи медленно бегут, только когда путь цел, — это и есть смысл «данные идут». На сломанном узле линия стоит красным пунктиром. Медленно (5 с), только на «Пульте», при prefers-reduced-motion стоит. */ .go-topo-li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 10px; border-radius: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 45%, transparent) 0 6px, transparent 6px 14px); background-size: 28px 2px; animation: go-flow 5s linear infinite; } .go-topo-li.stop:not(:last-child)::after, .go-topo-li:has(+ .go-topo-li.stop)::after { animation: none; background: repeating-linear-gradient(90deg, var(--crit) 0 4px, transparent 4px 9px); } @keyframes go-flow { to { background-position: 28px 0; } } .go-topo-n { all: unset; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 18px; border-radius: 16px; background: var(--surface); min-width: 0; transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap); } .go-topo-n:hover { background: color-mix(in srgb, var(--ink) 7%, var(--surface)); transform: translateY(-2px); } .go-topo-n:active { transform: scale(.97); } .go-topo-n:focus-visible { box-shadow: var(--ring); } .go-topo-i { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 13px; font-weight: 600; background: var(--canvas); color: var(--ink); } .go-topo-n b { font-family: var(--display); font-size: 16px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; } .go-topo-n > span:last-child { font-size: 12px; color: var(--mute); white-space: nowrap; } .go-topo-n.ok .go-topo-i { background: var(--ok); color: #fff; } .go-topo-n.warn .go-topo-i { background: var(--warn); color: #fff; } .go-topo-n.stop { background: var(--inv-bg); } .go-topo-n.stop b { color: var(--inv-fg); } .go-topo-n.stop > span:last-child { color: var(--inv-crit); } .go-topo-n.stop .go-topo-i { background: var(--inv-crit); color: var(--inv-bg); } .go-topo-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: var(--s3); border-top: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent); } .go-topo-k { font-size: 12px; color: var(--mute); margin-right: 8px; } .go-topo-c { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); font-size: 13px; transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap); } .go-topo-c:hover { background: color-mix(in srgb, var(--ink) 7%, var(--surface)); } .go-topo-c:active { transform: scale(.96); } .go-topo-c:focus-visible { box-shadow: var(--ring); } .go-topo-c b { font-weight: 600; color: var(--ink); } .go-topo-c > span { color: var(--mute); } .go-topo-c.stop > span { color: var(--crit); font-weight: 550; } .go-sys-list { display: grid; border-top: 2px solid var(--ink); } .go-sys-row { border-bottom: 1px solid var(--line); scroll-margin: 120px; } .go-sys-row > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 10px minmax(160px, 220px) minmax(0, 1fr) auto 20px; gap: 16px; align-items: center; padding: 18px 8px; border-radius: 10px; transition: background-color var(--dur-1) var(--ease-out); } .go-sys-row > summary::-webkit-details-marker { display: none; } .go-sys-row > summary:hover { background: var(--surface); } .go-sys-t { font-family: var(--display); font-size: 16px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); } .go-sys-s { color: var(--body); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .go-sys-row[open] .go-sys-s { white-space: normal; color: var(--ink); font-weight: 500; } .go-sys-row.stop .go-sys-t { color: var(--crit); } .go-sys-chev { width: 10px; height: 10px; border-right: 1.6px solid var(--mute); border-bottom: 1.6px solid var(--mute); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--dur-3) var(--spring-snap); justify-self: center; } .go-sys-row[open] .go-sys-chev { transform: rotate(225deg) translate(-2px, -2px); } /* раскрытие строки — по высоте (interpolate-size). Исключение из «не анимировать раскладку»: редкое действие человека, строка одна, ниже неё — только список */ :root { interpolate-size: allow-keywords; } .go-sys-row::details-content { height: 0; overflow: clip; transition: height var(--dur-3) var(--spring-glide), content-visibility var(--dur-3) allow-discrete; } .go-sys-row[open]::details-content { height: auto; } .go-sys-row[open] .go-sys-body { animation: go-reveal var(--dur-3) var(--spring-glide) both; } .go-sys-body { padding: 4px 8px 24px calc(10px + 16px + 8px); display: grid; gap: var(--s3); max-width: 920px; } .go-sys-body .facts { grid-template-columns: minmax(160px, 260px) 1fr; } .go-sys-body .actions { margin-top: 4px; } .go-flash > summary { animation: go-flash 1.2s var(--ease-out); } @keyframes go-flash { 0%, 30% { background: color-mix(in srgb, var(--focus) 16%, transparent); } 100% { background: transparent; } } html.ds-page .ds-badge.stop { background: var(--crit) !important; color: var(--on-crit) !important; } @media (max-width: 900px) { .go-topo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .go-sys, .go-sys > * { min-width: 0; } .go-topo-n { padding: 12px; column-gap: 10px; } .go-topo-n :is(b, span) { white-space: normal !important; } .go-topo-li::after { display: none; } .go-sys-row > summary { grid-template-columns: 10px minmax(0, 1fr) auto 16px; gap: 10px; } .go-sys-body .facts { grid-template-columns: minmax(0, 1fr); } .go-sys-list { min-width: 0; } .go-sys-row > summary .go-sys-s { grid-column: 2 / -1; grid-row: 2; white-space: normal; } .go-sys-body { padding-left: 8px; } } /* ── 10. телефон и планшет (≤900) ───────────────────────────────────────── */ @media (max-width: 900px) { html body { font-size: 15px; line-height: 22px; } html.go-top-shell #root .app { padding-left: 14px !important; padding-right: 14px !important; } html[data-route]:not([data-route=home]) #root .banner.warn { display: none !important; } .banner { font-size: 14px; padding: 10px 12px; } .thead-row { margin: var(--s4) 0 var(--s3); } .thead-row .stitle { font-size: 24px !important; } /* расписание: карточка автомата — заголовок не под переключателем */ .master { display: grid !important; grid-template-columns: 32px 1fr auto !important; align-items: start !important; padding: var(--s4) !important; gap: var(--s3) !important; } .master .mt { min-width: 0; } .master .mt b { font-size: 18px !important; display: block; padding-right: 4px; } /* таблица — карточка строки: [☐ день №] / адрес + суть / категория / срок · статус · участок · отправить */ .grow { padding: 12px !important; gap: 6px 12px !important; } .grow .gcheck { order: -2 !important; } .grow .gday { order: -1 !important; } .grow .gnum { order: 0 !important; } .grow .gaddr b { white-space: normal !important; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; } .grow .gaddr b > span:first-child { overflow: visible !important; text-overflow: clip !important; white-space: normal !important; } .grow .gcat { flex: 1 0 100% !important; color: var(--mute) !important; } .grow .tsend { width: 44px; height: 44px; background: var(--surface) !important; color: var(--ink) !important; } .switcher { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); } .switcher::-webkit-scrollbar { display: none; } .switcher > .seg { flex: none; } .seg button { min-height: 44px !important; } :is(input, select, textarea) { font-size: 16px !important; } .selbar { bottom: calc(var(--tab-h) + 10px + env(safe-area-inset-bottom, 0px)) !important; } .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .an-kpi .k-big { font-size: 40px !important; } #ds-daily .ds-legend .ds-hint { margin-left: 0; width: 100%; } .go-toast { bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom, 0px)) !important; } } /* ── 11. движение ──────────────────────────────────────────────────────── */ /* Пять запоминающихся моментов (остальное — короткие отклики на нажатие): 1) переход между экранами — содержимое «проявляется» снизу вверх через маску, заголовок перетекает (View Transitions, motion.js); 2) индикатор навигации — одна плашка переезжает к пункту (shell.js); 3) одометр чисел главной (home.js); 4) окна вырастают из кнопки, которой открыты (motion.js); 5) тревожная поверхность автомата — медленная шкала регламента по краю. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; } ::view-transition-group(go-main) { animation-duration: var(--dur-4); animation-timing-function: var(--spring-glide); } ::view-transition-old(go-main) { animation: go-vt-out 160ms var(--ease-exit) both; } ::view-transition-new(go-main) { animation: go-vt-in 520ms var(--ease-enter) both; } ::view-transition-group(go-title) { animation-duration: 520ms; animation-timing-function: var(--spring-glide); } ::view-transition-old(go-title) { animation: go-fade-out 180ms var(--ease-in) both; } ::view-transition-new(go-title) { animation: go-title-in 520ms var(--spring-glide) both; } @keyframes go-vt-out { to { opacity: 0; filter: blur(6px); transform: translateY(-8px); } } @keyframes go-vt-in { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(24px); filter: blur(4px); } to { opacity: 1; clip-path: inset(0); transform: none; filter: none; } } @keyframes go-fade-out { to { opacity: 0; } } @keyframes go-title-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } } @media (min-width: 901px) { html.go-shell #root .fit { view-transition-name: go-main; } } /* загрузка → содержимое: блоки, пришедшие после ожидания, проявляются */ .go-reveal { animation: go-reveal var(--dur-4) var(--spring-glide) both; } @keyframes go-reveal { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .go-modal, .go-modal-bg, dialog.ds-dlg { transform: none !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ── 12. вход и смена пароля (templates/login.html, change_password.html) ── */ /* Две половины: слева — чёрное поле с именем продукта и «живой» шкалой регламента (фирменный мотив: дни 0…7+, 4–5 — внимание, 6+ — просрочено), справа — белая форма. Иллюстрация не данные: aria-hidden. */ body.go-auth { margin: 0; min-height: 100vh; background: var(--canvas) !important; } .go-auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr); } .go-auth-art { background: #0a0a0b; color: #f5f5f5; padding: clamp(28px, 4vw, 56px); display: grid; grid-template-rows: auto 1fr auto; gap: var(--s6); position: relative; overflow: hidden; } .go-auth-top { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #9b9b9b; } .go-auth-art .go-mark { background: #f5f5f5; } .go-auth-art .go-mark::before { background: #0c0c0c; } .go-auth-word { margin: 0; align-self: center; display: grid; gap: 0; } .go-auth-metal-wrap { display: block; position: relative; height: clamp(120px, 15vw, 220px); width: 100%; } .go-auth-metal { display: block; width: 100%; height: 100%; } .go-auth-static { display: none; font-family: var(--display); font-weight: 500; font-size: clamp(96px, 12vw, 190px); line-height: 1; letter-spacing: -.05em; background: linear-gradient(170deg, #ffffff 0%, #bdbdc4 45%, #3a3a3f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html.go-static-metal .go-auth-metal { display: none; } html.go-static-metal .go-auth-static { display: block; } .go-auth-lead { display: grid; gap: 14px; max-width: 520px; } .go-auth-lead p { margin: 0; font-size: 15px; line-height: 22px; color: #a9a9ae; } .go-auth-lead p b { color: #f5f5f5; font-weight: 600; } .go-auth-days { display: flex; gap: 6px; } .go-auth-days span { flex: 1; height: 32px; border-radius: 8px; display: grid; place-items: center; font: 600 12px var(--ui, var(--font)); color: #a9a9ae; background: #1d1d20; font-variant-numeric: tabular-nums; } .go-auth-days span.n { color: var(--warn); background: var(--warn-bg); } .go-auth-days span.o { color: var(--crit); background: var(--crit-bg); } .go-auth-form { display: grid; place-items: center; padding: clamp(28px, 4vw, 56px); } .go-auth-card { width: 100%; max-width: 400px; display: grid; gap: var(--s4); } .go-auth-brand { margin-bottom: var(--s3); } .go-auth-brand h2 { margin: 0; font-family: var(--display); font-size: clamp(34px, 3.2vw, 48px); line-height: 1; font-weight: 500; letter-spacing: -.05em; color: var(--ink); } .go-auth-brand p { margin: 12px 0 0; font-size: 15px; line-height: 22px; color: var(--mute); } .go-field { display: grid; gap: 8px; } .go-field > span { font-size: 13px; line-height: 16px; font-weight: 550; color: var(--ink); } .go-field input { font: inherit; font-size: 16px; height: 52px; padding: 0 16px; color: var(--ink); background: var(--surface); border: 1px solid transparent; border-radius: 12px; box-sizing: border-box; width: 100%; box-shadow: inset 0 -1.5px 0 var(--line-control); /* граница поля ≥ 3:1 (WCAG 1.4.11) без рамки */ transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); } .go-field input:hover { background: var(--hover); } .go-field input:focus { outline: none; background: var(--field); border-color: var(--ink); box-shadow: var(--ring); } .go-field small { font-size: 12px; color: var(--mute); } .go-auth-err { background: var(--crit-bg); color: var(--ink); border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 20px; animation: go-shake 420ms var(--ease-out); } @keyframes go-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } .go-auth-btn { font: inherit; font-weight: 600; font-size: 15px; height: 52px; border-radius: 12px; border: 0; background: var(--ink); color: var(--on-ink); cursor: pointer; margin-top: var(--s2); transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--spring-snap); } .go-auth-btn:hover { background: color-mix(in srgb, var(--ink) 82%, var(--canvas)); } .go-auth-btn:active { transform: scale(.97); } .go-auth-btn:focus-visible { outline: none; box-shadow: var(--ring); } .go-auth-hint { margin: var(--s2) 0 0; font-size: 13px; line-height: 18px; color: var(--mute); } .go-auth-hint a { color: var(--ink); } @media (max-width: 900px) { .go-auth-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .go-auth-art { grid-template-rows: auto auto auto; gap: var(--s4); padding: 20px 20px 24px; } .go-auth-metal-wrap { height: 72px; } .go-auth-static { font-size: 64px; } .go-auth-lead p:first-child { display: none; } .go-auth-form { place-items: start center; padding: 28px 20px 40px; } } /* ── 13. R6.1 — характер утверждённого прототипа F ─────────────────────── Живой фон из точек (bg.js) под всеми экранами, «воздух» по краям, главная: шапка‑блок с жидким металлом, невесомые пульты рассылки, категории волной. Тёмная тема — как в прототипе; светлая — свой лист, а шапка‑блок главной остаётся тёмной фирменной поверхностью. */ :root[data-ui=dark] { --canvas: #050506; } #go-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; } /* R8: поле точек поднимается от нижнего края; затемнение — только сверху, под шапкой */ #go-bg-vig { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgb(5 5 6 / .9) 0%, rgb(5 5 6 / .35) 34%, transparent 58%); } :root[data-ui=light] #go-bg-vig { background: linear-gradient(180deg, rgb(242 242 240 / .92) 0%, rgb(242 242 240 / .4) 34%, transparent 58%); } html.go-bg-css body { background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 0) !important; background-size: 22px 22px !important; } #root, .ds-wrap, html.ds-page main { position: relative; z-index: 1; } /* воздух: содержимое по центру, поля по краям */ @media (min-width: 901px) { html.go-top-shell #root .app { max-width: none; margin: 0; padding: 0 clamp(20px, 1.8vw, 40px); } } /* панели внутренних экранов слегка прозрачны — поле точек «просвечивает» */ :root[data-ui=dark] :is(.set-card, .an-card, .card, .glass.job, .master, .grid-wrap, .sv-wrap, .mon-wrap, .j-card) { background: rgb(20 20 22 / .86) !important; } :root[data-ui=light] :is(.set-card, .an-card, .card, .glass.job, .master) { background: rgb(255 255 255 / .9) !important; } /* главная — app/web/static/home.css (R8) */ /* одометр */ .go-odo { display: inline-flex !important; align-items: flex-start; overflow: hidden; height: 1em; line-height: 1 !important; vertical-align: -.08em; } .go-odo > span { display: block; height: 1em; overflow: hidden; } .go-odo > span > span { display: flex; flex-direction: column; transition: transform 1.2s var(--e-out, cubic-bezier(.16,1,.3,1)); } .go-odo > span > span > b { display: block !important; height: 1em; line-height: 1 !important; font: inherit !important; letter-spacing: 0 !important; text-align: center; } /* внутренние экраны: строки приходят волной (и новые строки после фильтра) */ @keyframes go-rowin2 { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: no-preference) { #root .gtbl > .grow, html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr { animation: go-rowin2 .45s cubic-bezier(.16,1,.3,1) both; } #root .gtbl > .grow:nth-child(1), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(1) { animation-delay: 28ms; } #root .gtbl > .grow:nth-child(2), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(2) { animation-delay: 56ms; } #root .gtbl > .grow:nth-child(3), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(3) { animation-delay: 84ms; } #root .gtbl > .grow:nth-child(4), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(4) { animation-delay: 112ms; } #root .gtbl > .grow:nth-child(5), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(5) { animation-delay: 140ms; } #root .gtbl > .grow:nth-child(6), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(6) { animation-delay: 168ms; } #root .gtbl > .grow:nth-child(7), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(7) { animation-delay: 196ms; } #root .gtbl > .grow:nth-child(8), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(8) { animation-delay: 224ms; } #root .gtbl > .grow:nth-child(9), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(9) { animation-delay: 252ms; } #root .gtbl > .grow:nth-child(10), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(10) { animation-delay: 280ms; } #root .gtbl > .grow:nth-child(11), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(11) { animation-delay: 308ms; } #root .gtbl > .grow:nth-child(12), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(12) { animation-delay: 336ms; } #root .gtbl > .grow:nth-child(13), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(13) { animation-delay: 364ms; } #root .gtbl > .grow:nth-child(14), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(14) { animation-delay: 392ms; } #root .gtbl > .grow:nth-child(15), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(15) { animation-delay: 420ms; } #root .gtbl > .grow:nth-child(16), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(16) { animation-delay: 448ms; } #root .gtbl > .grow:nth-child(17), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(17) { animation-delay: 476ms; } #root .gtbl > .grow:nth-child(18), html:is([data-route=summary],[data-route=monitors]) #root .fit-in tbody > tr:nth-child(18) { animation-delay: 504ms; } #root .fit-in > .thead-row .stitle { animation: go-title-rise .7s cubic-bezier(.16,1,.3,1) both; } } @keyframes go-title-rise { from { opacity: 0; transform: translateY(14px); letter-spacing: -.01em; } } /* R7.2: «Уч.» в таблице — сменить участок у обращения */ #root .grow .gunit[data-uc] { cursor: pointer; border-radius: 7px; padding: 2px 6px; margin: -2px -6px; transition: background .15s ease; } #root .grow .gunit[data-uc]:hover, #root .grow .gunit[data-uc]:focus-visible { background: color-mix(in srgb, currentColor 10%, transparent); outline: none; } #root .grow .gunit[data-uc]:empty::after { content: "+"; opacity: .45; font-weight: 700; } /* R9.4 · вход: Василий Блаженный под словом ОКРУГ (купола — как в логотипе) */ .go-auth-art { position: relative; overflow: hidden; } .go-auth-art::after { content: ""; position: absolute; right: 48px; bottom: 110px; width: min(34%, 420px); height: 66%; background: #fff; opacity: .09; pointer-events: none; -webkit-mask: url(/static/img/sketch-basil.webp) no-repeat right bottom / contain; mask: url(/static/img/sketch-basil.webp) no-repeat right bottom / contain; } @media (max-width: 900px) { .go-auth-art::after { display: none; } } /* ── R9.5 · шапка: разделы текстом, выбранный подчёркнут; поиск — поле ──────── */ .go-nav { background: transparent; padding: 0; gap: 0; border-radius: 0; margin-left: 10px; height: 60px; align-items: stretch; } .go-nav a, .go-sysbtn { height: auto; padding: 0 11px; border-radius: 0; font-size: 13.5px; font-weight: 500; color: var(--mute); } .go-nav a:hover, .go-sysbtn:hover { color: var(--body); } .go-nav a[aria-current=page], .go-sysbtn[aria-current=page] { color: var(--ink); } .go-nav-n { background: transparent; padding: 0; font-weight: 500; color: var(--mute); } .go-nav a[aria-current=page] .go-nav-n { color: var(--body); } .go-nav-gap { align-self: center; margin: 0 6px; } .go-nav-ind { top: auto; bottom: 0; height: 2px; border-radius: 1px; background: var(--ink); box-shadow: none; } .go-find { background: color-mix(in srgb, var(--ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); border-radius: 100px; height: 34px; padding: 0 10px 0 12px; width: clamp(200px, 22vw, 300px); } .go-find:hover { box-shadow: inset 0 0 0 1px var(--line-strong); background: color-mix(in srgb, var(--ink) 6%, transparent); } .go-find kbd b { background: transparent; box-shadow: inset 0 0 0 1px var(--line); border-radius: 100px; padding: 1px 7px; font-size: 12px; } @media (max-width: 900px) { .go-nav { height: auto; } } /* ── R9.5 · фон программы: статичный матовый лист (точки — только на входе) ── */ body:not(.go-auth) { background: var(--canvas); } :root:not([data-ui=light]) body:not(.go-auth) { background: radial-gradient(1200px 600px at 50% -10%, rgb(255 255 255 / .035), transparent 70%), #070708; } :root[data-ui=light] body:not(.go-auth) { background: radial-gradient(1200px 600px at 50% -10%, rgb(255 255 255 / .9), transparent 70%), #efefed; } body:not(.go-auth) #go-bg, body:not(.go-auth) #go-bg-vig { display: none; } /* ── R9.5 · вход: две половины (чёрная · белая), содержимое обеих прижато к центральному шву; * точки — на половине входа, как раньше; Василий Блаженный — растровая печать от самого низа, * низ растушёван. ── */ .go-auth-wrap { min-height: 100vh; width: 100%; margin: 0; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; position: relative; z-index: 1; } .go-auth-art { border-radius: 0; min-height: 100vh; box-shadow: none; padding: clamp(28px, 4vw, 56px); display: grid; grid-template-rows: auto 1fr auto; justify-items: end; } .go-auth-art > * { width: min(100%, 560px); position: relative; z-index: 1; } .go-auth-art::after { right: auto; left: 50%; transform: translateX(-50%); bottom: 0; width: min(78%, 620px); height: 72%; opacity: .11; background: #fff; -webkit-mask: url(/static/img/sketch-basil-ht.webp) no-repeat center bottom / contain, linear-gradient(#000 62%, transparent 100%); -webkit-mask-composite: source-in; mask: url(/static/img/sketch-basil-ht.webp) no-repeat center bottom / contain, linear-gradient(#000 62%, transparent 100%); mask-composite: intersect; } .go-auth-form { display: grid; align-items: center; justify-items: start; padding: clamp(28px, 4vw, 56px) clamp(28px, 6vw, 96px); } .go-auth-card { max-width: 400px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; } @media (max-width: 900px) { .go-auth-wrap { grid-template-columns: 1fr; } .go-auth-art { min-height: 0; justify-items: start; } .go-auth-form { justify-items: center; } } .go-auth-metal-wrap { height: clamp(110px, 10vw, 170px); } .go-auth-static { font-size: clamp(80px, 8.6vw, 150px); } .go-auth-art { box-sizing: border-box; min-height: 100vh; } .go-auth-wrap { min-height: 100vh; } /* R9.5b · вход: слово — в центре чёрной половины, форма — в центре белой; «ГРАФИК» и шкала — слева внизу */ .go-auth-art { display: grid; grid-template-rows: auto 1fr auto; justify-items: stretch; } .go-auth-art > * { width: auto; } .go-auth-top { justify-self: start; } .go-auth-word { align-self: center; justify-self: center; width: min(100%, 640px); } .go-auth-lead { justify-self: start; max-width: 520px; } .go-auth-form { justify-items: center; padding: clamp(28px, 4vw, 56px); } .go-auth-card { width: min(100%, 400px); } .go-auth-art::after { left: 50%; transform: translateX(-50%); width: min(70%, 560px); height: 70%; } .go-auth-static { text-align: center; } /* R9.8 · фон программы — искры (sparkles.js) под всеми листами */ #go-spark { position: fixed; inset: 0; z-index: 0; pointer-events: none; } body:not(.go-auth) { background: #050506; } :root[data-ui=light] body:not(.go-auth) { background: #efefed; } #root, .go-top, #go-hero, main { position: relative; z-index: 1; } /* ── R9.8 · shared‑element переход preview → раздел (morph.js) ─────────────────────── * Поверхность и таблица тянутся по геометрии; заголовок и подпись не растягиваются: * старый кадр гаснет сразу, новый проявляется на новом месте. Остальное — назад и тише. */ html.go-morphing { --m-dur: 560ms; --m-ease: cubic-bezier(.22, 1, .36, 1); } html.go-morphing::view-transition-group(root) { animation: none; } html.go-morphing::view-transition-old(root) { animation: go-m-root-out 220ms var(--ease-exit) both; } html.go-morphing::view-transition-new(root) { animation: go-m-root-in 320ms var(--ease-enter) both; animation-delay: 160ms; } @keyframes go-m-root-out { to { opacity: 0; transform: scale(.985); } } @keyframes go-m-root-in { from { opacity: 0; transform: translateY(10px); } } /* обычный переход экрана и заголовка не вмешивается */ html.go-morphing::view-transition-group(go-main), html.go-morphing::view-transition-group(go-title) { animation: none; } html.go-morphing::view-transition-old(go-main) { animation: go-m-root-out 220ms var(--ease-exit) both; } html.go-morphing::view-transition-new(go-main) { animation: go-m-root-in 320ms var(--ease-enter) both; animation-delay: 160ms; } html.go-morphing::view-transition-old(go-title) { animation: go-m-old 120ms ease-out both; } html.go-morphing::view-transition-new(go-title) { animation: go-m-new 200ms ease-out both; animation-delay: 160ms; } /* поверхность: геометрия + радиус/тень */ html.go-morphing::view-transition-group(m-surface) { animation-duration: var(--m-dur); animation-timing-function: var(--m-ease); z-index: 2; } html.go-morphing::view-transition-image-pair(m-surface) { isolation: isolate; } html.go-morphing::view-transition-old(m-surface) { animation: go-m-old 200ms ease-out both; mix-blend-mode: normal; object-fit: none; object-position: top left; } html.go-morphing::view-transition-new(m-surface) { animation: go-m-new 320ms ease-out both; animation-delay: 140ms; object-fit: none; object-position: top left; } @keyframes go-m-old { to { opacity: 0; } } @keyframes go-m-new { from { opacity: 0; } } /* таблица: группа ведёт по геометрии, кадры меняются без растяжения текста */ html.go-morphing::view-transition-group(m-table) { animation-duration: var(--m-dur); animation-timing-function: var(--m-ease); z-index: 3; } html.go-morphing::view-transition-old(m-table) { animation: go-m-old 180ms ease-out both; object-fit: none; object-position: top left; } html.go-morphing::view-transition-new(m-table) { animation: go-m-new 260ms ease-out both; animation-delay: 120ms; object-fit: none; object-position: top left; } /* заголовок и подпись: переезд без изменения размера кадра */ html.go-morphing::view-transition-group(m-title), html.go-morphing::view-transition-group(m-sub) { animation-duration: var(--m-dur); animation-timing-function: var(--m-ease); z-index: 4; } html.go-morphing::view-transition-old(m-title), html.go-morphing::view-transition-old(m-sub) { animation: go-m-old 120ms ease-out both; object-fit: none; object-position: left center; } html.go-morphing::view-transition-new(m-title), html.go-morphing::view-transition-new(m-sub) { animation: go-m-new 200ms ease-out both; animation-delay: 160ms; object-fit: none; object-position: left center; } /* назад — чуть короче */ html.go-morph-back { --m-dur: 480ms; } /* нажатие на карточку */ #go-hero .go-p.is-press { transform: scale(.985); transition: transform 100ms ease-out; } @media (prefers-reduced-motion: reduce) { html.go-morphing::view-transition-group(*), html.go-morphing::view-transition-old(*), html.go-morphing::view-transition-new(*) { animation: none !important; } } /* R9.9 · фон программы — сетка точек (Dot Pattern): шаг 16 px, точка 1 px, к краям гаснет; часть узлов мерцает (sparkles.js) */ #go-dots { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 8px 8px, rgb(255 255 255 / .16) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 0%, rgb(0 0 0 / .55) 55%, transparent 100%); mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 0%, rgb(0 0 0 / .55) 55%, transparent 100%); } :root[data-ui=light] #go-dots { background-image: radial-gradient(circle at 8px 8px, rgb(0 0 0 / .16) 1px, transparent 1.4px); } #go-dots { background-image: radial-gradient(circle at 8px 8px, rgb(255 255 255 / .26) 1.1px, transparent 1.6px); -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 45%, #000 0%, rgb(0 0 0 / .7) 55%, transparent 100%); mask-image: radial-gradient(ellipse 75% 80% at 50% 45%, #000 0%, rgb(0 0 0 / .7) 55%, transparent 100%); } :root[data-ui=light] #go-dots { background-image: radial-gradient(circle at 8px 8px, rgb(0 0 0 / .22) 1.1px, transparent 1.6px); } /* ══ R9.9 · страницы в стиле главной ══════════════════════════════════════════════════ * Таблица, Итог, Мониторы, Свод, История, Расписание, Настройки, Пульт: * тот же лист (#0a0a0a / #fff на 1px линии, радиус 14), заголовок Geist 600, над ним — * Spotlight: мягкий луч света проявляется при открытии страницы (по мотивам Splite/Aceternity), * кнопки‑действия — Interactive Hover (ihb.js), таблицы — цвет зон регламента как на главной. */ :root { --pg-card: #0a0a0a; --pg-line: rgb(255 255 255 / .1); --pg-line2: rgb(255 255 255 / .06); --pg-well: rgb(255 255 255 / .04); } :root[data-ui=light] { --pg-card: #fff; --pg-line: #e6e6e3; --pg-line2: #f0f0ee; --pg-well: #f6f6f4; } /* лист */ html.go-shell #root .glass, html.go-shell #root .sv-blk, html.go-shell #root .ds-note.info, body.go-desk .card, body.go-desk section.card { background: var(--pg-card) !important; box-shadow: inset 0 0 0 1px var(--pg-line) !important; border: 0 !important; border-radius: 14px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root[data-ui=light] html.go-shell #root .glass, :root[data-ui=light] html.go-shell #root .sv-blk { box-shadow: inset 0 0 0 1px var(--pg-line), 0 1px 1px rgb(0 0 0 / .04) !important; } html.go-shell #root .sv-blk { padding: 20px 22px 18px !important; } html.go-shell #root .job.glass { border-radius: 0 !important; box-shadow: inset 0 -1px 0 var(--pg-line2) !important; background: transparent !important; } html.go-shell #root .jobs { background: var(--pg-card); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--pg-line); overflow: hidden; } /* шапка страницы + Spotlight */ html.go-shell #root .fit-in { position: relative; } html.go-shell #root .fit-in::before { content: ""; position: absolute; left: -10%; top: -260px; width: 70%; height: 620px; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, rgb(255 255 255 / .09), rgb(255 255 255 / .03) 50%, transparent 75%); transform: rotate(-18deg); filter: blur(8px); animation: go-spot 1.6s cubic-bezier(.16, 1, .3, 1) .1s both; } :root[data-ui=light] html.go-shell #root .fit-in::before { background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(255 255 255 / .4) 50%, transparent 75%); } html[data-route=home] #root .fit-in::before { display: none; } @keyframes go-spot { from { opacity: 0; transform: translate(-60px, -40px) rotate(-18deg) scale(.85); } to { opacity: 1; transform: rotate(-18deg); } } html.go-shell #root .fit-in > :not(.go-modal-bg):not(.selbar):not(.ghmenu):not(.toast):not([class*="toast"]):not([style*="position: fixed"]) { position: relative; z-index: 1; } /* R10.1: окна подтверждения и панель выбранных строк — поверх экрана, а не внизу страницы * (правило выше раньше делало их position: relative) */ html.go-shell #root .fit-in > .go-modal-bg { position: fixed !important; inset: 0; z-index: 200; } html.go-shell #root .fit-in > .selbar { position: fixed !important; z-index: 150; } html.go-shell #root .selbar .scnt { color: inherit !important; opacity: .75; font-weight: 600; } html.go-shell #root .thead-row { padding: 8px 0 18px; align-items: center; gap: 14px; } html.go-shell #root .stitle { font: 600 clamp(30px, 22px + 1vw, 40px)/1.05 var(--font) !important; letter-spacing: -.045em !important; font-style: normal !important; } html.go-shell #root .tcount, html.go-shell #root .snow, html.go-shell #root .set-saved { font: 500 13px var(--mono); color: var(--mute); } html.go-shell #root .tcount b { color: var(--ink); font-weight: 600; } html.go-shell #root .tback { width: 36px; height: 36px; border-radius: 50% !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--pg-line); } html.go-shell #root .tback:hover { background: var(--pg-well) !important; } /* сегменты и мелкие кнопки — линия вместо заливки */ html.go-shell #root .seg { background: transparent !important; box-shadow: inset 0 0 0 1px var(--pg-line) !important; border-radius: 10px !important; } /* R10.1: выбранный сегмент — подложка бандла (.segbg) чёрная и под текстом; раньше она была * светлой и закрывала светлый текст — выбранный сегмент выглядел пустым */ html.go-shell #root .seg > button.on { background: transparent !important; color: var(--canvas) !important; } html.go-shell #root .seg > button { position: relative; } html.go-shell #root .seg > button > span:not(.segbg) { position: relative; z-index: 1; } html.go-shell #root .seg .segbg { background: var(--ink) !important; z-index: 0; box-shadow: 0 2px 8px -2px rgb(0 0 0 / .35); } html.go-shell #root .js, html.go-shell #root .mi, html.go-shell #root .jico { background: var(--pg-well) !important; } /* Interactive Hover Button */ /* R10.1: у этих кнопок в home.css `all: unset` и свои !important (он подключён позже) — каркас * закреплён селектором посильнее. Заливка — не огромная точка с z-index:-1 (без своего контекста * наложения она уходила под карточку или вылезала кругом за кнопку), а слой внутри кнопки, * раскрываемый clip-path из точки слева; текст — над ним. */ html .go-ihb.go-ihb { position: relative !important; overflow: hidden !important; isolation: isolate !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 100px !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--pg-line, rgb(255 255 255 / .14)) !important; color: var(--ink, #f4f4f5) !important; padding: 0 18px 0 34px !important; white-space: nowrap; } html .go-ihb.go-ihb:hover, html .go-ihb.go-ihb:focus-visible { background: transparent !important; } html .go-ihb.go-ihb .ihb-fill { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: currentColor; pointer-events: none; clip-path: circle(3.5px at 18px 50%); transition: clip-path .5s cubic-bezier(.22, 1, .36, 1); } html .go-ihb.go-ihb .ihb-in { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s; } html .go-ihb.go-ihb .ihb-hov { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; color: var(--canvas, #000); opacity: 0; transform: translateX(-20px); transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s; pointer-events: none; font: inherit; } html .go-ihb.go-ihb .ihb-hov svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } html .go-ihb.go-ihb:hover .ihb-fill, html .go-ihb.go-ihb:focus-visible .ihb-fill { clip-path: circle(150% at 18px 50%); } html .go-ihb.go-ihb:hover .ihb-in, html .go-ihb.go-ihb:focus-visible .ihb-in { transform: translateX(32px); opacity: 0; } html .go-ihb.go-ihb:hover .ihb-hov, html .go-ihb.go-ihb:focus-visible .ihb-hov { opacity: 1; transform: none; } html .go-ihb.go-ihb:disabled .ihb-fill { clip-path: circle(3.5px at 18px 50%) !important; } html .go-ihb.go-ihb:disabled .ihb-in { transform: none !important; opacity: 1 !important; } html .go-ihb.go-ihb:disabled .ihb-hov { opacity: 0 !important; } html .h9 .h9-lall.go-ihb { display: flex !important; height: 44px; color: var(--tx) !important; } html .h9 .h9-qbar .go-ihb.go-ihb { height: 36px !important; font-size: 13px !important; font-weight: 500 !important; } @media (prefers-reduced-motion: reduce) { html .go-ihb.go-ihb :is(.ihb-fill, .ihb-in, .ihb-hov) { transition: none; } } /* таблицы Итога на странице: цвет зон как на главной */ html.go-shell #root .sv-t { border-collapse: separate !important; border-spacing: 3px !important; } html.go-shell #root .sv-t td, html.go-shell #root .sv-t th { border: 0 !important; border-radius: 5px; } html.go-shell #root .sv-t thead th { background: transparent !important; color: var(--mute) !important; font: 500 12.5px var(--mono) !important; } /* Пульт района: «Нужен человек» — тёмный лист с красной кромкой, не белая плашка */ body.go-desk .go-sys-verdict { border-radius: 14px; } /* Итог на странице: зоны регламента по колонкам (2–4 = 7+, 7, 6 · 5–6 = 5, 4), строка «Итог» и «Общее» — без белых плашек */ html.go-shell[data-route=summary] #root .sv-t tbody td { background: var(--pg-well) !important; color: var(--ink) !important; } html.go-shell[data-route=summary] #root .sv-t tbody td:nth-child(n+2):nth-child(-n+4) { background: color-mix(in srgb, var(--crit, #ff5d50) 20%, transparent) !important; } html.go-shell[data-route=summary] #root .sv-t tbody td:nth-child(5), html.go-shell[data-route=summary] #root .sv-t tbody td:nth-child(6) { background: color-mix(in srgb, var(--warn, #ffb224) 14%, transparent) !important; } html.go-shell[data-route=summary] #root .sv-t tbody td:first-child { background: transparent !important; color: var(--body) !important; font-weight: 500 !important; } html.go-shell[data-route=summary] #root .sv-t tbody td:last-child { background: transparent !important; font-weight: 700 !important; } html.go-shell[data-route=summary] #root .sv-t tbody tr:last-child td { background: transparent !important; color: var(--ink) !important; font-weight: 700 !important; box-shadow: inset 0 1px 0 var(--pg-line) !important; border-radius: 0 !important; } html.go-shell #root .sv-t thead th { white-space: nowrap; font-size: 12px !important; } html.go-shell #root .sv-cap { font: 600 19px var(--font) !important; letter-spacing: -.02em; } /* Пульт района: вердикт — тёмный лист с красной кромкой и свечением, не белая плашка */ .go-sys-verdict.stop { background: var(--pg-card) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crit, #ff5d50) 45%, transparent), 0 0 60px -20px color-mix(in srgb, var(--crit, #ff5d50) 50%, transparent) !important; } .go-sys-verdict.stop .ds-dot { background: var(--crit, #ff5d50); } html.go-shell section.card, html.go-shell .go-topo-c { background: var(--pg-card) !important; box-shadow: inset 0 0 0 1px var(--pg-line) !important; border: 0 !important; } html.go-shell .go-topo-c.stop { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crit, #ff5d50) 50%, transparent) !important; color: var(--ink) !important; } html.go-shell[data-route=summary] #root .sv-t tbody tr:last-child td:nth-child(n) { background: transparent !important; } html.go-shell .go-topo-c.stop, html.go-shell .go-topo-c.stop * { background-color: transparent; } html.go-shell .go-topo-c.stop { background: var(--pg-card) !important; } html.go-shell .go-topo-c.stop b, html.go-shell .go-topo-c.stop strong { color: var(--ink) !important; } /* вход: меняющееся слово (Animated Hero) */ .go-auth-cycle { font: 600 clamp(22px, 16px + .8vw, 30px)/1.25 var(--font) !important; letter-spacing: -.025em; color: #f5f5f5 !important; margin-bottom: 6px !important; } .go-cyc { position: relative; display: inline-block; height: 1.25em; vertical-align: bottom; overflow: hidden; min-width: 10.5em; } .go-cyc > span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(110%); transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s; color: #fff; } .go-cyc > span.on { opacity: 1; transform: none; } .go-cyc > span.out { opacity: 0; transform: translateY(-110%); } @media (prefers-reduced-motion: reduce) { .go-cyc > span { transition: none; } } /* кнопки‑действия бандла — тот же вид, что Interactive Hover, но без перестройки (текст бандл меняет сам) */ html.go-shell #root .j-refresh:not(.j-refmore) { border-radius: 100px !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--pg-line) !important; transition: background-color .25s, color .25s; } html.go-shell #root .j-refresh:not(.j-refmore):hover { background: var(--ink) !important; color: var(--canvas) !important; } /* ── R10.1: блоки отделены от фона, фон мягче ── * Карточки: тонкая грань + тень (тёмная — светлая кромка сверху и глубокая тень; светлая — * серая грань и мягкая тень). Сетка точек и мерцание слегка размыты — меньше спорят с текстом. * Содержимое программы всегда над фоном (z-index), полосы прокрутки страницы не видно. */ :root { --card-edge: inset 0 0 0 1px rgb(255 255 255 / .1), inset 0 1px 0 rgb(255 255 255 / .07); --card-shadow: 0 1px 0 rgb(0 0 0 / .5), 0 28px 56px -30px rgb(0 0 0 / .95); } :root[data-ui=light] { --card-edge: inset 0 0 0 1px rgb(0 0 0 / .09); --card-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 16px 36px -20px rgb(0 0 0 / .2); } :root:not([data-ui=light]) { --pg-card: #0f0f11; } html.go-shell #root .glass:not(.selbar, .go-modal, .ghmenu), html.go-shell #root .sv-blk, html.go-shell #root .ds-note.info, html.go-shell section.card, html.go-shell .go-topo-c, html.go-shell #root .jobs { box-shadow: var(--card-edge), var(--card-shadow) !important; } #root { position: relative; z-index: 1; } /* фон размыт сильнее: точки — мягкая фактура, а не сетка, спорящая с текстом */ #go-dots { filter: blur(1px); opacity: 1; } #go-dots { background-image: radial-gradient(circle at 8px 8px, rgb(255 255 255 / .5) 1.4px, transparent 2px) !important; } :root[data-ui=light] #go-dots { background-image: radial-gradient(circle at 8px 8px, rgb(0 0 0 / .4) 1.4px, transparent 2px) !important; } #go-spark { filter: blur(1.8px); opacity: .8; } #root .fit-scroll { scrollbar-width: none; } #root .fit-scroll::-webkit-scrollbar { display: none; } /* широкая «Всё руководству»: без точки в покое, заливка — из центра */ html .h9 .h9-lall.go-ihb.go-ihb { padding: 0 18px !important; } html .h9 .h9-lall.go-ihb.go-ihb .ihb-fill { clip-path: circle(0 at 50% 50%); } html .h9 .h9-lall.go-ihb.go-ihb:hover .ihb-fill, html .h9 .h9-lall.go-ihb.go-ihb:focus-visible .ihb-fill { clip-path: circle(75% at 50% 50%); } html .h9 .h9-lall.go-ihb.go-ihb:hover .ihb-in, html .h9 .h9-lall.go-ihb.go-ihb:focus-visible .ihb-in { transform: translateY(-8px); } html .h9 .h9-lall.go-ihb.go-ihb .ihb-hov { transform: translateY(8px); } html .h9 .h9-lall.go-ihb.go-ihb:hover .ihb-hov, html .h9 .h9-lall.go-ihb.go-ihb:focus-visible .ihb-hov { transform: none; } /* ── R10.1 вход: бренд ОКРУГ, «ОКРУГ — автоматизация / удобство / …» ── */ .go-mark.go-mark-xl { width: 52px; height: 52px; border-radius: 15px; } .go-mark.go-mark-xl::before { inset: 9px 9px 8px; } .go-auth-top { gap: 16px !important; } .go-auth-for { display: grid; gap: 4px; line-height: 1; } .go-auth-for b { font: 700 15px var(--display); letter-spacing: .22em; color: #f5f5f5; } .go-auth-for span { font: 500 12px var(--display); letter-spacing: .16em; text-transform: uppercase; color: #8d8d93; } .go-auth-hero { align-self: center; justify-self: center; width: min(100%, 640px); display: grid; justify-items: center; gap: 6px; } .go-auth-hero .go-auth-word { align-self: auto; justify-self: stretch; width: 100%; } .go-auth-cycle { display: flex !important; align-items: baseline; justify-content: center; gap: .45em; margin: 0 !important; font: 400 clamp(22px, 14px + 1.3vw, 40px)/1.15 var(--display) !important; letter-spacing: -.03em; color: #f5f5f5 !important; } .go-cyc-dash { color: #6d6d73; transform: translateY(-.18em); } .go-cyc { position: relative; display: inline-block; height: 1.2em; min-width: 7.6em; overflow: visible; vertical-align: baseline; } .go-cyc > span { position: absolute; left: 0; top: 0; white-space: nowrap; color: #fff; opacity: 0; filter: blur(10px); transform: translateY(.5em) scale(.98); transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .7s, filter .8s; } .go-cyc > span.on { opacity: 1; filter: blur(0); transform: none; } .go-cyc > span.out { opacity: 0; filter: blur(10px); transform: translateY(-.5em) scale(.98); } @media (prefers-reduced-motion: reduce) { .go-cyc > span { transition: none; filter: none; } } @media (max-width: 900px) { .go-auth-cycle { font-size: 22px !important; } .go-mark.go-mark-xl { width: 40px; height: 40px; border-radius: 12px; } } /* R10.1 вход, внизу: меняющееся слово и дни регламента с переливом */ .go-auth-lead .go-auth-cycle { justify-content: flex-start; font: 400 clamp(26px, 16px + 1.6vw, 44px)/1.1 var(--display) !important; letter-spacing: -.035em; } .go-auth-lead .go-cyc { min-width: 9em; height: 1.15em; } .go-auth-days.is-shine { position: relative; overflow: hidden; border-radius: 9px; } .go-auth-days.is-shine::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / .2) 48%, rgb(255 255 255 / .06) 54%, transparent 65%) no-repeat; background-size: 260% 100%; animation: go-shimmer 3.6s cubic-bezier(.4, 0, .2, 1) infinite; } @media (prefers-reduced-motion: reduce) { .go-auth-days.is-shine::after { animation: none; display: none; } } .go-auth-art .go-auth-lead { width: min(100%, 520px); justify-self: start; } /* ── R10.1 Таблица: тема — после адреса в той же строке; тип сообщения под номером ── */ html.go-shell #root .grow .gaddr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; min-width: 0; } html.go-shell #root .grow .gaddr > b { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } html.go-shell #root .grow .gaddr > .gsub { display: inline; margin: 0; } html.go-shell #root .grow .gaddr > .gsub::before { content: "·"; margin-right: 10px; color: var(--mute); opacity: .6; } html.go-shell #root .grow .gnum { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; } .g-mt { align-self: flex-start; font: 600 12px var(--font); letter-spacing: .01em; padding: 1px 7px; border-radius: 100px; color: var(--mute); box-shadow: inset 0 0 0 1px var(--pg-line, rgb(0 0 0 / .1)); } .g-mt.is-rep { color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg); } /* R10.1: выбор получателя в окне отправки строк (вшит в бандл: spa.html, Eu → body) */ .go-rcpt { display: flex; gap: 4px; padding: 4px; margin: 4px auto 12px; border-radius: 12px; width: fit-content; background: var(--pg-well, rgb(0 0 0 / .04)); box-shadow: inset 0 0 0 1px var(--pg-line, rgb(0 0 0 / .08)); } .go-rcpt-b { all: unset; cursor: pointer; padding: 7px 12px; border-radius: 9px; font: 600 13px var(--font); color: var(--mute); transition: background-color .18s, color .18s; } .go-rcpt-b:hover { color: var(--ink); } .go-rcpt-b.on { background: var(--ink); color: var(--canvas); } .go-rcpt-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* ── R10.1: свой выпадающий список (select.js) — вместо системного с синей подсветкой ── */ select.gs-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .gs-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; padding: 0 12px 0 14px; border-radius: 10px; cursor: pointer; font: 500 13.5px var(--font); color: var(--ink); background: var(--pg-card, var(--surface)); box-shadow: inset 0 0 0 1px var(--pg-line, var(--line)); transition: box-shadow .16s, background-color .16s; max-width: 100%; } .gs-btn:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); } .gs-btn:focus-visible, .gs-btn.is-open { box-shadow: inset 0 0 0 1.5px var(--ink); outline: none; } .gs-btn:disabled { opacity: .5; cursor: default; } .gs-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gs-ch { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: transform .2s; } .gs-btn.is-open .gs-ch { transform: rotate(180deg); } .gs-list { position: fixed; z-index: 1000; max-height: 320px; overflow: auto; padding: 6px; border-radius: 14px; background: var(--pg-card, #fff); color: var(--ink); box-shadow: inset 0 0 0 1px var(--pg-line, rgb(0 0 0 / .1)), 0 18px 40px -16px rgb(0 0 0 / .45); opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top; transition: opacity .16s, transform .18s cubic-bezier(.22, 1, .36, 1); scrollbar-width: thin; } .gs-list[popover] { margin: 0; inset: auto; border: 0; } /* верхний слой: без стилей popover по умолчанию, место задаёт select.js */ .gs-list.up { transform-origin: bottom; transform: translateY(4px) scale(.98); } .gs-list.in { opacity: 1; transform: none; } .gs-opt { padding: 9px 12px; border-radius: 9px; font: 500 13.5px var(--font); cursor: pointer; white-space: nowrap; outline: none; } .gs-opt:hover, .gs-opt:focus { background: var(--pg-well, rgb(0 0 0 / .05)); } .gs-opt.on { background: var(--ink); color: var(--canvas); } .gs-opt.off { opacity: .4; cursor: default; } @media (prefers-reduced-motion: reduce) { .gs-list, .gs-ch { transition: none; } } /* ── R10.1: обводка всех блоков + «бегущий луч» по кромке (по мотивам Border Beam) ── * Светлая тема — чёрная грань, тёмная — белая. Луч проходит по кромке один раз, когда блок * появился, и снова при наведении (не бесконечно: интерфейс на 8 часов не должен мельтешить). */ @property --ba { syntax: ""; initial-value: 0deg; inherits: false; } :root { --card-line: rgb(255 255 255 / .82); --beam: #fff; } :root[data-ui=light] { --card-line: rgb(10 10 12 / .9); --beam: #000; } :root, :root[data-ui=light] { --card-edge: inset 0 0 0 1px var(--card-line); } html.go-shell #root :is(.glass:not(.selbar, .go-modal, .ghmenu, .toast), .sv-blk, section.card, .jobs), body.go-desk :is(.card, section.card), .h9 .h9-bento .h8-glass, .h9 .h9-bento .go-p.h8-glass, .gt-site .gt { position: relative; isolation: isolate; } .gt-site .gt { box-shadow: var(--card-edge), var(--card-shadow) !important; } html.go-shell #root :is(.glass:not(.selbar, .go-modal, .ghmenu, .toast), .sv-blk, section.card, .jobs)::after, body.go-desk :is(.card, section.card)::after, .h9 .h9-bento .h8-glass::after, .gt-site .gt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; padding: 1.5px; opacity: 0; background: conic-gradient(from var(--ba), transparent 0 72%, color-mix(in srgb, var(--beam) 35%, transparent) 80%, var(--beam) 86%, transparent 90%) !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: go-beam 2.6s cubic-bezier(.45, .05, .35, 1) .35s 1 both; transition: none !important; } html.go-shell #root :is(.glass:not(.selbar, .go-modal, .ghmenu, .toast), .sv-blk, section.card, .jobs):hover::after, body.go-desk :is(.card, section.card):hover::after, .h9 .h9-bento .h8-glass:hover::after, .gt-site .gt:hover::after { animation: go-beam-h 2.2s cubic-bezier(.45, .05, .35, 1) 0s 1 both; } @keyframes go-beam { 0% { --ba: 0deg; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { --ba: 360deg; opacity: 0; } } @keyframes go-beam-h { 0% { --ba: 0deg; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { --ba: 360deg; opacity: 0; } } @media (prefers-reduced-motion: reduce) { html.go-shell #root :is(.glass:not(.selbar, .go-modal, .ghmenu, .toast), .sv-blk, section.card, .jobs)::after, body.go-desk :is(.card, section.card)::after, .h9 .h9-bento .h8-glass::after, .gt-site .gt::after { animation: none !important; } } /* R10.2: контур вторичных кнопок заметнее (в обеих темах) */ html .go-ihb.go-ihb { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink, #f4f4f5) 42%, transparent) !important; } html .go-ihb.go-ihb:hover { box-shadow: inset 0 0 0 1.5px var(--ink, #f4f4f5) !important; } html .h9 .h9-reports .h9-mx-b { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx, #000) 22%, transparent) !important; } /* ── R10.2: переключатели «каплей» (drop.js) ── */ .gd { position: relative; isolation: isolate; } .gd > .gd-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: url(#gd-goo); } .gd > :not(.gd-layer) { position: relative; z-index: 1; } .gd > .h9-tab-ind { position: absolute; } .gd-pill { position: absolute; left: 0; top: 0; width: 0; height: 0; background: var(--gd-c, var(--ink)); opacity: 0; transition: opacity .2s; } .gd-drop { position: absolute; left: -40px; top: -40px; border-radius: 50%; background: var(--gd-c, var(--ink)); transform: translate(-50%, -50%) scale(0); } .gd.gd-one > .gd-layer .gd-pill { opacity: 1; } html body .gd.gd-one .gd-sel.gd-sel { background: transparent !important; background-image: none !important; box-shadow: none !important; } .gd.gd-one .segbg, .gd.gd-one .an-segbg, .gd.gd-one > .h9-tab-ind { opacity: 0 !important; } .h9 .gd { --gd-c: var(--tx); } html body .gd.gd-one .gd-sel.gd-sel, html body .gd.gd-one .gd-sel.gd-sel * { transition: color .25s ease .3s !important; } /* ── R10.2: фон программы — без точек: светлая тема белая, тёмная чёрная (вход — свой, с точками) ── */ #go-dots, #go-spark { display: none !important; } :root[data-ui=light] body:not(.go-auth) { background: #fff !important; } :root:not([data-ui=light]) body:not(.go-auth) { background: #000 !important; } html.go-shell, html.go-shell body:not(.go-auth) { background-image: none !important; } :root:not([data-ui=light]) { --pg-card: #0b0b0c; } /* ── R10.2 Таблица: плотная раскладка «Порталов» + полоса быстрых фильтров (tablex.js) ── * Порядок колонок: ☐ · день · номер (+ тип) · адрес · тема · категория · уч. · срок · статус · ➤ */ html.go-shell #root .gtbl.tx-portals :is(.ghead, .grow) { grid-template-columns: 30px 46px 168px minmax(280px, 1fr) 176px 44px 62px 128px 36px !important; column-gap: 10px; } html.go-shell #root .gtbl.tx-portals :is(.ghead, .grow) > :nth-child(4) { order: 5; } html.go-shell #root .gtbl.tx-portals :is(.ghead, .grow) > :nth-child(5) { order: 4; } html.go-shell #root .gtbl.tx-portals :is(.ghead, .grow) > :nth-child(6) { order: 7; } html.go-shell #root .gtbl.tx-portals :is(.ghead, .grow) > :nth-child(7) { order: 8; } html.go-shell #root .gtbl.tx-portals :is(.ghead, .grow) > :nth-child(8) { order: 6; } html.go-shell #root .gtbl.tx-portals :is(.ghead, .grow) > :nth-child(9) { order: 9; } html.go-shell #root .gtbl.tx-portals .grow .gnum { flex-direction: row !important; align-items: center; gap: 8px; } html.go-shell #root .gtbl.tx-portals .grow { height: 52px; min-height: 52px !important; padding-top: 0 !important; padding-bottom: 0 !important; align-items: center; } html.go-shell #root .gtbl.tx-portals .grow .gaddr { min-width: 0; display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; } html.go-shell #root .gtbl.tx-portals .grow .gaddr > b { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap !important; } html.go-shell #root .gtbl.tx-portals .grow .gaddr > .gsub::before { margin-right: 6px; } html.go-shell #root .gtbl.tx-portals .grow .gaddr > .gsub { flex: 1 1 auto; min-width: 60px; } html.go-shell #root .gtbl.tx-portals .grow .gaddr b { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; } html.go-shell #root .gtbl.tx-portals .grow .gaddr b > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } html.go-shell #root .gtbl.tx-portals .grow .gaddr .gmon { flex: none; white-space: nowrap; } html.go-shell #root .gtbl.tx-portals .grow .gaddr .gsub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.go-shell #root .gtbl.tx-portals .grow:nth-child(even) { background: color-mix(in srgb, var(--ink) 2.5%, transparent); } html.go-shell #root .gtbl.tx-portals .grow:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } html.go-shell #root .gtbl.tx-portals .grow .gcat { font-size: 13px; color: var(--mute); } html.go-shell #root .grow.tx-hide { display: none !important; } .tx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; } .tx-c { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 100px; font: 500 14px var(--font); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); transition: background-color .16s, color .16s, box-shadow .16s; } .tx-c b { font: 600 13px var(--mono); } .tx-c.hot b { color: var(--hot); } .tx-c.warn b { color: var(--warn); } .tx-c.zero { opacity: .45; } .tx-c:hover { box-shadow: inset 0 0 0 1px var(--ink); } .tx-c.on { background: var(--ink); color: var(--canvas); box-shadow: none; } .tx-c.on b { color: inherit !important; } .tx-c:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .tx-n { margin-left: auto; font: 500 13px var(--font); color: var(--mute); } .tx-n b { color: var(--ink); font-family: var(--mono); } .tx-x { all: unset; cursor: pointer; text-decoration: underline; color: var(--ink); } /* ══ R10.3 UI-REGLAMENT §3: кнопки — три вида, не больше ═══════════════════════════════════ * Главная — таблетка 40, заливка --ink (одна на экране: «Отправить…»; shell.js ставит .go-pri по тексту). * Обычная — таблетка 40, контур 1.5px --ink 45 %, при наведении заливается слева направо (перелив без JS — * бандл сам переписывает текст своих кнопок, обёртку ihb туда ставить нельзя). * Ссылка — текст 13.5/500 + стрелка, без фона, подчёркивание при наведении. * Сегменты и чипы — 36, таблетка. Иконки 16, слева. */ html.go-shell :is(.go-btn, .ds-btn, .sf-btn, .j-refresh, .j-refmore, .sbtn, .gm-cancel, .gm-ok, .an-dlbtn, .banner-act, .send, .h9-mx-b, .h9-lall, .go-send-btn, .mzp-send, .mzp-check) { height: 40px !important; min-height: 40px; padding: 0 18px !important; border-radius: 100px !important; font: 500 14px/1 var(--font) !important; letter-spacing: 0 !important; gap: 8px; } html.go-shell :is(.ds-btn.sm) { height: 36px !important; padding: 0 14px !important; font-size: 14px !important; } /* обычная: контур + перелив */ html.go-shell :is(.go-btn-sec, .ds-btn:not(.pri):not(.dng):not(.go-pri), .sf-btn:not(.pri):not(.go-pri), .j-refresh:not(.go-pri), .j-refmore, .sbtn:not(.pri):not(.danger):not(.go-pri), .gm-cancel, .banner-act, .h9-mx-b, .mzp-check, .an-dlbtn) { background-color: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent) !important; background-image: linear-gradient(var(--ink), var(--ink)) !important; background-repeat: no-repeat !important; background-size: 0% 100% !important; background-position: 0 0 !important; transition: background-size .32s cubic-bezier(.22, 1, .36, 1), color .2s, box-shadow .2s, transform var(--dur-2) var(--spring-snap) !important; } html.go-shell :is(.go-btn-sec, .ds-btn:not(.pri):not(.dng):not(.go-pri), .sf-btn:not(.pri):not(.go-pri), .j-refresh:not(.go-pri), .j-refmore, .sbtn:not(.pri):not(.danger):not(.go-pri), .gm-cancel, .banner-act, .h9-mx-b, .mzp-check, .an-dlbtn):hover:not(:disabled):not(.go-ihb), html.go-shell :is(.go-btn-sec, .ds-btn:not(.pri):not(.dng):not(.go-pri), .sf-btn:not(.pri):not(.go-pri), .j-refresh:not(.go-pri), .j-refmore, .sbtn:not(.pri):not(.danger):not(.go-pri), .gm-cancel, .banner-act, .h9-mx-b, .mzp-check, .an-dlbtn):focus-visible:not(.go-ihb) { background-size: 100% 100% !important; color: var(--on-ink) !important; box-shadow: inset 0 0 0 1.5px var(--ink) !important; } /* главная: заливка */ html.go-shell :is(.go-btn-pri, .ds-btn.pri, .sf-btn.pri, .gm-ok, .selbar .sbtn.pri, .send, .go-pri, .h9-lall, .go-send-btn, .mzp-send) { background-color: var(--ink) !important; background-image: none !important; color: var(--on-ink) !important; box-shadow: none !important; } html.go-shell :is(.go-btn-pri, .ds-btn.pri, .sf-btn.pri, .gm-ok, .selbar .sbtn.pri, .send, .go-pri, .mzp-send):hover:not(:disabled) { background-color: color-mix(in srgb, var(--ink) 84%, var(--canvas)) !important; } html.go-shell :is(.go-pri, .j-refresh.go-pri) :is(svg, span) { color: inherit !important; } html.go-shell :is(.ds-btn, .j-refresh, .sf-btn, .mzp-send):disabled { opacity: .45; cursor: default; } html.go-shell .ds-btn.dng { background-color: var(--crit) !important; background-image: none !important; color: var(--on-crit) !important; box-shadow: none !important; } /* ссылки в блоках */ html.go-shell :is(.go-lnk, .go-sec-a, .h8-links .go-sec-a) { height: auto !important; padding: 4px 2px !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font: 500 13.5px var(--font) !important; color: var(--ink) !important; text-decoration: none; border-bottom: 1px solid transparent; } html.go-shell :is(.go-lnk, .go-sec-a):hover { border-bottom-color: currentColor; } html.go-shell .h8-links { gap: 8px 22px !important; } /* сегменты и чипы — 36 */ html.go-shell :is(#root .seg button, .an-seg button, .h9 .go-seg, .h9 .h9-tab, .gt-seg button, .tx-c) { height: 36px !important; min-height: 36px !important; border-radius: 100px !important; font-size: 14px !important; font-weight: 500 !important; } html.go-shell .h9 .go-seg { flex-direction: row !important; gap: 6px; padding: 0 14px; } html.go-shell .h9 .go-seg .go-seg-n { font: 600 12.5px var(--mono); opacity: .7; } /* матрица Отчётов: текст «Отправить» + полное имя для диктора */ .h9 .h9-reports .h9-mx-b { width: auto !important; } .h9 .h9-reports .h9-mx-b .h9-mx-t { display: inline; } .h9 .h9-reports .h9-mx-b.go-ihb .ihb-hov { font-size: 13px; } /* ══ R10.3 UI-REGLAMENT §5: шрифты — Unbounded только для слова «ОКРУГ» на входе и металла; в приложении заголовки — Geist 600 */ html.go-shell { --display: "Geist", -apple-system, "Segoe UI", Arial, sans-serif; } html.go-shell :is(.thead-row .stitle, .thead-row h1, .thead-row h2, .ds-dlg h2, .go-modal h3, .go-modal .gm-t, .an-card h3, .set-card h3, .j-cap, .sv-cap, .go-sheet-h b, .go-sys-t, .go-topo-n b, .h8-h2, .go-p-h h3, .go-dir-t h3, .h9-sumall h3) { font-weight: 600 !important; letter-spacing: -.02em !important; } html.go-shell .thead-row .stitle, html.go-shell .thead-row h1, html.go-shell .thead-row h2 { font-size: 36px !important; } html.go-shell :is(.an-card h3, .go-p-h h3, .set-card h3, .h8-h2, .go-sheet-h b, .j-cap, .sv-cap) { font-size: 19px !important; } html.go-shell :is(.h8-k-v, .h9-k .h8-k-v, .go-dir-cnt b, .go-an-top > b, .h8-w > b, .an-kpi .k-big, .sv-pref b, .master .mt b, .go-sys-v b) { font-family: var(--mono) !important; font-weight: 600 !important; letter-spacing: -.03em !important; } html.go-shell .h8 .go-metal-static { font-family: "Unbounded", var(--display) !important; } html.go-shell .go-ihb.go-ihb:not(.h9-lall) { padding-left: 34px !important; } /* R10.4 (6H‑проход 320/360 px): элементы уходили за правый край и обрезались */ @media (max-width: 420px) { #go-top .go-row1 { gap: 6px; } #go-top .go-pulse { padding: 0 8px; gap: 3px; } #go-top .go-pulse-seg:nth-child(n+4) { display: none; } #go-top .go-icon-btn, #go-top .go-find { width: 40px; min-width: 40px; height: 40px; } .gt-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .gt-seg button { padding: 0 10px !important; } } @media (max-width: 720px) { html.go-shell #root :is(.an-card, .th-block, .an-list, .themerow) { min-width: 0; max-width: 100%; } html.go-shell #root .an-card { overflow: hidden; } .h9 .go-p { min-width: 0; max-width: 100%; } .h9 .go-p-h { flex-wrap: wrap; row-gap: 4px; } .h9 .go-p-sub { white-space: normal; min-width: 0; flex: 1 1 100%; order: 3; } } @media (max-width: 360px) { .h9 .h9-send { min-width: 0; max-width: 100%; } .h9 .h9-tabs { min-width: 0; max-width: 100%; } .h9 .h9-tab { padding: 0 8px !important; } .h9 .h9-tab small, .h9 .h9-tab i { display: none; } } /* 721–1100 px (планшет, телефон боком): плотная Таблица шире экрана — прокручивается сама таблица, не страница */ @media (min-width: 721px) and (max-width: 1100px) { html.go-shell #root .gtbl.tx-portals { overflow-x: auto; max-width: 100%; } html.go-shell #root .gtbl.tx-portals :is(.ghead, .grow) { min-width: 1060px; } } /* R10.4 (6H): в Аналитике выбранный период был невидим — чёрный текст на чёрной «капле» */ .an-seg.gd.gd-one button.gd-sel, .an-seg.gd.gd-one button.gd-sel * { color: var(--on-ink, #fff) !important; } /* R12.2: панель действий окна «МЖИ» — как у основной таблицы (снято с её панели) */ .selbar.mzp-bar { position: fixed; left: 0; right: 0; bottom: 22px; margin-inline: auto; width: fit-content; max-width: calc(100% - 28px); z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #fff !important; background-image: none !important; color: #0d0d0e; box-shadow: inset 0 0 0 1px #e6e6e3, 0 20px 50px -12px rgb(0 0 0 / .35) !important; } .selbar.mzp-bar .scnt { font-size: 14px; font-weight: 600; color: #0d0d0e; } .selbar.mzp-bar .sbtn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 100px; font: 500 14px var(--font, inherit); cursor: pointer; } .selbar.mzp-bar .sbtn.pri { background: #0d0d0e !important; color: #fff !important; } .selbar.mzp-bar .sbtn.gh { background: transparent !important; color: #0d0d0e !important; box-shadow: inset 0 0 0 1.5px rgb(13 13 14 / .45) !important; } .selbar.mzp-bar .sbtn.danger { background: #2d2d2e !important; color: #f4f4f4 !important; } .selbar.mzp-bar .sbtn:disabled { opacity: .45; cursor: default; } .selbar.mzp-bar .sbtn:focus-visible, .selbar.mzp-bar .sx:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .selbar.mzp-bar .sdiv { width: 1px; align-self: stretch; background: #e3e3e0; margin: 0 2px; } .selbar.mzp-bar .sx { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: #626267; cursor: pointer; } .selbar.mzp-bar .sx:hover { background: #f1f1ef; color: #0d0d0e; }