Добавлено переключение темы и улучшено оформление ссылок в боковой панели

2026-04-19 01:26:08 +03:00
parent f8d217465a
commit 195add8230
2 changed files with 171 additions and 26 deletions
--- 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';
@@ -42,10 +41,26 @@ const topLinks = [
    <div class="sl-flex social-icons">
      <SocialIcons />
    </div>
-      <ThemeSelect />
+    <button class="theme-toggle-btn" type="button" aria-label="Переключить тему" data-theme-toggle>
+      <svg class="icon-sun" aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none">
+        <circle cx="12" cy="12" r="4" />
+        <line x1="12" y1="2.5" x2="12" y2="5.5" />
+        <line x1="12" y1="18.5" x2="12" y2="21.5" />
+        <line x1="2.5" y1="12" x2="5.5" y2="12" />
+        <line x1="18.5" y1="12" x2="21.5" y2="12" />
+        <line x1="5" y1="5" x2="7.3" y2="7.3" />
+        <line x1="16.7" y1="16.7" x2="19" y2="19" />
+        <line x1="5" y1="19" x2="7.3" y2="16.7" />
+        <line x1="16.7" y1="7.3" x2="19" y2="5" />
+      </svg>
+      <svg class="icon-moon" aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none">
+        <path d="M15.3 3.8A8.9 8.9 0 1 0 20.2 16a7.4 7.4 0 1 1-4.9-12.2Z" />
+        <path d="m19.9 4.4.7 1.6 1.6.7-1.6.7-.7 1.6-.7-1.6-1.6-.7 1.6-.7.7-1.6Z" />
+      </svg>
+    </button>
    <LanguageSelect />
  </div>
-  </div>
+</div>
  <div class="wiki-read-progress" aria-hidden="true">
    <div class="wiki-read-progress__fill" data-read-progress></div>
  </div>
@@ -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));
--- 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 {