From 844b0c35cc6ec1d5f11bbb2ba42f4ba0202b6790 Mon Sep 17 00:00:00 2001 From: Bernard Siebens Date: Fri, 7 Aug 2026 15:54:35 +0200 Subject: [PATCH] Refine .idea project settings and CSS styles --- .gitignore | 2 + .idea/ClubManager.iml | 10 +- .idea/modules.xml | 2 +- .idea/pyLspTools.xml | 14 +- .idea/vcs.xml | 6 + static/css/app.css | 1083 +++++++++++++++++++---------------------- 6 files changed, 534 insertions(+), 583 deletions(-) create mode 100644 .idea/vcs.xml diff --git a/.gitignore b/.gitignore index dc2ed57..d0fee72 100644 --- a/.gitignore +++ b/.gitignore @@ -376,4 +376,6 @@ poetry.toml # LSP config files pyrightconfig.json +node_modules/ + # End of https://www.toptal.com/developers/gitignore/api/python,pycharm,django% \ No newline at end of file diff --git a/.idea/ClubManager.iml b/.idea/ClubManager.iml index cf6280b..1c9d6d4 100644 --- a/.idea/ClubManager.iml +++ b/.idea/ClubManager.iml @@ -1,5 +1,5 @@ - + @@ -19,12 +19,4 @@ - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml index 12f5d46..d8e05c0 100644 --- a/.idea/modules.xml +++ b/.idea/modules.xml @@ -2,7 +2,7 @@ - + \ No newline at end of file diff --git a/.idea/pyLspTools.xml b/.idea/pyLspTools.xml index 0a5598d..e746c6c 100644 --- a/.idea/pyLspTools.xml +++ b/.idea/pyLspTools.xml @@ -1,6 +1,16 @@ - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/static/css/app.css b/static/css/app.css index e1ea44b..4e60170 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -6,11 +6,15 @@ --font-sans: "Ubuntu", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --color-sky-500: oklch(68.5% 0.169 237.323); + --color-gray-500: oklch(55.1% 0.027 264.364); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-xs: 20rem; + --container-md: 28rem; --container-xl: 36rem; + --container-2xl: 42rem; + --container-6xl: 72rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; @@ -30,16 +34,17 @@ --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); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); - --font-ubuntu: "Ubuntu", ui-sans-serif, system-ui, sans-serif; --font-roboto: "Roboto", ui-sans-serif, system-ui, sans-serif; - --font-tourney: "Tourney", ui-sans-serif, system-ui, sans-serif; } } @layer base { @@ -191,63 +196,65 @@ } } @layer utilities { - .diff { - @layer daisyui.l1.l2 { - position: relative; + .modal { + @layer daisyui.l1.l2.l3 { + pointer-events: none; + visibility: hidden; + position: fixed; + inset: 0; + margin: 0; display: grid; + height: 100%; + max-height: none; width: 100%; - overflow: hidden; - webkit-user-select: none; - user-select: none; - align-items: normal; - grid-template-rows: 1fr 1.8rem 1fr; - direction: ltr; - container-type: inline-size; - grid-template-columns: auto 1fr; - &:focus-visible, &:has(.diff-item-1:focus-visible) { - outline-style: var(--tw-outline-style); - outline-width: 2px; - outline-offset: 1px; - outline-color: var(--color-base-content); + max-width: none; + align-items: center; + justify-items: center; + background-color: transparent; + padding: 0; + color: inherit; + transition: overlay 0.3s allow-discrete, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out; + overflow: clip; + overscroll-behavior: contain; + z-index: 999; + scrollbar-gutter: auto; + &::backdrop { + display: none; } - &:focus-visible { - outline-style: var(--tw-outline-style); - outline-width: 2px; - outline-offset: 1px; - outline-color: var(--color-base-content); - .diff-resizer { - min-width: 95cqi; - max-width: 95cqi; + &[popover] { + inset: 0; + margin: 0; + border: 0; + padding: 0; + background: transparent; + color: inherit; + max-width: none; + max-height: none; + &::backdrop { + background-color: oklch(0% 0 0/ 0.4); + transition: background-color 0.3s ease-out; } } - &:has(.diff-item-1:focus-visible) { - outline-style: var(--tw-outline-style); - outline-width: 2px; - outline-offset: 1px; - .diff-resizer { - min-width: 5cqi; - max-width: 5cqi; + } + @layer daisyui.l1.l2 { + &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked + & { + pointer-events: auto; + visibility: visible; + opacity: 100%; + transition: visibility 0s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out; + background-color: oklch(0% 0 0/ 0.4); + .modal-box { + translate: 0 0; + scale: 1; + opacity: 1; + } + :root:has(&) { + --page-scroll-lock: ; } } - &:hover { - .diff-item-2 { - &::after { - height: 2.4rem; - } - } - } - @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) { - &:focus { - .diff-resizer { - min-width: 5cqi; - max-width: 5cqi; - } - } - &:has(.diff-item-1:focus) { - .diff-resizer { - min-width: 95cqi; - max-width: 95cqi; - } + @starting-style { + &.modal-open, &[open], &:popover-open, &:target, .modal-toggle:checked + & { + opacity: 0%; } } } @@ -321,92 +328,6 @@ } } } - .tab { - @layer daisyui.l1.l2.l3 { - &:is(.tabs > .tab) { - position: relative; - display: inline-flex; - cursor: pointer; - appearance: none; - flex-wrap: wrap; - align-items: center; - justify-content: center; - text-align: center; - webkit-user-select: none; - user-select: none; - &:hover { - @media (hover: hover) { - color: var(--color-base-content); - } - } - --tab-p: 0.75rem; - --tab-bg: var(--color-base-100); - --tab-border-color: var(--color-base-300); - --tab-radius-ss: 0; - --tab-radius-se: 0; - --tab-radius-es: 0; - --tab-radius-ee: 0; - --tab-order: 0; - --tab-radius-min: calc(0.75rem - var(--border)); - --tab-radius-limit: min(var(--radius-field), var(--tab-radius-min)); - --tab-radius-grad: #0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + 0.25px), - var(--tab-border-color) 69%, var(--tab-bg) calc(69% + 0.25px); - border-color: #0000; - order: var(--tab-order); - height: var(--tab-height); - font-size: 0.875rem; - padding-inline: var(--tab-p); - &:is(input[type="radio"]) { - min-width: fit-content; - &:after { - --tw-content: attr(aria-label); - content: var(--tw-content); - } - } - &:is(label) { - position: relative; - input { - position: absolute; - inset: 0; - cursor: pointer; - appearance: none; - opacity: 0%; - } - } - &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { - & + .tab-content { - display: block; - } - } - &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"] ) { - color: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-base-content) 50%, transparent); - } - } - &:not(input):empty { - flex-grow: 1; - cursor: default; - } - &:focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - &:focus-visible, &:is(label:has(:checked:focus-visible)) { - outline: 2px solid currentColor; - outline-offset: -5px; - } - &[disabled] { - pointer-events: none; - opacity: 40%; - } - } - } - } .menu { @layer daisyui.l1.l2.l3 { display: flex; @@ -789,57 +710,6 @@ } } } - .diff-item-2 { - @layer daisyui.l1.l2.l3 { - position: relative; - grid-column-start: 1; - grid-row: span 3 / span 3; - grid-row-start: 1; - &:after { - pointer-events: none; - position: absolute; - top: calc(1 / 2 * 100%); - right: 1px; - bottom: 0; - z-index: 2; - border-radius: calc(infinity * 1px); - background-color: var(--color-base-100); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-base-100) 98%, transparent); - } - width: 1.2rem; - height: 1.8rem; - border: 2px solid var(--color-base-100); - content: ""; - box-shadow: 0 0 0 2px #0000002a; - outline: 2px solid var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - outline: 2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000); - } - outline-offset: -3px; - translate: 50% -50%; - transition: height 0.3s linear(0, 0.931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1); - } - > * { - pointer-events: none; - position: absolute; - top: 0; - bottom: 0; - left: 0; - height: 100%; - width: 100cqi; - max-width: none; - object-fit: cover; - object-position: center; - } - @supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) { - &:after { - --tw-content: none; - content: var(--tw-content); - } - } - } - } .dropdown { @layer daisyui.l1.l2.l3 { position: relative; @@ -1088,23 +958,6 @@ } } } - .loading { - @layer daisyui.l1.l2.l3 { - pointer-events: none; - display: inline-block; - aspect-ratio: 1 / 1; - background-color: currentcolor; - vertical-align: middle; - width: calc(var(--size-selector, 0.25rem) * 6); - mask-size: 100%; - mask-repeat: no-repeat; - mask-position: center; - mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); - @media (prefers-reduced-motion: no-preference) { - mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); - } - } - } .collapse { &:not(td, tr, colgroup) { visibility: revert-layer; @@ -1272,44 +1125,6 @@ } } } - .\!filter { - @layer daisyui.l1.l2.l3 { - display: flex !important; - flex-wrap: wrap !important; - [type="radio"] { - width: auto !important; - } - input { - overflow: hidden !important; - opacity: 100% !important; - scale: 1 !important; - transition: visibility 0.1s allow-discrete, margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s !important; - &.filter-reset { - aspect-ratio: 1 / 1 !important; - &::after { - --tw-content: "×" !important; - content: var(--tw-content) !important; - } - } - } - > input:not(:last-child), > :not(:last-child) input { - margin-inline-end: 0.25rem !important; - } - } - @layer daisyui.l1 { - &:not(:has(:checked:not(.filter-reset))) :is(.filter-reset, [type="reset"]):not(:focus-visible) { - visibility: hidden !important; - } - &:not(:has(:checked:not(.filter-reset))) :is(.filter-reset, [type="reset"]):not(:focus-visible), &:not(:has(:focus-visible)):has(:checked:not(.filter-reset, [type="checkbox"])) :is(input, button):not(:checked, .filter-reset, [type="reset"]) { - margin-inline: 0 !important; - width: 0 !important; - padding-inline: 0 !important; - opacity: 0% !important; - scale: 0 !important; - border-width: 0 !important; - } - } - } .filter { @layer daisyui.l1.l2.l3 { display: flex; @@ -1348,36 +1163,6 @@ } } } - .validator-hint { - @layer daisyui.l1.l2.l3 { - visibility: hidden; - margin-top: calc(0.25rem * 2); - font-size: 0.75rem; - } - } - .validator { - @layer daisyui.l1.l2.l3 { - &:user-valid, &:has(:user-valid) { - &, &:focus, &:checked, &[aria-checked="true"], &:focus-within { - --input-color: var(--color-success); - } - } - &:user-invalid, &:has(:user-invalid), &[aria-invalid]:not([aria-invalid="false"]), &:has([aria-invalid]:not([aria-invalid="false"])) { - &, &:focus, &:checked, &[aria-checked="true"], &:focus-within { - --input-color: var(--color-error); - } - & ~ .validator-hint { - visibility: visible; - color: var(--color-error); - } - } - } - &:user-invalid, &:has(:user-invalid), &[aria-invalid]:not([aria-invalid="false"]), &:has([aria-invalid]:not([aria-invalid="false"])) { - & ~ .validator-hint { - display: revert-layer; - } - } - } .collapse-open { @layer daisyui.l1.l2 { grid-template-rows: max-content 1fr; @@ -1749,105 +1534,6 @@ } } } - .range { - @layer daisyui.l1.l2.l3 { - appearance: none; - webkit-appearance: none; - --range-thumb: var(--color-base-100); - --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6); - --range-progress: currentColor; - --range-fill: 1; - --range-p: 0.25rem; - --range-bg: currentColor; - @supports (color: color-mix(in lab, red, red)) { - --range-bg: color-mix(in oklab, currentColor 10%, #0000); - } - --range-fill-x: calc( - (var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2) - ); - --range-fill-y: 0; - --range-fill-spread: calc(100cqw * var(--range-fill)); - cursor: pointer; - overflow: hidden; - background-color: transparent; - vertical-align: middle; - width: clamp(3rem, 20rem, 100%); - --radius-selector-max: calc( - var(--radius-selector) + var(--radius-selector) + var(--radius-selector) - ); - border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); - border: none; - height: var(--range-thumb-size); - [dir="rtl"] & { - --range-dir: -1; - } - &:focus { - outline: none; - } - &:focus-visible { - outline: 2px solid; - outline-offset: 2px; - } - &::-webkit-slider-runnable-track { - width: 100%; - background-color: var(--range-bg); - border-radius: var(--radius-selector); - height: calc(var(--range-thumb-size) * 0.5); - } - @media (forced-colors: active) { - &::-webkit-slider-runnable-track { - border: 1px solid; - } - } - @media (forced-colors: active) { - &::-moz-range-track { - border: 1px solid; - } - } - &::-webkit-slider-thumb { - position: relative; - box-sizing: border-box; - border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); - background-color: var(--range-thumb); - height: var(--range-thumb-size); - width: var(--range-thumb-size); - border: var(--range-p) solid; - appearance: none; - webkit-appearance: none; - inset-block-start: 50%; - color: var(--range-progress); - transform: translateY(-50%); - box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); - @supports (color: color-mix(in lab, red, red)) { - box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); - } - } - &::-moz-range-track { - width: 100%; - background-color: var(--range-bg); - border-radius: var(--radius-selector); - height: calc(var(--range-thumb-size) * 0.5); - } - &::-moz-range-thumb { - position: relative; - box-sizing: border-box; - border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); - background-color: currentColor; - height: var(--range-thumb-size); - width: var(--range-thumb-size); - border: var(--range-p) solid; - color: var(--range-progress); - box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); - @supports (color: color-mix(in lab, red, red)) { - box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, var(--range-fill-x) var(--range-fill-y) 0 var(--range-fill-spread); - } - } - &:disabled { - cursor: not-allowed; - opacity: 30%; - } - } - } .indicator { @layer daisyui.l1.l2.l3 { position: relative; @@ -2089,27 +1775,6 @@ } } } - .diff-resizer { - @layer daisyui.l1.l2.l3 { - position: relative; - isolation: isolate; - z-index: 2; - grid-column-start: 1; - grid-row-start: 2; - height: calc(0.25rem * 3); - width: 50cqi; - max-width: calc(100cqi - 1rem); - min-width: 1rem; - resize: horizontal; - overflow: hidden; - opacity: 0%; - transform: scaleY(5) translate(0.32rem, 50%); - cursor: ew-resize; - transform-origin: 100% 100%; - clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem)); - transition: min-width 0.3s ease-out, max-width 0.3s ease-out; - } - } .select { @layer daisyui.l1.l2.l3 { position: relative; @@ -2355,6 +2020,49 @@ 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; @@ -2755,6 +2463,12 @@ } } } + .top-1 { + top: var(--spacing); + } + .left-1 { + left: var(--spacing); + } .file-input { @layer daisyui.l1.l2.l3 { cursor: pointer; @@ -3108,28 +2822,25 @@ } } } + .modal-backdrop { + @layer daisyui.l1.l2.l3 { + grid-column-start: 1; + grid-row-start: 1; + display: grid; + align-self: stretch; + justify-self: stretch; + color: transparent; + z-index: -1; + button { + cursor: pointer; + } + } + } .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); - } + .col-span-full { + grid-column: 1 / -1; } .hero { @layer daisyui.l1.l2.l3 { @@ -3144,34 +2855,25 @@ } } } - .stat-value { + .modal-box { @layer daisyui.l1.l2.l3 { grid-column-start: 1; - white-space: nowrap; - font-size: 2rem; - font-weight: 800; - } - } - .stat-desc { - @layer daisyui.l1.l2.l3 { - grid-column-start: 1; - white-space: nowrap; - color: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-base-content) 60%, transparent); - } - font-size: 0.75rem; - } - } - .stat-title { - @layer daisyui.l1.l2.l3 { - grid-column-start: 1; - white-space: nowrap; - color: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, var(--color-base-content) 60%, transparent); - } - font-size: 0.75rem; + grid-row-start: 1; + max-height: 100vh; + width: calc(11 / 12 * 100%); + max-width: 32rem; + background-color: var(--color-base-100); + padding: calc(0.25rem * 6); + transition: translate 0.3s ease-out, scale 0.3s ease-out, opacity 0.2s ease-out 0.05s, box-shadow 0.3s ease-out; + border-top-left-radius: var(--modal-tl, var(--radius-box)); + border-top-right-radius: var(--modal-tr, var(--radius-box)); + border-bottom-left-radius: var(--modal-bl, var(--radius-box)); + border-bottom-right-radius: var(--modal-br, var(--radius-box)); + scale: 95%; + opacity: 0; + box-shadow: oklch(0% 0 0/ 0.25) 0px 25px 50px -12px; + overflow-y: auto; + overscroll-behavior: contain; } } .container { @@ -3225,6 +2927,9 @@ .mx-auto { margin-inline: auto; } + .my-1 { + margin-block: var(--spacing); + } .my-2 { margin-block: calc(var(--spacing) * 2); } @@ -3237,62 +2942,6 @@ .my-6 { margin-block: calc(var(--spacing) * 6); } - .breadcrumbs { - @layer daisyui.l1.l2.l3 { - max-width: 100%; - overflow-x: auto; - padding-block: calc(0.25rem * 2); - > menu, > ul, > ol { - display: flex; - min-height: min-content; - align-items: center; - white-space: nowrap; - > li { - display: flex; - align-items: center; - > * { - display: flex; - cursor: pointer; - align-items: center; - gap: calc(0.25rem * 2); - &:hover { - @media (hover: hover) { - text-decoration-line: underline; - } - } - &:focus { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - &:focus-visible { - outline: 2px solid currentColor; - outline-offset: 2px; - } - } - & + *:before { - content: ""; - margin-inline-start: calc(0.25rem * 2); - margin-inline-end: calc(0.25rem * 3); - display: block; - height: calc(0.25rem * 1.5); - width: calc(0.25rem * 1.5); - opacity: 40%; - rotate: 45deg; - border-top: 1px solid; - border-right: 1px solid; - background-color: #0000; - } - [dir="rtl"] & + *:before { - rotate: -135deg; - } - } - } - } - } .label { @layer daisyui.l1.l2.l3 { display: inline-flex; @@ -3332,6 +2981,14 @@ } } } + .modal-action { + @layer daisyui.l1.l2.l3 { + margin-top: calc(0.25rem * 6); + display: flex; + justify-content: flex-end; + gap: calc(0.25rem * 2); + } + } .mt-1 { margin-top: var(--spacing); } @@ -3353,12 +3010,18 @@ .mt-10 { margin-top: calc(var(--spacing) * 10); } + .mr-1 { + margin-right: var(--spacing); + } .mb-1 { margin-bottom: var(--spacing); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } + .mb-3 { + margin-bottom: calc(var(--spacing) * 3); + } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } @@ -3421,17 +3084,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; @@ -3521,16 +3173,6 @@ } } } - .fieldset { - @layer daisyui.l1.l2.l3 { - display: grid; - gap: calc(0.25rem * 1.5); - padding-block: 0.25rem; - font-size: 0.75rem; - grid-template-columns: 1fr; - grid-auto-rows: max-content; - } - } .card-actions { @layer daisyui.l1.l2.l3 { display: flex; @@ -3613,9 +3255,6 @@ } } } - .\!hidden { - display: none !important; - } .block { display: block; } @@ -3646,11 +3285,15 @@ .table { display: table; } - .table-caption { - display: table-caption; + .aspect-square { + aspect-ratio: 1 / 1; } - .table-cell { - display: table-cell; + .size-8 { + width: calc(var(--spacing) * 8); + height: calc(var(--spacing) * 8); + } + .h-12 { + height: calc(var(--spacing) * 12); } .h-16 { height: calc(var(--spacing) * 16); @@ -3658,24 +3301,45 @@ .h-56 { height: calc(var(--spacing) * 56); } - .min-h-screen { - min-height: 100vh; + .h-72 { + height: calc(var(--spacing) * 72); + } + .h-screen { + height: 100vh; + } + .max-h-60 { + max-height: calc(var(--spacing) * 60); + } + .min-h-6 { + min-height: calc(var(--spacing) * 6); + } + .w-12 { + width: calc(var(--spacing) * 12); } .w-16 { width: calc(var(--spacing) * 16); } - .w-24 { - width: calc(var(--spacing) * 24); - } .w-60 { width: calc(var(--spacing) * 60); } - .w-fit { - width: fit-content; + .w-64 { + width: calc(var(--spacing) * 64); } .w-full { width: 100%; } + .max-w-2xl { + max-width: var(--container-2xl); + } + .max-w-6xl { + max-width: var(--container-6xl); + } + .max-w-40 { + max-width: calc(var(--spacing) * 40); + } + .max-w-md { + max-width: var(--container-md); + } .max-w-none { max-width: none; } @@ -3685,12 +3349,21 @@ .max-w-xs { max-width: var(--container-xs); } + .min-w-0 { + min-width: 0; + } .flex-1 { flex: 1; } .flex-shrink { flex-shrink: 1; } + .shrink { + flex-shrink: 1; + } + .shrink-0 { + flex-shrink: 0; + } .flex-grow { flex-grow: 1; } @@ -3731,6 +3404,9 @@ } } } + .animate-pulse { + animation: var(--animate-pulse); + } .link { @layer daisyui.l1.l2.l3 { cursor: pointer; @@ -3755,18 +3431,39 @@ .resize { resize: both; } + .scrollbar-gutter-stable { + scrollbar-gutter: stable; + } + .list-inside { + list-style-position: inside; + } + .list-disc { + list-style-type: disc; + } + .grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } + .flex-nowrap { + flex-wrap: nowrap; + } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } + .items-end { + align-items: flex-end; + } .items-start { align-items: flex-start; } @@ -3808,6 +3505,9 @@ margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } } + .gap-y-2 { + row-gap: calc(var(--spacing) * 2); + } .divide-y { :where(& > :not(:last-child)) { --tw-divide-y-reverse: 0; @@ -3822,14 +3522,23 @@ border-color: var(--color-base-200); } } + .self-start { + align-self: flex-start; + } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .overflow-hidden { + overflow: hidden; + } .overflow-x-auto { overflow-x: auto; } + .overflow-y-auto { + overflow-y: auto; + } .rounded { border-radius: 0.25rem; } @@ -3842,6 +3551,9 @@ .rounded-full { border-radius: calc(infinity * 1px); } + .rounded-lg { + border-radius: var(--radius-lg); + } .border { border-style: var(--tw-border-style); border-width: 1px; @@ -3850,6 +3562,10 @@ border-style: var(--tw-border-style); border-width: 2px; } + .border-r { + border-right-style: var(--tw-border-style); + border-right-width: 1px; + } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; @@ -3866,6 +3582,14 @@ background-image: none; } } + .badge-outline { + @layer daisyui.l1.l2 { + color: var(--badge-color); + --badge-bg: #0000; + background-image: none; + border-color: currentColor; + } + } .border-base-300 { border-color: var(--color-base-300); } @@ -3878,20 +3602,36 @@ border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } - .border-base-content\/70 { - border-color: var(--color-base-content); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-base-content) 70%, transparent); - } - } .border-error { border-color: var(--color-error); } + .border-info { + border-color: var(--color-info); + } + .border-neutral { + border-color: var(--color-neutral); + } + .border-success { + border-color: var(--color-success); + } .border-warning { border-color: var(--color-warning); } - .border-white { - border-color: var(--color-white); + .menu-active { + :where(:not(ul, menu, details, .menu-title, .btn))& { + @layer daisyui.l1.l2 { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + color: var(--menu-active-fg); + background-color: var(--menu-active-bg); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + } + } } .bg-base-100 { background-color: var(--color-base-100); @@ -3899,8 +3639,14 @@ .bg-base-200 { background-color: var(--color-base-200); } - .bg-primary { - background-color: var(--color-primary); + .bg-base-300 { + background-color: var(--color-base-300); + } + .bg-neutral { + background-color: var(--color-neutral); + } + .bg-secondary { + background-color: var(--color-secondary); } .bg-white { background-color: var(--color-white); @@ -3946,6 +3692,31 @@ --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); } } + .btn-soft { + @layer daisyui.l1.l2.l3 { + --btn-bg: var(--btn-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + --btn-bg: color-mix( + in oklab, + var(--btn-color, var(--color-base-content)) 8%, + var(--btn-soft-bg, var(--color-base-100)) + ); + } + color: var(--btn-rest-fg, var(--btn-color, var(--color-base-content))); + --btn-border: var(--btn-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + --btn-border: color-mix( + in oklab, + var(--btn-color, var(--color-base-content)) 10%, + var(--btn-soft-bg, var(--color-base-100)) + ); + } + --btn-border-style: solid; + background-image: none; + --btn-inset: 0 0 0 0 oklch(0% 0 0/0); + --btn-shadow: 0 0 0 0 oklch(0% 0 0/0); + } + } .btn-ghost { @layer daisyui.l1.l2.l3 { --btn-bg: #0000; @@ -3962,6 +3733,9 @@ .object-contain { object-fit: contain; } + .object-cover { + object-fit: cover; + } .p-2 { padding: calc(var(--spacing) * 2); } @@ -3971,6 +3745,18 @@ .p-4 { padding: calc(var(--spacing) * 4); } + .menu-title { + @layer daisyui.l1.l2.l3 { + padding-inline: calc(0.25rem * 3); + padding-block: calc(0.25rem * 2); + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + } + font-size: 0.875rem; + font-weight: 600; + } + } .table-sm { @layer daisyui.l1.l2 { :not(thead, tfoot) tr { @@ -3982,11 +3768,8 @@ } } } - .px-4 { - padding-inline: calc(var(--spacing) * 4); - } - .px-6 { - padding-inline: calc(var(--spacing) * 6); + .px-3 { + padding-inline: calc(var(--spacing) * 3); } .px-8 { padding-inline: calc(var(--spacing) * 8); @@ -3994,8 +3777,8 @@ .py-2 { padding-block: calc(var(--spacing) * 2); } - .py-4 { - padding-block: calc(var(--spacing) * 4); + .py-6 { + padding-block: calc(var(--spacing) * 6); } .pt-2 { padding-top: calc(var(--spacing) * 2); @@ -4006,6 +3789,9 @@ .pb-2 { padding-bottom: calc(var(--spacing) * 2); } + .pb-6 { + padding-bottom: calc(var(--spacing) * 6); + } .pl-8 { padding-left: calc(var(--spacing) * 8); } @@ -4083,10 +3869,20 @@ --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } + .tracking-wide { + --tw-tracking: var(--tracking-wide); + letter-spacing: var(--tracking-wide); + } .tracking-wider { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); } + .whitespace-nowrap { + white-space: nowrap; + } + .whitespace-pre-line { + white-space: pre-line; + } .alert-error { @layer daisyui.l1.l2 { color: var(--color-error-content); @@ -4115,9 +3911,19 @@ --alert-color: var(--color-warning); } } - .progress-primary { + .progress-error { @layer daisyui.l1.l2 { - color: var(--color-primary); + color: var(--color-error); + } + } + .progress-success { + @layer daisyui.l1.l2 { + color: var(--color-success); + } + } + .progress-warning { + @layer daisyui.l1.l2 { + color: var(--color-warning); } } .text-base-content { @@ -4144,8 +3950,17 @@ .text-error { color: var(--color-error); } - .text-primary-content { - color: var(--color-primary-content); + .text-error-content { + color: var(--color-error-content); + } + .text-gray-500 { + color: var(--color-gray-500); + } + .text-neutral-content { + color: var(--color-neutral-content); + } + .text-secondary-content { + color: var(--color-secondary-content); } .text-sky-500 { color: var(--color-sky-500); @@ -4153,12 +3968,6 @@ .text-warning { color: var(--color-warning); } - .lowercase { - text-transform: lowercase; - } - .uppercase { - text-transform: uppercase; - } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); @@ -4173,6 +3982,9 @@ } } } + .line-through { + text-decoration-line: line-through; + } .prose { & :where(a.btn:not(.btn-link)):not(:where([class~="not-prose"], [class~="not-prose"] *)) { text-decoration-line: none; @@ -4181,6 +3993,9 @@ .underline { text-decoration-line: underline; } + .opacity-40 { + opacity: 40%; + } .opacity-50 { opacity: 50%; } @@ -4205,6 +4020,24 @@ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .ring { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .ring-2 { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .ring-primary { + --tw-ring-color: var(--color-primary); + } + .ring-offset-2 { + --tw-ring-offset-width: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + } + .ring-offset-base-100 { + --tw-ring-offset-color: var(--color-base-100); + } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; @@ -4213,13 +4046,6 @@ --tw-blur: blur(8px); 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,); } - .invert { - --tw-invert: invert(100%); - 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,); - } - .\!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,) !important; - } .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,); } @@ -4247,12 +4073,15 @@ } } } - .btn-neutral { + .select-sm { @layer daisyui.l1.l2 { - --btn-color: var(--color-neutral); - --btn-fg: var(--color-neutral-content); - --btn-soft-bg: var(--color-neutral-content) 80%; - --btn-rest-fg: initial; + --sl-size-mul: 8; + --font-size-min: 0.75rem; + --option-px: 2.5; + .floating-label:has(&) { + --top-mul: 4; + --font-size: 0.75rem; + } } } .btn-accent { @@ -4269,6 +4098,13 @@ --btn-soft-bg: initial; } } + .btn-info { + @layer daisyui.l1.l2 { + --btn-color: var(--color-info); + --btn-fg: var(--color-info-content); + --btn-soft-bg: initial; + } + } .btn-primary { @layer daisyui.l1.l2 { --btn-color: var(--color-primary); @@ -4304,6 +4140,12 @@ --size: calc(var(--size-field, 0.25rem) * 6); } } + .badge-accent { + @layer daisyui.l1.l2 { + --badge-color: var(--color-accent); + --badge-fg: var(--color-accent-content); + } + } .badge-error { @layer daisyui.l1.l2 { --badge-color: var(--color-error); @@ -4322,6 +4164,12 @@ --badge-fg: var(--color-neutral-content); } } + .badge-primary { + @layer daisyui.l1.l2 { + --badge-color: var(--color-primary); + --badge-fg: var(--color-primary-content); + } + } .badge-success { @layer daisyui.l1.l2 { --badge-color: var(--color-success); @@ -4341,16 +4189,92 @@ } } } + .select-error { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within, &:open { + --input-color: var(--color-error); + } + } + } + .textarea-error { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within { + --input-color: var(--color-error); + } + } + } + .empty\:hidden { + &:empty { + display: none; + } + } + .hover\:opacity-100 { + &:hover { + @media (hover: hover) { + opacity: 100%; + } + } + } + .sm\:hidden { + @media (width >= 40rem) { + display: none; + } + } + .sm\:inline { + @media (width >= 40rem) { + display: inline; + } + } .sm\:grid-cols-2 { @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } + .sm\:grid-cols-3 { + @media (width >= 40rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + .sm\:px-6 { + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 6); + } + } .md\:grid-cols-2 { @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } + .md\:grid-cols-3 { + @media (width >= 48rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + .md\:grid-cols-4 { + @media (width >= 48rem) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + } + .md\:grid-cols-5 { + @media (width >= 48rem) { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + } + .lg\:block { + @media (width >= 64rem) { + display: block; + } + } + .lg\:hidden { + @media (width >= 64rem) { + display: none; + } + } + .lg\:w-fit { + @media (width >= 64rem) { + width: fit-content; + } + } .lg\:grid-cols-2 { @media (width >= 64rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -4361,9 +4285,14 @@ grid-template-columns: repeat(3, minmax(0, 1fr)); } } - .lg\:grid-cols-4 { + .lg\:grid-cols-5 { @media (width >= 64rem) { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + } + .lg\:grid-cols-6 { + @media (width >= 64rem) { + grid-template-columns: repeat(6, minmax(0, 1fr)); } } } @@ -4498,6 +4427,13 @@ [data-theme="dark"] .logo { background-image: var(--logo-light); } +.club-logo { + image-rendering: -webkit-optimize-contrast; + image-rendering: smooth; + image-rendering: high-quality; + backface-visibility: hidden; + transform: translateZ(0); +} @layer base { :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] { color-scheme: light; @@ -4974,6 +4910,11 @@ syntax: "*"; inherits: false; } +@keyframes pulse { + 50% { + opacity: 0.5; + } +} @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 {