/* ═══════════════════════════════════════════════════════════════════════ Тема «Коля·терапия» для Oryn — meet.kolyatherapy.ru ═══════════════════════════════════════════════════════════════════════ Ложится в static/theme/ инстанса Oryn (хук описан в theme.css-заглушке репозитория Oryn). Источник правды по стилю — дизайн-система сайта (kolyatherapy/design-system/DESIGN-SYSTEM.md, §16) и макет design-system/oryn-meet-mockup.html. Область действия: ТОЛЬКО гостевые до-звонковые экраны — карточка входа и комната ожидания. theme.js вешает класс `kolya` на и снимает его в звонке и на операторском дашборде: там остаётся тёмный Oryn. CSP инстанса — same-origin ('self'): никаких data:-URI и внешних ресурсов; кромка, текстуры и шрифты лежат рядом отдельными файлами. Инлайновые style-атрибуты тоже запрещены, поэтому вся стилизация инжектируемых theme.js элементов — здесь, классами. ═══════════════════════════════════════════════════════════════════════ */ /* ═════════════════════════════════════════════════════════════════════════ ТОКЕНЫ: тема задаёт палитру базы, а не закрашивает поверхности поверх неё ═════════════════════════════════════════════════════════════════════════ Клиент (SOZVON) с 2026-08 полностью на CSS-переменных: ~70 токенов на :root, и всё, что он рисует, читает --text/--surface/--accent и прочие. Пока тема красила поверхности напрямую, любой новый элемент базы приземлялся на оформленную поверхность со СВОИМ цветом из тёмной темы — и оказывался нечитаемым. Так и вышло: на пергаментной шторке настроек белым по пергаменту (контраст 1.19) оказались подпись «Повернуть видео», блок «Оформление», переключатель языка и «Дополнительно». Поэтому палитра задаётся ТОКЕНАМИ в трёх областях. Тогда всё, что база добавит впредь, наследует тему само, без правок здесь. Раскладка областей: • гостевые экраны и операторский дашборд — пергамент; • экран звонка — тёплый тёмный кабинет; • бумажные панели ВНУТРИ звонка (шторка настроек, панель людей и чата) — снова пергамент: это листы бумаги поверх тёмного кабинета, поэтому им нужна своя область токенов, вложенная в звонок. Правила ниже с конкретными цветами остаются как были: они бьют токены по специфичности и продолжают работать. Токены закрывают всё остальное. */ /* ── Пергамент: гостевые экраны и операторский дашборд ─────────────────── */ html.kolya, html.kolya-operator, body.pre-join, html.kolya-call .sidenav, html.kolya-call #left-sidebar{ --bg:#F2EBDB; --surface:#FBF6EA; --surface-2:#EFE6D2; --surface-3:#E6DCC4; --text:#2A251E; --text-2:#57503F; --text-3:#6D6353; --border:rgba(42,37,30,.22); --divider:rgba(42,37,30,.14); --accent:#A6392E; --accent-hover:#8E2E24; --accent-contrast:#F2EBDB; --accent-soft:rgba(166,57,46,.14); --hover:rgba(42,37,30,.06); --hover-strong:rgba(42,37,30,.12); --focus-ring:rgba(166,57,46,.55); --dock-bg:rgba(42,37,30,.06); --edge-highlight:rgba(42,37,30,.08); --contextualMenuBg:#FBF6EA; --contextualSubMenuBg:#FBF6EA; --contextualMenuText:#2A251E; --contextualHover:#EFE6D2; --contextualSeperator:rgba(42,37,30,.14); --contextualOverflowIcon:#6D6353; } /* ── Тёплый тёмный кабинет: экран звонка ────────────────────────────────── Не наследует пергамент: сцена с видео живёт на тёмном, иначе картинка висит белым пятном. Бумажные панели внутри звонка перебивают это селектором выше — он специфичнее (html.kolya-call .sidenav). */ html.kolya-call{ --bg:#141009; --surface:#1A1712; --surface-2:#221D16; --surface-3:#2A241B; --text:#F2EBDB; --text-2:#C9BFA8; --text-3:#9A8F7A; --border:rgba(242,235,219,.18); --divider:rgba(242,235,219,.12); --accent:#A6392E; --accent-hover:#B5524F; --accent-contrast:#F2EBDB; --accent-soft:rgba(166,57,46,.22); --hover:rgba(242,235,219,.07); --hover-strong:rgba(242,235,219,.14); --focus-ring:rgba(242,235,219,.5); } /* ── Выбор оформления прибит темой, поэтому контрол убран ───────────────── Токены выше задают палитру в обеих областях независимо от того, что выбрано в «Оформление», — значит светлое/тёмное/авто ничего не меняют. Контрол, который ничего не делает, хуже отсутствующего: убираем его тем же приёмом, каким тема уже убирает EN/RU с гостевых экранов. Вернуть — удалить это правило. */ html.kolya-call #settings-theme{display:none} /* ── Шрифты (сабсеты latin+cyrillic, self-hosted) ──────────────────────── Семейства переименованы с префиксом KT, чтобы @font-face 'Inter' не перехватил системный Inter из стека тёмной темы Oryn внутри звонка. */ @font-face{font-family:'KT Garamond';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/eb-garamond-500-cyrillic.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'KT Garamond';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/eb-garamond-500-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'KT Inter';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-500-cyrillic.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'KT Inter';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-500-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'KT Spectral';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/spectral-400i-cyrillic.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'KT Spectral';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/spectral-400i-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'KT Spectral';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/spectral-400-cyrillic.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'KT Spectral';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/spectral-400-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* ── Анимации орнаментов (рисующиеся штрихи, как на сайте) ─────────────── */ @keyframes ktDraw{to{stroke-dashoffset:0}} @keyframes ktFade{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion: reduce){ html.kolya *{animation-duration:.01ms !important;animation-delay:0ms !important} } /* ── Скрытие инжектированных элементов вне темы ────────────────────────── */ /* Шапка-«свиток» и колофон нужны и на операторском дашборде (kolya-operator), а вот декор карточки входа (орнамент/заголовок/подпись/компас) там лишний — его глушим отдельно в блоке html.kolya-operator ниже. */ html:not(.kolya):not(.kolya-operator) .kt-only{display:none !important} /* ── Полотно: пергамент + бумажные текстуры ────────────────────────────── */ /* Фон и на самом html: иначе канвас (оверскролл-«отбой», полоса за краем страницы) остаётся тёмным — body-фон туда не пробивается, у html в тёмной теме Oryn свой фон. */ html.kolya,html.kolya-operator{background:#F2EBDB} html.kolya body, html.kolya-operator body{ background:#F2EBDB; color:#2A251E; font-family:'KT Spectral',Georgia,serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } html.kolya body::before, html.kolya-operator body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.21;background-image:url("paper-grain.png");background-size:240px} html.kolya body::after, html.kolya-operator body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.22;mix-blend-mode:multiply;background-image:url("paper-mottle.png");background-size:900px} html.kolya ::selection, html.kolya-operator ::selection{background:#2A251E;color:#F2EBDB} html.kolya input::placeholder, html.kolya-operator input::placeholder{color:#9a8f7a} /* Пергамент с ПЕРВОГО кадра, без тёмного мелькания. theme.css грузится в последним, а `body.pre-join` есть уже в исходном HTML — поэтому правила ниже применяются сразу при парсинге, НЕ дожидаясь theme.js с классом .kolya. Иначе на долю секунды видно тёмный загрузчик #app-loading / фон Oryn (у body ещё и bgcolor="#0B0E13"). Звонок снимает pre-join → там остаётся тёмная сцена, дашборд/гостевые — пергамент. */ body.pre-join{background:#F2EBDB} /* html { background: var(--bg) } in common.css paints the viewport dark before body content renders (body height < viewport). :has() matches from the first parse, before theme.js adds .kolya, so the root element gets parchment immediately. In a call, pre-join is removed → html falls back to common.css dark. */ html:has(body.pre-join){background:#F2EBDB} body.pre-join #app-loading{background:#F2EBDB} /* .login-container несёт свой var(--bg) (galene.css) и лежит ПОВЕРХ пергаментного body, поэтому в окне до того, как theme.js навесит .kolya, виден чёрный прямоугольник во весь экран. Красим его пергаментом уже с первого кадра, пока класс-скоуп ещё не проставлен; как только theme.js классифицирует экран (.kolya / .kolya-operator), правило гаснет и действуют штатные (гость -> пергамент строкой ниже, оператор -> тёмный). Тот же идиом :not(.kolya):not(.kolya-operator), что и у .kt-only выше. */ html:not(.kolya):not(.kolya-operator) body.pre-join .login-container{background:#F2EBDB} body.pre-join #app-loading .app-spinner{border-color:rgba(42,37,30,.25);border-top-color:#2A251E} /* ── Шапка-«свиток» (инжектируется theme.js) ─────────────────────────── Обёртка несёт тень через drop-shadow — она повторяет рваный контур маски; сама маска (кромка 1920px) лежит на .kt-nav. */ .kt-nav-wrap{position:fixed;top:0;left:0;right:0;z-index:50;filter:drop-shadow(0 7px 9px rgba(42,37,30,.30))} .kt-nav{ background:#F2EBDB; padding-bottom:10px; -webkit-mask:linear-gradient(#000,#000) 0 0/100% calc(100% - 9px) no-repeat, url("edge-bottom.svg") left bottom/1920px 10px repeat-x; mask:linear-gradient(#000,#000) 0 0/100% calc(100% - 9px) no-repeat, url("edge-bottom.svg") left bottom/1920px 10px repeat-x; } .kt-nav-inner{max-width:1140px;margin:0 auto;padding:13px clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:18px} .kt-brand{position:relative;display:inline-block;text-decoration:none;font-family:'KT Garamond',serif;font-weight:500;font-size:1.06rem;letter-spacing:.22em;text-transform:uppercase;color:#2A251E;transition:color .15s ease} .kt-brand:hover{color:#A6392E} .kt-brand svg{position:absolute;left:-4px;bottom:-4px;width:20px;height:9px;overflow:visible;pointer-events:none} .kt-brand svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:ktDraw 1.1s cubic-bezier(0.5,0,0.2,1) 0.45s forwards} /* ── Контейнеры логина и ожидания ──────────────────────────────────────── */ /* Красим сам контейнер, а не полагаемся на просвет body: между ними лежат обёртки тёмной темы Oryn (#main/.container с var(--bg)). */ html.kolya body.pre-join .login-container{ background:#F2EBDB; padding-top:70px; /* под фиксированной шапкой */ } html.kolya body.pre-join .login-container::after{content:none} html.kolya .login-box{ width:100%; max-width:420px; background:transparent; border:none; box-shadow:none; border-radius:0; align-self:center; margin:16px auto; padding:1em; height:auto; text-align:center; } #lobby-waiting .login-box{max-width:460px} /* Шапка логина не нужна: лого Oryn заменяет бренд в шапке-«свитке», а EN/RU-переключатель убран — консультации только на русском (theme.js принудительно ставит ru). */ html.kolya .login-top{display:none} /* ── Орнамент, заголовок, компас (инжектируются theme.js) ──────────────── */ .kt-ornament{display:block;margin:0 auto 20px;overflow:visible} .kt-ornament .kt-line{stroke-dasharray:88;stroke-dashoffset:88;animation:ktDraw 1.2s ease-out .1s forwards} .kt-ornament .kt-diamond{stroke-dasharray:52;stroke-dashoffset:52;animation:ktDraw 1.2s ease-out .35s forwards} html.kolya .kt-title{font-family:'KT Garamond',serif;font-weight:500;font-size:clamp(1.9rem,4.6vw,2.6rem);line-height:1.1;margin:0 0 28px;text-wrap:balance;color:#2A251E} .kt-compass{display:block;margin:0 auto 18px;overflow:visible} .kt-compass .kt-d1{stroke-dasharray:100;stroke-dashoffset:100;animation:ktDraw 2.2s ease-out 0s forwards} .kt-compass .kt-d2{stroke-dasharray:100;stroke-dashoffset:100;animation:ktDraw 2.2s ease-out .3s forwards} .kt-compass .kt-d3{stroke-dasharray:100;stroke-dashoffset:100;animation:ktDraw 2s ease-out .6s forwards} .kt-compass .kt-d4{stroke-dasharray:100;stroke-dashoffset:100;animation:ktDraw 2.8s ease-out .9s forwards} .kt-compass .kt-d5{stroke-dasharray:100;stroke-dashoffset:100;animation:ktDraw 2s ease-out 1.2s forwards} .kt-compass .kt-f1{opacity:0;animation:ktFade 1.6s ease-out 1.8s forwards} .kt-compass .kt-d6{stroke-dasharray:100;stroke-dashoffset:100;animation:ktDraw 2s ease-out 1.5s forwards} .kt-compass .kt-f2{opacity:0;animation:ktFade 1.6s ease-out 2.1s forwards} .kt-compass .kt-d7{stroke-dasharray:100;stroke-dashoffset:100;animation:ktDraw 1.2s ease-out 2.4s forwards} .kt-compass .kt-f3{opacity:0;animation:ktFade 1s ease-out 2.7s forwards} .kt-compass .kt-d8{stroke-dasharray:100;stroke-dashoffset:100;animation:ktDraw 1s ease-out 2.9s forwards} /* ── Форма ─────────────────────────────────────────────────────────────── */ html.kolya .loginform{text-align:left;display:flex;flex-direction:column;gap:14px} /* Метки полей убраны внутрь полей (плейсхолдеры, см. theme.js). Только у имени и пароля: label чекбокса «запомнить» — не трогать. */ html.kolya #userform label, html.kolya #passwordform label{display:none} /* Поле имени — «строка для письма»: без рамки, только линия снизу */ html.kolya .form-control, html.kolya input#username, html.kolya input#password{ width:100%;padding:13px 14px; font-family:'KT Spectral',Georgia,serif;font-size:1.15rem;text-align:center; color:#2A251E;background:transparent; border:none;border-bottom:1px solid rgba(42,37,30,.5); border-radius:0;outline:none;box-shadow:none; transition:border-color .18s ease,box-shadow .18s ease; } html.kolya .form-control:focus{border-bottom-color:#A6392E;box-shadow:0 1px 0 #A6392E} html.kolya input::placeholder{font-style:italic} /* Кнопка-CTA: киноварь, жёсткая тень при наведении — как «Постучаться» */ html.kolya .btn-blue, html.kolya input.btn-blue, html.kolya button.btn-blue{ border:1px solid #A6392E;background:#A6392E;color:#F2EBDB; font-family:'KT Inter',system-ui,sans-serif;font-weight:500; font-size:.92rem;letter-spacing:.06em;text-transform:uppercase; padding:16px 32px;border-radius:0;cursor:pointer; box-shadow:none;transition:all .18s ease;width:100%; } html.kolya .btn-blue:hover{background:#8E2E24;box-shadow:5px 5px 0 #2A251E;transform:translate(-3px,-3px)} html.kolya .connect{margin-top:4px} /* у galene.css есть правило по id — перебиваем его габариты CTA */ html.kolya #connectbutton{padding:16px 32px;margin-top:4px} /* Служебная строка «приватная комната» заменена нашей подписью под формой */ html.kolya #lobby-note{display:none} html.kolya .kt-hint{font-family:'KT Spectral',serif;font-style:italic;font-size:.96rem;line-height:1.6;color:#6d6353;margin:18px auto 0;max-width:360px} /* «Войти как оператор» гостям не показываем: потайная дверь — клик по киноварному ромбику орнамента (хит-зона .kt-opdoor, см. theme.js). */ html.kolya #operator-login{display:none} .kt-ornament .kt-opdoor{pointer-events:all;cursor:pointer} /* Ссылки-действия («другие данные» и т.п.) — чернильные, как на сайте */ html.kolya #operator-login a, html.kolya .rejoin-other a{ color:#2A251E;text-decoration:none; border-bottom:1px solid rgba(166,57,46,.45);padding-bottom:2px; transition:color .15s ease,border-color .15s ease; } html.kolya #operator-login a:hover, html.kolya .rejoin-other a:hover{color:#A6392E;border-color:#A6392E} html.kolya .remember-label{color:#57503f;font-size:.92rem} /* ── Проверка камеры и микрофона ───────────────────────────────────────── */ html.kolya .precheck{border-top:none;padding-top:14px;margin-top:6px} html.kolya .precheck-hint{font-family:'KT Inter',system-ui,sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#57503f} html.kolya .precheck-toggle{ background:#FBF6EA;border:1px solid #2A251E;border-radius:0;color:#57503f; transition:all .18s ease;box-shadow:none; } html.kolya .precheck-toggle:hover{border-color:#A6392E;color:#A6392E} html.kolya .precheck-toggle[aria-pressed="true"]{background:#2A251E;border-color:#2A251E;color:#F2EBDB} html.kolya .precheck-error{color:#A6392E} html.kolya .precheck-video{border:1px solid #2A251E;border-radius:0} html.kolya .select{ background:#FBF6EA;color:#2A251E;border:1px solid rgba(42,37,30,.45); border-radius:0;font-family:'KT Spectral',Georgia,serif; } /* ── Комната ожидания ──────────────────────────────────────────────────── */ html.kolya #lobby-waiting h2{ font-family:'KT Garamond',serif;font-weight:500; font-size:clamp(1.9rem,4.6vw,2.6rem);line-height:1.1; margin:0 0 18px;text-wrap:balance;color:#2A251E; } html.kolya #lobby-waiting-text{ font-family:'KT Spectral',Georgia,serif; font-size:clamp(1.05rem,2.2vw,1.15rem);line-height:1.7;margin:0; text-wrap:pretty;color:#2A251E; } /* ── Сообщения об ошибках ──────────────────────────────────────────────── */ html.kolya #errormessage{color:#A6392E} /* ── Колофон (инжектируется theme.js) ──────────────────────────────────── */ html.kolya .kt-colophon{ position:fixed;left:0;right:0;bottom:0;z-index:45; padding:10px clamp(20px,4vw,48px) 14px;text-align:center;pointer-events:none; font-family:'KT Spectral',serif;font-style:italic;font-size:.88rem;color:#6d6353; } @media (max-height:560px){html.kolya .kt-colophon{display:none}} /* ═══════════════════════════════════════════════════════════════════════ ТЕМА ЗВОНКА — html.kolya-call ═══════════════════════════════════════════════════════════════════════ Re-skin существующего тёмного Oryn-звонка в тёплый «кабинет» из макета design-system/oryn-call-mockup.html. Структуру Oryn НЕ трогаем — она уже ровно та, что в макете: круглый док управления снизу по центру, лок E2EE слева сверху, настройки — выезжающая панель. Меняем только палитру и материалы. theme.js вешает `kolya-call` на , когда идёт реальный звонок (не pre-join и #main показан); гостевые экраны — по-прежнему `html.kolya`, они несовместимы (взаимоисключающие состояния). Токены тёмной темы (var(--surface) и пр.) НЕ переопределяем: слишком широкий охват (диалоги, контекст-меню, тосты — их в макете не было). Вместо этого — точечные правила по тем же поверхностям, что и в макете: сцена, док, сайдбар «люди+чат», настройки. Специфичность `html.kolya-call` + исходный селектор всегда бьёт правило тёмной темы. ═══════════════════════════════════════════════════════════════════════ */ /* ── Сцена: тёплый тёмный кабинет (видео на пергаменте не живёт) ────────── */ html.kolya-call .app{background:#141009} html.kolya-call .video-container{ background:radial-gradient(90% 70% at 50% -6%,#26211a 0%,#1a1814 52%,#120f08 100%); } html.kolya-call .peer{background:#26221b;border:1px solid rgba(242,235,210,.10);border-radius:5px} html.kolya-call .peer-active{ border-color:rgba(184,145,47,.85); box-shadow:0 0 0 2px rgba(184,145,47,.85),0 0 26px rgba(184,145,47,.16); } /* Лок E2EE слева сверху — приглушённый тёплый вместо синего */ html.kolya-call #e2ee-indicator{color:rgba(239,230,210,.62)} html.kolya-call #e2ee-indicator i{color:rgba(184,145,47,.85)} /* ── Док управления: убираем сине-серую «пилюлю», оставляем круглые кнопки тёплого тёмного стекла со светлыми контрастными значками ────────────── */ html.kolya-call .nav-menu{ background:none;border:none;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; /* Док должен появляться СРАЗУ размытым. У .nav-menu базовый opacity-переход (fade-in при сворачивании панелей на входе), а backdrop-filter кнопок не рендерится, пока контейнер в середине opacity-перехода — поэтому стекло «доезжало» через миг. Убираем переход: стекло с первого кадра. */ transition:none; } html.kolya-call .nav-menu .nav-button, html.kolya-call .nav-menu #sidebarCollapse{ background:rgba(18,15,10,.5);border:1px solid rgba(242,235,210,.16);color:#EFE6D2; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } html.kolya-call .nav-menu .nav-button:hover, html.kolya-call .nav-menu #sidebarCollapse:hover{ background:rgba(48,40,30,.72);border-color:rgba(242,235,210,.34);color:#F2EBDB; } html.kolya-call .nav-menu #sidebarCollapse .panel-toggle-icon{color:inherit} /* Выключенный микрофон / камера — киноварная заливка: сразу видно, что тебя не слышно / не видно. Значок светлый (в тёмной теме он тут синел/краснел). */ html.kolya-call #mutebutton.muted, html.kolya-call #mutebutton.muted:hover, html.kolya-call .nav-cam:not(.nav-cam-on), html.kolya-call .nav-cam:not(.nav-cam-on):hover{ background:#A6392E;border-color:#A6392E;color:#F2EBDB; } html.kolya-call #mutebutton.muted:hover, html.kolya-call .nav-cam:not(.nav-cam-on):hover{background:#8E2E24;border-color:#8E2E24} /* Живой микрофон / камера — светлый значок на тёмном стекле (не синий) */ html.kolya-call #mutebutton:not(.muted), html.kolya-call #mutebutton:not(.muted) label, html.kolya-call #mutebutton:not(.muted):hover, html.kolya-call #mutebutton:not(.muted) label:hover, html.kolya-call .nav-cam.nav-cam-on, html.kolya-call .nav-cam.nav-cam-on label, html.kolya-call .nav-cam.nav-cam-on:hover{color:#EFE6D2} /* «Завершить» — сплошная киноварь вместо красно-оранжевого градиента */ html.kolya-call .nav-leave{ background:#A6392E !important;border:1px solid #A6392E !important;color:#F2EBDB !important; } html.kolya-call .nav-leave:hover{background:#8E2E24 !important;filter:none} html.kolya-call .nav-leave::before{background:rgba(242,235,210,.22)} /* Значок «люди+чат» на кнопке дока. Пузырёк-облачко (fa-comment-dots) виден всегда — это часть иконки, не уведомление, поэтому красим его в спокойное золото (тот же тон, что лок E2EE), а не в киноварь. А вот точка-алерт (непрочитанное / новый стук в лобби, пока панель закрыта) — реальный сигнал «обрати внимание», её оставляем киноварной. */ html.kolya-call .panel-toggle-badge{color:rgba(184,145,47,.85)} html.kolya-call .panel-toggle-dot{background:#A6392E;box-shadow:0 0 6px 1px rgba(166,57,46,.7)} /* ── Левая панель: люди + чат как пергаментная карточка ─────────────────── */ html.kolya-call #left-sidebar{background:#F2EBDB;border-right:1px solid #2A251E} html.kolya-call .users-header{background:#F2EBDB;border-bottom:1px solid rgba(42,37,30,.18)} html.kolya-call .header-title, html.kolya-call #title{color:#2A251E;font-family:'KT Garamond',Georgia,serif;font-weight:500} html.kolya-call .panel-close{color:#57503f} html.kolya-call .panel-close:hover{color:#A6392E;background:rgba(42,37,30,.06)} html.kolya-call #users{background:#F2EBDB} html.kolya-call #users .user-p{border-bottom:none;color:#2A251E} html.kolya-call #users > div:hover{background:rgba(42,37,30,.05)} html.kolya-call #users .user-p::after{color:#6d6353} html.kolya-call .up-name{color:#2A251E} html.kolya-call .up-dot{border-color:#F2EBDB} /* аватары — тёплая палитра вместо сине-фиолетовых градиентов */ html.kolya-call .up-avatar{color:#F2EBDB;background:#2A251E} html.kolya-call .up-avatar.av-1{background:#A6392E} html.kolya-call .up-avatar.av-2{background:#B8912F} html.kolya-call .up-avatar.av-3{background:#57503f} html.kolya-call .up-avatar.av-4{background:#6d6353} /* Плитка участника с выключенной камерой (avatar+имя, база рисует .peer-card) — тёплая монограмма под сцену звонка, те же цвета, что аватары в списке. */ html.kolya-call .peer-card-name{color:#EFE6D2;font-family:'KT Garamond',Georgia,serif;font-weight:500} html.kolya-call .peer-card-avatar{color:#F2EBDB;font-family:'KT Garamond',Georgia,serif;background:#2A251E} html.kolya-call .peer-card-avatar.av-0{background:#2A251E} html.kolya-call .peer-card-avatar.av-1{background:#A6392E} html.kolya-call .peer-card-avatar.av-2{background:#B8912F} html.kolya-call .peer-card-avatar.av-3{background:#57503f} html.kolya-call .peer-card-avatar.av-4{background:#6d6353} /* стук в дверь — единственная карточка-акцент в списке */ html.kolya-call #users .knock-p{background:#EFE6D2;border-left:3px solid #A6392E;color:#2A251E} html.kolya-call #users .knock-p .knock-admit{background:#A6392E} html.kolya-call #users .knock-p .knock-admit:hover{background:#8E2E24} html.kolya-call #users .knock-p .knock-deny{background:transparent;border:1px solid rgba(42,37,30,.32);color:#57503f} html.kolya-call #users .knock-p .knock-deny:hover{border-color:#A6392E;color:#A6392E} /* ── Чат ────────────────────────────────────────────────────────────────── */ /* #chat сам прозрачный (#left-sidebar #chat{background:transparent} в galene.css с бóльшей специфичностью) — сквозь него виден пергамент сайдбара, отдельно красить не нужно. Красим только полосу ввода. */ html.kolya-call .reply{background:#F2EBDB;border-top:1px solid rgba(42,37,30,.18)} html.kolya-call .reply textarea, html.kolya-call .form-reply{ background:#FBF6EA;color:#2A251E;border:1px solid rgba(42,37,30,.32);border-radius:3px; } html.kolya-call .reply textarea:focus, html.kolya-call .form-reply:focus{border-color:#A6392E;box-shadow:0 0 0 2px rgba(166,57,46,.12)} html.kolya-call .form-reply::placeholder{color:#9a8f7a} /* Кнопка отправки — сплошная киноварь с бумажной стрелкой (была тёмная .btn-default с красной стрелкой — читалось как «красное на чёрном»). */ html.kolya-call #inputbutton{background:#A6392E;border-color:#A6392E;color:#F2EBDB} html.kolya-call #inputbutton:hover{background:#8E2E24;border-color:#8E2E24;color:#F2EBDB} /* сообщения: входящие — бумажные пузыри, свои — чуть теплее, системные — тихие */ html.kolya-call .message{background:#FBF6EA;box-shadow:none;border-radius:12px} html.kolya-call .message-content{color:#2A251E} html.kolya-call .message-header{color:#57503f} html.kolya-call .message-time{color:#6d6353} html.kolya-call .message-sender{background:#EFE6D2;border:1px solid rgba(42,37,30,.18)} html.kolya-call .message-private{background:#EFE6D2;border-left:2px solid #A6392E} html.kolya-call .message-system{background:transparent;color:#6d6353} /* ── Настройки (выезжающая панель) — пергамент ─────────────────────────── */ html.kolya-call .sidenav{background:#F2EBDB;box-shadow:-14px 0 40px rgba(42,37,30,.28)} /* Шапка панели: бренд Oryn убираем, вместо него «Настройки» (span инжектит theme.js, текст из i18n-ключа settings.title). */ html.kolya-call .sidenav-brand{display:none} html:not(.kolya-call) .kt-settings-title{display:none} html.kolya-call .kt-settings-title{ flex:1;font-family:'KT Garamond',Georgia,serif;font-weight:500; font-size:1.16rem;color:#2A251E; } html.kolya-call .sidenav-header{border-bottom:1px solid rgba(42,37,30,.18)} html.kolya-call #clodeside{color:#57503f} html.kolya-call #clodeside:hover{color:#A6392E} html.kolya-call .sidenav-content{background:#F2EBDB;border-top:1px solid rgba(42,37,30,.18)} html.kolya-call .sidenav-header h2, html.kolya-call .sidenav-content h2{color:#2A251E;font-family:'KT Garamond',Georgia,serif;font-weight:500} html.kolya-call .sidenav a{color:#57503f} html.kolya-call .sidenav a:hover{color:#A6392E} html.kolya-call .sidenav-content form:has(> input[type="checkbox"]) label{color:#2A251E} html.kolya-call .sidenav-label, html.kolya-call .sidenav-label-first{color:#57503f} html.kolya-call .sidenav .select, html.kolya-call .sidenav .form-control, html.kolya-call .sidenav .select-inline{ background:#FBF6EA;color:#2A251E;border:1px solid rgba(42,37,30,.32);border-radius:3px; } html.kolya-call .sidenav legend, html.kolya-call .sidenav-content legend{color:#57503f} /* тумблеры on/off — киноварь во включённом состоянии */ html.kolya-call .sidenav-content input[type="checkbox"]{background:#E6DCC4;border-color:rgba(42,37,30,.3)} html.kolya-call .sidenav-content input[type="checkbox"]::after{background:#9a8f7a} html.kolya-call .sidenav-content input[type="checkbox"]:checked{background:#A6392E;border-color:#A6392E} html.kolya-call .sidenav-content input[type="checkbox"]:checked::after{background:#F2EBDB} /* ── Шторка: одна форма для всех контролов ──────────────────────────────── В панели сошлись сразу три формы: поля-селекты со скруглением 3px, круглые кнопки поворота и пилюля переключателя языка. На пергаменте разнобой виден сильнее, чем на тёмном, где всё тонет в фоне. Приводим к форме поля — она здесь основная, её носят все семь селектов. */ html.kolya-call .rotate-button{ width:38px;height:38px;border-radius:3px; background:#FBF6EA;border:1px solid rgba(42,37,30,.32); } html.kolya-call .rotate-button:hover{background:#EFE6D2} html.kolya-call .sidenav .pref-toggle{ border-radius:3px;border-color:rgba(42,37,30,.32);background:#FBF6EA; } html.kolya-call .sidenav .pref-toggle button{color:#57503f;padding:8px 10px} html.kolya-call .sidenav .pref-toggle button:hover{color:#2A251E} /* «Выбрано» тема уже говорит заливкой чернилами — так помечено нажатое состояние проверки устройств на гостевом экране. Тот же приём вместо розоватой подложки, которая на пергаменте выглядит случайной. */ html.kolya-call .sidenav .pref-toggle button.active{background:#2A251E;color:#F2EBDB} /* Подпись строки поворота была на ступень крупнее и темнее соседних: в базе это «строка-действие» (подпись слева, контрол справа), а стоит она среди подписей полей. Выравниваем с соседями — рядом с «Камера» и «Микрофон» она читалась как заголовок, которым не является. */ html.kolya-call #settings-rotate label{font-size:var(--fs-md);color:#57503f} /* профиль в панели */ html.kolya-call .profile-logo{background:#2A251E;color:#F2EBDB} html.kolya-call .profile-info{color:#57503f} /* Роль рядом с именем. Золото #B8912F на пергаменте давало контраст 2.48 -- ниже порога читаемости; тот же оттенок, уведённый в тень. */ html.kolya-call #permspan{color:#7A5E1A} /* ── Тосты и баннеры-уведомления ──────────────────────────────────────── Действуют на всех трёх скоупах (гость kolya, кабинет kolya-operator, звонок kolya-call) — тосты выскакивают в каждом. toastify.css грузится ПОСЛЕ galene.css, и тёмная тема бьёт его через `body .toastify.toastify`; поэтому дублируем класс (`.toastify.toastify`) + класс-скоуп, чтобы выиграть специфичностью без !important. Пергаментная карточка, акцент слева по типу: киноварь — ошибка, золото — предупреждение, чернила — инфо. */ html.kolya .toastify.toastify, html.kolya-operator .toastify.toastify, html.kolya-call .toastify.toastify{ background:#FBF6EA;color:#2A251E; border:1px solid rgba(42,37,30,.3);border-left-width:3px; border-radius:0;box-shadow:0 10px 26px rgba(42,37,30,.22); font-family:'KT Spectral',Georgia,serif; } html.kolya .toastify.toastify.error, html.kolya-operator .toastify.toastify.error, html.kolya-call .toastify.toastify.error{border-left-color:#A6392E} html.kolya .toastify.toastify.warning, html.kolya-operator .toastify.toastify.warning, html.kolya-call .toastify.toastify.warning{border-left-color:#B8912F} html.kolya .toastify.toastify.info, html.kolya-operator .toastify.toastify.info, html.kolya-call .toastify.toastify.info{border-left-color:#2A251E} html.kolya .toastify.toastify .toast-close, html.kolya-operator .toastify.toastify .toast-close, html.kolya-call .toastify.toastify .toast-close{color:#57503f;opacity:.85} /* Кнопки Admit/Deny прямо на тост-карточке стука (новый displayKnockToast в основной версии, ветка docs/actualize-public-docs). Тост выскакивает и в звонке (стук в лобби), и на дашборде оператора (стук в детскую комнату). База красит кнопки в зелёный/красный (#2E9E5B / #B5524F) — уводим в палитру: «Впустить» киноварью, «Не сейчас» контуром, как карточка стука в списке участников. `.knock-toast-actions` есть только у тоста (в панели участников те же кнопки лежат прямо в .knock-p), поэтому не заденем её. */ html.kolya-operator .knock-toast-actions .knock-admit, html.kolya-call .knock-toast-actions .knock-admit{background:#A6392E;color:#F2EBDB} html.kolya-operator .knock-toast-actions .knock-admit:hover, html.kolya-call .knock-toast-actions .knock-admit:hover{background:#8E2E24} html.kolya-operator .knock-toast-actions .knock-deny, html.kolya-call .knock-toast-actions .knock-deny{background:transparent;border:1px solid rgba(42,37,30,.32);color:#57503f} html.kolya-operator .knock-toast-actions .knock-deny:hover, html.kolya-call .knock-toast-actions .knock-deny:hover{border-color:#A6392E;color:#A6392E} /* Баннер переподключения — золотой «подождите», не синий */ html.kolya .reconnect-banner, html.kolya-operator .reconnect-banner, html.kolya-call .reconnect-banner{ background:#F2EBDB;border:1px solid #B8912F;color:#2A251E; box-shadow:0 6px 24px rgba(42,37,30,.28); font-family:'KT Inter',system-ui,sans-serif; } html.kolya .reconnect-spinner, html.kolya-operator .reconnect-spinner, html.kolya-call .reconnect-spinner{border-color:rgba(42,37,30,.22);border-top-color:#B8912F} /* Полноэкранные модалки-ошибки (E2EE недоступно / браузер не тянет) — пергаментная карточка на тёплом чернильном затемнении. */ html.kolya .e2ee-block-overlay, html.kolya-operator .e2ee-block-overlay, html.kolya-call .e2ee-block-overlay, html.kolya .browser-unsupported-overlay, html.kolya-operator .browser-unsupported-overlay, html.kolya-call .browser-unsupported-overlay{background:rgba(42,37,30,.74)} html.kolya .e2ee-block-card, html.kolya-operator .e2ee-block-card, html.kolya-call .e2ee-block-card, html.kolya .browser-unsupported-card, html.kolya-operator .browser-unsupported-card, html.kolya-call .browser-unsupported-card{ background:#F2EBDB;color:#2A251E;border-radius:0; box-shadow:0 18px 50px rgba(42,37,30,.4); font-family:'KT Spectral',Georgia,serif; } html.kolya .e2ee-block-card, html.kolya-operator .e2ee-block-card, html.kolya-call .e2ee-block-card{border:1px solid #A6392E} html.kolya .e2ee-block-card i, html.kolya-operator .e2ee-block-card i, html.kolya-call .e2ee-block-card i{color:#A6392E} html.kolya .browser-unsupported-card, html.kolya-operator .browser-unsupported-card, html.kolya-call .browser-unsupported-card{border:1px solid #B8912F} html.kolya .browser-unsupported-card i, html.kolya-operator .browser-unsupported-card i, html.kolya-call .browser-unsupported-card i{color:#B8912F} html.kolya .browser-unsupported-url, html.kolya-operator .browser-unsupported-url, html.kolya-call .browser-unsupported-url{color:#57503f} /* ═══════════════════════════════════════════════════════════════════════ КАБИНЕТ ОПЕРАТОРА — html.kolya-operator ═══════════════════════════════════════════════════════════════════════ Re-skin тёмного операторского дашборда (#operator-room) в пергамент по макету design-system/oryn-operator-mockup.html. Как и звонок — точечные правила по РЕАЛЬНЫМ классам galene.html/operatorRow, токены тёмной темы не переопределяем. theme.js вешает `kolya-operator`, когда body.pre-join И #operator-room виден (у гостя — `kolya`, они взаимоисключающие). Язык — из окна звонка: полный пергамент, монограммные аватары клиентов, хайрлайны вместо рамок, стук в дверь = единственная подсвеченная строка. ═══════════════════════════════════════════════════════════════════════ */ /* Декор гостевой карточки входа на дашборде не нужен (шапка и колофон — из .kt-only — остаются). */ html.kolya-operator .kt-ornament, html.kolya-operator .kt-title, html.kolya-operator .kt-hint, html.kolya-operator .kt-compass{display:none !important} /* Колофон на рабочем экране лишний (бренд уже в шапке), а при внутренней прокрутке дашборда фикс-колофон налезал бы на список. */ html.kolya-operator .kt-colophon{display:none} /* ── Полотно дашборда ──────────────────────────────────────────────────── */ html.kolya-operator .operator-container{background:#F2EBDB;padding-top:70px} html.kolya-operator .operator-box{ width:min(640px,92vw);margin:0 auto; padding:24px clamp(4px,2vw,10px) 56px; background:transparent;border:none;box-shadow:none;border-radius:0; } /* Широкий экран: база раскладывает дашборд в две колонки (левая — проверка устройств и форма новой ссылки, правая — список), поэтому колонка в 640px становится теснотой. Отдаём ей ту же ширину, что и база, — иначе список ссылок жмётся в 236px рядом с формой. Ниже брейкпоинта всё как было. */ @media (min-width:62rem){ html.kolya-operator .operator-box{width:min(1080px,94vw)} } /* ── Заголовок ─────────────────────────────────────────────────────────── */ html.kolya-operator .operator-header{margin-bottom:6px} html.kolya-operator .operator-title{ font-family:'KT Garamond',Georgia,serif;font-weight:500; font-size:clamp(2rem,5vw,2.7rem);line-height:1.08;color:#2A251E;margin:0; } html.kolya-operator .operator-subtitle{ font-family:'KT Spectral',Georgia,serif;font-style:italic; font-size:1.04rem;line-height:1.65;color:#57503f;margin:14px 0 0;max-width:460px; } html.kolya-operator .operator-logout{ border:1px solid rgba(42,37,30,.22);background:transparent;color:#57503f; border-radius:3px;box-shadow:none; font-family:'KT Inter',system-ui,sans-serif;font-size:.76rem;font-weight:500; letter-spacing:.05em;padding:8px 13px;transition:color .15s ease,border-color .15s ease; } html.kolya-operator .operator-logout:hover{border-color:#A6392E;color:#A6392E} /* Разделы: без рамок-филдсетов, только воздух (как в макете) ────────────── */ html.kolya-operator .operator-section, html.kolya-operator .operator-create{border-bottom:none;padding-bottom:0;margin-bottom:0} html.kolya-operator .operator-section{margin-top:40px} html.kolya-operator .operator-section-title{ font-family:'KT Inter',system-ui,sans-serif;font-size:.7rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:#6d6353;margin:0 0 14px; } /* ── Проверка камеры/микрофона (мягкие материалы, не чёрные рамки) ──────── */ html.kolya-operator .precheck-hint{ font-family:'KT Inter',system-ui,sans-serif;font-weight:500;font-size:.72rem; letter-spacing:.1em;text-transform:uppercase;color:#57503f; } html.kolya-operator .precheck-toggle{ background:#FBF6EA;border:1px solid rgba(42,37,30,.22);border-radius:4px; color:#57503f;box-shadow:none;transition:all .16s ease; } html.kolya-operator .precheck-toggle:hover{border-color:#A6392E;color:#A6392E} html.kolya-operator .precheck-toggle[aria-pressed="true"]{ background:#2A251E;border-color:#2A251E;color:#FBF6EA; } html.kolya-operator .precheck-error{color:#A6392E} html.kolya-operator .precheck-preview, html.kolya-operator .precheck-video{border:1px solid rgba(42,37,30,.22);border-radius:4px} html.kolya-operator .select, html.kolya-operator .form-control{ background:#FBF6EA;color:#2A251E;border:1px solid rgba(42,37,30,.22);border-radius:3px; font-family:'KT Inter',system-ui,sans-serif;box-shadow:none; } html.kolya-operator .form-control{font-family:'KT Spectral',Georgia,serif;font-size:.96rem} html.kolya-operator .select:focus, html.kolya-operator .form-control:focus{border-color:#A6392E;outline:none;box-shadow:none} html.kolya-operator .form-control::placeholder{color:#9a8f7a;font-style:italic} /* ── Новая ссылка ──────────────────────────────────────────────────────── */ html.kolya-operator .operator-create{margin-top:38px;gap:2px} html.kolya-operator .operator-advanced-toggle{ font-family:'KT Inter',system-ui,sans-serif;font-size:.84rem;color:#57503f; } html.kolya-operator .operator-advanced-toggle:hover{color:#2A251E} html.kolya-operator .operator-field label{ font-family:'KT Inter',system-ui,sans-serif;font-size:.7rem;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:#57503f; } /* «Создать ссылку» (.btn.btn-blue) — киноварная CTA */ html.kolya-operator .operator-create-btn{ border:1px solid #A6392E;background:#A6392E;color:#F2EBDB; font-family:'KT Inter',system-ui,sans-serif;font-weight:500;font-size:.86rem; letter-spacing:.03em;padding:12px 24px;border-radius:3px;box-shadow:none; transition:background .16s ease,transform .16s ease,box-shadow .16s ease; } html.kolya-operator .operator-create-btn:hover{ background:#8E2E24;border-color:#8E2E24; transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(142,46,36,.9); } /* ── Реестр клиентов: спокойный список-книга ───────────────────────────── */ html.kolya-operator .operator-links{margin-top:44px;gap:0} html.kolya-operator .operator-empty{ font-family:'KT Spectral',Georgia,serif;font-style:italic;color:#6d6353; } /* строка = грид [аватар | тело]; тело (голова/url/мета/действия) — колонка 2 */ html.kolya-operator .operator-link{ display:grid;grid-template-columns:42px 1fr;column-gap:14px;row-gap:9px; align-items:start;background:transparent;border:none;border-radius:6px; padding:16px 6px;transition:background .15s ease; } html.kolya-operator .operator-link + .operator-link{border-top:1px solid rgba(42,37,30,.10)} html.kolya-operator .operator-link:hover{background:rgba(42,37,30,.035)} html.kolya-operator .operator-link > :not(.op-avatar){grid-column:2} html.kolya-operator .op-avatar{ grid-column:1;grid-row:1;width:42px;height:42px;margin-top:2px;border-radius:50%; background:#2A251E;color:#FBF6EA;display:flex;align-items:center;justify-content:center; font-family:'KT Garamond',Georgia,serif;font-size:1.08rem;line-height:1; } html.kolya-operator .operator-link-expired{opacity:.5} html.kolya-operator .operator-link-head{align-items:baseline} html.kolya-operator .operator-link-label{ font-family:'KT Garamond',Georgia,serif;font-style:italic;font-weight:500; font-size:1.14rem;color:#2A251E; } /* бейдж-статус: плоский, с точкой; пилюлю тёмной темы гасим */ html.kolya-operator .operator-badge{ padding:0;border:none;background:none;border-radius:0; font-family:'KT Inter',system-ui,sans-serif;font-size:.72rem;font-weight:500; letter-spacing:.05em;display:inline-flex;align-items:center;gap:7px;white-space:nowrap; } html.kolya-operator .operator-badge::before{content:"";width:7px;height:7px;border-radius:50%;flex:none} html.kolya-operator .operator-badge.empty{color:#6d6353} html.kolya-operator .operator-badge.empty::before{background:transparent;box-shadow:inset 0 0 0 1.5px #6d6353} html.kolya-operator .operator-badge.incall{color:#B8912F;font-weight:600} html.kolya-operator .operator-badge.incall::before{ background:#B8912F;box-shadow:0 0 0 3px rgba(184,145,47,.22); animation:opPulse 2.4s ease-in-out infinite; } html.kolya-operator .operator-badge.knocking{color:#A6392E;font-weight:600} html.kolya-operator .operator-badge.knocking::before{background:#A6392E} @keyframes opPulse{0%,100%{box-shadow:0 0 0 3px rgba(184,145,47,.22)}50%{box-shadow:0 0 0 5px rgba(184,145,47,.05)}} html.kolya-operator .operator-url-input{ background:#FBF6EA;color:#57503f;border:1px solid rgba(42,37,30,.10);border-radius:3px; font-family:'KT Inter',system-ui,sans-serif;font-size:.78rem;padding:7px 10px; } html.kolya-operator .operator-link-meta{ font-family:'KT Inter',system-ui,sans-serif;font-size:.76rem;color:#6d6353; } /* действия: «Войти» — контур, «Копировать»/«Удалить» — призрачные */ html.kolya-operator .operator-join{ border:1px solid #2A251E;background:transparent;color:#2A251E;box-shadow:none; font-family:'KT Inter',system-ui,sans-serif;font-weight:500;font-size:.78rem; letter-spacing:.03em;padding:8px 16px;border-radius:3px;transition:all .15s ease; } html.kolya-operator .operator-join:hover{background:#2A251E;color:#F2EBDB} html.kolya-operator .operator-copy, html.kolya-operator .operator-delete{ border:none;background:transparent;color:#6d6353; font-family:'KT Inter',system-ui,sans-serif;font-size:.78rem;padding:8px 8px; } html.kolya-operator .operator-copy:hover{color:#2A251E;background:transparent;border-color:transparent} html.kolya-operator .operator-delete:hover{color:#A6392E;background:transparent;border-color:transparent} /* «Копировать» — значок «два листка» вместо слова. Текст прячем (font-size:0), значок — СВОЙ файл copy.svg, а не глиф FontAwesome, как было раньше. Шрифты в клиенте сабсетятся до глифов, которые использует сам клиент (contrib/subset-fontawesome.py), а тему сабсеттер не видит: копирования среди них нет ни в regular, ни в solid — кнопка показывала квадратик с кодом F0C5. Любой глиф, взятый «из инстанса», рискует исчезнуть при следующей пересборке сабсета, поэтому тема носит иконку с собой, как уже носит edge-bottom.svg и favicon.svg. Рисуем маской, а не фоном: цвет тогда берётся из currentColor. ВАЖНО: файл должен быть в $themeItems апдейтера, иначе он не доедет на сервер. Галочка «скопировано» остаётся глифом: её использует сам клиент, так что из сабсета она не пропадёт; в этом состоянии маска снимается. Фидбэк «скопировано» — галочка по классу .kt-copied, который вешает theme.js: galene на клик меняет textContent кнопки (мимо ::before), поэтому иконка не сбивается. */ html.kolya-operator .operator-copy{ font-size:0;display:inline-flex;align-items:center;justify-content:center;min-width:34px; } html.kolya-operator .operator-copy::before{ content:"";display:inline-block;width:16px;height:16px; background-color:currentColor; -webkit-mask:url("copy.svg") center/contain no-repeat; mask:url("copy.svg") center/contain no-repeat; } html.kolya-operator .operator-copy.kt-copied::before{ -webkit-mask:none;mask:none;background-color:transparent; width:auto;height:auto; font-family:'Font Awesome 6 Free';font-weight:900;content:"\f00c"; font-size:1rem;line-height:1;color:#B8912F; } /* Стук в дверь — единственная подсвеченная строка (как карточка стука в звонке): тёплый пергамент + киноварный корешок; «Войти» — киноварное. */ html.kolya-operator .operator-link:has(.operator-badge.knocking){ background:#EFE6D2;box-shadow:inset 3px 0 0 #A6392E;border-radius:4px;padding-left:15px; } html.kolya-operator .operator-link:has(.operator-badge.knocking):hover{background:#EFE6D2} html.kolya-operator .operator-link:has(.operator-badge.knocking) .op-avatar{ box-shadow:0 0 0 2px #EFE6D2,0 0 0 4px #A6392E; } html.kolya-operator .operator-link:has(.operator-badge.knocking) .operator-join{ background:#A6392E;border-color:#A6392E;color:#F2EBDB; } html.kolya-operator .operator-link:has(.operator-badge.knocking) .operator-join:hover{ background:#8E2E24;border-color:#8E2E24; } html.kolya-operator .operator-link:has(.operator-badge.incall) .op-avatar{ box-shadow:0 0 0 2px #F2EBDB,0 0 0 4px rgba(184,145,47,.85); }