Redesign app layout chrome
This commit is contained in:
+270
-78
@@ -1,6 +1,6 @@
|
||||
@import 'tailwindcss';
|
||||
@import "tailwindcss";
|
||||
|
||||
@import 'tw-animate-css';
|
||||
@import "tw-animate-css";
|
||||
|
||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@source '../../storage/framework/views/*.php';
|
||||
@@ -9,13 +9,69 @@
|
||||
|
||||
@theme inline {
|
||||
--font-sans:
|
||||
Instrument Sans, ui-sans-serif, system-ui, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
--font-headline-lg:
|
||||
Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
--font-headline-lg-mobile:
|
||||
Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
--font-headline-md:
|
||||
Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
--font-body-md:
|
||||
Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
--font-body-sm:
|
||||
Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
--font-label-uppercase:
|
||||
Inter, Instrument Sans, ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
|
||||
--radius-lg: var(--radius);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-sm: 0.125rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
|
||||
--spacing-container-margin: 1.5rem;
|
||||
--spacing-column-gap: 1rem;
|
||||
--spacing-card-padding: 0.75rem;
|
||||
--spacing-stack-gap-sm: 0.5rem;
|
||||
--spacing-stack-gap-md: 0.75rem;
|
||||
|
||||
--text-headline-lg: 1.5rem;
|
||||
--text-headline-lg--line-height: 2rem;
|
||||
--text-headline-lg--font-weight: 600;
|
||||
--text-headline-lg--letter-spacing: 0;
|
||||
--text-headline-md: 1.125rem;
|
||||
--text-headline-md--line-height: 1.5rem;
|
||||
--text-headline-md--font-weight: 600;
|
||||
--text-headline-md--letter-spacing: 0;
|
||||
--text-headline-lg-mobile: 1.25rem;
|
||||
--text-headline-lg-mobile--line-height: 1.75rem;
|
||||
--text-headline-lg-mobile--font-weight: 600;
|
||||
--text-body-md: 0.875rem;
|
||||
--text-body-md--line-height: 1.25rem;
|
||||
--text-body-md--font-weight: 400;
|
||||
--text-body-sm: 0.8125rem;
|
||||
--text-body-sm--line-height: 1.125rem;
|
||||
--text-body-sm--font-weight: 400;
|
||||
--text-label-uppercase: 0.6875rem;
|
||||
--text-label-uppercase--line-height: 1rem;
|
||||
--text-label-uppercase--font-weight: 700;
|
||||
--text-label-uppercase--letter-spacing: 0.05em;
|
||||
|
||||
--shadow-kanban-card: 0 4px 12px rgb(0 0 0 / 0.08);
|
||||
--shadow-kanban-nav: 0 12px 30px rgb(15 23 42 / 0.06);
|
||||
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
@@ -59,6 +115,54 @@
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-dim: var(--surface-dim);
|
||||
--color-surface-bright: var(--surface-bright);
|
||||
--color-surface-container-lowest: var(--surface-container-lowest);
|
||||
--color-surface-container-low: var(--surface-container-low);
|
||||
--color-surface-container: var(--surface-container);
|
||||
--color-surface-container-high: var(--surface-container-high);
|
||||
--color-surface-container-highest: var(--surface-container-highest);
|
||||
--color-surface-variant: var(--surface-variant);
|
||||
--color-surface-tint: var(--surface-tint);
|
||||
--color-on-surface: var(--on-surface);
|
||||
--color-on-surface-variant: var(--on-surface-variant);
|
||||
--color-on-background: var(--on-background);
|
||||
--color-outline: var(--outline);
|
||||
--color-outline-variant: var(--outline-variant);
|
||||
--color-primary-container: var(--primary-container);
|
||||
--color-on-primary: var(--on-primary);
|
||||
--color-on-primary-container: var(--on-primary-container);
|
||||
--color-primary-fixed: var(--primary-fixed);
|
||||
--color-primary-fixed-dim: var(--primary-fixed-dim);
|
||||
--color-on-primary-fixed: var(--on-primary-fixed);
|
||||
--color-on-primary-fixed-variant: var(--on-primary-fixed-variant);
|
||||
--color-secondary-container: var(--secondary-container);
|
||||
--color-on-secondary: var(--on-secondary);
|
||||
--color-on-secondary-container: var(--on-secondary-container);
|
||||
--color-secondary-fixed: var(--secondary-fixed);
|
||||
--color-secondary-fixed-dim: var(--secondary-fixed-dim);
|
||||
--color-on-secondary-fixed: var(--on-secondary-fixed);
|
||||
--color-on-secondary-fixed-variant: var(--on-secondary-fixed-variant);
|
||||
--color-tertiary: var(--tertiary);
|
||||
--color-tertiary-container: var(--tertiary-container);
|
||||
--color-on-tertiary: var(--on-tertiary);
|
||||
--color-on-tertiary-container: var(--on-tertiary-container);
|
||||
--color-tertiary-fixed: var(--tertiary-fixed);
|
||||
--color-tertiary-fixed-dim: var(--tertiary-fixed-dim);
|
||||
--color-on-tertiary-fixed: var(--on-tertiary-fixed);
|
||||
--color-on-tertiary-fixed-variant: var(--on-tertiary-fixed-variant);
|
||||
--color-error: var(--error);
|
||||
--color-error-container: var(--error-container);
|
||||
--color-on-error: var(--on-error);
|
||||
--color-on-error-container: var(--on-error-container);
|
||||
--color-inverse-surface: var(--inverse-surface);
|
||||
--color-inverse-on-surface: var(--inverse-on-surface);
|
||||
--color-inverse-primary: var(--inverse-primary);
|
||||
--color-priority-high: #ef4444;
|
||||
--color-priority-medium: #f59e0b;
|
||||
--color-priority-low: #3b82f6;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -83,83 +187,171 @@
|
||||
body,
|
||||
html {
|
||||
--font-sans:
|
||||
'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
Inter, "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: hsl(0 0% 100%);
|
||||
--foreground: hsl(0 0% 3.9%);
|
||||
--card: hsl(0 0% 100%);
|
||||
--card-foreground: hsl(0 0% 3.9%);
|
||||
--popover: hsl(0 0% 100%);
|
||||
--popover-foreground: hsl(0 0% 3.9%);
|
||||
--primary: hsl(0 0% 9%);
|
||||
--primary-foreground: hsl(0 0% 98%);
|
||||
--secondary: hsl(0 0% 92.1%);
|
||||
--secondary-foreground: hsl(0 0% 9%);
|
||||
--muted: hsl(0 0% 96.1%);
|
||||
--muted-foreground: hsl(0 0% 45.1%);
|
||||
--accent: hsl(0 0% 96.1%);
|
||||
--accent-foreground: hsl(0 0% 9%);
|
||||
--destructive: hsl(0 84.2% 60.2%);
|
||||
--destructive-foreground: hsl(0 0% 98%);
|
||||
--border: hsl(0 0% 92.8%);
|
||||
--input: hsl(0 0% 89.8%);
|
||||
--ring: hsl(0 0% 3.9%);
|
||||
--chart-1: hsl(12 76% 61%);
|
||||
--chart-2: hsl(173 58% 39%);
|
||||
--chart-3: hsl(197 37% 24%);
|
||||
--chart-4: hsl(43 74% 66%);
|
||||
--chart-5: hsl(27 87% 67%);
|
||||
--radius: 0.5rem;
|
||||
--sidebar-background: hsl(0 0% 98%);
|
||||
--sidebar-foreground: hsl(240 5.3% 26.1%);
|
||||
--sidebar-primary: hsl(0 0% 10%);
|
||||
--sidebar-primary-foreground: hsl(0 0% 98%);
|
||||
--sidebar-accent: hsl(0 0% 94%);
|
||||
--sidebar-accent-foreground: hsl(0 0% 30%);
|
||||
--sidebar-border: hsl(0 0% 91%);
|
||||
--sidebar-ring: hsl(217.2 91.2% 59.8%);
|
||||
--sidebar: hsl(0 0% 98%);
|
||||
--background: #f7f9fb;
|
||||
--foreground: #191c1e;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #191c1e;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #191c1e;
|
||||
--primary: #006e2f;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #d0e1fb;
|
||||
--secondary-foreground: #0b1c30;
|
||||
--muted: #f2f4f6;
|
||||
--muted-foreground: #3d4a3d;
|
||||
--accent: #e6e8ea;
|
||||
--accent-foreground: #191c1e;
|
||||
--destructive: #ba1a1a;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #bccbb9;
|
||||
--input: #bccbb9;
|
||||
--ring: #006e2f;
|
||||
--chart-1: #22c55e;
|
||||
--chart-2: #3b82f6;
|
||||
--chart-3: #f59e0b;
|
||||
--chart-4: #ef4444;
|
||||
--chart-5: #505f76;
|
||||
--radius: 0.25rem;
|
||||
--surface: #f7f9fb;
|
||||
--surface-dim: #d8dadc;
|
||||
--surface-bright: #f7f9fb;
|
||||
--surface-container-lowest: #ffffff;
|
||||
--surface-container-low: #f2f4f6;
|
||||
--surface-container: #eceef0;
|
||||
--surface-container-high: #e6e8ea;
|
||||
--surface-container-highest: #e0e3e5;
|
||||
--surface-variant: #e0e3e5;
|
||||
--surface-tint: #006e2f;
|
||||
--on-surface: #191c1e;
|
||||
--on-surface-variant: #3d4a3d;
|
||||
--on-background: #191c1e;
|
||||
--outline: #6d7b6c;
|
||||
--outline-variant: #bccbb9;
|
||||
--primary-container: #22c55e;
|
||||
--on-primary: #ffffff;
|
||||
--on-primary-container: #004b1e;
|
||||
--primary-fixed: #6bff8f;
|
||||
--primary-fixed-dim: #4ae176;
|
||||
--on-primary-fixed: #002109;
|
||||
--on-primary-fixed-variant: #005321;
|
||||
--secondary-container: #d0e1fb;
|
||||
--on-secondary: #ffffff;
|
||||
--on-secondary-container: #54647a;
|
||||
--secondary-fixed: #d3e4fe;
|
||||
--secondary-fixed-dim: #b7c8e1;
|
||||
--on-secondary-fixed: #0b1c30;
|
||||
--on-secondary-fixed-variant: #38485d;
|
||||
--tertiary: #9e4036;
|
||||
--tertiary-container: #ff8b7c;
|
||||
--on-tertiary: #ffffff;
|
||||
--on-tertiary-container: #76231b;
|
||||
--tertiary-fixed: #ffdad5;
|
||||
--tertiary-fixed-dim: #ffb4a9;
|
||||
--on-tertiary-fixed: #410001;
|
||||
--on-tertiary-fixed-variant: #7f2a21;
|
||||
--error: #ba1a1a;
|
||||
--error-container: #ffdad6;
|
||||
--on-error: #ffffff;
|
||||
--on-error-container: #93000a;
|
||||
--inverse-surface: #2d3133;
|
||||
--inverse-on-surface: #eff1f3;
|
||||
--inverse-primary: #4ae176;
|
||||
--sidebar-background: #f2f4f6;
|
||||
--sidebar-foreground: #191c1e;
|
||||
--sidebar-primary: #006e2f;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #e6e8ea;
|
||||
--sidebar-accent-foreground: #191c1e;
|
||||
--sidebar-border: #bccbb9;
|
||||
--sidebar-ring: #006e2f;
|
||||
--sidebar: #f2f4f6;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: hsl(0 0% 3.9%);
|
||||
--foreground: hsl(0 0% 98%);
|
||||
--card: hsl(0 0% 3.9%);
|
||||
--card-foreground: hsl(0 0% 98%);
|
||||
--popover: hsl(0 0% 3.9%);
|
||||
--popover-foreground: hsl(0 0% 98%);
|
||||
--primary: hsl(0 0% 98%);
|
||||
--primary-foreground: hsl(0 0% 9%);
|
||||
--secondary: hsl(0 0% 14.9%);
|
||||
--secondary-foreground: hsl(0 0% 98%);
|
||||
--muted: hsl(0 0% 16.08%);
|
||||
--muted-foreground: hsl(0 0% 63.9%);
|
||||
--accent: hsl(0 0% 14.9%);
|
||||
--accent-foreground: hsl(0 0% 98%);
|
||||
--destructive: hsl(0 84% 60%);
|
||||
--destructive-foreground: hsl(0 0% 98%);
|
||||
--border: hsl(0 0% 14.9%);
|
||||
--input: hsl(0 0% 14.9%);
|
||||
--ring: hsl(0 0% 83.1%);
|
||||
--chart-1: hsl(220 70% 50%);
|
||||
--chart-2: hsl(160 60% 45%);
|
||||
--chart-3: hsl(30 80% 55%);
|
||||
--chart-4: hsl(280 65% 60%);
|
||||
--chart-5: hsl(340 75% 55%);
|
||||
--sidebar-background: hsl(0 0% 7%);
|
||||
--sidebar-foreground: hsl(0 0% 95.9%);
|
||||
--sidebar-primary: hsl(360, 100%, 100%);
|
||||
--sidebar-primary-foreground: hsl(0 0% 100%);
|
||||
--sidebar-accent: hsl(0 0% 15.9%);
|
||||
--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
|
||||
--sidebar-border: hsl(0 0% 15.9%);
|
||||
--sidebar-ring: hsl(217.2 91.2% 59.8%);
|
||||
--sidebar: hsl(240 5.9% 10%);
|
||||
--background: #0f172a;
|
||||
--foreground: #eff1f3;
|
||||
--card: #111827;
|
||||
--card-foreground: #eff1f3;
|
||||
--popover: #111827;
|
||||
--popover-foreground: #eff1f3;
|
||||
--primary: #4ae176;
|
||||
--primary-foreground: #002109;
|
||||
--secondary: #1f2937;
|
||||
--secondary-foreground: #eff1f3;
|
||||
--muted: #1e293b;
|
||||
--muted-foreground: #cbd5e1;
|
||||
--accent: #1e293b;
|
||||
--accent-foreground: #eff1f3;
|
||||
--destructive: #f87171;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #334155;
|
||||
--input: #334155;
|
||||
--ring: #4ae176;
|
||||
--chart-1: #4ae176;
|
||||
--chart-2: #60a5fa;
|
||||
--chart-3: #fbbf24;
|
||||
--chart-4: #f87171;
|
||||
--chart-5: #b7c8e1;
|
||||
--surface: #0f172a;
|
||||
--surface-dim: #020617;
|
||||
--surface-bright: #111827;
|
||||
--surface-container-lowest: #111827;
|
||||
--surface-container-low: #1e293b;
|
||||
--surface-container: #263445;
|
||||
--surface-container-high: #334155;
|
||||
--surface-container-highest: #475569;
|
||||
--surface-variant: #334155;
|
||||
--surface-tint: #4ae176;
|
||||
--on-surface: #eff1f3;
|
||||
--on-surface-variant: #cbd5e1;
|
||||
--on-background: #eff1f3;
|
||||
--outline: #94a3b8;
|
||||
--outline-variant: #334155;
|
||||
--primary-container: #14532d;
|
||||
--on-primary: #002109;
|
||||
--on-primary-container: #bbf7d0;
|
||||
--primary-fixed: #6bff8f;
|
||||
--primary-fixed-dim: #4ae176;
|
||||
--on-primary-fixed: #002109;
|
||||
--on-primary-fixed-variant: #005321;
|
||||
--secondary-container: #1e3a5f;
|
||||
--on-secondary: #ffffff;
|
||||
--on-secondary-container: #d0e1fb;
|
||||
--secondary-fixed: #d3e4fe;
|
||||
--secondary-fixed-dim: #b7c8e1;
|
||||
--on-secondary-fixed: #0b1c30;
|
||||
--on-secondary-fixed-variant: #38485d;
|
||||
--tertiary: #ffb4a9;
|
||||
--tertiary-container: #7f2a21;
|
||||
--on-tertiary: #410001;
|
||||
--on-tertiary-container: #ffdad5;
|
||||
--tertiary-fixed: #ffdad5;
|
||||
--tertiary-fixed-dim: #ffb4a9;
|
||||
--on-tertiary-fixed: #410001;
|
||||
--on-tertiary-fixed-variant: #ffb4a9;
|
||||
--error: #f87171;
|
||||
--error-container: #7f1d1d;
|
||||
--on-error: #ffffff;
|
||||
--on-error-container: #fee2e2;
|
||||
--inverse-surface: #eff1f3;
|
||||
--inverse-on-surface: #191c1e;
|
||||
--inverse-primary: #006e2f;
|
||||
--sidebar-background: #111827;
|
||||
--sidebar-foreground: #eff1f3;
|
||||
--sidebar-primary: #4ae176;
|
||||
--sidebar-primary-foreground: #002109;
|
||||
--sidebar-accent: #1e293b;
|
||||
--sidebar-accent-foreground: #eff1f3;
|
||||
--sidebar-border: #334155;
|
||||
--sidebar-ring: #4ae176;
|
||||
--sidebar: #111827;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
Reference in New Issue
Block a user