/* * Единый визуальный язык кнопок основного приложения: * белое содержимое, без рамок и самостоятельной подложки. * * Исключения: * - фильтры групп на экране «Связи» (.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; }