dtoro/micronomicon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: styles

Browse Source
This commit is contained in:
authentik Default Admin
2026-04-01 16:03:55 +02:00
parent 0642d0f894
commit a0a5f18128
8 changed files with 198 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
frontend/src/index.css
View File

@@ -1,13 +1,14 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/geist";
@import "@fontsource-variable/jetbrains-mono";
@custom-variant dark (&:is(.dark *));
@theme inline {
--font-heading: var(--font-sans);
--font-sans: 'Geist Variable', sans-serif;
--font-heading: var(--font-mono);
--font-sans: 'JetBrains Mono Variable', 'Courier New', monospace;
--font-mono: 'JetBrains Mono Variable', 'Courier New', monospace;
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -39,122 +40,204 @@
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-background: var(--background);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-xl: 0px;
--radius-2xl: 0px;
--radius-3xl: 0px;
--radius-4xl: 0px;
}
/* ── Terracotta Light Theme ── */
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--background: oklch(0.94 0.02 55);
--foreground: oklch(0.18 0.03 45);
--card: oklch(0.91 0.025 55);
--card-foreground: oklch(0.18 0.03 45);
--popover: oklch(0.91 0.025 55);
--popover-foreground: oklch(0.18 0.03 45);
--primary: oklch(0.55 0.14 45);
--primary-foreground: oklch(0.95 0.02 55);
--secondary: oklch(0.86 0.03 55);
--secondary-foreground: oklch(0.18 0.03 45);
--muted: oklch(0.86 0.025 55);
--muted-foreground: oklch(0.45 0.04 45);
--accent: oklch(0.84 0.035 55);
--accent-foreground: oklch(0.18 0.03 45);
--destructive: oklch(0.5 0.2 25);
--border: oklch(0.6 0.08 45);
--input: oklch(0.78 0.04 55);
--ring: oklch(0.55 0.14 45);
--chart-1: oklch(0.55 0.14 45);
--chart-2: oklch(0.65 0.1 70);
--chart-3: oklch(0.5 0.08 30);
--chart-4: oklch(0.6 0.06 90);
--chart-5: oklch(0.4 0.04 45);
--radius: 0px;
--sidebar: oklch(0.90 0.025 55);
--sidebar-foreground: oklch(0.18 0.03 45);
--sidebar-primary: oklch(0.55 0.14 45);
--sidebar-primary-foreground: oklch(0.95 0.02 55);
--sidebar-accent: oklch(0.84 0.035 55);
--sidebar-accent-foreground: oklch(0.18 0.03 45);
--sidebar-border: oklch(0.6 0.08 45);
--sidebar-ring: oklch(0.55 0.14 45);
}
/* ── Black-Figure Dark Theme (primary) ──
Inspired by Greek pottery: black ground, terracotta figures, gold accents
*/
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
--background: oklch(0.12 0.015 45);
--foreground: oklch(0.72 0.08 55);
--card: oklch(0.16 0.02 45);
--card-foreground: oklch(0.72 0.08 55);
--popover: oklch(0.16 0.02 45);
--popover-foreground: oklch(0.72 0.08 55);
--primary: oklch(0.7 0.13 55);
--primary-foreground: oklch(0.12 0.015 45);
--secondary: oklch(0.22 0.025 45);
--secondary-foreground: oklch(0.7 0.08 55);
--muted: oklch(0.22 0.02 45);
--muted-foreground: oklch(0.5 0.05 55);
--accent: oklch(0.24 0.03 45);
--accent-foreground: oklch(0.72 0.08 55);
--destructive: oklch(0.55 0.18 25);
--border: oklch(0.38 0.06 45);
--input: oklch(0.26 0.03 45);
--ring: oklch(0.7 0.13 55);
--chart-1: oklch(0.7 0.13 55);
--chart-2: oklch(0.65 0.1 70);
--chart-3: oklch(0.55 0.08 30);
--chart-4: oklch(0.6 0.06 90);
--chart-5: oklch(0.45 0.04 45);
--sidebar: oklch(0.14 0.018 45);
--sidebar-foreground: oklch(0.72 0.08 55);
--sidebar-primary: oklch(0.7 0.13 55);
--sidebar-primary-foreground: oklch(0.12 0.015 45);
--sidebar-accent: oklch(0.24 0.03 45);
--sidebar-accent-foreground: oklch(0.72 0.08 55);
--sidebar-border: oklch(0.38 0.06 45);
--sidebar-ring: oklch(0.7 0.13 55);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
}
body {
@apply bg-background text-foreground;
}
font-size: 13px;
letter-spacing: -0.01em;
}
html {
@apply font-sans;
}
@apply font-mono;
}
/* Dark-mode scrollbars */
/* Terracotta scrollbars */
* {
scrollbar-width: thin;
scrollbar-color: oklch(0.35 0 0) transparent;
scrollbar-color: oklch(0.35 0.05 45) transparent;
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
width: 5px;
height: 5px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: oklch(0.35 0 0);
border-radius: 3px;
background: oklch(0.35 0.05 45);
border-radius: 0;
}
*::-webkit-scrollbar-thumb:hover {
background: oklch(0.45 0 0);
background: oklch(0.5 0.08 55);
}
*::-webkit-scrollbar-corner {
background: transparent;
}
.dark *::-webkit-scrollbar-thumb {
background: oklch(0.3 0 0);
/* Terracotta cursor */
.cm-cursor {
border-left-color: oklch(0.7 0.13 55) !important;
}
.dark *::-webkit-scrollbar-thumb:hover {
background: oklch(0.4 0 0);
/* Bold console aesthetic */
button, [role="button"], [data-slot="button"] {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 11px;
cursor: pointer;
}
}
/* Ensure all interactive elements have pointer cursor */
a, [role="link"], [role="tab"], [role="option"],
[data-slot="popover-trigger"], [data-slot="toggle-group-item"],
[data-slot="alert-dialog-action"], [data-slot="alert-dialog-cancel"],
.cm-tooltip-autocomplete [role="option"] {
cursor: pointer;
}
nav {
border-bottom-width: 3px;
}
/* ── Dithered offset shadow ──
Simulates a stippled/dot-matrix shadow using multiple box-shadow
dots at alternating positions. Works even with overflow:auto.
*/
/* Panels and containers — checkerboard dot shadow */
[data-slot="table-container"],
[data-slot="alert-dialog-content"],
[data-slot="popover-content"],
[data-slot="card"],
.panel-shadow {
border: 2px solid var(--border);
box-shadow:
3px 3px 0 0 var(--border),
5px 3px 0 0 transparent,
7px 3px 0 0 var(--border),
4px 4px 0 0 transparent,
6px 4px 0 0 var(--border),
3px 5px 0 0 var(--border),
5px 5px 0 0 transparent,
7px 5px 0 0 var(--border),
4px 6px 0 0 var(--border),
6px 6px 0 0 transparent;
}
/* Primary (default) buttons only — dithered shadow */
button[data-slot="button"][data-variant="default"] {
border: 2px solid var(--border);
box-shadow:
2px 2px 0 0 var(--border),
4px 2px 0 0 transparent,
6px 2px 0 0 var(--border),
3px 3px 0 0 transparent,
5px 3px 0 0 var(--border),
2px 4px 0 0 var(--border),
4px 4px 0 0 transparent,
6px 4px 0 0 var(--border);
transition: box-shadow 0.1s, transform 0.1s;
}
button[data-slot="button"][data-variant="default"]:active {
box-shadow: none;
transform: translate(2px, 2px);
}
/* All other buttons — no shadow */
button[data-slot="button"][data-variant="outline"],
button[data-slot="button"][data-variant="secondary"],
button[data-slot="button"][data-variant="ghost"],
button[data-slot="button"][data-variant="link"],
button[data-slot="button"][data-variant="destructive"] {
box-shadow: none !important;
}
/* Input fields */
input[data-slot="input"] {
border: 2px solid var(--border);
}
}