diff --git a/Backend/src/main.css b/Backend/src/main.css index 2e260d6..7b06187 100644 --- a/Backend/src/main.css +++ b/Backend/src/main.css @@ -1,163 +1,157 @@ @import "tailwindcss"; @source "../templates/*.templ"; @plugin "@iconify/tailwind4" { - scale: 1.25; + scale: 1.25; } @theme { - --color-accent-50: #e7fdea; - --color-accent-100: #cbfbd1; - --color-accent-200: #9cf7a8; - --color-accent-300: #68f37a; - --color-accent-400: #33ef4d; - --color-accent-500: #11db2d; - --color-accent-600: #0eaf23; - --color-accent-700: #0a851b; - --color-accent-800: #075a12; - --color-accent-900: #032b09; - --color-accent-950: #021805; - --color-accent: #0eaf23; - --color-text-50: #f7f8f7; - --color-text-100: #f2f3f2; - --color-text-200: #e2e4e2; - --color-text-300: #d2d6d2; - --color-text-400: #c2c7c2; - --color-text-500: #afb6af; - --color-text-600: #97a097; - --color-text-700: #7d877d; - --color-text-800: #5a625a; - --color-text-900: #161816; - --color-text-950: #000000; + --color-accent-50: #e7fdea; + --color-accent-100: #cbfbd1; + --color-accent-200: #9cf7a8; + --color-accent-300: #68f37a; + --color-accent-400: #33ef4d; + --color-accent-500: #11db2d; + --color-accent-600: #0eaf23; + --color-accent-700: #0a851b; + --color-accent-800: #075a12; + --color-accent-900: #032b09; + --color-accent-950: #021805; + --color-accent: #0eaf23; + --color-text-50: #f7f8f7; + --color-text-100: #f2f3f2; + --color-text-200: #e2e4e2; + --color-text-300: #d2d6d2; + --color-text-400: #c2c7c2; + --color-text-500: #afb6af; + --color-text-600: #97a097; + --color-text-700: #7d877d; + --color-text-800: #5a625a; + --color-text-900: #161816; + --color-text-950: #000000; } @layer base { - body { - -webkit-print-color-adjust: exact !important; - print-color-adjust: exact !important; - background-color: white; - } + body { + -webkit-print-color-adjust: exact !important; + print-color-adjust: exact !important; + background-color: white; + } } @layer components { - .grid-main { - display: grid; - grid-template-columns: 4fr 3fr 3fr 1fr; - align-items: stretch; - } - - .grid-sub { - display: grid; - grid-template-columns: subgrid; - grid-column: 1 / -1; - border-color: var(--color-neutral-400); - transition: background-color 0.2s ease-in-out; - } - - .grid-sub.responsive { - display: flex; - flex-direction: column; - } - - .grid-sub:hover { - background-color: var(--color-neutral-200); - } - - .grid-cell { - padding: calc(var(--spacing) * 2); - border-color: var(--color-neutral-400); - } - - .btn { - width: 100%; - cursor: pointer; - border-radius: var(--radius-md); - color: var(--color-neutral-800); - font-size: var(--text-sm); - text-align: center; - padding: calc(var(--spacing) * 2); - border-style: var(--tw-border-style); - border-width: 1px; - border-color: var(--color-neutral-800); - transition-property: - color, background-color, border-color, outline-color, - text-decoration-color, fill, stroke, --tw-gradient-from, - --tw-gradient-via, --tw-gradient-to; - transition-timing-function: var( - --tw-ease, - var(--default-transition-timing-function) - ); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - - input.btn, - select.btn { - transition-duration: 300ms; - } - - .btn:hover { - color: var(--color-white); - background-color: var(--color-neutral-700); - } - - .btn:disabled { - opacity: 50%; - pointer-events: none; - } - - input.btn, - select.btn { - text-align: left; - } - - input.btn:hover, - select.btn:hover { - border-color: var(--color-neutral-300); - background-color: var(--color-neutral-100); - color: var(--color-neutral-800); - } - - .edit-box { - border-radius: var(--radius-md); - overflow: hidden; - border-color: var(--color-neutral-500); - transition-property: background-color, border-color; - transition-timing-function: var(--default-transition-timing-function) * 2; - transition-duration: var(--default-transition-duration); - outline: none; - - &:is(:where(.group):is(.edit) *) { - border-width: 1px; - } - } - - .edit-box:hover { - &:is(:where(.group):is(.edit) *) { - background-color: var(--color-white); - border-color: var(--color-neutral-300); - } - } - - .edit-box input:focus { - outline: none; - } - - div.edit { - border-width: 1px; - background-color: var(--color-neutral-300); - } - - @media (width >=48rem) { .grid-main { - grid-template-columns: repeat(5, 1fr); - margin: 0 10%; + display: grid; + grid-template-columns: 4fr 3fr 3fr 1fr; + align-items: stretch; + } + + .grid-sub { + display: grid; + grid-template-columns: subgrid; + grid-column: 1 / -1; + border-color: var(--color-neutral-400); + transition: background-color 0.2s ease-in-out; } .grid-sub.responsive { - display: grid; + display: flex; + flex-direction: column; + } + + .grid-sub:hover { + background-color: var(--color-neutral-200); + } + + .grid-cell { + padding: calc(var(--spacing) * 2); + border-color: var(--color-neutral-400); } .btn { - padding-inline: calc(var(--spacing) * 4); + width: 100%; + cursor: pointer; + border-radius: var(--radius-md); + color: var(--color-neutral-800); + font-size: var(--text-sm); + text-align: center; + padding: calc(var(--spacing) * 2); + border-style: var(--tw-border-style); + border-width: 1px; + border-color: var(--color-neutral-800); + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + + input.btn, + select.btn { + transition-duration: 300ms; + } + + .btn:hover { + color: var(--color-white); + background-color: var(--color-neutral-700); + } + + .btn:disabled { + opacity: 50%; + pointer-events: none; + } + + input.btn, + select.btn { + text-align: left; + } + + input.btn:hover, + select.btn:hover { + border-color: var(--color-neutral-300); + background-color: var(--color-neutral-100); + color: var(--color-neutral-800); + } + + .edit-box { + border-radius: var(--radius-md); + overflow: hidden; + border-color: var(--color-neutral-500); + transition-property: background-color, border-color; + transition-timing-function: var(--default-transition-timing-function) * 2; + transition-duration: var(--default-transition-duration); + outline: none; + + &:is(:where(.group):is(.edit) *) { + border-width: 1px; + } + } + + .edit-box:hover { + &:is(:where(.group):is(.edit) *) { + background-color: var(--color-white); + border-color: var(--color-neutral-300); + } + } + + .edit-box input:focus { + outline: none; + } + + div.edit { + border-width: 1px; + background-color: var(--color-neutral-300); + } + + @media (width >=48rem) { + .grid-main { + grid-template-columns: repeat(5, 1fr); + margin: 0 10%; + } + + .grid-sub.responsive { + display: grid; + } + + .btn { + padding-inline: calc(var(--spacing) * 4); + } } - } } diff --git a/Backend/templates/reportPage.templ b/Backend/templates/reportPage.templ index bc74e34..b832935 100644 --- a/Backend/templates/reportPage.templ +++ b/Backend/templates/reportPage.templ @@ -11,8 +11,8 @@ import ( templ TeamPage(weeks []models.WorkWeek, userWeek models.WorkWeek) { @Base() @headerComponent() -