R3L4xBr0/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

third commit

Browse Source
This commit is contained in:
Jakob
2026-04-26 21:45:59 +02:00
parent 3f76639497
commit aa942de96c
8 changed files with 214 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
public/output.css
View File

@@ -14,6 +14,8 @@
--text-sm--line-height: calc(1.25 / 0.875);
--text-base: 1rem;
--text-base--line-height: calc(1.5 / 1);
--text-lg: 1.125rem;
--text-lg--line-height: calc(1.75 / 1.125);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--font-weight-medium: 500;
@@ -182,6 +184,61 @@
}
}
@layer utilities {
.modal {
@layer daisyui.l1.l2.l3 {
pointer-events: none;
visibility: hidden;
position: fixed;
inset: calc(0.25rem * 0);
margin: calc(0.25rem * 0);
display: grid;
height: 100%;
max-height: none;
width: 100%;
max-width: none;
align-items: center;
justify-items: center;
background-color: transparent;
padding: calc(0.25rem * 0);
color: inherit;
transition: 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;
}
}
@layer daisyui.l1.l2 {
&.modal-open, &[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-has-backdrop: 1;
--page-overflow: hidden;
--page-scroll-bg: var(--page-scroll-bg-on);
--page-scroll-gutter: stable;
--page-scroll-transition: var(--page-scroll-transition-on);
animation: set-page-has-scroll forwards;
animation-timeline: scroll();
}
}
@starting-style {
&.modal-open, &[open], &:target, .modal-toggle:checked + & {
opacity: 0%;
}
}
}
}
.dock {
@layer daisyui.l1.l2.l3 {
position: fixed;
@@ -901,6 +958,92 @@
}
}
}
.checkbox\! {
@layer daisyui.l1.l2.l3 {
border: var(--border) solid var(--input-color, var(--color-base-content)) !important;
@supports (color: color-mix(in lab, red, red)) {
border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)) !important;
}
position: relative !important;
display: inline-block !important;
flex-shrink: 0 !important;
cursor: pointer !important;
appearance: none !important;
border-radius: var(--radius-selector) !important;
padding: calc(0.25rem * 1) !important;
vertical-align: middle !important;
color: var(--color-base-content) !important;
box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000 !important;
transition: background-color 0.2s, box-shadow 0.2s !important;
--size: calc(var(--size-selector, 0.25rem) * 6) !important;
width: var(--size) !important;
height: var(--size) !important;
background-size: auto, calc(var(--noise) * 100%) !important;
background-image: none, var(--fx-noise) !important;
&:before {
--tw-content: "" !important;
content: var(--tw-content) !important;
display: block !important;
width: 100% !important;
height: 100% !important;
rotate: 45deg !important;
background-color: currentcolor !important;
opacity: 0% !important;
transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s !important;
transition-delay: 0.1s !important;
clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%) !important;
box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset !important;
font-size: 1rem !important;
line-height: 0.75 !important;
}
&:focus-visible {
outline: 2px solid var(--input-color, currentColor) !important;
outline-offset: 2px !important;
}
&:checked, &[aria-checked="true"] {
background-color: var(--input-color, #0000) !important;
box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) !important;
&:before {
clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%) !important;
opacity: 100% !important;
}
@media (forced-colors: active) {
&:before {
rotate: 0deg !important;
background-color: transparent !important;
--tw-content: "✔︎" !important;
clip-path: none !important;
}
}
@media print {
&:before {
rotate: 0deg !important;
background-color: transparent !important;
--tw-content: "✔︎" !important;
clip-path: none !important;
}
}
}
&:indeterminate {
background-color: var( --input-color, var(--color-base-content) ) !important;
@supports (color: color-mix(in lab, red, red)) {
background-color: var( --input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000) ) !important;
}
&:before {
rotate: 0deg !important;
opacity: 100% !important;
translate: 0 -35% !important;
clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%) !important;
}
}
}
&:disabled {
@layer daisyui.l1.l2 {
cursor: not-allowed !important;
opacity: 20% !important;
}
}
}
.card {
@layer daisyui.l1.l2.l3 {
position: relative;
@@ -950,6 +1093,15 @@
}
}
}
.modal-toggle {
@layer daisyui.l1.l2.l3 {
position: fixed;
height: calc(0.25rem * 0);
width: calc(0.25rem * 0);
appearance: none;
opacity: 0%;
}
}
.sticky {
position: sticky;
}
@@ -962,9 +1114,44 @@
.bottom-0 {
bottom: calc(var(--spacing) * 0);
}
.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-50 {
z-index: 50;
}
.modal-box {
@layer daisyui.l1.l2.l3 {
grid-column-start: 1;
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;
}
}
.mx-3 {
margin-inline: calc(var(--spacing) * 3);
}
@@ -1008,28 +1195,6 @@
padding-inline: calc(var(--size) / 2 - var(--border));
}
}
.card-body {
@layer daisyui.l1.l2.l3 {
display: flex;
flex: auto;
flex-direction: column;
gap: calc(0.25rem * 2);
padding: var(--card-p, 1.5rem);
font-size: var(--card-fs, 0.875rem);
:where(p) {
flex-grow: 1;
}
}
}
.card-title {
@layer daisyui.l1.l2.l3 {
display: flex;
align-items: center;
gap: calc(0.25rem * 2);
font-size: var(--cardtitle-fs, 1.125rem);
font-weight: 600;
}
}
.block {
display: block;
}
@@ -1083,9 +1248,6 @@
.w-14 {
width: calc(var(--spacing) * 14);
}
.w-96 {
width: calc(var(--spacing) * 96);
}
.w-\[248px\] {
width: 248px;
}
@@ -1312,6 +1474,10 @@
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1428,10 +1594,6 @@
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
}
.shadow-xl {
--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);
}
.shadow-primary\/30 {
--tw-shadow-color: var(--color-primary);
@supports (color: color-mix(in lab, red, red)) {

8
public/updateWeekDisplay.js
View File

@@ -3,11 +3,3 @@ function updateWeekDisplay(value) {
document.getElementById('week-num').textContent = value;
}
function darkMode() {
const element = document.getElementById('darkmode')
if (element.getElementById("checkbox1").checked === true) {
element.setAttribute("data-theme", "silk")
} else {
element.setAttribute("data-theme", "dracula")
}
}