mirror of
https://github.com/unraid/api.git
synced 2025-12-31 05:29:48 -06:00
b7afaf4632
- Introduced a new PostCSS plugin, `scopeTailwindToUnapi`, to scope Tailwind CSS classes to specific elements. - Updated Vite configuration to include the new PostCSS plugin for CSS processing. - Enhanced theme management in the theme store to apply scoped classes and dynamic CSS variables to multiple targets, including the document root and elements with the `.unapi` class. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Scoped styling for embedded (.unapi) contexts and a PostCSS plugin to automate it. * Theme refresh after mount to propagate CSS variables to embedded roots. * Exposed idempotent restart action for the Unraid API when offline. * **Bug Fixes** * Consistent dark mode and theme variable application across main and embedded views. * Interactive element and SSO styles now apply in embedded contexts. * Simplified changelog iframe with a reliable fallback renderer; improved logs styling scope. * **Tests** * New unit tests for the scoping plugin, changelog iframe, and related components. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
99 lines
2.6 KiB
CSS
99 lines
2.6 KiB
CSS
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* Utility defaults for web components (when we were using shadow DOM) */
|
|
:host,
|
|
.unapi {
|
|
--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));
|
|
}
|
|
*/
|
|
|
|
.unapi {
|
|
--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);
|
|
}
|
|
|
|
.unapi button:not(:disabled),
|
|
.unapi [role='button']:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Font size overrides for SSO button component */
|
|
.unapi unraid-sso-button,
|
|
unraid-sso-button.unapi {
|
|
--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;
|
|
}
|