Files
s3-drive-storage-manage/src/index.css
T
2026-08-19 21:59:29 +07:00

125 lines
3.5 KiB
CSS

@import "tailwindcss";
@layer base {
:root {
--background: 210 40% 98%;
--foreground: 222 47% 11%;
--card: 0 0% 100%;
--card-foreground: 222 47% 11%;
--popover: 0 0% 100%;
--popover-foreground: 222 47% 11%;
--primary: 221 83% 53%;
--primary-foreground: 210 40% 98%;
--secondary: 214 32% 94%;
--secondary-foreground: 222 47% 15%;
--muted: 214 32% 93%;
--muted-foreground: 215 16% 47%;
--accent: 214 32% 90%;
--accent-foreground: 221 83% 45%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 214 32% 88%;
--input: 214 32% 88%;
--ring: 221 83% 53%;
--radius: 0.75rem;
}
.dark {
--background: 224 71% 4%;
--foreground: 210 40% 98%;
--card: 222 47% 8%;
--card-foreground: 210 40% 98%;
--popover: 222 47% 8%;
--popover-foreground: 210 40% 98%;
--primary: 217 91% 60%;
--primary-foreground: 222 47% 11%;
--secondary: 217 33% 17%;
--secondary-foreground: 210 40% 98%;
--muted: 217 33% 17%;
--muted-foreground: 215 20% 65%;
--accent: 217 33% 20%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 40.6%;
--destructive-foreground: 0 0% 98%;
--border: 217 33% 20%;
--input: 217 33% 20%;
--ring: 217 91% 60%;
}
}
@theme {
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--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-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-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-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
html {
font-size: 16.5px;
}
@media (min-width: 768px) {
html {
font-size: 17px;
}
}
body {
margin: 0;
min-height: 100vh;
background-color: hsl(var(--background));
color: hsl(var(--foreground));
font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Custom subtle mesh & accent utilities */
.bg-grid-pattern {
background-size: 32px 32px;
background-image:
linear-gradient(to right, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
}
.dark .bg-grid-pattern {
background-image:
linear-gradient(to right, rgba(99, 102, 241, 0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(99, 102, 241, 0.08) 1px, transparent 1px);
}
.bg-gradient-brand {
background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
}
.text-gradient-brand {
background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 50%, #10b981 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#root {
min-height: 100vh;
display: flex;
flex-direction: column;
}