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:
Hugo Locurcio 2021-01-07 18:46:26 +01:00
parent f1832a6027
commit 663466b882
No known key found for this signature in database
GPG Key ID: 39E8F8BE30B0A49C
1 changed files with 22 additions and 4 deletions

View File

@ -7,6 +7,14 @@
<title></title>
<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 {
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";
@ -18,6 +26,20 @@
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 {
display: block;
margin: 0;
@ -45,10 +67,6 @@
margin: 0 0.5rem;
}
.btn:focus {
outline: 1px solid #699ce8;
}
.btn:not(:disabled):hover {
color: #e0e1e5;
border-color: #666c7b;