/* ================= Неоновые кнопки Рустама на сайте (21.10.2026) ================= Те же, что в программе на компьютере (ilmnur_side_client/neon_button.py, придумал Рустам — korzina/main_buttons.py): ночью кнопка — тёмное стекло, светящееся изнутри неоном, с перламутровым бликом сверху; днём — выпуклая цветная с мягкой тенью; при нажатии быстро вдавливается и плавно отпускается. Цвет — по смыслу, как на компьютере: золото — главное действие (.btn, «Мой профиль»); синий — обычное (.btn.plain, плитки главной, строки меню); серебро — тихое («Выйти из учётной записи», сайт автора); красный — необратимое (.btn.danger). Подключается ПОСЛЕДНИМ на каждой странице. Вернуть прежние кнопки — убрать строку (или этот файл сделать пустым). */ :root { --neon-press: cubic-bezier(.25, .46, .45, .94); } /* ---------- Цвета: тёмная подложка, свечение, второй тон, надпись ---------- */ .btn, .neon-gold { --n-dark: #120a02; --n-glow: #f2ad2e; --n-glow2: #d9801f; --n-text: #fff0c8; --n-sheen: 0; } .btn.plain, .neon-blue, .home-page .actions .btn, .menu-item, .tile, /* Строки списков и круглые значки — тоже кнопки (Рустам, 26.10.2026: «все кнопки неоновые на сайте») */ .rod-list button, #m-list li.chat-row, .icon-link:not(.call-now) { --n-dark: #030517; --n-glow: #1f4df2; --n-glow2: #b8a8ff; --n-text: #e6ecff; --n-sheen: 1; } .home-page .actions .btn.plain, .neon-silver, .btn.neon-silver { --n-dark: #08080b; --n-glow: #9ea3b3; --n-glow2: #d1d6e5; --n-text: #eceef4; --n-sheen: 0; } /* Вкладки и переключатели: выбранный — золотой, прочие — серебряные */ .tab, .seg button, .chips button { --n-dark: #08080b; --n-glow: #9ea3b3; --n-glow2: #d1d6e5; --n-text: #eceef4; --n-sheen: 0; } .tab.on, .seg button.on, .chips button.on, .chips button[aria-pressed="true"], .rod-list button.on, #m-list li.chat-row.active, .icon-link.on:not(.call-now) { --n-dark: #120a02; --n-glow: #f2ad2e; --n-glow2: #d9801f; --n-text: #fff0c8; --n-sheen: 0; } .btn.danger, .neon-red { --n-dark: #140205; --n-glow: #f2404d; --n-glow2: #ff8c80; --n-text: #ffe6e6; --n-sheen: .5; } /* «Мой профиль» на главной — золотая, как на компьютере */ .home-page .actions #profile-btn { --n-dark: #120a02; --n-glow: #f2ad2e; --n-glow2: #d9801f; --n-text: #fff0c8; --n-sheen: 0; } /* ---------- Ночь (и тема по умолчанию): неон в тёмном стекле ---------- .btn.danger и .tab.on — в списке отдельно: у них в app.css свои правила сильнее простого .btn, а здесь они должны уступить неону */ .btn, .btn.danger, .menu-item, .tile, .tab, .tab.on, .seg button, .seg button.on, .chips button, .rod-list button, #m-list li.chat-row, .icon-link:not(.call-now) { position: relative; color: var(--n-text) !important; background: /* перламутровый блик сверху, у синих — заметнее */ radial-gradient(ellipse 70% 60% at 50% -10%, color-mix(in srgb, var(--n-glow2) calc(55% * var(--n-sheen) + 25%), transparent) 0%, transparent 70%), /* свечение по краям, справа — вторым тоном */ linear-gradient(90deg, color-mix(in srgb, var(--n-glow) 30%, transparent) 0%, transparent 18%, transparent 82%, color-mix(in srgb, var(--n-glow2) 30%, transparent) 100%), var(--n-dark) !important; border: 1.5px solid color-mix(in srgb, var(--n-glow) 75%, white) !important; box-shadow: inset 0 0 14px 2px color-mix(in srgb, var(--n-glow) 85%, transparent), inset 0 5px 12px -4px color-mix(in srgb, var(--n-glow2) 80%, white), 0 0 12px -2px color-mix(in srgb, var(--n-glow) 70%, transparent) !important; transition: transform .2s var(--neon-press), filter .2s var(--neon-press), box-shadow .2s !important; } .btn *, .menu-item *, .tile *, .tab * { color: inherit; } .btn:hover, .menu-item:hover, .tile:hover, .tab:hover, .seg button:hover, .chips button:hover, .rod-list button:hover, #m-list li.chat-row:hover, .icon-link:not(.call-now):hover { filter: brightness(1.12); box-shadow: inset 0 0 18px 3px color-mix(in srgb, var(--n-glow) 90%, transparent), inset 0 5px 12px -4px color-mix(in srgb, var(--n-glow2) 85%, white), 0 0 18px -1px color-mix(in srgb, var(--n-glow) 80%, transparent) !important; } /* Нажатие: быстро вдавливается — чуть меньше и ниже, темнее */ .btn:active, .menu-item:active, .tile:active, .tab:active, .seg button:active, .chips button:active, .rod-list button:active, #m-list li.chat-row:active, .icon-link:not(.call-now):active { transform: translateY(2px) scale(.97); filter: brightness(.9); transition-duration: .08s !important; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .4 !important; filter: none; transform: none; } /* Значки-круги M3 на плитках (::before с маской) — цветом надписи */ .home-page .actions .btn:not(#leisure-open)::before, .home-page .actions #profile-btn::before { background: var(--n-text) !important; } /* «Досуг» — своя картинка (шахматы и нота), не маска: её не перекрашиваем */ .home-page .actions #leisure-open::before { background: url("/web/icons/leisure.png") center / contain no-repeat !important; } .home-page .actions .btn .tile-name, .home-page .actions .btn .tile-sub, .home-page .actions #profile-btn .tile-name, .home-page .actions #profile-btn .tile-sub { color: var(--n-text) !important; } .home-page .actions .btn.plain { border-style: solid !important; } /* ---------- День: выпуклая цветная кнопка с мягкой тенью ---------- */ body[data-theme="light"] :is(.btn, .btn.danger, .menu-item, .tile, .tab, .tab.on, .seg button, .seg button.on, .chips button, .rod-list button, #m-list li.chat-row, .icon-link:not(.call-now)) { color: #fff !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); background: linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, transparent 45%), linear-gradient(90deg, color-mix(in srgb, var(--n-glow) 92%, white), color-mix(in srgb, var(--n-glow2) 85%, black)) !important; border: 1px solid color-mix(in srgb, var(--n-glow) 70%, black) !important; box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--n-glow) 45%, rgba(0, 0, 0, .35)), inset 0 1px 0 rgba(255, 255, 255, .45) !important; } /* ---------- Строки списков и круглые значки (26.10.2026) ---------- Надписи внутри — цветом кнопки; подписи потише. Значок в круге — маска, красим цветом надписи. Звонок (.call-now) остаётся зелёным */ .rod-list button *, #m-list li.chat-row .who *, #m-list li.chat-row .who { color: var(--n-text) !important; } .rod-list button small, #m-list li.chat-row .who span { opacity: .85; } .icon-link:not(.call-now) .ic { background: var(--n-text) !important; } body[data-theme="light"] :is(.rod-list button *, #m-list li.chat-row .who, #m-list li.chat-row .who *) { color: #fff !important; } body[data-theme="light"] .icon-link:not(.call-now) .ic { background: #fff !important; } #m-list li.chat-row { margin: 2px 4px; } /* Главная днём (26.10.2026): плитки — дневной неон, надписи и значки белые */ body.home-page[data-theme="light"] .actions .btn .tile-name, body.home-page[data-theme="light"] .actions .btn .tile-sub { color: #fff !important; } body.home-page[data-theme="light"] .actions .btn:not(#leisure-open)::before { background: #fff !important; }