/* Тёмная тема edteka. Активируется классом .dark на (ранний скрипт в _Layout): по умолчанию — как на устройстве (prefers-color-scheme), выбор в футере хранится в localStorage('ed_theme'). Сайт свёрстан на Tailwind-утилитах (CDN), поэтому тема — централизованные оверрайды базовых утилит и наших компонентов; !important нужен, т.к. CDN вставляет свои стили позже. */ html.dark { color-scheme: dark; } .dark body { color: #e2e8f0; } /* Ни при каких условиях страница не должна скроллиться по горизонтали */ html, body { overflow-x: hidden; max-width: 100%; } /* Навигация в шапке: на узких экранах прокручивается, но без видимого скроллбара */ .ed-nav { scrollbar-width: none; -ms-overflow-style: none; } .ed-nav::-webkit-scrollbar { display: none; } /* ── Единый паттерн разделов с боковой панелью (Кабинет / Статистика) ───────── Как «Мои файлы»: сайдбар на всю высоту под шапкой, контент рядом; на мобиле — выезжающая шторка по кнопке ☰ (в одном и том же месте — слева над контентом). */ .ed-sec { display: flex; height: calc(100vh - 3.5rem); } .ed-sec-side { width: 15rem; flex: none; border-right: 1px solid #e2e8f0; background: rgba(255,255,255,.7); overflow-y: auto; } .ed-sec-main { flex: 1; min-width: 0; overflow-y: auto; } .ed-sec-toggle { display: none; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: #f1f5f9; color: #475569; place-items: center; flex: none; } .ed-sec-toggle:hover { background: #e2e8f0; } .ed-sec-backdrop { display: none; } @media (max-width: 767px) { .ed-sec-side { position: fixed; left: 0; top: 3.5rem; bottom: 0; z-index: 40; width: 16rem; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(15,23,42,.18); background: #fff; } .ed-sec-side.open { transform: none; } .ed-sec-toggle { display: inline-grid; } .ed-sec-backdrop.open { display: block; position: fixed; inset: 3.5rem 0 0; background: rgba(15,23,42,.35); z-index: 39; } } .dark .ed-sec-side { border-color: #253352; background: rgba(17,26,46,.85); } @media (max-width: 767px) { .dark .ed-sec-side { background: #0f1830; } } .dark .ed-sec-toggle { background: #1a2440; color: #cbd5e1; } .dark .ed-sec-toggle:hover { background: #253352; } /* Фон сайта: тёмные клетки + то же индиго-свечение */ .dark .ed-site-bg { background-color: #0b1120; background-image: radial-gradient(130% 520px at 50% -80px, rgba(99,102,241,.28), rgba(99,102,241,0) 66%), linear-gradient(rgba(99,102,241,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,.07) 1px, transparent 1px); } /* ── Tailwind-утилиты ─────────────────────────────────────────────────────── */ .dark .bg-white { background-color: #111a2e !important; } .dark .bg-white\/70 { background-color: rgba(17,26,46,.75) !important; } .dark .bg-white\/80 { background-color: rgba(17,26,46,.85) !important; } .dark .bg-white\/85 { background-color: rgba(17,26,46,.88) !important; } .dark .bg-slate-50 { background-color: #16203a !important; } .dark .bg-slate-100 { background-color: #1a2440 !important; } .dark .bg-slate-200 { background-color: #243154 !important; } .dark .bg-brand-50 { background-color: rgba(99,102,241,.16) !important; } .dark .bg-brand-100 { background-color: rgba(99,102,241,.26) !important; } .dark .bg-green-50 { background-color: rgba(34,197,94,.14) !important; } .dark .bg-green-100 { background-color: rgba(34,197,94,.2) !important; } .dark .bg-red-50 { background-color: rgba(239,68,68,.14) !important; } .dark .bg-amber-50 { background-color: rgba(245,158,11,.14) !important; } .dark .bg-indigo-100 { background-color: rgba(99,102,241,.25) !important; } .dark .text-slate-900 { color: #f1f5f9 !important; } .dark .text-slate-800 { color: #e2e8f0 !important; } .dark .text-slate-700 { color: #cbd5e1 !important; } .dark .text-slate-600 { color: #a3b2c8 !important; } .dark .text-slate-500 { color: #8494ac !important; } .dark .text-slate-400 { color: #64748b !important; } .dark .text-brand-700 { color: #a5b4fc !important; } .dark .text-brand-600 { color: #a5b4fc !important; } .dark .text-green-700 { color: #4ade80 !important; } .dark .text-green-600 { color: #4ade80 !important; } .dark .text-amber-600 { color: #fbbf24 !important; } .dark .text-indigo-700 { color: #a5b4fc !important; } .dark .text-red-600 { color: #f87171 !important; } .dark .border-slate-100 { border-color: #1e2a47 !important; } .dark .border-slate-200 { border-color: #253352 !important; } .dark .border-slate-300 { border-color: #2e3d63 !important; } .dark .border-brand-200 { border-color: rgba(99,102,241,.4) !important; } .dark .border-red-200 { border-color: rgba(239,68,68,.35) !important; } .dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1e2a47 !important; } .dark .hover\:bg-slate-50:hover { background-color: #16203a !important; } .dark .hover\:bg-slate-100:hover { background-color: #1e2a47 !important; } .dark .bg-white\/50 { background-color: rgba(17,26,46,.5) !important; } .dark .bg-white\/60 { background-color: rgba(17,26,46,.6) !important; } .dark .bg-brand-50\/50 { background-color: rgba(99,102,241,.12) !important; } .dark .hover\:bg-slate-200:hover { background-color: #253352 !important; } .dark .hover\:bg-red-50:hover { background-color: rgba(239,68,68,.14) !important; } .dark .hover\:bg-brand-50:hover { background-color: rgba(99,102,241,.16) !important; } .dark .hover\:text-slate-900:hover { color: #f1f5f9 !important; } .dark .hover\:text-slate-800:hover { color: #e2e8f0 !important; } .dark .hover\:text-slate-600:hover { color: #a3b2c8 !important; } /* Формы (кроме прозрачных инпутов лендинга) */ .dark input:not(.bg-transparent), .dark textarea, .dark select { background-color: #0f1830; color: #e2e8f0; } .dark input::placeholder, .dark textarea::placeholder { color: #64748b; } /* ── Наши компоненты: чат, файлы, черновик-карточка ──────────────────────── */ .dark .cht-item:hover { background: #1a2440; } .dark .cht-item.cht-active { background: rgba(99,102,241,.18); } .dark .cht-item a { color: #cbd5e1; } .dark .cht-item.cht-active a { color: #a5b4fc; } .dark .cht-del { color: #475569; } .dark .fm-tile { background: #111a2e; border-color: #253352; } .dark .fm-tile:hover { border-color: #4f46e5; box-shadow: 0 8px 20px rgba(0,0,0,.4); } .dark .fm-menu { background: #111a2e; border-color: #253352; box-shadow: 0 12px 30px rgba(0,0,0,.5); } .dark .fm-menu button { color: #cbd5e1; } .dark .fm-menu button:hover { background: #1a2440; } .dark .fm-menu hr { border-color: #1e2a47; } .dark .fm-side-item { color: #cbd5e1; } .dark .fm-side-item:hover { background: #1a2440; } .dark .fm-side-item.fm-side-active { background: rgba(99,102,241,.18); color: #a5b4fc; } .dark .fm-file-ic { background: linear-gradient(160deg,#1e2a47,#243154); border-color: #2e3d63; } .dark .fm-file-ic::before { background: #111a2e; border-color: #2e3d63; } .dark .fm-file-draft { background: repeating-linear-gradient(135deg,#16203a,#16203a 6px,#1e2a47 6px,#1e2a47 12px); } .dark .fm-kebab:hover { background: #1a2440; color: #cbd5e1; } .dark .ed-draft-card { background: #111a2e; border-color: #3b4a7a; } .dark .ed-draft-card .edc-chips span { background: rgba(99,102,241,.18); color: #a5b4fc; } /* ── Лента слайдов (feed.css) ────────────────────────────────────────────── */ .dark .ed-card { background: #111a2e; border-color: #253352; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .dark .ed-md h1, .dark .ed-md h2 { color: #f1f5f9; } .dark .ed-md p, .dark .ed-md ul { color: #cbd5e1; } .dark .ed-btn { background: #1e2a47; color: #cbd5e1; } .dark .ed-btn:hover { background: #253352; } .dark .ed-btn-primary { background: #4f46e5; color: #fff; } .dark .ed-btn-primary:hover { background: #4338ca; } .dark .ed-bubble-l { background: #1e2a47; color: #e2e8f0; } .dark .ed-fc-face { background: #111a2e; border-color: #253352; } .dark .ed-fc-back { background: #182047; } .dark .ed-fc-word { color: #f1f5f9; } .dark .ed-fc-done p { color: #cbd5e1; } .dark .ed-quiz-q, .dark .ed-fill-text { color: #f1f5f9; } .dark .ed-hword { background: #243154; } .dark .ed-hword.ed-word-active { background: rgba(99,102,241,.25); } .dark .ed-word-ok { background: rgba(34,197,94,.2); color: #4ade80; } .dark .ed-word-skip { background: rgba(245,158,11,.18); color: #fbbf24; } .dark .ed-word-active { background: rgba(99,102,241,.22); color: #a5b4fc; } .dark .ed-word-spk { color: #c7d2fe; } /* караоке: подчёркивание использует currentColor */ /* Скрытое слово fillin/picture остаётся скрытым и в тёмной теме: .dark .ed-word-active/spk (0,2,0) иначе перебивают .ed-hword{color:transparent} (0,1,0) */ .dark .ed-hword.ed-word-active, .dark .ed-hword.ed-word-spk { color: transparent; } .dark .ed-hword.ed-word-open.ed-word-spk { color: #c7d2fe; } .dark .ed-tr-btn.ed-shown, .dark .ed-polaroid-hint.ed-shown { color: #a5b4fc; } .dark .ed-acc-bar { background: #243154; } .dark .ed-acc-val { color: #cbd5e1; } .dark .ed-word.ed-tipsel { background: #b45309; color: #fef3c7; } .dark .ed-chip { background: rgba(99,102,241,.18); color: #a5b4fc; } .dark .ed-chip:hover { background: rgba(99,102,241,.3); } .dark .ed-hint-timer { background: #243154; } .dark .ed-polaroid { background: #111a2e; border-color: #2e3d63; box-shadow: 0 10px 24px rgba(0,0,0,.4); } .dark .ed-summary { background: rgba(11,17,32,.96); } .dark .ed-summary-text { color: #cbd5e1; } .dark .ed-talk-form input, .dark .ed-talk-form textarea { background: #0f1830; border-color: #2e3d63; color: #e2e8f0; } .dark .ed-name-form input { background: #0f1830; border-color: #2e3d63; color: #e2e8f0; } .dark .ed-phrases .ed-phrase { background: #1e2a47; color: #a3b2c8; } .dark .ed-dot { background: #334155; } .dark .ed-dot-active { background: #6366f1; } .dark .ed-preview-bar { background: #0f1830; border-color: #253352; } .dark .ed-preview-chip { background: rgba(245,158,11,.16); color: #fbbf24; } /* Редактор слайда */ .dark .ede-box { background: #111a2e; } .dark .ede-head, .dark .ede-foot { border-color: #253352; } .dark .ede-common { border-color: #253352; } .dark .ede-item { border-color: #253352; } .dark .ede-field input, .dark .ede-field textarea, .dark .ede-field select { background: #0f1830; border-color: #2e3d63; color: #e2e8f0; } .dark .ede-field span { color: #8494ac; } .dark .ede-check { color: #cbd5e1; } .dark .ede-cancel { background: #1e2a47; color: #cbd5e1; } .dark .ede-x:hover { background: #1a2440; } .dark .ede-add { background: rgba(99,102,241,.18); color: #a5b4fc; } /* Юридические страницы */ .dark .legal p, .dark .legal ul { color: #a3b2c8; } .dark .legal strong { color: #e2e8f0; } .dark .legal a { color: #a5b4fc; } /* ── «Думание» ИИ — Geometry Dash: пиксель прыгает на месте, за ним шлейф, перепрыгивает набегающие треугольники. Цвет наследуется (currentColor). ── */ .ed-think { position: relative; display: inline-block; width: 92px; height: 30px; vertical-align: middle; color: #6366f1; } .ed-think-ground { position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: currentColor; opacity: .25; } .ed-think-runner { position: absolute; left: 34px; bottom: 8px; width: 11px; height: 11px; animation: edThinkJump 1.2s linear infinite; } /* Кубик крутится в прыжке (как в Geometry Dash) и приземляется ровно */ .ed-think-pixel { position: absolute; inset: 0; background: currentColor; border-radius: 3px; animation: edThinkFlip 1.2s cubic-bezier(.45,0,.55,1) infinite; } /* След — плавная кривая «комета» ПОЗАДИ пикселя: размытые доты повторяют его дугу с ОТСТАВАНИЕМ (положительная задержка), а не опережают. */ .ed-think-trail { position: absolute; bottom: 8px; border-radius: 50%; background: currentColor; filter: blur(1.3px); animation: edThinkJump 1.2s linear infinite; } .ed-think-trail.t1 { left: 28px; width: 8px; height: 8px; opacity: .42; animation-delay: .05s; } .ed-think-trail.t2 { left: 23px; width: 7px; height: 7px; opacity: .32; animation-delay: .10s; } .ed-think-trail.t3 { left: 18px; width: 6px; height: 6px; opacity: .24; animation-delay: .15s; } .ed-think-trail.t4 { left: 14px; width: 5px; height: 5px; opacity: .16; animation-delay: .20s; } .ed-think-trail.t5 { left: 10px; width: 4px; height: 4px; opacity: .10; animation-delay: .25s; } .ed-think-trail.t6 { left: 7px; width: 3px; height: 3px; opacity: .06; animation-delay: .30s; } .ed-think-spikes { position: absolute; left: 0; right: 0; bottom: 8px; height: 10px; } .ed-think-spike { position: absolute; bottom: 0; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid currentColor; opacity: .45; animation: edThinkSpike 2.4s linear infinite; } /* Фаза подобрана так, чтобы спайк проходил под пикселем на пике прыжка (плато) */ .ed-think-spike:nth-child(1) { animation-delay: -0.9s; } .ed-think-spike:nth-child(2) { animation-delay: -2.1s; } /* Быстрый подъём, широкое плато наверху (покрывает весь проход спайка), быстрый спуск */ @keyframes edThinkJump { 0%,100% { transform: translateY(0); } 8% { transform: translateY(-22px); } 50% { transform: translateY(-22px); } 58% { transform: translateY(0); } } @keyframes edThinkFlip { 0%,8% { transform: rotate(0deg); } 58%,100% { transform: rotate(360deg); } } @keyframes edThinkSpike { from { left: 100%; } to { left: -10px; } } @media (prefers-reduced-motion: reduce) { .ed-think-runner, .ed-think-spike, .ed-think-trail, .ed-think-pixel { animation: none; } } .dark .ed-think { color: #a5b4fc; } .dark .ed-stat { background: #0f1830; border-color: #253352; } .dark .ed-stat-val { color: #f1f5f9; }