mag/ABSDEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new opayouts

Browse Source
This commit is contained in:
Mark Gregory
2026-07-24 15:01:48 +01:00
parent dd23205d0b
commit 157450cf44
3 changed files with 142 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+133
View File
@@ -64,3 +64,136 @@ select:focus[data-flux-control] {
/* \[: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;
}
}
}
resources/themes/admin/views/dashboard.blade.php
+1 -5
View File
@@ -1,8 +1,5 @@
<x-layouts.app :title="__('Dashboard')">
<div class="relative flex h-full w-full flex-1 flex-col overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<x-stylist-theme-admin::placeholder-pattern class="pointer-events-none absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
<div class="relative z-10 flex h-full flex-1 flex-col gap-6 overflow-auto p-4 sm:p-6">
<div class="flex h-full w-full flex-1 flex-col gap-6">
<div>
<h1 class="text-2xl font-semibold text-zinc-950 dark:text-zinc-100">Dashboard</h1>
<p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">Platform health and recent activity.</p>
@@ -71,6 +68,5 @@
@endif
</section>
</div>
</div>
</div>
</x-layouts.app>
resources/themes/common/views/components/layouts/app.blade.php
+8 -2
View File
@@ -1,5 +1,11 @@
<x-stylist-theme-common::layouts.app.sidebar :title="$title ?? null">
<flux:main>
{{ $slot }}
<flux:main class="admin-main">
<div class="admin-canvas">
<x-stylist-theme-admin::placeholder-pattern class="admin-canvas-pattern" aria-hidden="true" />
<div class="admin-page">
{{ $slot }}
</div>
</div>
</flux:main>
</x-stylist-theme-common::layouts.app.sidebar>