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

2026-04-19 10:42:45 +03:00
parent 195add8230
commit 201ae9300a
2 changed files with 173 additions and 5 deletions
--- a/src/components/WikiHeader.astro
+++ b/src/components/WikiHeader.astro
@@ -33,8 +33,30 @@ const topLinks = [
      </nav>
    </div>

-    <div class="sl-flex print:hidden">
+    <div class="sl-flex print:hidden header-tools">
      {shouldRenderSearch && <Search />}
+      <button
+        class="theme-toggle-btn mobile-theme-toggle md:sl-hidden"
+        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>
    </div>

  <div class="sl-hidden md:sl-flex print:hidden right-group">
@@ -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;
--- 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;
  }