[mod] Added stylised outline

This commit removes all outline: none,
as this makes keyboard navigation near impossible
Instead, a mixin and element rules are used to style the outline
This commit is contained in:
Denperidge 2025-02-26 18:39:52 +01:00 committed by Markus Heiser
parent 583007fd04
commit 6a609b632a
5 changed files with 17 additions and 12 deletions

View File

@ -38,3 +38,11 @@
color: var(--color-btn-font); color: var(--color-btn-font);
} }
} }
.focus-outline (@zIndex: 5000, @color: var(--color-base-font)) {
&:focus {
outline: 1.5px solid @color;
outline-offset: 3px;
z-index: @zIndex;
}
}

View File

@ -77,7 +77,6 @@ table {
select:focus, select:focus,
input:focus { input:focus {
outline: none;
box-shadow: 0 0 1px 1px var(--color-btn-background); box-shadow: 0 0 1px 1px var(--color-btn-background);
} }
} }

View File

@ -157,7 +157,7 @@ button.category_button {
padding: 0.8rem 0.2rem; padding: 0.8rem 0.2rem;
background: none repeat scroll 0 0 var(--color-search-background); background: none repeat scroll 0 0 var(--color-search-background);
border: none; border: none;
outline: none; .focus-outline;
color: var(--color-search-font); color: var(--color-search-font);
font-size: 1.1rem; font-size: 1.1rem;
z-index: 1000; z-index: 1000;
@ -182,7 +182,7 @@ html.no-js #clear_search.hide_if_nojs {
padding: 0.8rem; padding: 0.8rem;
background: none repeat scroll 0 0 var(--color-search-background); background: none repeat scroll 0 0 var(--color-search-background);
border: none; border: none;
outline: none; .focus-outline;
color: var(--color-search-font); color: var(--color-search-font);
font-size: 1.1rem; font-size: 1.1rem;
z-index: 100; z-index: 100;

View File

@ -173,6 +173,13 @@ article[data-vim-selected].category-social {
.rounded-corners; .rounded-corners;
} }
a,
button,
input,
select {
.focus-outline;
}
.result { .result {
margin: @results-margin 0; margin: @results-margin 0;
padding: @result-padding; padding: @result-padding;
@ -199,7 +206,6 @@ article[data-vim-selected].category-social {
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
border: none; border: none;
outline: none;
} }
} }
} }
@ -467,7 +473,6 @@ article[data-vim-selected].category-social {
& > a { & > a {
position: relative; position: relative;
outline: none;
} }
img { img {

View File

@ -366,7 +366,6 @@ select {
background-size: 2rem; background-size: 2rem;
background-origin: content-box; background-origin: content-box;
background-color: var(--color-toolkit-select-background); background-color: var(--color-toolkit-select-background);
outline: medium none;
text-overflow: ellipsis; text-overflow: ellipsis;
.rounded-corners-tiny; .rounded-corners-tiny;
@ -412,12 +411,6 @@ input.checkbox-onoff[type="checkbox"] {
border-radius: 10px; border-radius: 10px;
position: relative; position: relative;
/* focus & hover */
&:focus,
&:hover {
outline: none;
}
&:focus::after { &:focus::after {
content: ""; content: "";
position: absolute; position: absolute;