fix: css bug after container browser update
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,8 +11,8 @@ import (
|
||||
templ TeamPage(weeks []models.WorkWeek, userWeek models.WorkWeek) {
|
||||
@Base()
|
||||
@headerComponent()
|
||||
<div class="grid-main divide-y-1">
|
||||
<div class="grid-sub lg:divide-x-1 max-md:divide-y-1 responsive @container">
|
||||
<div class="grid-main divide-y-1 @container">
|
||||
<div class="grid-sub lg:divide-x-1 max-md:divide-y-1 responsive">
|
||||
<div class="grid-cell col-span-full bg-neutral-300 lg:border-0">
|
||||
<h2 class="text-xl uppercase font-bold">Eigene Abrechnung</h2>
|
||||
</div>
|
||||
@@ -34,7 +34,7 @@ templ workWeekComponent(week models.WorkWeek, onlyAccept bool) {
|
||||
year, kw := week.WeekStart.ISOWeek()
|
||||
progress := (float32(week.WorktimeVirtual.Hours()) / week.User.ArbeitszeitPerWoche) * 100
|
||||
}}
|
||||
<div class="employeComponent grid-sub responsive lg:divide-x-1 max-md:divide-y-1 @container">
|
||||
<div class="employeComponent grid-sub responsive lg:divide-x-1 max-md:divide-y-1">
|
||||
<div class="grid-cell flex flex-col max-md:bg-neutral-300 gap-2">
|
||||
if !onlyAccept {
|
||||
<div class="lg:hidden">
|
||||
|
||||
@@ -45,7 +45,7 @@ func TeamPage(weeks []models.WorkWeek, userWeek models.WorkWeek) templ.Component
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"grid-main divide-y-1\"><div class=\"grid-sub lg:divide-x-1 max-md:divide-y-1 responsive @container\"><div class=\"grid-cell col-span-full bg-neutral-300 lg:border-0\"><h2 class=\"text-xl uppercase font-bold\">Eigene Abrechnung</h2></div></div>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"grid-main divide-y-1 @container\"><div class=\"grid-sub lg:divide-x-1 max-md:divide-y-1 responsive\"><div class=\"grid-cell col-span-full bg-neutral-300 lg:border-0\"><h2 class=\"text-xl uppercase font-bold\">Eigene Abrechnung</h2></div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@@ -96,7 +96,7 @@ func workWeekComponent(week models.WorkWeek, onlyAccept bool) templ.Component {
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
year, kw := week.WeekStart.ISOWeek()
|
||||
progress := (float32(week.WorktimeVirtual.Hours()) / week.User.ArbeitszeitPerWoche) * 100
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"employeComponent grid-sub responsive lg:divide-x-1 max-md:divide-y-1 @container\"><div class=\"grid-cell flex flex-col max-md:bg-neutral-300 gap-2\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"employeComponent grid-sub responsive lg:divide-x-1 max-md:divide-y-1\"><div class=\"grid-cell flex flex-col max-md:bg-neutral-300 gap-2\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user