/* ========================================================= StartPOZI — Общее меню + панель настроек (shared) Меню: справа, стиль как в about.html (тёмное стекло + cyan). Используется на всех страницах. Стили изолированы (префикс .spz-). ========================================================= */ /* ====================== @font-face ====================== */ @font-face { font-family: 'Spi Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('font/SpiSansProduct-Regular.woff2') format('woff2'), url('font/SpiSansProduct-Regular.woff') format('woff'); } @font-face { font-family: 'Spi Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('font/SpiSansProduct-Medium.woff2') format('woff2'), url('font/SpiSansProduct-Medium.woff') format('woff'); } @font-face { font-family: 'Spi Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('font/SpiSansProduct-Bold.woff2') format('woff2'), url('font/SpiSansProduct-Bold.woff') format('woff'); } @font-face { font-family: 'Spi Sans Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('font/SpiSansDisplay-Regular.woff2') format('woff2'), url('font/SpiSansDisplay-Regular.woff') format('woff'); } @font-face { font-family: 'Spi Sans Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('font/SpiSansDisplay-Medium.woff2') format('woff2'), url('font/SpiSansDisplay-Medium.woff') format('woff'); } @font-face { font-family: 'Spi Sans Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('font/SpiSansDisplay-Bold.woff2') format('woff2'), url('font/SpiSansDisplay-Bold.woff') format('woff'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('font/inter/Inter.cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('font/inter/Inter.latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* =================== Применение шрифта сайта =================== Важно: переопределяем font-family на body и всех элементах, КРОМЕ (иконки FontAwesome). Без !important шрифт не применялся, т.к. на about.html/apps.html есть правило * { font-family: ... }. */ body.spz-custom-font, body.spz-custom-font *:not(i) { font-family: var(--spz-applied-font, 'Spi Sans', sans-serif) !important; } /* =================== Тема панели настроек + страницы =================== */ /* Переменные панели (--spz-*) и страницы (--bg-color и т.д.) на уровне :root, чтобы ранний инлайн-скрипт в применял тему ДО первой отрисовки (без белой вспышки / FOUC). body.dark-theme дублирует значения для старых hover-правил — те же значения, конфликта нет. */ :root { --spz-bg: #ffffff; --spz-text: #222222; --spz-text-light: #70757a; --spz-border: #dfe1e5; --spz-primary: #4a73e8; --spz-header: #fafafa; --spz-shadow: rgba(0,0,0,0.28); } :root[data-spz-theme="dark"] { --spz-bg: #0d1117; --spz-text: #f0f6fc; --spz-text-light: #8b949e; --spz-border: #30363d; --spz-primary: #58a6ff; --spz-header: #161b22; --spz-shadow: rgba(0,0,0,0.55); --bg-color: #0d1117; --text-color: #f0f6fc; --text-light: #8b949e; --border-color: #30363d; --primary-color: #58a6ff; --primary-hover: #79c0ff; --header-bg: #161b22; --sidebar-bg: #0d1117; --result-title: #58a6ff; --result-visited: #bc8cff; --footer-bg: #161b22; --footer-border: #30363d; } :root[data-spz-theme="dark2"] { --spz-bg: #202124; --spz-text: #e8eaed; --spz-text-light: #9aa0a6; --spz-border: #3c4043; --spz-primary: #8ab4f8; --spz-header: #202124; --spz-shadow: rgba(0,0,0,0.55); --bg-color: #202124; --text-color: #e8eaed; --text-light: #9aa0a6; --border-color: #3c4043; --primary-color: #8ab4f8; --primary-hover: #aecbfa; --header-bg: #202124; --sidebar-bg: #202124; --result-title: #8ab4f8; --result-visited: #c58af9; --footer-bg: #171717; --footer-border: #3c4043; } :root[data-spz-theme="terminal"] { --spz-bg: #0a0e0a; --spz-text: #c8d3c8; --spz-text-light: #6a8a6a; --spz-border: #1f3a1f; --spz-primary: #50f148; --spz-header: #0d130d; --spz-shadow: rgba(0,0,0,0.55); --bg-color: #0a0e0a; --text-color: #c8d3c8; --text-light: #6a8a6a; --border-color: #1f3a1f; --primary-color: #50f148; --primary-hover: #6dff63; --header-bg: #0d130d; --sidebar-bg: #0a0e0a; --result-title: #50f148; --result-visited: #a1ac25; --result-snippet: #b8c8b8; --result-url: #a1ac25; --footer-bg: #0d130d; --footer-border: #1f3a1f; } /* ============== Меню (сверху СПРАВА, обычный стиль страницы) ============== */ .spz-menu-btn { position: fixed; top: 16px; right: 16px; z-index: 1800; width: 42px; height: 42px; border: 1px solid var(--spz-border); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--spz-text); background: var(--spz-bg); box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: border-color 0.2s, color 0.2s, box-shadow 0.2s; } .spz-menu-btn:hover { border-color: var(--spz-primary); color: var(--spz-primary); box-shadow: 0 2px 12px rgba(0,0,0,0.12); } .spz-menu-btn svg { width: 20px; height: 20px; display: block; } .spz-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1899; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .spz-menu-overlay.active { opacity: 1; visibility: visible; } /* Боковое меню — выезжает справа */ .spz-side-menu { position: fixed; top: 0; right: -340px; width: 320px; max-width: 88vw; height: 100%; background: var(--spz-bg); color: var(--spz-text); border-left: 1px solid var(--spz-border); box-shadow: -5px 0 20px rgba(0,0,0,0.15); z-index: 1900; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; padding: 20px 18px; } .spz-side-menu.active { right: 0; } .spz-side-menu::-webkit-scrollbar { width: 6px; } .spz-side-menu::-webkit-scrollbar-thumb { background: var(--spz-border); border-radius: 10px; } .spz-menu-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--spz-border); margin-bottom: 15px; } .spz-menu-title { font-size: 1.15em; font-weight: 600; color: var(--spz-text); } .spz-menu-close { background: none; border: none; color: var(--spz-text); cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, color 0.2s; } .spz-menu-close:hover { background-color: rgba(0,0,0,0.06); color: var(--spz-primary); } :root[data-spz-theme="dark"] .spz-menu-close:hover, :root[data-spz-theme="dark2"] .spz-menu-close:hover { background-color: rgba(255,255,255,0.1); } .spz-menu-close svg { width: 18px; height: 18px; } .spz-menu-section { margin-bottom: 20px; } .spz-menu-section + .spz-menu-section { border-top: 1px solid var(--spz-border); padding-top: 16px; } .spz-menu-section h3 { font-size: 0.8em; color: var(--spz-text-light); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; padding-left: 12px; } .spz-menu-item { display: flex; align-items: center; gap: 13px; padding: 11px 14px; color: var(--spz-text); text-decoration: none; border-radius: 8px; margin-bottom: 4px; background: transparent; border: 1px solid transparent; cursor: pointer; font-size: 14px; font-weight: 500; transition: background 0.2s, color 0.2s, border-color 0.2s; } .spz-menu-item:hover { background: rgba(74,115,232,0.10); border-color: rgba(74,115,232,0.25); color: var(--spz-primary); text-decoration: none; } :root[data-spz-theme="dark"] .spz-menu-item:hover, :root[data-spz-theme="dark2"] .spz-menu-item:hover { background: rgba(88,166,255,0.14); } .spz-menu-item svg { width: 18px; height: 18px; color: var(--spz-text-light); flex-shrink: 0; transition: color 0.2s; } .spz-menu-item:hover svg { color: var(--spz-primary); } .spz-menu-item.active { background: rgba(74,115,232,0.16); color: var(--spz-primary); font-weight: 600; } .spz-menu-item.active svg { color: var(--spz-primary); } /* =================== Модалка настроек =================== */ .spz-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 2000; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } .spz-overlay.active { opacity: 1; visibility: visible; } .spz-modal { position: fixed; inset: 0; z-index: 2001; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s, visibility 0.25s; } .spz-modal.active { opacity: 1; visibility: visible; pointer-events: auto; } .spz-content { background: var(--spz-bg); border-radius: 14px; width: 92%; max-width: 480px; max-height: 86vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 16px 48px var(--spz-shadow); transform: translateY(10px) scale(0.98); transition: transform 0.25s; } .spz-modal.active .spz-content { transform: translateY(0) scale(1); } .spz-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--spz-border); } .spz-modal__title { font-size: 16px; font-weight: 500; color: var(--spz-text); } .spz-modal__close { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--spz-text-light); font-size: 15px; line-height: 1; cursor: pointer; text-decoration: none; } .spz-modal__close:hover { background: rgba(0,0,0,0.06); color: var(--spz-text); } :root[data-spz-theme="dark"] .spz-modal__close:hover, :root[data-spz-theme="dark2"] .spz-modal__close:hover { background: rgba(255,255,255,0.1); } .spz-modal__body { padding: 6px 20px 18px; overflow-y: auto; flex: 1; } .spz-modal__body::-webkit-scrollbar { width: 6px; } .spz-modal__body::-webkit-scrollbar-thumb { background: var(--spz-border); border-radius: 6px; } .spz-section { padding: 14px 0; border-bottom: 1px solid var(--spz-border); } .spz-section:last-of-type { border-bottom: none; } .spz-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .spz-section__label { font-size: 12px; font-weight: 700; color: var(--spz-text-light); text-transform: uppercase; letter-spacing: 0.5px; } .spz-section__link { font-size: 12px; color: var(--spz-primary); cursor: pointer; text-decoration: none; } .spz-section__link:hover { text-decoration: underline; } .spz-field { display: flex; align-items: center; gap: 14px; padding: 10px 0; min-height: 42px; } .spz-field > .spz-text { flex: 1; min-width: 0; } .spz-field .spz-ctrl { flex-shrink: 0; } .spz-label { margin: 0; font-size: 14px; font-weight: 500; color: var(--spz-text); } .spz-desc { margin: 2px 0 0; font-size: 12px; color: var(--spz-text-light); line-height: 1.4; } .spz-select { position: relative; } .spz-select__input { appearance: none; -webkit-appearance: none; width: 160px; padding: 8px 28px 8px 12px; border-radius: 8px; border: 1px solid var(--spz-border); background-color: var(--spz-bg); color: var(--spz-text); font-size: 13px; cursor: pointer; } .spz-select__input:focus { outline: none; border-color: var(--spz-primary); } .spz-select::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-65%) rotate(45deg); width: 7px; height: 7px; border-right: 2px solid var(--spz-text-light); border-bottom: 2px solid var(--spz-text-light); pointer-events: none; } .spz-switch { position: relative; display: inline-block; width: 56px; height: 28px; flex-shrink: 0; } .spz-switch__inp { position: absolute; opacity: 0; width: 0; height: 0; } .spz-switch__label { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 16px; background: #c4c8cc; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; user-select: none; transition: background 0.2s; } .spz-switch__inp:checked + .spz-switch__label { background: var(--spz-primary); } .spz-switch-on { display: none; } .spz-switch-off { display: inline; } .spz-switch__inp:checked + .spz-switch__label .spz-switch-on { display: inline; } .spz-switch__inp:checked + .spz-switch__label .spz-switch-off { display: none; } .spz-themes { display: flex; gap: 16px; flex-wrap: wrap; flex: 1; } .spz-themes__wrapper { text-align: center; } .spz-theme { position: relative; display: block; width: 86px; height: 56px; border-radius: 8px; cursor: pointer; overflow: hidden; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); transition: border-color 0.2s, box-shadow 0.2s; } .spz-theme:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.15); } .spz-theme.is-checked { border-color: var(--spz-primary); box-shadow: 0 0 0 2px var(--spz-primary); } .spz-theme__inp { position: absolute; opacity: 0; pointer-events: none; } .spz-theme__color-1, .spz-theme__color-2, .spz-theme__color-3 { position: absolute; bottom: 8px; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); } .spz-theme__color-1 { left: 10px; } .spz-theme__color-2 { left: 28px; } .spz-theme__color-3 { left: 46px; } .spz-theme__check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--spz-primary); color: #fff; font-size: 11px; display: none; align-items: center; justify-content: center; } .spz-theme.is-checked .spz-theme__check { display: flex; } .spz-theme__label { display: block; margin-top: 6px; font-size: 12px; color: var(--spz-text-light); cursor: pointer; } .spz-font-preview { margin: 10px 0 4px; padding: 12px 14px; border: 1px dashed var(--spz-border); border-radius: 10px; color: var(--spz-text); font-size: 16px; line-height: 1.4; } .spz-font-preview small { display: block; font-size: 12px; color: var(--spz-text-light); margin-top: 4px; } .spz-cookie { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px; background: var(--spz-header); border-radius: 10px; font-size: 12px; color: var(--spz-text-light); line-height: 1.45; } .spz-cookie__icon { flex-shrink: 0; } .spz-cookie__link { color: var(--spz-primary); cursor: pointer; } .spz-cookie__link:hover { text-decoration: underline; } @media (max-width: 480px) { .spz-menu-btn { top: 12px; right: 12px; width: 42px; height: 42px; } .spz-side-menu { width: 86vw; } .spz-select__input { width: 138px; } } /* ====================== Конструктор цветов (Расширенные настройки) ====================== */ .spz-advanced-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 2px; padding: 10px 12px; border: 1px solid var(--spz-border); border-radius: 10px; cursor: pointer; user-select: none; transition: background 0.15s, border-color 0.15s; } .spz-advanced-toggle:hover { border-color: var(--spz-primary); } .spz-advanced-toggle__label { font-size: 13px; font-weight: 600; color: var(--spz-primary); } .spz-advanced-toggle__arrow { font-size: 12px; color: var(--spz-text-light); transition: transform 0.2s; } .spz-advanced-toggle.is-open .spz-advanced-toggle__arrow { transform: rotate(180deg); } .spz-advanced { padding: 6px 4px 4px; } .spz-advanced .spz-field { padding: 8px 0; min-height: 40px; } .spz-color-wrap { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .spz-color__swatch { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid var(--spz-border); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.12s, border-color 0.15s; } .spz-color__swatch:hover { transform: scale(1.08); border-color: var(--spz-primary); } .spz-color__reset { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--spz-border); background: transparent; color: var(--spz-text-light); font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; } .spz-color__reset:hover { color: var(--spz-primary); border-color: var(--spz-primary); } /* ====================== Кастомный color picker ====================== */ .spz-picker { display: none; position: fixed; z-index: 100002; width: 212px; padding: 14px; background: var(--spz-bg, #fff); border: 1px solid var(--spz-border, #dfe1e5); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,0.24); } .spz-picker.is-open { display: block; } .spz-picker-wheel { position: relative; width: 180px; height: 180px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, rgba(255,255,255,0) 72%), conic-gradient(from 90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); cursor: crosshair; touch-action: none; overflow: hidden; user-select: none; } .spz-picker-dark { position: absolute; inset: 0; border-radius: 50%; background: #000; opacity: 0; pointer-events: none; } .spz-picker-dot { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.45); pointer-events: none; left: 0; top: 0; } .spz-picker-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .spz-picker-cap, .spz-picker-hash { font-size: 12px; color: var(--spz-text-light, #70757a); flex-shrink: 0; width: 56px; } .spz-picker-hash { width: 12px; } .spz-picker-val { flex: 1; accent-color: var(--spz-primary, #4a73e8); cursor: pointer; } .spz-picker-hex { flex: 1; padding: 6px 8px; border: 1px solid var(--spz-border, #dfe1e5); border-radius: 8px; background: var(--spz-bg, #fff); color: var(--spz-text, #222); font-size: 13px; font-family: ui-monospace, monospace; text-transform: lowercase; outline: none; } .spz-picker-hex:focus { border-color: var(--spz-primary, #4a73e8); } .spz-picker-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 4px; } .spz-picker-btn { flex: 1; padding: 8px 10px; border: 1px solid var(--spz-border, #dfe1e5); border-radius: 9px; background: transparent; color: var(--spz-text, #222); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .spz-picker-btn:hover { border-color: var(--spz-primary, #4a73e8); color: var(--spz-primary, #4a73e8); } .spz-picker-done { background: var(--spz-primary, #4a73e8); border-color: var(--spz-primary, #4a73e8); color: #fff; } .spz-picker-done:hover { color: #fff; opacity: 0.92; } .spz-advanced-reset { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--spz-primary); text-decoration: none; } .spz-advanced-reset:hover { text-decoration: underline; }