hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 08:54:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: better outlines for accessibility

Browse source
This commit is contained in:
MAZE 2024-04-23 17:06:35 +03:30
parent e7d7a37a12
commit 3c8d75b018
17 changed files with 86 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/about/about.module.css
View file

@ -83,12 +83,14 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
&:hover { &:hover,
&:focus-visible {
background-color: var(--color-neutral-100); background-color: var(--color-neutral-100);
} }
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
} }
} }

4
src/components/buttons/play/play.module.css
View file

@ -12,7 +12,6 @@
background-color: var(--color-neutral-950); background-color: var(--color-neutral-950);
border: 1px solid var(--color-neutral-50); border: 1px solid var(--color-neutral-50);
border-radius: 100px; border-radius: 100px;
outline: none;
transition: 0.2s; transition: 0.2s;
&:hover { &:hover {
@ -29,6 +28,7 @@
} }
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
} }

7
src/components/buttons/unselect/unselect.module.css
View file

@ -12,7 +12,6 @@
background-color: var(--color-neutral-100); background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-300); border: 1px solid var(--color-neutral-300);
border-radius: 100px; border-radius: 100px;
outline: none;
transition: 0.2s; transition: 0.2s;
&:disabled, &:disabled,
@ -20,12 +19,14 @@
cursor: not-allowed; cursor: not-allowed;
} }
&:hover { &:hover,
&:focus-visible {
background-color: var(--color-neutral-200); background-color: var(--color-neutral-200);
} }
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
} }

3
src/components/modal/modal.module.css
View file

@ -54,7 +54,8 @@
outline: none; outline: none;
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
} }
} }

6
src/components/modals/presets/list/list.module.css
View file

@ -36,7 +36,8 @@
outline: none; outline: none;
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
} }
@ -56,7 +57,8 @@
outline: none; outline: none;
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
&.primary { &.primary {

6
src/components/modals/presets/new/new.module.css
View file

@ -33,7 +33,8 @@
outline: none; outline: none;
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
} }
@ -53,7 +54,8 @@
outline: none; outline: none;
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
&:disabled { &:disabled {

9
src/components/modals/share-link/share-link.module.css
View file

@ -33,7 +33,8 @@
outline: none; outline: none;
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
} }
@ -52,10 +53,12 @@
transition: 0.2s; transition: 0.2s;
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
&:hover { &:hover,
&:focus-visible {
background-color: var(--color-neutral-200); background-color: var(--color-neutral-200);
} }
} }

9
src/components/modals/shared/shared.module.css
View file

@ -52,10 +52,12 @@
transition: 0.2s; transition: 0.2s;
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
&:hover { &:hover,
&:focus-visible {
color: var(--color-foreground); color: var(--color-foreground);
background-color: var(--color-neutral-300); background-color: var(--color-neutral-300);
} }
@ -64,7 +66,8 @@
color: var(--color-neutral-200); color: var(--color-neutral-200);
background-color: var(--color-neutral-950); background-color: var(--color-neutral-950);
&:hover { &:hover,
&:focus-visible {
background-color: var(--color-neutral-800); background-color: var(--color-neutral-800);
} }
} }

13
src/components/sound/favorite/favorite.module.css
View file

@ -14,18 +14,19 @@
background-color: var(--color-neutral-100); background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-200); border: 1px solid var(--color-neutral-200);
border-radius: 50%; border-radius: 50%;
outline: none;
transition: 0.2s; transition: 0.2s;
&:hover { &:hover,
&:focus-visible {
color: var(--color-foreground); color: var(--color-foreground);
} }
&:focus-visible {
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&.isFavorite { &.isFavorite {
color: var(--color-foreground); color: var(--color-foreground);
} }
&:focus-visible {
outline: 1px solid var(--color-neutral-950);
}
} }

8
src/components/sound/sound.module.css
View file

@ -11,6 +11,11 @@
border-radius: 8px; border-radius: 8px;
transition: 0.2s; transition: 0.2s;
&:focus-visible {
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&.hidden { &.hidden {
display: none; display: none;
} }
@ -78,7 +83,8 @@
} }
} }
&:hover .icon { &:hover .icon,
&:focus-visible .icon {
color: var(--color-foreground-subtle); color: var(--color-foreground-subtle);
} }

5
src/components/sounds/sounds.module.css
View file

@ -21,6 +21,11 @@
border: 1px solid var(--color-neutral-200); border: 1px solid var(--color-neutral-200);
border-radius: 50px; border-radius: 50px;
&:focus-visible {
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&::before { &::before {
position: absolute; position: absolute;
top: -1px; top: -1px;

8
src/components/special-button/special-button.module.css
View file

@ -18,6 +18,11 @@
border-radius: 50px; border-radius: 50px;
transition: 0.2s; transition: 0.2s;
&:focus-visible {
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&::after { &::after {
position: absolute; position: absolute;
top: 1px; top: 1px;
@ -58,7 +63,8 @@
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
&:hover::after { &:hover::after,
&:focus-visible::after {
background-color: var(--color-neutral-100); background-color: var(--color-neutral-100);
} }
} }

6
src/components/toolbox/notepad/button/button.module.css
View file

@ -15,7 +15,8 @@
transition-property: border-color, color, background-color; transition-property: border-color, color, background-color;
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
&.critical { &.critical {
@ -37,7 +38,8 @@
} }
} }
&:hover { &:hover,
&:focus-visible {
background-color: var(--color-neutral-200); background-color: var(--color-neutral-200);
} }
} }

3
src/components/toolbox/notepad/notepad.module.css
View file

@ -31,7 +31,8 @@
scroll-padding-bottom: 12px; scroll-padding-bottom: 12px;
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
} }

6
src/components/toolbox/pomodoro/button/button.module.css
View file

@ -14,10 +14,12 @@
transition: 0.2s; transition: 0.2s;
&:focus-visible { &:focus-visible {
outline: 1px solid var(--color-neutral-950); outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
} }
&:hover { &:hover,
&:focus-visible {
background-color: var(--color-neutral-200); background-color: var(--color-neutral-200);
} }

10
src/components/toolbox/pomodoro/setting/setting.module.css
View file

@ -33,6 +33,11 @@
border: 1px solid var(--color-neutral-200); border: 1px solid var(--color-neutral-200);
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
&:focus-visible {
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
} }
} }
@ -57,6 +62,11 @@
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
&:focus-visible {
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&.primary { &.primary {
color: var(--color-neutral-100); color: var(--color-neutral-100);
background-color: var(--color-neutral-950); background-color: var(--color-neutral-950);

9
src/components/toolbox/pomodoro/tabs/tabs.module.css
View file

@ -20,15 +20,22 @@
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
outline: none;
transition: 0.2s; transition: 0.2s;
&:focus-visible {
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&.selected { &.selected {
color: var(--color-foreground); color: var(--color-foreground);
background-color: var(--color-neutral-200); background-color: var(--color-neutral-200);
border-color: var(--color-neutral-300); border-color: var(--color-neutral-300);
} }
&:not(.selected):hover { &:not(.selected):hover,
&:not(.selected):focus-visible {
color: var(--color-foreground); color: var(--color-foreground);
background-color: var(--color-neutral-100); background-color: var(--color-neutral-100);
} }