Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-05-05 20:56:13 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge branch 'css-rework-sidenav' of github.com:sendou-ink/sendou.ink into css-rework-sidenav

Browse Source
This commit is contained in:
Kalle 2026-01-22 21:32:51 +02:00
commit 8bb52a5375
26 changed files with 103 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,3 @@
.templateSelection {
display: grid;
gap: var(--s-2);
grid-template-columns: 1fr;
}
@media screen and (min-width: 640px) {
.templateSelection {
grid-template-columns: 1fr 1fr;
}
}
.stageRow {
display: flex;
width: 100%;

12
app/components/MapPoolSelector.tsx
View File

@ -103,12 +103,10 @@ export function MapPoolSelector({
)}
<div className="stack md">
{allowBulkEdit && (
<div className={styles.templateSelection}>
<MapPoolTemplateSelect
value={template}
handleChange={handleTemplateChange}
/>
</div>
<MapPoolTemplateSelect
value={template}
handleChange={handleTemplateChange}
/>
)}
{info}
<MapPoolStages
@ -281,6 +279,7 @@ export function MapPoolStages({
allowBulkEdit &&
(mapPool.hasStage(stageId) ? (
<SendouButton
shape="circle"
key="clear"
onPress={() => handleStageClear(stageId)}
icon={<X />}
@ -290,6 +289,7 @@ export function MapPoolStages({
/>
) : (
<SendouButton
shape="circle"
key="select-all"
onPress={() => handleStageAdd(stageId)}
icon={<ArrowLeft />}

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

@ -297,6 +297,8 @@
}
.sideNavLinkBadge {
display: flex;
align-items: center;
margin-left: auto;
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
@ -304,12 +306,14 @@
background-color: var(--color-text-accent);
padding: 0 var(--s-1);
border-radius: var(--radius-selector);
height: var(--selector-size-xs);
text-align: center;
flex-shrink: 0;
text-transform: uppercase;
}
.sideNavLinkBadgeWarning {
background-color: var(--color-second-high);
background-color: var(--color-text-second);
}
.sideNavPanelOverlay {

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

@ -26,8 +26,12 @@
.link {
width: 100%;
padding: var(--s-1) var(--s-4);
border-radius: var(--radius-box);
padding: 0 var(--s-4);
height: var(--field-size-sm);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-field);
background-color: var(--color-bg-high);
cursor: pointer;
font-size: var(--font-xs);

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

@ -1,5 +1,5 @@
.root {
--height: var(--selector-size);
--height: var(--selector-size-sm);
cursor: pointer;
display: grid;

3
app/features/associations/routes/associations.tsx
View File

@ -108,6 +108,7 @@ function Association({
]}
>
<SendouButton
shape="square"
icon={<Trash className="small-icon" />}
className="small-text"
variant="minimal-destructive"
@ -195,6 +196,7 @@ function AssociationInviteCodeActions({
<div className="stack horizontal sm items-center">
<input type="text" value={inviteLink} readOnly id={id} />
<SendouButton
shape="square"
variant={copySuccess ? "outlined-success" : "outlined"}
onPress={() => copyToClipboard(inviteLink)}
icon={copySuccess ? <Check /> : <Clipboard />}
@ -251,6 +253,7 @@ function AssociationMember({
]}
>
<SendouButton
shape="square"
icon={<Trash className="small-icon" />}
className="small-text"
variant="minimal-destructive"

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

@ -234,13 +234,15 @@
}
.patch {
border-radius: var(--radius-box);
border-radius: var(--radius-selector);
background-color: var(--color-accent-low);
color: var(--color-accent-high);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
padding-block: var(--s-0-5);
padding-inline: var(--s-2);
height: var(--selector-size-sm);
display: flex;
align-items: center;
}
@media screen and (max-width: 640px) {

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

@ -15,6 +15,6 @@
}
.bar {
background-color: var(--color-accent);
background-color: var(--color-text-accent);
height: 100%;
}

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

@ -1,19 +1,26 @@
.tags {
display: flex;
max-width: var(--tags-max-width, 18rem);
flex-wrap: wrap;
padding: 0;
font-size: var(--font-2xs);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
gap: var(--s-1);
list-style: none;
& > li {
height: var(--selector-size-sm);
display: flex;
align-items: center;
border-radius: var(--radius-selector);
padding-inline: var(--s-1-5);
}
}
.small {
font-size: var(--font-2xs);
& > li {
padding: 0 var(--s-1);
height: var(--selector-size-xs);
}
}
@ -21,14 +28,6 @@
justify-content: center;
}
.tags > li {
display: flex;
align-items: center;
border-radius: var(--radius-box);
padding-inline: var(--s-1-5);
min-height: 20px;
}
.tag {
color: var(--color-text-inverse);
}

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

@ -86,7 +86,7 @@
font-weight: var(--weight-bold);
background-color: var(--color-bg-higher);
border-radius: var(--radius-selector);
height: var(--field-size-xs);
height: var(--selector-size);
width: max-content;
padding: 0 var(--s-1-5);
display: flex;
@ -110,7 +110,7 @@
padding: 0 var(--s-1-5);
display: flex;
gap: var(--s-1);
height: var(--field-size-xs);
height: var(--selector-size);
align-items: center;
}
@ -131,7 +131,7 @@
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
border-radius: var(--radius-selector);
height: var(--field-size-xs);
height: var(--selector-size);
padding: 0 var(--s-1-5);
display: grid;
place-items: center;
@ -173,4 +173,5 @@
background-color: var(--color-bg-higher);
border-radius: var(--radius-selector);
padding: 0 var(--s-1-5);
height: var(--selector-size);
}

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

@ -87,7 +87,8 @@
font-weight: var(--weight-semi);
border-radius: var(--radius-selector);
background-color: var(--color-bg-higher);
padding: var(--s-0-5) var(--s-2);
padding: 0 var(--s-2);
height: var(--selector-size-sm);
display: flex;
align-items: center;
gap: var(--s-0-5);

2
app/features/lfg/components/LFGPost.tsx
View File

@ -68,7 +68,7 @@ function UserLFGPost({ post, tiersMap }: { post: Post; tiersMap: TiersMap }) {
/>
</div>
<div>
<div className="stack horizontal justify-between">
<div className="stack horizontal justify-between items-center">
<PostTextTypeHeader type={post.type} />
{post.author.id === user?.id || isAdmin ? (
<PostDeleteButton id={post.id} type={post.type} />

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

@ -1,17 +1,13 @@
.controls {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-direction: column;
gap: var(--s-2);
}
.selects {
display: flex;
flex-wrap: wrap;
gap: var(--s-5);
}
.selectsWeapon {
width: 16rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-4);
}
.ability {
@ -78,7 +74,9 @@
.receiverButton {
all: unset;
cursor: pointer;
border-radius: var(--radius-box);
border-radius: var(--radius-field);
width: var(--field-size);
height: var(--field-size);
}
.receiverButton:focus-visible {
@ -133,11 +131,13 @@
}
.patch {
border-radius: var(--radius-box);
border-radius: var(--radius-selector);
background-color: var(--color-accent-low);
color: var(--color-accent-high);
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
padding-block: var(--s-0-5);
padding-inline: var(--s-2);
height: var(--selector-size-sm);
display: flex;
align-items: center;
}

2
app/features/object-damage-calculator/routes/object-damage-calculator.tsx
View File

@ -82,7 +82,7 @@ export default function ObjectDamagePage() {
<Main className="stack lg">
<div className={styles.controls}>
<div className={styles.selects}>
<div className={styles.selectsWeapon}>
<div>
<Label htmlFor="weapon">{t("analyzer:labels.weapon")}</Label>
<WeaponSelect
includeSubSpecial

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

@ -21,13 +21,13 @@
.tierHeader {
display: flex;
flex-direction: row;
color: var(--color-accent);
color: var(--color-text-accent);
}
.tierHeader::before,
.tierHeader::after {
flex: 1 1;
border-bottom: 3px solid var(--color-accent-low);
border-bottom: 3px solid var(--color-bg-high);
margin: auto;
content: "";
}
@ -52,8 +52,9 @@
}
.userStatus {
border-radius: var(--radius-box);
background-color: var(--color-accent);
border-radius: var(--radius-selector);
height: var(--selector-size-sm);
background-color: var(--color-text-accent);
color: var(--color-text-inverse);
font-size: var(--font-xs);
font-weight: var(--weight-semi);
@ -62,14 +63,12 @@
.userStatusFailed {
background-color: var(--color-error);
color: var(--color-text);
}
.suggestionS {
border-radius: 50%;
border-radius: var(--radius-full);
background-color: var(--color-bg);
color: var(--color-text);
font-weight: var(--weight-bold);
margin-inline-end: var(--s-1);
padding-inline: var(--s-1);
}

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

@ -74,7 +74,7 @@
align-items: center;
gap: var(--s-1);
font-weight: var(--weight-semi);
height: 24px;
height: var(--selector-size);
& img {
height: 24px;

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

@ -75,18 +75,16 @@
}
.arrowControls {
display: flex;
flex-direction: column;
display: grid;
grid-template-rows: 1fr 1fr;
gap: var(--s-1);
margin: auto;
height: 100%;
}
.arrowButton {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
width: var(--field-size-sm);
height: 100%;
padding: var(--s-1);
background: var(--color-bg-high);
@ -152,8 +150,9 @@
}
.customColorLabel {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-2);
cursor: pointer;
}

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

@ -34,6 +34,7 @@
justify-content: space-between;
color: var(--color-text);
transition: 0.1s ease-in-out background-color;
border-radius: 0;
}
a.tableRow:hover {

2
app/features/tournament-bracket/components/Bracket/Elimination.tsx
View File

@ -14,7 +14,7 @@ interface EliminationBracketSideProps {
// these values must match --match-height and gap in bracket.module.css
const MATCH_HEIGHT = 55;
const GAP = 28;
const GAP = 32;
const MATCH_SPACING = MATCH_HEIGHT + GAP;
export function EliminationBracketSide(props: EliminationBracketSideProps) {

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

@ -16,7 +16,7 @@
-ms-overflow-style: none;
scrollbar-width: none;
border: var(--border-style);
border-radius: var(--radius-field);
border-radius: var(--radius-box);
overflow: scroll;
user-select: none;
}
@ -26,13 +26,16 @@
display: flex;
justify-content: space-between;
width: var(--match-width);
margin-block-start: -16px;
margin-block-start: calc(var(--selector-size-xs) * -1);
}
.matchHeaderBox {
background-color: var(--color-bg-higher);
padding: var(--s-0-5) var(--s-1);
border-radius: var(--radius-field);
padding: 0 var(--s-1);
height: var(--selector-size-xs);
display: flex;
align-items: center;
border-radius: var(--radius-selector);
font-size: var(--font-2xs) !important;
font-weight: var(--weight-semi);
color: var(--color-text);
@ -135,7 +138,7 @@ a.match:hover {
display: flex;
flex-direction: column;
justify-content: space-around;
gap: var(--s-6);
gap: var(--s-8);
margin-top: var(--s-6);
flex: 1;
overflow: visible;
@ -152,7 +155,7 @@ a.match:hover {
font-weight: var(--weight-semi);
padding-block: var(--s-2);
width: var(--match-width);
border-radius: var(--radius-field);
border-radius: var(--radius-box);
}
.elimRoundHeaderInfos {

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

@ -27,7 +27,7 @@
column-gap: var(--s-2);
row-gap: var(--s-2);
font-size: var(--font-xs);
grid-template-columns: 2rem 2.25rem 2rem 1fr 3rem;
grid-template-columns: 2rem 3.5rem 2rem 1fr 3rem;
grid-template-areas:
"handle seed logo name sp"
"players players players players players";
@ -64,7 +64,7 @@
}
.teamCard {
grid-template-columns: 2.5rem 2.25rem 2rem 1fr 3rem 1fr;
grid-template-columns: 2.5rem 3.5rem 2rem 1fr 3rem 1fr;
grid-template-areas: "handle seed logo name sp players";
row-gap: 0;
}
@ -152,8 +152,9 @@
align-items: center;
gap: var(--s-1);
background-color: var(--color-bg-higher);
border-radius: var(--radius-box);
padding: var(--s-0-5) var(--s-2);
border-radius: var(--radius-selector);
padding: 0 var(--s-2);
height: var(--selector-size-sm);
font-weight: var(--weight-semi);
}

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

@ -113,15 +113,14 @@
position: absolute;
background-color: var(--color-text-accent);
color: var(--color-text-inverse);
font-weight: var(--weight-semi);
width: 12px;
height: 12px;
border-radius: var(--radius-box);
width: 14px;
height: 14px;
border-radius: var(--radius-full);
font-size: var(--font-2xs);
display: grid;
place-items: center;
top: 14px;
left: 15px;
top: 12px;
left: 12px;
z-index: 1;
}
@ -149,8 +148,9 @@
text-transform: uppercase;
font-size: var(--font-2xs);
font-weight: var(--weight-bold);
padding: var(--s-0-5) var(--s-2);
border-radius: var(--radius-box);
padding: 0 var(--s-2);
border-radius: var(--radius-selector);
height: var(--selector-size-sm);
place-items: center;
width: max-content;
display: flex;

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

@ -1,6 +1,6 @@
.card {
border: var(--border-style);
border-radius: var(--radius-field);
border-radius: var(--radius-box);
margin: 0;
padding: 0;
}

1
app/form/fields/ArrayFormField.tsx
View File

@ -123,6 +123,7 @@ function ArrayItemFieldset({
<legend className={styles.headerLabel}>#{index + 1}</legend>
{canRemove ? (
<SendouButton
shape="circle"
icon={<Trash />}
aria-label="Remove item"
size="small"

10
app/styles/common.css
View File

@ -65,7 +65,7 @@ details summary {
a {
color: var(--color-text-accent);
text-decoration: none;
border-radius: 5px;
border-radius: var(--radius-field);
&:focus-visible {
outline: var(--focus-ring);
@ -123,8 +123,8 @@ input[type="checkbox"] {
appearance: none;
cursor: pointer;
padding: 0;
width: var(--selector-size);
height: var(--selector-size);
width: var(--selector-size-sm);
height: var(--selector-size-sm);
border-radius: calc(var(--radius-selector) / 2);
background-color: var(--color-bg);
border: var(--border-style);
@ -165,8 +165,8 @@ input[type="radio"] {
appearance: none;
cursor: pointer;
vertical-align: middle;
width: var(--selector-size);
height: var(--selector-size);
width: var(--selector-size-sm);
height: var(--selector-size-sm);
background-color: var(--color-bg);
border: var(--border-style);
border-radius: var(--radius-full);

7
app/styles/vars.css
View File

@ -52,8 +52,9 @@ They mostly exist as a base for other vars like --color-text and --color-bg
or highlight color that maintains a high contrast ratio in both light and dark modes
If used as a background color, --color-text-inverse should be used as the text color
Preffer using --color-x-high for info, success, warning, and error texts
It is recommended to use --color-x-low as background colors to ensure a high contrast ratio
Info, success, warning, and error colors:
Preffer using --color-x-high for text
It is recommended to use --color-x-low as the background to ensure a high contrast ratio
You can use --color-x for things like borders and icons
Field icons are defined for both dark and light mode because SVGs
@ -185,7 +186,7 @@ html {
--weight-semi: 500;
--weight-body: 400;
--line-height: 1.4;
--line-height: 1.5;
/*
Tokens used for spacings