added match preview and analysis

This commit is contained in:
2026-03-06 22:08:41 +11:00
parent b957df8d32
commit f5c9e70edf
6 changed files with 1473 additions and 8 deletions

View File

@@ -35,6 +35,8 @@
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-5xl: 3rem;
--text-5xl--line-height: 1;
--text-6xl: 3.75rem;
--text-6xl--line-height: 1;
--text-9xl: 8rem;
@@ -47,6 +49,7 @@
--tracking-tight: -0.025em;
--tracking-wider: 0.05em;
--leading-relaxed: 1.625;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
@@ -450,6 +453,9 @@
.h-3 {
height: calc(var(--spacing) * 3);
}
.h-3\.5 {
height: calc(var(--spacing) * 3.5);
}
.h-4 {
height: calc(var(--spacing) * 4);
}
@@ -459,9 +465,15 @@
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-9 {
height: calc(var(--spacing) * 9);
}
.h-12 {
height: calc(var(--spacing) * 12);
}
.h-14 {
height: calc(var(--spacing) * 14);
}
.h-16 {
height: calc(var(--spacing) * 16);
}
@@ -510,6 +522,9 @@
.w-3 {
width: calc(var(--spacing) * 3);
}
.w-3\.5 {
width: calc(var(--spacing) * 3.5);
}
.w-4 {
width: calc(var(--spacing) * 4);
}
@@ -519,18 +534,30 @@
.w-6 {
width: calc(var(--spacing) * 6);
}
.w-8 {
width: calc(var(--spacing) * 8);
}
.w-9 {
width: calc(var(--spacing) * 9);
}
.w-10 {
width: calc(var(--spacing) * 10);
}
.w-12 {
width: calc(var(--spacing) * 12);
}
.w-14 {
width: calc(var(--spacing) * 14);
}
.w-20 {
width: calc(var(--spacing) * 20);
}
.w-26 {
width: calc(var(--spacing) * 26);
}
.w-28 {
width: calc(var(--spacing) * 28);
}
.w-48 {
width: calc(var(--spacing) * 48);
}
@@ -636,6 +663,9 @@
.animate-spin {
animation: var(--animate-spin);
}
.cursor-default {
cursor: default;
}
.cursor-grab {
cursor: grab;
}
@@ -729,6 +759,13 @@
.gap-8 {
gap: calc(var(--spacing) * 8);
}
.space-y-0 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-0\.5 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
@@ -743,6 +780,13 @@
margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-1\.5 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
}
}
.space-y-2 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
@@ -867,6 +911,9 @@
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-md {
border-radius: var(--radius-md);
}
.rounded-xl {
border-radius: var(--radius-xl);
}
@@ -1012,6 +1059,12 @@
.bg-green {
background-color: var(--green);
}
.bg-green\/10 {
background-color: var(--green);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--green) 10%, transparent);
}
}
.bg-green\/20 {
background-color: var(--green);
@supports (color: color-mix(in lab, red, red)) {
@@ -1030,6 +1083,18 @@
.bg-mauve {
background-color: var(--mauve);
}
.bg-overlay0\/10 {
background-color: var(--overlay0);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--overlay0) 10%, transparent);
}
}
.bg-overlay0\/20 {
background-color: var(--overlay0);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--overlay0) 20%, transparent);
}
}
.bg-peach {
background-color: var(--peach);
}
@@ -1039,6 +1104,12 @@
background-color: color-mix(in oklab, var(--peach) 5%, transparent);
}
}
.bg-peach\/10 {
background-color: var(--peach);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--peach) 10%, transparent);
}
}
.bg-peach\/20 {
background-color: var(--peach);
@supports (color: color-mix(in lab, red, red)) {
@@ -1060,12 +1131,24 @@
background-color: color-mix(in oklab, var(--red) 10%, transparent);
}
}
.bg-red\/15 {
background-color: var(--red);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--red) 15%, transparent);
}
}
.bg-red\/20 {
background-color: var(--red);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--red) 20%, transparent);
}
}
.bg-red\/30 {
background-color: var(--red);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--red) 30%, transparent);
}
}
.bg-sapphire {
background-color: var(--sapphire);
}
@@ -1123,6 +1206,9 @@
.p-8 {
padding: calc(var(--spacing) * 8);
}
.px-1 {
padding-inline: calc(var(--spacing) * 1);
}
.px-1\.5 {
padding-inline: calc(var(--spacing) * 1.5);
}
@@ -1156,6 +1242,9 @@
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.py-2\.5 {
padding-block: calc(var(--spacing) * 2.5);
}
.py-3 {
padding-block: calc(var(--spacing) * 3);
}
@@ -1189,6 +1278,9 @@
.pr-2 {
padding-right: calc(var(--spacing) * 2);
}
.pr-4 {
padding-right: calc(var(--spacing) * 4);
}
.pr-10 {
padding-right: calc(var(--spacing) * 10);
}
@@ -1204,6 +1296,9 @@
.pl-3 {
padding-left: calc(var(--spacing) * 3);
}
.pl-4 {
padding-left: calc(var(--spacing) * 4);
}
.text-center {
text-align: center;
}
@@ -1228,6 +1323,10 @@
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-5xl {
font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--text-5xl--line-height));
}
.text-9xl {
font-size: var(--text-9xl);
line-height: var(--tw-leading, var(--text-9xl--line-height));
@@ -1544,6 +1643,12 @@
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
}
.last\:border-b-0 {
&:last-child {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 0px;
}
}
.hover\:-translate-y-0\.5 {
&:hover {
@media (hover: hover) {
@@ -2026,6 +2131,11 @@
width: calc(var(--spacing) * 10);
}
}
.sm\:w-36 {
@media (width >= 40rem) {
width: calc(var(--spacing) * 36);
}
}
.sm\:w-auto {
@media (width >= 40rem) {
width: auto;
@@ -2098,6 +2208,16 @@
gap: calc(var(--spacing) * 2);
}
}
.sm\:gap-8 {
@media (width >= 40rem) {
gap: calc(var(--spacing) * 8);
}
}
.sm\:gap-10 {
@media (width >= 40rem) {
gap: calc(var(--spacing) * 10);
}
}
.sm\:p-6 {
@media (width >= 40rem) {
padding: calc(var(--spacing) * 6);
@@ -2128,12 +2248,30 @@
text-align: left;
}
}
.sm\:text-2xl {
@media (width >= 40rem) {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
}
.sm\:text-4xl {
@media (width >= 40rem) {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
}
.sm\:text-6xl {
@media (width >= 40rem) {
font-size: var(--text-6xl);
line-height: var(--tw-leading, var(--text-6xl--line-height));
}
}
.sm\:text-xl {
@media (width >= 40rem) {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
}
.md\:col-span-2 {
@media (width >= 48rem) {
grid-column: span 2 / span 2;