Rooba
/
nightTab
mirror of https://github.com/zombieFox/nightTab.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[design] improve link focus with keybaord navigation

This commit is contained in:
Kuldeep M 2019-01-15 12:48:52 +00:00
parent 577d52afc9
commit 73bea4a692
1 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
css/link.css
View File

@ -42,6 +42,7 @@
transition: all var(--animation-speed-fast) ease-in-out; transition: all var(--animation-speed-fast) ease-in-out;
} }
.link-item:focus-within,
.link-item:focus, .link-item:focus,
.link-item:hover { .link-item:hover {
transform: scale(1.06); transform: scale(1.06);
@ -77,13 +78,16 @@
justify-content: flex-start; justify-content: flex-start;
} }
.link-panel-front:hover,
.link-panel-front:focus { .link-panel-front:focus {
background-color: var(--gray-03); background-color: var(--gray-03);
outline: 0; outline: 0;
text-decoration: none;
} }
.link-item:hover .link-panel-front, .link-item:focus .link-panel-front,
.link-item:focus .link-panel-front { .link-item:focus-within .link-panel-front,
.link-item:hover .link-panel-front {
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
background-color: var(--gray-03); background-color: var(--gray-03);
@ -177,8 +181,9 @@
justify-content: flex-start; justify-content: flex-start;
} }
.link-item:hover .link-url, .link-item:focus-within .link-url,
.link-item:focus .link-url { .link-item:focus .link-url,
.link-item:hover .link-url {
height: var(--url-height); height: var(--url-height);
} }
@ -198,6 +203,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: all var(--animation-speed-fast) ease-in-out;
} }
.is-link-block .link-letter { .is-link-block .link-letter {
@ -219,6 +225,10 @@
color: var(--white); color: var(--white);
} }
.link-panel-front:focus .link-letter {
color: var(--white);
}
.link-name { .link-name {
margin: 0; margin: 0;
font-size: 0.9em; font-size: 0.9em;
@ -228,6 +238,16 @@
overflow: hidden; overflow: hidden;
max-width: 100%; max-width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: all var(--animation-speed-fast) ease-in-out;
}
.link-item:hover .link-name,
.link-item:focus .link-name {
color: var(--white);
}
.link-panel-front:focus .link-name {
color: var(--white);
} }
.link-empty { .link-empty {
@ -244,13 +264,6 @@
text-align: center; text-align: center;
} }
.is-link-list .link-name {}
.link-item:hover .link-name,
.link-item:focus .link-name {
color: var(--white);
}
.is-edit .link-panel-front, .is-edit .link-panel-front,
.is-edit .link-item:hover .link-panel-front, .is-edit .link-item:hover .link-panel-front,
.is-edit .link-item:focus .link-panel-front { .is-edit .link-item:focus .link-panel-front {