Make links on the HTML5 editor more readable
This also tweaks the focus style to apply to all elements for better keyboard navigation.
This commit is contained in:
parent
f1832a6027
commit
663466b882
1 changed files with 22 additions and 4 deletions
26
misc/dist/html/editor.html
vendored
26
misc/dist/html/editor.html
vendored
|
@ -7,6 +7,14 @@
|
||||||
<title></title>
|
<title></title>
|
||||||
<style type='text/css'>
|
<style type='text/css'>
|
||||||
|
|
||||||
|
*:focus {
|
||||||
|
/* More visible outline for better keyboard navigation. */
|
||||||
|
outline: 0.125rem solid hsl(220, 100%, 62.5%);
|
||||||
|
/* Make the outline always appear above other elements. */
|
||||||
|
/* Otherwise, one of its sides can be hidden by tabs in the Download and More layouts. */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
@ -18,6 +26,20 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: hsl(205, 100%, 75%);
|
||||||
|
text-decoration-color: hsla(205, 100%, 75%, 0.3);
|
||||||
|
text-decoration-thickness: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
filter: brightness(117.5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
filter: brightness(82.5%);
|
||||||
|
}
|
||||||
|
|
||||||
#canvas, #gameCanvas {
|
#canvas, #gameCanvas {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -45,10 +67,6 @@
|
||||||
margin: 0 0.5rem;
|
margin: 0 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:focus {
|
|
||||||
outline: 1px solid #699ce8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:not(:disabled):hover {
|
.btn:not(:disabled):hover {
|
||||||
color: #e0e1e5;
|
color: #e0e1e5;
|
||||||
border-color: #666c7b;
|
border-color: #666c7b;
|
||||||
|
|
Loading…
Reference in a new issue