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

Border and outline styles

Browse Source
This commit is contained in:
hfcRed
2026-01-14 20:32:00 +01:00
parent 10befba10a
commit 78cea765cd
28 changed files with 50 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,7 +24,7 @@
.abilityButton {
padding: var(--s-0-5);
border: 2px solid var(--color-bg-high);
border: var(--border-style);
border-radius: 50%;
background-color: var(--color-bg-ability);
}

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

@@ -2,7 +2,7 @@
width: var(--ability-size);
height: var(--ability-size);
padding: 0;
border: 2px solid var(--color-bg-higher);
border: var(--border-style-high);
border-radius: 50%;
border-right: 0;
border-bottom: 0;

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

@@ -6,7 +6,7 @@
}
.tooltip {
border: 1.75px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded);
background-color: var(--color-bg);
padding: var(--s-1) var(--s-2);

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

@@ -3,7 +3,7 @@
flex-direction: column;
gap: var(--s-6);
padding: var(--s-4);
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded-sm);
background-color: var(--color-bg-medium);
position: relative;
@@ -32,7 +32,7 @@
text-align: center;
background-color: var(--color-bg);
padding: var(--s-2) var(--s-4);
border-block: 2px solid var(--color-border);
border-block: var(--border-style);
}
.customThemeSelectorActions {

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

@@ -1,5 +1,5 @@
.trigger {
border: 2px solid var(--color-bg-higher);
border: var(--border-style-high);
border-radius: 100%;
background-color: transparent;
color: var(--color-text);

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

@@ -3,7 +3,7 @@
font-size: var(--fonts-sm);
outline: none;
line-height: var(--input-line-height);
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded-sm);
background-color: var(--color-bg);
height: var(--input-height);

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

@@ -51,7 +51,7 @@
.modeButton {
padding: var(--s-1);
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded-full);
background-color: var(--color-bg);
color: var(--color-accent);
@@ -70,7 +70,7 @@
}
.modeButton.preselected {
border: 2px solid var(--color-text-accent);
border: var(--border-style-accent);
background-color: var(--color-bg-higher);
}

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

@@ -103,7 +103,7 @@
}
.sideNavFooterButton:focus-visible {
outline: 2px solid var(--color-text-accent);
outline: var(--input-focus-ring);
outline-offset: -2px;
}

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

@@ -3,7 +3,7 @@
width: auto;
align-items: center;
justify-content: center;
border: 2px solid var(--color-text-accent);
border: var(--border-style-accent);
border-radius: var(--rounded-sm);
appearance: none;
background: var(--color-text-accent);
@@ -98,7 +98,7 @@
}
.minimal[data-focus-visible] {
outline: 2px solid var(--color-text-accent);
outline: var(--input-focus-ring);
}
.minimalSuccess {

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

@@ -1,7 +1,7 @@
.group {
height: var(--input-height);
padding: 0 var(--input-padding-inline);
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded-sm);
background-color: var(--color-bg);
outline: none;
@@ -15,7 +15,7 @@
.root[data-open] .group {
border-color: transparent;
outline: 2px solid var(--color-text-accent);
outline: var(--input-focus-ring);
}
.dateInput {

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

@@ -76,7 +76,7 @@
}
.headingContainer {
border-bottom: 2px solid var(--color-border);
border-bottom: var(--border-style);
padding-block-end: var(--s-2);
margin-block-end: var(--s-4);
display: flex;

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

@@ -1,7 +1,7 @@
.content {
max-width: 20rem;
padding: var(--s-2);
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);

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

@@ -1,7 +1,7 @@
.button {
height: var(--input-height);
padding: 0 var(--input-padding-inline);
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded-sm);
background-color: var(--color-bg);
outline: none;
@@ -54,7 +54,7 @@
.popover {
padding: var(--s-1);
width: var(--trigger-width);
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded);
background-color: var(--color-bg);
outline: none;
@@ -97,7 +97,7 @@
display: flex;
gap: var(--s-2);
border-bottom: 2px solid var(--color-border);
border-bottom: var(--border-style);
border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;
accent-color: var(--color-accent);
background-color: var(--color-bg);

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

@@ -17,7 +17,7 @@
width: calc(var(--height) * 1.75);
height: var(--height);
background: var(--color-bg);
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: 99999px;
&:before {
@@ -44,7 +44,7 @@
}
.root[data-focus-visible] .indicator {
outline: 2px solid var(--color-accent-high);
outline: var(--input-focus-ring);
outline-offset: 1px;
}

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

@@ -36,7 +36,6 @@
.searchKbd {
padding: 2px var(--s-1);
border: 1px solid var(--color-border);
border-radius: var(--rounded-sm);
font-size: var(--fonts-xxs);
background-color: var(--color-bg-higher);

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

@@ -11,14 +11,14 @@
width: var(--input-height-small);
height: var(--input-height-small);
padding: 0.25rem;
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: 50%;
color: inherit;
cursor: pointer;
}
.button:focus-visible {
outline: 2px solid var(--color-text-accent);
outline: var(--input-focus-ring);
outline-offset: 1px;
}

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

@@ -4,7 +4,7 @@
}
.userItem:focus-visible {
outline: 2px solid var(--color-text-accent);
outline: var(--input-focus-ring);
}
.avatar {

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

@@ -62,7 +62,7 @@
padding: var(--s-1);
height: 24px;
width: 24px;
border: 2px solid var(--color-border);
border: var(--border-style);
font-size: var(--fonts-xs);
color: var(--color-text-high);
}

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

@@ -15,7 +15,7 @@
.navigateButton {
all: unset;
background-color: var(--color-bg-higher);
border: 2px solid var(--color-border);
border: var(--border-style);
display: flex;
align-items: center;
gap: var(--s-2);
@@ -27,7 +27,7 @@
}
.navigateButton:focus-visible {
outline: 2px solid var(--color-text-accent);
outline: var(--input-focus-ring);
}
@media screen and (min-width: 600px) {
@@ -62,7 +62,7 @@
}
.dayHeader {
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded-sm);
background-color: var(--color-bg-high);
padding: var(--s-2);
@@ -73,7 +73,7 @@
.dayHeaderToday {
background-color: var(--color-bg-higher);
border: 2px solid var(--color-border-high);
border: var(--border-style-high);
}
.dayHeaderWeekday {

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

@@ -32,7 +32,7 @@
}
.avatarWrapperStaff img {
border: 2px solid var(--color-text-accent);
border: var(--border-style-accent);
border-radius: 50%;
}
@@ -92,7 +92,7 @@
.roomButton {
border: 0;
border-bottom: 2px solid var(--color-border);
border-bottom: var(--border-style);
background-color: transparent;
color: var(--color-text-high);
border-radius: var(--rounded) var(--rounded) 0 0;

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

@@ -336,7 +336,7 @@
background-color: var(--color-bg-high);
border-radius: var(--rounded);
padding: var(--s-4);
border: 2px solid var(--color-border);
border: var(--border-style);
}
.postHeader {

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

@@ -6,7 +6,7 @@
display: flex;
align-items: center;
padding: var(--s-2);
border: 2px solid var(--color-border);
border: var(--border-style);
border-top: transparent;
border-radius: 0 0 var(--rounded) var(--rounded);
background-color: var(--color-bg);
@@ -53,7 +53,7 @@
top: 15%;
width: 150px;
max-height: 85vh;
border: 2px solid var(--color-border);
border: var(--border-style);
border-left: transparent;
border-radius: 0 var(--rounded) var(--rounded) 0;
background: var(--color-bg);

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

@@ -1,5 +1,5 @@
.card {
border: 1px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded);
overflow: hidden;
background-color: var(--color-bg);

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

@@ -15,7 +15,7 @@
max-height: min(1000px, 70vh);
-ms-overflow-style: none;
scrollbar-width: none;
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded-sm);
overflow: scroll;
user-select: none;

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

@@ -60,7 +60,7 @@
aspect-ratio: 1;
max-width: 28px;
max-height: 28px;
border: 2px solid var(--color-border);
border: var(--border-style);
display: grid;
place-items: center;
font-size: var(--fonts-md);
@@ -97,7 +97,7 @@
font-size: var(--fonts-md);
font-weight: var(--bold);
color: var(--color-text-high);
border-bottom: 2px solid var(--color-border);
border-bottom: var(--border-style);
width: 100%;
padding-block: var(--s-1);
}

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

