Accessibility settings: Proof of concept of better keyboard focus feedback
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
parent
a47679686e
commit
79d94be821
|
@ -1,7 +1,6 @@
|
||||||
#accessibility {
|
// Rules we could port to the rest of Nextcloud too
|
||||||
max-width: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// Proper highlight for links and focus feedback
|
||||||
#accessibility a {
|
#accessibility a {
|
||||||
border-bottom: 1px dotted;
|
border-bottom: 1px dotted;
|
||||||
|
|
||||||
|
@ -11,9 +10,25 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Highlight checkbox label in bold for focus feedback
|
||||||
|
// Drawback: Text width increases a bit
|
||||||
|
#accessibility .checkbox:focus + label {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Limit width of settings sections for readability
|
||||||
|
#accessibility .section p {
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// End of rules we could port to rest of Nextcloud
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.preview-list {
|
.preview-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
max-width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview {
|
.preview {
|
||||||
|
|
Loading…
Reference in New Issue