Refactor frontend views
All checks were successful
Build and push image / build-containers (push) Successful in 10m14s

This commit is contained in:
2025-06-14 21:56:17 +02:00
parent b3debd3ed2
commit bce372a1d1
32 changed files with 1230 additions and 458 deletions

View File

@ -40,6 +40,7 @@
--color-teal-500: oklch(70.4% 0.14 182.503);
--color-teal-600: oklch(60% 0.118 184.704);
--color-teal-900: oklch(38.6% 0.063 188.416);
--color-blue-50: oklch(97% 0.014 254.604);
--color-blue-100: oklch(93.2% 0.032 255.585);
--color-blue-200: oklch(88.2% 0.059 254.128);
--color-blue-300: oklch(80.9% 0.105 251.813);
@ -381,6 +382,9 @@
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
@ -444,12 +448,18 @@
.my-auto {
margin-block: auto;
}
.ms-0 {
margin-inline-start: calc(var(--spacing) * 0);
}
.ms-2 {
margin-inline-start: calc(var(--spacing) * 2);
}
.ms-3 {
margin-inline-start: calc(var(--spacing) * 3);
}
.ms-auto {
margin-inline-start: auto;
}
.me-2 {
margin-inline-end: calc(var(--spacing) * 2);
}
@ -916,6 +926,9 @@
.flex-wrap {
flex-wrap: wrap;
}
.place-content-between {
place-content: space-between;
}
.items-baseline {
align-items: baseline;
}
@ -1001,6 +1014,13 @@
margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
}
}
.-space-x-px {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(-1px * var(--tw-space-x-reverse));
margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
}
}
.space-x-1 {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
@ -1078,6 +1098,9 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
@ -1111,6 +1134,14 @@
.rounded-xs {
border-radius: var(--radius-xs);
}
.rounded-s-lg {
border-start-start-radius: var(--radius-lg);
border-end-start-radius: var(--radius-lg);
}
.rounded-e-lg {
border-start-end-radius: var(--radius-lg);
border-end-end-radius: var(--radius-lg);
}
.rounded-t {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
@ -1161,6 +1192,10 @@
border-style: var(--tw-border-style);
border-width: 2px;
}
.border-e-0 {
border-inline-end-style: var(--tw-border-style);
border-inline-end-width: 0px;
}
.border-t {
border-top-style: var(--tw-border-style);
border-top-width: 1px;
@ -1201,6 +1236,12 @@
--tw-border-style: solid;
border-style: solid;
}
.border-blue-300 {
border-color: var(--color-blue-300);
}
.border-blue-700 {
border-color: var(--color-blue-700);
}
.border-gray-100 {
border-color: var(--color-gray-100);
}
@ -1264,6 +1305,9 @@
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
}
}
.bg-blue-50 {
background-color: var(--color-blue-50);
}
.bg-blue-100 {
background-color: var(--color-blue-100);
}
@ -1282,6 +1326,9 @@
.bg-blue-600 {
background-color: var(--color-blue-600);
}
.bg-blue-700 {
background-color: var(--color-blue-700);
}
.bg-emerald-500 {
background-color: var(--color-emerald-500);
}
@ -1614,6 +1661,10 @@
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-base\/7 {
font-size: var(--text-base);
line-height: calc(var(--spacing) * 7);
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
@ -1622,6 +1673,10 @@
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-sm\/6 {
font-size: var(--text-sm);
line-height: calc(var(--spacing) * 6);
}
.text-xl {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
@ -1715,6 +1770,9 @@
.text-emerald-500 {
color: var(--color-emerald-500);
}
.text-gray-100 {
color: var(--color-gray-100);
}
.text-gray-200 {
color: var(--color-gray-200);
}
@ -2097,6 +2155,13 @@
}
}
}
.hover\:bg-blue-100 {
&:hover {
@media (hover: hover) {
background-color: var(--color-blue-100);
}
}
}
.hover\:bg-blue-200 {
&:hover {
@media (hover: hover) {
@ -2104,6 +2169,13 @@
}
}
}
.hover\:bg-blue-800 {
&:hover {
@media (hover: hover) {
background-color: var(--color-blue-800);
}
}
}
.hover\:bg-gray-50 {
&:hover {
@media (hover: hover) {
@ -2209,6 +2281,13 @@
}
}
}
.hover\:text-gray-200 {
&:hover {
@media (hover: hover) {
color: var(--color-gray-200);
}
}
}
.hover\:text-gray-500 {
&:hover {
@media (hover: hover) {
@ -2289,6 +2368,11 @@
border-color: var(--color-blue-500);
}
}
.focus\:border-gray-900 {
&:focus {
border-color: var(--color-gray-900);
}
}
.focus\:border-indigo-500 {
&:focus {
border-color: var(--color-indigo-500);
@ -2374,6 +2458,11 @@
--tw-ring-color: var(--color-gray-300);
}
}
.focus\:ring-gray-900 {
&:focus {
--tw-ring-color: var(--color-gray-900);
}
}
.focus\:ring-indigo-500 {
&:focus {
--tw-ring-color: var(--color-indigo-500);
@ -2415,6 +2504,11 @@
position: absolute;
}
}
.sm\:col-span-2 {
@media (width >= 40rem) {
grid-column: span 2 / span 2;
}
}
.sm\:col-span-3 {
@media (width >= 40rem) {
grid-column: span 3 / span 3;
@ -2455,6 +2549,11 @@
display: flex;
}
}
.sm\:grid {
@media (width >= 40rem) {
display: grid;
}
}
.sm\:hidden {
@media (width >= 40rem) {
display: none;
@ -2501,6 +2600,11 @@
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
.sm\:grid-cols-3 {
@media (width >= 40rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.sm\:justify-between {
@media (width >= 40rem) {
justify-content: space-between;
@ -2516,6 +2620,11 @@
justify-content: flex-end;
}
}
.sm\:gap-4 {
@media (width >= 40rem) {
gap: calc(var(--spacing) * 4);
}
}
.sm\:space-x-3 {
@media (width >= 40rem) {
:where(& > :not(:last-child)) {
@ -2566,6 +2675,11 @@
padding: calc(var(--spacing) * 8);
}
}
.sm\:px-0 {
@media (width >= 40rem) {
padding-inline: calc(var(--spacing) * 0);
}
}
.sm\:px-4 {
@media (width >= 40rem) {
padding-inline: calc(var(--spacing) * 4);
@ -2654,6 +2768,11 @@
inset: calc(var(--spacing) * 0);
}
}
.md\:order-1 {
@media (width >= 48rem) {
order: 1;
}
}
.md\:order-2 {
@media (width >= 48rem) {
order: 2;
@ -2754,6 +2873,11 @@
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.md\:flex-row {
@media (width >= 48rem) {
flex-direction: row;
}
}
.md\:items-center {
@media (width >= 48rem) {
align-items: center;
@ -3222,6 +3346,11 @@
padding-inline: calc(var(--spacing) * 0);
}
}
.rtl\:rotate-180 {
&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
rotate: 180deg;
}
}
.rtl\:space-x-reverse {
&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
:where(& > :not(:last-child)) {
@ -3324,6 +3453,11 @@
border-color: var(--color-red-800);
}
}
.dark\:bg-blue-600 {
&:where(.dark, .dark *) {
background-color: var(--color-blue-600);
}
}
.dark\:bg-blue-900 {
&:where(.dark, .dark *) {
background-color: var(--color-blue-900);
@ -3578,6 +3712,15 @@
}
}
}
.dark\:hover\:bg-blue-700 {
&:where(.dark, .dark *) {
&:hover {
@media (hover: hover) {
background-color: var(--color-blue-700);
}
}
}
}
.dark\:hover\:bg-blue-800 {
&:where(.dark, .dark *) {
&:hover {
@ -3693,6 +3836,13 @@
}
}
}
.dark\:focus\:border-gray-900 {
&:where(.dark, .dark *) {
&:focus {
border-color: var(--color-gray-900);
}
}
}
.dark\:focus\:border-green-500 {
&:where(.dark, .dark *) {
&:focus {
@ -3756,6 +3906,13 @@
}
}
}
.dark\:focus\:ring-gray-900 {
&:where(.dark, .dark *) {
&:focus {
--tw-ring-color: var(--color-gray-900);
}
}
}
.dark\:focus\:ring-green-500 {
&:where(.dark, .dark *) {
&:focus {