192 lines
12 KiB
CSS
192 lines
12 KiB
CSS
@import "tailwindcss" source(none);
|
|
@source "../resources/templates/**/*.html";
|
|
|
|
@theme {
|
|
--color-ink: #15171a;
|
|
--color-canvas: #f6f7f8;
|
|
--color-sidebar: #f0f1f2;
|
|
--color-panel: #ffffff;
|
|
--color-panel-muted: #f7f8f9;
|
|
--color-border: #858c96;
|
|
--color-border-strong: #747d89;
|
|
--color-muted: #626a75;
|
|
--color-accent: #3157e7;
|
|
--color-success: #087a48;
|
|
--color-warning: #996000;
|
|
--color-danger: #b42318;
|
|
}
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--ink: #15171a;
|
|
--canvas: #f6f7f8;
|
|
--sidebar: #f0f1f2;
|
|
--panel: #ffffff;
|
|
--panel-muted: #f7f8f9;
|
|
--border: #858c96;
|
|
--border-strong: #747d89;
|
|
--muted: #626a75;
|
|
--subtle: #626a75;
|
|
--accent: #3157e7;
|
|
--focus: #3157e7;
|
|
--success: #087a48;
|
|
--warning: #7a4d00;
|
|
--danger: #b42318;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--ink: #eceef1;
|
|
--canvas: #0b0c0e;
|
|
--sidebar: #111317;
|
|
--panel: #17191e;
|
|
--panel-muted: #1d2026;
|
|
--border: #626b78;
|
|
--border-strong: #707987;
|
|
--muted: #b2b7c0;
|
|
--subtle: #969da8;
|
|
--accent: #8ca4ff;
|
|
--focus: #9eb2ff;
|
|
--success: #4fd19b;
|
|
--warning: #f0bc63;
|
|
--danger: #ff8e88;
|
|
}
|
|
|
|
@layer base {
|
|
* { box-sizing: border-box; }
|
|
html { min-width: 64rem; background: var(--canvas); }
|
|
body { margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink); font: 14px/1.45 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
|
|
button, input, select, textarea { font: inherit; }
|
|
button, a, input, select, textarea { outline: none; }
|
|
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
|
|
a { color: inherit; }
|
|
}
|
|
|
|
@layer components {
|
|
.app-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 100vh; }
|
|
.auth-shell { min-height: 100vh; }
|
|
.auth-header { display: flex; min-height: 4rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding: .75rem 1.25rem; }
|
|
.auth-theme { width: 9rem; }
|
|
.auth-main { display: grid; min-height: calc(100vh - 4rem); place-items: center; padding: 2rem; }
|
|
.auth-card { width: min(100%, 28rem); border: 1px solid var(--border); border-radius: .85rem; background: var(--panel); padding: 1.5rem; box-shadow: 0 16px 42px rgb(20 25 35 / .08); }
|
|
.auth-eyebrow { margin: 0 0 .35rem; color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
|
|
.auth-form { margin-top: 1.25rem; }
|
|
[data-sidebar-collapsed="true"] .app-shell { grid-template-columns: 4rem minmax(0, 1fr); }
|
|
.sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; border-right: 1px solid var(--border); background: var(--sidebar); padding: 1rem .75rem; }
|
|
.brand, .account { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .25rem .4rem; }
|
|
.brand-mark { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: .55rem; background: var(--ink); color: var(--panel); }
|
|
.sidebar-label { overflow: hidden; white-space: nowrap; }
|
|
[data-sidebar-collapsed="true"] .sidebar-label { width: 0; opacity: 0; }
|
|
.nav-label { margin: 1.6rem .6rem .4rem; color: var(--subtle); font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
|
|
.nav-list { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
|
|
.nav-link { display: flex; min-height: 2.5rem; align-items: center; gap: .7rem; border-radius: .55rem; padding: .55rem .7rem; color: var(--muted); font-weight: 600; text-decoration: none; }
|
|
.nav-link:hover, .nav-link[aria-current="page"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(20 25 35 / .08); }
|
|
.nav-link[data-tooltip] { position: relative; }
|
|
[data-sidebar-collapsed="true"] .nav-link[data-tooltip]:hover::after,
|
|
[data-sidebar-collapsed="true"] .nav-link[data-tooltip]:focus-visible::after {
|
|
position: absolute;
|
|
z-index: 20;
|
|
top: 50%;
|
|
left: calc(100% + .75rem);
|
|
padding: .38rem .55rem;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: .4rem;
|
|
background: var(--ink);
|
|
color: var(--panel);
|
|
content: attr(data-tooltip);
|
|
font-size: .75rem;
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
transform: translateY(-50%);
|
|
white-space: nowrap;
|
|
}
|
|
.nav-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
|
|
.sidebar-footer { display: grid; gap: .7rem; margin-top: auto; }
|
|
.theme-field { display: grid; gap: .25rem; }
|
|
.theme-field select { min-height: 2.4rem; border: 1px solid var(--border-strong); border-radius: .5rem; background: var(--panel); color: var(--ink); padding: .35rem .55rem; }
|
|
[data-sidebar-collapsed="true"] .theme-field select { width: 2.5rem; padding-inline: .25rem; font-size: 0; }
|
|
.logout-form button { width: 100%; border: 0; background: transparent; text-align: left; }
|
|
.app-column { min-width: 0; }
|
|
.app-header { display: flex; min-height: 3.75rem; align-items: center; gap: .8rem; border-bottom: 1px solid var(--border); padding: 0 1.5rem; }
|
|
.header-title { min-width: 0; font-weight: 700; }
|
|
.breadcrumb { color: var(--muted); font-weight: 400; }
|
|
.header-actions { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
|
|
.icon-button { display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--border-strong); border-radius: .5rem; background: var(--panel); color: var(--ink); cursor: pointer; }
|
|
.page { min-width: 0; padding: 1.55rem; }
|
|
.page-heading { display: flex; align-items: end; gap: 1rem; margin-bottom: 1.1rem; }
|
|
.page-heading-copy { min-width: 0; }
|
|
.page-title { margin: 0; font-size: 1.56rem; line-height: 1.2; letter-spacing: -.025em; }
|
|
.page-description { max-width: 72ch; margin: .3rem 0 0; color: var(--muted); }
|
|
.primary-action { margin-left: auto; }
|
|
.button { display: inline-flex; min-height: 2.35rem; align-items: center; justify-content: center; gap: .45rem; border: 1px solid var(--border-strong); border-radius: .5rem; padding: .5rem .8rem; background: var(--panel); color: var(--ink); font-weight: 650; text-decoration: none; cursor: pointer; }
|
|
.button-primary { border-color: var(--ink); background: var(--ink); color: var(--panel); }
|
|
.button:disabled { cursor: not-allowed; opacity: .55; }
|
|
.button-danger { border-color: color-mix(in srgb, var(--danger), transparent 65%); background: color-mix(in srgb, var(--danger), transparent 90%); color: var(--danger); }
|
|
.panel { border: 1px solid var(--border); border-radius: .75rem; background: var(--panel); box-shadow: 0 10px 28px rgb(20 25 35 / .06); }
|
|
.panel-header { padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
|
|
.panel-title { margin: 0; font-size: 1rem; }
|
|
.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; margin-bottom: 1rem; }
|
|
.metric-strip-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.metric { min-width: 0; padding: 1rem; }
|
|
.metric + .metric { border-left: 1px solid var(--border); }
|
|
.metric-label { color: var(--muted); font-size: .78rem; }
|
|
.metric-value { margin-top: .35rem; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
.metric-detail { margin-top: .18rem; color: var(--muted); font-size: .78rem; }
|
|
.field { display: grid; gap: .35rem; }
|
|
.form-panel { margin-top: 1rem; padding: 1rem; }
|
|
.form-grid { display: grid; gap: 1rem; }
|
|
.form-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.form-section { border: 1px solid var(--border); border-radius: .65rem; padding: 1rem; }
|
|
.form-section legend { padding: 0 .35rem; font-weight: 700; }
|
|
.field-help { margin: 0 0 .8rem; color: var(--muted); font-size: .78rem; }
|
|
.form-actions { display: flex; justify-content: flex-end; gap: .6rem; }
|
|
.inline-actions { display: flex; gap: .6rem; margin: 1rem 0; }
|
|
.filter-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: .8rem; margin: 1rem 0; }
|
|
.field-label { font-size: .78rem; font-weight: 650; }
|
|
.control { min-height: 2.45rem; width: 100%; border: 1px solid var(--border-strong); border-radius: .5rem; background: var(--panel); color: var(--ink); padding: .55rem .65rem; }
|
|
.control[aria-invalid="true"] { border-color: var(--danger); }
|
|
.field-error { margin: 0; color: var(--danger); font-size: .78rem; }
|
|
.checkbox { display: flex; align-items: center; gap: .5rem; }
|
|
.badge { display: inline-flex; align-items: center; gap: .32rem; border: 1px solid var(--border); border-radius: 999px; padding: .15rem .45rem; font-size: .72rem; font-weight: 700; }
|
|
.badge::before { content: ""; width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; }
|
|
.badge-success { color: var(--success); }
|
|
.badge-warning { color: var(--warning); }
|
|
.badge-danger { color: var(--danger); }
|
|
.alert { margin: .75rem 0; border: 1px solid var(--border); border-radius: .6rem; padding: .75rem .9rem; }
|
|
.alert-warning { border-color: color-mix(in srgb, var(--warning), transparent 55%); color: var(--warning); }
|
|
.alert-action { margin-left: .6rem; font-weight: 700; }
|
|
.alert-error { border-color: color-mix(in srgb, var(--danger), transparent 60%); color: var(--danger); }
|
|
.empty-state { padding: 2.5rem 1rem; text-align: center; }
|
|
.empty-state p { margin: .3rem auto 0; color: var(--muted); }
|
|
.table-scroll { max-width: 100%; overflow-x: auto; }
|
|
.data-table { width: 100%; min-width: 42rem; border-collapse: collapse; }
|
|
.data-table th { background: var(--panel-muted); color: var(--muted); font-size: .69rem; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
|
|
.data-table th, .data-table td { border-bottom: 1px solid var(--border); padding: .7rem 1rem; }
|
|
.data-table tr:last-child td { border-bottom: 0; }
|
|
.tabs { display: inline-flex; gap: .2rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--panel-muted); padding: .2rem; }
|
|
.tab { border-radius: .4rem; padding: .4rem .65rem; text-decoration: none; }
|
|
.tab[aria-current="page"] { background: var(--panel); box-shadow: 0 1px 2px rgb(20 25 35 / .08); }
|
|
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; padding: .8rem 1rem; }
|
|
.skeleton { height: 1rem; border-radius: .35rem; background: var(--panel-muted); animation: pulse 1.5s ease-in-out infinite; }
|
|
.notification-menu { min-width: 18rem; padding: .75rem; }
|
|
dialog { max-width: 30rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--panel); color: var(--ink); padding: 1.25rem; }
|
|
dialog::backdrop { background: rgb(0 0 0 / .45); }
|
|
.picker-trigger { justify-content: flex-start; }
|
|
.picker-summary { margin: 0; color: var(--muted); font-size: .78rem; }
|
|
.picker-drawer { width: min(32rem, 100%); max-width: 32rem; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: .9rem 0 0 .9rem; padding: 0; }
|
|
.picker-header, .picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; }
|
|
.picker-header { border-bottom: 1px solid var(--border); }
|
|
.picker-header .field-help { margin: .2rem 0 0; }
|
|
.picker-body { display: grid; gap: .5rem; padding: 1rem; }
|
|
.picker-options { display: grid; gap: .5rem; margin-top: .5rem; }
|
|
.picker-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; border: 1px solid var(--border); border-radius: .65rem; padding: .75rem; cursor: pointer; }
|
|
.picker-option:hover { border-color: var(--border-strong); background: var(--panel-muted); }
|
|
.picker-option input { margin-top: .2rem; }
|
|
.picker-option span { display: grid; gap: .18rem; min-width: 0; }
|
|
.picker-option small, .picker-empty { color: var(--muted); }
|
|
.picker-empty { margin: 1rem 0; text-align: center; }
|
|
.picker-footer { border-top: 1px solid var(--border); justify-content: flex-end; }
|
|
@keyframes pulse { 50% { opacity: .45; } }
|
|
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; } }
|
|
}
|