/* Поиск по всей платформе: кнопка в шапке хаба и оверлей выдачи. Пара к lessons/player/hub-search.js, подключается только на hub.html. Три решения, которые тут закреплены, и почему. 1. Оверлея в разметке НЕТ. Его рождает скрипт при первом открытии и после закрытия удаляет из DOM целиком. Спрятанный оверлей однажды переживёт закрытие: авторский display в классе молча бьёт атрибут hidden, и слой на весь экран останется висеть поверх страницы. Это уже случалось на платформе, лечится не флагом, а удалением узла. Поэтому у .hs нет ни одного правила про hidden: показывать и прятать тут нечего. 2. Цвета только через переменные тем. Платформа переключает оформление атрибутом data-theme на , тем восемь, и prefers-color-scheme не значит здесь ничего. Ни одного своего hex: всё из --ink, --gold, --bg-*, --core, --shell-line, которые каждая тема переопределяет. 3. Движение одноразовое и короткое. Вечных анимаций тут нет ни одной: в покое хаб держит две, и поиск к ним не добавляется. */ /* ── кнопка в шапке ──────────────────────────────────────────────── Ростом и цветом повторяет соседнюю «к карте уроков»: те же токены, тот же 48-пиксельный рост под палец, тот же фокус-ринг. */ .hs-open{ display:flex;gap:9px;align-items:center;justify-content:flex-start;flex:none; min-height:48px;min-width:48px;padding:0 16px;border:0;border-radius:14px;cursor:pointer; color:var(--ink-dim);font-family:inherit;font-weight:700;font-size:.875rem;text-align:left; background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line); transition:color var(--mo-ui,.18s) var(--ease,ease),background var(--mo-ui,.18s) var(--ease,ease),transform var(--mo-ui,.18s) var(--ease,ease); } /* Свободное место шапки забирает поиск, «к карте уроков» встаёт вплотную: у неё своя margin-left:auto в hub-groups.css, и без этой строки две автоматических метки поделили бы пустоту пополам и развели кнопки. */ .hs-open{margin-left:auto} .hs-open+.hg-map{margin-left:0} .hs-open:hover{color:var(--ink);background:var(--gold-soft)} .hs-open:active{transform:scale(.97)} .hs-open:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .hs-open svg{width:18px;height:18px;flex:none} .hs-open kbd{ margin-left:6px;padding:2px 6px;border-radius:6px;font:inherit;font-size:.75rem;font-weight:700; color:var(--ink-faint);background:color-mix(in oklab,var(--ink) 8%,transparent); } @media (max-width:640px){.hs-open kbd{display:none}} /* ── оверлей ──────────────────────────────────────────────────────── */ .hs{ position:fixed;inset:0;z-index:900; display:flex;justify-content:center;align-items:flex-start; padding:clamp(12px,7vh,84px) 16px 16px; background:color-mix(in oklab,var(--bg-0,#000) 74%,transparent); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); opacity:0;transition:opacity .18s ease; } .hs.on{opacity:1} .hs-box{ display:flex;flex-direction:column;width:100%;max-width:680px;max-height:min(78vh,720px); border-radius:20px;overflow:hidden; background:color-mix(in oklab,var(--bg-1) 92%,var(--ink) 2%); box-shadow:inset 0 0 0 1px var(--shell-line),0 30px 70px -28px rgba(0,0,0,.75); transform:translateY(-10px) scale(.985);transition:transform .2s cubic-bezier(.2,.8,.3,1); } .hs.on .hs-box{transform:none} @media (max-width:640px){ .hs{padding:0} .hs-box{max-width:none;max-height:none;height:100%;border-radius:0} } /* ── поле ─────────────────────────────────────────────────────────── */ .hs-field{ display:flex;gap:10px;align-items:center;flex:none; padding:10px 10px 10px 16px;border-bottom:1px solid var(--shell-line); } .hs-field>svg{width:20px;height:20px;flex:none;color:var(--ink-faint)} .hs-in{ flex:1;min-width:0;min-height:44px;border:0;outline:0;background:none; color:var(--ink);font-family:inherit;font-size:1.0625rem;font-weight:600; -webkit-appearance:none;appearance:none; } .hs-in::placeholder{color:var(--ink-faint);font-weight:500} .hs-in::-webkit-search-cancel-button{display:none} .hs-x{ display:flex;align-items:center;justify-content:center;flex:none; width:44px;height:44px;border:0;border-radius:12px;cursor:pointer; color:var(--ink-dim);background:none; } .hs-x:hover{color:var(--ink);background:var(--gold-soft)} .hs-x:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} .hs-x svg{width:18px;height:18px} /* ── выдача ───────────────────────────────────────────────────────── */ .hs-out{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 8px 12px} .hs-g{margin:10px 0 2px;padding:0 10px;color:var(--gold);font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .hs-g:first-child{margin-top:2px} .hs-r{ display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px; min-height:52px;padding:9px 12px;border-radius:12px;text-decoration:none; color:var(--ink); } .hs-r:hover,.hs-r[aria-selected="true"]{background:var(--gold-soft)} .hs-r[aria-selected="true"]{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 40%,transparent)} .hs-r:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} .hs-t{grid-column:1;font-size:.9375rem;font-weight:700;line-height:1.3} .hs-s{ grid-column:1;color:var(--ink-dim);font-size:.8125rem;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .hs-k{ grid-column:2;grid-row:1/3;align-self:center;flex:none; padding:4px 9px;border-radius:999px;white-space:nowrap; color:var(--ink-dim);font-size:.6875rem;font-weight:800; background:color-mix(in oklab,var(--ink) 7%,transparent); } .hs-r .hs-mine{color:var(--mint,#8FE3B8)} /* ── строки состояний ─────────────────────────────────────────────── */ .hs-note{margin:14px 12px;color:var(--ink-dim);font-size:.875rem;line-height:1.5} .hs-note b{color:var(--ink);font-variant-numeric:tabular-nums} .hs-e{padding:16px 12px 8px} .hs-e p{margin:0 0 10px;font-size:.9375rem;line-height:1.5} .hs-e-q{color:var(--ink);font-weight:700} .hs-e-why{color:var(--ink-dim)} .hs-e-go{color:var(--ink-dim);font-size:.8125rem} .hs-alt{display:flex;flex-wrap:wrap;gap:8px} .hs-alt a{ display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px; border-radius:12px;text-decoration:none;color:var(--ink);font-size:.875rem;font-weight:700; background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line); } .hs-alt a:hover{background:var(--gold-soft)} .hs-alt a:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .hs-alt i{font-style:normal;color:var(--ink-faint);font-size:.75rem;font-variant-numeric:tabular-nums} .hs-foot{ flex:none;display:flex;gap:12px;justify-content:space-between;align-items:center; padding:9px 16px;border-top:1px solid var(--shell-line); color:var(--ink-faint);font-size:.75rem;line-height:1.4; } .hs-foot span:last-child{text-align:right} @media (max-width:640px){.hs-foot span:last-child{display:none}} /* Покой без движения: вход и уход оверлея пропадают целиком, состояние остаётся тем же. */ @media (prefers-reduced-motion:reduce){ .hs,.hs-box{transition:none} .hs{opacity:1} .hs-box{transform:none} }