/* ========================================================================== «База знаний» команды (Нури 15.09.2026) — стили раздела «Другое → База знаний». Разметку строит wiki.js; всё в неймспейсе .wk-*. Слои (меню, модалки, пикер в чате) живут в с классом .wk-layer и получают те же токены. Тёмная тема — body[data-theme="dark"] (атрибут ставится на body, не на html). ========================================================================== */ .wk, .wk-layer { --wk-accent: #074783; --wk-accent-soft: rgba(7, 71, 131, .07); --wk-accent-soft-2: rgba(7, 71, 131, .13); --wk-accent-line: rgba(7, 71, 131, .30); --wk-primary-bg: #074783; --wk-primary-hover: #0a5aa6; --wk-primary-fg: #ffffff; --wk-surface: #ffffff; --wk-surface-2: #f5f7fb; --wk-surface-3: #eceff5; --wk-line: #e2e7ef; --wk-line-soft: #edf0f5; --wk-text: #0f1c2e; --wk-text-2: #475670; --wk-text-3: #8691a5; --wk-danger: #d93025; --wk-danger-soft: rgba(217, 48, 37, .08); --wk-warn: #9a5b00; --wk-warn-soft: #fff6e5; --wk-warn-line: #f6dfb3; --wk-star: #e8a317; --wk-mark: #fff0a1; --wk-bubble: #d9fdd3; --wk-bubble-text: #111b21; --wk-chat-bg: #efeae2; --wk-shadow: 0 1px 2px rgba(15, 28, 46, .04), 0 1px 3px rgba(15, 28, 46, .05); --wk-shadow-md: 0 10px 26px rgba(15, 28, 46, .09), 0 2px 6px rgba(15, 28, 46, .04); --wk-shadow-lg: 0 26px 70px rgba(15, 28, 46, .20), 0 4px 14px rgba(15, 28, 46, .07); --wk-r: 12px; --wk-r-lg: 16px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body[data-theme="dark"] .wk, body[data-theme="dark"] .wk-layer { --wk-accent: #62adff; --wk-accent-soft: rgba(98, 173, 255, .10); --wk-accent-soft-2: rgba(98, 173, 255, .17); --wk-accent-line: rgba(98, 173, 255, .38); --wk-primary-bg: #62adff; --wk-primary-hover: #86c0ff; --wk-primary-fg: #06121f; --wk-surface: #162030; --wk-surface-2: #111a27; --wk-surface-3: #1e2a3c; --wk-line: #253247; --wk-line-soft: #1e2a3b; --wk-text: #e7ecf4; --wk-text-2: #a7b2c5; --wk-text-3: #75819a; --wk-danger: #f87171; --wk-danger-soft: rgba(248, 113, 113, .13); --wk-warn: #fbbf24; --wk-warn-soft: rgba(251, 191, 36, .09); --wk-warn-line: rgba(251, 191, 36, .28); --wk-star: #fbbf24; --wk-mark: rgba(250, 204, 21, .30); --wk-bubble: #005c4b; --wk-bubble-text: #e9edef; --wk-chat-bg: #0b141a; --wk-shadow: 0 1px 2px rgba(0, 0, 0, .35); --wk-shadow-md: 0 12px 30px rgba(0, 0, 0, .38); --wk-shadow-lg: 0 28px 72px rgba(0, 0, 0, .58); } /* цвета типов записей */ .wk .k-law, .wk-layer .k-law { --k: #6d28d9; --k-soft: rgba(109, 40, 217, .09); } .wk .k-faq, .wk-layer .k-faq { --k: #047857; --k-soft: rgba(4, 120, 87, .09); } .wk .k-template, .wk-layer .k-template { --k: #0369a1; --k-soft: rgba(3, 105, 161, .09); } .wk .k-note, .wk-layer .k-note { --k: #b45309; --k-soft: rgba(180, 83, 9, .10); } body[data-theme="dark"] .wk .k-law, body[data-theme="dark"] .wk-layer .k-law { --k: #b69dfb; --k-soft: rgba(167, 139, 250, .15); } body[data-theme="dark"] .wk .k-faq, body[data-theme="dark"] .wk-layer .k-faq { --k: #4fd8a0; --k-soft: rgba(52, 211, 153, .14); } body[data-theme="dark"] .wk .k-template, body[data-theme="dark"] .wk-layer .k-template { --k: #62c3f5; --k-soft: rgba(56, 189, 248, .14); } body[data-theme="dark"] .wk .k-note, body[data-theme="dark"] .wk-layer .k-note { --k: #f7bd5e; --k-soft: rgba(251, 191, 36, .14); } .wk *, .wk *::before, .wk *::after, .wk-layer *, .wk-layer *::before, .wk-layer *::after { box-sizing: border-box; } .wk button, .wk-layer button { font-family: inherit; } .wk [hidden], .wk-layer [hidden] { display: none !important; } /* ---------------------------------------------------------------- каркас */ .wk { flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; color: var(--wk-text); font-size: 14px; line-height: 1.45; } .wk-side, .wk-list, .wk-main { background: var(--wk-surface); border: 1px solid var(--wk-line); border-radius: var(--wk-r-lg); box-shadow: var(--wk-shadow); min-height: 0; } .wk-side { flex: 0 0 256px; width: 256px; display: flex; flex-direction: column; padding: 14px 10px 10px; } .wk-list { flex: 0 0 356px; width: 356px; display: flex; flex-direction: column; overflow: hidden; } .wk-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .wk-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .wk-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .wk-ic { display: inline-flex; flex-shrink: 0; } .wk-ic svg { width: 100%; height: 100%; display: block; } .wk-ic.rot45 svg { transform: rotate(45deg); } .wk mark, .wk-layer mark { background: var(--wk-mark); color: inherit; border-radius: 3px; padding: 0 1px; } .wk kbd, .wk-layer kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--wk-line); border-bottom-width: 2px; background: var(--wk-surface); color: var(--wk-text-2); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .wk-muted { color: var(--wk-text-3); } .wk-grow { flex: 1 1 auto; } .wk-spin { width: 12px; height: 12px; display: inline-block; flex-shrink: 0; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wkSpin .7s linear infinite; opacity: .75; } /* полосы прокрутки — классические (видимые), только webkit-стили */ .wk-scroll::-webkit-scrollbar, .wk-items::-webkit-scrollbar, .wk-cats::-webkit-scrollbar, .wk-pk-list::-webkit-scrollbar, .wk-hist-list::-webkit-scrollbar, .wk-hist-doc::-webkit-scrollbar, .wk-menu::-webkit-scrollbar, .wk-modal-b::-webkit-scrollbar { width: 10px; height: 10px; } .wk-scroll::-webkit-scrollbar-thumb, .wk-items::-webkit-scrollbar-thumb, .wk-cats::-webkit-scrollbar-thumb, .wk-pk-list::-webkit-scrollbar-thumb, .wk-hist-list::-webkit-scrollbar-thumb, .wk-hist-doc::-webkit-scrollbar-thumb, .wk-menu::-webkit-scrollbar-thumb, .wk-modal-b::-webkit-scrollbar-thumb { background: var(--wk-line); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; } .wk-scroll::-webkit-scrollbar-thumb:hover, .wk-items::-webkit-scrollbar-thumb:hover, .wk-cats::-webkit-scrollbar-thumb:hover, .wk-pk-list::-webkit-scrollbar-thumb:hover, .wk-hist-list::-webkit-scrollbar-thumb:hover, .wk-hist-doc::-webkit-scrollbar-thumb:hover { background-color: var(--wk-text-3); } /* ---------------------------------------------------------------- кнопки и поля */ .wk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--wk-line); background: var(--wk-surface); color: var(--wk-text); font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s, color .12s, transform .06s; } .wk-btn:hover { background: var(--wk-surface-2); border-color: var(--wk-accent-line); } .wk-btn:active { transform: translateY(1px); } .wk-btn:disabled { opacity: .55; cursor: default; transform: none; } .wk-btn:focus-visible, .wk-icon-btn:focus-visible, .wk-chip:focus-visible, .wk-nav-item:focus-visible, .wk-cat:focus-visible, .wk-create:focus-visible, .wk-seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--wk-accent-soft-2), 0 0 0 1px var(--wk-accent-line); } .wk-btn-primary { background: var(--wk-primary-bg); border-color: var(--wk-primary-bg); color: var(--wk-primary-fg); box-shadow: 0 1px 2px rgba(7, 71, 131, .22), inset 0 1px 0 rgba(255, 255, 255, .12); } .wk-btn-primary:hover { background: var(--wk-primary-hover); border-color: var(--wk-primary-hover); } .wk-btn-soft { background: var(--wk-accent-soft); border-color: transparent; color: var(--wk-accent); } .wk-btn-soft:hover { background: var(--wk-accent-soft-2); border-color: transparent; } .wk-btn-sm { height: 32px; padding: 0 11px; font-size: 12.8px; border-radius: 9px; } .wk-btn-ghost-danger { background: transparent; border-color: transparent; color: var(--wk-danger); } .wk-btn-ghost-danger:hover { background: var(--wk-danger-soft); border-color: transparent; } .wk-icon-btn { width: 38px; height: 38px; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--wk-text-2); cursor: pointer; transition: background .12s, color .12s; } .wk-icon-btn:hover { background: var(--wk-surface-2); color: var(--wk-text); } .wk-icon-btn-sm { width: 28px; height: 28px; border-radius: 8px; } .wk-icon-btn.wk-fav.on { color: var(--wk-star); } .wk-icon-btn.wk-fav.on svg path, .wk-flag-star svg path { fill: currentColor; } .wk-icon-btn.wk-danger:hover { color: var(--wk-danger); background: var(--wk-danger-soft); } .wk-link-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0; color: var(--wk-accent); font-size: inherit; font-weight: 600; cursor: pointer; } .wk-link-btn:hover { text-decoration: underline; text-underline-offset: 2px; } .wk-danger-text { color: var(--wk-danger); } .wk-input { height: 40px; width: 100%; padding: 0 12px; border: 1px solid var(--wk-line); border-radius: 10px; background: var(--wk-surface); color: var(--wk-text); font: inherit; font-size: 14px; outline: none; transition: border-color .12s, box-shadow .12s; } .wk-input::placeholder { color: var(--wk-text-3); } .wk-input:focus { border-color: var(--wk-accent-line); box-shadow: 0 0 0 4px var(--wk-accent-soft); } .wk-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-text-3); } .wk-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; } .wk-chips::-webkit-scrollbar { display: none; } .wk-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--wk-line); background: var(--wk-surface); color: var(--wk-text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .wk-chip b { font-weight: 650; font-size: 11.5px; color: var(--wk-text-3); } .wk-chip .wk-ic { color: var(--k, currentColor); } .wk-chip:hover { border-color: var(--wk-accent-line); color: var(--wk-text); } .wk-chip.active { background: var(--wk-primary-bg); border-color: var(--wk-primary-bg); color: var(--wk-primary-fg); } .wk-chip.active.is-kind { background: var(--k); border-color: var(--k); } .wk-chip.active b, .wk-chip.active .wk-ic { color: inherit; opacity: .85; } body[data-theme="dark"] .wk-chip.active.is-kind { color: #0b1422; } /* ---------------------------------------------------------------- сайдбар */ .wk-brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 14px; } .wk-logo, .wk-hero-badge { display: grid; place-items: center; flex-shrink: 0; color: #fff; background: linear-gradient(140deg, #1270c9 0%, #074783 55%, #052d56 100%); box-shadow: 0 6px 16px rgba(7, 71, 131, .28), inset 0 1px 0 rgba(255, 255, 255, .2); } .wk-logo { width: 40px; height: 40px; border-radius: 12px; } .wk-brand-txt { min-width: 0; } .wk-brand-t { font-weight: 700; font-size: 15px; letter-spacing: -.01em; } .wk-brand-s { font-size: 11.5px; color: var(--wk-text-3); white-space: nowrap; } .wk-nav { display: flex; flex-direction: column; gap: 2px; } .wk-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--wk-text-2); font-size: 14px; font-weight: 550; text-align: left; cursor: pointer; transition: background .12s, color .12s; } .wk-nav-item:hover { background: var(--wk-surface-2); color: var(--wk-text); } .wk-nav-item.active { background: var(--wk-accent-soft); color: var(--wk-accent); } .wk-nav-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-num { min-width: 18px; text-align: right; font-size: 11.5px; font-weight: 650; color: var(--wk-text-3); font-variant-numeric: tabular-nums; } .wk-nav-item.active .wk-num { color: var(--wk-accent); } .wk-sec { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wk-text-3); } .wk-cats { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; } .wk-cat { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 5px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--wk-text); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: background .12s; } .wk-cat:hover { background: var(--wk-surface-2); } .wk-cat.active { background: var(--wk-accent-soft); } .wk-cat.active .wk-cat-name { color: var(--wk-accent); font-weight: 600; } .wk-cat.dragging { opacity: .45; } .wk-cat-ic { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; color: var(--c); background: rgba(100, 116, 139, .12); background: color-mix(in srgb, var(--c) 13%, transparent); } .wk-cat-ic-xs { width: 22px; height: 22px; border-radius: 6px; } .wk-cat-ic-lg { width: 48px; height: 48px; border-radius: 14px; } .wk-cat-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-cat-more { display: none; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--wk-text-2); } .wk-cat:hover .wk-cat-more { display: grid; } .wk-cat:not(.wk-cat-uncat):hover .wk-num { display: none; } .wk-cat-more:hover { background: var(--wk-surface-3); color: var(--wk-text); } .wk-cat.drop-before::before, .wk-cat.drop-after::after { content: ''; position: absolute; left: 8px; right: 8px; height: 2px; border-radius: 2px; background: var(--wk-accent); } .wk-cat.drop-before::before { top: -1px; } .wk-cat.drop-after::after { bottom: -1px; } .wk-cat.drop-into { background: var(--wk-accent-soft-2); box-shadow: inset 0 0 0 1.5px var(--wk-accent-line); } .wk.is-dragging-entry .wk-cats { background: linear-gradient(var(--wk-accent-soft), var(--wk-accent-soft)); border-radius: 12px; } .wk-cats-empty { padding: 2px 8px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--wk-text-3); } .wk-cats-empty p { margin: 0 0 10px; } .wk-suggest { display: flex; flex-wrap: wrap; gap: 6px; } .wk-suggest-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 7px; border: 1px dashed var(--wk-line); border-radius: 999px; background: transparent; color: var(--wk-text-2); font-size: 12.5px; font-weight: 550; cursor: pointer; transition: color .12s, border-color .12s, background .12s; } .wk-suggest-chip:hover { border-style: solid; border-color: var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 7%, transparent); } .wk-side-foot { border-top: 1px solid var(--wk-line-soft); padding-top: 8px; margin-top: 4px; } /* ---------------------------------------------------------------- список */ .wk-list-top { display: flex; gap: 8px; padding: 12px 12px 10px; } .wk-search { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 8px 0 12px; border-radius: 12px; border: 1px solid transparent; background: var(--wk-surface-2); color: var(--wk-text-3); transition: background .12s, border-color .12s, box-shadow .12s; } .wk-search:focus-within { background: var(--wk-surface); border-color: var(--wk-accent-line); box-shadow: 0 0 0 4px var(--wk-accent-soft); color: var(--wk-accent); } .wk-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--wk-text); font: inherit; font-size: 14px; } .wk-search input::placeholder { color: var(--wk-text-3); } .wk-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } .wk-search-x { width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--wk-text-3); display: grid; place-items: center; cursor: pointer; } .wk-search-x:hover { background: var(--wk-surface-3); color: var(--wk-text); } .wk-search-kbd { margin-right: 2px; } .wk-new-btn { height: 42px; padding: 0 14px 0 11px; border-radius: 12px; } .wk-list-head { padding: 0 14px 10px; border-bottom: 1px solid var(--wk-line-soft); } .wk-lh-row { display: flex; align-items: center; gap: 8px; min-height: 36px; } .wk-lh-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; } .wk-lh-title h2 { margin: 0; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--wk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-lh-ic { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; color: var(--c); background: rgba(100, 116, 139, .12); background: color-mix(in srgb, var(--c) 13%, transparent); } .wk-count { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 1px 8px; border-radius: 999px; background: var(--wk-surface-3); color: var(--wk-text-2); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; } .wk-count .wk-spin { width: 10px; height: 10px; border-width: 1.5px; } .wk-lh-sub { font-size: 12px; color: var(--wk-text-3); margin-top: -2px; } .wk-scope-btn { display: none; } .wk-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 8px 14px; display: flex; flex-direction: column; gap: 2px; } .wk-item { position: relative; display: flex; gap: 12px; padding: 11px 12px; border-radius: 12px; cursor: pointer; transition: background .12s; } .wk-item:hover, .wk-item.hi { background: var(--wk-surface-2); } .wk-item.active { background: var(--wk-accent-soft); } .wk-item.active::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--wk-accent); } .wk-item.dragging { opacity: .45; } .wk-item-ic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; color: var(--k); background: var(--k-soft); } .wk-item-body { flex: 1; min-width: 0; } .wk-item-title { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--wk-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .wk-item-snip { margin-top: 2px; font-size: 12.8px; line-height: 1.45; color: var(--wk-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .wk-item-meta { margin-top: 6px; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.8px; color: var(--wk-text-3); } .wk-item-meta > span:not(.wk-flags) { white-space: nowrap; } .wk-meta-cat { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; color: var(--wk-text-2); font-weight: 550; } .wk-meta-cat i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex-shrink: 0; } .wk-sep { color: var(--wk-text-3); opacity: .6; } .wk-flags { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; } .wk-flag { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; } .wk-flag-star { color: var(--wk-star); display: inline-flex; } .wk-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 46px 22px; color: var(--wk-text-2); } .wk-empty-ic { width: 60px; height: 60px; border-radius: 18px; margin-bottom: 14px; display: grid; place-items: center; background: var(--wk-surface-2); color: var(--wk-text-3); box-shadow: inset 0 0 0 1px var(--wk-line-soft); } .wk-empty-t { font-weight: 650; font-size: 15px; color: var(--wk-text); max-width: 320px; } .wk-empty-s { margin-top: 6px; max-width: 300px; font-size: 13px; line-height: 1.5; color: var(--wk-text-3); } .wk-empty-a { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .wk-skel { border-radius: 10px; background: linear-gradient(90deg, var(--wk-surface-2) 25%, var(--wk-surface-3) 37%, var(--wk-surface-2) 63%); background-size: 400% 100%; animation: wkShimmer 1.3s ease infinite; } .wk-skel-list { display: flex; flex-direction: column; gap: 10px; padding: 8px; } .wk-skel-item { height: 76px; } .wk-skel-row { height: 32px; } /* ---------------------------------------------------------------- шапка правой колонки */ .wk-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 11px 14px 11px 22px; border-bottom: 1px solid var(--wk-line-soft); flex-shrink: 0; } .wk-topbar-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } .wk-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .wk-only-narrow { display: none !important; } .wk-show-sm { display: none !important; } .wk-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; overflow: hidden; } .wk-crumbs > .wk-crumb { flex: 0 1 auto; min-width: 60px; } .wk-crumbs > .wk-kind-badge { flex-shrink: 0; } .wk-crumb { display: inline-flex; align-items: center; gap: 7px; max-width: 240px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--wk-line); background: var(--wk-surface); color: var(--wk-text); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .12s; } .wk-crumb i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; } .wk-crumb:hover { border-color: var(--c); } span.wk-crumb { cursor: default; } .wk-crumb-muted { color: var(--wk-text-3); border-style: dashed; } .wk-kind-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--k-soft); color: var(--k); font-size: 12px; font-weight: 650; white-space: nowrap; } .wk-badge-private { --k: var(--wk-text-2); --k-soft: var(--wk-surface-3); } /* ---------------------------------------------------------------- главная */ .wk-home-in { max-width: 940px; margin: 0 auto; padding: 32px 40px 48px; } .wk-hero { display: flex; align-items: center; gap: 18px; padding: 24px 26px; border-radius: 20px; border: 1px solid var(--wk-line-soft); background: radial-gradient(120% 150% at 0% 0%, rgba(18, 112, 201, .13), transparent 58%), radial-gradient(90% 140% at 100% 100%, rgba(247, 115, 80, .11), transparent 55%), var(--wk-surface-2); } .wk-hero-badge { width: 60px; height: 60px; border-radius: 18px; } .wk-hero h1 { margin: 0 0 5px; font-size: 24px; line-height: 1.2; font-weight: 750; letter-spacing: -.02em; color: var(--wk-text); } .wk-hero p { margin: 0; max-width: 580px; font-size: 14px; line-height: 1.55; color: var(--wk-text-2); } .wk-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .wk-stat { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--wk-line-soft); background: var(--wk-surface); } .wk-stat b { display: block; font-size: 22px; line-height: 1.2; font-weight: 750; letter-spacing: -.02em; color: var(--k, var(--wk-text)); font-variant-numeric: tabular-nums; } .wk-stat span { font-size: 12px; color: var(--wk-text-3); } .wk-home-sub { margin: 26px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wk-text-3); } .wk-create-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .wk-create { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 16px; border-radius: 16px; border: 1px solid var(--wk-line); background: var(--wk-surface); color: var(--wk-text); text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; } .wk-create:hover { transform: translateY(-2px); box-shadow: var(--wk-shadow-md); border-color: var(--k); border-color: color-mix(in srgb, var(--k) 40%, var(--wk-line)); } .wk-create-ic { width: 44px; height: 44px; margin-bottom: 9px; border-radius: 13px; display: grid; place-items: center; color: var(--k); background: var(--k-soft); } .wk-create-t { font-size: 14.5px; font-weight: 650; } .wk-create-s { font-size: 12.5px; line-height: 1.45; color: var(--wk-text-3); } .wk-create-plus { position: absolute; top: 14px; right: 14px; color: var(--k); opacity: 0; transition: opacity .15s; } .wk-create:hover .wk-create-plus { opacity: 1; } .wk-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; } .wk-panel { border: 1px solid var(--wk-line-soft); border-radius: 16px; background: var(--wk-surface); overflow: hidden; } .wk-panel-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--wk-line-soft); font-size: 13.5px; font-weight: 650; } .wk-panel-h .wk-ic { color: var(--wk-text-3); } .wk-panel-b { padding: 6px; } .wk-panel-empty { padding: 12px 10px; font-size: 13px; line-height: 1.5; color: var(--wk-text-3); } .wk-mini { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--wk-text); text-align: left; cursor: pointer; } .wk-mini:hover { background: var(--wk-surface-2); } .wk-mini-ic { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; color: var(--k); background: var(--k-soft); } .wk-mini-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-mini-r { font-size: 12px; color: var(--wk-text-3); white-space: nowrap; } .wk-tips { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; font-size: 12.5px; color: var(--wk-text-3); } .wk-tips > span { display: inline-flex; align-items: center; gap: 7px; } /* ---------------------------------------------------------------- просмотр записи */ .wk-article { max-width: 820px; margin: 0 auto; padding: 30px 44px 64px; } .wk-q-label { margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #047857; } body[data-theme="dark"] .wk-q-label { color: #4fd8a0; } .wk-title { margin: 4px 0 10px; font-size: 30px; line-height: 1.22; font-weight: 750; letter-spacing: -.022em; color: var(--wk-text); word-break: break-word; } .wk-title-sm { font-size: 22px; margin-top: 0; } .wk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--wk-text-3); } .wk-meta-who { color: var(--wk-text-2); font-weight: 600; } .wk-ava { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; color: #fff; font-weight: 700; line-height: 1; background: hsl(var(--h) 50% 46%); } body[data-theme="dark"] .wk-ava { background: hsl(var(--h) 42% 40%); } .wk-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; border: 1px solid transparent; font-size: 13px; line-height: 1.45; } .wk-banner > span:not(.wk-ic) { flex: 1 1 240px; } .wk-banner-warn { background: var(--wk-warn-soft); border-color: var(--wk-warn-line); color: var(--wk-warn); } .wk-banner-info { background: var(--wk-accent-soft); border-color: var(--wk-accent-soft-2); color: var(--wk-accent); } .wk-banner-danger { background: var(--wk-danger-soft); color: var(--wk-danger); } .wk-source { display: flex; align-items: center; gap: 14px; margin: 22px 0 4px; padding: 13px 14px 13px 14px; border-radius: 14px; background: var(--k-soft); border: 1px solid var(--k-soft); } .wk-source-ic { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; color: var(--k); background: var(--wk-surface); box-shadow: var(--wk-shadow); } .wk-source-txt { flex: 1; min-width: 0; } .wk-source-l { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--k); } .wk-source-t { font-size: 14.5px; font-weight: 650; color: var(--wk-text); word-break: break-word; } .wk-source-s { font-size: 12.5px; color: var(--wk-text-3); } .wk-article > .wk-prose { margin-top: 22px; } .wk-answer { margin-top: 22px; padding: 2px 0 2px 20px; border-left: 3px solid var(--k); } .wk-answer-l { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--k); } .wk-view .wk-answer { --k: #047857; } body[data-theme="dark"] .wk-view .wk-answer { --k: #4fd8a0; } .wk-tpl { margin-top: 22px; border: 1px solid var(--wk-line); border-radius: 18px; overflow: hidden; background: var(--wk-surface); } .wk-tpl-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 16px; border-bottom: 1px solid var(--wk-line-soft); font-size: 13px; font-weight: 650; color: var(--wk-text-2); } .wk-tpl-h > span { display: inline-flex; align-items: center; gap: 8px; } .wk-tpl-bubble { padding: 22px 26px 22px 22px; background: var(--wk-chat-bg); } .wk-tpl-bubble .wk-prose { position: relative; width: fit-content; max-width: min(560px, 100%); margin: 0 0 0 auto; padding: 9px 14px 11px; border-radius: 12px 0 12px 12px; background: var(--wk-bubble); color: var(--wk-bubble-text); box-shadow: 0 1px 1px rgba(11, 20, 26, .13); font-size: 14.5px; line-height: 1.55; } .wk-tpl-bubble .wk-prose::after { content: ''; position: absolute; top: 0; right: -8px; width: 8px; height: 13px; background: var(--wk-bubble); clip-path: polygon(0 0, 100% 0, 0 100%); } .wk-tpl-f { display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--wk-line-soft); font-size: 12.5px; line-height: 1.45; color: var(--wk-text-3); } .wk-tpl-f .wk-ic { margin-top: 1px; } .wk-var { display: inline; padding: 1px 4px; margin: 0; border-radius: 6px; background: rgba(245, 158, 11, .22); color: #8a4b00; font-weight: 600; } body[data-theme="dark"] .wk-var { background: rgba(251, 191, 36, .2); color: #fcd34d; } .wk-nobody { margin-top: 22px; padding: 16px 18px; border-radius: 12px; border: 1px dashed var(--wk-line); font-size: 13.5px; color: var(--wk-text-3); } .wk-files-block { margin-top: 28px; } .wk-sub-h { margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wk-text-3); } .wk-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .wk-files-edit:not(:empty) { margin-top: 10px; } .wk-file { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px 8px 8px; border: 1px solid var(--wk-line); border-radius: 12px; background: var(--wk-surface); color: inherit; text-decoration: none; transition: border-color .12s, box-shadow .12s; } a.wk-file:hover { border-color: var(--wk-accent-line); box-shadow: var(--wk-shadow-md); } .wk-file.is-up { opacity: .75; } .wk-file-ic { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; background: #64748b; } .wk-file-ic img { width: 100%; height: 100%; object-fit: cover; display: block; } .wk-file-ic.f-pdf { background: #e5484d; } .wk-file-ic.f-doc { background: #2f6fd1; } .wk-file-ic.f-xls { background: #1f8a4c; } .wk-file-ic.f-ppt { background: #d9622b; } .wk-file-ic.f-img { background: var(--wk-surface-3); } .wk-file-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .wk-file-n { font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-file-s { font-size: 12px; color: var(--wk-text-3); } .wk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; } .wk-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--wk-surface-3); color: var(--wk-text-2); font-size: 12.5px; font-weight: 550; } button.wk-tag { cursor: pointer; } button.wk-tag:hover { background: var(--wk-accent-soft-2); color: var(--wk-accent); } /* ---------------------------------------------------------------- типографика текста */ .wk-prose { font-size: 15px; line-height: 1.68; color: var(--wk-text); overflow-wrap: anywhere; } .wk-prose > :first-child { margin-top: 0; } .wk-prose > :last-child { margin-bottom: 0; } .wk-prose p { margin: .55em 0; } .wk-prose h2 { margin: 1.25em 0 .45em; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.012em; } .wk-prose h3 { margin: 1.1em 0 .35em; font-size: 16.5px; line-height: 1.35; font-weight: 650; } .wk-prose ul, .wk-prose ol { margin: .45em 0; padding-left: 1.55em; } .wk-prose li { margin: .2em 0; padding-left: .15em; } .wk-prose li::marker { color: var(--wk-text-3); } .wk-prose blockquote { margin: .8em 0; padding: .65em 1em; border-left: 3px solid var(--wk-accent); border-radius: 0 10px 10px 0; background: var(--wk-accent-soft); color: var(--wk-text); } .wk-prose a { color: var(--wk-accent); text-decoration: underline; text-decoration-color: var(--wk-accent-line); text-underline-offset: 2px; } .wk-prose img { display: block; max-width: 100%; height: auto; margin: .8em 0; border-radius: 12px; border: 1px solid var(--wk-line); } #wkViewBody img { cursor: zoom-in; } .wk-prose table { display: block; overflow-x: auto; border-collapse: collapse; margin: .8em 0; font-size: 14px; } .wk-prose td, .wk-prose th { border: 1px solid var(--wk-line); padding: 7px 10px; vertical-align: top; } .wk-prose th { background: var(--wk-surface-2); font-weight: 650; text-align: left; } .wk-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--wk-surface-3); padding: .1em .35em; border-radius: 5px; } .wk-prose pre { background: var(--wk-surface-2); padding: 12px 14px; border-radius: 10px; overflow-x: auto; font-size: 13px; } .wk-prose hr { border: 0; border-top: 1px solid var(--wk-line); margin: 1.4em 0; } .wk-tpl-bubble .wk-prose a { color: #027eb5; } body[data-theme="dark"] .wk-tpl-bubble .wk-prose a { color: #53bdeb; } /* ---------------------------------------------------------------- редактор */ .wk-form { max-width: 880px; margin: 0 auto; padding: 22px 40px 48px; } .wk-edit-h { font-size: 15px; font-weight: 700; white-space: nowrap; } .wk-save-state { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--wk-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-save-state.is-dirty::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; } .wk-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 13px; background: var(--wk-surface-2); border: 1px solid var(--wk-line-soft); } .wk-seg-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--wk-text-2); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s; } .wk-seg-btn .wk-ic { color: var(--k); opacity: .75; } .wk-seg-btn:hover { color: var(--wk-text); } .wk-seg-btn.on { background: var(--wk-surface); color: var(--k); box-shadow: 0 1px 2px rgba(15, 28, 46, .08), 0 0 0 1px var(--wk-line); } .wk-seg-btn.on .wk-ic { opacity: 1; } .wk-edit .wk-q-label { margin-top: 18px; } .wk-title-input { display: block; width: 100%; margin-top: 12px; padding: 6px 0; border: 0; outline: 0; resize: none; overflow: hidden; background: transparent; color: var(--wk-text); font: 750 28px/1.25 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: -.02em; } .wk-edit .wk-q-label + .wk-title-input { margin-top: 2px; } .wk-title-input::placeholder { color: var(--wk-text-3); font-weight: 600; opacity: .8; } .wk-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 16px; } .wk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .wk-field.wk-grow { flex: 1 1 240px; } .wk-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 200px; max-width: 300px; height: 40px; padding: 0 10px 0 8px; border: 1px solid var(--wk-line); border-radius: 10px; background: var(--wk-surface); color: var(--wk-text); font-size: 14px; cursor: pointer; } .wk-select:hover { border-color: var(--wk-accent-line); } .wk-select > .wk-ic { color: var(--wk-text-3); } .wk-select-v { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 550; } .wk-select-v.wk-muted { padding-left: 4px; font-weight: 500; } .wk-tags-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 5px 8px; border: 1px solid var(--wk-line); border-radius: 10px; background: var(--wk-surface); cursor: text; transition: border-color .12s, box-shadow .12s; } .wk-tags-input:focus-within { border-color: var(--wk-accent-line); box-shadow: 0 0 0 4px var(--wk-accent-soft); } .wk-tags-input input { flex: 1 1 110px; min-width: 110px; height: 28px; border: 0; outline: 0; background: transparent; color: var(--wk-text); font: inherit; font-size: 14px; } .wk-tags-input input::placeholder { color: var(--wk-text-3); } .wk-tag-chip { display: inline-flex; align-items: center; gap: 1px; height: 26px; padding: 0 3px 0 9px; border-radius: 999px; background: var(--wk-accent-soft-2); color: var(--wk-accent); font-size: 12.5px; font-weight: 600; } .wk-tag-chip button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .7; } .wk-tag-chip button:hover { opacity: 1; background: var(--wk-accent-soft-2); } .wk-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--wk-line); border-radius: 10px; color: var(--wk-text-2); font-size: 13.5px; font-weight: 550; cursor: pointer; user-select: none; white-space: nowrap; } .wk-switch input { position: absolute; opacity: 0; pointer-events: none; } .wk-switch-ui { position: relative; width: 34px; height: 20px; flex-shrink: 0; border-radius: 999px; background: var(--wk-surface-3); box-shadow: inset 0 0 0 1px var(--wk-line); transition: background .15s; } .wk-switch-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 28, 46, .25); transition: transform .15s; } .wk-switch input:checked + .wk-switch-ui { background: var(--wk-primary-bg); box-shadow: none; } .wk-switch input:checked + .wk-switch-ui::after { transform: translateX(14px); } .wk-switch input:focus-visible + .wk-switch-ui { box-shadow: 0 0 0 3px var(--wk-accent-soft-2); } .wk-switch-t { display: inline-flex; align-items: center; gap: 6px; } .wk-switch.disabled { opacity: .55; cursor: not-allowed; } .wk-add-src { margin-top: 14px; font-size: 13px; } .wk-editor { position: relative; margin-top: 18px; border: 1px solid var(--wk-line); border-radius: 14px; background: var(--wk-surface); transition: border-color .12s, box-shadow .12s; } .wk-editor:focus-within { border-color: var(--wk-accent-line); box-shadow: 0 0 0 4px var(--wk-accent-soft); } .wk-tb { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--wk-line-soft); border-radius: 14px 14px 0 0; background: var(--wk-surface); } .wk-tb-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--wk-text-2); cursor: pointer; transition: background .1s, color .1s; } .wk-tb-btn:hover { background: var(--wk-surface-2); color: var(--wk-text); } .wk-tb-btn.on { background: var(--wk-accent-soft-2); color: var(--wk-accent); } .wk-tb-block { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 128px; height: 34px; padding: 0 8px 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--wk-text); font-size: 13px; font-weight: 600; cursor: pointer; } .wk-tb-block:hover { background: var(--wk-surface-2); } .wk-tb-block .wk-ic { color: var(--wk-text-3); } .wk-tb-sep { width: 1px; height: 20px; margin: 0 5px; background: var(--wk-line); } .wk-body { position: relative; min-height: 300px; padding: 18px 22px 28px; outline: none; cursor: text; } .wk-body.is-empty::before { content: attr(data-ph); position: absolute; left: 22px; right: 22px; top: 18px; color: var(--wk-text-3); pointer-events: none; } .wk-body img { cursor: default; } .wk-body img:hover { box-shadow: 0 0 0 3px var(--wk-accent-soft-2); } .wk-up-ph { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0; padding: 6px 10px; border-radius: 8px; background: var(--wk-surface-3); color: var(--wk-text-3); font-size: 13px; user-select: none; } .wk-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 12.5px; color: var(--wk-text-3); } .wk-vars-l { font-weight: 600; color: var(--wk-text-2); } .wk-var-btn { height: 26px; padding: 0 9px; border: 1px dashed rgba(180, 83, 9, .45); border-radius: 7px; background: rgba(245, 158, 11, .12); color: #8a4b00; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; } .wk-var-btn:hover { background: rgba(245, 158, 11, .22); } body[data-theme="dark"] .wk-var-btn { color: #fcd34d; border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .1); } .wk-vars-hint { flex: 1 1 100%; } .wk-attach { margin-top: 24px; } .wk-drop { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; padding: 14px 16px; border: 1.5px dashed var(--wk-line); border-radius: 12px; color: var(--wk-text-2); font-size: 13.5px; cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .wk-drop u { text-decoration-color: var(--wk-accent-line); text-underline-offset: 2px; color: var(--wk-accent); } .wk-drop small { margin-left: auto; font-size: 12px; color: var(--wk-text-3); } .wk-drop:hover, .wk-drop.over { border-color: var(--wk-accent-line); background: var(--wk-accent-soft); color: var(--wk-text); } .wk-drop:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--wk-accent-soft-2); } .wk-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--wk-line-soft); font-size: 12px; color: var(--wk-text-3); } .wk-hints > span { display: inline-flex; align-items: center; gap: 4px; } .wk-shake { animation: wkShake .4s; } /* ---------------------------------------------------------------- слои */ .wk-layer { position: fixed; z-index: 10060; color: var(--wk-text); font-size: 14px; line-height: 1.45; } .wk-menu { min-width: 230px; max-width: 320px; max-height: min(440px, calc(100vh - 16px)); overflow-y: auto; padding: 6px; background: var(--wk-surface); border: 1px solid var(--wk-line); border-radius: 14px; box-shadow: var(--wk-shadow-lg); animation: wkPop .12s ease-out; } .wk-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--wk-text); font-size: 13.5px; text-align: left; cursor: pointer; } .wk-menu-item:hover, .wk-menu-item.hi { background: var(--wk-surface-2); } .wk-menu-item > span:not(.wk-ic):not(.wk-cat-ic) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-menu-item > .wk-ic { color: var(--wk-text-2); } .wk-menu-item.danger, .wk-menu-item.danger > .wk-ic { color: var(--wk-danger); } .wk-menu-item.danger:hover { background: var(--wk-danger-soft); } .wk-menu-item small { font-size: 12px; color: var(--wk-text-3); font-variant-numeric: tabular-nums; } .wk-menu-item > .wk-menu-tick { color: var(--wk-accent); } .wk-menu-item.checked { font-weight: 600; } .wk-menu-sep { height: 1px; margin: 5px 4px; background: var(--wk-line-soft); } .wk-menu-head { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wk-text-3); } .wk-menu-h2 > span:not(.wk-ic) { font-size: 16px; font-weight: 700; } .wk-menu-h3 > span:not(.wk-ic) { font-size: 14.5px; font-weight: 650; } .wk-tag-suggest { min-width: 200px; } .wk-pop { width: 340px; padding: 12px; background: var(--wk-surface); border: 1px solid var(--wk-line); border-radius: 14px; box-shadow: var(--wk-shadow-lg); animation: wkPop .12s ease-out; } .wk-pop-t { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 13px; font-weight: 650; color: var(--wk-text-2); } .wk-pop-a { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } .wk-modal-back { inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(9, 17, 29, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: wkFade .14s ease-out; } .wk-modal { width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--wk-surface); border: 1px solid var(--wk-line); border-radius: 20px; box-shadow: var(--wk-shadow-lg); overflow: hidden; animation: wkRise .16s ease-out; } .wk-modal-sm { max-width: 470px; } .wk-modal-xl { max-width: 1080px; height: min(780px, calc(100vh - 32px)); } .wk-modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 14px 12px 22px; } .wk-modal-h h3 { margin: 0; min-width: 0; display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; } .wk-modal-h h3 small { min-width: 0; margin-left: 4px; font-size: 13px; font-weight: 500; color: var(--wk-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-modal-b { padding: 4px 22px 18px; overflow-y: auto; } .wk-modal-b .wk-label { display: block; } .wk-modal-f { display: flex; align-items: center; gap: 8px; padding: 13px 22px; border-top: 1px solid var(--wk-line-soft); background: var(--wk-surface-2); } .wk-cat-edit-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .wk-input-lg { flex: 1; height: 48px; font-size: 16px; font-weight: 600; } .wk-swatches { display: flex; flex-wrap: wrap; gap: 9px; margin: 9px 0 18px; } .wk-swatch { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); transition: transform .1s, box-shadow .1s; } .wk-swatch:hover { transform: scale(1.08); } .wk-swatch.on { box-shadow: 0 0 0 2px var(--wk-surface), 0 0 0 4px var(--c); } .wk-icon-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 9px; } .wk-icon-pick { height: 44px; display: grid; place-items: center; border: 1px solid var(--wk-line-soft); border-radius: 11px; background: var(--wk-surface); color: var(--wk-text-2); cursor: pointer; transition: border-color .1s, color .1s, background .1s; } .wk-icon-pick:hover { border-color: var(--c); color: var(--c); } .wk-icon-pick.on { border-color: var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 0 0 0 1px var(--c); } .wk-hist { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); border-top: 1px solid var(--wk-line-soft); } .wk-hist-loading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--wk-text-3); } .wk-hist > .wk-empty { grid-column: 1 / -1; } .wk-hist-list { overflow-y: auto; padding: 8px; border-right: 1px solid var(--wk-line-soft); background: var(--wk-surface-2); } .wk-hist-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--wk-text); text-align: left; cursor: pointer; } .wk-hist-item:hover { background: var(--wk-surface-3); } .wk-hist-item.on { background: var(--wk-surface); box-shadow: var(--wk-shadow), inset 0 0 0 1px var(--wk-line); } .wk-hist-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wk-hist-a { font-size: 13.5px; font-weight: 600; } .wk-hist-a em { font-style: normal; font-weight: 500; color: var(--wk-text-2); } .wk-hist-s { font-size: 12px; color: var(--wk-text-3); } .wk-hist-cur { padding: 2px 8px; border-radius: 999px; background: rgba(16, 185, 129, .13); color: #047857; font-size: 11px; font-weight: 700; white-space: nowrap; } body[data-theme="dark"] .wk-hist-cur { color: #4fd8a0; } .wk-hist-prev { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .wk-hist-bar { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 18px; border-bottom: 1px solid var(--wk-line-soft); } .wk-hist-doc { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 28px 32px; } .wk-hist-ref { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; } /* пикер «База знаний» у поля сообщения в чате */ .wk-picker { display: flex; flex-direction: column; background: var(--wk-surface); border: 1px solid var(--wk-line); border-radius: 18px; box-shadow: var(--wk-shadow-lg); overflow: hidden; animation: wkRise .14s ease-out; } .wk-pk-top { display: flex; align-items: center; gap: 6px; padding: 10px 8px 2px 10px; } .wk-search-sm { height: 40px; } .wk-pk-chips { padding: 8px 10px !important; border-bottom: 1px solid var(--wk-line-soft); flex-shrink: 0; } .wk-pk-list { flex: 1 1 auto; min-height: 140px; overflow-y: auto; padding: 6px; } .wk-pk-list .wk-empty { padding: 30px 18px; } .wk-pk-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--wk-text); text-align: left; cursor: pointer; } .wk-pk-row.hi { background: var(--wk-accent-soft); } .wk-pk-row .wk-item-ic { width: 34px; height: 34px; border-radius: 10px; } .wk-pk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .wk-pk-t { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-pk-s { font-size: 12.5px; color: var(--wk-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-pk-k { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--k-soft); color: var(--k); font-size: 11px; font-weight: 650; } .wk-pk-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px; border-top: 1px solid var(--wk-line-soft); background: var(--wk-surface-2); font-size: 11.5px; color: var(--wk-text-3); flex-shrink: 0; } .wk-pk-foot span { display: inline-flex; align-items: center; gap: 4px; } .wk-pk-foot kbd { min-width: 18px; height: 18px; font-size: 10px; } /* кнопка открытия пикера у композера чата */ .chat-kb-btn { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--wa-icon, #54656f); cursor: pointer; transition: background .12s, color .12s; } .chat-kb-btn:hover { background: rgba(11, 20, 26, .08); } body[data-theme="dark"] .chat-kb-btn:hover { background: rgba(233, 237, 239, .1); } .chat-kb-btn .wk-ic svg path { stroke-width: 1.8; } .wk-lightbox-back { background: rgba(5, 10, 18, .84); } .wk-lightbox { position: relative; } .wk-lightbox img { display: block; max-width: 92vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); } .wk-lightbox-x { position: absolute; top: -48px; right: 0; color: #fff; } .wk-lightbox-x:hover { background: rgba(255, 255, 255, .12); color: #fff; } @keyframes wkShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @keyframes wkSpin { to { transform: rotate(360deg); } } @keyframes wkPop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes wkFade { from { opacity: 0; } to { opacity: 1; } } @keyframes wkRise { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes wkShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } @media (prefers-reduced-motion: reduce) { .wk *, .wk-layer, .wk-layer * { animation: none !important; transition: none !important; } } /* ---------------------------------------------------------------- адаптив */ @media (max-width: 1440px) { .wk-side { flex-basis: 236px; width: 236px; } .wk-list { flex-basis: 330px; width: 330px; } .wk-article, .wk-form { padding-left: 34px; padding-right: 34px; } .wk-home-in { padding-left: 32px; padding-right: 32px; } .wk-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1200px) { .wk-side { display: none; } .wk-scope-btn { display: inline-grid; } .wk-list { flex-basis: 310px; width: 310px; } .wk-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wk-home-grid { grid-template-columns: minmax(0, 1fr); } .wk-hide-sm { display: none !important; } .wk-show-sm { display: flex !important; } .wk-hist { grid-template-columns: 280px minmax(0, 1fr); } } @media (max-width: 860px) { .wk { gap: 0; } .wk-list { flex: 1 1 auto; width: auto; } .wk-main { display: none; } .wk.is-detail .wk-list { display: none; } .wk.is-detail .wk-main { display: flex; } .wk-only-narrow { display: inline-grid !important; } .wk-article, .wk-form, .wk-home-in { padding: 20px 18px 40px; } .wk-title { font-size: 24px; } .wk-title-input { font-size: 22px; } .wk-topbar { padding-left: 10px; } .wk-actions .wk-btn:not(.wk-btn-primary) > span:not(.wk-ic), .wk-edit .wk-save-state { display: none; } .wk-hist { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .wk-hist-list { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--wk-line-soft); } .wk-create-grid { grid-template-columns: minmax(0, 1fr); } .wk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }