mirror of
https://github.com/unraid/api.git
synced 2025-12-31 05:29:48 -06:00
44774d0acd
- Introduced a new UnraidToaster component for displaying notifications with customizable positions. - Updated the DialogClose component to use a span element for better semantic structure. - Enhanced CSS for the sonner component to ensure proper layout and styling. These changes improve user feedback through notifications and refine the dialog close button's implementation. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a toaster notifications component with configurable screen position, rich colors, and a close button; programmatic and legacy mounting helpers exposed. * **Style** * Updated toast close-button spacing and min-width behavior. * Simplified dialog close-button rendering and removed redundant style resets. * Reduced SSO provider icon size and added SSO button font-size tokens. * **Tests** * Added unit tests covering component mounting and global exports. * **Chores** * Deployment now performs broader remote cleanup before syncing. * **Chores** * Type declarations and tsconfig updated for global mount/utility typings. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
96 lines
2.6 KiB
CSS
96 lines
2.6 KiB
CSS
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* Utility defaults for web components (when we were using shadow DOM) */
|
|
:host {
|
|
--tw-divide-y-reverse: 0;
|
|
--tw-border-style: solid;
|
|
--tw-font-weight: initial;
|
|
--tw-tracking: initial;
|
|
--tw-translate-x: 0;
|
|
--tw-translate-y: 0;
|
|
--tw-translate-z: 0;
|
|
--tw-rotate-x: rotateX(0);
|
|
--tw-rotate-y: rotateY(0);
|
|
--tw-rotate-z: rotateZ(0);
|
|
--tw-skew-x: skewX(0);
|
|
--tw-skew-y: skewY(0);
|
|
--tw-space-x-reverse: 0;
|
|
--tw-gradient-position: initial;
|
|
--tw-gradient-from: #0000;
|
|
--tw-gradient-via: #0000;
|
|
--tw-gradient-to: #0000;
|
|
--tw-gradient-stops: initial;
|
|
--tw-gradient-via-stops: initial;
|
|
--tw-gradient-from-position: 0%;
|
|
--tw-gradient-via-position: 50%;
|
|
--tw-gradient-to-position: 100%;
|
|
--tw-shadow: 0 0 #0000;
|
|
--tw-shadow-color: initial;
|
|
--tw-inset-shadow: 0 0 #0000;
|
|
--tw-inset-shadow-color: initial;
|
|
--tw-ring-color: initial;
|
|
--tw-ring-shadow: 0 0 #0000;
|
|
--tw-inset-ring-color: initial;
|
|
--tw-inset-ring-shadow: 0 0 #0000;
|
|
--tw-ring-inset: initial;
|
|
--tw-ring-offset-width: 0px;
|
|
--tw-ring-offset-color: #fff;
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
--tw-blur: initial;
|
|
--tw-brightness: initial;
|
|
--tw-contrast: initial;
|
|
--tw-grayscale: initial;
|
|
--tw-hue-rotate: initial;
|
|
--tw-invert: initial;
|
|
--tw-opacity: initial;
|
|
--tw-saturate: initial;
|
|
--tw-sepia: initial;
|
|
--tw-drop-shadow: initial;
|
|
--tw-duration: initial;
|
|
--tw-ease: initial;
|
|
}
|
|
|
|
/* Global border color - this is what's causing the issue! */
|
|
/* Commenting out since it affects all elements globally
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
*/
|
|
|
|
body {
|
|
--color-alpha: #1c1b1b;
|
|
--color-beta: #f2f2f2;
|
|
--color-gamma: #999999;
|
|
--color-gamma-opaque: rgba(153, 153, 153, 0.5);
|
|
--color-customgradient-start: rgba(242, 242, 242, 0);
|
|
--color-customgradient-end: rgba(242, 242, 242, 0.85);
|
|
--shadow-beta: 0 25px 50px -12px rgba(242, 242, 242, 0.15);
|
|
--ring-offset-shadow: 0 0 var(--color-beta);
|
|
--ring-shadow: 0 0 var(--color-beta);
|
|
}
|
|
|
|
button:not(:disabled),
|
|
[role='button']:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Font size overrides for SSO button component */
|
|
unraid-sso-button {
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.875rem;
|
|
--text-base: 1rem;
|
|
--text-lg: 1.125rem;
|
|
--text-xl: 1.25rem;
|
|
--text-2xl: 1.5rem;
|
|
--text-3xl: 1.875rem;
|
|
--text-4xl: 2.25rem;
|
|
--text-5xl: 3rem;
|
|
--text-6xl: 3.75rem;
|
|
--text-7xl: 4.5rem;
|
|
--text-8xl: 6rem;
|
|
--text-9xl: 8rem;
|
|
} |