padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix tailwind colors; gradients work now!

Browse source
This commit is contained in:
padreug 2025-02-12 01:23:13 +01:00
parent e94e20db08
commit 6283c76861
8 changed files with 282 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

95
src/assets/index.css
View file

@ -1,4 +1,5 @@
@import "tailwindcss";
@config "../../tailwind.config.js";
@layer base {
:root {
@ -70,108 +71,108 @@
}
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
}
}
@layer utilities {
.bg-background {
background-color: hsl(var(--background));
background-color: hsl(var(--background) / <alpha-value>);
}
.bg-foreground {
background-color: hsl(var(--foreground));
background-color: hsl(var(--foreground) / <alpha-value>);
}
.bg-card {
background-color: hsl(var(--card));
background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
}
.bg-card-foreground {
background-color: hsl(var(--card-foreground));
background-color: hsl(var(--card-foreground) / var(--tw-bg-opacity, 1));
}
.bg-popover {
background-color: hsl(var(--popover));
background-color: hsl(var(--popover) / var(--tw-bg-opacity, 1));
}
.bg-popover-foreground {
background-color: hsl(var(--popover-foreground));
background-color: hsl(var(--popover-foreground) / var(--tw-bg-opacity, 1));
}
.bg-primary {
background-color: hsl(var(--primary));
background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary-foreground {
background-color: hsl(var(--primary-foreground));
background-color: hsl(var(--primary-foreground) / var(--tw-bg-opacity, 1));
}
.bg-secondary {
background-color: hsl(var(--secondary));
background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-secondary-foreground {
background-color: hsl(var(--secondary-foreground));
background-color: hsl(var(--secondary-foreground) / var(--tw-bg-opacity, 1));
}
.bg-muted {
background-color: hsl(var(--muted));
background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted-foreground {
background-color: hsl(var(--muted-foreground));
background-color: hsl(var(--muted-foreground) / var(--tw-bg-opacity, 1));
}
.bg-accent {
background-color: hsl(var(--accent));
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-accent-foreground {
background-color: hsl(var(--accent-foreground));
background-color: hsl(var(--accent-foreground) / var(--tw-bg-opacity, 1));
}
.bg-destructive {
background-color: hsl(var(--destructive));
background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-destructive-foreground {
background-color: hsl(var(--destructive-foreground));
background-color: hsl(var(--destructive-foreground) / var(--tw-bg-opacity, 1));
}
.text-background {
color: hsl(var(--background));
color: hsl(var(--background) / <alpha-value>);
}
.text-foreground {
color: hsl(var(--foreground));
color: hsl(var(--foreground) / <alpha-value>);
}
.text-card {
color: hsl(var(--card));
color: hsl(var(--card) / var(--tw-text-opacity, 1));
}
.text-card-foreground {
color: hsl(var(--card-foreground));
color: hsl(var(--card-foreground) / var(--tw-text-opacity, 1));
}
.text-popover {
color: hsl(var(--popover));
color: hsl(var(--popover) / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
color: hsl(var(--popover-foreground));
color: hsl(var(--popover-foreground) / var(--tw-text-opacity, 1));
}
.text-primary {
color: hsl(var(--primary));
color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
color: hsl(var(--primary-foreground));
color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.text-secondary {
color: hsl(var(--secondary));
color: hsl(var(--secondary) / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
color: hsl(var(--secondary-foreground));
color: hsl(var(--secondary-foreground) / var(--tw-text-opacity, 1));
}
.text-muted {
color: hsl(var(--muted));
color: hsl(var(--muted) / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
color: hsl(var(--muted-foreground));
color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-accent {
color: hsl(var(--accent));
color: hsl(var(--accent) / var(--tw-text-opacity, 1));
}
.text-accent-foreground {
color: hsl(var(--accent-foreground));
color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}
.text-destructive {
color: hsl(var(--destructive));
color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
color: hsl(var(--destructive-foreground));
color: hsl(var(--destructive-foreground) / var(--tw-text-opacity, 1));
}
@supports not (backdrop-filter: blur(1px)) {
@ -180,3 +181,29 @@
}
}
}
/* Add support for ring colors */
@layer utilities {
.ring-border {
--tw-ring-color: hsl(var(--border) / <alpha-value>);
}
.ring-primary {
--tw-ring-color: hsl(var(--primary) / <alpha-value>);
}
.ring-background {
--tw-ring-color: hsl(var(--background) / <alpha-value>);
}
}
/* Add support for border colors */
@layer utilities {
.box-border {
border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
}
.border-primary {
border-color: hsl(var(--primary) / <alpha-value>);
}
.border-background {
border-color: hsl(var(--background) / <alpha-value>);
}
}