Make links on the HTML5 editor more readable

This also tweaks the focus style to apply to all elements for
better keyboard navigation.

1 files changed, 22 insertions, 4 deletions

diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html
index 18c759ace8..de3cd07a93 100644
--- a/misc/dist/html/editor.html
+++ b/misc/dist/html/editor.html
@@ -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;