diff --git a/app-proto/inversive-display/main.css b/app-proto/inversive-display/main.css index a16d04a..f8f7a96 100644 --- a/app-proto/inversive-display/main.css +++ b/app-proto/inversive-display/main.css @@ -14,10 +14,15 @@ body { canvas { float: left; background-color: #020202; + border: 1px solid #555; border-radius: 10px; margin-top: 5px; } +canvas:focus { + border-color: #aaa; +} + .hidden { display: none; } @@ -29,7 +34,12 @@ canvas { } input[type="radio"] { - display: none; + appearance: none; + width: 0px; + height: 0px; + padding: 0px; + margin: 0px; + outline: none; } .tab-pane > label { @@ -46,6 +56,10 @@ input[type="radio"] { background-color: #555; } +.tab-pane > label:has(:focus-visible) { + outline: medium auto currentColor; +} + .tab-pane > label:hover:not(:has(:checked)) { border-color: #bbb; background-color: #333; diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs index 6e6a0e8..3dd4653 100644 --- a/app-proto/inversive-display/src/main.rs +++ b/app-proto/inversive-display/src/main.rs @@ -482,7 +482,7 @@ fn main() { } } 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) { label(class="control") { span { "Sphere 0 depth" }