/* ============================================================================ Procuro UI System — единственный источник визуальных правил. Подключается последним в base.html, поэтому побеждает при равной специфичности. ВАЖНО про :where(). Он даёт селектору НУЛЕВУЮ специфичность. Раньше в этот приём был обёрнут почти весь файл, и набор токенов, задуманный как система, не влиял ни на что: любое старое правило вида `.button{...}` перебивало его, хотя и стояло выше. Поэтому: :where(...) — только для умолчаний, которые страница вправе переопределить; обычный селектор — для правил, обязательных на весь продукт. ============================================================================ */ /* Шрифт кабинета. Здесь просили Geist и Inter, но ни один из них не подключён нигде в проекте — кабинет молча рисовался системным шрифтом, тогда как витрина использовала Roboto. Объявления скопированы из landing.css намеренно: витрина не наследует эту раскладку и живёт на своём файле, а шрифт браузер скачивает один раз — адрес общий. Вторая запись отдаёт единственный знак ₸ (U+20B8): в Roboto его нет. */ @font-face{font-family:'Roboto';src:url('/static/fonts/roboto.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Roboto';src:url('/static/fonts/tenge.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+20B8} :root{ /* --- Фирменный цвет ------------------------------------------------------ navy — опора интерфейса, primary — только главное действие на экране. danger отделён от primary намеренно: они похожи, и пока «Отправить» и «Удалить» красили одним красным, разрушительное действие выглядело как обычное. primary зовёт, danger предупреждает. */ --ui-navy:#091635; --ui-navy-2:#13254a; --ui-primary:#ce000b; --ui-primary-hover:#ae0009; --ui-primary-active:#8f0008; --ui-primary-soft:rgba(206,0,11,.08); /* --- Поверхности --- */ --ui-bg:#f6f7f9; --ui-surface:#fff; --ui-subtle:#f8f9fb; --ui-hover:#f3f5f8; /* --- Текст --------------------------------------------------------------- Контраст на белом: text 17.4:1, text-2 6.4:1, muted 5.0:1, faint 2.6:1. faint нормы не проходит и поэтому НЕ несёт сведений: только разделители, подсказки в пустых полях и декоративные значки. Дата, отдел, статус, подпись — это сведения, для них минимум muted. */ --ui-text:#101828; --ui-text-2:#475467; --ui-muted:#667085; --ui-faint:#98a2b3; --ui-on-primary:#fff; /* --- Границы --- */ --ui-border:#e1e6ee; --ui-border-strong:#cbd3df; --ui-border-hover:#aeb8c7; /* --- Состояния ----------------------------------------------------------- Отключённое состояние — своя пара цветов, а не прозрачность всей кнопки. Прозрачность гасит текст вместе с фоном: у красной кнопки при opacity .45 контраст падал до 1.4:1, и она читалась как поломка страницы. Серая пара даёт 6.4:1 — надпись видно, а «выключено» очевидно. */ --ui-disabled-bg:#eaecf0; --ui-disabled-text:#475467; --ui-disabled-border:#d0d5dd; /* --- Смысловые цвета --- */ --ui-success:#067647; --ui-success-bg:#ecfdf3; --ui-success-border:#abefc6; --ui-warning:#b54708; --ui-warning-bg:#fffaeb; --ui-warning-border:#fedf89; --ui-danger:#b42318; --ui-danger-bg:#fef3f2; --ui-danger-border:#fecdca; --ui-info:#175cd3; --ui-info-bg:#eff8ff; --ui-info-border:#b2ddff; /* --- Отступы: 4 8 12 16 24 32 48 --- */ --ui-space-1:4px; --ui-space-2:8px; --ui-space-3:12px; --ui-space-4:16px; --ui-space-5:24px; --ui-space-6:32px; --ui-space-7:48px; /* --- Скругления: четыре значения вместо двадцати пяти --- */ --ui-radius-sm:6px; /* бейджи, значки, мелкие плитки */ --ui-radius-md:10px; /* кнопки, поля, вкладки */ --ui-radius-lg:14px; /* карточки, панели, окна */ --ui-radius-full:999px;/* аватары, круглые счётчики */ /* --- Типографика --------------------------------------------------------- Восемь размеров и четыре начертания. Веса 650, 750, 760 и 1000, которые встречались раньше, на глаз неотличимы от соседних и существовали только потому, что их набирали по одному. */ --ui-font:'Roboto',Inter,'Segoe UI',Arial,sans-serif; --ui-size-label:11px; /* надзаголовки, шапки таблиц, ВЕРХНИЙ РЕГИСТР */ --ui-size-caption:12px; /* подписи под элементом */ --ui-size-sm:13px; /* вторичный текст */ --ui-size-body:14px; /* основной текст интерфейса */ --ui-size-md:16px; /* заголовок карточки */ --ui-size-lg:20px; /* заголовок раздела */ --ui-size-xl:28px; /* заголовок страницы */ --ui-size-display:32px; /* витрина и крупные экраны */ --ui-weight-normal:400; --ui-weight-medium:600; --ui-weight-bold:700; --ui-weight-display:800; --ui-leading-tight:1.25; --ui-leading-normal:1.5; --ui-leading-relaxed:1.6; /* --- Тени: четыре. Свечения фирменным цветом на каждой кнопке больше нет --- */ --ui-shadow-xs:0 1px 2px rgba(9,22,53,.04); --ui-shadow-sm:0 5px 16px rgba(9,22,53,.06); --ui-shadow-md:0 16px 42px rgba(9,22,53,.12); --ui-shadow-dialog:0 28px 80px rgba(9,22,53,.25); /* --- Высота управляющих элементов: одна на кнопку, поле, список, поиск --- */ --ui-control:42px; --ui-control-sm:34px; /* плотные таблицы и панели фильтров */ /* --- Обводка фокуса ------------------------------------------------------ Раньше кольцо было полупрозрачно-красным с непрозрачностью .18 — на белом его практически не было видно, и пройти страницу с клавиатуры вслепую было нельзя. Тёмная обводка с отступом видна на любой поверхности. */ --ui-focus:var(--ui-navy); --ui-focus-ring:0 0 0 3px rgba(9,22,53,.16); /* --- Движение --- */ --ui-ease:cubic-bezier(.2,0,0,1); --ui-fast:140ms; /* наведение, нажатие */ --ui-base:180ms; /* панели, вкладки, списки */ --ui-slow:240ms; /* окна, всплывающие */ /* --- Слои --- */ --ui-z-sticky:15; --ui-z-dropdown:40; --ui-z-overlay:60; --ui-z-toast:80; } *,*::before,*::after{box-sizing:border-box} /* Атрибут hidden должен побеждать любое наше display. Иначе достаточно одного правила вида .empty{display:flex}, чтобы скрытый блок «заявки не найдены» показывался на каждой странице. */ [hidden]{display:none!important} html{color-scheme:light;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased} body{color:var(--ui-text);background:var(--ui-bg);font-family:var(--ui-font)} button,input,select,textarea{font:inherit} /* У и по умолчанию вес «жирнее родителя»: внутри и без того плотного блока он доезжал до 900, которого в шкале нет. Задаём явно. */ b,strong{font-weight:var(--ui-weight-bold)} button,a,input,select,textarea,summary{transition:border-color var(--ui-base) var(--ui-ease),background-color var(--ui-base) var(--ui-ease),color var(--ui-base) var(--ui-ease),box-shadow var(--ui-base) var(--ui-ease),transform var(--ui-fast) var(--ui-ease)} ::selection{color:#fff;background:var(--ui-navy)} /* --- Фокус, нажатие, отключённое состояние --------------------------------- Специфичность здесь намеренно обычная, а не нулевая: это правила доступности, их не должно перебивать случайное старое правило. */ a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--ui-focus);outline-offset:2px;box-shadow:var(--ui-focus-ring); } /* У поля ввода своя рамка, и обводка поверх неё давала три кольца подряд. Здесь фокус показывает сама рамка плюс мягкий ореол — одно кольцо. Специфичность обычная: старая тема красила рамку фокуса красным, и при нулевой специфичности это правило до неё не доставало. */ input:focus,select:focus,textarea:focus, input:focus-visible,select:focus-visible,textarea:focus-visible{ border-color:var(--ui-navy);outline:0;box-shadow:var(--ui-focus-ring); } /* На тёмном боковом меню тёмная обводка не видна. */ .sidebar a:focus-visible,.sidebar button:focus-visible{outline-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)} :where(button,.button,.primary-action,.secondary-action):active:not(:disabled):not([aria-disabled="true"]){transform:scale(.985)} /* «Ожидание» и «отключено» — разные состояния, и красить их одинаково нельзя: кнопка, которая уже работает, серой быть не должна, иначе на ней теряется и кружок, и смысл. Поэтому занятая кнопка сохраняет свои цвета. */ button:disabled:not([aria-busy="true"]),.button:disabled:not([aria-busy="true"]), input:disabled,select:disabled,textarea:disabled, [aria-disabled="true"]:not([aria-busy="true"]){ cursor:not-allowed;opacity:1!important;box-shadow:none!important;transform:none!important; border-color:var(--ui-disabled-border)!important; background:var(--ui-disabled-bg)!important; color:var(--ui-disabled-text)!important; } button:disabled:not([aria-busy="true"]):hover,.button:disabled:not([aria-busy="true"]):hover, [aria-disabled="true"]:not([aria-busy="true"]):hover{ border-color:var(--ui-disabled-border)!important;background:var(--ui-disabled-bg)!important; color:var(--ui-disabled-text)!important;transform:none!important; } /* --- Ожидание ------------------------------------------------------------- Долгие действия (ответ модели, поиск поставщиков, отправка письма) до сих пор не показывали ничего: экран просто замирал. aria-busy — единственный признак, который одновременно понимает и экранный диктор, и стиль. */ [aria-busy="true"]{cursor:progress} button[aria-busy="true"],.button[aria-busy="true"]{position:relative;color:transparent!important;pointer-events:none} button[aria-busy="true"]::after,.button[aria-busy="true"]::after{ content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px; border:2px solid currentcolor;border-radius:var(--ui-radius-full); border-top-color:transparent;color:var(--ui-on-primary); animation:ui-spin .7s linear infinite; } .secondary[aria-busy="true"]::after,.secondary-action[aria-busy="true"]::after{color:var(--ui-text)} .ui-spinner{ display:inline-block;width:16px;height:16px;vertical-align:-3px; border:2px solid var(--ui-border-strong);border-top-color:var(--ui-navy); border-radius:var(--ui-radius-full);animation:ui-spin .7s linear infinite; } /* ============================================================================ КОМПОНЕНТЫ Один источник на весь продукт. Раньше вид кнопки задавали 96 правил в 12 файлах — и на живых страницах насчитывалось восемь разных форм кнопки. Специфичность здесь обычная, а не нулевая: система должна выигрывать у старых правил, а не проигрывать им по случайности. ============================================================================ */ /* ---- Кнопка --------------------------------------------------------------- Пять видов: главная (красная), вторичная (белая), спокойная, опасная, значок. Шесть состояний: обычное, наведение, нажатие, фокус, отключено, ожидание. Фокус, отключение и ожидание заданы выше и общие для всего. */ .button,button,.primary-action,.secondary-action,.icon-button{ display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-2); min-height:var(--ui-control);padding:9px var(--ui-space-4); border:1px solid transparent;border-radius:var(--ui-radius-md); background:var(--ui-primary);color:var(--ui-on-primary); font-size:var(--ui-size-body);font-weight:var(--ui-weight-medium);line-height:1.2; text-align:center;text-decoration:none;cursor:pointer; } .button:hover,button:hover,.primary-action:hover{background:var(--ui-primary-hover)} .button:active,button:active,.primary-action:active{background:var(--ui-primary-active)} /* Вторичная. Раньше при наведении заливалась тёмно-синим целиком: белая кнопка «Отмена» превращалась в тёмный блок и перетягивала внимание с главной. */ .secondary,.secondary-action,.mode,.dialog-close,.rd-close,.request-card-delete button, .close-tender,.choose-winner{ border-color:var(--ui-border-strong);background:var(--ui-surface);color:var(--ui-text); } .secondary:hover,.secondary-action:hover,.mode:hover,.dialog-close:hover,.rd-close:hover, .request-card-delete button:hover,.close-tender:hover,.choose-winner:hover{ border-color:var(--ui-border-hover);background:var(--ui-hover);color:var(--ui-text); } .secondary:active,.secondary-action:active,.mode:active{background:var(--ui-border-strong)} /* Спокойная — третий уровень: без рамки и фона, пока на неё не навели. */ .button.quiet,button.quiet,.quiet-action{ border-color:transparent;background:transparent;color:var(--ui-text-2); font-weight:var(--ui-weight-normal); } .button.quiet:hover,button.quiet:hover,.quiet-action:hover{background:var(--ui-hover);color:var(--ui-text)} /* Опасная. Отделена от главной намеренно: пока «Отправить» и «Удалить» красили одним красным, разрушительное действие выглядело как обычное. */ .danger,button.danger{border-color:var(--ui-danger-border);background:var(--ui-surface);color:var(--ui-danger)} .danger:hover,button.danger:hover{border-color:var(--ui-danger);background:var(--ui-danger);color:#fff} /* Кнопка-значок. Квадратная, подпись живёт в подсказке, а имя для экранного диктора — в aria-label. Подсказка сама именем быть не может: её не читает ни один диктор. */ .icon-button{ width:var(--ui-control);min-width:var(--ui-control);height:var(--ui-control); padding:0;gap:0;border-color:var(--ui-border-strong); background:var(--ui-surface);color:var(--ui-muted);font-size:19px; } .icon-button:hover{border-color:var(--ui-border-hover);background:var(--ui-hover);color:var(--ui-text)} .icon-button.quiet{border-color:transparent;background:transparent} .icon-button.quiet:hover{background:var(--ui-hover)} /* Размеры. Плотный вариант — для панелей фильтров и строк таблицы. */ .button.sm,button.sm,.button.small,button.small{min-height:var(--ui-control-sm);padding:0 var(--ui-space-3);font-size:var(--ui-size-sm)} .icon-button.sm,.icon-button.small{width:var(--ui-control-sm);min-width:var(--ui-control-sm);height:var(--ui-control-sm);padding:0;font-size:16px} .button.block,button.block{width:100%} /* В сетке формы кнопка по умолчанию растягивается на всю высоту ячейки и становится выше остальных: «Сохранить КП» была 54px против 42px. */ .form-grid>button,.form-grid>.button,.admin-form>button{align-self:start;justify-self:start} /* Пункт меню, оформленный ссылкой опасного действия, — не кнопка. */ .danger-link{color:var(--ui-danger);background:transparent;border:0;font-weight:var(--ui-weight-normal)} .danger-link:hover{background:var(--ui-danger-bg);color:var(--ui-danger)} /* ---- Длинный текст в две-три строки с «Показать полностью» ---------------- Раньше длинное описание в шапке окна заявки обрезалось посреди слова многоточием, и прочитать его целиком было негде. Теперь текст занимает несколько строк (число задаёт --ui-clamp-lines), а кнопка под ним появляется, только если что-то действительно спрятано (static/expandable.js). */ .ui-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ui-clamp-lines,2);overflow:hidden;overflow-wrap:anywhere} .ui-clamp.is-expanded{display:block;-webkit-line-clamp:unset;overflow:visible} /* Кнопка-ссылка. Общее правило красит любую кнопку фирменной заливкой, поэтому фон, рамка и высота сброшены явно и во всех состояниях. */ button.ui-more,button.ui-more:hover,button.ui-more:active{ min-height:0;padding:0;border:0;background:transparent;box-shadow:none; color:var(--ui-primary);font-size:var(--ui-size-caption);font-weight:var(--ui-weight-medium); text-decoration:none;cursor:pointer; } button.ui-more:hover{text-decoration:underline} button.ui-more[hidden]{display:none} @media(max-width:800px){button.ui-more{min-height:40px}} /* Кнопка не переносит свою подпись на вторую строку: она перестаёт быть похожей на кнопку и ломает высоту соседей в ряду. */ .button,button,.primary-action,.secondary-action{white-space:nowrap} .button.wrap,button.wrap{white-space:normal} /* ---- Подсказка ------------------------------------------------------------ Появляется по наведению И по фокусу с клавиатуры: подсказка, доступная только мышью, для половины людей просто не существует. */ [data-tooltip]{position:relative} [data-tooltip]::after{ content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%; z-index:var(--ui-z-dropdown);padding:6px 9px;border-radius:var(--ui-radius-sm); background:var(--ui-navy);color:#fff; font-size:var(--ui-size-caption);font-weight:var(--ui-weight-normal);line-height:1.3; white-space:nowrap;opacity:0;pointer-events:none; transform:translateX(-50%) translateY(3px); transition:opacity var(--ui-fast) var(--ui-ease),transform var(--ui-fast) var(--ui-ease); } [data-tooltip]:hover::after,[data-tooltip]:focus-visible::after{opacity:1;transform:translateX(-50%)} [data-tooltip][aria-busy="true"]::after{content:none} /* Подсказка по умолчанию центрируется по кнопке и наполовину уезжает влево. У кнопки, стоящей вплотную к краю карточки с overflow:hidden, эта половина срезается — так «Приложить документ» читалось как «иложить документ». Выравнивание по краю кнопки оставляет подсказку внутри. */ [data-tooltip][data-tooltip-align="start"]::after{left:0;transform:translateY(3px)} [data-tooltip][data-tooltip-align="start"]:hover::after, [data-tooltip][data-tooltip-align="start"]:focus-visible::after{transform:none} [data-tooltip][data-tooltip-align="end"]::after{left:auto;right:0;transform:translateY(3px)} [data-tooltip][data-tooltip-align="end"]:hover::after, [data-tooltip][data-tooltip-align="end"]:focus-visible::after{transform:none} /* Подсказка снизу. Нужна там, где над элементом ничего нет: у аватарки в самом верху страницы подсказка всплывала вверх, за край окна, и от неё был виден только тёмный краешек — выглядело как поломка вёрстки. Выравнивание по краю (`align`) при этом продолжает действовать, поэтому сдвиг задаётся отдельно для каждого сочетания: одно правило с `translateX` перебило бы прижатие к краю. */ [data-tooltip][data-tooltip-side="bottom"]::after{ bottom:auto;top:calc(100% + 8px);transform:translateX(-50%) translateY(-3px); } [data-tooltip][data-tooltip-side="bottom"]:hover::after, [data-tooltip][data-tooltip-side="bottom"]:focus-visible::after{transform:translateX(-50%)} [data-tooltip][data-tooltip-side="bottom"][data-tooltip-align="start"]::after, [data-tooltip][data-tooltip-side="bottom"][data-tooltip-align="end"]::after{transform:translateY(-3px)} [data-tooltip][data-tooltip-side="bottom"][data-tooltip-align="start"]:hover::after, [data-tooltip][data-tooltip-side="bottom"][data-tooltip-align="start"]:focus-visible::after, [data-tooltip][data-tooltip-side="bottom"][data-tooltip-align="end"]:hover::after, [data-tooltip][data-tooltip-side="bottom"][data-tooltip-align="end"]:focus-visible::after{transform:none} /* ---- Выпадающее меню ------------------------------------------------------ На
, без единой строки скрипта: так оно открывается с клавиатуры, закрывается по Esc и работает, даже если скрипт не загрузился. */ .ui-menu{position:relative;display:inline-block} .ui-menu>summary{list-style:none;cursor:pointer} .ui-menu>summary::-webkit-details-marker{display:none} .ui-menu>summary::marker{content:""} .ui-menu>summary iconify-icon{font-size:16px;transition:transform var(--ui-fast) var(--ui-ease)} .ui-menu[open]>summary iconify-icon{transform:rotate(180deg)} .ui-menu-list{ position:absolute;top:calc(100% + 6px);right:0;z-index:var(--ui-z-dropdown); min-width:220px;padding:var(--ui-space-1); border:1px solid var(--ui-border);border-radius:var(--ui-radius-md); background:var(--ui-surface);box-shadow:var(--ui-shadow-md); animation:ui-pop-in var(--ui-base) var(--ui-ease) both; } .ui-menu-list a,.ui-menu-list button{ display:flex;align-items:center;gap:var(--ui-space-2);width:100%; min-height:var(--ui-control-sm);padding:0 var(--ui-space-3); border:0;border-radius:var(--ui-radius-sm);background:transparent; color:var(--ui-text);font-size:var(--ui-size-sm);font-weight:var(--ui-weight-normal); text-align:left;text-decoration:none;justify-content:flex-start; } .ui-menu-list a:hover,.ui-menu-list button:hover{background:var(--ui-hover);color:var(--ui-text)} .ui-menu-list .danger,.ui-menu-list button.danger{color:var(--ui-danger)} .ui-menu-list .danger:hover,.ui-menu-list button.danger:hover{background:var(--ui-danger-bg);color:var(--ui-danger)} .ui-menu-list form{margin:0} .ui-menu-list form button{width:100%} /* ---- Учётная запись в шапке кабинета -------------------------------------- Имя, отдел, «Настройки» и «Выход» стояли внизу боковой колонки, а в шапке висела ещё одна аватарка — два места об одном и том же. Осталось одно: аватарка справа вверху, под ней меню. */ .user-menu{justify-self:end} .user-menu>summary{display:flex;align-items:center;border-radius:var(--ui-radius-full)} .user-menu>summary:hover .avatar{box-shadow:0 0 0 3px var(--ui-hover)} /* Кружок с буквой — фирменно-красный, как в кабинете инициатора. Голубой фон достался от прежней темы и ни с чем в продукте не рифмовался. */ .user-menu .avatar{background:var(--ui-primary);color:#fff;font-weight:var(--ui-weight-bold)} .user-menu .ui-menu-list{min-width:240px} .user-menu-head{padding:var(--ui-space-2) var(--ui-space-3) var(--ui-space-3);margin-bottom:var(--ui-space-1);border-bottom:1px solid var(--ui-border)} .user-menu-head b{display:block;overflow:hidden;color:var(--ui-text);font-size:var(--ui-size-sm);text-overflow:ellipsis;white-space:nowrap} .user-menu-head small{display:block;margin-top:2px;color:var(--ui-muted);font-size:var(--ui-size-caption)} /* На узком экране шапки нет, и «Настройки» с «Выходом» остаются в нижней строке навигации. На широком они живут только в меню под аватаркой. */ @media(min-width:801px){.side-bottom{display:none}} /* «Ещё» нужна только нижней строке телефона: на широком экране все пункты в колонке. */ .side-more{display:none} /* ---- Поля ввода ---------------------------------------------------------- */ input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select,textarea{ min-height:var(--ui-control); border:1px solid var(--ui-border-strong);border-radius:var(--ui-radius-md); background:var(--ui-surface);color:var(--ui-text);font-size:var(--ui-size-body); } input:not([type=checkbox]):not([type=radio]):not([type=file]):hover:not(:disabled), select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--ui-border-hover)} input::placeholder,textarea::placeholder{color:var(--ui-faint);opacity:1} textarea{padding:10px 12px;line-height:var(--ui-leading-normal);resize:vertical} /* Ошибка поля: рамка плюс подпись рядом. Одного цвета мало — при дальтонизме красная рамка неотличима от обычной. */ [aria-invalid="true"],.is-invalid{border-color:var(--ui-danger)!important} [aria-invalid="true"]:focus,.is-invalid:focus{box-shadow:0 0 0 3px rgba(180,35,24,.16)!important} input[type=checkbox],input[type=radio]{accent-color:var(--ui-primary);width:17px;height:17px;cursor:pointer} /* ---- Бейдж и статус ------------------------------------------------------- Палитра статусов была объявлена дважды и расходилась: «в работе» рисовался тёмно-синим в теме и голубым в карточках заявки — один и тот же статус в двух цветах на соседних экранах. Здесь она одна. «Ожидание» переведено с фирменного красного на янтарный: красный оставлен опасным действиям, иначе обычный шаг закупки выглядит как тревога. */ .badge,.status-pill,.registry-status,.b2b-status,.portal-status{ display:inline-flex;align-items:center;gap:6px; padding:3px 9px;border-radius:var(--ui-radius-full); border:1px solid var(--status-border,#e4e7ec); background:var(--status-bg,#f2f4f7);color:var(--status,var(--ui-text-2)); font-size:var(--ui-size-caption);font-weight:var(--ui-weight-medium);line-height:1.5; white-space:nowrap;font-variant-numeric:tabular-nums; } .status-draft{--status-border:#e4e7ec;--status:var(--ui-text-2);--status-bg:#f2f4f7} .status-waiting{--status-border:var(--ui-warning-border);--status:var(--ui-warning);--status-bg:var(--ui-warning-bg)} .status-in_progress{--status-border:var(--ui-info-border);--status:var(--ui-info);--status-bg:var(--ui-info-bg)} .status-completed{--status-border:var(--ui-success-border);--status:var(--ui-success);--status-bg:var(--ui-success-bg)} .status-cancelled{--status-border:var(--ui-danger-border);--status:var(--ui-danger);--status-bg:var(--ui-danger-bg)} .badge.draft{--status-border:#e4e7ec;--status:var(--ui-text-2);--status-bg:#f2f4f7} .badge.waiting{--status-border:var(--ui-warning-border);--status:var(--ui-warning);--status-bg:var(--ui-warning-bg)} .badge.in_progress{--status-border:var(--ui-info-border);--status:var(--ui-info);--status-bg:var(--ui-info-bg)} .badge.completed{--status-border:var(--ui-success-border);--status:var(--ui-success);--status-bg:var(--ui-success-bg)} .badge.cancelled{--status-border:var(--ui-danger-border);--status:var(--ui-danger);--status-bg:var(--ui-danger-bg)} /* ---- Фильтр-переключатель ------------------------------------------------- Ряд кнопок-ссылок со счётчиками: «Все 9 · Приём КП 6 · Черновики 2». Ссылками, а не скриптом: отфильтрованный список открывается по адресу и переживает перезагрузку. На узком экране ряд переносится, а не уезжает вбок — все варианты должны быть видны без прокрутки. */ .ui-filter-tabs{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);margin:0 0 var(--ui-space-4)} .ui-filter-tabs a{ display:inline-flex;align-items:center;gap:var(--ui-space-2);min-height:var(--ui-control-sm); padding:0 var(--ui-space-4);border:1px solid var(--ui-border);border-radius:var(--ui-radius-full); background:var(--ui-surface);color:var(--ui-text-2);text-decoration:none;white-space:nowrap; font-size:var(--ui-size-sm);font-weight:var(--ui-weight-medium); transition:background var(--ui-fast) var(--ui-ease),border-color var(--ui-fast) var(--ui-ease),color var(--ui-fast) var(--ui-ease); } .ui-filter-tabs a:hover{border-color:var(--ui-border-hover);background:var(--ui-hover);color:var(--ui-text)} .ui-filter-tabs a b{ display:grid;place-items:center;min-width:22px;height:22px;padding:0 var(--ui-space-1); border-radius:var(--ui-radius-full);background:var(--ui-hover);color:var(--ui-text-2); font-size:var(--ui-size-caption);font-variant-numeric:tabular-nums; } .ui-filter-tabs a.active{border-color:var(--ui-navy);background:var(--ui-navy);color:#fff} .ui-filter-tabs a.active b{background:rgba(255,255,255,.18);color:#fff} @media(max-width:560px){.ui-filter-tabs a{min-height:40px;padding:0 var(--ui-space-3)}} /* ---- Сообщения ------------------------------------------------------------ Было три разных вида: серый блок, красная рамка поля и alert() из JS. */ .alert,.rd-inline-error,.ui-note{ display:flex;gap:var(--ui-space-2);margin:var(--ui-space-3) 0; padding:10px var(--ui-space-3);border:1px solid var(--ui-danger-border); border-radius:var(--ui-radius-md);background:var(--ui-danger-bg);color:var(--ui-danger); font-size:var(--ui-size-sm);line-height:var(--ui-leading-normal); } .ui-note.warning{border-color:var(--ui-warning-border);background:var(--ui-warning-bg);color:var(--ui-warning)} .ui-note.success{border-color:var(--ui-success-border);background:var(--ui-success-bg);color:var(--ui-success)} .ui-note.info{border-color:var(--ui-info-border);background:var(--ui-info-bg);color:var(--ui-info)} .error,.error-text{color:var(--ui-danger)} /* ---- Пустое состояние ----------------------------------------------------- Семь разных исполнений сведены к одному: заголовок, пояснение и, если есть что предложить, действие. Старые имена классов сохранены — так страницы переезжают без правки шаблонов. */ .empty,.empty-state,.tender-empty,.supplier-no-results,.supplier-empty, .request-search-empty,.rd-empty,.assistant-requests-empty,.request-column-empty{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--ui-space-2);padding:var(--ui-space-6) var(--ui-space-5); color:var(--ui-muted);font-size:var(--ui-size-sm);text-align:center; line-height:var(--ui-leading-normal); } .empty-state,.tender-empty,.supplier-no-results,.supplier-empty,.request-search-empty{ border:1px dashed var(--ui-border-strong);border-radius:var(--ui-radius-lg);background:var(--ui-subtle); } .empty b,.empty-state b,.tender-empty b,.supplier-no-results b,.supplier-empty b, .request-search-empty b{color:var(--ui-text);font-size:var(--ui-size-md);font-weight:var(--ui-weight-medium)} .empty p,.empty-state p,.supplier-empty p,.request-search-empty p{margin:0;max-width:44ch} /* Внутри колонки канбана рамка не нужна — колонка уже обведена. */ .request-column-empty,.assistant-requests-empty,.rd-empty{border:0;background:transparent;padding:var(--ui-space-5) var(--ui-space-3)} /* ---- Вкладки -------------------------------------------------------------- Два исполнения: подчёркивание в карточке заявки и «таблетки» в окне создания. Оставлены оба — они решают разные задачи, — но приведены к общей типографике, высоте и скорости. */ .rd-tabs button,.crm-tabs button{ min-height:var(--ui-control-sm);padding:0 var(--ui-space-3); font-size:var(--ui-size-body);font-weight:var(--ui-weight-medium); } /* ---- Скелет ожидания ------------------------------------------------------ */ .skeleton,.crm-loading{border-radius:var(--ui-radius-md);color:transparent!important} /* Application shell */ .app-body{min-width:320px;overflow-x:hidden} /* Появление страницы — только прозрачностью, без сдвига. Любой transform, даже нулевой, делает элемент точкой отсчёта для потомков с position:fixed. Из-за сдвига на 4px модалка заявки отсчитывала своё «на весь экран» от .app-main: она открывалась ниже, вылезала за нижний край, и часть полей было не прокрутить. Держать здесь сдвиг не стоит ни одного пикселя. */ .app-main{animation:ui-page-fade var(--ui-slow) var(--ui-ease) both} .sidebar{transition:width var(--ui-slow) var(--ui-ease),transform var(--ui-slow) var(--ui-ease),box-shadow var(--ui-base) var(--ui-ease)} .sidebar nav a,.side-bottom>a,.side-bottom button{border-radius:var(--ui-radius-md);transition:background var(--ui-base) var(--ui-ease),color var(--ui-base) var(--ui-ease),transform var(--ui-fast) var(--ui-ease)} .sidebar nav a:hover,.side-bottom>a:hover,.side-bottom button:hover{transform:translateX(2px)} .topbar{border-color:var(--ui-border);box-shadow:0 1px 0 rgba(9,22,53,.02)} .global-search{position:relative;display:flex;align-items:center;min-width:240px;max-width:500px;height:var(--ui-control);margin:0;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface);box-shadow:var(--ui-shadow-xs)} .global-search:focus-within{border-color:var(--ui-navy);box-shadow:var(--ui-focus-ring)} .global-search iconify-icon{margin-left:13px;color:var(--ui-muted);font-size:19px} .global-search input{width:100%;height:100%;margin:0!important;padding:0 14px 0 10px!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font-size:var(--ui-size-sm)} .profile{border-radius:var(--ui-radius-md);padding:6px 8px}.profile:hover{background:var(--ui-hover)} /* В шапке остался только значок — имя и отдел живут внизу бокового меню. */ .profile--compact{justify-self:end;display:inline-flex;padding:5px;gap:0} .profile--compact .avatar{width:34px;height:34px;flex:0 0 34px} /* Common hierarchy and controls */ .heading,.supplier-page-head,.tender-page__head{margin-bottom:var(--ui-space-6)} .heading h1,.supplier-page-head h1,.tender-page h1{letter-spacing:-.025em} .heading>div>p:last-child,.supplier-page-head p:last-child,.section-hint{max-width:760px;line-height:var(--ui-leading-normal)} /* Подпись над заголовком говорит, где человек находится. Спокойный серый, а не фирменный красный: красный на странице должен звать к действию. */ .eyebrow{margin:0 0 6px;color:var(--ui-muted);font-size:var(--ui-size-label); font-weight:var(--ui-weight-medium);letter-spacing:.14em;text-transform:uppercase} :where(input,textarea)::placeholder{color:var(--ui-faint);opacity:1} /* Surfaces, tables and empty states */ :where(.panel,.card,.summary,.stat,.tender-panel,.supplier-registry){border-color:var(--ui-border);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-xs)} :where(.panel,.card,.summary,.stat,.tender-panel):hover{border-color:#d4dae4} table{border-collapse:separate;border-spacing:0} thead th{color:var(--ui-muted);font-size:var(--ui-size-label);letter-spacing:.035em;text-transform:uppercase} tbody tr{transition:background var(--ui-fast) var(--ui-ease)}tbody tr:hover{background:var(--ui-subtle)} /* Requests */ .request-board-toolbar{padding:0}.request-board-search{border-color:var(--ui-border);box-shadow:var(--ui-shadow-xs)} .request-kanban{padding-bottom:22px;scrollbar-color:#b7c0ce transparent;scrollbar-width:thin} .request-kanban-column{border-color:var(--ui-border)!important;background:#f5f7fa!important} .request-list-card{min-height:168px;border-color:var(--ui-border)!important;box-shadow:var(--ui-shadow-xs)!important} .request-list-card:hover{box-shadow:var(--ui-shadow-sm)!important} .request-card-delete button{background:var(--ui-surface)!important;color:var(--ui-danger)!important;border:1px solid var(--ui-danger-border)!important;box-shadow:none!important} .request-search-empty{animation:ui-content-in var(--ui-slow) var(--ui-ease)} /* Suppliers */ .supplier-toolbar{border-color:var(--ui-border);box-shadow:var(--ui-shadow-xs)} .supplier-toolbar label>span{font-size:var(--ui-size-label);letter-spacing:.05em} .supplier-table-head{position:sticky;top:0;z-index:3;background:rgba(248,249,251,.96);backdrop-filter:blur(8px)} .supplier-table-row{transition:background var(--ui-fast) var(--ui-ease),box-shadow var(--ui-fast) var(--ui-ease),transform var(--ui-fast) var(--ui-ease)} .supplier-table-row:hover{transform:translateX(1px)} .supplier-menu>div{transform-origin:top right;animation:ui-pop-in var(--ui-base) var(--ui-ease) both} .supplier-create-dialog[open]{animation:ui-dialog-in var(--ui-slow) var(--ui-ease) both} .supplier-create-dialog::backdrop{animation:ui-fade-in var(--ui-base) ease both} /* Tenders and forms */ .tender-page{color:var(--ui-text)} .tender-card{border-color:var(--ui-border);box-shadow:var(--ui-shadow-xs);transition:transform var(--ui-base) var(--ui-ease),box-shadow var(--ui-base) var(--ui-ease),border-color var(--ui-base) var(--ui-ease)} .tender-card:hover{border-color:var(--ui-border-strong);box-shadow:var(--ui-shadow-sm);transform:translateY(-2px)} .tender-panel{box-shadow:var(--ui-shadow-xs)}.tender-item-editor{background:var(--ui-subtle);border-color:var(--ui-border)} .supplier-picker>label:hover{border-color:var(--ui-border-strong);background:var(--ui-surface)} .tender-create-actions{background:rgba(246,247,249,.92)} .supplier-portal__header{border-color:var(--ui-border)} /* Modal, dropdown and feedback motion */ :where(.rd-overlay,.crm-overlay){animation:ui-fade-in var(--ui-base) ease both} :where(.rd-modal,.crm-modal){animation:ui-dialog-in var(--ui-slow) var(--ui-ease) both;box-shadow:var(--ui-shadow-dialog)} :where(dialog[open]){animation:ui-dialog-in var(--ui-slow) var(--ui-ease) both} :where(dialog)::backdrop{animation:ui-fade-in var(--ui-base) ease both} details[open]>:not(summary){animation:ui-content-in var(--ui-base) var(--ui-ease) both} .request-toast,.notification,.alert,.success-banner{animation:ui-toast-in var(--ui-slow) var(--ui-ease) both} .skeleton,.crm-loading{background:linear-gradient(90deg,#eef1f5 25%,#f8f9fb 45%,#eef1f5 65%);background-size:300% 100%;animation:ui-shimmer 1.2s linear infinite} @keyframes ui-page-fade{from{opacity:.01}to{opacity:1}} @keyframes ui-content-in{from{opacity:.01;transform:translateY(-3px)}to{opacity:1;transform:none}} @keyframes ui-pop-in{from{opacity:.01;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:none}} @keyframes ui-dialog-in{from{opacity:.01;transform:translateY(10px) scale(.992)}to{opacity:1;transform:none}} @keyframes ui-toast-in{from{opacity:.01;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes ui-fade-in{from{opacity:.01}to{opacity:1}} @keyframes ui-shimmer{to{background-position:-300% 0}} @keyframes ui-spin{to{transform:rotate(360deg)}} @media(max-width:1180px){.global-search{max-width:380px}.supplier-toolbar{box-shadow:none}} @media(max-width:800px){ /* Нижняя панель на телефоне. Подпись под значком, ячейки равной ширины. Пунктов было до десяти (восемь разделов, «Настройки» и «Выход»), и подписи «Разговоры» и «Сотрудники» наезжали друг на друга. Теперь в строке четыре главных раздела и «Ещё»; остальное раскрывается панелью над строкой (mobile_nav.js ставит .is-more-open). nav и .side-bottom становятся display:contents: их пункты — прямые элементы строки, и порядок (order) расставляет их одним списком: сверху панель «Ещё», внизу постоянная строка. Ничего не дублируется в разметке — на широком экране это тот же список боковой колонки. */ /* aside.* — не случайность: confirm_dialog.js повторно подключает mobile_polish.css в конец , уже после этого файла, и там же заданы .sidebar{height:66px} и .sidebar nav{display:flex}. При равном весе они побеждали бы, и панель «Ещё» не раскрывалась. */ aside.sidebar{flex-wrap:wrap;align-content:flex-end;height:auto;min-height:66px;gap:var(--ui-space-1) 2px} aside.sidebar nav,aside.sidebar .side-bottom,aside.sidebar .side-bottom form{display:contents} .sidebar nav a,.sidebar .side-bottom>a,.sidebar .side-bottom button,.sidebar .side-more{ order:3;flex:1 1 0;min-width:0;min-height:56px;margin:0; flex-direction:column;justify-content:center;gap:3px;padding:4px 2px; border:0;border-radius:var(--ui-radius-md);background:transparent;box-shadow:none;color:rgba(255,255,255,.68); font-size:var(--ui-size-label);font-weight:var(--ui-weight-normal);line-height:1.15;text-align:center;white-space:nowrap; } .sidebar nav a:hover,.side-bottom>a:hover,.side-bottom button:hover{transform:none} .sidebar .side-more{display:flex;align-items:center} .sidebar .side-more:hover,.sidebar .side-more.active,.sidebar.is-more-open .side-more{color:#fff;background:rgba(255,255,255,.10)} .sidebar nav a iconify-icon,.side-bottom iconify-icon,.sidebar .side-more iconify-icon{width:auto;font-size:19px} /* Панель «Ещё»: закрыта — пунктов не видно; открыта — плитки в два ряда. */ .sidebar nav a.side-more-item,.sidebar .side-bottom>a,.sidebar .side-bottom button{display:none} .sidebar.is-more-open{padding-top:var(--ui-space-3);box-shadow:0 0 0 100vmax rgba(9,22,53,.45)} .sidebar.is-more-open nav a.side-more-item,.sidebar.is-more-open .side-bottom>a,.sidebar.is-more-open .side-bottom button{ display:flex;order:1;flex:0 0 calc(50% - 1px);width:auto;flex-direction:row;justify-content:flex-start; gap:var(--ui-space-2);min-height:48px;padding:0 var(--ui-space-3); background:rgba(255,255,255,.06);font-size:var(--ui-size-sm);text-align:left; } .sidebar.is-more-open .side-bottom>a,.sidebar.is-more-open .side-bottom button{order:2} .sidebar.is-more-open nav a.side-more-item.active,.sidebar.is-more-open .side-bottom>a.active{background:rgba(255,255,255,.16);color:#fff} .app-main{animation:none}.topbar{min-height:58px}.global-search{display:none} .heading,.supplier-page-head,.tender-page__head{margin-bottom:18px} .heading h1,.supplier-page-head h1,.tender-page h1{font-size:var(--ui-size-xl)} .request-board-toolbar{gap:10px}.request-kanban{margin-right:-14px} .supplier-toolbar{padding:12px}.supplier-table-row:hover{transform:none} .tender-page{padding:24px 14px 80px}.tender-card{padding:18px} } @media(max-width:560px){ /* Палец крупнее указателя мыши: на телефоне высота элементов управления поднимается до 44px. Это не разнобой, а намеренное исключение. */ :root{--ui-control:44px} .supplier-head-actions{display:grid;grid-template-columns:1fr;width:100%} .supplier-head-actions .button{width:100%}.dialog-actions{display:grid;grid-template-columns:1fr 1fr}.dialog-actions>*{width:100%} } /* Выбор вида тендерной процедуры. Карточками, а не выпадающим списком: виды отличаются не названием, а правилами, и человек должен прочитать правило до выбора, а не гадать по слову «многоэтапный». Компонент используется на двух экранах — в карточке заявки и на странице создания тендера, — поэтому живёт в наборе, а не в файле одного из них. */ .rd-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:6px} .rd-kind{display:flex;flex-direction:row;align-items:flex-start;gap:10px;padding:12px 14px; border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface,#fff); cursor:pointer;font-weight:var(--ui-weight-normal);text-align:left} .rd-kind:hover{border-color:var(--ui-border-hover);background:var(--ui-hover)} .rd-kind input{margin:2px 0 0;flex:0 0 auto} .rd-kind span{display:block;min-width:0} .rd-kind b{display:block} .rd-kind small{display:block;margin-top:3px;color:var(--ui-muted);line-height:1.4} .rd-kind:has(input:checked){border-color:var(--ui-primary);box-shadow:0 0 0 1px var(--ui-primary) inset} /* Размер целей нажатия на телефоне. Пальцем уверенно попадают в 40px, мышью хватает и 34px — поэтому плотный размер остаётся размером по умолчанию, а поднимается только на узком экране. Правило стоит здесь, а не в файле экрана: набор подключается последним, и снаружи его собственное правило не перебить. */ @media(max-width:800px){ .icon-button.sm,.icon-button.small{width:40px;min-width:40px;height:40px} .section-title a{display:inline-flex;align-items:center;min-height:40px} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} /* Индикатор ожидания — не украшение. Остановленный, он превращается в застывшую дугу, и человек решает, что страница сломалась. Поэтому он продолжает вращаться, только медленнее. */ button[aria-busy="true"]::after,.button[aria-busy="true"]::after,.ui-spinner{ animation-duration:1.4s!important;animation-iteration-count:infinite!important; } } /* ---- Свёрнутая боковая колонка -------------------------------------------- Доска заявок в четыре колонки требует ширины, и на ноутбуке 250 пикселей меню заметны. Свёрнутая колонка оставляет значки: навигация никуда не девается, подписи возвращаются одним нажатием. */ /* Ручка сидит на самой границе колонки и смотрит туда, куда подвинется край: влево — свернуть, вправо — развернуть. Отдельной кнопки внутри меню нет: она отнимала место у логотипа и читалась как ещё один пункт. Форма — вытянутая вкладка в цвет колонки, будто её продолжение. До этого здесь был кружок, который в свёрнутом состоянии заливался красным: он оставался единственным красным пятном в тёмном меню и читался как ошибка или непрочитанное уведомление, а не как ручка панели. Состояние колонки и так видно — по ней самой; кричать о нём цветом незачем. */ .side-toggle{ position:absolute;top:100px;right:-11px;z-index:25; display:grid;place-items:center;width:22px;height:44px;min-height:0;padding:0; border:1px solid rgba(255,255,255,.14);border-radius:7px; background:#16233f;color:rgba(255,255,255,.7);font-size:15px; box-shadow:0 2px 10px rgba(9,22,53,.35); transition:background var(--ui-fast) var(--ui-ease),color var(--ui-fast) var(--ui-ease),border-color var(--ui-fast) var(--ui-ease); } .side-toggle:hover{background:#22345c;border-color:rgba(255,255,255,.3);color:#fff} .side-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px} .side-toggle iconify-icon{transition:transform var(--ui-base) var(--ui-ease)} /* В свёрнутом виде меняется только направление стрелки: вид ручки один и тот же, поэтому глаз находит её на прежнем месте. */ .sidebar-collapsed .side-toggle iconify-icon{transform:rotate(180deg)} .sidebar{position:fixed;overflow:visible} /* Знак вместо надписи нужен только свёрнутой колонке. Селектор из двух классов намеренно: правило темы `.side-brand img` специфичнее одного класса и растягивало знак на всю ширину колонки — логотип наезжал на страницу. */ .side-brand .side-brand-mark{display:none} .sidebar-collapsed{--sidebar:76px} .sidebar-collapsed .side-brand{padding:0 0 26px;justify-content:center} /* Логотип не сжимаем до нечитаемой полоски — на его месте остаётся знак. */ /* Свёрнутой колонке логотип во всю ширину не нужен: остаётся фирменный знак, а надпись сжалась бы до нечитаемой полоски. */ .sidebar-collapsed .side-brand .side-brand-word{display:none} .sidebar-collapsed .side-brand .side-brand-mark{display:block;width:32px;height:32px;padding:0} .sidebar-collapsed .sidebar{padding:22px 12px} .sidebar-collapsed .sidebar nav a, .sidebar-collapsed .side-bottom>a, .sidebar-collapsed .side-bottom button{justify-content:center;gap:0;padding:0;font-size:0} .sidebar-collapsed .sidebar nav a iconify-icon, .sidebar-collapsed .side-bottom iconify-icon{font-size:21px} .sidebar-collapsed .sidebar nav a:hover{transform:none} /* На узком экране колонка и так становится нижней строкой — сворачивать нечего. */ @media(max-width:800px){.side-toggle{display:none}.sidebar-collapsed{--sidebar:0px}} /* ---- Вкладки окна заявки --------------------------------------------------- Вкладка — это