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