1379 lines
33 KiB
CSS
1379 lines
33 KiB
CSS
|
|
@import 'tailwindcss';
|
|
@import '../../vendor/livewire/flux/dist/flux.css';
|
|
@import 'flatpickr/dist/flatpickr.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 {
|
|
.wms-app-shell {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
background: rgb(250 250 250);
|
|
}
|
|
|
|
.dark .wms-app-shell {
|
|
background: rgb(9 9 11);
|
|
}
|
|
|
|
.wms-sidebar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
display: flex;
|
|
width: 23.5rem;
|
|
min-width: 23.5rem;
|
|
height: 100vh;
|
|
flex-direction: column;
|
|
border-right: 1px solid rgb(228 228 231);
|
|
background: rgb(250 250 250);
|
|
transition: width 180ms ease, min-width 180ms ease, transform 180ms ease;
|
|
}
|
|
|
|
.dark .wms-sidebar {
|
|
border-right-color: rgb(63 63 70);
|
|
background: rgb(24 24 27);
|
|
}
|
|
|
|
.wms-sidebar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
min-height: 4.75rem;
|
|
padding: 0.95rem;
|
|
border-bottom: 1px solid rgb(228 228 231);
|
|
}
|
|
|
|
.dark .wms-sidebar-header {
|
|
border-bottom-color: rgb(63 63 70);
|
|
}
|
|
|
|
.wms-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
min-width: 0;
|
|
flex: 1;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wms-brand-mark {
|
|
display: grid;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
border-radius: 0.85rem;
|
|
background: linear-gradient(135deg, rgb(15 23 42), rgb(14 116 144));
|
|
color: white;
|
|
box-shadow: 0 12px 24px rgb(15 23 42 / 0.22);
|
|
}
|
|
|
|
.wms-brand-mark-inner {
|
|
font-size: 1rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
.wms-brand-copy {
|
|
min-width: 0;
|
|
display: grid;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.wms-brand-title {
|
|
max-width: 18rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 0.98rem;
|
|
font-weight: 800;
|
|
color: rgb(24 24 27);
|
|
}
|
|
|
|
.dark .wms-brand-title {
|
|
color: rgb(244 244 245);
|
|
}
|
|
|
|
.wms-brand-subtitle {
|
|
margin-top: 0.18rem;
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.14em;
|
|
color: rgb(8 145 178);
|
|
}
|
|
|
|
.wms-sidebar-toggle,
|
|
.wms-mobile-close,
|
|
.wms-mobile-menu {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 0.65rem;
|
|
border: 1px solid rgb(228 228 231);
|
|
background: white;
|
|
color: rgb(63 63 70);
|
|
box-shadow: 0 10px 24px rgb(0 0 0 / 0.08);
|
|
transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.wms-mobile-menu {
|
|
border-color: rgb(14 116 144 / 0.22);
|
|
background: linear-gradient(135deg, rgb(255 255 255), rgb(236 254 255));
|
|
color: rgb(14 116 144);
|
|
}
|
|
|
|
.dark .wms-mobile-menu {
|
|
border-color: rgb(103 232 249 / 0.22);
|
|
background: linear-gradient(135deg, rgb(24 24 27), rgb(8 47 73));
|
|
color: rgb(165 243 252);
|
|
}
|
|
|
|
.wms-sidebar-toggle {
|
|
width: 2.15rem;
|
|
height: 2.15rem;
|
|
flex: 0 0 auto;
|
|
font-size: 1.35rem;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.wms-sidebar-toggle:hover,
|
|
.wms-mobile-close:hover,
|
|
.wms-mobile-menu:hover {
|
|
border-color: rgb(14 116 144);
|
|
color: rgb(14 116 144);
|
|
}
|
|
|
|
.dark .wms-sidebar-toggle,
|
|
.dark .wms-mobile-close,
|
|
.dark .wms-mobile-menu {
|
|
border-color: rgb(63 63 70);
|
|
background: rgb(39 39 42);
|
|
color: rgb(228 228 231);
|
|
}
|
|
|
|
.wms-toggle-collapsed {
|
|
display: none;
|
|
}
|
|
|
|
.wms-mobile-close {
|
|
display: none;
|
|
width: 2.15rem;
|
|
height: 2.15rem;
|
|
font-size: 1.4rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.wms-sidebar-nav {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0.9rem;
|
|
}
|
|
|
|
.wms-sidebar-group + .wms-sidebar-group {
|
|
margin-top: 1.1rem;
|
|
}
|
|
|
|
.wms-sidebar-heading {
|
|
padding: 0 0.625rem 0.45rem;
|
|
font-size: 0.69rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.11em;
|
|
text-transform: uppercase;
|
|
color: rgb(113 113 122);
|
|
}
|
|
|
|
.wms-sidebar-link {
|
|
position: relative;
|
|
display: flex;
|
|
min-height: 2.65rem;
|
|
align-items: center;
|
|
gap: 0.78rem;
|
|
border-radius: 0.8rem;
|
|
padding: 0.65rem 0.75rem;
|
|
color: rgb(63 63 70);
|
|
font-size: 0.92rem;
|
|
font-weight: 650;
|
|
text-decoration: none;
|
|
transition: background 120ms ease, color 120ms ease;
|
|
}
|
|
|
|
.wms-sidebar-link:hover {
|
|
background: rgb(244 244 245);
|
|
color: rgb(14 116 144);
|
|
}
|
|
|
|
.wms-sidebar-link.is-active {
|
|
background: rgb(236 254 255);
|
|
color: rgb(14 116 144);
|
|
}
|
|
|
|
.dark .wms-sidebar-link {
|
|
color: rgb(212 212 216);
|
|
}
|
|
|
|
.dark .wms-sidebar-link:hover {
|
|
background: rgb(39 39 42);
|
|
color: rgb(103 232 249);
|
|
}
|
|
|
|
.dark .wms-sidebar-link.is-active {
|
|
background: rgb(8 47 73 / 0.55);
|
|
color: rgb(103 232 249);
|
|
}
|
|
|
|
.wms-sidebar-icon {
|
|
width: 1.25rem;
|
|
min-width: 1.25rem;
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.wms-sidebar-footer {
|
|
display: grid;
|
|
gap: 0.25rem;
|
|
border-top: 1px solid rgb(228 228 231);
|
|
padding: 0.9rem;
|
|
}
|
|
|
|
.dark .wms-sidebar-footer {
|
|
border-top-color: rgb(63 63 70);
|
|
}
|
|
|
|
.wms-user-card {
|
|
margin-top: 0.5rem;
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 0.65rem;
|
|
border-radius: 0.85rem;
|
|
border: 1px solid rgb(228 228 231);
|
|
background: white;
|
|
padding: 0.65rem;
|
|
}
|
|
|
|
.wms-user-card-button {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.wms-user-card-button:hover {
|
|
border-color: rgb(14 116 144);
|
|
background: rgb(244 244 245);
|
|
}
|
|
|
|
.dark .wms-user-card-button:hover {
|
|
border-color: rgb(14 116 144);
|
|
background: rgb(48 48 52);
|
|
}
|
|
|
|
.wms-user-chevron {
|
|
margin-left: auto;
|
|
color: rgb(113 113 122);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.wms-user-rail-button {
|
|
display: none;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
background: rgb(15 23 42);
|
|
color: white;
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.dark .wms-user-card {
|
|
border-color: rgb(63 63 70);
|
|
background: rgb(39 39 42);
|
|
}
|
|
|
|
.wms-user-avatar {
|
|
display: grid;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
background: rgb(15 23 42);
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.wms-user-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.wms-user-name,
|
|
.wms-user-email {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.wms-user-name {
|
|
font-size: 0.82rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.wms-user-email {
|
|
font-size: 0.72rem;
|
|
color: rgb(113 113 122);
|
|
}
|
|
|
|
.wms-main-column {
|
|
min-width: 0;
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.wms-content {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 0;
|
|
flex: 1;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.wms-main-panel {
|
|
min-width: 0;
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.wms-page-hero {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1.25rem;
|
|
margin-bottom: 1.25rem;
|
|
border-radius: 1rem;
|
|
padding: 1.45rem 1.75rem;
|
|
background:
|
|
radial-gradient(circle at 95% 85%, rgb(8 145 178 / 0.62), transparent 36%),
|
|
linear-gradient(135deg, rgb(4 8 24), rgb(10 18 42) 54%, rgb(7 44 58));
|
|
color: white;
|
|
box-shadow: 0 24px 60px rgb(0 0 0 / 0.30);
|
|
}
|
|
|
|
.wms-page-hero-copy {
|
|
min-width: 0;
|
|
max-width: 48rem;
|
|
}
|
|
|
|
.wms-page-hero-kicker {
|
|
margin-bottom: 0.55rem;
|
|
color: rgb(103 232 249);
|
|
font-size: 0.72rem;
|
|
font-weight: 850;
|
|
letter-spacing: 0.32em;
|
|
}
|
|
|
|
.wms-page-hero-title {
|
|
margin: 0;
|
|
font-size: clamp(1.9rem, 3vw, 2.75rem);
|
|
font-weight: 850;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
.wms-page-hero-description {
|
|
max-width: 44rem;
|
|
margin-top: 0.65rem;
|
|
color: rgb(203 213 225);
|
|
font-size: clamp(0.9rem, 1.15vw, 1.05rem);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.wms-page-hero-actions {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 0.75rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.wms-page-hero-stat {
|
|
display: grid;
|
|
min-width: 10.5rem;
|
|
gap: 0.6rem;
|
|
border-radius: 0.9rem;
|
|
background: rgb(51 65 85 / 0.72);
|
|
padding: 0.9rem 1rem;
|
|
color: rgb(203 213 225);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.wms-page-hero-stat strong {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
color: white;
|
|
font-size: 1.35rem;
|
|
font-weight: 850;
|
|
line-height: 1;
|
|
}
|
|
|
|
.wms-page-hero-stat strong i {
|
|
color: rgb(74 222 128);
|
|
}
|
|
|
|
.wms-page-hero-icon-card {
|
|
min-width: 5.75rem;
|
|
place-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.wms-page-hero-icon-card strong {
|
|
justify-content: center;
|
|
font-size: 1.85rem;
|
|
}
|
|
|
|
.wms-hero-mobile-menu {
|
|
display: none;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
place-items: center;
|
|
align-self: flex-start;
|
|
border-radius: 0.85rem;
|
|
background: rgb(255 255 255 / 0.12);
|
|
color: white;
|
|
}
|
|
|
|
|
|
.wms-desktop-topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
min-height: 4.25rem;
|
|
border-bottom: 1px solid rgb(228 228 231);
|
|
background: rgb(250 250 250 / 0.94);
|
|
padding: 0.75rem 1.5rem;
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
|
|
.dark .wms-desktop-topbar {
|
|
border-bottom-color: rgb(63 63 70);
|
|
background: rgb(15 15 19 / 0.94);
|
|
}
|
|
|
|
.wms-topbar-brand {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wms-topbar-user-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
border-radius: 999px;
|
|
border: 1px solid transparent;
|
|
padding: 0.35rem 0.45rem 0.35rem 0.85rem;
|
|
text-align: right;
|
|
transition: background 120ms ease, border-color 120ms ease;
|
|
}
|
|
|
|
.wms-topbar-user-button:hover {
|
|
border-color: rgb(228 228 231);
|
|
background: rgb(244 244 245);
|
|
}
|
|
|
|
.dark .wms-topbar-user-button:hover {
|
|
border-color: rgb(63 63 70);
|
|
background: rgb(39 39 42);
|
|
}
|
|
|
|
.wms-topbar-user-copy {
|
|
display: grid;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wms-mobile-header {
|
|
display: none;
|
|
}
|
|
|
|
.wms-mobile-overlay {
|
|
display: none;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar {
|
|
width: 5.5rem;
|
|
min-width: 5.5rem;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] [data-wms-sidebar-label] {
|
|
display: none !important;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-header,
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-footer,
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-nav {
|
|
align-items: center;
|
|
padding-left: 0.7rem;
|
|
padding-right: 0.7rem;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-brand {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-header {
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-link {
|
|
justify-content: center;
|
|
padding-left: 0.7rem;
|
|
padding-right: 0.7rem;
|
|
}
|
|
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-user-rail-button {
|
|
display: grid;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-footer {
|
|
justify-items: center;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-toggle {
|
|
display: none;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-brand-mark {
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.wms-desktop-topbar {
|
|
display: none;
|
|
}
|
|
|
|
.wms-app-shell {
|
|
display: block;
|
|
}
|
|
|
|
.wms-sidebar {
|
|
position: fixed;
|
|
inset: 0 auto 0 0;
|
|
width: min(23.5rem, calc(100vw - 2.5rem));
|
|
min-width: min(23.5rem, calc(100vw - 2.5rem));
|
|
transform: translateX(-105%);
|
|
box-shadow: 22px 0 60px rgb(0 0 0 / 0.24);
|
|
}
|
|
|
|
html[data-wms-mobile-sidebar='open'] .wms-sidebar {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
html[data-wms-mobile-sidebar='open'] .wms-mobile-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 35;
|
|
display: block;
|
|
background: rgb(0 0 0 / 0.48);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar {
|
|
width: min(23.5rem, calc(100vw - 2.5rem));
|
|
min-width: min(23.5rem, calc(100vw - 2.5rem));
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] [data-wms-sidebar-label] {
|
|
display: initial !important;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-brand-copy,
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-heading,
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-link span {
|
|
display: block !important;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-link {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.wms-sidebar-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.wms-mobile-close {
|
|
display: inline-grid;
|
|
}
|
|
|
|
.wms-mobile-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 30;
|
|
display: flex;
|
|
min-height: 4rem;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
border-bottom: 1px solid rgb(228 228 231);
|
|
background: rgb(255 255 255 / 0.86);
|
|
padding: 0.75rem 1rem;
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
|
|
.dark .wms-mobile-header {
|
|
border-bottom-color: rgb(63 63 70);
|
|
background: rgb(24 24 27 / 0.86);
|
|
}
|
|
|
|
.wms-mobile-menu {
|
|
width: 2.35rem;
|
|
height: 2.35rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.wms-mobile-title {
|
|
min-width: 0;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: inherit;
|
|
font-size: 0.96rem;
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wms-mobile-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 3.1rem;
|
|
height: 2rem;
|
|
border-radius: 999px;
|
|
border: 1px solid rgb(14 116 144 / 0.24);
|
|
background: linear-gradient(135deg, rgb(14 116 144 / 0.14), rgb(37 99 235 / 0.12));
|
|
color: rgb(14 116 144);
|
|
font-size: 0.72rem;
|
|
font-weight: 900;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.dark .wms-mobile-badge {
|
|
border-color: rgb(103 232 249 / 0.26);
|
|
background: linear-gradient(135deg, rgb(8 145 178 / 0.26), rgb(37 99 235 / 0.20));
|
|
color: rgb(165 243 252);
|
|
}
|
|
|
|
.wms-page-hero {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-bottom: 0.85rem;
|
|
border-radius: 0.9rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.wms-page-hero-actions {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.wms-page-hero-stat {
|
|
min-width: min(12rem, 100%);
|
|
flex: 1 1 12rem;
|
|
padding: 0.8rem;
|
|
}
|
|
|
|
.wms-page-hero-stat strong {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.wms-hero-mobile-menu {
|
|
display: inline-grid;
|
|
}
|
|
|
|
.wms-content {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@layer components {
|
|
body.wms-mobile-nav-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.wms-app-shell {
|
|
display: block !important;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.wms-main-panel {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.wms-mobile-header {
|
|
position: sticky !important;
|
|
top: 0;
|
|
z-index: 50;
|
|
display: flex !important;
|
|
min-height: 4.25rem;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
border-bottom: 1px solid rgb(228 228 231);
|
|
background: rgb(255 255 255 / 0.94);
|
|
padding: 0.75rem 1rem;
|
|
box-shadow: 0 14px 34px rgb(15 23 42 / 0.08);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.dark .wms-mobile-header {
|
|
border-bottom-color: rgb(63 63 70);
|
|
background: rgb(24 24 27 / 0.94);
|
|
box-shadow: 0 14px 34px rgb(0 0 0 / 0.28);
|
|
}
|
|
|
|
.wms-mobile-menu {
|
|
display: inline-grid !important;
|
|
width: 2.65rem;
|
|
height: 2.65rem;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
border-radius: 0.9rem;
|
|
border: 1px solid rgb(14 116 144 / 0.28);
|
|
background: linear-gradient(135deg, rgb(255 255 255), rgb(236 254 255));
|
|
color: rgb(14 116 144);
|
|
font-size: 1.05rem;
|
|
box-shadow: 0 12px 28px rgb(14 116 144 / 0.16);
|
|
}
|
|
|
|
.dark .wms-mobile-menu {
|
|
border-color: rgb(103 232 249 / 0.30);
|
|
background: linear-gradient(135deg, rgb(24 24 27), rgb(8 47 73));
|
|
color: rgb(165 243 252);
|
|
}
|
|
|
|
.wms-mobile-title {
|
|
min-width: 0;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: rgb(24 24 27);
|
|
font-size: 0.98rem;
|
|
font-weight: 850;
|
|
letter-spacing: -0.02em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dark .wms-mobile-title {
|
|
color: rgb(244 244 245);
|
|
}
|
|
|
|
.wms-mobile-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 3.15rem;
|
|
height: 2rem;
|
|
border-radius: 999px;
|
|
border: 1px solid rgb(14 116 144 / 0.24);
|
|
background: linear-gradient(135deg, rgb(14 116 144 / 0.14), rgb(37 99 235 / 0.12));
|
|
color: rgb(14 116 144);
|
|
font-size: 0.72rem;
|
|
font-weight: 900;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.dark .wms-mobile-badge {
|
|
border-color: rgb(103 232 249 / 0.26);
|
|
background: linear-gradient(135deg, rgb(8 145 178 / 0.26), rgb(37 99 235 / 0.20));
|
|
color: rgb(165 243 252);
|
|
}
|
|
|
|
.wms-sidebar {
|
|
position: fixed !important;
|
|
inset: 0 auto 0 0;
|
|
z-index: 70;
|
|
width: min(23.5rem, calc(100vw - 2.25rem)) !important;
|
|
min-width: min(23.5rem, calc(100vw - 2.25rem)) !important;
|
|
height: 100dvh;
|
|
transform: translateX(-110%);
|
|
box-shadow: 28px 0 70px rgb(0 0 0 / 0.30);
|
|
}
|
|
|
|
html[data-wms-mobile-sidebar='open'] .wms-sidebar {
|
|
transform: translateX(0) !important;
|
|
}
|
|
|
|
.wms-mobile-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 60;
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
html[data-wms-mobile-sidebar='open'] .wms-mobile-overlay {
|
|
display: block !important;
|
|
background: rgb(0 0 0 / 0.52);
|
|
backdrop-filter: blur(3px);
|
|
}
|
|
|
|
.wms-mobile-close {
|
|
display: inline-grid !important;
|
|
}
|
|
|
|
.wms-sidebar-toggle {
|
|
display: none !important;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] [data-wms-sidebar-label],
|
|
html[data-wms-sidebar='collapsed'] .wms-brand-copy,
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-heading,
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-link span {
|
|
display: block !important;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-sidebar-link {
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
.wms-content {
|
|
padding-top: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.wms-mobile-header,
|
|
.wms-mobile-overlay,
|
|
.wms-mobile-close {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.wms-content,
|
|
.wms-main-panel,
|
|
.wms-app-shell {
|
|
min-width: 0;
|
|
}
|
|
|
|
.wms-content canvas {
|
|
max-width: 100%;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.wms-content {
|
|
width: 100%;
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
padding-inline: 0.875rem;
|
|
}
|
|
|
|
.wms-page-hero {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.wms-sidebar-nav {
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--wms-sidebar-width: 288px;
|
|
--wms-sidebar-min-width: 224px;
|
|
--wms-sidebar-max-width: 448px;
|
|
--wms-sidebar-collapsed-width: 76px;
|
|
|
|
--wms-active-parent-blue: #4164dc;
|
|
--wms-active-child-gold: #e7b72f;
|
|
--wms-active-child-gold-dark: #e7b72f;
|
|
}
|
|
|
|
.wms-app-shell {
|
|
display: grid;
|
|
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr);
|
|
min-height: 100vh;
|
|
transition-property: none;
|
|
}
|
|
|
|
html[data-wms-sidebar="expanded"] .wms-app-shell {
|
|
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr);
|
|
}
|
|
|
|
html[data-wms-sidebar="collapsed"] .wms-app-shell {
|
|
grid-template-columns: var(--wms-sidebar-collapsed-width) minmax(0, 1fr);
|
|
}
|
|
|
|
.wms-sidebar {
|
|
position: relative;
|
|
width: var(--wms-sidebar-width);
|
|
min-width: var(--wms-sidebar-width);
|
|
max-width: var(--wms-sidebar-width);
|
|
transition-property: none;
|
|
}
|
|
|
|
.wms-main-panel {
|
|
transition-property: none;
|
|
}
|
|
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar {
|
|
width: var(--wms-sidebar-collapsed-width);
|
|
min-width: var(--wms-sidebar-collapsed-width);
|
|
max-width: var(--wms-sidebar-collapsed-width);
|
|
}
|
|
|
|
.wms-sidebar-resizer {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -4px;
|
|
z-index: 30;
|
|
width: 8px;
|
|
height: 100%;
|
|
cursor: col-resize;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.wms-sidebar-resizer::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 3px;
|
|
width: 1px;
|
|
height: 100%;
|
|
content: "";
|
|
background: rgba(148, 163, 184, 0.22);
|
|
transition: background 160ms ease;
|
|
}
|
|
|
|
.wms-sidebar-resizer:hover::after,
|
|
body.wms-sidebar-is-resizing .wms-sidebar-resizer::after {
|
|
background: rgba(59, 130, 246, 0.7);
|
|
}
|
|
|
|
body.wms-sidebar-is-resizing {
|
|
cursor: col-resize;
|
|
user-select: none;
|
|
}
|
|
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-resizer {
|
|
display: none;
|
|
}
|
|
|
|
.wms-sidebar-nav {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.wms-sidebar-heading-button {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 0.75rem;
|
|
border: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.wms-sidebar-heading-content {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wms-sidebar-heading-content > span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.wms-sidebar-heading-chevron {
|
|
display: none;
|
|
}
|
|
|
|
.wms-sidebar-group-items {
|
|
display: none;
|
|
}
|
|
|
|
.wms-sidebar-group[data-wms-menu-open="true"] > .wms-sidebar-group-items {
|
|
display: block;
|
|
}
|
|
|
|
.wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button {
|
|
position: relative;
|
|
width: calc(100% - 1.25rem);
|
|
min-height: 2.9rem;
|
|
margin: 0.25rem 0.65rem 0.35rem;
|
|
padding: 0.6rem 0.85rem;
|
|
border-radius: 1.35rem;
|
|
background: linear-gradient(135deg, #4667df 0%, #3f5fd2 100%);
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
letter-spacing: 0.035em;
|
|
box-shadow: 0 8px 18px rgba(65, 100, 220, 0.22);
|
|
}
|
|
|
|
.wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button .wms-sidebar-icon {
|
|
color: #ffffff;
|
|
}
|
|
|
|
|
|
.wms-sidebar-primary-link {
|
|
margin-bottom: 0.35rem;
|
|
min-height: 3.25rem;
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.wms-sidebar-primary-link span {
|
|
letter-spacing: 0.16em;
|
|
}
|
|
.wms-sidebar-link.is-active {
|
|
position: relative;
|
|
isolation: isolate;
|
|
width: calc(100% - 2.05rem);
|
|
min-height: 2.85rem;
|
|
margin: 0.2rem 1.25rem 0.25rem 0.8rem;
|
|
padding: 0.6rem 0.95rem;
|
|
border-radius: 1.65rem 0.75rem 0.75rem 1.65rem;
|
|
background: var(--wms-active-child-gold);
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
box-shadow: 0 8px 18px rgba(231, 183, 47, 0.24);
|
|
}
|
|
|
|
.wms-sidebar-link.is-active::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -1.05rem;
|
|
z-index: -1;
|
|
width: 1.75rem;
|
|
height: 100%;
|
|
content: "";
|
|
background: var(--wms-active-child-gold);
|
|
clip-path: polygon(0 0, 64% 0, 100% 50%, 64% 100%, 0 100%);
|
|
border-radius: 0 0.9rem 0.9rem 0;
|
|
}
|
|
|
|
.wms-sidebar-link.is-active .wms-sidebar-icon,
|
|
.wms-sidebar-link.is-active i,
|
|
.wms-sidebar-link.is-active span {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: #ffffff;
|
|
}
|
|
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-chevron,
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-group-items {
|
|
display: none;
|
|
}
|
|
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-button {
|
|
pointer-events: none;
|
|
}
|
|
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button,
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-link.is-active {
|
|
width: 2.75rem;
|
|
min-height: 2.75rem;
|
|
margin: 0.25rem auto;
|
|
justify-content: center;
|
|
border-radius: 9999px;
|
|
padding: 0.65rem;
|
|
}
|
|
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-link.is-active::after {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.wms-app-shell {
|
|
display: block;
|
|
}
|
|
|
|
.wms-sidebar,
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar {
|
|
width: min(88vw, 22rem);
|
|
min-width: min(88vw, 22rem);
|
|
max-width: min(88vw, 22rem);
|
|
}
|
|
|
|
.wms-sidebar-resizer {
|
|
display: none;
|
|
}
|
|
|
|
.wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button {
|
|
width: calc(100% - 1.25rem);
|
|
min-height: 2.85rem;
|
|
margin: 0.25rem 0.65rem 0.35rem;
|
|
padding: 0.6rem 0.85rem;
|
|
}
|
|
|
|
.wms-sidebar-link.is-active {
|
|
width: calc(100% - 2.05rem);
|
|
min-height: 2.8rem;
|
|
margin: 0.2rem 1.25rem 0.25rem 0.8rem;
|
|
padding: 0.6rem 0.95rem;
|
|
}
|
|
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-group-items {
|
|
display: none;
|
|
}
|
|
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-group[data-wms-menu-open="true"] > .wms-sidebar-group-items {
|
|
display: block;
|
|
}
|
|
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-button {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| WMS fixed sidebar / scrollable content correction
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| The application shell must own the viewport. The browser document must not
|
|
| scroll; only the right-hand WMS content pane should scroll. Keep this block
|
|
| at the end of the stylesheet so it wins over earlier shell declarations.
|
|
|
|
|
*/
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
overflow: hidden !important;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
body {
|
|
position: fixed;
|
|
inset: 0;
|
|
}
|
|
|
|
.wms-app-shell {
|
|
position: fixed !important;
|
|
inset: 0 !important;
|
|
display: grid !important;
|
|
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr) !important;
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
min-width: 0 !important;
|
|
min-height: 0 !important;
|
|
max-height: 100vh !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
@supports (height: 100dvh) {
|
|
.wms-app-shell {
|
|
height: 100dvh !important;
|
|
max-height: 100dvh !important;
|
|
}
|
|
}
|
|
|
|
html[data-wms-sidebar="expanded"] .wms-app-shell {
|
|
grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr) !important;
|
|
}
|
|
|
|
html[data-wms-sidebar="collapsed"] .wms-app-shell {
|
|
grid-template-columns: var(--wms-sidebar-collapsed-width) minmax(0, 1fr) !important;
|
|
}
|
|
|
|
.wms-sidebar {
|
|
position: relative !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
width: var(--wms-sidebar-width) !important;
|
|
min-width: var(--wms-sidebar-width) !important;
|
|
max-width: var(--wms-sidebar-width) !important;
|
|
height: 100% !important;
|
|
min-height: 0 !important;
|
|
max-height: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar {
|
|
width: var(--wms-sidebar-collapsed-width) !important;
|
|
min-width: var(--wms-sidebar-collapsed-width) !important;
|
|
max-width: var(--wms-sidebar-collapsed-width) !important;
|
|
}
|
|
|
|
.wms-sidebar-header {
|
|
flex: 0 0 auto !important;
|
|
}
|
|
|
|
.wms-sidebar-nav {
|
|
flex: 1 1 auto !important;
|
|
min-height: 0 !important;
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
overscroll-behavior: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.wms-main-panel {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
min-width: 0 !important;
|
|
min-height: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
max-height: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.wms-main-panel > header,
|
|
.wms-main-panel > .wms-topbar,
|
|
.wms-main-panel > [data-wms-topbar] {
|
|
position: relative !important;
|
|
top: auto !important;
|
|
flex: 0 0 auto !important;
|
|
min-height: 0 !important;
|
|
}
|
|
|
|
.wms-content {
|
|
display: block !important;
|
|
flex: 1 1 auto !important;
|
|
min-width: 0 !important;
|
|
min-height: 0 !important;
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
max-height: none !important;
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
overscroll-behavior: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.wms-app-shell {
|
|
display: block !important;
|
|
height: 100vh !important;
|
|
max-height: 100vh !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
@supports (height: 100dvh) {
|
|
.wms-app-shell {
|
|
height: 100dvh !important;
|
|
max-height: 100dvh !important;
|
|
}
|
|
}
|
|
|
|
.wms-main-panel {
|
|
height: 100% !important;
|
|
max-height: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.wms-sidebar,
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar {
|
|
position: fixed !important;
|
|
inset: 0 auto 0 0 !important;
|
|
z-index: 70 !important;
|
|
width: min(88vw, 22rem) !important;
|
|
min-width: min(88vw, 22rem) !important;
|
|
max-width: min(88vw, 22rem) !important;
|
|
height: 100vh !important;
|
|
max-height: 100vh !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
@supports (height: 100dvh) {
|
|
.wms-sidebar,
|
|
html[data-wms-sidebar="collapsed"] .wms-sidebar {
|
|
height: 100dvh !important;
|
|
max-height: 100dvh !important;
|
|
}
|
|
}
|
|
}
|
|
|