mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-10-07 18:48:38 -05:00
151 lines
2.4 KiB
CSS
151 lines
2.4 KiB
CSS
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-2);
|
|
height: 300px;
|
|
background-color: var(--color-bg-high);
|
|
border-radius: var(--radius-box);
|
|
padding: var(--s-2-5) var(--s-3);
|
|
}
|
|
|
|
.legend {
|
|
display: flex;
|
|
gap: var(--s-4);
|
|
justify-content: center;
|
|
font-size: var(--font-xs);
|
|
font-weight: var(--weight-semi);
|
|
color: var(--color-text-high);
|
|
}
|
|
|
|
.legendItem {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-1);
|
|
}
|
|
|
|
.swatch {
|
|
flex-shrink: 0;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
background-color: currentColor;
|
|
}
|
|
|
|
.alpha {
|
|
color: var(--color-chart-alpha);
|
|
}
|
|
|
|
.bravo {
|
|
color: var(--color-chart-bravo);
|
|
}
|
|
|
|
/* the SVG is sized to this box so the plot spans its full width, aligned with sibling timelines */
|
|
.plot {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.chart {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
|
|
&.interactive {
|
|
cursor: crosshair;
|
|
touch-action: pan-y;
|
|
}
|
|
}
|
|
|
|
.gridLine {
|
|
stroke: color-mix(in oklch, var(--color-text) 8%, transparent);
|
|
stroke-width: 1;
|
|
|
|
&.gridLineDashed {
|
|
stroke-dasharray: 3 4;
|
|
}
|
|
|
|
&.gridLineZero {
|
|
stroke: color-mix(in oklch, var(--color-text) 25%, transparent);
|
|
}
|
|
}
|
|
|
|
.label {
|
|
font-size: 10px;
|
|
font-weight: var(--weight-semi);
|
|
fill: var(--color-text-high);
|
|
}
|
|
|
|
.scoreLine {
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.penaltyBand {
|
|
fill: currentColor;
|
|
fill-opacity: 0.22;
|
|
}
|
|
|
|
.penaltyEdge {
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-opacity: 0.55;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.controlLane {
|
|
stroke: currentColor;
|
|
stroke-width: 6;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.hoverLine {
|
|
stroke: color-mix(in oklch, var(--color-text) 30%, transparent);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.dot {
|
|
fill: currentColor;
|
|
stroke: var(--color-bg-high);
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-0-5);
|
|
translate: 0 -50%;
|
|
padding: var(--s-1) var(--s-2);
|
|
background-color: var(--color-bg);
|
|
border: var(--border-style);
|
|
border-radius: var(--radius-box);
|
|
font-size: var(--font-xs);
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tooltipTitle {
|
|
font-weight: var(--weight-semi);
|
|
color: var(--color-text-high);
|
|
}
|
|
|
|
.tooltipRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-1-5);
|
|
font-variant-numeric: tabular-nums;
|
|
|
|
& .swatch {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
}
|