mirror of
https://github.com/shishantbiswas/bknd.git
synced 2026-03-16 12:37:20 +00:00
129 lines
3.1 KiB
CSS
129 lines
3.1 KiB
CSS
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
#bknd-admin,
|
|
.bknd-admin {
|
|
--color-primary: var(--color-zinc-950);
|
|
--color-background: var(--color-zinc-50);
|
|
--color-muted: var(--color-zinc-200);
|
|
--color-darkest: var(--color-black);
|
|
--color-lightest: var(--color-white);
|
|
|
|
--color-warning: var(--color-amber-100);
|
|
--color-warning-foreground: var(--color-amber-800);
|
|
--color-error: var(--color-red-100);
|
|
--color-error-foreground: var(--color-red-800);
|
|
--color-success: var(--color-green-100);
|
|
--color-success-foreground: var(--color-green-800);
|
|
--color-info: var(--color-blue-100);
|
|
--color-info-foreground: var(--color-blue-800);
|
|
|
|
--color-resize: var(--color-blue-300);
|
|
|
|
@mixin light {
|
|
--mantine-color-body: var(--color-zinc-50);
|
|
}
|
|
@mixin dark {
|
|
--mantine-color-body: var(--color-zinc-950);
|
|
}
|
|
|
|
table {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
|
|
.dark,
|
|
.dark .bknd-admin /* currently used for elements, drop after making headless */,
|
|
#bknd-admin.dark,
|
|
.bknd-admin.dark {
|
|
--color-primary: var(--color-zinc-50);
|
|
--color-background: rgb(30 31 34);
|
|
--color-muted: rgb(47 47 52);
|
|
--color-darkest: var(--color-white);
|
|
--color-lightest: rgb(24 24 27);
|
|
|
|
--color-warning: var(--color-yellow-900);
|
|
--color-warning-foreground: var(--color-yellow-200);
|
|
--color-error: var(--color-red-950);
|
|
--color-error-foreground: var(--color-red-200);
|
|
--color-success: var(--color-green-950);
|
|
--color-success-foreground: var(--color-green-200);
|
|
--color-info: var(--color-blue-950);
|
|
--color-info-foreground: var(--color-blue-200);
|
|
}
|
|
|
|
@theme {
|
|
--color-primary: var(--color-primary);
|
|
--color-background: var(--color-background);
|
|
--color-muted: var(--color-muted);
|
|
--color-darkest: var(--color-darkest);
|
|
--color-lightest: var(--color-lightest);
|
|
|
|
--color-warning: var(--color-warning);
|
|
--color-warning-foreground: var(--color-warning-foreground);
|
|
--color-error: var(--color-error);
|
|
--color-error-foreground: var(--color-error-foreground);
|
|
--color-success: var(--color-success);
|
|
--color-success-foreground: var(--color-success-foreground);
|
|
--color-info: var(--color-info);
|
|
--color-info-foreground: var(--color-info-foreground);
|
|
}
|
|
|
|
#bknd-admin {
|
|
@apply bg-background text-primary overflow-hidden h-dvh w-dvw;
|
|
|
|
::selection {
|
|
@apply bg-primary/15;
|
|
}
|
|
|
|
input {
|
|
&::selection {
|
|
@apply bg-primary/15;
|
|
}
|
|
}
|
|
}
|
|
|
|
body,
|
|
#bknd-admin {
|
|
@apply flex flex-1 flex-col h-dvh w-dvw;
|
|
}
|
|
|
|
.link {
|
|
@apply active:translate-y-px;
|
|
}
|
|
|
|
.img-responsive {
|
|
@apply max-h-full w-auto;
|
|
}
|
|
|
|
#bknd-admin,
|
|
.bknd-admin {
|
|
/* Chrome, Edge, and Safari */
|
|
& *::-webkit-scrollbar {
|
|
@apply w-1;
|
|
&:horizontal {
|
|
@apply h-px;
|
|
}
|
|
}
|
|
|
|
& *::-webkit-scrollbar-track {
|
|
@apply bg-transparent w-1;
|
|
}
|
|
|
|
& *::-webkit-scrollbar-thumb {
|
|
@apply bg-primary/25;
|
|
}
|
|
}
|
|
|
|
@utility debug {
|
|
@apply border-red-500 border;
|
|
}
|
|
@utility debug-blue {
|
|
@apply border-blue-500 border;
|
|
}
|
|
@utility w-min-content {
|
|
width: min-content;
|
|
width: -webkit-min-content;
|
|
}
|