diff --git a/app/features/sendouq/components/GroupCard.tsx b/app/features/sendouq/components/GroupCard.tsx
index ad1d650c4..65c2a6385 100644
--- a/app/features/sendouq/components/GroupCard.tsx
+++ b/app/features/sendouq/components/GroupCard.tsx
@@ -806,7 +806,7 @@ function VoiceChatInfo({
trigger={
}
/>
}
diff --git a/app/features/tournament-bracket/components/BracketMapListDialog.module.css b/app/features/tournament-bracket/components/BracketMapListDialog.module.css
index 4f9ee80f2..5041a0191 100644
--- a/app/features/tournament-bracket/components/BracketMapListDialog.module.css
+++ b/app/features/tournament-bracket/components/BracketMapListDialog.module.css
@@ -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 {
diff --git a/app/styles/common.css b/app/styles/common.css
index 79b683ab3..aee236721 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -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 {
diff --git a/app/styles/elements.css b/app/styles/elements.css
index 00eda5795..eec072352 100644
--- a/app/styles/elements.css
+++ b/app/styles/elements.css
@@ -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 {
diff --git a/app/styles/layout.css b/app/styles/layout.css
index a6d99c236..234dd6af0 100644
--- a/app/styles/layout.css
+++ b/app/styles/layout.css
@@ -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 {
diff --git a/app/styles/vars.css b/app/styles/vars.css
index 90679f1dd..79d12220e 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -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;