diff --git a/src/components/WikiHeader.astro b/src/components/WikiHeader.astro index 24f30f5..d93b112 100644 --- a/src/components/WikiHeader.astro +++ b/src/components/WikiHeader.astro @@ -5,7 +5,6 @@ import LanguageSelect from 'virtual:starlight/components/LanguageSelect'; import Search from 'virtual:starlight/components/Search'; import SiteTitle from 'virtual:starlight/components/SiteTitle'; import SocialIcons from 'virtual:starlight/components/SocialIcons'; -import ThemeSelect from 'virtual:starlight/components/ThemeSelect'; const shouldRenderSearch = config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro'; @@ -38,14 +37,30 @@ const topLinks = [ {shouldRenderSearch && } -
- - - +
+ + +
+
@@ -75,6 +90,7 @@ const topLinks = [ const bindReadProgress = () => { const backToTopBtn = document.querySelector('[data-back-to-top]'); + const themeToggleBtn = document.querySelector('[data-theme-toggle]'); if (backToTopBtn instanceof HTMLElement) { if (backToTopBtn.parentElement !== document.body) { @@ -86,6 +102,16 @@ const topLinks = [ }); } + if (themeToggleBtn instanceof HTMLButtonElement) { + themeToggleBtn.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 }); window.addEventListener('resize', setReadProgress); @@ -114,7 +140,7 @@ const topLinks = [ justify-content: space-between; align-items: center; height: 100%; - padding-bottom: 0.28rem; + padding-block: 0.34rem; } .title-wrapper { @@ -157,11 +183,70 @@ const topLinks = [ align-items: center; } + .theme-toggle-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.25rem; + height: 2.25rem; + border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 78%, transparent); + border-radius: 50%; + background: color-mix(in srgb, var(--sl-color-bg-nav) 88%, transparent); + color: #2a5f4d; + box-shadow: 0 0 0 1px color-mix(in srgb, var(--sl-color-hairline) 28%, transparent); + transition: color 160ms ease, transform 160ms ease, background 160ms ease, border-color 160ms ease, + box-shadow 160ms ease; + } + + .theme-toggle-btn:hover { + transform: translateY(-1px) scale(1.02); + border-color: color-mix(in srgb, var(--sl-color-accent) 46%, transparent); + 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); + } + + .theme-toggle-btn svg { + width: 1.15rem; + height: 1.15rem; + stroke: currentColor; + stroke-width: 1.9; + stroke-linecap: round; + stroke-linejoin: round; + } + + .theme-toggle-btn .icon-sun, + .theme-toggle-btn .icon-moon { + display: none; + } + + :global(:root[data-theme='dark']) .theme-toggle-btn .icon-moon { + display: block; + } + + :global(:root[data-theme='light']) .theme-toggle-btn .icon-sun { + display: block; + } + + :global(:root[data-theme='dark']) .theme-toggle-btn { + color: #66f5df; + background: color-mix(in srgb, #0f1b2a 86%, transparent); + border-color: color-mix(in srgb, #2b4c5a 65%, transparent); + } + + :global(:root[data-theme='light']) .theme-toggle-btn { + color: #2e6b57; + background: color-mix(in srgb, #f2f7ff 92%, transparent); + border-color: color-mix(in srgb, #b4c5db 72%, transparent); + } + .wiki-read-progress { - position: absolute; + position: fixed; inset-inline: 0; - inset-block-end: 0; + top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height)); height: 2px; + z-index: calc(var(--sl-z-index-navbar) - 1); + pointer-events: none; background: color-mix(in srgb, var(--sl-color-hairline) 65%, transparent); overflow: hidden; } @@ -270,10 +355,6 @@ const topLinks = [ } @media (max-width: 50rem) { - .wiki-header { - padding-bottom: 0.34rem; - } - .wiki-back-to-top { top: auto; right: max(0.62rem, env(safe-area-inset-right)); diff --git a/src/styles/wiki-egames.css b/src/styles/wiki-egames.css index 0c647a7..eae59fa 100644 --- a/src/styles/wiki-egames.css +++ b/src/styles/wiki-egames.css @@ -143,26 +143,39 @@ body { } .sidebar-content a { - border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 50%, transparent); - border-radius: 0.2rem; - transition: border-color 170ms ease, background 170ms ease, color 170ms ease; + position: relative; + border: 0; + border-radius: 0.16rem; + padding-inline-start: 0.72rem; + transition: background 170ms ease, color 170ms ease; } .sidebar-content a:hover { - border-color: color-mix(in srgb, var(--sl-color-accent) 34%, transparent); - background: color-mix(in srgb, var(--sl-color-accent-low) 70%, transparent); + background: color-mix(in srgb, var(--sl-color-accent-low) 32%, transparent); } .sidebar-content :is(a[aria-current='page'], a[aria-current='page']:hover) { - border-color: color-mix(in srgb, var(--sl-color-accent) 52%, transparent); - background: linear-gradient( - 130deg, - color-mix(in srgb, var(--wiki-purple-3) 14%, transparent), - color-mix(in srgb, var(--wiki-blue-2) 12%, transparent) - ); + background: color-mix(in srgb, var(--sl-color-gray-6) 62%, transparent); color: var(--sl-color-white); } +.sidebar-content ul ul li { + border-inline-start-width: 2px; + border-inline-start-color: color-mix(in srgb, var(--sl-color-hairline-light) 86%, transparent); + transition: border-inline-start-color 180ms ease, border-inline-start-width 180ms ease; +} + +.sidebar-content ul ul li:has(> a:hover) { + border-inline-start-width: 4px; + border-inline-start-color: color-mix(in srgb, var(--wiki-purple-2) 72%, #ffffff); +} + +/* Делаем подсветку активного пункта частью общей левой линии группы. */ +.sidebar-content li:has(> a[aria-current='page']) { + border-inline-start-width: 4px; + border-inline-start-color: color-mix(in srgb, var(--wiki-purple-2) 85%, #ffffff); +} + .content-panel > .sl-container { border-radius: 0.2rem; border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 100%, transparent); @@ -322,9 +335,60 @@ starlight-toc ul ul { } starlight-toc a { + position: relative; display: block; - padding: 0.16rem 0; + padding: 0.2rem 0.42rem; line-height: 1.38; + border-radius: 0.12rem; + transition: background 180ms ease, color 180ms ease, transform 180ms ease; +} + +starlight-toc a::before { + content: ''; + position: absolute; + inset-inline-start: 0.12rem; + inset-block: 0.2rem; + width: 2px; + border-radius: 99px; + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--wiki-purple-1) 92%, #ffffff), + color-mix(in srgb, var(--wiki-purple-3) 88%, #ffffff) + ); + opacity: 0; + transform: scaleY(0.65); + transform-origin: center; + transition: opacity 180ms ease, transform 180ms ease; +} + +starlight-toc a:hover { + transform: translateX(2px); + background: linear-gradient( + 90deg, + color-mix(in srgb, var(--wiki-purple-2) 20%, transparent), + color-mix(in srgb, var(--wiki-blue-2) 10%, transparent) + ); + color: var(--sl-color-white); +} + +starlight-toc a:hover::before { + opacity: 1; + transform: scaleY(1); +} + +starlight-toc a[aria-current='true'] { + background: linear-gradient( + 90deg, + color-mix(in srgb, var(--wiki-purple-2) 34%, transparent), + color-mix(in srgb, var(--wiki-purple-3) 18%, transparent) + ); + color: var(--sl-color-white); + transform: translateX(2px); +} + +starlight-toc a[aria-current='true']::before { + opacity: 1; + transform: scaleY(1); } .starlight-aside {