Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-27 21:58:08 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Recolor splatter/special ready

Browse Source
This commit is contained in:
Kalle
2026-09-25 07:11:02 +03:00
parent 7316735e3c
commit ac298a052e
5 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/GameTimeline.module.css
View File

@@ -101,11 +101,11 @@
.readoutStatusLabel {
&.statusLabelDead {
color: var(--color-error);
color: var(--color-chart-splatted);
}
&.statusLabelSpecial {
color: var(--color-info);
color: var(--color-chart-special);
}
}

9
app/components/ObjectiveTimeline.tsx
View File

@@ -138,8 +138,8 @@ export function ObjectiveTimeline({
y: lastScore === null ? null : lastScore + (penalties[i] ?? 0),
};
}),
borderColor: `${teamColors[side]}8c`,
backgroundColor: `${teamColors[side]}38`,
borderColor: withAlpha(teamColors[side], 0.55),
backgroundColor: withAlpha(teamColors[side], 0.22),
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 0,
@@ -268,6 +268,11 @@ function gridColor(
return value === 0 ? colors.borderHigh : colors.border;
}
/** `oklch(64% 0.16 10)` → `oklch(64% 0.16 10 / 0.55)` */
function withAlpha(oklchColor: string, alpha: number) {
return oklchColor.replace(/\)$/, ` / ${alpha})`);
}
/** the match timer's M:SS (215 → "3:35") */
function formatClock(seconds: number): string {
const minutes = Math.floor(seconds / 60);

10
app/components/PlayerStatusTimeline.module.css
View File

@@ -29,11 +29,11 @@
}
.legendSwatchDead {
background-color: var(--color-error);
background-color: var(--color-chart-splatted);
}
.legendSwatchSpecial {
background-color: var(--color-info);
background-color: var(--color-chart-special);
}
.team {
@@ -80,13 +80,11 @@
}
.spanDead {
background-color: var(--color-error);
opacity: 0.75;
background-color: var(--color-chart-splatted);
}
.spanSpecial {
background-color: var(--color-info);
opacity: 0.75;
background-color: var(--color-chart-special);
}
.unknownWeapon {

4
app/features/components-showcase/routes/components.colors.tsx
View File

@@ -353,6 +353,10 @@ const REFERENCE = [
tokens: ["--color-chart-alpha", "--color-chart-bravo"],
use: "The two sides in charts and timelines",
},
{
tokens: ["--color-chart-splatted", "--color-chart-special"],
use: "Player states in timelines, kept apart from the side colors",
},
] as const;
export default function ComponentsColorsPage() {

12
app/styles/vars.css
View File

@@ -160,8 +160,10 @@ html.dark [data-custom-theme],
--color-error: oklch(65% 0.25 10);
--color-error-high: oklch(87% 0.07 10);
--color-chart-alpha: #da5b76;
--color-chart-bravo: #6572e4;
--color-chart-alpha: oklch(64% 0.16 10);
--color-chart-bravo: oklch(60% 0.17 275);
--color-chart-splatted: oklch(66% 0.03 var(--_base-h));
--color-chart-special: oklch(80% 0.14 84);
/* inlined instead of var() because data URIs can't read custom properties: keep in sync with --color-text-high */
--field-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 139, 183)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@@ -226,8 +228,10 @@ html.light [data-custom-theme],
--color-error: oklch(65.223% 0.22164 5.216);
--color-error-high: oklch(41.268% 0.15511 8.446);
--color-chart-alpha: #b82851;
--color-chart-bravo: #4246c2;
--color-chart-alpha: oklch(52% 0.18 10);
--color-chart-bravo: oklch(47% 0.19 275);
--color-chart-splatted: oklch(50% 0.03 var(--_base-h));
--color-chart-special: oklch(67% 0.14 72);
/* inlined instead of var() because data URIs can't read custom properties: keep in sync with --color-text-high */
--field-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(72, 87, 124)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");