Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-11 05:36:10 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Font size, font weight, and line height vars

Browse Source
This commit is contained in:
hfcRed
2026-01-21 16:36:26 +01:00
parent 9fa02f416d
commit ff439b40d9
101 changed files with 731 additions and 758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/Alert.module.css
View File

@@ -6,8 +6,8 @@
border-radius: var(--radius-box);
background-color: var(--color-info-low);
color: var(--color-info-high);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
gap: var(--s-2);
margin-inline: auto;
padding-block: var(--s-1-5);
@@ -20,7 +20,7 @@
}
.tiny {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
& > svg {
height: 1.25rem;

14
app/components/BuildCard.module.css
View File

@@ -15,7 +15,7 @@
.privateText {
display: flex;
justify-content: center;
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
gap: var(--s-1);
}
@@ -27,9 +27,9 @@
.title {
overflow: hidden;
height: 2.5rem;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
line-height: 1.25;
word-wrap: break-all;
word-wrap: break-word;
}
.topRow {
@@ -39,7 +39,7 @@
.dateAuthorRow {
display: flex;
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
gap: var(--s-1);
}
@@ -79,8 +79,8 @@
.weaponText {
padding-left: var(--s-1);
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
}
.weapons {
@@ -121,5 +121,5 @@
}
.smallText {
font-size: var(--fonts-xxs) !important;
font-size: var(--font-2xs) !important;
}

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

@@ -10,8 +10,8 @@
border-radius: var(--radius-box);
background-color: var(--color-bg);
padding: var(--s-1) var(--s-2);
font-weight: var(--semi-bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-semi);
font-size: var(--font-sm);
display: flex;
flex-direction: column;
gap: var(--s-1);

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

@@ -3,7 +3,7 @@
width: 100%;
align-items: center;
color: var(--color-text-accent);
font-size: var(--fonts-lg);
font-size: var(--font-lg);
text-align: center;
&::before,
@@ -24,5 +24,5 @@
}
.smallText {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}

2
app/components/FormErrors.module.css
View File

@@ -1,5 +1,5 @@
.container {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
& > h4 {
color: var(--color-error);

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

@@ -1,14 +1,14 @@
.error {
display: block;
color: var(--color-error);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
margin-block-start: var(--label-margin);
}
.info {
display: block;
color: var(--color-text-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
margin-block-start: var(--label-margin);
}

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

@@ -3,7 +3,7 @@
border-radius: 100%;
background-color: transparent;
color: var(--color-text);
font-size: var(--fonts-md);
font-size: var(--font-md);
padding: var(--s-0-5);
width: calc(var(--field-size) * 0.7);
height: calc(var(--field-size) * 0.7);
@@ -20,5 +20,5 @@
.triggerTiny {
width: var(--field-size-xs);
height: var(--field-size-xs);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}

7
app/components/Input.module.css
View File

@@ -1,8 +1,7 @@
.container {
display: flex;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
outline: none;
line-height: var(--field-line-height);
border: var(--border-style);
border-radius: var(--radius-field);
background-color: var(--color-bg);
@@ -53,8 +52,8 @@
border-radius: var(--radius-field) 0 0 var(--radius-field);
background-color: var(--color-bg-high);
color: var(--color-text-high);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
padding-inline: var(--s-2);
place-items: center;
white-space: nowrap;

2
app/components/Label.module.css
View File

@@ -11,7 +11,7 @@
.value {
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
margin-block-start: -5px;
}

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

@@ -25,8 +25,8 @@
justify-content: space-between;
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
gap: var(--s-2);
padding-block: var(--s-1-5);
padding-inline: var(--s-3);

44
app/components/MobileNav.module.css
View File

@@ -35,8 +35,8 @@
border: none;
border-radius: var(--radius-field);
color: var(--color-text-high);
font-size: var(--fonts-xxxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
cursor: pointer;
text-decoration: none;
transition: color 0.15s;
@@ -158,8 +158,8 @@
}
.panelTitle {
font-size: var(--fonts-md);
font-weight: var(--bold);
font-size: var(--font-md);
font-weight: var(--weight-bold);
color: var(--color-text);
}
@@ -201,8 +201,8 @@
}
.menuTitle {
font-size: var(--fonts-md);
font-weight: var(--bold);
font-size: var(--font-md);
font-weight: var(--weight-bold);
color: var(--color-text);
}
@@ -231,8 +231,8 @@
}
.streamsSectionHeader h3 {
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
margin: 0;
}
@@ -265,7 +265,7 @@
}
.streamItemName {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
@@ -279,7 +279,7 @@
}
.streamItemSubtitle {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
color: var(--color-text-high);
overflow: hidden;
text-overflow: ellipsis;
@@ -287,8 +287,8 @@
}
.streamItemBadge {
font-size: var(--fonts-xxxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
color: var(--color-text-inverse);
background-color: var(--color-text-accent);
padding: 0 var(--s-1);
@@ -312,8 +312,8 @@
gap: var(--s-1);
text-decoration: none;
color: var(--color-text);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
text-align: center;
}
@@ -352,8 +352,8 @@
}
.youPanelUsername {
font-size: var(--fonts-md);
font-weight: var(--bold);
font-size: var(--font-md);
font-weight: var(--weight-bold);
}
.youPanelSettingsButton {
@@ -383,8 +383,8 @@
.dayHeader {
padding: var(--s-2) var(--s-2) var(--s-1);
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
color: var(--color-text-high);
text-transform: uppercase;
letter-spacing: 0.05em;
@@ -401,8 +401,8 @@
}
.weaponsSectionTitle {
font-size: var(--fonts-sm);
font-weight: var(--bold);
font-size: var(--font-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
margin: 0 0 var(--s-3);
}
@@ -420,8 +420,8 @@
}
.weaponCategoryHeader {
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.05em;

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

@@ -28,8 +28,8 @@
}
.pageCount {
font-size: var(--fonts-sm);
font-weight: var(--bold);
font-size: var(--font-sm);
font-weight: var(--weight-bold);
color: var(--color-accent);
}

2
app/components/Section.module.css
View File

@@ -7,6 +7,6 @@
& > h2 {
color: var(--color-text-high);
font-size: var(--fonts-md);
font-size: var(--font-md);
}
}

22
app/components/SideNav.module.css
View File

@@ -58,8 +58,8 @@
gap: var(--s-2);
color: var(--color-text);
text-decoration: none;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
border-radius: var(--radius-field);
padding: var(--s-1);
margin-left: calc(-1 * var(--s-1));
@@ -156,8 +156,8 @@
text-decoration: none;
color: var(--color-text);
border-top: 1.5px solid var(--color-border);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
flex-shrink: 0;
border-radius: 0;
}
@@ -209,8 +209,8 @@
}
.sideNavHeader h2 {
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
}
.sideNavHeaderClose {
@@ -229,7 +229,7 @@
}
.sideNavLink {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text);
text-decoration: none;
padding: var(--s-1) var(--s-2);
@@ -251,7 +251,7 @@
&[aria-current="page"] {
color: var(--color-text);
background-color: var(--color-bg-higher);
font-weight: 600;
font-weight: var(--weight-bold);
}
}
@@ -289,7 +289,7 @@
}
.sideNavLinkSubtitle {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
color: var(--color-text-high);
overflow: hidden;
text-overflow: ellipsis;
@@ -298,8 +298,8 @@
.sideNavLinkBadge {
margin-left: auto;
font-size: var(--fonts-xxxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
color: var(--color-text-inverse);
background-color: var(--color-text-accent);
padding: 0 var(--s-1);

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

@@ -30,13 +30,13 @@
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
cursor: pointer;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
text-align: center;
white-space: nowrap;
}
.linkSecondary {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
padding: var(--s-0-5) var(--s-2);
background-color: var(--color-bg-high);
}

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

@@ -8,12 +8,12 @@
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
text-align: left;
border-color: var(--color-border);
& > thead {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
}
& tbody tr:hover {

11
app/components/elements/Button.module.css
View File

@@ -9,9 +9,8 @@
background: var(--color-text-accent);
color: var(--color-text-inverse);
cursor: pointer;
font-size: var(--fonts-sm);
font-weight: var(--bold);
line-height: var(--field-line-height);
font-size: var(--font-sm);
font-weight: var(--weight-bold);
padding: 0 var(--field-padding);
user-select: none;
outline-color: var(--color-text-accent);
@@ -58,17 +57,17 @@
}
.small {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
height: var(--field-size-sm);
}
.miniscule {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
height: var(--field-size-xs);
}
.big {
font-size: var(--fonts-md);
font-size: var(--font-md);
height: var(--field-size-lg);
}

4
app/components/elements/Calendar.module.css
View File

@@ -16,7 +16,7 @@
}
.heading {
font-size: var(--fonts-lg);
font-size: var(--font-lg);
}
.navButton {
@@ -47,7 +47,7 @@
.cell {
display: grid;
place-items: center;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
padding: var(--s-1-5);
width: 35px;
height: 35px;

2
app/components/elements/Dialog.module.css
View File

@@ -90,5 +90,5 @@
}
.heading {
font-size: var(--fonts-lg);
font-size: var(--font-lg);
}

4
app/components/elements/Label.module.css
View File

@@ -1,6 +1,6 @@
.label {
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
margin-block-end: var(--label-margin);
display: block;
}

10
app/components/elements/Menu.module.css
View File

@@ -3,8 +3,8 @@
background-color: var(--color-bg-high);
border: var(--border-style);
width: max-content;
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding: var(--s-2);
}
@@ -30,8 +30,8 @@
.item {
display: flex;
align-items: center;
font-weight: var(--bold);
font-size: var(--fonts-xs);
font-weight: var(--weight-bold);
font-size: var(--font-xs);
color: var(--color-text);
white-space: nowrap;
gap: var(--s-2);
@@ -56,7 +56,7 @@
.itemSelected {
background-color: var(--color-text-accent);
font-weight: var(--extra-bold);
font-weight: var(--weight-extra);
}
.itemActive {

4
app/components/elements/Popover.module.css
View File

@@ -3,8 +3,8 @@
padding: var(--s-2);
border: var(--border-style);
border-radius: var(--radius-box);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
white-space: pre-wrap;
background-color: var(--color-bg);
}

22
app/components/elements/Select.module.css
View File

@@ -69,8 +69,8 @@
}
.item {
font-size: var(--fonts-xsm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding: var(--s-1-5);
border-radius: var(--radius-field);
white-space: nowrap;
@@ -89,7 +89,7 @@
.itemSelected {
color: var(--color-text-accent);
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
.searchField {
@@ -109,8 +109,8 @@
.searchInput {
all: unset;
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
letter-spacing: 0.5px;
flex: 1;
}
@@ -139,8 +139,8 @@
}
.noResults {
font-size: var(--fonts-md);
font-weight: var(--bold);
font-size: var(--font-md);
font-weight: var(--weight-bold);
text-align: center;
padding-block: var(--s-8);
color: var(--color-text-high);
@@ -152,8 +152,8 @@
}
.label {
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
margin-block-end: var(--label-margin);
display: block;
}
@@ -168,10 +168,10 @@
display: flex;
align-items: center;
gap: var(--s-2);
font-weight: bold;
font-weight: var(--weight-extra);
color: var(--color-text-high);
text-transform: uppercase;
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
padding-block-start: var(--s-2-5);
padding-block-end: var(--s-1);
padding-inline: var(--s-1-5);

4
app/components/elements/Switch.module.css
View File

@@ -8,8 +8,8 @@
gap: 0.571rem;
color: var(--text-color);
forced-color-adjust: none;
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
margin-block-end: 0;
}

2
app/components/elements/Tabs.module.css
View File

@@ -50,7 +50,7 @@
.tabButton {
background-color: transparent;
border: none;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
border-radius: 0;
border-bottom: 2px solid transparent;
color: var(--color-text-high);

6
app/components/elements/Toast.module.css
View File

@@ -14,8 +14,8 @@
padding: var(--s-1-5) var(--s-3);
align-items: center;
justify-content: center;
font-size: var(--fonts-xsm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
gap: var(--s-1);
border: 2px solid var(--color-info);
width: 250px;
@@ -47,7 +47,7 @@
display: flex;
text-transform: uppercase;
color: var(--color-info-high);
font-size: var(--fonts-xxsm);
font-size: var(--font-xs);
gap: var(--s-2);
align-items: center;
margin-block-end: var(--s-1-5);

10
app/components/elements/TournamentSearch.module.css
View File

@@ -1,6 +1,6 @@
.item {
font-size: var(--fonts-xsm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding: var(--s-1-5);
border-radius: var(--radius-field);
height: 33px;
@@ -44,8 +44,8 @@ button:disabled .selectValue {
}
.placeholder {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
color: var(--color-text-high);
text-align: center;
display: grid;
@@ -55,7 +55,7 @@ button:disabled .selectValue {
}
.itemAdditionalText {
font-size: var(--fonts-xxsm);
font-size: var(--font-xs);
color: var(--color-text-high);
}

10
app/components/elements/UserSearch.module.css
View File

@@ -1,6 +1,6 @@
.item {
font-size: var(--fonts-xsm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding: var(--s-1-5);
border-radius: var(--radius-field);
height: 33px;
@@ -36,8 +36,8 @@ button:disabled .selectValue {
}
.placeholder {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
color: var(--color-text-high);
text-align: center;
display: grid;
@@ -47,7 +47,7 @@ button:disabled .selectValue {
}
.itemAdditionalText {
font-size: var(--fonts-xxsm);
font-size: var(--font-xs);
color: var(--color-text-high);
}

14
app/components/layout/CommandPalette.module.css
View File

@@ -7,7 +7,7 @@
border-radius: var(--radius-field);
background-color: var(--color-bg);
color: var(--color-text-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
cursor: pointer;
height: var(--field-size-sm);
transition: background-color 0.15s;
@@ -36,7 +36,7 @@
.searchKbd {
padding: 2px var(--s-1);
border-radius: var(--radius-field);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
background-color: var(--color-bg-higher);
font-family: inherit;
}
@@ -102,7 +102,7 @@
border-bottom: 1px solid var(--color-border);
border-radius: 0;
background: transparent;
font-size: var(--fonts-md);
font-size: var(--font-md);
color: var(--color-text);
height: auto;
@@ -127,7 +127,7 @@
padding: var(--s-2) var(--s-3);
border-radius: var(--radius-field);
cursor: pointer;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
outline: none;
}
@@ -160,7 +160,7 @@
gap: var(--s-1);
padding: var(--s-1) var(--s-2);
border-radius: var(--radius-field);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
cursor: pointer;
border: 1px solid var(--color-border);
background-color: var(--color-bg);
@@ -208,7 +208,7 @@
}
.resultSecondary {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
overflow: hidden;
text-overflow: ellipsis;
@@ -224,7 +224,7 @@
padding: var(--s-8);
text-align: center;
color: var(--color-text-high);
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}
@media screen and (max-width: 1000px) {

14
app/components/layout/Footer.module.css
View File

@@ -11,7 +11,7 @@
.linkList {
display: flex;
justify-content: space-evenly;
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
}
.socials {
@@ -32,7 +32,7 @@
border-radius: var(--radius-box);
background-color: var(--color-bg-higher);
cursor: pointer;
font-size: var(--fonts-lg);
font-size: var(--font-lg);
}
.socialIcon {
@@ -49,15 +49,15 @@
}
.socialHeader > p {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
}
.patronTitle {
display: flex;
align-items: flex-end;
justify-content: center;
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
gap: var(--s-2);
}
@@ -68,7 +68,7 @@
justify-content: center;
padding: 0;
margin: 0 auto;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
gap: var(--s-1);
list-style: none;
margin-block-start: var(--s-2);
@@ -86,7 +86,7 @@
display: flex;
flex-direction: column;
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
text-align: center;
}

2
app/components/layout/NavDialog.module.css
View File

@@ -40,7 +40,7 @@
flex-direction: column;
align-items: center;
color: var(--color-text);
font-weight: bold;
font-weight: var(--weight-extra);
gap: var(--s-1);
text-align: center;
width: 100px;

4
app/components/layout/NotificationPopover.module.css
View File

@@ -24,7 +24,7 @@
.header {
display: flex;
align-items: center;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
padding-inline: var(--s-1);
padding-bottom: var(--s-1);
gap: var(--s-1);
@@ -38,7 +38,7 @@
.noNotifications {
display: grid;
place-items: center;
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
color: var(--color-text-high);
margin-block-start: 65px;
}

12
app/components/layout/TopNavMenus.module.css
View File

@@ -13,8 +13,8 @@
border-radius: var(--radius-field);
background: transparent;
color: var(--color-text);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
cursor: pointer;
white-space: nowrap;
}
@@ -41,8 +41,8 @@
padding: var(--s-1-5) var(--s-2);
border-radius: var(--radius-field);
color: var(--color-text);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
text-decoration: none;
transition:
background-color 0.15s,
@@ -78,8 +78,8 @@
}
.weaponCategoryHeader {
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.05em;

4
app/components/layout/UserItem.module.css
View File

@@ -25,8 +25,8 @@
background-color: transparent;
color: inherit;
cursor: pointer;
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
gap: var(--s-2);
text-decoration: none;
}

20
app/components/layout/index.module.css
View File

@@ -11,7 +11,7 @@
gap: var(--s-3);
border-bottom: 1.5px solid var(--color-border);
background-color: var(--color-bg);
font-weight: bold;
font-weight: var(--weight-extra);
padding-inline: var(--s-4);
position: sticky;
top: 0;
@@ -33,8 +33,8 @@
height: 36px;
background-color: var(--color-accent);
border-radius: var(--radius-field);
font-size: var(--fonts-lg);
font-weight: var(--bold);
font-size: var(--font-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
text-decoration: none;
flex-shrink: 0;
@@ -52,9 +52,9 @@
}
.separator {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
font-weight: var(--bold);
font-weight: var(--weight-bold);
opacity: 0.5;
animation: fadeIn 200ms ease-out 150ms both;
}
@@ -86,8 +86,8 @@
}
.pageName {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
@@ -103,7 +103,7 @@
}
.sideNavEmpty {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
padding: var(--s-1) var(--s-2);
}
@@ -137,8 +137,8 @@
height: 36px;
background-color: var(--color-accent);
border-radius: var(--radius-field);
font-size: var(--fonts-lg);
font-weight: var(--bold);
font-size: var(--font-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
text-decoration: none;
flex-shrink: 0;

4
app/features/art/components/ArtGrid.module.css
View File

@@ -11,7 +11,7 @@
background-color: #fff;
border-radius: var(--radius-box);
color: #000;
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
padding-inline: var(--s-1);
margin-block: var(--s-1) var(--s-0-5);
}
@@ -21,7 +21,7 @@
}
.dialogDescription {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
text-align: center;
color: #fff;
}

2
app/features/articles/routes/a.module.css
View File

@@ -8,5 +8,5 @@
.title {
color: var(--color-text-accent);
font-size: var(--fonts-md);
font-size: var(--font-md);
}

20
app/features/badges/badges.module.css
View File

@@ -22,19 +22,19 @@
display: flex;
justify-content: space-between;
color: var(--color-text-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
padding-inline: var(--s-1);
}
.explanation {
color: var(--color-text-accent);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
text-align: center;
}
.managers {
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
text-align: center;
}
@@ -48,7 +48,7 @@
flex-wrap: wrap;
justify-content: center;
padding: 0;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
gap: var(--s-1-5);
}
@@ -62,7 +62,7 @@
.count {
color: var(--color-accent-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}
.editUsersList > li {
@@ -76,8 +76,8 @@
display: flex;
flex-direction: column;
padding: 0;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
gap: var(--s-2);
padding-block-end: var(--s-2-5);
}
@@ -87,12 +87,12 @@
}
.editSmallHeader {
font-size: var(--fonts-md);
font-size: var(--font-md);
}
.editDifferences {
padding: 0;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
list-style: none;
}
@@ -104,5 +104,5 @@
.searchInput {
height: 40px !important;
margin: 0 auto;
font-size: var(--fonts-lg);
font-size: var(--font-lg);
}

8
app/features/badges/components/BadgeDisplay.module.css
View File

@@ -21,7 +21,7 @@
.badgeExplanation {
color: var(--color-text-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
display: flex;
align-items: center;
justify-content: center;
@@ -41,8 +41,8 @@
margin-right: auto;
margin-left: auto;
color: var(--color-accent-high);
font-size: var(--fonts-xxxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
}
.pagination {
@@ -63,7 +63,7 @@
height: 24px;
width: 24px;
border: var(--border-style);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
}

54
app/features/build-analyzer/routes/analyzer.module.css
View File

@@ -18,7 +18,7 @@
display: grid;
grid-template-columns: 1fr max-content max-content max-content 1fr;
gap: var(--s-2);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
align-items: center;
}
@@ -47,15 +47,15 @@
}
.ldeIntensitySelect {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
}
.apSummary {
width: 100%;
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
padding-block: var(--s-1);
padding-inline: var(--s-2);
}
@@ -66,8 +66,8 @@
align-items: center;
border-radius: var(--radius-box);
background-color: var(--color-accent-low);
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
gap: var(--s-2);
padding-block: var(--s-1);
padding-inline: var(--s-2);
@@ -75,15 +75,15 @@
.apText {
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
}
.summary {
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
font-size: var(--fonts-md);
font-weight: var(--bold);
font-size: var(--font-md);
font-weight: var(--weight-bold);
padding-block: var(--s-2);
padding-inline: var(--s-3);
position: relative;
@@ -95,7 +95,7 @@
.weaponInfoBadge {
display: inline-flex;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
gap: var(--s-2);
align-items: center;
background-color: var(--color-bg);
@@ -150,7 +150,7 @@
}
.statCardTitle {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
line-height: 1.35;
text-align: center;
word-break: break-word;
@@ -170,8 +170,8 @@
border: none;
background-color: transparent;
color: var(--color-accent);
font-size: var(--fonts-md);
font-weight: var(--bold);
font-size: var(--font-md);
font-weight: var(--weight-bold);
outline: initial;
}
@@ -191,15 +191,15 @@
.statCardValueTitle {
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-weight: 400;
font-size: var(--font-2xs);
font-weight: var(--weight-body);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.statCardValueNumber {
font-size: var(--fonts-md);
font-weight: var(--bold);
font-size: var(--font-md);
font-weight: var(--weight-bold);
}
.tableContainer {
@@ -213,19 +213,19 @@
.shotsToSplat {
color: var(--color-text-high);
font-size: var(--fonts-xxxs);
font-size: var(--font-2xs);
margin-inline-start: var(--s-4);
}
.consumptionTableExplanation {
margin-top: var(--s-2);
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
}
.statCategoryExplanation {
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
margin-block-start: var(--s-3);
}
@@ -237,8 +237,8 @@
border-radius: var(--radius-box);
background-color: var(--color-accent-low);
color: var(--color-accent-high);
font-size: var(--fonts-xxxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
padding-block: var(--s-0-5);
padding-inline: var(--s-2);
}
@@ -289,19 +289,19 @@
.inkGridAp {
display: grid;
place-items: center;
font-weight: var(--semi-bold);
font-size: var(--fonts-xs);
font-weight: var(--weight-semi);
font-size: var(--font-xs);
}
.inkGridApFocused {
color: var(--color-accent);
font-weight: var(--bold);
font-weight: var(--weight-bold);
text-decoration: underline;
}
.inkGridCell {
width: 25px;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
display: grid;
place-items: center;
background-color: var(--cell-color);

4
app/features/build-stats/routes/builds.$slug.stats.module.css
View File

@@ -5,8 +5,8 @@
}
.bars {
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
display: grid;
align-items: center;
grid-template-columns: max-content 65px 1fr;

8
app/features/builds/routes/builds.module.css
View File

@@ -12,8 +12,8 @@
padding: var(--s-3);
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
font-size: var(--fonts-sm);
font-weight: 600;
font-size: var(--font-sm);
font-weight: var(--weight-bold);
gap: var(--s-4);
}
@@ -33,8 +33,8 @@
display: flex;
align-items: center;
color: var(--color-text);
font-size: var(--fonts-xs);
font-weight: var(--body);
font-size: var(--font-xs);
font-weight: var(--weight-body);
gap: var(--s-1);
}

8
app/features/calendar/calendar-event.module.css
View File

@@ -5,7 +5,7 @@
.times {
display: grid;
column-gap: var(--s-1-5);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
grid-template-columns: max-content 1fr;
}
@@ -27,7 +27,7 @@
width: max-content;
align-items: center;
margin: 0 auto;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
gap: var(--s-1-5);
}
@@ -35,7 +35,7 @@
display: flex;
align-items: center;
color: var(--color-text-high);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
gap: var(--s-1);
}
@@ -56,5 +56,5 @@
.resultsParticipantCount {
color: var(--color-text-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}

4
app/features/calendar/calendar-new.module.css
View File

@@ -11,8 +11,8 @@
padding: var(--s-2);
border-radius: var(--radius-box);
background-color: var(--color-bg-badge);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
}
.dayLabel {

6
app/features/calendar/components/Tags.module.css
View File

@@ -3,14 +3,14 @@
max-width: var(--tags-max-width, 18rem);
flex-wrap: wrap;
padding: 0;
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
gap: var(--s-1);
list-style: none;
}
.small {
font-size: var(--fonts-xxxs);
font-size: var(--font-2xs);
& > li {
padding: 0 var(--s-1);

4
app/features/calendar/components/TagsFormField.module.css
View File

@@ -12,8 +12,8 @@
cursor: pointer;
border: 2px solid var(--tag-color);
border-radius: var(--radius-field);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
display: grid;
place-items: center;
min-width: max-content;

18
app/features/calendar/components/TournamentCard.module.css
View File

@@ -41,7 +41,7 @@
.org {
display: flex;
gap: var(--s-1);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
color: var(--color-text-high);
}
@@ -53,16 +53,16 @@
}
.time {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
color: var(--color-text-high);
display: block;
}
.name {
text-align: center;
font-weight: var(--semi-bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-semi);
font-size: var(--font-sm);
white-space: nowrap;
text-overflow: ellipsis;
max-width: 225px;
@@ -70,8 +70,8 @@
}
.teamCount {
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
background-color: var(--color-bg-higher);
border-radius: var(--radius-selector);
width: max-content;
@@ -114,8 +114,8 @@
}
.pill {
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
border-radius: var(--radius-selector);
padding: var(--s-0-5) var(--s-1-5);
display: grid;

16
app/features/calendar/routes/calendar.module.css
View File

@@ -19,10 +19,10 @@
display: flex;
align-items: center;
gap: var(--s-2);
font-weight: var(--bold);
font-weight: var(--weight-bold);
border-radius: var(--radius-field);
padding: var(--s-1) var(--s-2);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
flex: 1 1 0;
}
@@ -67,8 +67,8 @@
background-color: var(--color-bg-high);
padding: var(--s-2);
text-align: center;
font-size: var(--fonts-md);
font-weight: var(--bold);
font-size: var(--font-md);
font-weight: var(--weight-bold);
}
.dayHeaderToday {
@@ -77,8 +77,8 @@
}
.dayHeaderWeekday {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
color: var(--color-text-high);
}
@@ -90,8 +90,8 @@
}
.clockHeader {
font-weight: var(--semi-bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-semi);
font-size: var(--font-sm);
}
.clockHeaderDivider {

26
app/features/chat/components/Chat.module.css
View File

@@ -43,8 +43,8 @@
transform: translateX(-50%);
background-color: var(--color-text-accent);
color: var(--color-text-inverse);
font-size: var(--fonts-xxxxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
padding: 1px 4px;
border-radius: var(--radius-full);
white-space: nowrap;
@@ -53,16 +53,16 @@
.pronounsTag {
background-color: var(--color-bg-higher);
color: var(--color-text-accent);
font-size: var(--fonts-xxxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
padding: 1px 5px;
border-radius: var(--radius-full);
white-space: nowrap;
}
.messageUser {
font-weight: var(--semi-bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-semi);
font-size: var(--font-sm);
color: var(--chat-user-color);
max-width: 110px;
overflow: hidden;
@@ -71,7 +71,7 @@
}
.messageTime {
font-size: var(--fonts-xxxs);
font-size: var(--font-2xs);
color: var(--color-text-high);
}
@@ -82,7 +82,7 @@
}
.messageContents {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
word-break: break-word;
}
@@ -98,14 +98,14 @@
border-radius: var(--radius-box) var(--radius-box) 0 0;
padding: var(--s-1) var(--s-1);
border-color: var(--color-bg-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
padding-block: var(--s-1);
padding-inline: var(--s-2);
display: flex;
width: auto;
align-items: center;
justify-content: center;
font-weight: var(--bold);
font-weight: var(--weight-bold);
flex: 1 1 0px;
}
@@ -116,7 +116,7 @@
.roomButtonUnseen {
color: var(--color-accent);
text-shadow: var(--fonts-xxxs);
text-shadow: var(--font-2xs);
margin-inline-start: var(--s-1);
width: 25px;
text-align: left;
@@ -131,8 +131,8 @@
.unseenMessages {
position: absolute;
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
border-radius: var(--radius-field);
background-color: var(--color-bg-higher);
border: none;

4
app/features/components-showcase/components-showcase.module.css
View File

@@ -1,5 +1,5 @@
.sectionTitle {
font-size: var(--fonts-xl);
font-size: var(--font-xl);
border-bottom: 2px solid var(--color-bg-high);
margin-bottom: var(--s-4);
}
@@ -17,7 +17,7 @@
.componentLabel {
color: var(--color-text-high);
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}
.componentContent {

2
app/features/components-showcase/routes/components.tsx
View File

@@ -2053,7 +2053,7 @@ function FormFieldsSection({ id }: { id: string }) {
return (
<Section>
<SectionTitle id={id}>Form Fields</SectionTitle>
<p className="mb-4" style={{ fontSize: "var(--fonts-sm)", opacity: 0.8 }}>
<p className="mb-4" style={{ fontSize: "var(--font-sm)", opacity: 0.8 }}>
Schema-based form fields using SendouForm. Each field type is defined
with Zod schemas that generate both UI and validation.
</p>

185
app/features/front-page/routes/index.module.css
View File

@@ -20,8 +20,8 @@
.frontPageSideNavItem {
display: flex;
color: var(--color-text);
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
gap: var(--s-1-5);
align-items: center;
}
@@ -32,8 +32,8 @@
.frontPageSideNavLogOut {
display: flex;
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
gap: var(--s-1-5);
align-items: center;
color: var(--color-text-high) !important;
@@ -81,8 +81,8 @@
gap: var(--s-1-5);
justify-content: center;
align-items: center;
font-weight: var(--bold);
font-size: var(--fonts-xs);
font-weight: var(--weight-bold);
font-size: var(--font-xs);
border-radius: 10px;
color: var(--color-text-high);
padding: 0 var(--s-1);
@@ -132,13 +132,13 @@
}
.seasonBannerHeader {
font-size: var(--fonts-xl);
font-weight: var(--bold);
font-size: var(--font-xl);
font-weight: var(--weight-bold);
}
.seasonBannerDates {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
}
.seasonBannerImg {
@@ -153,7 +153,7 @@
border-radius: var(--radius-box);
width: max-content;
padding: 0 var(--field-padding);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-inverse);
display: flex;
gap: var(--s-2);
@@ -196,8 +196,8 @@
display: grid;
place-items: center;
padding: var(--s-2);
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
text-align: center;
color: var(--color-text);
transition: background-color 0.2s ease-out;
@@ -223,7 +223,7 @@
}
.resultHighlightsTitle {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}
.resultHighlightsTitleTournaments {
@@ -243,8 +243,8 @@
}
.leaderboardName {
font-size: var(--fonts-sm);
font-weight: var(--bold);
font-size: var(--font-sm);
font-weight: var(--weight-bold);
white-space: nowrap;
max-width: 140px;
text-overflow: ellipsis;
@@ -252,7 +252,7 @@
}
.leaderboardViewAll {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
color: var(--color-text);
background-color: var(--color-bg-higher);
border-radius: var(--radius-box);
@@ -275,7 +275,7 @@
}
.sideNavEmpty {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
padding: var(--s-1) var(--s-2);
}
@@ -294,8 +294,8 @@
}
.feedTitle {
font-size: var(--fonts-xl);
font-weight: var(--extra-bold);
font-size: var(--font-xl);
font-weight: var(--weight-extra);
margin: 0;
}
@@ -310,8 +310,8 @@
border: none;
border-radius: var(--radius-box);
padding: var(--s-1-5) var(--s-3);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
color: var(--color-text);
cursor: pointer;
transition: background-color 0.15s ease;
@@ -354,18 +354,18 @@
}
.postUsername {
font-weight: var(--bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-bold);
font-size: var(--font-sm);
}
.postTime {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
color: var(--color-text-high);
}
.postBadge {
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
padding: var(--s-1) var(--s-2);
border-radius: var(--radius-field);
text-transform: uppercase;
@@ -449,8 +449,8 @@
}
.matchResultText {
font-weight: var(--extra-bold);
font-size: var(--fonts-md);
font-weight: var(--weight-extra);
font-size: var(--font-md);
}
.matchWin .matchResultText {
@@ -462,8 +462,8 @@
}
.matchScore {
font-weight: var(--bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-bold);
font-size: var(--font-sm);
}
.matchDetails {
@@ -494,15 +494,15 @@
}
.matchStageName {
font-weight: var(--bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-bold);
font-size: var(--font-sm);
}
.matchModeRow {
display: flex;
align-items: center;
gap: var(--s-1);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
}
@@ -514,8 +514,8 @@
}
.powerChange {
font-weight: var(--extra-bold);
font-size: var(--fonts-lg);
font-weight: var(--weight-extra);
font-size: var(--font-lg);
}
.powerUp {
@@ -527,7 +527,7 @@
}
.newPower {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
}
@@ -544,8 +544,8 @@
}
.teamLabel {
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
color: var(--color-text-high);
text-transform: uppercase;
}
@@ -569,7 +569,7 @@
}
.placementEmoji {
font-size: var(--fonts-xl);
font-size: var(--font-xl);
}
.placementInfo {
@@ -579,12 +579,12 @@
}
.placementText {
font-weight: var(--extra-bold);
font-size: var(--fonts-lg);
font-weight: var(--weight-extra);
font-size: var(--font-lg);
}
.tournamentName {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
color: var(--color-text-high);
}
@@ -598,8 +598,8 @@
}
.teamName {
font-weight: var(--bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-bold);
font-size: var(--font-sm);
}
.placementTeammates {
@@ -621,15 +621,14 @@
}
.weaponName {
font-weight: var(--bold);
font-size: var(--fonts-md);
font-weight: var(--weight-bold);
font-size: var(--font-md);
}
.buildDescription {
margin: 0;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
color: var(--color-text);
line-height: 1.5;
}
.buildAbilities {
@@ -642,13 +641,13 @@
background-color: var(--color-bg-higher);
padding: var(--s-1) var(--s-2);
border-radius: var(--radius-field);
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
}
.viewBuildLink {
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
color: var(--color-text-accent);
}
@@ -666,13 +665,13 @@
}
.teamFormedName {
font-weight: var(--extra-bold);
font-size: var(--fonts-lg);
font-weight: var(--weight-extra);
font-size: var(--font-lg);
}
.teamFormedLabel {
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
background-color: var(--color-success-low);
color: var(--color-success);
padding: var(--s-0-5) var(--s-2);
@@ -702,12 +701,12 @@
}
.memberName {
font-weight: var(--semi-bold);
font-size: var(--fonts-xs);
font-weight: var(--weight-semi);
font-size: var(--font-xs);
}
.memberRole {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
color: var(--color-text-high);
}
@@ -732,8 +731,8 @@
.rankLabel,
.powerLabel {
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
color: var(--color-text-high);
text-transform: uppercase;
}
@@ -745,7 +744,7 @@
}
.oldRank {
font-size: var(--fonts-md);
font-size: var(--font-md);
color: var(--color-text-high);
text-decoration: line-through;
}
@@ -755,15 +754,15 @@
}
.newRank {
font-weight: var(--extra-bold);
font-size: var(--fonts-lg);
font-weight: var(--weight-extra);
font-size: var(--font-lg);
color: var(--color-success);
}
.rankDiff {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-success);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
}
.powerStat {
@@ -773,12 +772,12 @@
}
.powerValue {
font-weight: var(--extra-bold);
font-size: var(--fonts-lg);
font-weight: var(--weight-extra);
font-size: var(--font-lg);
}
.seasonInfo {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
}
@@ -802,12 +801,12 @@
}
.vodTournament {
font-weight: var(--bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-bold);
font-size: var(--font-sm);
}
.vodMatch {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
}
@@ -817,8 +816,8 @@
border: none;
border-radius: var(--radius-field);
padding: var(--s-2) var(--s-4);
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
cursor: pointer;
width: fit-content;
transition: opacity 0.15s ease;
@@ -837,8 +836,7 @@
.lfgText {
margin: 0;
font-size: var(--fonts-sm);
line-height: 1.5;
font-size: var(--font-sm);
}
.lfgWeapons {
@@ -849,12 +847,12 @@
.lfgAvailability {
display: flex;
gap: var(--s-2);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
}
.availLabel {
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
/* Tournament Signup Post */
@@ -869,11 +867,11 @@
align-items: center;
gap: var(--s-2);
flex-wrap: wrap;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}
.signupTeam {
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
.signupAction {
@@ -881,7 +879,7 @@
}
.signupTournament {
font-weight: var(--bold);
font-weight: var(--weight-bold);
color: var(--color-text-accent);
}
@@ -889,7 +887,7 @@
display: flex;
align-items: center;
gap: var(--s-2);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
}
@@ -907,8 +905,7 @@
.artDescription {
margin: 0;
font-size: var(--fonts-sm);
line-height: 1.5;
font-size: var(--font-sm);
}
.artImages {
@@ -941,16 +938,16 @@
}
.replayCodeLabel {
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
color: var(--color-text-high);
text-transform: uppercase;
}
.replayCodeValue {
font-family: monospace;
font-size: var(--fonts-lg);
font-weight: var(--extra-bold);
font-size: var(--font-lg);
font-weight: var(--weight-extra);
letter-spacing: 0.1em;
}
@@ -982,15 +979,15 @@
}
.replayStageName {
font-weight: var(--bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-bold);
font-size: var(--font-sm);
}
.replayModeRow {
display: flex;
align-items: center;
gap: var(--s-1);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
}
@@ -1001,6 +998,6 @@
}
.replayWeaponName {
font-weight: var(--semi-bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-semi);
font-size: var(--font-sm);
}

