mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-02 22:50:02 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(css): rm overrides for webgui rules

Browse Source 
Because these overrides were underspecified (ie didn't apply to third
party component css), and because the webgui currently doesn't use css
layering, exclusions have been made in the webgui's
default-base.css so they apply broadly, rendering these overrides incorrect and unnecessary.
This commit is contained in:
Pujit Mehrotra
2025-12-01 14:26:11 -05:00
parent 74df938e45
commit f184711ff7
1 changed files with 3 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
web/src/assets/main.css
View File

@@ -1,4 +1,4 @@
/*
/*
* Tailwind v4 configuration with Nuxt UI v3
* Using scoped selectors to prevent breaking Unraid WebGUI
*/
@@ -9,7 +9,7 @@
/* Import theme and utilities only - no global preflight */
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
/* @import "@nuxt/ui"; temporarily disabled */
@import "@nuxt/ui";
@import 'tw-animate-css';
@import '../../../@tailwind-shared/index.css';
@@ -17,7 +17,7 @@
@source "../**/*.{vue,ts,js,tsx,jsx}";
@source "../../../unraid-ui/src/**/*.{vue,ts,js,tsx,jsx}";
/*
/*
* Scoped base styles for .unapi elements only
* Import Tailwind's preflight into our custom layer and scope it
*/
@@ -28,122 +28,13 @@
@import "tailwindcss/preflight.css";
}
/* Override Unraid's button styles for Nuxt UI components */
.unapi button {
/* Reset Unraid's button styles */
margin: 0 !important;
padding: 0;
border: none;
background: none;
}
/* Accessible focus styles for keyboard navigation */
.unapi button:focus-visible {
outline: 2px solid #ff8c2f;
outline-offset: 2px;
}
/* Restore button functionality while removing Unraid's forced styles */
.unapi button:not([role="switch"]) {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
/* Ensure Nuxt UI modal/slideover close buttons work properly */
.unapi [role="dialog"] button,
.unapi [data-radix-collection-item] button {
margin: 0 !important;
background: transparent !important;
border: none !important;
}
/* Focus styles for dialog buttons */
.unapi [role="dialog"] button:focus-visible,
.unapi [data-radix-collection-item] button:focus-visible {
outline: 2px solid #ff8c2f;
outline-offset: 2px;
}
/* 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;
text-align: unset;
}
/* 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;
}
}
/* Override link styles inside .unapi */
.unapi a,
.unapi a:link,
.unapi a:visited {
color: inherit;
text-decoration: none;
}
.unapi a:hover,
.unapi a:focus {
text-decoration: underline;
color: inherit;
}
/* Note: Tailwind utilities will apply globally but should be used with .unapi prefix in HTML */
/* Ensure unraid-modals container has extremely high z-index */
unraid-modals.unapi {
position: relative;