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;
height: var(--input-height-small);
overflow: hidden;
width: max-content;
}
.iconsContainer {

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

@ -17,6 +17,7 @@
display: grid;
place-items: center;
min-width: max-content;
height: var(--input-height-small);
}
.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" />
</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">
<div className="stack sm">
<div>

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

@ -806,7 +806,7 @@ function VoiceChatInfo({
trigger={
<SendouButton
variant="minimal"
size="small"
size="miniscule"
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 {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
outline: var(--input-focus-ring);
outline-offset: 1px;
}
.roundButton svg {

3
app/styles/common.css
View File

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

48
app/styles/elements.css
View File

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

8
app/styles/layout.css
View File

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

4
app/styles/vars.css
View File

@ -90,11 +90,11 @@ html {
--color-border: var(--color-base-5);
--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%);
--input-height-smaller: 1.5rem;
--input-height-smaller: 1.25rem;
--input-height-small: 2rem;
--input-height: 2.5rem;
--input-height-large: 3rem;