4
app/features/info/routes/faq.module.css
View File

@@ -2,8 +2,8 @@
padding: var(--s-3);
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
font-size: var(--fonts-lg);
font-weight: var(--bold);
font-size: var(--font-lg);
font-weight: var(--weight-bold);
}
.details {

6
app/features/info/routes/support.module.css
View File

@@ -2,7 +2,7 @@
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
place-items: center;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
row-gap: var(--s-2);
}
@@ -18,7 +18,7 @@
border: none;
background-color: transparent;
color: var(--color-text-accent);
font-size: var(--fonts-md);
font-weight: var(--bold);
font-size: var(--font-md);
font-weight: var(--weight-bold);
outline: initial;
}

12
app/features/lfg/components/LFGPost.module.css
View File

@@ -37,8 +37,8 @@
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
color: var(--color-text);
}
@@ -83,8 +83,8 @@
}
.pill {
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
border-radius: var(--radius-selector);
background-color: var(--color-bg-higher);
padding: var(--s-0-5) var(--s-2);
@@ -100,8 +100,8 @@
}
.editButton {
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
border-radius: var(--radius-selector);
background-color: var(--color-bg-higher);
padding: var(--s-0-5) var(--s-2);

8
app/features/map-list-generator/routes/maps.module.css
View File

@@ -7,7 +7,7 @@
}
.tournamentMapListLink {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
text-align: center;
}
@@ -29,13 +29,13 @@
}
.mapList {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
margin-block-start: var(--s-4);
}
.modeAbbr {
color: var(--color-text-high);
font-weight: var(--bold);
font-weight: var(--weight-bold);
text-decoration: none;
}

