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