diff --git a/src/components/WikiHeader.astro b/src/components/WikiHeader.astro index d93b112..4fa8e3f 100644 --- a/src/components/WikiHeader.astro +++ b/src/components/WikiHeader.astro @@ -33,8 +33,30 @@ const topLinks = [ -
+
{shouldRenderSearch && } +
@@ -90,7 +112,7 @@ const topLinks = [ const bindReadProgress = () => { const backToTopBtn = document.querySelector('[data-back-to-top]'); - const themeToggleBtn = document.querySelector('[data-theme-toggle]'); + const themeToggleBtns = document.querySelectorAll('[data-theme-toggle]'); if (backToTopBtn instanceof HTMLElement) { if (backToTopBtn.parentElement !== document.body) { @@ -102,15 +124,16 @@ const topLinks = [ }); } - if (themeToggleBtn instanceof HTMLButtonElement) { - themeToggleBtn.addEventListener('click', () => { + themeToggleBtns.forEach((btn) => { + if (!(btn instanceof HTMLButtonElement)) return; + btn.addEventListener('click', () => { const root = document.documentElement; const current = root.dataset.theme === 'light' ? 'light' : 'dark'; const next = current === 'dark' ? 'light' : 'dark'; root.dataset.theme = next; localStorage.setItem('starlight-theme', next); }); - } + }); setReadProgress(); window.addEventListener('scroll', setReadProgress, { passive: true }); @@ -183,6 +206,11 @@ const topLinks = [ align-items: center; } + .header-tools { + align-items: center; + gap: 0.5rem; + } + .theme-toggle-btn { display: inline-flex; align-items: center; diff --git a/src/styles/wiki-egames.css b/src/styles/wiki-egames.css index eae59fa..74a9db5 100644 --- a/src/styles/wiki-egames.css +++ b/src/styles/wiki-egames.css @@ -136,6 +136,72 @@ body { border-bottom-color: color-mix(in srgb, var(--sl-color-hairline) 92%, transparent); } +/* Приводим мобильную кнопку меню/закрытия к стилю веб-иконок в хедере. */ +starlight-menu-button button { + border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 82%, transparent) !important; + border-radius: 50% !important; + width: 2.25rem !important; + height: 2.25rem !important; + top: calc((var(--sl-nav-height) - 2.25rem) / 2) !important; + padding: 0 !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + background: color-mix(in srgb, var(--sl-color-bg-nav) 88%, transparent) !important; + color: var(--sl-color-gray-2) !important; + box-shadow: 0 0 0 1px color-mix(in srgb, var(--sl-color-hairline) 28%, transparent) !important; + transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, + transform 160ms ease !important; +} + +starlight-menu-button button .open-menu, +starlight-menu-button button .close-menu { + display: none !important; +} + +starlight-menu-button button::before { + content: ''; + display: block; + width: 1.1rem; + text-align: center; + line-height: 1; + font-weight: 600; +} + +starlight-menu-button[aria-expanded='true'] button::before { + content: '✕'; + font-size: 1.08rem; + letter-spacing: 0; + transform: none; +} + +starlight-menu-button:not([aria-expanded='true']) button::before { + content: '⋯'; + font-size: 1.25rem; + letter-spacing: 0; + transform: none; +} + +starlight-menu-button button:hover { + border-color: color-mix(in srgb, var(--sl-color-accent) 42%, transparent) !important; + background: color-mix(in srgb, var(--sl-color-accent-low) 56%, transparent) !important; + color: var(--sl-color-white) !important; + transform: translateY(-1px) scale(1.02) !important; + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--sl-color-accent) 24%, transparent), + 0 6px 14px color-mix(in srgb, var(--sl-color-accent) 22%, transparent) !important; +} + +[data-mobile-menu-expanded] starlight-menu-button button { + border-color: color-mix(in srgb, var(--sl-color-accent) 52%, transparent) !important; + background: color-mix(in srgb, var(--sl-color-accent-low) 72%, transparent) !important; + color: var(--sl-color-white) !important; + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--sl-color-accent) 24%, transparent), + 0 6px 14px color-mix(in srgb, var(--sl-color-accent) 22%, transparent), + 0 0 16px color-mix(in srgb, var(--sl-color-accent) 20%, transparent) !important; +} + .sidebar-pane { background: radial-gradient(circle at 8% -4%, color-mix(in srgb, var(--wiki-purple-2) 7%, transparent), transparent 38%), @@ -391,6 +457,57 @@ starlight-toc a[aria-current='true']::before { transform: scaleY(1); } +starlight-theme-select label { + --sl-select-width: 2.3rem !important; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.3rem; + height: 2.3rem; + padding: 0; + border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 72%, transparent); + border-radius: 50%; + background: color-mix(in srgb, var(--sl-color-bg-nav) 88%, transparent); + color: var(--sl-color-gray-2); + transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, + transform 160ms ease; +} + +/* Убираем стандартный выпадающий селект темы (Тёмная/Светлая/Авто). */ +starlight-theme-select { + display: none !important; +} + +starlight-theme-select label:hover { + border-color: color-mix(in srgb, var(--sl-color-accent) 42%, transparent); + background: color-mix(in srgb, var(--sl-color-accent-low) 56%, transparent); + color: var(--sl-color-white); + transform: translateY(-1px); + box-shadow: 0 6px 14px color-mix(in srgb, var(--sl-color-accent) 18%, transparent); +} + +starlight-theme-select .label-icon { + width: 1.1rem; + height: 1.1rem; + color: #6eead8; +} + +:root[data-theme='light'] starlight-theme-select .label-icon { + color: #2e6b57; +} + +starlight-theme-select select { + position: absolute; + inset: 0; + opacity: 0; + cursor: pointer; +} + +starlight-theme-select .caret { + display: none; +} + .starlight-aside { border-radius: 0.2rem; border-inline-start-width: 0.26rem; @@ -508,6 +625,29 @@ starlight-toc a[aria-current='true']::before { } @media (max-width: 50rem) { + .wiki-header { + gap: 0.5rem; + } + + /* Освобождаем место под фиксированную кнопку меню, чтобы поиск не заезжал под нее. */ + .wiki-header > div:nth-child(2) { + flex: 1; + min-width: 0; + margin-inline-end: 2.9rem; + } + + .wiki-header > div:nth-child(2) site-search { + width: 100%; + } + + .wiki-read-progress { + top: var(--sl-nav-height); + } + + :root[data-mobile-menu-expanded] .wiki-read-progress { + display: none; + } + .main-frame { padding-inline: 0.56rem; }