Make the management app responsive on mobile
Replace the mobile nav's horizontal scroll strip (which wrapped into an unreadable jumble because daisyUI's .menu sets flex-wrap: wrap and .menu-horizontal never resets it) with a hamburger button that opens a proper left-side drawer, mirrored in controlpanel for the same bug. Move the theme toggle, "Management", and "Django admin" controls into that drawer below `lg`, leaving only the account icon in the navbar, so the club name has room to render in full instead of truncating to initials. Add a reusable `.table-cards` CSS pattern (app.css) that turns a list table into a stack of labelled cards below `md`, and apply it to every list/detail table in the management app -- members, families, teams, memberships, events, groups, locations, opponents, positions, referee levels/list, roles, sponsors, news, parent claims, team roster/staff, and the shared family-members table. Tables revert to normal desktop layout at `md` and up. Member list gets extra passes: search submits icon-only below `sm` so it fits next to the input, the Members/Guardians/Both tabs go full-width, and last/first name merge into one column. Action-button rows across every page stack full-width on mobile instead of wrapping mid-button (shared fix in base.html). Home dashboard's upcoming-events and news mini-tables become simple lists instead of overflowing tables. Also: brand truncates instead of overflowing on a long club name, a stray invalid xmlns attribute removed, a wrapping UUID badge hidden below `sm` on team detail. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -31,14 +31,13 @@
|
||||
--text-3xl--line-height: calc(2.25 / 1.875);
|
||||
--text-4xl: 2.25rem;
|
||||
--text-4xl--line-height: calc(2.5 / 2.25);
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--tracking-wide: 0.025em;
|
||||
--tracking-wider: 0.05em;
|
||||
--radius-lg: 0.5rem;
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
--default-transition-duration: 150ms;
|
||||
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@@ -776,26 +775,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.collapse-plus {
|
||||
@layer daisyui.l1.l2 {
|
||||
> .collapse-title:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition-property: all;
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
top: 0.9rem;
|
||||
inset-inline-end: 1.4rem;
|
||||
--tw-content: "+";
|
||||
content: var(--tw-content);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
position: relative;
|
||||
@@ -1321,21 +1300,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.collapse-open {
|
||||
@layer daisyui.l1.l2 {
|
||||
grid-template-rows: max-content 1fr;
|
||||
> .collapse-content {
|
||||
--overflow-delay: 0.2s;
|
||||
overflow: revert-layer;
|
||||
content-visibility: visible;
|
||||
min-height: fit-content;
|
||||
padding-bottom: 1rem;
|
||||
@supports not (content-visibility: visible) {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.collapse {
|
||||
visibility: collapse;
|
||||
}
|
||||
@@ -1404,27 +1368,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.toast {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
position: fixed;
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: calc(0.25rem * 4);
|
||||
top: auto;
|
||||
bottom: calc(0.25rem * 4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(0.25rem * 2);
|
||||
background-color: transparent;
|
||||
translate: var(--toast-x, 0) var(--toast-y, 0);
|
||||
width: max-content;
|
||||
max-width: calc(100vw - 2rem);
|
||||
& > * {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: toast 0.25s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toggle {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
border: var(--border) solid currentColor;
|
||||
@@ -1877,51 +1820,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.aura {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
--aura-padding: 0.125rem;
|
||||
padding: var(--aura-padding);
|
||||
border-radius: calc(var(--aura-padding) + var(--aura-radius, var(--radius-box)));
|
||||
animation: aura var(--tw-duration, 6s) linear infinite;
|
||||
background-image: conic-gradient(from var(--aura-angle), transparent 225deg, currentColor);
|
||||
&:has( > .card, > .alert) {
|
||||
--aura-radius: var(--radius-box);
|
||||
}
|
||||
&:has( > .btn, > .input, > .select) {
|
||||
--aura-radius: var(--radius-field);
|
||||
}
|
||||
&:has( > .checkbox, > .toggle, > .badge) {
|
||||
--aura-radius: var(--radius-selector);
|
||||
}
|
||||
&:before, &:after {
|
||||
animation: inherit;
|
||||
background-color: inherit;
|
||||
background-image: inherit;
|
||||
border-radius: inherit;
|
||||
position: absolute;
|
||||
top: calc(1 / 2 * 100%);
|
||||
left: calc(1 / 2 * 100%);
|
||||
z-index: 0;
|
||||
display: block;
|
||||
opacity: 70%;
|
||||
filter: blur(0.25rem);
|
||||
translate: -50% -50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
opacity: 30%;
|
||||
filter: blur(1rem);
|
||||
}
|
||||
& > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.steps {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: inline-grid;
|
||||
@@ -2277,49 +2175,6 @@
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
.menu-horizontal {
|
||||
@layer daisyui.l1.l2 {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
& > li:not(.menu-title) > details {
|
||||
& > :is(ul, menu) {
|
||||
position: absolute;
|
||||
margin-inline-start: 0;
|
||||
margin-top: calc(0.25rem * 4);
|
||||
transform-origin: top;
|
||||
border-radius: var(--radius-box);
|
||||
background-color: var(--color-base-100);
|
||||
padding-block: calc(0.25rem * 2);
|
||||
padding-inline-end: calc(0.25rem * 2);
|
||||
opacity: 0%;
|
||||
scale: 95%;
|
||||
box-shadow: 0 1px 3px 0 oklch(0% 0 0/0.1), 0 1px 2px -1px oklch(0% 0 0/0.1);
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
@starting-style {
|
||||
scale: 95%;
|
||||
opacity: 0;
|
||||
}
|
||||
animation: menu 0.2s;
|
||||
transition-property: opacity, scale, display;
|
||||
transition-behavior: allow-discrete;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
&[open] > :is(ul, menu) {
|
||||
opacity: 100%;
|
||||
scale: 100%;
|
||||
}
|
||||
}
|
||||
& > li > details > :is(ul, menu) {
|
||||
&:before {
|
||||
--tw-content: none;
|
||||
content: var(--tw-content);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.avatar {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
position: relative;
|
||||
@@ -2487,48 +2342,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.rating {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
--size: var(--size-selector, 0.25rem) * 6;
|
||||
input {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
}
|
||||
* {
|
||||
border-radius: 0;
|
||||
background-color: var(--color-base-content);
|
||||
opacity: 20%;
|
||||
width: calc(var(--size) * 1);
|
||||
height: calc(var(--size));
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: rating 0.25s ease-out;
|
||||
}
|
||||
}
|
||||
.rating-hidden {
|
||||
width: calc(0.25rem * 2);
|
||||
background-color: transparent;
|
||||
}
|
||||
:checked, [aria-checked="true"], [aria-current="true"], :has( ~ :checked, ~ [aria-checked="true"], ~ [aria-current="true"]) {
|
||||
opacity: 100%;
|
||||
}
|
||||
:focus-visible {
|
||||
scale: 1.1;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: scale 0.2s ease-out;
|
||||
}
|
||||
}
|
||||
:active:focus {
|
||||
animation: none;
|
||||
scale: 1.1;
|
||||
}
|
||||
}
|
||||
@layer daisyui.l1.l2 {
|
||||
--size: var(--size-selector, 0.25rem) * 6;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: flex;
|
||||
@@ -2543,6 +2356,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.drawer {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-auto-columns: max-content auto;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
position: relative;
|
||||
@@ -2668,30 +2489,6 @@
|
||||
.sticky {
|
||||
position: sticky;
|
||||
}
|
||||
.dropdown-right {
|
||||
@layer daisyui.l1.l2 {
|
||||
--anchor-h: right;
|
||||
--anchor-v: span-bottom;
|
||||
.dropdown-content {
|
||||
inset-inline-start: 100%;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
transform-origin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-left {
|
||||
@layer daisyui.l1.l2 {
|
||||
--anchor-h: left;
|
||||
--anchor-v: span-bottom;
|
||||
.dropdown-content {
|
||||
inset-inline-end: 100%;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
transform-origin: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-end {
|
||||
@layer daisyui.l1.l2 {
|
||||
--anchor-h: span-left;
|
||||
@@ -2961,25 +2758,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-active {
|
||||
@layer daisyui.l1.l2 {
|
||||
--btn-bg: var(--btn-color, var(--color-base-200));
|
||||
color: var(--btn-fg, var(--color-base-content));
|
||||
--btn-border: var(--btn-bg);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
|
||||
}
|
||||
--btn-border-style: solid;
|
||||
--btn-inset: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%));
|
||||
--btn-shadow: 0 3px 2px -2px var(--btn-bg),
|
||||
0 4px 3px -2px var(--btn-bg);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
|
||||
0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
|
||||
}
|
||||
isolation: isolate;
|
||||
}
|
||||
}
|
||||
.stack {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: inline-grid;
|
||||
@@ -3159,25 +2937,8 @@
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
.tab-content {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
order: var(--tabcontent-order);
|
||||
display: none;
|
||||
border-color: transparent;
|
||||
--tabcontent-radius-ss: var(--radius-box);
|
||||
--tabcontent-radius-se: var(--radius-box);
|
||||
--tabcontent-radius-es: var(--radius-box);
|
||||
--tabcontent-radius-ee: var(--radius-box);
|
||||
--tabcontent-order: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - var(--tab-height) + var(--border));
|
||||
margin: var(--tabcontent-margin);
|
||||
border-width: var(--border);
|
||||
border-start-start-radius: var(--tabcontent-radius-ss);
|
||||
border-start-end-radius: var(--tabcontent-radius-se);
|
||||
border-end-start-radius: var(--tabcontent-radius-es);
|
||||
border-end-end-radius: var(--tabcontent-radius-ee);
|
||||
}
|
||||
.z-50 {
|
||||
z-index: 50;
|
||||
}
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
@@ -3452,17 +3213,6 @@
|
||||
padding-inline: calc(var(--size) / 2 - var(--border));
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
--tabs-height: auto;
|
||||
--tabs-direction: row;
|
||||
--tab-height: calc(var(--size-field, 0.25rem) * 10);
|
||||
height: var(--tabs-height);
|
||||
flex-direction: var(--tabs-direction);
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
display: grid;
|
||||
@@ -3658,15 +3408,32 @@
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.inline-grid {
|
||||
display: inline-grid;
|
||||
}
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
.aspect-square {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
.modal-start {
|
||||
@layer daisyui.l1.l2 {
|
||||
place-items: start;
|
||||
.modal-box {
|
||||
height: 100vh;
|
||||
max-height: none;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
translate: -100% 0;
|
||||
scale: 1;
|
||||
--modal-tl: 0;
|
||||
--modal-tr: var(--radius-box);
|
||||
--modal-bl: 0;
|
||||
--modal-br: var(--radius-box);
|
||||
[dir="rtl"] & {
|
||||
translate: 100% 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-circle {
|
||||
@layer daisyui.l1.l2 {
|
||||
border-radius: calc(infinity * 1px);
|
||||
@@ -3675,16 +3442,23 @@
|
||||
height: var(--size);
|
||||
}
|
||||
}
|
||||
.btn-square {
|
||||
@layer daisyui.l1.l2 {
|
||||
padding-inline: 0;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
}
|
||||
.size-8 {
|
||||
width: calc(var(--spacing) * 8);
|
||||
height: calc(var(--spacing) * 8);
|
||||
}
|
||||
.h-10 {
|
||||
height: calc(var(--spacing) * 10);
|
||||
}
|
||||
.h-12 {
|
||||
height: calc(var(--spacing) * 12);
|
||||
}
|
||||
.h-16 {
|
||||
height: calc(var(--spacing) * 16);
|
||||
}
|
||||
.h-56 {
|
||||
height: calc(var(--spacing) * 56);
|
||||
}
|
||||
@@ -3700,30 +3474,33 @@
|
||||
.max-h-60 {
|
||||
max-height: calc(var(--spacing) * 60);
|
||||
}
|
||||
.max-h-none {
|
||||
max-height: none;
|
||||
}
|
||||
.min-h-6 {
|
||||
min-height: calc(var(--spacing) * 6);
|
||||
}
|
||||
.w-10 {
|
||||
width: calc(var(--spacing) * 10);
|
||||
}
|
||||
.w-12 {
|
||||
width: calc(var(--spacing) * 12);
|
||||
}
|
||||
.w-16 {
|
||||
width: calc(var(--spacing) * 16);
|
||||
}
|
||||
.w-20 {
|
||||
width: calc(var(--spacing) * 20);
|
||||
}
|
||||
.w-24 {
|
||||
width: calc(var(--spacing) * 24);
|
||||
}
|
||||
.w-28 {
|
||||
width: calc(var(--spacing) * 28);
|
||||
}
|
||||
.w-60 {
|
||||
width: calc(var(--spacing) * 60);
|
||||
}
|
||||
.w-64 {
|
||||
width: calc(var(--spacing) * 64);
|
||||
}
|
||||
.w-72 {
|
||||
width: calc(var(--spacing) * 72);
|
||||
}
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -3736,6 +3513,9 @@
|
||||
.max-w-40 {
|
||||
max-width: calc(var(--spacing) * 40);
|
||||
}
|
||||
.max-w-\[85vw\] {
|
||||
max-width: 85vw;
|
||||
}
|
||||
.max-w-md {
|
||||
max-width: var(--container-md);
|
||||
}
|
||||
@@ -3754,61 +3534,21 @@
|
||||
.min-w-40 {
|
||||
min-width: calc(var(--spacing) * 40);
|
||||
}
|
||||
.min-w-64 {
|
||||
min-width: calc(var(--spacing) * 64);
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
}
|
||||
.skeleton {
|
||||
@layer daisyui.l1.l2.l3 {
|
||||
border-radius: var(--radius-box);
|
||||
background-color: var(--color-base-300);
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition-duration: 15s;
|
||||
}
|
||||
will-change: background-position;
|
||||
background-image: linear-gradient( 105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100% );
|
||||
background-size: 200% auto;
|
||||
background-position-x: -50%;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: skeleton 1.8s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.aura-glow {
|
||||
@layer daisyui.l1.l2 {
|
||||
animation: none;
|
||||
background-image: radial-gradient(closest-corner at center, currentColor 0%, transparent 90%);
|
||||
&:before {
|
||||
animation: aura-glow var(--tw-duration, 6s) ease-out infinite;
|
||||
}
|
||||
&:after {
|
||||
animation: aura-glow-after var(--tw-duration, 6s) ease-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.animate-pulse {
|
||||
animation: var(--animate-pulse);
|
||||
}
|
||||
@@ -3884,9 +3624,6 @@
|
||||
.justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.justify-items-start {
|
||||
justify-items: start;
|
||||
}
|
||||
.gap-1 {
|
||||
gap: var(--spacing);
|
||||
}
|
||||
@@ -3916,9 +3653,6 @@
|
||||
.gap-x-4 {
|
||||
column-gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.gap-x-6 {
|
||||
column-gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
.gap-y-2 {
|
||||
row-gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
@@ -3968,6 +3702,9 @@
|
||||
.rounded-lg {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
.rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
.border {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
@@ -4141,15 +3878,15 @@
|
||||
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0);
|
||||
}
|
||||
}
|
||||
.mask-repeat {
|
||||
mask-repeat: repeat;
|
||||
}
|
||||
.object-contain {
|
||||
object-fit: contain;
|
||||
}
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
.p-0 {
|
||||
padding: 0;
|
||||
}
|
||||
.p-2 {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
}
|
||||
@@ -4282,6 +4019,10 @@
|
||||
--tw-font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
.font-normal {
|
||||
--tw-font-weight: var(--font-weight-normal);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
.font-semibold {
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
@@ -4294,9 +4035,6 @@
|
||||
--tw-tracking: var(--tracking-wider);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
}
|
||||
.text-wrap {
|
||||
text-wrap: wrap;
|
||||
}
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -4413,9 +4151,6 @@
|
||||
text-decoration-line: none;
|
||||
}
|
||||
}
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.opacity-40 {
|
||||
opacity: 40%;
|
||||
}
|
||||
@@ -4472,19 +4207,6 @@
|
||||
.filter {
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.ease-in-out {
|
||||
--tw-ease: var(--ease-in-out);
|
||||
transition-timing-function: var(--ease-in-out);
|
||||
}
|
||||
.ease-out {
|
||||
--tw-ease: var(--ease-out);
|
||||
transition-timing-function: var(--ease-out);
|
||||
}
|
||||
.input-lg {
|
||||
@layer daisyui.l1.l2 {
|
||||
--in-size-mul: 12;
|
||||
@@ -4664,6 +4386,11 @@
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
}
|
||||
.sm\:block {
|
||||
@media (width >= 40rem) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.sm\:hidden {
|
||||
@media (width >= 40rem) {
|
||||
display: none;
|
||||
@@ -4674,6 +4401,36 @@
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.sm\:inline-flex {
|
||||
@media (width >= 40rem) {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
.sm\:h-16 {
|
||||
@media (width >= 40rem) {
|
||||
height: calc(var(--spacing) * 16);
|
||||
}
|
||||
}
|
||||
.sm\:w-16 {
|
||||
@media (width >= 40rem) {
|
||||
width: calc(var(--spacing) * 16);
|
||||
}
|
||||
}
|
||||
.sm\:w-auto {
|
||||
@media (width >= 40rem) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.sm\:max-w-xs {
|
||||
@media (width >= 40rem) {
|
||||
max-width: var(--container-xs);
|
||||
}
|
||||
}
|
||||
.sm\:grow-0 {
|
||||
@media (width >= 40rem) {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
.sm\:grid-cols-2 {
|
||||
@media (width >= 40rem) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -4684,34 +4441,51 @@
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.sm\:flex-row {
|
||||
@media (width >= 40rem) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.sm\:flex-wrap {
|
||||
@media (width >= 40rem) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.sm\:items-center {
|
||||
@media (width >= 40rem) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.sm\:justify-between {
|
||||
@media (width >= 40rem) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.sm\:gap-3 {
|
||||
@media (width >= 40rem) {
|
||||
gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
.sm\:gap-4 {
|
||||
@media (width >= 40rem) {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.sm\:px-6 {
|
||||
@media (width >= 40rem) {
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
.md\:col-span-2 {
|
||||
@media (width >= 48rem) {
|
||||
grid-column: span 2 / span 2;
|
||||
.sm\:text-2xl {
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
}
|
||||
.md\:col-span-4 {
|
||||
@media (width >= 48rem) {
|
||||
grid-column: span 4 / span 4;
|
||||
}
|
||||
}
|
||||
.md\:mb-2 {
|
||||
@media (width >= 48rem) {
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
.md\:grid {
|
||||
@media (width >= 48rem) {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
.md\:hidden {
|
||||
@media (width >= 48rem) {
|
||||
display: none;
|
||||
.sm\:text-xl {
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--tw-leading, var(--text-xl--line-height));
|
||||
}
|
||||
}
|
||||
.md\:grid-cols-2 {
|
||||
@@ -4734,24 +4508,9 @@
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.md\:grid-cols-\[minmax\(0\,1fr\)_2\.5rem\] {
|
||||
@media (width >= 48rem) {
|
||||
grid-template-columns: minmax(0,1fr) 2.5rem;
|
||||
}
|
||||
}
|
||||
.md\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,2fr\)_7rem_2\.5rem\] {
|
||||
@media (width >= 48rem) {
|
||||
grid-template-columns: minmax(0,2fr) minmax(0,2fr) 7rem 2.5rem;
|
||||
}
|
||||
}
|
||||
.md\:items-start {
|
||||
@media (width >= 48rem) {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
.md\:justify-center {
|
||||
@media (width >= 48rem) {
|
||||
justify-content: center;
|
||||
.lg\:col-span-1 {
|
||||
@media (width >= 64rem) {
|
||||
grid-column: span 1 / span 1;
|
||||
}
|
||||
}
|
||||
.lg\:block {
|
||||
@@ -4759,16 +4518,36 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.lg\:contents {
|
||||
@media (width >= 64rem) {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
.lg\:flex {
|
||||
@media (width >= 64rem) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.lg\:hidden {
|
||||
@media (width >= 64rem) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.lg\:w-auto {
|
||||
@media (width >= 64rem) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.lg\:w-fit {
|
||||
@media (width >= 64rem) {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
.lg\:grow-0 {
|
||||
@media (width >= 64rem) {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
.lg\:grid-cols-2 {
|
||||
@media (width >= 64rem) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -4789,6 +4568,21 @@
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.lg\:flex-row {
|
||||
@media (width >= 64rem) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.lg\:flex-wrap {
|
||||
@media (width >= 64rem) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.lg\:items-center {
|
||||
@media (width >= 64rem) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.xl\:grid-cols-3 {
|
||||
@media (width >= 80rem) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -4933,6 +4727,46 @@
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
@media (width < 48rem) {
|
||||
.table-cards, .table-cards :is(thead, tbody, tr, th, td) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.table-cards thead {
|
||||
display: none;
|
||||
}
|
||||
.table-cards tbody tr {
|
||||
border: 1px solid var(--color-base-300);
|
||||
border-radius: var(--radius-box);
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
.table-cards tbody tr + tr {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.table-cards td {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 0;
|
||||
border-bottom: 1px solid var(--color-base-200);
|
||||
}
|
||||
.table-cards td:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.table-cards td[data-label]:before {
|
||||
content: attr(data-label);
|
||||
flex-shrink: 0;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.table-cards td:not([data-label]) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
|
||||
color-scheme: light;
|
||||
@@ -5219,26 +5053,6 @@
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@property --tw-rotate-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-rotate-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-rotate-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-skew-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-skew-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-space-y-reverse {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@@ -5405,10 +5219,6 @@
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-ease {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
@@ -5417,11 +5227,6 @@
|
||||
@layer properties {
|
||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||
*, ::before, ::after, ::backdrop {
|
||||
--tw-rotate-x: initial;
|
||||
--tw-rotate-y: initial;
|
||||
--tw-rotate-z: initial;
|
||||
--tw-skew-x: initial;
|
||||
--tw-skew-y: initial;
|
||||
--tw-space-y-reverse: 0;
|
||||
--tw-divide-y-reverse: 0;
|
||||
--tw-border-style: solid;
|
||||
@@ -5460,7 +5265,6 @@
|
||||
--tw-drop-shadow-color: initial;
|
||||
--tw-drop-shadow-alpha: 100%;
|
||||
--tw-drop-shadow-size: initial;
|
||||
--tw-ease: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user