mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

feat(ui): admin-only root link and shared header navigation
CI / quality (push) Waiting to run
Details

Browse Source
This commit is contained in:
MOH
2026-03-06 16:50:45 +01:00
parent 7a20cf5c75
commit ce63cd8b69
32 changed files with 1070 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+131 -79
View File
@@ -3,191 +3,243 @@
@tailwind utilities;
:root {
--color-bg: #f5f6f8;
--color-fg: #111214;
--color-surface: #ffffff;
--color-surface-soft: #eef0f3;
--color-surface-elevated: #fdfdfd;
--background: 220 23% 97%;
--foreground: 222 22% 11%;
--color-border: #dde1e7;
--color-border-strong: #bec5d0;
--card: 0 0% 100%;
--card-foreground: 222 22% 11%;
--popover: 0 0% 100%;
--popover-foreground: 222 22% 11%;
--color-muted: #4b5565;
--color-muted-strong: #374151;
--color-subtle: #6b7380;
--primary: 10 74% 50%;
--primary-foreground: 210 40% 98%;
--secondary: 214 19% 93%;
--secondary-foreground: 222 22% 11%;
--muted: 215 20% 92%;
--muted-foreground: 219 15% 35%;
--accent: 44 93% 55%;
--accent-foreground: 222 22% 11%;
--destructive: 0 72% 45%;
--destructive-foreground: 210 40% 98%;
--color-inverse-bg: #111214;
--color-inverse-fg: #f3f4f6;
--surface: 0 0% 100%;
--surface-soft: 215 18% 93%;
--surface-elevated: 0 0% 99%;
--border: 215 20% 88%;
--input: 215 20% 83%;
--ring: 10 74% 50%;
--color-brand-primary: #dd4124;
--color-brand-secondary: #f7b91f;
--radius: 0.85rem;
--radius-card: 1rem;
--radius-input: 0.7rem;
--radius-sidebar: 1rem;
--color-success-bg: #dcfce7;
--color-success-fg: #166534;
--color-warning-bg: #fef3c7;
--color-warning-fg: #92400e;
--color-danger-bg: #fee2e2;
--color-danger-fg: #991b1b;
--shadow-xs: 0 1px 2px 0 hsl(220 30% 10% / 0.06);
--shadow-sm: 0 6px 18px -14px hsl(220 32% 20% / 0.18);
--shadow-md: 0 18px 35px -24px hsl(220 32% 20% / 0.24);
--shadow-lg: 0 24px 55px -30px hsl(220 32% 20% / 0.3);
--shadow-card: 0 10px 30px -20px hsl(220 35% 10% / 0.22);
--shadow-sidebar: inset 0 1px 0 0 hsl(0 0% 100% / 0.08);
--sidebar-background: 220 27% 96%;
--sidebar-foreground: 223 18% 24%;
--sidebar-primary: 10 74% 50%;
--sidebar-primary-foreground: 210 40% 98%;
--sidebar-accent: 220 24% 91%;
--sidebar-accent-foreground: 222 20% 15%;
--sidebar-border: 216 20% 85%;
--sidebar-ring: 10 74% 50%;
--focus-ring: 0 0 0 2px hsl(var(--ring) / 0.35);
}
.dark {
--color-bg: #090b0f;
--color-fg: #eef1f7;
--color-surface: #10141c;
--color-surface-soft: #151b24;
--color-surface-elevated: #1b2230;
--background: 223 32% 7%;
--foreground: 216 36% 93%;
--color-border: #2a3342;
--color-border-strong: #3a465a;
--card: 221 29% 11%;
--card-foreground: 216 36% 93%;
--popover: 221 29% 11%;
--popover-foreground: 216 36% 93%;
--color-muted: #c6cfdd;
--color-muted-strong: #dbe4f3;
--color-subtle: #98a4b8;
--primary: 10 80% 56%;
--primary-foreground: 216 36% 93%;
--secondary: 221 23% 18%;
--secondary-foreground: 216 36% 93%;
--muted: 221 21% 20%;
--muted-foreground: 218 17% 76%;
--accent: 44 92% 52%;
--accent-foreground: 221 29% 11%;
--destructive: 0 72% 50%;
--destructive-foreground: 216 36% 93%;
--color-inverse-bg: #eff3f9;
--color-inverse-fg: #0e1118;
--surface: 221 29% 11%;
--surface-soft: 220 24% 15%;
--surface-elevated: 220 21% 20%;
--border: 221 21% 24%;
--input: 221 20% 27%;
--ring: 10 80% 56%;
--color-success-bg: rgba(22, 101, 52, 0.35);
--color-success-fg: #86efac;
--color-warning-bg: rgba(146, 64, 14, 0.35);
--color-warning-fg: #fde68a;
--color-danger-bg: rgba(153, 27, 27, 0.35);
--color-danger-fg: #fecaca;
--shadow-xs: 0 1px 2px 0 hsl(220 40% 2% / 0.5);
--shadow-sm: 0 8px 20px -12px hsl(220 40% 2% / 0.65);
--shadow-md: 0 18px 36px -20px hsl(220 40% 2% / 0.75);
--shadow-lg: 0 28px 60px -28px hsl(220 40% 2% / 0.85);
--shadow-card: 0 16px 34px -24px hsl(220 40% 2% / 0.8);
--shadow-sidebar: inset 0 1px 0 0 hsl(216 36% 93% / 0.05);
--sidebar-background: 223 30% 9%;
--sidebar-foreground: 216 28% 86%;
--sidebar-primary: 10 80% 56%;
--sidebar-primary-foreground: 216 36% 93%;
--sidebar-accent: 221 23% 17%;
--sidebar-accent-foreground: 216 36% 93%;
--sidebar-border: 221 20% 21%;
--sidebar-ring: 10 80% 56%;
}
html {
color-scheme: light;
background-color: var(--color-bg);
background-color: hsl(var(--background));
}
html.dark {
color-scheme: dark;
}
@layer base {
* {
@apply border-border;
}
body {
@apply min-h-screen bg-background text-foreground antialiased;
}
}
body {
min-height: 100vh;
color: var(--color-fg);
background: var(--color-bg);
color: hsl(var(--foreground));
background: hsl(var(--background));
}
::selection {
background: color-mix(in oklab, var(--color-brand-primary) 72%, black 0%);
color: #ffffff;
background: hsl(var(--primary) / 0.82);
color: hsl(var(--primary-foreground));
}
@layer utilities {
.bg-app {
background-color: var(--color-bg);
background-color: hsl(var(--background));
}
.bg-surface {
background-color: var(--color-surface);
background-color: hsl(var(--surface));
}
.bg-surface-soft {
background-color: var(--color-surface-soft);
background-color: hsl(var(--surface-soft));
}
.bg-surface-elevated {
background-color: var(--color-surface-elevated);
background-color: hsl(var(--surface-elevated));
}
.bg-inverse {
background-color: var(--color-inverse-bg);
background-color: hsl(var(--foreground));
}
.text-fg {
color: var(--color-fg);
color: hsl(var(--foreground));
}
.text-muted {
color: var(--color-muted);
color: hsl(var(--muted-foreground));
}
.text-muted-strong {
color: var(--color-muted-strong);
color: hsl(var(--foreground) / 0.86);
}
.text-subtle {
color: var(--color-subtle);
color: hsl(var(--muted-foreground) / 0.88);
}
.text-inverse {
color: var(--color-inverse-fg);
color: hsl(var(--background));
}
.border-default {
border-color: var(--color-border);
border-color: hsl(var(--border));
}
.border-strong {
border-color: var(--color-border-strong);
border-color: hsl(var(--input));
}
.status-success {
background-color: var(--color-success-bg);
color: var(--color-success-fg);
background-color: hsl(142 70% 45% / 0.15);
color: hsl(142 72% 34%);
}
.status-warning {
background-color: var(--color-warning-bg);
color: var(--color-warning-fg);
background-color: hsl(38 92% 56% / 0.17);
color: hsl(33 92% 34%);
}
.status-danger {
background-color: var(--color-danger-bg);
color: var(--color-danger-fg);
background-color: hsl(var(--destructive) / 0.18);
color: hsl(var(--destructive));
}
.hover-surface-soft:hover {
background-color: var(--color-surface-soft);
background-color: hsl(var(--surface-soft));
}
.hover-fg:hover {
color: var(--color-fg);
color: hsl(var(--foreground));
}
.group:hover .group-hover-fg {
color: var(--color-fg);
color: hsl(var(--foreground));
}
.group:hover .group-hover-border-strong {
border-color: var(--color-border-strong);
border-color: hsl(var(--input));
}
.btn-primary {
background-color: var(--color-inverse-bg);
color: var(--color-inverse-fg);
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.btn-primary:hover {
opacity: 0.9;
filter: brightness(0.95);
}
.btn-secondary {
border: 1px solid var(--color-border-strong);
color: var(--color-muted-strong);
border: 1px solid hsl(var(--input));
color: hsl(var(--foreground) / 0.88);
background-color: transparent;
}
.btn-secondary:hover {
background-color: var(--color-surface-soft);
background-color: hsl(var(--surface-soft));
}
.field-surface {
border: 1px solid var(--color-border-strong);
background-color: var(--color-surface);
color: var(--color-fg);
border: 1px solid hsl(var(--input));
background-color: hsl(var(--surface));
color: hsl(var(--foreground));
border-radius: var(--radius-input);
}
.field-surface:focus {
outline: none;
box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
box-shadow: var(--focus-ring);
}
.brand-gradient-text {
background: linear-gradient(120deg, var(--color-brand-primary), var(--color-brand-secondary));
background: linear-gradient(120deg, hsl(var(--primary)), hsl(var(--accent)));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
@@ -195,8 +247,8 @@ body {
.brand-glow {
box-shadow:
0 10px 40px -16px color-mix(in oklab, var(--color-brand-primary) 52%, transparent),
0 8px 32px -18px color-mix(in oklab, var(--color-brand-secondary) 58%, transparent);
0 10px 40px -16px hsl(var(--primary) / 0.45),
0 8px 32px -18px hsl(var(--accent) / 0.45);
}
.float-slow {