blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: global focus-visible

Browse source
This commit is contained in:
wukko 2024-06-24 23:22:19 +06:00
parent 042d2e9cc8
commit 23911cbc92
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 8 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
web/src/components/sidebar/SidebarTab.svelte
View file

@ -65,17 +65,6 @@
opacity: 1;
}
.sidebar-tab:focus-visible {
box-shadow: 0 0 0 3px var(--blue) inset;
outline: none;
z-index: 1;
}
.sidebar-tab.active:focus-visible {
background: var(--blue);
color: var(--sidebar-highlight);
}
@media (hover: hover) {
.sidebar-tab:hover {
opacity: 1;

9
web/src/routes/+layout.svelte
View file

@ -129,7 +129,7 @@
box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
}
:global(button:focus-visible) {
:global(:focus-visible) {
box-shadow: 0 0 0 2px var(--blue) inset;
outline: none;
z-index: 1;
@ -144,6 +144,13 @@
color: var(--primary);
}
/* important is used because active class is toggled by state */
/* and added to the end of the list, taking priority */
:global(.active:focus-visible) {
background: var(--blue) !important;
color: var(--sidebar-highlight) !important;
}
@media (hover: hover) {
:global(button:hover) {
background-color: var(--button-hover);