mirror of
https://github.com/unraid/api.git
synced 2025-12-31 05: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 -->
280 lines
7.8 KiB
CSS
280 lines
7.8 KiB
CSS
@theme static {
|
|
/* Breakpoints */
|
|
--breakpoint-xs: 30rem;
|
|
--breakpoint-2xl: 100rem;
|
|
--breakpoint-3xl: 120rem;
|
|
/* Container settings */
|
|
--container-center: true;
|
|
--container-padding: 2rem;
|
|
--container-screen-2xl: 1400px;
|
|
|
|
/* Font families */
|
|
--font-sans:
|
|
clear-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
|
|
/* Grid template columns */
|
|
--grid-template-columns-settings: 35% 1fr;
|
|
|
|
/* Border color default */
|
|
--default-border-color: var(--color-border);
|
|
--ui-border-muted: hsl(var(--border));
|
|
--ui-radius: 0.5rem;
|
|
--ui-primary: var(--color-primary-500);
|
|
--ui-primary-hover: var(--color-primary-600);
|
|
--ui-primary-active: var(--color-primary-700);
|
|
|
|
/* Color palette */
|
|
--color-inherit: inherit;
|
|
--color-transparent: transparent;
|
|
--color-black: #1c1b1b;
|
|
--color-grey-darkest: #222;
|
|
--color-grey-darker: #606f7b;
|
|
--color-grey-dark: #383735;
|
|
--color-grey-mid: #999999;
|
|
--color-grey: #e0e0e0;
|
|
--color-grey-light: #dae1e7;
|
|
--color-grey-lighter: #f1f5f8;
|
|
--color-grey-lightest: #f2f2f2;
|
|
--color-white: #ffffff;
|
|
|
|
/* Unraid colors */
|
|
--color-yellow-accent: #e9bf41;
|
|
--color-orange-dark: #f15a2c;
|
|
--color-orange: #ff8c2f;
|
|
|
|
/* Unraid red palette */
|
|
--color-unraid-red: #e22828;
|
|
--color-unraid-red-50: #fef2f2;
|
|
--color-unraid-red-100: #ffe1e1;
|
|
--color-unraid-red-200: #ffc9c9;
|
|
--color-unraid-red-300: #fea3a3;
|
|
--color-unraid-red-400: #fc6d6d;
|
|
--color-unraid-red-500: #f43f3f;
|
|
--color-unraid-red-600: #e22828;
|
|
--color-unraid-red-700: #bd1818;
|
|
--color-unraid-red-800: #9c1818;
|
|
--color-unraid-red-900: #821a1a;
|
|
--color-unraid-red-950: #470808;
|
|
|
|
/* Unraid green palette */
|
|
--color-unraid-green: #63a659;
|
|
--color-unraid-green-50: #f5f9f4;
|
|
--color-unraid-green-100: #e7f3e5;
|
|
--color-unraid-green-200: #d0e6cc;
|
|
--color-unraid-green-300: #aad1a4;
|
|
--color-unraid-green-400: #7db474;
|
|
--color-unraid-green-500: #63a659;
|
|
--color-unraid-green-600: #457b3e;
|
|
--color-unraid-green-700: #396134;
|
|
--color-unraid-green-800: #314e2d;
|
|
--color-unraid-green-900: #284126;
|
|
--color-unraid-green-950: #122211;
|
|
|
|
/* Primary colors (orange) */
|
|
--color-primary-50: #fff7ed;
|
|
--color-primary-100: #ffedd5;
|
|
--color-primary-200: #fed7aa;
|
|
--color-primary-300: #fdba74;
|
|
--color-primary-400: #fb923c;
|
|
--color-primary-500: #ff6600;
|
|
--color-primary-600: #ea580c;
|
|
--color-primary-700: #c2410c;
|
|
--color-primary-800: #9a3412;
|
|
--color-primary-900: #7c2d12;
|
|
--color-primary-950: #431407;
|
|
|
|
/* Header colors */
|
|
--color-header-text-primary: var(--header-text-primary);
|
|
--color-header-text-secondary: var(--header-text-secondary);
|
|
--color-header-background-color: var(--header-background-color);
|
|
|
|
/* Legacy colors */
|
|
--color-alpha: var(--color-alpha);
|
|
--color-beta: var(--color-beta);
|
|
--color-gamma: var(--color-gamma);
|
|
--color-gamma-opaque: var(--color-gamma-opaque);
|
|
--color-customgradient-start: var(--color-customgradient-start);
|
|
--color-customgradient-end: var(--color-customgradient-end);
|
|
|
|
/* Gradients */
|
|
--color-header-gradient-start: var(--header-gradient-start);
|
|
--color-header-gradient-end: var(--header-gradient-end);
|
|
--color-banner-gradient: var(--banner-gradient);
|
|
|
|
/* Font sizes */
|
|
--font-10px: 10px;
|
|
--font-12px: 12px;
|
|
--font-14px: 14px;
|
|
--font-16px: 16px;
|
|
--font-18px: 18px;
|
|
--font-20px: 20px;
|
|
--font-24px: 24px;
|
|
--font-30px: 30px;
|
|
|
|
/* Spacing */
|
|
--spacing-4_5: 1.125rem;
|
|
--spacing--8px: -8px;
|
|
--spacing-2px: 2px;
|
|
--spacing-4px: 4px;
|
|
--spacing-6px: 6px;
|
|
--spacing-8px: 8px;
|
|
--spacing-10px: 10px;
|
|
--spacing-12px: 12px;
|
|
--spacing-14px: 14px;
|
|
--spacing-16px: 16px;
|
|
--spacing-20px: 20px;
|
|
--spacing-24px: 24px;
|
|
--spacing-28px: 28px;
|
|
--spacing-32px: 32px;
|
|
--spacing-36px: 36px;
|
|
--spacing-40px: 40px;
|
|
--spacing-64px: 64px;
|
|
--spacing-80px: 80px;
|
|
--spacing-90px: 90px;
|
|
--spacing-150px: 150px;
|
|
--spacing-160px: 160px;
|
|
--spacing-200px: 200px;
|
|
--spacing-260px: 260px;
|
|
--spacing-300px: 300px;
|
|
--spacing-310px: 310px;
|
|
--spacing-350px: 350px;
|
|
--spacing-448px: 448px;
|
|
--spacing-512px: 512px;
|
|
--spacing-640px: 640px;
|
|
--spacing-800px: 800px;
|
|
|
|
/* Width and Height values */
|
|
--width-36px: 36px;
|
|
--height-36px: 36px;
|
|
|
|
/* Min/Max widths */
|
|
--min-width-86px: 86px;
|
|
--min-width-160px: 160px;
|
|
--min-width-260px: 260px;
|
|
--min-width-300px: 300px;
|
|
--min-width-310px: 310px;
|
|
--min-width-350px: 350px;
|
|
--min-width-800px: 800px;
|
|
|
|
--max-width-86px: 86px;
|
|
--max-width-160px: 160px;
|
|
--max-width-260px: 260px;
|
|
--max-width-300px: 300px;
|
|
--max-width-310px: 310px;
|
|
--max-width-350px: 350px;
|
|
--max-width-640px: 640px;
|
|
--max-width-800px: 800px;
|
|
--max-width-1024px: 1024px;
|
|
|
|
/* Container sizes adjusted for 10px base font size (1.6x scale) */
|
|
--container-xs: 32rem;
|
|
--container-sm: 38.4rem;
|
|
--container-md: 44.8rem;
|
|
--container-lg: 51.2rem;
|
|
--container-xl: 57.6rem;
|
|
--container-2xl: 67.2rem;
|
|
--container-3xl: 76.8rem;
|
|
--container-4xl: 89.6rem;
|
|
--container-5xl: 102.4rem;
|
|
--container-6xl: 115.2rem;
|
|
--container-7xl: 128rem;
|
|
|
|
/* Extended width scale for max-w-* utilities */
|
|
--width-5xl: 102.4rem;
|
|
--width-6xl: 115.2rem;
|
|
--width-7xl: 128rem;
|
|
--width-8xl: 140.8rem;
|
|
--width-9xl: 153.6rem;
|
|
--width-10xl: 166.4rem;
|
|
|
|
/* Animations */
|
|
--animate-mark-2: mark-2 1.5s ease infinite;
|
|
--animate-mark-3: mark-3 1.5s ease infinite;
|
|
--animate-mark-6: mark-6 1.5s ease infinite;
|
|
--animate-mark-7: mark-7 1.5s ease infinite;
|
|
|
|
/* Radius */
|
|
--radius: 0.5rem;
|
|
|
|
/* Text Resizing */
|
|
--text-xs: 1.2rem; /* 12px at 10px base */
|
|
--text-sm: 1.4rem; /* 14px at 10px base */
|
|
--text-base: 1.6rem; /* 16px at 10px base */
|
|
--text-lg: 1.8rem; /* 18px at 10px base */
|
|
--text-xl: 2rem; /* 20px at 10px base */
|
|
--text-2xl: 2.4rem; /* 24px at 10px base */
|
|
--text-3xl: 3rem; /* 30px at 10px base */
|
|
--text-4xl: 3.6rem; /* 36px at 10px base */
|
|
--text-5xl: 4.8rem; /* 48px at 10px base */
|
|
--text-6xl: 6rem; /* 60px at 10px base */
|
|
--text-7xl: 7.2rem; /* 72px at 10px base */
|
|
--text-8xl: 9.6rem; /* 96px at 10px base */
|
|
--text-9xl: 12.8rem; /* 128px at 10px base */
|
|
--spacing: 0.4rem; /* 4px at 10px base */
|
|
}
|
|
|
|
/* Keyframes */
|
|
@keyframes mark-2 {
|
|
50% {
|
|
transform: translateY(-40px);
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes mark-3 {
|
|
50% {
|
|
transform: translateY(-62px);
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes mark-6 {
|
|
50% {
|
|
transform: translateY(40px);
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes mark-7 {
|
|
50% {
|
|
transform: translateY(62px);
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Theme colors that reference CSS variables */
|
|
@theme inline {
|
|
--color-background: hsl(var(--background));
|
|
--color-foreground: hsl(var(--foreground));
|
|
--color-muted: hsl(var(--muted));
|
|
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
--color-popover: hsl(var(--popover));
|
|
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
--color-card: hsl(var(--card));
|
|
--color-card-foreground: hsl(var(--card-foreground));
|
|
--color-border: hsl(var(--border));
|
|
--color-input: hsl(var(--input));
|
|
--color-primary: hsl(var(--primary));
|
|
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
--color-secondary: hsl(var(--secondary));
|
|
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
--color-accent: hsl(var(--accent));
|
|
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
--color-destructive: hsl(var(--destructive));
|
|
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
--color-ring: hsl(var(--ring));
|
|
--color-chart-1: hsl(var(--chart-1, 12 76% 61%));
|
|
--color-chart-2: hsl(var(--chart-2, 173 58% 39%));
|
|
--color-chart-3: hsl(var(--chart-3, 197 37% 24%));
|
|
--color-chart-4: hsl(var(--chart-4, 43 74% 66%));
|
|
--color-chart-5: hsl(var(--chart-5, 27 87% 67%));
|
|
} |