Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-06-02 22:26:57 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

New spacings

Browse Source
This commit is contained in:
hfcRed 2026-01-21 17:18:14 +01:00
parent ff439b40d9
commit 3b4dac26bf
39 changed files with 90 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,8 @@
color: var(--color-text);
font-size: var(--font-md);
padding: var(--s-0-5);
width: calc(var(--field-size) * 0.7);
height: calc(var(--field-size) * 0.7);
width: var(--selector-size);
height: var(--selector-size);
display: flex;
align-items: center;
justify-content: center;
@ -18,7 +18,7 @@
}
.triggerTiny {
width: var(--field-size-xs);
height: var(--field-size-xs);
width: var(--selector-size-sm);
height: var(--selector-size-sm);
font-size: var(--font-xs);
}

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

@ -46,7 +46,7 @@
display: flex;
align-items: center;
gap: var(--s-1);
padding: var(--s-1-5) var(--s-2-5);
padding: var(--s-1-5) var(--s-3);
background-color: var(--color-bg-high);
border-top: 1.5px solid var(--color-border);
flex-shrink: 0;
@ -152,7 +152,7 @@
display: flex;
align-items: center;
gap: var(--s-2);
padding: var(--s-1-5) var(--s-2-5);
padding: var(--s-1-5) var(--s-3);
text-decoration: none;
color: var(--color-text);
border-top: 1.5px solid var(--color-border);

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

