545 lines
12 KiB
CSS
545 lines
12 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 {
|
|
.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);
|
|
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
|
|
}
|
|
|
|
.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-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-toggle-expanded {
|
|
display: none;
|
|
}
|
|
|
|
html[data-wms-sidebar='collapsed'] .wms-toggle-collapsed {
|
|
display: inline;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.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-content {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
}
|