alexei.dolgolyov
5d79911c12
Re-skin the app into the "Velocity" neo-brutalist direction: acid-lime accent, hard offset shadows, slammed uppercase headlines, rounded brutalist blocks. Light "paper" chassis + a warm-charcoal dark mode, both keeping the lime accent and a constant black appbar; the light/dark toggle is preserved. - Type is Cyrillic-complete (the mockup's Anton/DM Sans/Space Mono are not, and this product is Russian-first): Oswald (display) + Manrope (body) + JetBrains Mono (numerals), loaded via the existing Google Fonts CDN. - app.css: Velocity token palette (light+dark) + brutalist shared components (cards, kicker chips, stat blocks, nav, segmented, sections, anomaly badge); diagonal-hatch texture; electric-blue focus rings. - MarathonTheme + Tokens.cs: Mud palette / typography / radius retargeted so every Mud component follows; appbar black, drawer flipped to paper. - MainLayout + NavBody chrome: black appbar, lime capture chip, paper drawer with brutalist nav blocks (fixes the old white-on-paper brand). - OddsTimeline + SportIcon recoloured to the Velocity palette (chart lines now read on both themes; dropped the off-brand purple sport hue). Foundations only — build clean, all 568 tests green. Page-level polish (Results winner colours, bespoke page styles) rolls out next.
79 lines
3.1 KiB
Plaintext
79 lines
3.1 KiB
Plaintext
@*
|
|
SportIcon — minimal, distinctive inline-SVG icons per sport. Inline (not
|
|
icon library) so the wordmark stays editorial-quant: thin strokes, sharp
|
|
corners, no shadowing. Coverage matches Phase 0 spike findings:
|
|
Basketball=6, Football=11, Tennis=22723, Hockey=43658.
|
|
*@
|
|
|
|
<span class="m-sport @ClassName" role="img" aria-label="@Label" title="@Label" data-sport="@Code">
|
|
@SvgContent
|
|
</span>
|
|
|
|
<style>
|
|
.m-sport {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--m-sport-size, 18px);
|
|
height: var(--m-sport-size, 18px);
|
|
color: var(--m-sport-color, var(--m-c-ink-soft));
|
|
flex: 0 0 auto;
|
|
}
|
|
.m-sport svg { width: 100%; height: 100%; display: block; }
|
|
.m-sport[data-sport="6"] { color: #ff8a00; } /* basketball — amber */
|
|
.m-sport[data-sport="11"] { color: #1f9e3d; } /* football — green */
|
|
.m-sport[data-sport="22723"] { color: #0d9488; } /* tennis — teal */
|
|
.m-sport[data-sport="43658"] { color: #244bff; } /* hockey — electric blue */
|
|
[data-theme="dark"] .m-sport { filter: brightness(1.1); }
|
|
</style>
|
|
|
|
@code {
|
|
[Parameter, EditorRequired] public int Code { get; set; }
|
|
[Parameter] public string? Label { get; set; }
|
|
[Parameter] public string? ClassName { get; set; }
|
|
|
|
private MarkupString SvgContent => new(GetSvg(Code));
|
|
|
|
private static string GetSvg(int code) => code switch
|
|
{
|
|
6 => Basketball,
|
|
11 => Football,
|
|
22723 => Tennis,
|
|
43658 => Hockey,
|
|
_ => Generic,
|
|
};
|
|
|
|
// SVG glyphs — single-quote attributes so the entire literal can stay on one line.
|
|
private const string Basketball =
|
|
"<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'>" +
|
|
"<circle cx='12' cy='12' r='9' />" +
|
|
"<path d='M3 12h18 M12 3v18 M5 5c4 4 10 4 14 0 M5 19c4-4 10-4 14 0' />" +
|
|
"</svg>";
|
|
|
|
private const string Football =
|
|
"<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linejoin='round'>" +
|
|
"<circle cx='12' cy='12' r='9' />" +
|
|
"<polygon points='12,7 16.5,10 14.5,15 9.5,15 7.5,10' />" +
|
|
"</svg>";
|
|
|
|
private const string Tennis =
|
|
"<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'>" +
|
|
"<circle cx='12' cy='12' r='9' />" +
|
|
"<path d='M3.5 9 C 9 9 15 15 20.5 15' />" +
|
|
"<path d='M3.5 15 C 9 15 15 9 20.5 9' />" +
|
|
"</svg>";
|
|
|
|
private const string Hockey =
|
|
"<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'>" +
|
|
"<ellipse cx='12' cy='14' rx='8' ry='3' />" +
|
|
"<path d='M4 14 L4 11 M20 14 L20 11' />" +
|
|
"<path d='M6 7 L18 4' />" +
|
|
"</svg>";
|
|
|
|
private const string Generic =
|
|
"<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'>" +
|
|
"<circle cx='12' cy='12' r='9' />" +
|
|
"<circle cx='12' cy='12' r='3' />" +
|
|
"</svg>";
|
|
}
|