@ -25,7 +25,7 @@
}
& > tbody > tr > td {
padding: var(--s-2) var(--s-2-5);
padding: var(--s-2) var(--s-3);
}
& tr:first-child td {

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

@ -36,7 +36,7 @@
white-space: nowrap;
gap: var(--s-2);
border-radius: var(--radius-field);
padding: var(--s-1-5) var(--s-2-5);
padding: var(--s-1-5) var(--s-3);
background-color: var(--color-bg-high);
width: 100%;
border: 0;

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

@ -28,6 +28,7 @@
}
.selectValue {
font-size: var(--font-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -109,7 +110,7 @@
.searchInput {
all: unset;
font-size: var(--font-2xs);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
letter-spacing: 0.5px;
flex: 1;
@ -172,7 +173,7 @@
color: var(--color-text-high);
text-transform: uppercase;
font-size: var(--font-2xs);
padding-block-start: var(--s-2-5);
padding-block-start: var(--s-3);
padding-block-end: var(--s-1);
padding-inline: var(--s-1-5);
white-space: nowrap;

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

@ -1,7 +1,7 @@
.footer {
display: flex;
flex-direction: column;
padding: var(--s-2-5);
padding: var(--s-3);
background-color: var(--color-bg-high);
gap: var(--s-6);
margin-block-start: auto;

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

@ -79,7 +79,7 @@
font-size: var(--font-xs);
font-weight: var(--weight-semi);
gap: var(--s-2);
padding-block-end: var(--s-2-5);
padding-block-end: var(--s-3);
}
.editNumberInput {

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

@ -48,7 +48,7 @@
.pagination {
display: flex;
flex-wrap: wrap;
gap: var(--s-2-5);
gap: var(--s-3);
justify-content: center;
align-items: center;
max-width: 20rem;

2
app/features/builds/components/FilterSection.module.css
View File

@ -1,7 +1,7 @@
.filter {
display: flex;
flex-direction: column;
padding: var(--s-2-5);
padding: var(--s-3);
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
gap: var(--s-2);

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

@ -20,7 +20,7 @@
.categoryHeader {
display: flex;
align-items: center;
gap: var(--s-2-5);
gap: var(--s-3);
}
.categoryWeapons {

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

@ -74,9 +74,11 @@
font-weight: var(--weight-bold);
background-color: var(--color-bg-higher);
border-radius: var(--radius-selector);
height: var(--field-size-xs);
width: max-content;
padding: var(--s-0-5) var(--s-1-5);
padding: 0 var(--s-1-5);
display: flex;
align-items: center;
gap: var(--s-1);
}
@ -117,7 +119,8 @@
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
border-radius: var(--radius-selector);
padding: var(--s-0-5) var(--s-1-5);
height: var(--field-size-xs);
padding: 0 var(--s-1-5);
display: grid;
place-items: center;
}
@ -157,5 +160,5 @@
.badgePill {
background-color: var(--color-bg-higher);
border-radius: var(--radius-selector);
padding: var(--s-0-5) var(--s-1-5);
padding: 0 var(--s-1-5);
}

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

@ -57,7 +57,7 @@
.columnsContainer {
display: grid;
grid-template-columns: repeat(var(--columns-count), 225px);
gap: var(--s-14);
gap: var(--s-12);
overflow-x: auto;
}

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

@ -4,7 +4,7 @@
}
.messages {
padding: var(--s-2-5) 0 0 0;
padding: var(--s-3) 0 0 0;
display: flex;
flex-direction: column;
gap: var(--s-2);
@ -15,7 +15,7 @@
.message {
list-style: none;
display: flex;
gap: var(--s-2-5);
gap: var(--s-3);
}
.messageInfo {

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

@ -7,7 +7,7 @@
gap: var(--s-3);
overflow-y: auto;
height: 100vh;
padding-block-end: var(--s-48);
padding-block-end: var(--s-32);
padding-inline-end: var(--s-4);
}

2
app/features/lfg/components/LFGFiltersSideNav.module.css
View File

@ -1,6 +1,6 @@
.filterSection {
padding: var(--s-1) var(--s-2);
padding-block-end: var(--s-2-5);
padding-block-end: var(--s-3);
}
.filterSection select,

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

@ -1,16 +1,16 @@
.itemDivider {
margin-inline: var(--s-2-5);
margin-inline: var(--s-3);
border-width: 0.5px;
border-color: var(--color-bg-high);
}
.item {
padding: var(--s-1) var(--s-2-5);
padding: var(--s-1) var(--s-3);
display: grid;
grid-template-areas: "image header" "image timestamp";
grid-template-columns: 30px 1fr;
column-gap: var(--s-2);
padding-block: var(--s-2-5);
padding-block: var(--s-3);
color: var(--color-text);
}

2
app/features/notifications/routes/notifications.module.css
View File

@ -1,7 +1,7 @@
.header {
display: flex;
align-items: center;
gap: var(--s-2-5);
gap: var(--s-3);
}
.header svg {

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

@ -13,7 +13,7 @@
.groupCard {
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
padding: var(--s-2-5);
padding: var(--s-3);
display: flex;
gap: var(--s-4);
flex-direction: column;
@ -27,7 +27,7 @@
border-radius: var(--radius-box);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding-inline-end: var(--s-2-5);
padding-inline-end: var(--s-3);
color: var(--color-text);
}
@ -48,7 +48,7 @@
.chatContainer {
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
padding: var(--s-2-5);
padding: var(--s-3);
}
.screenBanIndicator {

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

@ -64,7 +64,7 @@
display: grid;
grid-template-columns: max-content 1fr;
row-gap: var(--s-2);
column-gap: var(--s-2-5);
column-gap: var(--s-3);
align-items: center;
font-size: var(--font-xs);
}

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

@ -18,6 +18,7 @@
.slotIcon {
color: var(--color-success);
width: 16px;
height: 16px;
}
.slotPicked {
@ -72,8 +73,9 @@
.mapButtonIcon {
position: absolute;
top: 2px;
fill: var(--color-success);
color: var(--color-success);
width: 48px;
height: 48px;
cursor: pointer;
}

1
app/features/sendouq-settings/routes/q.settings.tsx
View File

@ -233,7 +233,6 @@ function MapPicker() {
_action="UPDATE_MAP_MODE_PREFERENCES"
state={fetcher.state}
className="mx-auto"
size="big"
>
{t("common:actions.save")}
</SubmitButton>

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

@ -2,7 +2,7 @@
background-color: var(--color-bg-high);
width: 100%;
border-radius: var(--radius-box);
padding: var(--s-2-5);
padding: var(--s-3);
display: flex;
flex-direction: column;
gap: var(--s-4);
@ -28,7 +28,7 @@
border-radius: var(--radius-field);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
padding-inline-end: var(--s-2-5);
padding-inline-end: var(--s-3);
}
.name {
@ -153,7 +153,7 @@
position: absolute;
border-radius: var(--radius-box);
background-color: var(--color-bg);
padding: var(--s-0-5) var(--s-2-5);
padding: var(--s-0-5) var(--s-3);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
bottom: -36px;

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

@ -6,7 +6,7 @@
display: grid;
justify-content: center;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-7);
gap: var(--s-6);
}
.containerMobile {

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

@ -30,7 +30,7 @@
font-weight: var(--weight-bold);
display: flex;
align-items: center;
gap: var(--s-2-5);
gap: var(--s-3);
transition: background-color 0.2s;
}

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

@ -238,7 +238,7 @@
margin-left: auto;
font-size: var(--font-sm);
color: var(--color-text-high);
margin-inline-end: var(--s-2-5);
margin-inline-end: var(--s-3);
font-weight: var(--weight-bold);
}
@ -293,7 +293,7 @@
}
.inviteContainer {
margin-block-start: var(--s-14);
margin-block-start: var(--s-16);
display: flex;
flex-direction: column;
gap: var(--s-12);

2
app/features/tier-list-maker/components/ItemPool.module.css
View File

@ -1,5 +1,5 @@
.pool {
display: flex;
flex-wrap: wrap;
gap: var(--s-2-5);
gap: var(--s-3);
}

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

@ -85,7 +85,7 @@ a.tableRow:hover {
.tableInnerRow {
display: flex;
align-items: center;
gap: var(--s-2-5);
gap: var(--s-3);
width: 100%;
}

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

@ -135,7 +135,7 @@ a.match:hover {
display: flex;
flex-direction: column;
justify-content: space-around;
gap: var(--s-7);
gap: var(--s-6);
margin-top: var(--s-6);
flex: 1;
overflow: visible;

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

@ -378,7 +378,7 @@
.modeProgressImage {
background-color: var(--color-bg-high);
border-radius: 100%;
padding: var(--s-2-5);
padding: var(--s-3);
outline: 2px solid var(--color-bg-higher);
min-width: 40px;
}
@ -435,7 +435,7 @@
.pointsInput {
--field-width: 4.5rem;
padding: var(--s-3-5) var(--s-2) !important;
padding: var(--s-4) var(--s-2) !important;
font-size: var(--font-sm);
}
@ -452,7 +452,7 @@
border-radius: var(--radius-box);
border: 2px solid var(--color-bg-higher);
padding-block: var(--s-1-5);
padding-inline: var(--s-2-5);
padding-inline: var(--s-3);
font-weight: var(--weight-bold);
align-items: center;
}
@ -488,7 +488,7 @@
}
.castInfoContainerLabel {
padding: var(--s-2) var(--s-3-5);
padding: var(--s-2) var(--s-4);
text-transform: uppercase;
background-color: var(--color-bg-higher);
border-radius: var(--radius-box) 0 0 var(--radius-box);
@ -516,5 +516,5 @@
}
.actionSectionWrapper [class*="tabPanel"]:has([class*="chatContainer"]) {
padding: var(--s-1) var(--s-3-5);
padding: var(--s-1) var(--s-4);
}

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

@ -159,7 +159,7 @@
display: flex;
flex-direction: column;
gap: var(--s-2);
padding-inline-start: var(--s-2-5);
padding-inline-start: var(--s-3);
}
.socialLink {

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

@ -19,7 +19,7 @@
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
padding: var(--s-4);
column-gap: var(--s-2-5);
column-gap: var(--s-3);
}
.sectionAvatar {

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

@ -15,7 +15,7 @@
}
.selectContainer > label {
margin-left: var(--s-2-5);
margin-left: var(--s-3);
}
.teamWithRoster {
@ -321,7 +321,7 @@
.seedsTeamMember {
display: grid;
grid-template-columns: max-content max-content;
grid-column-gap: var(--s-2-5);
grid-column-gap: var(--s-3);
background-color: var(--color-bg-high);
border-radius: var(--radius-box);
padding: var(--s-1) var(--s-3);
@ -418,7 +418,7 @@
.teamSet {
display: flex;
flex-direction: column;
gap: var(--s-2-5);
gap: var(--s-3);
background-color: var(--color-bg-high);
border-radius: var(--radius-box);
padding: var(--s-3) var(--s-6);

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

@ -7,7 +7,7 @@
.avatarContainer {
display: grid;
justify-content: center;
column-gap: var(--s-2-5);
column-gap: var(--s-3);
grid-template-areas: "avatar name" "avatar team" "avatar ." "avatar ." "socials .";
}
@ -31,7 +31,7 @@
align-items: center;
grid-area: name;
overflow-wrap: anywhere;
gap: var(--s-2-5);
gap: var(--s-3);
}
.socials {
@ -39,7 +39,7 @@
justify-content: center;
gap: var(--s-1-5);
grid-area: socials;
padding-block-start: var(--s-2-5);
padding-block-start: var(--s-3);
}
.socialLink {
@ -98,7 +98,7 @@
display: flex;
max-width: 24rem;
flex-wrap: wrap;
gap: var(--s-2-5);
gap: var(--s-3);
margin-inline: auto;
}
@ -307,7 +307,7 @@
.seasonMatch {
background-color: var(--color-bg-high);
border-radius: var(--radius-box);
padding: var(--s-2) var(--s-2-5);
padding: var(--s-2) var(--s-3);
color: var(--color-text);
transition: ease-in 0.2s background-color;
display: flex;
@ -384,7 +384,7 @@
.seasonInfoContainer {
background-color: var(--color-bg-high);
padding: var(--s-2-5) var(--s-2);
padding: var(--s-3) var(--s-2);
border-radius: var(--radius-box);
}
@ -407,7 +407,7 @@
.seasonWeaponUsageWeaponsContainer {
display: flex;
flex-wrap: wrap;
gap: var(--s-2-5);
gap: var(--s-3);
justify-content: center;
max-height: 300px;
overflow-y: auto;

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

@ -23,7 +23,7 @@
}
.table tbody td {
padding: var(--s-2) var(--s-2-5);
padding: var(--s-2) var(--s-3);
border-bottom: 1px solid var(--color-border);
}

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

@ -62,9 +62,9 @@
}
.starIconOutlined {
color: var(--color-second);
color: var(--color-text-accent);
}
.starIconFilled {
fill: var(--color-second);
fill: var(--color-text-accent);
}

2
app/styles/common.css
View File

@ -506,7 +506,7 @@ abbr[title] {
}
.article > p {
padding-block: var(--s-2-5);
padding-block: var(--s-3);
}
.article img {

2
app/styles/elements.css
View File

@ -150,7 +150,7 @@
}
.react-aria-Switch .indicator {
width: var(--s-11);
width: var(--s-10);
height: var(--s-6);
background: var(--theme-transparent);
border-radius: 1.143rem;

2
app/styles/utils.css
View File

@ -303,7 +303,7 @@
}
.ml-2-5 {
margin-inline-start: var(--s-2-5);
margin-inline-start: var(--s-3);
}
.ml-4 {

48
app/styles/vars.css
View File

@ -173,6 +173,21 @@ html {
--line-height: 1.4;
--s-0-5: 0.125rem;
--s-1: 0.25rem;
--s-1-5: 0.375rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.25rem;
--s-6: 1.5rem;
--s-8: 2rem;
--s-10: 2.5rem;
--s-12: 3rem;
--s-16: 4rem;
--s-24: 6rem;
--s-32: 8rem;
/*
Tokens used to define layout dimensions
@ -209,10 +224,10 @@ html {
--field-size-icon: 18px;
--field-padding: 1rem;
--selector-size-xs: calc(var(--_size-selector) * 3 * 0.25rem);
--selector-size-sm: calc(var(--_size-selector) * 4 * 0.25rem);
--selector-size: calc(var(--_size-selector) * 5 * 0.25rem);
--selector-size-lg: calc(var(--_size-selector) * 6 * 0.25rem);
--selector-size-xs: calc(var(--_size-selector) * 4 * 0.25rem);
--selector-size-sm: calc(var(--_size-selector) * 5 * 0.25rem);
--selector-size: calc(var(--_size-selector) * 6 * 0.25rem);
--selector-size-lg: calc(var(--_size-selector) * 7 * 0.25rem);
--radius-box: calc(var(--_radius-box) * 4px);
--radius-field: calc(var(--_radius-field) * 4px);
@ -221,31 +236,6 @@ html {
}
html {
--s-0-5: 0.125rem;
--s-1: 0.25rem;
--s-1-5: 0.375rem;
--s-2: 0.5rem;
--s-2-5: 0.625rem;
--s-3: 0.75rem;
--s-3-5: 0.875rem;
--s-4: 1rem;
--s-5: 1.25rem;
--s-6: 1.5rem;
--s-7: 1.75rem;
--s-8: 2rem;
--s-9: 2.25rem;
--s-10: 2.5rem;
--s-11: 2.75rem;
--s-12: 3rem;
--s-14: 3.5rem;
--s-16: 4rem;
--s-20: 5rem;
--s-24: 6rem;
--s-28: 7rem;
--s-32: 8rem;
--s-40: 10rem;
--s-48: 12rem;
--label-margin: var(--s-1);
}