/* ============================================================================ Оркестратор — базовый слой интерфейса для страниц модулей. ---------------------------------------------------------------------------- Подключается ПЕРВЫМ в каждой модульной страницы, до собственного CSS модуля. Даёт общие умолчания там, где у модуля своего стиля нет; всё, что модуль задал сам, перебивает этот файл (он идёт раньше по каскаду). Что здесь: 1) скроллбары — одна тонкая форма на всю платформу (8px, без трека); 2) поля ввода, селекты, textarea — одна геометрия и один шрифт; 3) видимый фокус с клавиатуры (:focus-visible) — его не было нигде; 4) мелкая гигиена: курсор на кнопках, вид disabled, перенос длинных строк. Токены берём из платформы, с запасными значениями для модулей со своими именами переменных (--bg/--panel/--line/--bd/--tx и т.п.). ========================================================================== */ /* ВЕСЬ файл — в собственном слое каскада. Tailwind в основном интерфейсе платформы держит утилиты в @layer utilities, а НЕслоёные правила бьют любой слой независимо от веса селектора: из-за этого здешние умолчания перебивали, например, pl-7 у поля «Поиск задач» и лупа наезжала на текст. Слой orq-base объявлен раньше слоёв Tailwind, значит любая утилита его перебивает. На страницах модулей их собственный CSS неслоёный и тоже перебивает — то есть исходное намерение файла сохранено. */ @layer orq-base { :root { /* Толщина и цвет скролла — единые на все модули. */ --orq-scroll-size: 8px; --orq-scroll-thumb: color-mix(in oklch, currentColor 22%, transparent); --orq-scroll-thumb-hover: color-mix(in oklch, currentColor 38%, transparent); /* Геометрия полей. */ --orq-field-py: 7px; --orq-field-px: 10px; --orq-field-radius: 8px; --orq-ring: color-mix(in oklch, currentColor 55%, transparent); } /* ── 1. Скроллбары ───────────────────────────────────────────────────────── Прозрачный трек + полупрозрачный ползунок от цвета текста: одинаково выглядит и в тёмной, и в светлой теме, не спорит с фоном карточек. */ * { scrollbar-width: thin; scrollbar-color: var(--orq-scroll-thumb) transparent; } ::-webkit-scrollbar { width: var(--orq-scroll-size); height: var(--orq-scroll-size); background: transparent; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--orq-scroll-thumb); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--orq-scroll-thumb-hover); } /* Кнопки-стрелки на концах полосы выключаем — они утолщают полосу. */ ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* ── 2. Поля ввода ──────────────────────────────────────────────────────── Одна высота, один радиус, наследуемый шрифт. Модуль со своими правилами спокойно перебивает: этот файл подключён раньше. */ /* :where() обнуляет вес селектора. Без него `input:not(...)` (вес выше класса) перебивал утилиты Tailwind в основном интерфейсе платформы: у поля «Поиск задач» слетал pl-7, и лупа наезжала на текст. Теперь это именно умолчание — его перебивает любой класс, а модули без своих стилей геометрию всё так же получают. */ :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])), :where(select), :where(textarea) { font: inherit; font-size: 13px; line-height: 1.4; color: inherit; background: var(--background, var(--bg, var(--panel, transparent))); border: 1px solid var(--input, var(--border, var(--line, var(--bd, rgba(128, 128, 128, .32))))); border-radius: var(--radius, var(--orq-field-radius)); padding: var(--orq-field-py) var(--orq-field-px); transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease; } :where(textarea) { resize: vertical; } input::placeholder, textarea::placeholder { color: color-mix(in oklch, currentColor 45%, transparent); } /* Селект: убираем системный вид и рисуем свою стрелку, иначе в тёмной теме виджет ОС остаётся светлым и с чужим шрифтом. Тоже умолчанием — свои селекты платформы (у них уже есть и стрелка, и отступы) не перерисовываем. */ :where(select) { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8f98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 12px 12px; } /* Выпадающий список рисует ОС — задаём хотя бы читаемые цвета пунктов. */ select option { background: var(--panel, var(--background, #1c1c1c)); color: inherit; } /* ── 3. Фокус с клавиатуры ──────────────────────────────────────────────── Мышиный клик рамку не рисует, Tab — рисует. */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--ring, var(--orq-ring)); outline-offset: 1px; border-radius: inherit; } /* ── 4. Гигиена ───────────────────────────────────────────────────────────*/ :where(button:not(:disabled), [role="button"]:not(:disabled), label, summary) { cursor: pointer; } button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; } /* Длинные ссылки/идентификаторы не должны растягивать карточку. ВАЖНО: именно break-word, а не anywhere. `anywhere` участвует в расчёте минимальной ширины — во flex/grid колонки начинают сжиматься сильнее обычного, и вёрстка основного интерфейса «съезжает». break-word такого эффекта не даёт. */ :where(td, th, p, li, dd) { overflow-wrap: break-word; } @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } } /* @layer orq-base */