beenull/simple-note
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

changed :focus-visible

Browse source 
used it as css reset, removed --focus-* in :root, added fallback in custom properties used by :focus-visible.
This commit is contained in:
westtle 2024-02-11 16:55:58 +07:00
parent 517341c75b
commit c709711dea
1 changed files with 5 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
assets/styles/style.css
View file

@ -41,17 +41,11 @@
--color-1: var(--black), 80%; --color-1: var(--black), 80%;
--color-2: var(--white); --color-2: var(--white);
--color-3: var(--boulder), 80%; /* Placeholder and Icons */ --color-3: var(--boulder), 80%; /* Placeholder and Icons */
/* Other */
--focus-outline: 0.125rem solid hsl(var(--color-1));
--focus-offset: 0;
} }
:root[data-theme="dark"] { :root[data-theme="dark"] {
--color-1: var(--white), 80%; --color-1: var(--white), 80%;
--color-2: var(--cod-gray); --color-2: var(--cod-gray);
--focus-outline: 0.125rem solid hsl(var(--color-1));
} }
:root[data-theme="light"] .settings__svg--theme-sun { display: none; } :root[data-theme="light"] .settings__svg--theme-sun { display: none; }
@ -112,6 +106,11 @@ ul { list-style: none; }
opacity: 1; opacity: 1;
} }
:focus-visible {
outline: 0.125rem solid hsl(var(--color-1, 0, 0%, 0%));
outline-offset: var(--focus-offset, 0);
}
/* Helper */ /* Helper */
.--flex-column { .--flex-column {
@ -193,8 +192,6 @@ body {
--focus-offset: 0.125rem; --focus-offset: 0.125rem;
color: hsl(var(--color-1)); color: hsl(var(--color-1));
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
} }
@media (hover:hover) { @media (hover:hover) {
@ -255,11 +252,6 @@ body {
transition: color ease-in-out 0.1s; transition: color ease-in-out 0.1s;
} }
.simple-note__input:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
.simple-note__input--title { .simple-note__input--title {
font-family: var(--font-2); font-family: var(--font-2);
font-size: 1.5rem; font-size: 1.5rem;