Enable focus for tabs and display
You can now switch tabs from the keyboard using the usual radio button interaction.
This commit is contained in:
parent
69ab888d5b
commit
2efc08d6c0
@ -14,10 +14,15 @@ body {
|
|||||||
canvas {
|
canvas {
|
||||||
float: left;
|
float: left;
|
||||||
background-color: #020202;
|
background-color: #020202;
|
||||||
|
border: 1px solid #555;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
canvas:focus {
|
||||||
|
border-color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -29,7 +34,12 @@ canvas {
|
|||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
display: none;
|
appearance: none;
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-pane > label {
|
.tab-pane > label {
|
||||||
@ -46,6 +56,10 @@ input[type="radio"] {
|
|||||||
background-color: #555;
|
background-color: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tab-pane > label:has(:focus-visible) {
|
||||||
|
outline: medium auto currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
.tab-pane > label:hover:not(:has(:checked)) {
|
.tab-pane > label:hover:not(:has(:checked)) {
|
||||||
border-color: #bbb;
|
border-color: #bbb;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
|
@ -482,7 +482,7 @@ fn main() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
div { "Mean frame interval: " (mean_frame_interval.get()) " ms" }
|
div { "Mean frame interval: " (mean_frame_interval.get()) " ms" }
|
||||||
canvas(ref=display, width="600", height="600")
|
canvas(ref=display, width=600, height=600, tabindex=0)
|
||||||
div(ref=gen_controls) {
|
div(ref=gen_controls) {
|
||||||
label(class="control") {
|
label(class="control") {
|
||||||
span { "Sphere 0 depth" }
|
span { "Sphere 0 depth" }
|
||||||
|
Loading…
Reference in New Issue
Block a user