/* 07-late.css — часть дизайн-системы портала (см. docs/design_system.md). * * ⚠ ПОРЯДОК ПОДКЛЮЧЕНИЯ ЗНАЧИМ. Файлы грузятся по номеру в имени, и поздние * правила перекрывают ранние. Список — в templates/base.html; менять * порядок или вставлять файл в середину нельзя, не проверив каскад. * * Розовая тема, 404, «Спасибо, коллега», «Мои звонки», доступность, тосты, иконки. Идёт последним — здесь уместны точечные переопределения. */ /* ============================================================================ ТЕМА «РОЗОВАЯ» (docs/rose_theme_guide.md) — розовый контент + зелёное меню. Включается классом .theme-rose на . Декоративная, опциональная. ============================================================================ */ html.theme-rose { --bg: #fdf2f6; /* розовый холст */ --surface: #ffffff; /* карточки/панели — белые */ --ink: #3a1526; /* основной текст */ --muted: #a15a79; /* вторичный текст */ --line: #f0cdd9; /* границы — розовые */ --brand: #9c2e5d; /* акцент контента — розовый (ссылки, иконки, активное) */ --brand-light: #fbe3ec; /* розовый тинт (бейджи, аватары-заглушки) */ --brand-lighter: #fdf0f5; /* hover-фон строк */ --brand-deep: #456a2e; /* сайдбар/тёмные плашки — глубокий зелёный: светлый #7fae5a давал 2.4:1 у текста меню */ --brand-mid: #2c4519; /* активный пункт меню — темнее фона сайдбара */ --brand-dark: #7a2348; /* тёмно-розовый — для контентных CTA (btn-deep) */ --accent: #cdeaa6; /* лаймовая плашка логотипа */ --shadow-sm: 0 1px 3px rgba(120, 30, 70, .06); --shadow-md: 0 6px 20px rgba(120, 30, 70, .08); --shadow-lg: 0 14px 40px rgba(120, 30, 70, .16); /* Роли поверхностей (см. :root): сайдбар зелёный, топбар белый, «геройские» плашки — розовые. */ --surface-side: #456a2e; --surface-bar: #ffffff; /* Граница при hover — розовая, иначе на розовом холсте вылезал зелёный кант. */ --line-strong: #e6b3c6; --ok-ink: var(--brand); --hero-grad: linear-gradient(135deg, #8a4f6c 0%, #e79ac0 100%); --hero-grad-page: linear-gradient(150deg, #8a4f6c 0%, #c97ba4 58%, #e79ac0 100%); } /* Меню самодостаточно-зелёное: текст и подписи светлее под зелёный фон. */ html.theme-rose .side-menu a { color: #eef7e3; } html.theme-rose .side-menu a svg { opacity: .9; } html.theme-rose .side-menu .side-title { color: #d3ebbe; } /* Плашки под знаком больше нет: там вектор логотипа, и светлая подложка #cdeaa6 съедала его белые углы. Фон rose-сайдбара #456a2e даёт 6.26:1 с белым — знак читается без подложки. */ /* активный пункт (var(--brand-mid)) и hover (rgba white) уже зелёные/нейтральные */ /* Контентные CTA (btn-deep) — тёмно-розовые, а не зелёные из сайдбара. */ html.theme-rose .btn-deep { background: #7a2348; border-color: #7a2348; color: #fff; } html.theme-rose .btn-deep:hover, html.theme-rose .btn-deep:focus { background: #5f1b39; border-color: #5f1b39; } /* Hero-градиенты — одним токеном на все плашки сразу. Раньше здесь перечислялись восемь селекторов, и новый компонент с градиентом из темы выпадал. */ /* Счётчик уведомлений — розовый. */ html.theme-rose .notif-count, html.theme-rose .app-topbar .notif-count { background: #ff5fa2; } /* Свотч «розовой» в пикере тем профиля. */ .theme-sw-rose { background: linear-gradient(120deg, #f7c9dd, #e79ac0); position: relative; } /* свотч повторяет реальные цвета темы: полоска слева — сайдбар (--brand-deep) */ .theme-sw-rose::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 14px; border-radius: 4px; background: #456a2e; } /* ============================================================================ Страница «404 — не найдено» (templates/404.html + _notfound.html) ============================================================================ */ .nf-wrap { max-width: 620px; margin: 0 auto; padding: 60px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; } .nf-code { font-size: 120px; font-weight: 800; line-height: 1; letter-spacing: -2px; color: var(--brand-deep); font-variant-numeric: tabular-nums; } .nf-rule { width: 64px; height: 4px; border-radius: 3px; background: var(--brand); margin: 18px 0 26px; } .nf-title { font-size: var(--fs-2xl); font-weight: 800; color: var(--ink); margin: 0 0 12px; } .nf-text { color: var(--muted); font-size: var(--fs-md); line-height: 1.6; margin: 0 0 26px; max-width: 440px; } .nf-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; } .nf-actions .btn { padding: 11px 22px; } .nf-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .nf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; } .nf-card { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px 18px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: var(--fs-body); transition: border-color .14s, box-shadow .14s, transform .14s; } .nf-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); color: var(--ink); } .nf-card-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-light); color: var(--brand); } .nf-card-ico svg { width: 19px; height: 19px; } .nf-support { margin: 30px 0 0; font-size: var(--fs-sm); color: var(--muted); } .nf-support a { color: var(--brand); font-weight: 600; } @media (max-width: 560px) { .nf-code { font-size: 90px; } .nf-cards { grid-template-columns: 1fr; } } /* ============================================================================ «Спасибо, коллега» — лента благодарностей и блок в карточке сотрудника ============================================================================ */ .thx-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); } .thx-item:last-child { border-bottom: none; } .thx-ava { flex: 0 0 auto; } .thx-ava img, .thx-ava-ph { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; display: block; } .thx-ava-ph { background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; } .thx-body { min-width: 0; flex: 1 1 auto; } .thx-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .thx-to { font-weight: 700; color: var(--ink); text-decoration: none; } .thx-to:hover { color: var(--brand); } .thx-date { font-size: var(--fs-xs); color: var(--muted); font-family: 'IBM Plex Mono', monospace; } .thx-from { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; } .thx-comment { font-size: var(--fs-body); color: var(--ink); margin-top: 5px; line-height: 1.5; } /* Блок в карточке сотрудника */ .thx-row { padding: 10px 0; border-bottom: 1px solid var(--line); } .thx-row:last-child { border-bottom: none; } .thx-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .thx-row-from { font-weight: 700; color: var(--ink); text-decoration: none; font-size: var(--fs-body); } .thx-row-from:hover { color: var(--brand); } /* ============================================================================ Отчёт «Мои звонки» — компактная таблица журнала вызовов ============================================================================ */ /* Итоги строкой чипов вместо крупных плиток — экономит вертикаль. */ .mc-stats { display: flex; flex-wrap: wrap; gap: 8px; } .mc-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px 14px; font-size: var(--fs-sm); color: var(--muted); } .mc-stat b { color: var(--ink); font-size: var(--fs-body); margin-right: 3px; } .mc-stat-ok b { color: var(--brand); } .mc-stat-bad { border-color: var(--danger-line); } .mc-stat-bad b { color: var(--danger); } .mc-table thead th { padding: 0 10px 8px; } .mc-table tbody td { padding: 6px 10px; font-size: var(--fs-sm); } .mc-date { white-space: nowrap; color: var(--muted); font-size: var(--fs-xs); } .mc-time { color: var(--ink); font-weight: 600; font-family: 'IBM Plex Mono', monospace; } .mc-peer { line-height: 1.3; } .mc-num { color: var(--muted); font-size: var(--fs-xs); font-family: 'IBM Plex Mono', monospace; } .mc-dur { color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-xs); white-space: nowrap; } /* Стрелка направления — компактный значок вместо кружка 30px */ .mc-dir { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--fs-sm); line-height: 1; } .mc-dir-in { background: var(--ok-bg); color: var(--ok-ink); } .mc-dir-out { background: var(--info-bg); color: var(--info); } /* Кнопка «перезвонить» в строке */ .mc-call { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; background: var(--surface); border: 1px solid var(--line); color: var(--brand); transition: background .14s, border-color .14s; } .mc-call:hover { background: var(--brand-light); border-color: var(--line-strong); } .mc-call svg { width: 14px; height: 14px; } /* Заголовок панели как ссылка (переход в полный отчёт), цвет наследуется */ .panel-head-link { color: inherit; text-decoration: none; } .panel-head-link:hover { color: var(--brand); text-decoration: underline; } /* Компактная кнопка «Поблагодарить» в шапке виджета на главной */ .thx-mini-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); cursor: pointer; background: var(--brand-light); border: 1px solid var(--line-strong); color: var(--brand); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; transition: background .14s, border-color .14s; } .thx-mini-btn:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; } .thx-mini-btn:disabled { opacity: .5; cursor: not-allowed; } .thx-mini-btn svg { width: 13px; height: 13px; } /* Шапка виджета «Спасибо, коллега»: заголовок + месяц + кнопка «Поблагодарить» + ссылка «весь →» в один ряд не помещаются на телефоне — `.panel` режет лишнее (`overflow: hidden`), и «весь →» срезало краем панели. Общий перенос строки для `.panel-head` — в 05-shell-2026.css (без :has(), см. пометку там). Здесь только своё для этого виджета: без `margin-left:auto` кнопка при переносе легла бы у левого края вместо конца первой строки, а ссылка после неё сама встаёт вправо на новой строке. */ @media (max-width: 575.98px) { .thx-mini-btn { margin-left: 0; } .thx-mini-btn ~ a { margin-left: auto; } } /* Удаление благодарности (модерация, только суперпользователь) */ .thx-del { width: 24px; height: 24px; flex: 0 0 auto; align-self: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: .45; transition: opacity .12s, background .12s, color .12s; } .thx-del:hover, .thx-del:focus-visible { opacity: 1; background: #ffe3e3; color: var(--danger); } .thx-del svg { width: 14px; height: 14px; } html.theme-dark .thx-del:hover { background: #3a2020; } /* дата прижимается влево от кнопки, кнопка — к правому краю строки */ .thx-head .thx-date { margin-left: auto; } /* ============================================================================ ДОСТУПНОСТЬ И ЧИСЛА — общие правила, действуют во всех темах ============================================================================ */ /* Пользователь попросил систему уменьшить движение — уважаем (§6). На портале анимаций много: подъём карточек, смена темы, разворот шеврона. Обнуляем длительности, а не выключаем свойства, — так ничего не «прыгает». */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Табличные цифры там, где числа стоят в колонку и их сравнивают глазом: время прихода/ухода, длительность звонка, минуты опоздания, счётчики, таблицы. Без этого цифры разной ширины и колонка «пляшет». */ table, .myday-v, .wd-times, .mc-time, .mc-num, .mc-dur, .late-mins, .metric-v, .rank-badge, .tr-progress-v, .thx-date, .dash-date, .badge { font-variant-numeric: tabular-nums; } /* ============================================================================ ТОСТЫ И ДИАЛОГ ПОДТВЕРЖДЕНИЯ (window.PNX.toast / PNX.confirm) Замена alert() и confirm(): те не стилизуются, блокируют поток и на телефоне выглядят как системная ошибка. Статус показываем точкой-маркером, а не цветной полосой слева — §9 называет полосу антипаттерном. ============================================================================ */ .pnx-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 40px)); } .pnx-toast { display: flex; align-items: flex-start; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 13px 16px; font-size: var(--fs-body); line-height: 1.45; color: var(--ink); animation: pnx-toast-in .2s ease both; } .pnx-toast::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-top: 6px; } .pnx-toast-ok::before { background: var(--brand); } .pnx-toast-error::before { background: var(--danger); } .pnx-toast-error { border-color: var(--danger-line); } .pnx-toast-out { animation: pnx-toast-out .24s ease both; } @keyframes pnx-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes pnx-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(6px); } } /* Диалог переиспользует оболочку .lk-modal-overlay / .lk-modal */ .pnx-confirm .lk-modal { max-width: 420px; } .pnx-confirm-text { font-size: var(--fs-body); line-height: 1.5; color: var(--ink); margin: 0 0 20px; } .pnx-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; } @media (max-width: 575.98px) { .pnx-toasts { right: 12px; left: 12px; bottom: 12px; width: auto; } .pnx-confirm-actions .btn { flex: 1 1 auto; } } /* ============================================================================ ИКОНКИ ВМЕСТО ГЛИФОВ — размеры для SVG, пришедших на смену ↗ ↙ 📄 📎 🛠 ➕ Раньше эти значки рисовались шрифтом и не совпадали по толщине линии с остальными inline-SVG рядом (§4). Размер задаём явно: у SVG нет font-size. ============================================================================ */ .call-dir svg { width: 15px; height: 15px; } .mc-dir svg { width: 13px; height: 13px; } /* Заглушка раздела «Заявки» — крупная иконка вместо эмодзи 54px */ .sd-hero-ico { display: flex; justify-content: center; color: var(--brand); margin-bottom: 8px; } .sd-hero-ico svg { width: 54px; height: 54px; stroke-width: 1.5; }