/* * Единый визуальный язык кнопок основного приложения: * белое содержимое, без рамок и самостоятельной подложки. * * Исключения: * - фильтры групп на экране «Связи» (.fg-filter-chip) сохраняют прежний вид; * - нижний toolbar (.toolbar-btn) полностью сохраняет исходное оформление. */ :root button:not(.fg-filter-chip):not(.toolbar-btn), :root a.primary-btn, :root a.secondary-btn, :root a.destructive-btn, :root a.ghost-btn, :root a.icon-btn, :root a.text-btn { color: #ffffff !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: transform 90ms ease, box-shadow 90ms ease, background-color 90ms ease, filter 120ms ease; } :root button:not(.fg-filter-chip):not(.toolbar-btn):hover, :root a.primary-btn:hover, :root a.secondary-btn:hover, :root a.destructive-btn:hover, :root a.ghost-btn:hover, :root a.icon-btn:hover, :root a.text-btn:hover { color: #ffffff !important; background: transparent !important; border: 0 !important; box-shadow: none !important; filter: brightness(1.12); } /* Короткий press-feedback: кнопка визуально уходит внутрь поверхности. * Эффект существует только пока кнопка физически нажата. */ :root button:not(.fg-filter-chip):not(.toolbar-btn):active, :root a.primary-btn:active, :root a.secondary-btn:active, :root a.destructive-btn:active, :root a.ghost-btn:active, :root a.icon-btn:active, :root a.text-btn:active { color: #ffffff !important; background: rgba(0, 0, 0, 0.12) !important; border: 0 !important; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.58), inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important; transform: translateY(1px) scale(0.97); filter: brightness(0.9); } :root button:not(.fg-filter-chip):not(.toolbar-btn):disabled, :root button:not(.fg-filter-chip):not(.toolbar-btn)[aria-disabled='true'], :root a.primary-btn[aria-disabled='true'], :root a.secondary-btn[aria-disabled='true'], :root a.destructive-btn[aria-disabled='true'], :root a.ghost-btn[aria-disabled='true'], :root a.icon-btn[aria-disabled='true'], :root a.text-btn[aria-disabled='true'] { color: rgba(255, 255, 255, 0.42) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; filter: none !important; } /* Убираем декоративные стеклянные/неоновые подложки самих кнопок. * Переключатель канала исключён: его ::after является функциональным бегунком. * Toolbar исключён целиком: у него остаётся исходная графика приложения. */ :root button:not(.fg-filter-chip):not(.toolbar-btn):not(.channel-toggle-btn)::before, :root button:not(.fg-filter-chip):not(.toolbar-btn):not(.channel-toggle-btn)::after { background: transparent !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; } /* Toolbar возвращён к исходному оформлению. Добавляем только краткое вдавливание * на физическое нажатие; active-вкладка после отпускания остаётся такой, как была. */ :root .toolbar-btn { transition: transform 90ms ease, box-shadow 90ms ease, background-color 90ms ease, color 120ms ease; } :root .toolbar-btn:active { transform: translateY(1px) scale(0.96); background: rgba(0, 0, 0, 0.14) !important; box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.62), inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important; } /* Клавиатурный фокус остаётся различимым без постоянной рамки кнопки. */ :root button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible, :root a.primary-btn:focus-visible, :root a.secondary-btn:focus-visible, :root a.destructive-btn:focus-visible, :root a.ghost-btn:focus-visible, :root a.icon-btn:focus-visible, :root a.text-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.62); outline-offset: 2px; } /* Уведомления: «Ответы / События». * ВАЖНО: общий button:hover выше имеет большую специфичность, поэтому для выбранной * вкладки фиксируем отдельный data-selected и перечисляем hover/focus/active. * Так выбранная кнопка остаётся визуально вдавленной и после отпускания мыши. */ :root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true'], :root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true']:hover, :root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true']:focus, :root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true']:focus-visible, :root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true']:active { color: #ffffff !important; background: rgba(0, 0, 0, 0.18) !important; border: 0 !important; box-shadow: inset 0 4px 11px rgba(0, 0, 0, 0.72), inset 0 -1px 2px rgba(255, 255, 255, 0.10) !important; transform: translateY(1px) scale(0.965) !important; filter: brightness(0.88) !important; } :root body .notifications-screen .tabs button.notification-tab-btn[data-selected='false'], :root body .notifications-screen .tabs button.notification-tab-btn[data-selected='false']:hover { color: #ffffff !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; filter: none !important; } /* Неактивная вкладка кратко вдавливается во время физического нажатия. * После click data-selected меняется и постоянный стиль остаётся уже на ней. */ :root body .notifications-screen .tabs button.notification-tab-btn[data-selected='false']:active { background: rgba(0, 0, 0, 0.12) !important; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.58), inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important; transform: translateY(1px) scale(0.97) !important; filter: brightness(0.9) !important; } /* Верхний toolbar — отдельная цветовая роль: золотой текст и иконки. * Это правило намеренно расположено после глобального белого button-rule. */ :root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn), :root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):hover, :root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):focus, :root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible, :root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):active, :root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn), :root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):hover, :root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):focus, :root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible, :root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):active { color: var(--app-topbar-gold) !important; } /* Верхний toolbar: вместо золотого акцента — белые глифы с голубым ореолом. * Правило стоит последним, чтобы перекрыть общий белый button-reset и старую золотую роль. */ :root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn), :root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):hover, :root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):focus, :root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):active, :root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn), :root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):hover, :root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):focus, :root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):active { color: #F7FBFF !important; text-shadow: 0 0 5px rgba(92, 190, 255, 0.72), 0 0 12px rgba(72, 145, 255, 0.34) !important; filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.56)) !important; } :root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible, :root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible { color: #FFFFFF !important; outline: none !important; filter: drop-shadow(0 0 5px rgba(110, 205, 255, 0.82)) drop-shadow(0 0 10px rgba(72, 145, 255, 0.42)) !important; } /* Личный чат: нижние иконки используют ту же бело-голубую роль, что и верхний toolbar. */ :root .dm-chat-input button.dm-emoji-btn, :root .dm-chat-input button.dm-send-btn, :root .dm-chat-input button.dm-edit-banner__close, :root .dm-chat-input button.dm-emoji-btn:hover, :root .dm-chat-input button.dm-send-btn:hover, :root .dm-chat-input button.dm-edit-banner__close:hover, :root .dm-chat-input button.dm-emoji-btn:focus, :root .dm-chat-input button.dm-send-btn:focus, :root .dm-chat-input button.dm-edit-banner__close:focus { color: #F7FBFF !important; text-shadow: 0 0 5px rgba(92, 190, 255, 0.72), 0 0 12px rgba(72, 145, 255, 0.34) !important; filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.46)) !important; } /* Второй общий тип кнопок. Цвет меняется одной переменной --shine-action-blue * в main.css. Экран настройки сервера намеренно не получает этот класс. */ :root .screen-content.filled-action-buttons button:not(.icon-btn):not(.shine-local-demo-btn), :root .screen-content.filled-action-buttons a.primary-btn, :root .screen-content.filled-action-buttons a.secondary-btn, :root .screen-content.filled-action-buttons a.ghost-btn, :root .screen-content.filled-action-buttons a.text-btn { color: #ffffff !important; background: var(--shine-action-blue) !important; background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)) !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 22px rgba(var(--shine-action-blue-rgb), .24) !important; text-shadow: 0 1px 2px rgba(0,0,0,.18) !important; border-radius: 14px; } :root .screen-content.filled-action-buttons button:not(.icon-btn):not(.shine-local-demo-btn):hover, :root .screen-content.filled-action-buttons a.primary-btn:hover, :root .screen-content.filled-action-buttons a.secondary-btn:hover, :root .screen-content.filled-action-buttons a.ghost-btn:hover, :root .screen-content.filled-action-buttons a.text-btn:hover { background: var(--shine-action-blue-hover) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 26px rgba(var(--shine-action-blue-rgb), .32) !important; } :root .screen-content.filled-action-buttons button:not(.icon-btn):not(.shine-local-demo-btn):active, :root .screen-content.filled-action-buttons a.primary-btn:active, :root .screen-content.filled-action-buttons a.secondary-btn:active, :root .screen-content.filled-action-buttons a.ghost-btn:active, :root .screen-content.filled-action-buttons a.text-btn:active { background: var(--shine-action-blue-pressed) !important; box-shadow: inset 0 3px 8px rgba(0,0,0,.26) !important; } :root .screen-content.filled-action-buttons button:not(.icon-btn):not(.shine-local-demo-btn):disabled { color: rgba(255,255,255,.58) !important; background: rgba(var(--shine-action-blue-rgb), .42) !important; box-shadow: none !important; } /* Специальная системная кнопка должна сохранять синюю круглую подложку, * несмотря на глобальный borderless-reset выше. */ :root button.scroll-to-bottom-btn, :root button.scroll-to-bottom-btn:hover, :root button.scroll-to-bottom-btn:focus, :root button.scroll-to-bottom-btn:focus-visible { color: #ffffff !important; background: var(--shine-action-blue) !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 26px rgba(var(--shine-action-blue-rgb), .34) !important; filter: none !important; } :root button.scroll-to-bottom-btn:hover { background: var(--shine-action-blue-hover) !important; } :root button.scroll-to-bottom-btn:active { background: var(--shine-action-blue-pressed) !important; box-shadow: inset 0 3px 9px rgba(0,0,0,.28) !important; } /* Пункты унифицированных выпадающих меню остаются без постоянной заливки, * но получают общую синюю реакцию при наведении/фокусе. */ :root button.dm-head-menu-item, :root button.channel-menu-item, :root button.dm-message-action-btn { justify-content: flex-start !important; color: #f4f8ff !important; background: transparent !important; text-align: left !important; } :root button.dm-head-menu-item:hover, :root button.dm-head-menu-item:focus-visible, :root button.channel-menu-item:hover, :root button.channel-menu-item:focus-visible, :root button.dm-message-action-btn:hover, :root button.dm-message-action-btn:focus-visible { background: rgba(var(--shine-action-blue-rgb), .12) !important; box-shadow: none !important; transform: none !important; } :root button.channel-menu-item.destructive, :root button.dm-message-action-btn--danger { color: #ffb7c5 !important; } /* 2026-08-28: исключения из borderless-reset для явных выборов и действий настроек. */ :root body .language-choice-grid button.language-choice-option, :root body .language-choice-grid button.language-choice-option:hover, :root body .language-choice-grid button.language-choice-option:focus { border: 1px solid rgba(210, 222, 241, 0.16) !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.035) !important; box-shadow: none !important; transform: none !important; } :root body .language-choice-grid button.language-choice-option.is-selected, :root body .language-choice-grid button.language-choice-option.is-selected:hover, :root body .language-choice-grid button.language-choice-option.is-selected:focus { border-color: rgba(92, 190, 255, 0.62) !important; background: rgba(39, 141, 255, 0.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(39,141,255,.10) !important; } :root body button.pairing-approve-btn, :root body button.pairing-approve-btn:hover, :root body button.pairing-approve-btn:focus { background: linear-gradient(180deg, rgba(57, 180, 108, .92), rgba(22, 116, 69, .94)) !important; border: 1px solid rgba(126, 235, 170, .55) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(22,116,69,.20) !important; transform: none !important; } :root body button.pairing-reject-btn, :root body button.pairing-reject-btn:hover, :root body button.pairing-reject-btn:focus { color: #fff1f3 !important; background: rgba(134, 31, 49, .28) !important; border: 1px solid rgba(255, 105, 128, .42) !important; border-radius: 14px !important; box-shadow: none !important; } :root body .screen-content.settings-bordered-actions button:not(.icon-btn):not(.key-toggle-btn):not(.channel-toggle-btn):not(.fg-filter-chip):not(.toolbar-btn):not(.pairing-approve-btn):not(.pairing-reject-btn) { border: 1px solid rgba(183, 203, 235, 0.28) !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 30%), rgba(8, 19, 42, .58) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 16px rgba(0,0,0,.18) !important; padding-inline: 14px; transform: none !important; } :root body .screen-content.settings-bordered-actions button:not(.icon-btn):not(.key-toggle-btn):not(.channel-toggle-btn):not(.fg-filter-chip):not(.toolbar-btn):not(.pairing-approve-btn):not(.pairing-reject-btn):hover { border-color: rgba(213, 225, 247, 0.42) !important; background: linear-gradient(180deg, rgba(255,255,255,.075), transparent 30%), rgba(10, 24, 52, .68) !important; }