/* ================================================================== DragonSafe — custom-theme.css (28-Jul-2025, final) Переменные по доке + эффекты макета. Без блокировки скролла. ================================================================== */ /* 0) ШРИФТ */ @import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap"); /* 1) СВЕТЛАЯ ТЕМА (fallback) */ :root{ --default-font-family:'Onest',sans-serif !important; /* базовые поверхности */ --body-background:#FAFCFF !important; --body-text-color:#000000 !important; --background:#FFFFFF !important; --background-text-color:#000000 !important; /* акценты / кнопки */ --primary-background:#0094FF !important; --primary-text-color:#FFFFFF !important; --primary-button-bg-color:#0094FF !important; --primary-button-text-color:#FFFFFF !important; /* активные элементы меню */ --menu-active-bg-color:rgba(0,148,255,.14) !important; --menu-active-text-color:#FFFFFF !important; /* разделители / поля */ --divider-color:#ECEEF2 !important; --border-color:#C1C1C1 !important; --input-background:#F6F5F9 !important; /* футер */ --footer-background:var(--primary-background) !important; --footer-text-color:var(--primary-text-color) !important; /* радиус по умолчанию */ --default-border-radius:20px !important; } /* 2) ТЁМНАЯ ТЕМА DragonSafe */ .dark{ /* фон и текст */ --body-background:#080E1E !important; --body-text-color:#FFFFFF !important; --header-bg:#080E1E !important; --header-text-color:#FFFFFF !important; --section-bg:rgba(24,31,49,.80) !important; --section-text-color:#FFFFFF !important; --background:rgba(24,31,49,.80) !important; --background-text-color:#FFFFFF !important; /* обменные блоки */ --exchange-default-bg:rgba(24,31,49,.80) !important; --exchange-block-bg:rgba(24,31,49,.80) !important; --exchange-input-amount-bg:rgba(255,255,255,.10) !important; /* акценты / кнопки */ --primary-background:#0094FF !important; --primary-text-color:#FFFFFF !important; --primary-button-bg-color:#0094FF !important; --primary-button-text-color:#FFFFFF !important; /* активные строки / меню (прозрачный голубой) */ --menu-active-bg-color:rgba(0,148,255,.14) !important; --menu-active-text-color:#FFFFFF !important; /* вторичные поверхности */ --secondary-bg:#21455F !important; --secondary-text-color:#FFFFFF !important; --secondary-light-bg:rgba(255,255,255,.06) !important; --secondary-light-text-color:#FFFFFF !important; /* границы / разделители */ --input-background:rgba(255,255,255,.10) !important; --border-color:rgba(255,255,255,.10) !important; --divider-color:rgba(255,255,255,.06) !important; /* футер */ --footer-background:#080E1E !important; --footer-text-color:#FFFFFF !important; /* радиусы и тени */ --default-border-radius:20px !important; --primary-shadow:0 0 18px rgba(70,177,255,.65) !important; --primary-shadow-md:0 0 18px rgba(70,177,255,.65) !important; --default-box-shadow:0 2px 6px rgba(0,0,0,.40) !important; } /* 3) ВЕРСТКА: ширина контейнера обмена (не сужаем другие модули) */ .shell-body{ max-width:unset !important; margin-inline:0 !important; } /* не мешаем «Новостям» и т.п. */ .exchange-wrapper{ max-width:1180px !important; margin-inline:auto !important; } /* 4) КАРТОЧКИ */ .dark .section, .dark .exchange-default, .dark .exchange-block{ background:var(--section-bg) !important; border-radius:var(--default-border-radius) !important; box-shadow:inset 0 1px 2px rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.40); } /* 5) КНОПКА (неоновое свечение) */ .dark .btn--primary{ background:var(--primary-button-bg-color) !important; color:var(--primary-button-text-color) !important; border-radius:30px !important; box-shadow: 0 0 12px rgba(70,177,255,.55), 0 0 22px rgba(70,177,255,.45) inset !important; transition:box-shadow .15s ease, transform .15s ease; } .dark .btn--primary:hover{ box-shadow: 0 0 22px rgba(70,177,255,.80), 0 0 32px rgba(70,177,255,.60) inset !important; transform:translateY(-1px); } /* 6) PLACEHOLDER */ .dark input::placeholder, .dark textarea::placeholder{ color:#676F86 !important; } /* 7) АКТИВНЫЕ СТРОКИ (валюты/банки) — узкие селекторы, чтобы не мешать другим модулям */ .dark .exchange-item.active > .item-inner, .dark .bank-item.active > .item-inner, .dark .systems__item--active > .item-inner, .dark .currencies__item--active > .item-inner{ background:var(--menu-active-bg-color, rgba(0,148,255,.14)) !important; color:var(--menu-active-text-color, #fff) !important; box-shadow:inset 0 0 0 1px rgba(0,148,255,.35) !important; } /* Снимаем общее перекрашивание, если где-то остался широкий селектор */ .dark .active > .item-inner{ background:initial !important; color:inherit !important; box-shadow:initial !important; } /* 8) ФУТЕР / ПРОГРЕСС-БАР — через переменную из доки */ .dark .footer, .dark .footer-bottom, .dark .bottom-bar, .dark .progress-bar{ background:var(--footer-background) !important; color:var(--footer-text-color) !important; } /* 9) ФОН — неоновая дуга (2 radial-gradient) */ html{ overflow-y:auto !important; } /* гарантия вертикального скролла */ .dark body{ background:#080E1E; min-height:100vh; overflow-x:hidden; /* прячем только горизонтальный скролл */ overflow-y:auto; /* вертикальный скролл включён */ background-image:none !important; /* если когда-то был url-фон — убираем */ } /* бирюзовый хвост слева-сверху */ .dark body::before{ content:""; position:fixed; z-index:-999 !important; pointer-events:none; width:260vw; height:260vw; top:-180vw; left:-85vw; transform:rotate(25deg); border-radius:50%; background:radial-gradient(closest-side, rgba(0,175,155,.75) 0%, transparent 70%); filter:blur(260px); } /* синий хвост справа-сверху */ .dark body::after{ content:""; position:fixed; z-index:-999 !important; pointer-events:none; width:260vw; height:260vw; top:-178vw; right:-80vw; transform:rotate(25deg); border-radius:50%; background:radial-gradient(closest-side, rgba(0,148,255,.85) 0%, transparent 70%); filter:blur(280px); } /* 10) Доступность */ @media (prefers-reduced-motion:reduce){ .dark .btn--primary, .dark .btn--primary:hover{ transition:none; } }