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%);
}
&:hover {
&:hover,
&:focus-visible {
background-color: var(--color-neutral-100);
}
&: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);
border: 1px solid var(--color-neutral-50);
border-radius: 100px;
outline: none;
transition: 0.2s;
&:hover {
@ -29,6 +28,7 @@
}
&: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);
border: 1px solid var(--color-neutral-300);
border-radius: 100px;
outline: none;
transition: 0.2s;
&:disabled,
@ -20,12 +19,14 @@
cursor: not-allowed;
}
&:hover {
&:hover,
&:focus-visible {
background-color: var(--color-neutral-200);
}
&: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;
&: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;
&: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;
&:focus-visible {
outline: 1px solid var(--color-neutral-950);
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&.primary {

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

@ -33,7 +33,8 @@
outline: none;
&: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;
&:focus-visible {
outline: 1px solid var(--color-neutral-950);
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&:disabled {

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

@ -33,7 +33,8 @@
outline: none;
&: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;
&: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);
}
}

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

@ -52,10 +52,12 @@
transition: 0.2s;
&: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);
background-color: var(--color-neutral-300);
}
@ -64,7 +66,8 @@
color: var(--color-neutral-200);
background-color: var(--color-neutral-950);
&:hover {
&:hover,
&:focus-visible {
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);
border: 1px solid var(--color-neutral-200);
border-radius: 50%;
outline: none;
transition: 0.2s;
&:hover {
&:hover,
&:focus-visible {
color: var(--color-foreground);
}
&:focus-visible {
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&.isFavorite {
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;
transition: 0.2s;
&:focus-visible {
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&.hidden {
display: none;
}
@ -78,7 +83,8 @@
}
}
&:hover .icon {
&:hover .icon,
&:focus-visible .icon {
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-radius: 50px;
&:focus-visible {
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&::before {
position: absolute;
top: -1px;

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

@ -18,6 +18,11 @@
border-radius: 50px;
transition: 0.2s;
&:focus-visible {
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&::after {
position: absolute;
top: 1px;
@ -58,7 +63,8 @@
animation-iteration-count: infinite;
}
&:hover::after {
&:hover::after,
&:focus-visible::after {
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;
&:focus-visible {
outline: 1px solid var(--color-neutral-950);
outline: 2px solid var(--color-neutral-400);
outline-offset: 2px;
}
&.critical {
@ -37,7 +38,8 @@
}
}
&:hover {
&:hover,
&:focus-visible {
background-color: var(--color-neutral-200);
}
}

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

@ -31,7 +31,8 @@
scroll-padding-bottom: 12px;
&: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;
&: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);
}

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

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

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

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