200 lines
6.3 KiB
CSS
200 lines
6.3 KiB
CSS
@import 'tailwindcss';
|
|
@import '../../vendor/livewire/flux/dist/flux.css';
|
|
|
|
@source '../views';
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
|
|
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
|
|
--color-zinc-50: #fafafa;
|
|
--color-zinc-100: #f5f5f5;
|
|
--color-zinc-200: #e5e5e5;
|
|
--color-zinc-300: #d4d4d4;
|
|
--color-zinc-400: #a3a3a3;
|
|
--color-zinc-500: #737373;
|
|
--color-zinc-600: #525252;
|
|
--color-zinc-700: #404040;
|
|
--color-zinc-800: #262626;
|
|
--color-zinc-900: #171717;
|
|
--color-zinc-950: #0a0a0a;
|
|
|
|
--color-accent: var(--color-neutral-800);
|
|
--color-accent-content: var(--color-neutral-800);
|
|
--color-accent-foreground: var(--color-white);
|
|
}
|
|
|
|
@layer theme {
|
|
.dark {
|
|
--color-accent: var(--color-white);
|
|
--color-accent-content: var(--color-white);
|
|
--color-accent-foreground: var(--color-neutral-800);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
}
|
|
|
|
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
[data-flux-label] {
|
|
@apply !mb-0 !leading-tight;
|
|
}
|
|
|
|
input:focus[data-flux-control],
|
|
textarea:focus[data-flux-control],
|
|
select:focus[data-flux-control] {
|
|
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
|
}
|
|
|
|
/* \[:where(&)\]:size-4 {
|
|
@apply size-4;
|
|
} */
|
|
|
|
@layer components {
|
|
.admin-main {
|
|
@apply relative overflow-hidden bg-zinc-100/80 p-0 dark:bg-zinc-950;
|
|
}
|
|
|
|
.admin-canvas {
|
|
@apply relative min-h-full w-full overflow-hidden;
|
|
}
|
|
|
|
.admin-canvas-pattern {
|
|
@apply pointer-events-none fixed inset-y-0 right-0 z-0 h-full w-[calc(100%-16rem)] stroke-zinc-900/10 dark:stroke-white/10;
|
|
}
|
|
|
|
.admin-page {
|
|
@apply relative z-10 mx-auto flex min-h-full w-full max-w-[1800px] flex-col p-4 sm:p-6 lg:p-8;
|
|
}
|
|
|
|
/* Normalise the first page wrapper used across modules. */
|
|
.admin-page > :where(div, main, section, article) {
|
|
@apply w-full;
|
|
}
|
|
|
|
/* Page headings gain a consistent visual anchor without requiring view rewrites. */
|
|
.admin-page :where(h1) {
|
|
@apply tracking-tight text-zinc-950 dark:text-white;
|
|
}
|
|
|
|
.admin-page :where(h1:first-child),
|
|
.admin-page :where(div > h1:first-child) {
|
|
@apply relative;
|
|
}
|
|
|
|
.admin-page :where(h1:first-child)::after,
|
|
.admin-page :where(div > h1:first-child)::after {
|
|
content: '';
|
|
@apply mt-3 block h-1 w-14 rounded-full bg-gradient-to-r from-blue-500 via-violet-500 to-fuchsia-500;
|
|
}
|
|
|
|
/* Shared surface treatment for cards, forms and data containers. */
|
|
.admin-page :where(
|
|
form[class*='rounded'],
|
|
section[class*='rounded'],
|
|
article[class*='rounded'],
|
|
div[class*='rounded'][class*='border'],
|
|
div[class*='overflow-hidden'][class*='border']
|
|
) {
|
|
@apply border-zinc-200/80 bg-white/88 shadow-sm backdrop-blur-md dark:border-zinc-700/80 dark:bg-zinc-900/88;
|
|
}
|
|
|
|
/* Give card grids restrained colour and depth instead of flat white blocks. */
|
|
.admin-page :where(.grid) > :where(
|
|
div[class*='rounded'][class*='border'],
|
|
section[class*='rounded'][class*='border'],
|
|
article[class*='rounded'][class*='border']
|
|
) {
|
|
@apply relative overflow-hidden;
|
|
}
|
|
|
|
.admin-page :where(.grid) > :where(
|
|
div[class*='rounded'][class*='border'],
|
|
section[class*='rounded'][class*='border'],
|
|
article[class*='rounded'][class*='border']
|
|
)::before {
|
|
content: '';
|
|
@apply absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-blue-500 via-violet-500 to-cyan-400 opacity-80;
|
|
}
|
|
|
|
.admin-page :where(.grid) > :where(
|
|
div[class*='rounded'][class*='border'],
|
|
section[class*='rounded'][class*='border'],
|
|
article[class*='rounded'][class*='border']
|
|
):nth-child(3n + 2)::before {
|
|
@apply from-emerald-500 via-teal-500 to-cyan-400;
|
|
}
|
|
|
|
.admin-page :where(.grid) > :where(
|
|
div[class*='rounded'][class*='border'],
|
|
section[class*='rounded'][class*='border'],
|
|
article[class*='rounded'][class*='border']
|
|
):nth-child(3n)::before {
|
|
@apply from-amber-400 via-orange-500 to-rose-500;
|
|
}
|
|
|
|
/* Tables use the same translucent surface and clearer hierarchy. */
|
|
.admin-page table {
|
|
@apply w-full text-zinc-700 dark:text-zinc-200;
|
|
}
|
|
|
|
.admin-page thead {
|
|
@apply bg-gradient-to-r from-zinc-50/95 to-blue-50/70 text-zinc-700 dark:from-zinc-800/95 dark:to-blue-950/30 dark:text-zinc-200;
|
|
}
|
|
|
|
.admin-page tbody tr {
|
|
@apply transition-colors hover:bg-blue-50/60 dark:hover:bg-blue-950/20;
|
|
}
|
|
|
|
.admin-page tbody tr + tr {
|
|
@apply border-t border-zinc-200/70 dark:border-zinc-800;
|
|
}
|
|
|
|
/* Forms become visually consistent even where modules only supplied borders. */
|
|
.admin-page form[class*='space-y'],
|
|
.admin-page form[class*='rounded'] {
|
|
@apply rounded-2xl border border-zinc-200/80 bg-white/90 p-5 shadow-sm backdrop-blur-md dark:border-zinc-700/80 dark:bg-zinc-900/90 sm:p-6;
|
|
}
|
|
|
|
.admin-page input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
|
|
.admin-page textarea,
|
|
.admin-page select {
|
|
@apply bg-white/90 dark:bg-zinc-950/70;
|
|
}
|
|
|
|
/* Common success/error notices receive stronger colour and contrast. */
|
|
.admin-page :where([class*='bg-green-50'], [class*='bg-emerald-50']) {
|
|
@apply shadow-sm dark:border-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-200;
|
|
}
|
|
|
|
.admin-page :where([class*='bg-red-50']) {
|
|
@apply shadow-sm dark:border-red-800 dark:bg-red-950/60 dark:text-red-200;
|
|
}
|
|
|
|
/* Pagination sits on the same design language as cards. */
|
|
.admin-page nav[role='navigation'] {
|
|
@apply rounded-xl bg-white/75 p-2 shadow-sm backdrop-blur dark:bg-zinc-900/75;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.admin-canvas-pattern {
|
|
@apply w-full;
|
|
}
|
|
}
|
|
}
|