/* ============================================================================ shared/design-system/segmented.css — ЕДИНЫЙ переключатель (segmented control). Один вид на все «выбери одно из нескольких» во всех кабинетах: • мастер Задачи: .pill-toggle (хакатон / с вознаграждением, срок 3–30 дней, сценарий нейминга), .task-type-pills (тип задачи); • вкладки и фильтры: .cb-segment (Задачи компании, Биллинг, «Мои задачи» участника, переключатель решений); • настройки, рейтинг, уведомления: .segmented-control; • кошелёк: .segmented-control-small; • вход и регистрация: .pauth-segment. Раньше у каждого был свой фон, своя тень и своя активная кнопка; в тёмной теме выбранный пункт почти не отличался от остальных. Образец — переключатель срока в мастере в светлой теме: подложка в оттенок акцента, выбранный пункт — поднятая белая «таблетка» поверх неё. В тёмной подложка темнее карточки, выбранный пункт — спокойно светлее, без яркой заливки. Файл подключается последним в . Раскладку (ширина, перенос, сетка на мобильном) задают страницы — здесь только вид. Поэтому !important стоит только на свойствах вида: так страница не может случайно вернуть свой. ============================================================================ */ :root { /* Светлая: подложка — тот же розоватый оттенок акцента, что у фона мастера (--ws-bg-soft), рамки и тени — тоже от акцента. Цвета не смешивать с цветом текста: получается коричневый. */ --ws-seg-track: var(--ws-bg-soft, #f5eef1); --ws-seg-border: color-mix(in srgb, var(--ws-primary, #4f0c28) 8%, transparent); --ws-seg-fg: var(--ws-fg-muted, #6b6060); --ws-seg-fg-hover: var(--ws-fg, #271a20); --ws-seg-hover-bg: color-mix(in srgb, var(--ws-primary, #4f0c28) 5%, transparent); --ws-seg-active-bg: var(--ws-surface, #fff); --ws-seg-active-fg: var(--ws-fg, #271a20); --ws-seg-active-border: color-mix(in srgb, var(--ws-primary, #4f0c28) 10%, transparent); --ws-seg-active-shadow: 0 1px 2px rgba(79, 12, 40, 0.06), 0 2px 8px rgba(79, 12, 40, 0.06); --ws-seg-active-shadow-hover: 0 1px 2px rgba(79, 12, 40, 0.08), 0 4px 14px rgba(79, 12, 40, 0.10); } body.theme-dark { /* Тёмная: подложка темнее карточки, выбранный пункт — чуть светлее неё, без яркой заливки. */ --ws-seg-track: color-mix(in srgb, #000 28%, var(--ws-surface, #292321)); --ws-seg-border: color-mix(in srgb, var(--ws-fg, #ece7e3) 7%, transparent); --ws-seg-fg: color-mix(in srgb, var(--ws-fg, #ece7e3) 60%, transparent); --ws-seg-fg-hover: var(--ws-fg, #ece7e3); --ws-seg-hover-bg: color-mix(in srgb, var(--ws-fg, #ece7e3) 5%, transparent); --ws-seg-active-bg: color-mix(in srgb, var(--ws-fg, #ece7e3) 8%, var(--ws-surface, #292321)); --ws-seg-active-fg: color-mix(in srgb, var(--ws-fg, #ece7e3) 92%, transparent); --ws-seg-active-border: color-mix(in srgb, var(--ws-fg, #ece7e3) 10%, transparent); --ws-seg-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); --ws-seg-active-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.45); } /* ── Подложка ──────────────────────────────────────────────────────────── */ html body .pill-toggle, html body .task-type-pills, html body .cb-segment, html body .segmented-control, html body .segmented-control-small, html body .pauth-segment { gap: 4px; padding: 4px !important; border: 1px solid var(--ws-seg-border) !important; border-radius: 14px !important; background: var(--ws-seg-track) !important; box-shadow: none !important; } /* ── Пункт ─────────────────────────────────────────────────────────────── */ html body .pill-toggle > .pill-toggle-btn, html body .task-type-pills > .task-type-btn, html body .cb-segment > .cb-filter, html body .segmented-control > .segmented-control-btn, html body .segmented-control > .segment-btn, html body .segmented-control-small > .segment-pill, html body .pauth-segment > .pauth-segment-btn { min-height: 36px; border: 1px solid transparent !important; border-radius: 10px !important; background: transparent !important; color: var(--ws-seg-fg) !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease; } html body .pill-toggle > .pill-toggle-btn:not(.active):not([aria-checked="true"]):hover, html body .task-type-pills > .task-type-btn:not(.active):hover, html body .cb-segment > .cb-filter:not(.active):not(:disabled):hover, html body .segmented-control > .segmented-control-btn:not(.active):hover, html body .segmented-control > .segment-btn:not(.active):hover, html body .segmented-control-small > .segment-pill:not(.active):hover, html body .pauth-segment > .pauth-segment-btn:not(.active):hover { background: var(--ws-seg-hover-bg) !important; color: var(--ws-seg-fg-hover) !important; } /* ── Выбранный пункт ───────────────────────────────────────────────────── */ html body .pill-toggle > .pill-toggle-btn.active, html body .pill-toggle > .pill-toggle-btn[aria-checked="true"], html body .task-type-pills > .task-type-btn.active, html body .cb-segment > .cb-filter.active, html body .segmented-control > .segmented-control-btn.active, html body .segmented-control > .segment-btn.active, html body .segmented-control-small > .segment-pill.active, html body .pauth-segment > .pauth-segment-btn.active { border-color: var(--ws-seg-active-border) !important; background: var(--ws-seg-active-bg) !important; color: var(--ws-seg-active-fg) !important; box-shadow: var(--ws-seg-active-shadow) !important; } /* Наведение на выбранный: цвет и фон не меняются, «таблетка» лишь чуть приподнимается — тень плотнее. */ html body .pill-toggle > .pill-toggle-btn.active:hover, html body .pill-toggle > .pill-toggle-btn[aria-checked="true"]:hover, html body .task-type-pills > .task-type-btn.active:hover, html body .cb-segment > .cb-filter.active:hover, html body .segmented-control > .segmented-control-btn.active:hover, html body .segmented-control > .segment-btn.active:hover, html body .segmented-control-small > .segment-pill.active:hover, html body .pauth-segment > .pauth-segment-btn.active:hover { background: var(--ws-seg-active-bg) !important; color: var(--ws-seg-active-fg) !important; box-shadow: var(--ws-seg-active-shadow-hover) !important; } html body .pill-toggle > .pill-toggle-btn:focus-visible, html body .task-type-pills > .task-type-btn:focus-visible, html body .cb-segment > .cb-filter:focus-visible, html body .segmented-control > .segmented-control-btn:focus-visible, html body .segmented-control > .segment-btn:focus-visible, html body .segmented-control-small > .segment-pill:focus-visible, html body .pauth-segment > .pauth-segment-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--ws-primary, #4a0e25) 55%, transparent); outline-offset: 1px; } /* Иконки и счётчики внутри пункта — цвета пункта. */ html body :is(.pill-toggle-btn, .task-type-btn, .cb-filter, .segmented-control-btn, .segment-btn, .segment-pill, .pauth-segment-btn) :where(i, svg) { color: inherit; } @media (prefers-reduced-motion: reduce) { html body :is(.pill-toggle-btn, .task-type-btn, .cb-filter, .segmented-control-btn, .segment-btn, .segment-pill, .pauth-segment-btn) { transition: none; } }