mirror of
https://github.com/unraid/api.git
synced 2026-04-24 16:28:31 -05:00
Ajit Mehrotra
e80ea795fe
- modified vite.config.ts to integrate app configuration into UI setup - updated app.config.ts to include new button, tabs, and slideover variants for better theming - cleaned up main.css by removing unused styles and ensuring proper imports - refactored notification components to streamline structure and improve readability
95 lines
2.9 KiB
CSS
95 lines
2.9 KiB
CSS
/*
|
|
* Tailwind v4 configuration with Nuxt UI v3
|
|
* Using scoped selectors to prevent breaking Unraid WebGUI
|
|
*/
|
|
|
|
/* Define custom layers with controlled cascade */
|
|
@layer theme, unapi-base, components, utilities;
|
|
|
|
/* Import theme and utilities only - no global preflight */
|
|
@import "tailwindcss/theme.css" layer(theme);
|
|
@import "tailwindcss/utilities.css" layer(utilities);
|
|
@import "@nuxt/ui";
|
|
@import 'tw-animate-css';
|
|
@import '../../../@tailwind-shared/index.css';
|
|
|
|
/* Scan for Tailwind classes in all source files */
|
|
@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
|
|
*/
|
|
|
|
@layer unapi-base {
|
|
/* Scope all Tailwind preflight styles to .unapi */
|
|
.unapi {
|
|
@import "tailwindcss/preflight.css";
|
|
}
|
|
|
|
/* Accessible focus styles for keyboard navigation */
|
|
.unapi button:focus-visible {
|
|
outline: 2px solid #ff8c2f;
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
/* Ensure unraid-modals container has extremely high z-index */
|
|
unraid-modals.unapi {
|
|
position: relative;
|
|
z-index: 999999;
|
|
isolation: isolate;
|
|
}
|
|
|
|
/* Style for Unraid progress frame */
|
|
iframe#progressFrame {
|
|
background-color: var(--background-color);
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* Banner gradient tuning */
|
|
:root {
|
|
--banner-gradient-stop: 30%;
|
|
}
|
|
|
|
.unraid-banner-gradient-layer {
|
|
background-image: var(--banner-gradient);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
--banner-gradient-stop: 60%;
|
|
}
|
|
}
|
|
|
|
/* Header banner compatibility tweaks */
|
|
#header.image {
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.has-banner-gradient #header.image {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.has-banner-gradient #header.image::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-repeat: no-repeat;
|
|
background-position: left center, right center;
|
|
background-size: min(30%, 320px) 100%, min(30%, 320px) 100%;
|
|
background-image:
|
|
var(--banner-gradient),
|
|
linear-gradient(270deg, var(--header-gradient-end, var(--color-header-gradient-end, rgba(0, 0, 0, 1))) 0%, var(--header-gradient-end, var(--color-header-gradient-end, rgba(0, 0, 0, 1))) 10%, color-mix(in srgb, var(--header-gradient-end, var(--color-header-gradient-end, rgba(0, 0, 0, 1))) 90%, transparent) 25%, color-mix(in srgb, var(--header-gradient-end, var(--color-header-gradient-end, rgba(0, 0, 0, 1))) 60%, transparent) 40%, color-mix(in srgb, var(--header-gradient-end, var(--color-header-gradient-end, rgba(0, 0, 0, 1))) 30%, transparent) 55%, var(--header-gradient-start, var(--color-header-gradient-start, rgba(0, 0, 0, 0))) 70%, var(--header-gradient-start, var(--color-header-gradient-start, rgba(0, 0, 0, 0))) var(--banner-gradient-stop, 30%));
|
|
z-index: 0;
|
|
}
|
|
|
|
.has-banner-gradient #header.image > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
} |