SHA256
179 lines
5.4 KiB
CSS
179 lines
5.4 KiB
CSS
/*
|
|
* Shared semantic button roles.
|
|
*
|
|
* Stage 4: styling is opt-in by an existing UI role class. Component-owned
|
|
* controls (TopBar, Dropdown, Toolbar, tabs, ScrollToBottom, etc.) are styled
|
|
* by their own owner stylesheet and are intentionally absent from this file.
|
|
*/
|
|
.ui-button,
|
|
.primary-btn,
|
|
.secondary-btn,
|
|
.destructive-btn,
|
|
.ghost-btn,
|
|
.icon-btn,
|
|
.text-btn,
|
|
.shine-btn {
|
|
color: #ffffff;
|
|
background: transparent;
|
|
background-image: none;
|
|
border: 0;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
backdrop-filter: none;
|
|
-webkit-backdrop-filter: none;
|
|
transition:
|
|
transform 90ms ease,
|
|
box-shadow 90ms ease,
|
|
background-color 90ms ease,
|
|
filter 120ms ease;
|
|
}
|
|
|
|
.ui-button:hover,
|
|
.primary-btn:hover,
|
|
.secondary-btn:hover,
|
|
.destructive-btn:hover,
|
|
.ghost-btn:hover,
|
|
.icon-btn:hover,
|
|
.text-btn:hover,
|
|
.shine-btn:hover {
|
|
color: #ffffff;
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
filter: brightness(1.12);
|
|
}
|
|
|
|
.primary-btn:hover,
|
|
.secondary-btn:hover,
|
|
.destructive-btn:hover,
|
|
.ghost-btn:hover,
|
|
.icon-btn:hover,
|
|
.text-btn:hover,
|
|
.shine-btn:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.ui-button:active,
|
|
.primary-btn:active,
|
|
.secondary-btn:active,
|
|
.destructive-btn:active,
|
|
.ghost-btn:active,
|
|
.icon-btn:active,
|
|
.text-btn:active,
|
|
.shine-btn:active {
|
|
color: #ffffff;
|
|
background: rgba(0, 0, 0, 0.12);
|
|
border: 0;
|
|
box-shadow:
|
|
inset 0 3px 8px rgba(0, 0, 0, 0.58),
|
|
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
|
|
transform: translateY(1px) scale(0.97);
|
|
filter: brightness(0.9);
|
|
}
|
|
|
|
.ui-button:disabled,
|
|
.primary-btn:disabled,
|
|
.secondary-btn:disabled,
|
|
.destructive-btn:disabled,
|
|
.ghost-btn:disabled,
|
|
.icon-btn:disabled,
|
|
.text-btn:disabled,
|
|
.shine-btn:disabled,
|
|
.ui-button[aria-disabled='true'],
|
|
.primary-btn[aria-disabled='true'],
|
|
.secondary-btn[aria-disabled='true'],
|
|
.destructive-btn[aria-disabled='true'],
|
|
.ghost-btn[aria-disabled='true'],
|
|
.icon-btn[aria-disabled='true'],
|
|
.text-btn[aria-disabled='true'],
|
|
.shine-btn[aria-disabled='true'] {
|
|
color: rgba(255, 255, 255, 0.42);
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
}
|
|
|
|
/* Decorative button pseudo-elements were not part of the Stage 3.1 surface. */
|
|
.ui-button::before,
|
|
.primary-btn::before,
|
|
.secondary-btn::before,
|
|
.destructive-btn::before,
|
|
.ghost-btn::before,
|
|
.icon-btn::before,
|
|
.text-btn::before,
|
|
.shine-btn::before,
|
|
.ui-button::after,
|
|
.primary-btn::after,
|
|
.secondary-btn::after,
|
|
.destructive-btn::after,
|
|
.ghost-btn::after,
|
|
.icon-btn::after,
|
|
.text-btn::after,
|
|
.shine-btn::after {
|
|
background: transparent;
|
|
background-image: none;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ui-button:focus-visible,
|
|
.primary-btn:focus-visible,
|
|
.secondary-btn:focus-visible,
|
|
.destructive-btn:focus-visible,
|
|
.ghost-btn:focus-visible,
|
|
.icon-btn:focus-visible,
|
|
.text-btn:focus-visible,
|
|
.shine-btn:focus-visible {
|
|
outline: 2px solid rgba(255, 255, 255, 0.62);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Explicit filled-action variant used by pre-auth/settings/profile screens. */
|
|
.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close) {
|
|
color: #ffffff;
|
|
background: var(--shine-action-blue);
|
|
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
|
|
border: 0;
|
|
border-radius: 14px;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.24),
|
|
0 8px 22px rgba(var(--shine-action-blue-rgb), 0.24);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close):hover {
|
|
background: var(--shine-action-blue-hover);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.28),
|
|
0 10px 26px rgba(var(--shine-action-blue-rgb), 0.32);
|
|
filter: brightness(1.12);
|
|
}
|
|
|
|
.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close):active {
|
|
background: var(--shine-action-blue-pressed);
|
|
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.26);
|
|
transform: translateY(1px) scale(0.97);
|
|
filter: brightness(0.9);
|
|
}
|
|
|
|
.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close):focus-visible {
|
|
outline: 2px solid rgba(255, 255, 255, 0.62);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close)::before,
|
|
.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close)::after {
|
|
background: transparent;
|
|
background-image: none;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.filled-action-buttons :is(.primary-btn, .secondary-btn, .destructive-btn, .ghost-btn, .text-btn, .shine-btn, .square-btn, .login-panel-inline-back, .registration-faq-link, .profiles-select, .profiles-close):disabled {
|
|
color: rgba(255, 255, 255, 0.58);
|
|
background: rgba(var(--shine-action-blue-rgb), 0.42);
|
|
box-shadow: none;
|
|
}
|