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

Progress

Browse Source
This commit is contained in:
hfcRed 2025-12-28 13:20:37 +01:00
parent c5fa3c2cf4
commit 93ee069913
9 changed files with 53 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/components/AddNewButton.module.css
View File

@ -2,6 +2,7 @@
padding: 0; padding: 0;
height: var(--input-height-small); height: var(--input-height-small);
overflow: hidden; overflow: hidden;
width: max-content;
} }
.iconsContainer { .iconsContainer {

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

@ -17,6 +17,7 @@
display: grid; display: grid;
place-items: center; place-items: center;
min-width: max-content; min-width: max-content;
height: var(--input-height-small);
} }
.tag[data-selected] { .tag[data-selected] {

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

@ -2172,6 +2172,16 @@ function MiscSection({ id }: { id: string }) {
<input type="password" placeholder="Enter password" /> <input type="password" placeholder="Enter password" />
</ComponentRow> </ComponentRow>
<ComponentRow label="HTML Select">
<select>
{SELECT_ITEMS.map((item) => (
<option key={item.id} value={item.id}>
{item.name}
</option>
))}
</select>
</ComponentRow>
<ComponentRow label="HTML Tags"> <ComponentRow label="HTML Tags">
<div className="stack sm"> <div className="stack sm">
<div> <div>

2
app/features/sendouq/components/GroupCard.tsx
View File

@ -806,7 +806,7 @@ function VoiceChatInfo({
trigger={ trigger={
<SendouButton <SendouButton
variant="minimal" variant="minimal"
size="small" size="miniscule"
icon={<Icon className={clsx(styles.vcIcon, color())} />} icon={<Icon className={clsx(styles.vcIcon, color())} />}
/> />
} }

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

@ -48,8 +48,8 @@
} }
.roundButton:focus-visible { .roundButton:focus-visible {
outline: 2px solid var(--color-accent); outline: var(--input-focus-ring);
outline-offset: 2px; outline-offset: 1px;
} }
.roundButton svg { .roundButton svg {

3
app/styles/common.css
View File

@ -8,6 +8,7 @@
html { html {
color-scheme: light dark; color-scheme: light dark;
accent-color: var(--color-accent); accent-color: var(--color-accent);
scrollbar-gutter: stable;
} }
body { body {
@ -1517,7 +1518,7 @@ html[dir="rtl"] .fix-rtl {
} }
#nprogress .bar { #nprogress .bar {
background: var(--color-accent) !important; background: var(--color-text-accent) !important;
} }
#nprogress .spinner { #nprogress .spinner {

48
app/styles/elements.css
View File

@ -21,17 +21,18 @@
} }
.react-aria-DatePicker .react-aria-Group { .react-aria-DatePicker .react-aria-Group {
display: flex; height: var(--input-height);
padding: 0 var(--input-padding-inline);
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: var(--rounded-sm); border-radius: var(--rounded-sm);
accent-color: var(--color-accent);
background-color: var(--color-bg); background-color: var(--color-bg);
color: var(--color-text);
font-size: var(--fonts-sm);
outline: none; outline: none;
height: 1rem; display: flex;
padding: var(--s-4) var(--s-3); align-items: center;
width: var(--input-width, var(--input-width-medium)); justify-content: space-between;
gap: var(--s-1-5);
width: 100%;
cursor: pointer;
} }
.react-aria-DatePicker[data-open] .react-aria-Group { .react-aria-DatePicker[data-open] .react-aria-Group {
@ -41,24 +42,28 @@
.react-aria-DatePicker .react-aria-DateInput { .react-aria-DatePicker .react-aria-DateInput {
display: flex; display: flex;
margin-block-start: -11px;
} }
.react-aria-DateSegment { .react-aria-DateSegment:not([data-type="literal"]) {
outline-color: var(--color-accent-low); padding: 0 var(--s-1);
border-radius: 5px;
}
.react-aria-DateSegment:focus-visible {
background-color: var(--color-bg-high);
color: var(--color-text-accent);
outline: none;
} }
.react-aria-DatePicker .react-aria-Button { .react-aria-DatePicker .react-aria-Button {
margin-inline-start: auto; margin-inline-start: auto;
background-color: transparent; background-color: transparent;
border: none; border: none;
margin-block-start: -9px;
margin-inline-end: -8px;
outline: none; outline: none;
} }
.react-aria-DatePicker svg { .react-aria-DatePicker svg {
fill: var(--color-text-high); fill: var(--color-text);
width: 17.5px; width: 17.5px;
} }
@ -67,6 +72,7 @@
border-radius: var(--rounded); border-radius: var(--rounded);
padding: var(--s-4); padding: var(--s-4);
border: var(--border-style); border: var(--border-style);
max-width: fit-content;
} }
.react-aria-Calendar header { .react-aria-Calendar header {
@ -88,6 +94,11 @@
border: none; border: none;
padding: 0; padding: 0;
border-radius: 100%; border-radius: 100%;
&:focus-visible {
outline: var(--input-focus-ring);
outline-offset: 1px;
}
} }
.react-aria-Calendar .react-aria-Button svg { .react-aria-Calendar .react-aria-Button svg {
@ -95,10 +106,6 @@
width: 27.5px; width: 27.5px;
} }
.react-aria-DatePicker .react-aria-Button[data-focused] svg {
fill: var(--color-text-accent);
}
.react-aria-CalendarGrid { .react-aria-CalendarGrid {
width: 100%; width: 100%;
} }
@ -116,6 +123,11 @@
height: 35px; height: 35px;
border-radius: var(--rounded-sm); border-radius: var(--rounded-sm);
outline-color: var(--color-accent); outline-color: var(--color-accent);
&.react-aria-CalendarCell:focus-visible {
outline: var(--input-focus-ring);
outline-offset: 1px;
}
} }
.react-aria-CalendarCell[data-outside-month] { .react-aria-CalendarCell[data-outside-month] {
@ -188,7 +200,7 @@
.react-aria-Switch[data-focus-visible] .indicator { .react-aria-Switch[data-focus-visible] .indicator {
outline: 2px solid var(--color-accent-high); outline: 2px solid var(--color-accent-high);
outline-offset: 2px; outline-offset: 1px;
} }
.react-aria-Switch[data-disabled] .indicator { .react-aria-Switch[data-disabled] .indicator {

8
app/styles/layout.css
View File

@ -29,7 +29,7 @@
&:focus-visible { &:focus-visible {
outline: var(--input-focus-ring); outline: var(--input-focus-ring);
outline-offset: 2px; outline-offset: 1px;
border-radius: 9999px; border-radius: 9999px;
} }
} }
@ -45,7 +45,7 @@
.logo:focus-visible { .logo:focus-visible {
outline: var(--input-focus-ring); outline: var(--input-focus-ring);
outline-offset: 2px; outline-offset: 1px;
border-radius: var(--rounded); border-radius: var(--rounded);
} }
@ -98,19 +98,19 @@
} }
.layout__header__button { .layout__header__button {
background-color: var(--color-bg);
width: var(--item-size); width: var(--item-size);
height: var(--item-size); height: var(--item-size);
padding: 0.25rem; padding: 0.25rem;
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: 50%; border-radius: 50%;
background-color: transparent;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
} }
.layout__header__button:focus-visible { .layout__header__button:focus-visible {
outline: 2px solid var(--color-text-accent); outline: 2px solid var(--color-text-accent);
outline-offset: 2px; outline-offset: 1px;
} }
.layout__user-item { .layout__user-item {

4
app/styles/vars.css
View File

@ -90,11 +90,11 @@ html {
--color-border: var(--color-base-5); --color-border: var(--color-base-5);
--color-border-high: var(--color-base-4); --color-border-high: var(--color-base-4);
--border-style: 1px solid var(--color-border); --border-style: 2px solid var(--color-border);
--backdrop-filter: blur(10px) brightness(95%); --backdrop-filter: blur(10px) brightness(95%);
--input-height-smaller: 1.5rem; --input-height-smaller: 1.25rem;
--input-height-small: 2rem; --input-height-small: 2rem;
--input-height: 2.5rem; --input-height: 2.5rem;
--input-height-large: 3rem; --input-height-large: 3rem;