Merge pull request #44995 from Calinou/html5-editor-improve-link-color-visibility

Make links on the HTML5 editor more readable
This commit is contained in:
Rémi Verschelde 2021-01-07 19:14:02 +01:00 committed by GitHub
commit 8ba67b728e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

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;