@@ -35,7 +35,7 @@
display: flex;
flex: 1;
flex-direction: column;
border-inline-start: 2px solid var(--color-text-accent);
border-inline-start: var(--border-style-accent);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
gap: var(--s-2);
@@ -63,7 +63,7 @@
display: grid;
grid-template-columns: max-content max-content max-content max-content;
border-radius: var(--rounded);
border: 2px solid var(--color-text-accent);
border: var(--border-style-accent);
width: max-content;
margin: 0 auto;
overflow: hidden;
@@ -253,7 +253,7 @@
height: 62px;
font-size: 32px;
border-radius: 100%;
border: 2px solid var(--color-text-accent);
border: var(--border-style-accent);
color: var(--color-text-accent);
display: grid;
place-items: center;

12
app/styles/common.css
View File

@@ -80,7 +80,7 @@ textarea:not([name="text"]) {
min-height: 5rem;
padding: var(--input-padding-block) var(--input-padding-inline);
line-height: var(--input-line-height);
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded-sm);
background-color: var(--color-bg);
outline: none;
@@ -95,7 +95,7 @@ textarea:not([name="text"]) {
input:not(.in-container) {
width: 100%;
box-sizing: border-box;
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded-sm);
background: var(--color-bg);
padding: 0 var(--input-padding-inline);
@@ -128,7 +128,7 @@ input[type="checkbox"] {
height: var(--selector-height);
border-radius: 5px;
background-color: var(--color-bg);
border: 2px solid var(--color-border);
border: var(--border-style);
&:focus-within {
outline: none;
@@ -169,7 +169,7 @@ input[type="radio"] {
width: var(--selector-height);
height: var(--selector-height);
background-color: var(--color-bg);
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: 999999px;
padding: 0;
@@ -238,7 +238,7 @@ select {
all: unset;
width: 100%;
box-sizing: border-box;
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded-sm);
background-color: var(--color-bg);
cursor: pointer;
@@ -280,7 +280,7 @@ select {
}
background-color: var(--color-bg);
border: 2px solid var(--color-border);
border: var(--border-style);
border-radius: var(--rounded-sm);
padding: var(--s-1);
margin: 0.5rem;

4
app/styles/vars.css
View File

@@ -128,6 +128,8 @@ html {
--color-border: var(--color-base-5);
--color-border-high: var(--color-base-4);
--border-style: 2px solid var(--color-border);
--border-style-high: 2px solid var(--color-border-high);
--border-style-accent: 2px solid var(--color-text-accent);
--input-height-smaller: 1.25rem;
--input-height-small: 2rem;
@@ -136,7 +138,7 @@ html {
--input-padding-block: 0.5rem;
--input-padding-inline: 1rem;
--input-line-height: 1.2rem;
--input-focus-ring: 2px solid var(--color-text-accent);
--input-focus-ring: var(--border-style-accent);
--input-focus-ring-error: 2px solid var(--color-error);
--selector-height: 1.25rem;