Add @layer

This commit is contained in:
Kalle 2026-03-08 06:47:10 +02:00
parent 97ddeca217
commit 866f93954c
11 changed files with 1945 additions and 1927 deletions

View File

@ -55,7 +55,7 @@ export function GearSelect<Clearable extends boolean | undefined = undefined>({
>
{({ key, items: gear, brandId, idx }) => (
<SendouSelectItemSection
className={idx === 0 ? "pt-0-5-forced" : undefined}
className={idx === 0 ? "pt-0-5" : undefined}
heading={t(`game-misc:BRAND_${brandId}` as any)}
headingImgPath={brandImageUrl(brandId)}
key={key}

View File

@ -32,7 +32,7 @@ export const Main = ({
classNameOverwrite
? clsx(classNameOverwrite, {
[styles.narrow]: halfWidth,
"pt-8-forced": showLeaderboard,
"pt-8": showLeaderboard,
})
: clsx(
styles.main,
@ -40,7 +40,7 @@ export const Main = ({
{
[styles.narrow]: halfWidth,
[styles.wide]: bigger,
"pt-8-forced": showLeaderboard,
"pt-8": showLeaderboard,
},
className,
)

View File

@ -139,7 +139,7 @@ export function WeaponSelect<
? specialWeaponImageUrl(TRIZOOKA_ID)
: weaponCategoryUrl(name)
}
className={idx === 0 ? "pt-0-5-forced" : undefined}
className={idx === 0 ? "pt-0-5" : undefined}
key={key}
>
{weapons.map(({ weapon, name }) => (

View File

@ -238,7 +238,7 @@ function MatchRow({
>
<div
className={clsx(styles.matchSeed, {
"text-lighter-important italic opaque": simulated,
"text-lighter italic opaque": simulated,
[styles.matchSeedWide]: isBigSeedNumber,
})}
>

View File

@ -1046,7 +1046,7 @@ function FillRoster({
) : null}
</section>
{tournament.ctx.settings.requireInGameNames ? (
<div className={clsx(styles.sectionWarning, "text-warning-important")}>
<div className={clsx(styles.sectionWarning, "text-warning")}>
Note that you are expected to use the in-game names as listed above.
Playing in the event with a different name or using the alias feature
might result in disqualification.

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -1,214 +1,217 @@
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
@layer reset {
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
/*
Document
========
*/
/**
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: border-box;
}
/**
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/
html {
font-family:
system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji"; /* 1 */
line-height: 1.15; /* 2 */
-webkit-text-size-adjust: 100%; /* 3 */
tab-size: 4; /* 4 */
}
html {
font-family:
system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji"; /* 1 */
line-height: 1.15; /* 2 */
-webkit-text-size-adjust: 100%; /* 3 */
tab-size: 4; /* 4 */
}
/*
/*
Sections
========
*/
/**
/**
Remove the margin in all browsers.
*/
body {
margin: 0;
}
body {
margin: 0;
}
/*
/*
Text-level semantics
====================
*/
/**
/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
font-weight: bolder;
}
b,
strong {
font-weight: bolder;
}
/**
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family:
ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
font-size: 1em; /* 2 */
}
code,
kbd,
samp,
pre {
font-family:
ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
/**
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
small {
font-size: 80%;
}
/**
/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
sup {
top: -0.5em;
}
/*
/*
Tabular data
============
*/
/**
/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
border-color: currentcolor;
}
table {
border-color: currentcolor;
}
/*
/*
Forms
=====
*/
/**
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
appearance: button;
-webkit-appearance: button;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
appearance: button;
-webkit-appearance: button;
}
/**
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
padding: 0;
}
legend {
padding: 0;
}
/**
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
progress {
vertical-align: baseline;
}
/**
/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type="search"] {
appearance: textfield; /* 1 */
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
[type="search"] {
appearance: textfield; /* 1 */
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
/*
Interactive
===========
*/
/*
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
summary {
display: list-item;
}
}

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,8 @@
/*
@layer reset, base, components, utilities;
/*
Make sure to read styles.md before editing colors in this file,
Make sure to read styles.md before editing colors in this file,
it contains important information about how the styles work and how to edit them properly
*/

View File

@ -19,6 +19,20 @@ export default defineConfig(({ mode }) => {
},
},
plugins: [
{
// Wraps CSS modules in @layer components so utility classes always win.
// The layer order declaration is prepended to each module because in Vite
// dev mode, module <style> tags are injected before global stylesheets —
// without it the implicit first @layer components would get lowest priority.
name: "css-modules-layer",
enforce: "pre",
transform(code, id) {
if (!id.endsWith(".module.css")) return;
return {
code: `@layer reset, base, components, utilities;\n@layer components {\n${code}\n}`,
};
},
},
reactRouter(),
babel({
filter: /\.[jt]sx?$/,