mirror of
https://github.com/unraid/api.git
synced 2026-01-04 07:29:48 -06:00
77cfc07dda
- Introduced @layer directive to ensure base styles have lower priority than Tailwind utilities. - Organized CSS resets for box-sizing, figures, headings, paragraphs, and unordered lists under a single @layer base block for improved maintainability. These changes streamline the CSS structure and enhance compatibility with Tailwind CSS utilities. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - Style - Wrapped core resets in a base style layer, adjusting cascade with utility classes. - Applied global box-sizing within the base layer. - Consolidated heading and paragraph resets into the layer. - Added a reset for unordered lists to remove default bullets and padding. - Retained the logo figure reset within the layer. - Updated formatting and header comments to reflect the layering approach. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
91 lines
2.1 KiB
CSS
91 lines
2.1 KiB
CSS
/*
|
|
* Tailwind v4 configuration without global preflight
|
|
* This prevents Tailwind from applying global resets that affect webgui
|
|
*/
|
|
|
|
/* Import only the parts of Tailwind we need - NO PREFLIGHT */
|
|
@import 'tailwindcss/theme.css';
|
|
@import 'tailwindcss/utilities.css';
|
|
@import 'tw-animate-css';
|
|
@import '../../@tailwind-shared/index.css';
|
|
@import '@nuxt/ui';
|
|
|
|
/* Scan unraid-ui package from linked directory for class usage */
|
|
@source "../../unraid-ui/dist/**/*.{js,mjs}";
|
|
@source "../../unraid-ui/src/**/*.{vue,ts}";
|
|
@source "../**/*.{vue,ts,js}";
|
|
|
|
/*
|
|
* Minimal styles for our components
|
|
* Using @layer to ensure these have lower priority than Tailwind utilities
|
|
*/
|
|
|
|
@layer base {
|
|
/* Box-sizing for proper layout */
|
|
.unapi *,
|
|
.unapi *::before,
|
|
.unapi *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Reset figure element for logo */
|
|
.unapi figure {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Reset heading elements - only margin/padding */
|
|
.unapi h1,
|
|
.unapi h2,
|
|
.unapi h3,
|
|
.unapi h4,
|
|
.unapi h5 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Reset paragraph element */
|
|
.unapi p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Reset UL styles to prevent default browser styling */
|
|
.unapi ul {
|
|
padding-inline-start: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
/* Reset toggle/switch button backgrounds */
|
|
.unapi button[role="switch"],
|
|
.unapi button[role="switch"][data-state="checked"],
|
|
.unapi button[role="switch"][data-state="unchecked"] {
|
|
background-color: transparent;
|
|
background: transparent;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
/* Style for checked state */
|
|
.unapi button[role="switch"][data-state="checked"] {
|
|
background-color: #ff8c2f; /* Unraid orange */
|
|
}
|
|
|
|
/* Style for unchecked state */
|
|
.unapi button[role="switch"][data-state="unchecked"] {
|
|
background-color: #e5e5e5;
|
|
}
|
|
|
|
/* Dark mode toggle styles */
|
|
.unapi.dark button[role="switch"][data-state="unchecked"],
|
|
.dark .unapi button[role="switch"][data-state="unchecked"] {
|
|
background-color: #333;
|
|
border-color: #555;
|
|
}
|
|
|
|
/* Toggle thumb/handle */
|
|
.unapi button[role="switch"] span {
|
|
background-color: white;
|
|
}
|
|
}
|
|
|