6
app/features/map-planner/components/Planner.module.css
View File

@@ -37,7 +37,7 @@
.outlineToggleButton {
background-color: var(--color-bg-high);
color: var(--color-text);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
padding: var(--s-2);
width: 140px;
}
@@ -67,8 +67,8 @@
.weaponsSummary {
background-color: var(--color-bg-high);
font-size: var(--fonts-sm);
font-weight: var(--bold);
font-size: var(--font-sm);
font-weight: var(--weight-bold);
padding: var(--s-2);
display: flex;
align-items: center;

9
app/features/notifications/components/NotificationList.module.css
View File

@@ -5,7 +5,6 @@
}
.item {
line-height: 1.4;
padding: var(--s-1) var(--s-2-5);
display: grid;
grid-template-areas: "image header" "image timestamp";
@@ -54,13 +53,13 @@
.itemHeader {
grid-area: header;
font-size: var(--fonts-xsm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
}
.timestamp {
grid-area: timestamp;
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-weight: var(--body);
font-size: var(--font-2xs);
font-weight: var(--weight-body);
}

24
app/features/object-damage-calculator/routes/object-damage-calculator.module.css
View File

@@ -40,8 +40,8 @@
}
.hp {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
}
.tableHeader {
@@ -50,8 +50,8 @@
border-radius: var(--radius-box);
display: flex;
flex-direction: column;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
gap: var(--s-1);
height: 100%;
left: 0;
@@ -71,7 +71,7 @@
.distance {
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
margin-block-start: var(--s-0-5);
}
@@ -99,8 +99,8 @@
padding: var(--s-2);
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
place-items: center;
}
@@ -113,14 +113,14 @@
.abbr {
color: var(--color-text-high);
font-weight: var(--bold);
font-weight: var(--weight-bold);
text-decoration: none;
}
.multiplier {
color: var(--color-text-accent);
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
letter-spacing: 0.5px;
margin-block-start: var(--s-2);
}
@@ -136,8 +136,8 @@
border-radius: var(--radius-box);
background-color: var(--color-accent-low);
color: var(--color-accent-high);
font-size: var(--fonts-xxxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
padding-block: var(--s-0-5);
padding-inline: var(--s-2);
}

18
app/features/plus-suggestions/plus.module.css
View File

@@ -5,7 +5,7 @@
.suggestedInfoText {
color: var(--color-text-high);
font-size: var(--fonts-lg);
font-size: var(--font-lg);
}
.topContainer {
@@ -33,13 +33,13 @@
}
.radioLabel {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
margin-block-end: 0;
}
.usersCount {
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
}
.suggestedUserInfo {
@@ -59,13 +59,13 @@
.viewCommentsAction {
color: var(--color-text-high);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
}
.commentTime {
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
}
.deleteButton {
@@ -115,8 +115,8 @@
border-radius: var(--radius-box);
background-color: var(--color-success-high);
color: var(--color-text);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
gap: var(--s-2);
line-height: 0.75;
margin-inline: auto;
@@ -130,6 +130,6 @@
}
.votingBioHeader {
font-size: var(--fonts-lg);
font-size: var(--font-lg);
padding-block-end: var(--s-2);
}

12
app/features/plus-voting/plus-voting-results.module.css
View File

@@ -3,8 +3,8 @@
border-radius: var(--radius-box);
margin: 0 auto;
background-color: var(--color-bg-high);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
list-style-type: none;
padding-inline: var(--s-4);
text-align: center;
@@ -48,15 +48,15 @@
.passedHeader {
color: var(--color-text-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}
.userStatus {
border-radius: var(--radius-box);
background-color: var(--color-accent);
color: var(--color-text-inverse);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
padding-inline: var(--s-1-5);
}
@@ -69,7 +69,7 @@
border-radius: 50%;
background-color: var(--color-bg);
color: var(--color-text);
font-weight: var(--bold);
font-weight: var(--weight-bold);
margin-inline-end: var(--s-1);
padding-inline: var(--s-1);
}

25
app/features/scrims/components/ScrimCard.module.css
View File

@@ -22,7 +22,7 @@
.teamName {
flex: 1;
font-size: var(--text-lg);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
margin: 0;
display: flex;
flex-direction: column;
@@ -31,8 +31,8 @@
}
.pickupLabel {
font-size: var(--fonts-xxxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
color: var(--color-text-high);
}
@@ -66,23 +66,22 @@
.infoLabel {
text-transform: uppercase;
color: var(--color-text-high);
font-weight: var(--bold);
font-size: var(--fonts-xxs);
font-weight: var(--weight-bold);
font-size: var(--font-2xs);
}
.infoValue {
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
display: flex;
align-items: center;
gap: var(--s-1);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}
.textContent {
padding-inline: var(--s-4);
padding-bottom: var(--s-3);
font-size: var(--fonts-sm);
line-height: 1.4;
font-size: var(--font-sm);
display: flex;
flex-direction: column;
gap: var(--s-0-5);
@@ -93,8 +92,8 @@
border: none;
color: var(--color-text-accent);
cursor: pointer;
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
padding: 0;
text-align: left;
text-decoration: underline;
@@ -142,7 +141,7 @@
.canceledLabel {
color: var(--color-error);
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
}

12
app/features/scrims/routes/scrims.$id.module.css
View File

@@ -25,8 +25,8 @@
align-items: center;
background-color: var(--color-bg);
border-radius: var(--radius-box);
font-size: var(--fonts-xsm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding-inline-end: var(--s-2-5);
color: var(--color-text);
}
@@ -34,14 +34,14 @@
.infoHeader {
text-transform: uppercase;
color: var(--color-text-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
line-height: 1.1;
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
}
.infoValue {
font-size: var(--fonts-xl);
font-weight: var(--semi-bold);
font-size: var(--font-xl);
font-weight: var(--weight-semi);
letter-spacing: 1px;
}

12
app/features/sendouq-match/routes/q.match.$id.module.css
View File

@@ -1,12 +1,12 @@
.stagePopoverButton {
background-color: transparent;
color: var(--color-text-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
padding: 0;
border: none;
text-decoration: underline;
text-decoration-style: dotted;
font-weight: var(--body);
font-weight: var(--weight-body);
height: 19.8281px;
}
@@ -66,7 +66,7 @@
row-gap: var(--s-2);
column-gap: var(--s-2-5);
align-items: center;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}
.poolPassContainer {
@@ -94,13 +94,13 @@
.infoHeader {
text-transform: uppercase;
color: var(--color-text-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
line-height: 1.1;
}
.infoValue {
font-size: var(--fonts-xl);
font-weight: var(--semi-bold);
font-size: var(--font-xl);
font-weight: var(--weight-semi);
letter-spacing: 1px;
}

14
app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
View File

@@ -4,12 +4,12 @@
}
.slot {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
display: grid;
place-items: center;
color: var(--color-text-high);
border-radius: var(--radius-field);
font-weight: var(--bold);
font-weight: var(--weight-bold);
width: 24px;
height: 24px;
border: 2px dotted var(--color-bg-higher);
@@ -81,14 +81,14 @@
position: absolute;
top: 14px;
text-transform: uppercase;
font-weight: var(--bold);
font-weight: var(--weight-bold);
cursor: not-allowed;
}
.mapButtonLabel {
font-size: var(--fonts-xxxxs);
font-size: var(--font-2xs);
color: var(--color-text-high);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
}
.divider::before,
@@ -97,8 +97,8 @@
}
.divider {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
display: flex;
gap: var(--s-2);

4
app/features/sendouq-settings/routes/q.settings.module.css
View File

@@ -2,8 +2,8 @@
padding: var(--s-3);
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
font-size: var(--fonts-lg);
font-weight: var(--bold);
font-size: var(--font-lg);
font-weight: var(--weight-bold);
margin-block-end: var(--s-4);
position: relative;
}

6
app/features/sendouq-streams/routes/q.streams.module.css
View File

@@ -1,14 +1,14 @@
.userContainer {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
display: flex;
gap: var(--s-2);
align-items: center;
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
color: var(--text);
}
.viewerCount {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
display: flex;
gap: var(--s-2);
align-items: center;

26
app/features/sendouq/components/GroupCard.module.css
View File

@@ -26,8 +26,8 @@
align-items: center;
background-color: var(--color-bg);
border-radius: var(--radius-field);
font-size: var(--fonts-xsm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding-inline-end: var(--s-2-5);
}
@@ -36,7 +36,7 @@
text-overflow: ellipsis;
overflow: hidden;
max-width: 7.5rem;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text);
}
@@ -65,7 +65,7 @@
}
.extraInfo {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
background-color: var(--color-bg);
border-radius: var(--radius-selector);
padding: 0 var(--s-1-5);
@@ -73,7 +73,7 @@
display: flex;
align-items: center;
gap: var(--s-1);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
height: 24px;
& img {
@@ -83,7 +83,7 @@
}
.extraInfoButton {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
background-color: var(--color-bg);
border-radius: var(--radius-box);
padding: var(--s-0-5) var(--s-1-5);
@@ -91,7 +91,7 @@
display: flex;
align-items: center;
gap: var(--s-1);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
color: var(--color-text);
border: none;
height: 24px;
@@ -101,8 +101,8 @@
border: none;
padding: 0 var(--s-1-5);
color: var(--color-text-accent);
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
background-color: var(--color-bg);
white-space: nowrap;
height: 100%;
@@ -154,8 +154,8 @@
border-radius: var(--radius-box);
background-color: var(--color-bg);
padding: var(--s-0-5) var(--s-2-5);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
bottom: -36px;
left: 50%;
transform: translate(-50%, -50%);
@@ -164,11 +164,11 @@
.popoverButton {
background-color: transparent;
color: var(--color-text-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
padding: 0;
border: none;
text-decoration: underline;
text-decoration-style: dotted;
font-weight: var(--bold);
font-weight: var(--weight-bold);
height: 19.8281px;
}

12
app/features/sendouq/routes/q.info.module.css
View File

@@ -2,17 +2,17 @@
display: flex;
flex-direction: column;
gap: var(--s-4);
font-size: var(--fonts-md);
font-size: var(--font-md);
}
.container h2 {
font-size: var(--fonts-lg);
font-size: var(--font-lg);
margin-block-end: var(--s-2);
color: var(--color-text-accent);
}
.container h3 {
font-size: var(--fonts-md);
font-size: var(--font-md);
margin-block-end: var(--s-3);
}
@@ -26,8 +26,8 @@
.tableOfContents li {
list-style: none;
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
}
.tableOfContents li:has(button) {
@@ -36,5 +36,5 @@
.tableOfContents li:not(:has(button)) {
margin-inline-start: var(--s-2);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}

4
app/features/sendouq/routes/q.looking.module.css
View File

@@ -21,8 +21,8 @@
.header {
text-align: center;
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
color: var(--color-text-accent);
display: flex;

14
app/features/sendouq/routes/q.module.css
View File

@@ -4,8 +4,8 @@
}
.clock {
font-size: var(--fonts-sm);
font-weight: var(--bold);
font-size: var(--font-sm);
font-weight: var(--weight-bold);
color: var(--color-text-high);
display: flex;
flex-direction: column;
@@ -18,16 +18,16 @@
.clockCountry {
color: var(--color-text) !important;
white-space: nowrap;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}
.frontPageLink {
background-color: var(--color-bg-high);
border-radius: var(--radius-field);
padding: var(--s-2);
font-size: var(--fonts-sm);
font-size: var(--font-sm);
color: var(--color-text);
font-weight: var(--bold);
font-weight: var(--weight-bold);
display: flex;
align-items: center;
gap: var(--s-2-5);
@@ -40,6 +40,6 @@
.linkSubText {
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-weight: var(--body);
font-size: var(--font-2xs);
font-weight: var(--weight-body);
}

53
app/features/team/team.module.css
View File

@@ -1,6 +1,6 @@
.searchInput {
height: 40px !important;
font-size: var(--fonts-lg);
font-size: var(--font-lg);
max-width: 240px;
}
@@ -18,23 +18,23 @@
}
.searchTeamName {
font-size: var(--fonts-xl);
font-weight: var(--bold);
font-size: var(--font-xl);
font-weight: var(--weight-bold);
word-break: break-word;
}
.searchTeamMembers {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text-high);
}
.searchTeamTag {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-accent);
padding: var(--s-0-5) var(--s-1);
border-radius: var(--radius-field);
margin-left: var(--s-2);
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
.searchTeamAvatarPlaceholder {
@@ -42,7 +42,7 @@
min-width: 64px;
display: grid;
place-items: center;
font-size: var(--fonts-xl);
font-size: var(--font-xl);
border-radius: 100%;
background-color: var(--color-bg-high);
}
@@ -83,7 +83,7 @@
justify-self: flex-end;
font-size: 36px;
line-height: 1;
font-weight: var(--bold);
font-weight: var(--weight-bold);
color: #fff;
display: none;
align-items: center;
@@ -132,11 +132,10 @@
.mobileNameCountry {
display: flex;
font-size: var(--fonts-xl);
font-size: var(--font-xl);
align-items: center;
font-weight: var(--bold);
font-weight: var(--weight-bold);
flex-direction: column;
line-height: 1.5;
}
.mobileTeamName {
@@ -146,7 +145,7 @@
}
.bannerTag {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
background-color: var(--color-accent-low);
color: var(--color-accent);
padding: var(--s-1) var(--s-1-5);
@@ -161,7 +160,7 @@
}
.bannerTagMobile {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
padding: var(--s-0-5) var(--s-1);
margin-block: var(--s-1);
}
@@ -183,8 +182,8 @@
margin: 0 auto;
border-radius: var(--radius-box);
padding: var(--s-1) var(--s-4);
font-weight: var(--bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-bold);
font-size: var(--font-sm);
display: flex;
justify-content: space-between;
width: min(100%, 48rem);
@@ -213,8 +212,8 @@
background-color: var(--color-bg-high);
border-radius: var(--radius-box);
padding: var(--s-2) var(--s-4);
font-size: var(--fonts-xl);
font-weight: var(--bold);
font-size: var(--font-xl);
font-weight: var(--weight-bold);
display: flex;
justify-content: space-between;
align-items: center;
@@ -226,7 +225,7 @@
align-items: center;
gap: var(--s-4);
color: var(--color-text);
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
.memberAvatar {
@@ -237,15 +236,15 @@
.memberRole {
margin-left: auto;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
color: var(--color-text-high);
margin-inline-end: var(--s-2-5);
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
.memberRoleMobile {
color: var(--color-text-high);
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
.memberCardContainer {
@@ -264,13 +263,13 @@
padding: var(--s-3);
background-color: var(--color-bg-high);
border-radius: var(--radius-box);
font-size: var(--fonts-lg);
font-weight: var(--bold);
font-size: var(--font-lg);
font-weight: var(--weight-bold);
}
.memberCardName {
color: var(--color-text);
font-weight: var(--bold);
font-weight: var(--weight-bold);
margin-block-start: var(--s-2);
}
@@ -284,8 +283,8 @@
.rosterMember {
justify-self: flex-start;
font-weight: var(--bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-bold);
font-size: var(--font-sm);
}
.rosterSeparator {
@@ -305,7 +304,7 @@
display: flex;
gap: var(--s-8);
padding-left: var(--s-4);
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}
@media screen and (min-width: 640px) {

8
app/features/tier-list-maker/components/TierRow.module.css
View File

@@ -10,8 +10,8 @@
justify-content: center;
min-width: 68px;
padding: var(--s-2);
font-size: var(--fonts-lg);
font-weight: var(--bold);
font-size: var(--font-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
border-radius: var(--radius-field);
cursor: pointer;
@@ -66,8 +66,8 @@
text-align: center;
margin: auto;
color: var(--color-text-high);
font-size: var(--fonts-md);
font-weight: var(--semi-bold);
font-size: var(--font-md);
font-weight: var(--weight-semi);
font-style: italic;
display: flex;
align-items: center;

12
app/features/tier-list-maker/routes/tier-list-maker.module.css
View File

@@ -34,8 +34,8 @@
.titleInput {
width: 100%;
padding: 0 var(--s-2) var(--s-2) var(--s-2);
font-size: var(--fonts-lg);
font-weight: 600;
font-size: var(--font-lg);
font-weight: var(--weight-bold);
text-align: center;
background: transparent;
border: none;
@@ -63,8 +63,8 @@
}
.authorBy {
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
color: var(--color-text-high);
text-transform: lowercase;
white-space: nowrap;
@@ -77,8 +77,8 @@
}
.authorUsername {
font-weight: var(--bold);
font-size: var(--fonts-xs);
font-weight: var(--weight-bold);
font-size: var(--font-xs);
color: var(--color-text);
white-space: nowrap;
}

12
app/features/tier-list-maker/tier-list-maker-constants.ts
View File

@@ -4,14 +4,14 @@ export const DEFAULT_TIER_LABEL_WIDTH = 68;
export const TIER_NAME_MAX_LENGTH = 50;
export const TIER_NAME_FONT_SIZE_BREAKPOINTS = [
{ maxLength: 3, fontSize: "var(--fonts-xl)" },
{ maxLength: 8, fontSize: "var(--fonts-lg)" },
{ maxLength: 15, fontSize: "var(--fonts-md)" },
{ maxLength: 25, fontSize: "var(--fonts-sm)" },
{ maxLength: 35, fontSize: "var(--fonts-xs)" },
{ maxLength: 3, fontSize: "var(--font-xl)" },
{ maxLength: 8, fontSize: "var(--font-lg)" },
{ maxLength: 15, fontSize: "var(--font-md)" },
{ maxLength: 25, fontSize: "var(--font-sm)" },
{ maxLength: 35, fontSize: "var(--font-xs)" },
] as const;
export const TIER_NAME_FONT_SIZE_MIN = "var(--fonts-xxs)";
export const TIER_NAME_FONT_SIZE_MIN = "var(--font-2xs)";
export const PRESET_COLORS = [
"#ff4655",

12
app/features/top-search/top-search.module.css
View File

@@ -2,8 +2,8 @@
display: flex;
flex-direction: column;
gap: var(--s-0-5);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
}
.tableRank {
@@ -53,8 +53,8 @@ a.tableRow:hover {
}
.tableRowQualification {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
justify-content: center;
background-color: var(--color-bg-higher);
display: flex;
@@ -73,8 +73,8 @@ a.tableRow:hover {
}
.time {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
color: var(--color-text-high);
}

24
app/features/tournament-bracket/components/Bracket/bracket.module.css
View File

@@ -33,8 +33,8 @@
background-color: var(--color-bg-higher);
padding: var(--s-0-5) var(--s-1);
border-radius: var(--radius-field);
font-size: var(--fonts-xxxs) !important;
font-weight: var(--semi-bold);
font-size: var(--font-2xs) !important;
font-weight: var(--weight-semi);
color: var(--color-text);
border: 0;
}
@@ -61,8 +61,8 @@
max-height: var(--match-height);
border-radius: var(--radius-field);
background-color: var(--color-bg-high);
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
padding: 0 var(--s-2);
display: flex;
flex-direction: column;
@@ -148,8 +148,8 @@ a.match:hover {
.elimRoundHeader {
text-align: center;
background-color: var(--color-bg-higher);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
padding-block: var(--s-2);
width: var(--match-width);
border-radius: var(--radius-field);
@@ -159,9 +159,9 @@ a.match:hover {
width: var(--match-width);
display: flex;
justify-content: space-between;
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
color: var(--color-text-high);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
}
.elimRoundColumn {
@@ -246,8 +246,8 @@ a.match:hover {
}
.rrPlacementsTable {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
min-width: max-content;
overflow-x: auto;
max-width: 600px;
@@ -299,8 +299,8 @@ a.match:hover {
}
.standingsDividerText {
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
white-space: nowrap;
}

14
app/features/tournament-bracket/components/BracketMapListDialog.module.css
View File

@@ -32,8 +32,8 @@
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
cursor: pointer;
transition: background-color 0.2s ease;
}
@@ -89,8 +89,8 @@
.mapSelectContainer {
display: flex;
gap: var(--s-2);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
align-items: center;
position: relative;
flex: 1;
@@ -125,8 +125,8 @@
background-color: var(--color-bg-higher);
padding: 2px 6px;
border-radius: var(--radius-field);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
display: inline-block;
min-width: 4.5rem;
text-align: center;
@@ -136,7 +136,7 @@
display: flex;
gap: var(--s-2);
align-items: baseline;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
margin-block: var(--s-2);
}

4
app/features/tournament-bracket/components/MatchTimer.module.css
View File

@@ -52,8 +52,8 @@
}
.gameMarkerText {
font-size: var(--fonts-xxxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
white-space: nowrap;
}

42
app/features/tournament-bracket/tournament-bracket.module.css
View File

@@ -1,5 +1,5 @@
.finalize {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
margin-block-end: var(--s-4);
display: flex;
gap: var(--s-1);
@@ -7,13 +7,9 @@
justify-content: center;
}
.startBracketAlert {
line-height: 1.4;
}
.miniAlert {
background-color: var(--color-info-low);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
border-radius: var(--radius-box);
padding: var(--s-1) var(--s-2);
}
@@ -29,12 +25,12 @@
border-end-start-radius: var(--radius-box);
color: var(--tournaments-text);
column-gap: var(--s-8);
font-size: var(--fonts-xsm);
font-size: var(--font-sm);
letter-spacing: 0.3px;
}
.infosValue > button {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
}
.lockedBanner {
@@ -78,7 +74,7 @@
background: rgb(0 0 0 / 40%);
border-start-end-radius: var(--radius-box);
border-start-start-radius: var(--radius-box);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: #fff;
}
@@ -125,8 +121,8 @@
width: var(--field-size-xs);
height: var(--field-size-xs);
border-radius: 50%;
font-weight: bold;
font-size: var(--fonts-sm);
font-weight: var(--weight-extra);
font-size: var(--font-sm);
}
.deadlineIndicatorWarning {
@@ -198,7 +194,7 @@
display: flex;
align-items: center;
text-align: center;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}
.duringMatchActionsRosters {
@@ -254,8 +250,8 @@
border-end-start-radius: var(--radius-box);
border-start-start-radius: var(--radius-box);
cursor: pointer;
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
letter-spacing: 0.4px;
z-index: 1;
@@ -324,21 +320,21 @@
}
.duringMatchActionsSeed {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
color: var(--color-text-accent);
}
.duringMatchActionsTeamName {
color: var(--color-text);
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
.rosters {
display: flex;
flex-wrap: wrap;
gap: var(--s-8);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
flex-direction: column;
}
@@ -440,7 +436,7 @@
.pointsInput {
--field-width: 4.5rem;
padding: var(--s-3-5) var(--s-2) !important;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}
@media screen and (min-width: 480px) {
@@ -450,14 +446,14 @@
}
.quickAction {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
color: var(--color-text);
background-color: var(--color-bg);
border-radius: var(--radius-box);
border: 2px solid var(--color-bg-higher);
padding-block: var(--s-1-5);
padding-inline: var(--s-2-5);
font-weight: var(--bold);
font-weight: var(--weight-bold);
align-items: center;
}
@@ -476,7 +472,7 @@
}
.compactifyButton {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
color: var(--color-text-high);
border-color: var(--color-bg-higher);
background-color: var(--color-bg);
@@ -496,7 +492,7 @@
text-transform: uppercase;
background-color: var(--color-bg-higher);
border-radius: var(--radius-box) 0 0 var(--radius-box);
font-weight: var(--bold);
font-weight: var(--weight-bold);
color: var(--color-text-high);
display: grid;
place-items: center;

2
app/features/tournament-organization/components/BannedPlayersList.module.css
View File

@@ -22,7 +22,7 @@
border: none;
color: var(--color-accent);
cursor: pointer;
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
padding: 0;
text-align: left;
text-decoration: underline;

32
app/features/tournament-organization/tournament-organization.module.css
View File

@@ -16,14 +16,14 @@
}
.calendarDayHeader {
font-size: var(--fonts-md);
font-weight: var(--semi-bold);
font-size: var(--font-md);
font-weight: var(--weight-semi);
}
.calendarDay {
aspect-ratio: 1;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
background-color: var(--bg-lighter);
padding: var(--s-1);
position: relative;
@@ -63,13 +63,13 @@
border: var(--border-style);
display: grid;
place-items: center;
font-size: var(--fonts-md);
font-size: var(--font-md);
background-color: var(--color-bg-higher);
}
.calendarDayToday {
color: var(--color-accent);
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
.calendarDayPrevious {
@@ -81,21 +81,21 @@
align-items: center;
justify-content: space-between;
gap: var(--s-2);
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
.calendarMonthSelector a {
font-size: var(--fonts-xl);
font-size: var(--font-xl);
}
.calendarMonthSelector > div {
font-size: var(--fonts-lg);
font-size: var(--font-lg);
margin-block-start: var(--s-1);
}
.sectionDivider {
font-size: var(--fonts-md);
font-weight: var(--bold);
font-size: var(--font-md);
font-weight: var(--weight-bold);
color: var(--color-text-high);
border-bottom: var(--border-style);
width: 100%;
@@ -127,7 +127,7 @@
display: flex;
align-items: center;
gap: var(--s-2);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
color: var(--color-text);
width: max-content;
}
@@ -139,7 +139,7 @@
.eventInfoTime {
display: block;
color: var(--color-text-high);
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}
.leaderboardList {
@@ -149,8 +149,8 @@
}
.leaderboardList li::marker {
font-size: var(--fonts-lg);
font-weight: var(--bold);
font-size: var(--font-lg);
font-weight: var(--weight-bold);
color: var(--color-accent);
padding-inline-end: var(--s-2);
}
@@ -163,7 +163,7 @@
}
.socialLink {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
color: var(--text-main);
display: flex;
gap: var(--s-2);

8
app/features/tournament-subs/routes/to.$id.subs.module.css
View File

@@ -34,7 +34,7 @@
.sectionInfo {
grid-area: info;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
gap: var(--s-2);
color: var(--color-text-high);
display: flex;
@@ -55,14 +55,14 @@
.sectionMessage {
grid-area: message;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
padding-block-start: var(--s-4);
white-space: pre-wrap;
}
.sectionWeaponText {
font-weight: var(--semi-bold);
font-size: var(--fonts-xs);
font-weight: var(--weight-semi);
font-size: var(--font-xs);
align-self: center;
}

22
app/features/tournament/routes/to.$id.seeds.module.css
View File

@@ -11,8 +11,8 @@
align-items: center;
padding: var(--s-1-5) var(--s-3);
column-gap: var(--s-2);
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
grid-template-columns: 2.5rem 2.25rem 2rem 1fr 3rem 1fr;
}
@@ -26,7 +26,7 @@
background-color: var(--color-bg-high);
column-gap: var(--s-2);
row-gap: var(--s-2);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
grid-template-columns: 2rem 2.25rem 2rem 1fr 3rem;
grid-template-areas:
"handle seed logo name sp"
@@ -81,7 +81,7 @@
cursor: grab;
background: none;
border: none;
font-size: var(--fonts-lg);
font-size: var(--font-lg);
color: var(--color-text-high);
padding: var(--s-1);
touch-action: none;
@@ -110,7 +110,7 @@
border: 1px solid var(--color-border);
background-color: var(--color-bg);
color: var(--color-text);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}
.seedInput:focus {
@@ -135,8 +135,8 @@
flex-shrink: 0;
background-color: var(--color-second);
color: var(--color-text-inverse);
font-size: var(--fonts-xxxxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
padding: 1px 4px;
border-radius: var(--radius-field);
text-transform: uppercase;
@@ -155,7 +155,7 @@
background-color: var(--color-bg-higher);
border-radius: var(--radius-box);
padding: var(--s-0-5) var(--s-2);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
}
.playerNew {
@@ -165,8 +165,8 @@
.playerNewBadge {
background-color: var(--color-second);
color: var(--color-text-inverse);
font-size: var(--fonts-xxxxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
padding: 1px 3px;
border-radius: var(--radius-field);
text-transform: uppercase;
@@ -178,7 +178,7 @@
align-items: center;
justify-content: center;
gap: 2px;
font-size: var(--fonts-xxxs);
font-size: var(--font-2xs);
color: var(--color-text-high);
}

97
app/features/tournament/tournament.module.css
View File

@@ -26,7 +26,7 @@
.teamWithRosterName {
flex: 1;
font-weight: var(--bold);
font-weight: var(--weight-bold);
padding-inline-end: var(--s-4);
text-align: right;
}
@@ -36,8 +36,8 @@
flex: 1;
flex-direction: column;
border-inline-start: var(--border-style-accent);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
gap: var(--s-2);
padding-inline-start: var(--s-4);
padding-block: var(--s-3);
@@ -76,17 +76,17 @@
.teamWithRosterMapPoolModeInfo {
background-color: var(--color-bg-high);
display: flex;
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
justify-content: center;
align-items: center;
gap: var(--s-1);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
padding-block: var(--s-0-5);
}
.teamWithRosterSeed {
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
color: var(--color-text-high);
}
@@ -113,11 +113,11 @@
position: absolute;
background-color: var(--color-text-accent);
color: var(--color-text-inverse);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
width: 12px;
height: 12px;
border-radius: var(--radius-box);
font-size: var(--fonts-xxxxs);
font-size: var(--font-2xs);
display: grid;
place-items: center;
top: 14px;
@@ -141,14 +141,14 @@
}
.title {
font-size: var(--fonts-xl);
font-weight: var(--bold);
font-size: var(--font-xl);
font-weight: var(--weight-bold);
}
.badge {
text-transform: uppercase;
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
padding: var(--s-0-5) var(--s-2);
border-radius: var(--radius-box);
place-items: center;
@@ -182,7 +182,6 @@
.infoDescription > :is(h1, h2, h3, h4, h5, h6) {
margin-block-end: var(--s-6);
line-height: 1.4;
}
.infoDescription > :is(h2, h3, h4, h5, h6) {
@@ -190,15 +189,15 @@
}
.infoDescription > h1 {
font-size: var(--fonts-xl);
font-size: var(--font-xl);
}
.infoDescription > :is(h2, h3, h4, h5, h6) {
font-size: var(--fonts-lg);
font-size: var(--font-lg);
}
.infoDescription > :is(h3, h4, h5, h6) {
font-size: var(--fonts-md);
font-size: var(--font-md);
}
.infoDescription > ul:has(+ p) {
@@ -207,12 +206,12 @@
.by {
color: var(--color-text-high);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
}
.sectionHeader {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}
.section {
@@ -226,8 +225,8 @@
}
.sectionWarning {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
text-align: center;
color: var(--color-text-high);
}
@@ -291,7 +290,7 @@
padding: var(--s-1-5) var(--s-3);
border-radius: var(--radius-box);
column-gap: var(--s-1);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
grid-template-columns: 1.5rem 2rem 8rem 3rem 1fr;
list-style: none;
row-gap: var(--s-1-5);
@@ -310,7 +309,7 @@
}
.seedsTeamsContainerHeader {
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
.seedsTeamName {
@@ -335,19 +334,19 @@
.seedsTeamMemberName {
grid-column: 1 / span 2;
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
}
.streamUserContainer {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
display: flex;
gap: var(--s-2);
align-items: center;
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
}
.streamViewerCount {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
display: flex;
gap: var(--s-2);
align-items: center;
@@ -373,28 +372,28 @@
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
place-items: center;
font-weight: var(--bold);
font-weight: var(--weight-bold);
text-align: center;
}
.teamStatTitle {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
color: var(--color-text-high);
}
.teamStatMain {
font-size: var(--fonts-xl);
font-weight: var(--semi-bold);
font-size: var(--font-xl);
font-weight: var(--weight-semi);
}
.teamStatMain sup {
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
}
.teamStatSub {
color: var(--color-text-high);
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}
@media screen and (min-width: 640px) {
@@ -442,14 +441,14 @@
}
.teamSetScore {
font-size: var(--fonts-xl);
font-weight: var(--bold);
font-size: var(--font-xl);
font-weight: var(--weight-bold);
white-space: nowrap;
}
.teamSetRoundName {
font-size: var(--fonts-lg);
font-weight: var(--semi-bold);
font-size: var(--font-lg);
font-weight: var(--weight-semi);
color: var(--color-text-high);
margin-block-end: 2px;
}
@@ -470,8 +469,8 @@
flex-direction: column;
gap: var(--s-2);
align-items: center;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
color: var(--color-text);
}
@@ -485,16 +484,16 @@
.teamSetOpponentVs {
grid-area: vs;
font-size: var(--fonts-xl);
font-weight: var(--bold);
font-size: var(--font-xl);
font-weight: var(--weight-bold);
color: var(--color-text-high);
align-self: center;
}
.teamSetOpponentTeam {
grid-area: team;
font-size: var(--fonts-lg);
font-weight: var(--semi-bold);
font-size: var(--font-lg);
font-weight: var(--weight-semi);
color: var(--color-text);
}
@@ -509,7 +508,7 @@
color: var(--color-text);
display: flex;
gap: var(--s-1);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
align-items: center;
}
@@ -518,7 +517,7 @@
width: 100%;
align-items: center;
color: var(--color-accent);
font-size: var(--fonts-lg);
font-size: var(--font-lg);
}
.overlapDivider::before,
@@ -533,8 +532,8 @@
height: 28px;
display: grid;
place-items: center;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
border: 3px solid var(--color-accent);
border-radius: var(--radius-field);
color: var(--color-text);

4
app/features/user-page/components/ParticipationPill.module.css
View File

@@ -6,8 +6,8 @@
}
.text {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
text-align: center;
}

2
app/features/user-page/routes/u.$identifier.admin.module.css
View File

@@ -1,5 +1,5 @@
.dl dt {
font-weight: bold;
font-weight: var(--weight-extra);
}
.dl dt:not(:first-child) {

2
app/features/user-page/routes/u.$identifier.edit.module.css
View File

@@ -7,7 +7,7 @@
}
.inGameNameHashtag {
font-size: var(--fonts-lg);
font-size: var(--font-lg);
}
.inGameNameDiscriminator {

52
app/features/user-page/user-page.module.css
View File

@@ -18,7 +18,7 @@
.team {
display: flex;
font-weight: var(--bold);
font-weight: var(--weight-bold);
color: var(--color-text);
gap: var(--s-1-5);
grid-area: team;
@@ -106,7 +106,7 @@
padding: var(--s-1) var(--s-1-5);
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
display: flex;
align-items: center;
gap: var(--s-1);
@@ -114,7 +114,7 @@
.extraInfoHeading {
color: var(--color-text-accent);
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
.resultsTableWrapper {
@@ -159,15 +159,15 @@
display: flex;
align-items: center;
color: var(--color-text);
font-weight: var(--body);
font-weight: var(--weight-body);
gap: var(--s-4);
line-height: 1.2rem;
}
.searchIgn {
color: var(--color-text-high);
font-size: var(--fonts-sm);
font-weight: var(--body);
font-size: var(--font-sm);
font-weight: var(--weight-body);
}
.searchUsers > li {
@@ -177,7 +177,7 @@
.searchInput {
height: 40px !important;
margin: 0 auto;
font-size: var(--fonts-lg);
font-size: var(--font-lg);
}
.searchIcon {
@@ -188,7 +188,7 @@
.searchInfo {
color: var(--color-text-high);
font-size: var(--fonts-sm);
font-size: var(--font-sm);
text-align: center;
}
@@ -224,8 +224,8 @@
display: flex;
flex-direction: column;
align-items: center;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
gap: var(--s-1-5);
}
@@ -235,7 +235,7 @@
}
.placementsMode {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}
}
@@ -246,9 +246,9 @@
.seasonWeaponContainer {
display: flex;
align-items: center;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
flex-direction: column;
font-weight: var(--bold);
font-weight: var(--weight-bold);
position: relative;
width: 60px;
}
@@ -296,12 +296,12 @@
.seasonPlayerName {
width: 64px;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
}
.seasonMatch {
@@ -322,9 +322,9 @@
.seasonMatchSubSection {
border-radius: 0 0 var(--radius-box) var(--radius-box);
background-color: var(--color-bg-high);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
text-align: center;
font-weight: var(--bold);
font-weight: var(--weight-bold);
display: flex;
gap: var(--s-1);
justify-content: center;
@@ -338,7 +338,7 @@
.seasonMatchUser {
display: flex;
flex-direction: column;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
width: 65px;
align-items: center;
}
@@ -351,8 +351,8 @@
}
.seasonMatchScore {
font-size: var(--fonts-xl);
font-weight: var(--bold);
font-size: var(--font-xl);
font-weight: var(--weight-bold);
margin-inline: auto;
}
@@ -370,8 +370,8 @@
height: 28px;
display: grid;
place-items: center;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
border: 3px solid var(--color-accent);
border-radius: var(--radius-field);
color: var(--color-text);
@@ -392,8 +392,8 @@
background-color: var(--color-bg-high);
padding: var(--s-0-5) var(--s-2);
border-radius: var(--radius-box);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
}
.seasonWeaponUsageContainer {
@@ -421,9 +421,9 @@
.seasonTentative {
text-transform: uppercase;
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
margin-top: -8px;
display: flex;
gap: var(--s-1);

8
app/features/vods/components/VodListing.module.css
View File

@@ -17,8 +17,8 @@
}
.castText {
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
color: var(--color-text-high);
}
@@ -27,8 +27,8 @@
border-radius: 100%;
display: grid;
place-items: center;
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
width: 38px;
height: 38px;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}

5
app/features/vods/routes/vods.$id.module.css
View File

@@ -15,10 +15,9 @@
align-items: center;
text-align: center;
flex-direction: column;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
line-height: 1.3;
font-weight: var(--semi-bold);
flex-grow: 1;
font-weight: var(--weight-semi);
width: max-content;
gap: var(--s-1);
}

12
app/features/weapons/components/WeaponArtPreview.module.css
View File

@@ -11,14 +11,14 @@
}
.title {
font-size: var(--fonts-md);
font-weight: 600;
font-size: var(--font-md);
font-weight: var(--weight-bold);
margin: 0;
}
.viewAll {
font-size: var(--fonts-xxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
color: var(--color-text-accent);
}
@@ -98,14 +98,14 @@
display: flex;
align-items: center;
gap: var(--s-1);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}
.author {
display: flex;
align-items: center;
gap: var(--s-1);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}
.authorName {

20
app/features/weapons/components/WeaponParamsTable.module.css
View File

@@ -10,7 +10,7 @@
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
text-align: left;
}
@@ -59,7 +59,7 @@
}
.weaponName {
font-size: var(--fonts-xxxs);
font-size: var(--font-2xs);
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
@@ -72,8 +72,8 @@
.categoryHeader {
background-color: var(--color-bg-high);
font-weight: var(--bold);
font-size: var(--fonts-xxs);
font-weight: var(--weight-bold);
font-size: var(--font-2xs);
letter-spacing: 0.5px;
padding: var(--s-1-5) var(--s-2);
}
@@ -82,7 +82,7 @@
display: flex;
align-items: center;
gap: var(--s-1);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
min-width: 180px;
}
@@ -105,7 +105,7 @@
}
.paramCell {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
vertical-align: top;
min-width: 90px;
}
@@ -130,8 +130,8 @@
border-radius: var(--radius-full);
background-color: var(--color-accent-low);
color: var(--color-accent);
font-size: var(--fonts-xxxs);
font-weight: var(--bold);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
}
.noValue {
@@ -143,7 +143,7 @@
display: flex;
flex-direction: column;
gap: var(--s-0-5);
font-size: var(--fonts-xxxs);
font-size: var(--font-2xs);
border-top: 1px solid var(--color-border);
padding-top: var(--s-1);
}
@@ -161,5 +161,5 @@
.historyValue {
font-variant-numeric: tabular-nums;
color: var(--color-accent);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
}

2
app/features/weapons/routes/weapons.$slug.module.css
View File

@@ -18,6 +18,6 @@
}
.dataCredit {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
color: var(--color-text-high);
}

4
app/form/SendouForm.module.css
View File

@@ -8,6 +8,6 @@
}
.title {
font-size: var(--fonts-lg);
font-weight: bold;
font-size: var(--font-lg);
font-weight: var(--weight-extra);
}

4
app/form/fields/ArrayFormField.module.css
View File

@@ -25,8 +25,8 @@
.headerLabel {
flex: 1;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
}
.content {

6
app/form/fields/WeaponPoolFormField.module.css
View File

@@ -27,7 +27,7 @@
cursor: grab;
user-select: none;
color: var(--color-text-high);
font-size: var(--fonts-md);
font-size: var(--font-md);
touch-action: none;
background: none;
border: none;
@@ -41,9 +41,9 @@
.weaponName {
text-transform: uppercase;
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
color: var(--color-text-high);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
flex: 1;
min-width: 0;
overflow: hidden;

52
app/styles/common.css
View File

@@ -15,7 +15,7 @@ body {
width: 100%;
min-height: 100vh;
display: flex;
line-height: 1.5;
line-height: var(--line-height);
overflow-x: hidden;
color: var(--color-text);
background-color: var(--color-bg);
@@ -64,7 +64,6 @@ details summary {
a {
color: var(--color-text-accent);
font-weight: var(--semi-bold);
text-decoration: none;
border-radius: 5px;
@@ -79,10 +78,10 @@ textarea:not([name="text"]) {
width: 100%;
min-height: 8rem;
padding: var(--field-padding);
line-height: var(--field-line-height);
border: var(--border-style);
border-radius: var(--radius-field);
background-color: var(--color-bg);
font-size: var(--font-sm);
outline: none;
resize: vertical;
@@ -100,7 +99,7 @@ input:not(.in-container) {
background: var(--color-bg);
padding: 0 var(--field-padding);
height: var(--field-size);
line-height: var(--field-line-height);
font-size: var(--font-sm);
outline: none;
&::placeholder {
@@ -126,7 +125,7 @@ input[type="checkbox"] {
padding: 0;
width: var(--selector-size);
height: var(--selector-size);
border-radius: var(--radius-selector);
border-radius: calc(var(--radius-selector) / 2);
background-color: var(--color-bg);
border: var(--border-style);
@@ -209,8 +208,8 @@ input[type="radio"] {
label {
display: block;
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
margin-block-end: var(--label-margin);
}
@@ -218,7 +217,7 @@ fieldset {
border: none;
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
font-size: var(--fonts-sm);
font-size: var(--font-sm);
padding-block-end: var(--s-3);
padding-inline: var(--s-3);
}
@@ -226,8 +225,8 @@ fieldset {
legend {
border-radius: var(--radius-field);
background-color: transparent;
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
}
article {
@@ -249,7 +248,7 @@ select {
var(--s-2)
);
height: var(--field-size);
line-height: var(--field-line-height);
font-size: var(--font-sm);
display: inline-flex;
align-items: center;
text-overflow: ellipsis;
@@ -297,8 +296,8 @@ select {
background-color: var(--color-bg);
color: var(--color-text);
border-radius: var(--radius-field);
font-size: var(--fonts-xsm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding: var(--s-1-5);
white-space: nowrap;
text-overflow: ellipsis;
@@ -386,8 +385,7 @@ input[type="color"]::-moz-color-swatch {
input[type="file"] {
padding: 0;
cursor: pointer;
font-size: var(--fonts-sm);
line-height: var(--field-line-height);
font-size: var(--font-sm);
color: var(--color-text-high);
overflow: hidden;
}
@@ -547,7 +545,7 @@ abbr[title] {
}
.form-errors {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}
.form-errors > h4 {
@@ -562,7 +560,7 @@ abbr[title] {
.section > h2 {
color: var(--text-lighter);
font-size: var(--fonts-md);
font-size: var(--font-md);
}
.stack {
@@ -663,7 +661,7 @@ abbr[title] {
.label__value {
color: var(--text-lighter);
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
margin-block-start: -5px;
}
@@ -678,14 +676,14 @@ abbr[title] {
.error-message {
display: block;
color: var(--theme-error);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
margin-block-start: var(--label-margin);
}
.info-message {
display: block;
color: var(--text-lighter);
font-size: var(--fonts-xs);
font-size: var(--font-xs);
margin-block-start: var(--label-margin);
}
@@ -699,7 +697,7 @@ abbr[title] {
}
.small-text {
font-size: var(--fonts-xxs) !important;
font-size: var(--font-2xs) !important;
}
.colors__summary {
@@ -707,8 +705,8 @@ abbr[title] {
border: 2px solid var(--border);
border-radius: var(--radius-field);
background-color: var(--bg-input);
font-weight: var(--bold);
font-size: var(--fonts-xs);
font-weight: var(--weight-bold);
font-size: var(--font-xs);
& div {
display: inline-flex;
@@ -729,8 +727,8 @@ abbr[title] {
.colors__container {
width: 100%;
font-size: var(--fonts-sm);
font-weight: var(--bold);
font-size: var(--font-sm);
font-weight: var(--weight-bold);
padding: var(--s-3);
border: 2px solid var(--border);
border-radius: var(--radius-field);
@@ -751,7 +749,7 @@ abbr[title] {
border-spacing: 0;
text-indent: 0;
text-align: left;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
& svg {
width: 1rem;
@@ -791,7 +789,7 @@ abbr[title] {
}
.playwire__text {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
text-align: center;
}

18
app/styles/elements.css
View File

@@ -4,8 +4,8 @@
border: 2px solid var(--border);
border-radius: var(--radius-box);
background-color: var(--bg-darker);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
white-space: pre-wrap;
}
@@ -14,8 +14,8 @@
}
.react-aria-Label {
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
margin-block-end: var(--label-margin);
display: block;
}
@@ -27,7 +27,7 @@
accent-color: var(--theme-secondary);
background-color: var(--bg-input);
color: var(--text);
font-size: var(--fonts-sm);
font-size: var(--font-sm);
outline: none;
height: 1rem;
padding: var(--s-4) var(--s-3);
@@ -79,7 +79,7 @@
}
.react-aria-Calendar .react-aria-Heading {
font-size: var(--fonts-lg);
font-size: var(--font-lg);
}
.react-aria-Calendar .react-aria-Button {
@@ -110,7 +110,7 @@
.react-aria-CalendarCell {
display: grid;
place-items: center;
font-size: var(--fonts-sm);
font-size: var(--font-sm);
padding: var(--s-1-5);
width: 35px;
height: 35px;
@@ -144,8 +144,8 @@
gap: 0.571rem;
color: var(--text-color);
forced-color-adjust: none;
font-size: var(--fonts-xs);
font-weight: var(--bold);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
margin-block-end: 0;
}

34
app/styles/utils.css
View File

@@ -1,29 +1,29 @@
.text-xl {
font-size: var(--fonts-xl);
font-size: var(--font-xl);
}
.text-lg {
font-size: var(--fonts-lg);
font-size: var(--font-lg);
}
.text-sm {
font-size: var(--fonts-sm);
font-size: var(--font-sm);
}
.text-md {
font-size: var(--fonts-md);
font-size: var(--font-md);
}
.text-xs {
font-size: var(--fonts-xs);
font-size: var(--font-xs);
}
.text-xxs {
font-size: var(--fonts-xxs);
font-size: var(--font-2xs);
}
.text-xxxs {
font-size: var(--fonts-xxxs);
font-size: var(--font-2xs);
}
.text-center {
@@ -139,15 +139,15 @@
}
.font-body {
font-weight: var(--body);
font-weight: var(--weight-body);
}
.font-semi-bold {
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
}
.font-bold {
font-weight: var(--bold);
font-weight: var(--weight-bold);
}
.h-full {
@@ -491,14 +491,6 @@
cursor: pointer;
}
.line-height-tight {
line-height: 1.3;
}
.line-height-very-tight {
line-height: 1.1;
}
.opaque {
opacity: 0.6;
}
@@ -609,7 +601,7 @@
}
.small-text {
font-size: var(--fonts-xxs) !important;
font-size: var(--font-2xs) !important;
}
.dotted {
@@ -621,8 +613,8 @@
.summary {
border-radius: var(--radius-box);
background-color: var(--color-bg);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
padding-block: var(--s-1);
padding-inline: var(--s-2);
}

Some files were not shown because too many files have changed in this diff Show More