use box-shadow instead of outline for focus everywhere

This commit is contained in:
tophf 2020-10-12 07:29:56 +03:00
parent 5efda1d00d
commit e843660f12
2 changed files with 13 additions and 3 deletions

View File

@ -8,15 +8,18 @@
.CodeMirror { .CodeMirror {
border: solid #CCC 1px; border: solid #CCC 1px;
} }
#stylus#stylus .CodeMirror {
/* Using a specificity hack to override userstyles */
/* Not using the ring-color hack as it became ugly in new Chrome */
outline: none !important;
}
.CodeMirror-lint-mark-warning { .CodeMirror-lint-mark-warning {
background: none; background: none;
} }
.CodeMirror-dialog { .CodeMirror-dialog {
-webkit-animation: highlight 3s cubic-bezier(.18, .02, 0, .94); -webkit-animation: highlight 3s cubic-bezier(.18, .02, 0, .94);
} }
.CodeMirror-focused { /* .CodeMirror-focused is defined in global.css */
outline: #7dadd9 auto 1px; /* not using the ring-color hack as it became ugly in new Chrome */
}
#sections[data-section-count="1"] .CodeMirror { #sections[data-section-count="1"] .CodeMirror {
outline: none !important; outline: none !important;
} }

View File

@ -208,9 +208,16 @@ select[disabled] + .select-arrow {
display: none !important; display: none !important;
} }
:focus,
.CodeMirror-focused {
/* Using box-shadow instead of the ugly outline in new Chrome */
outline: none;
box-shadow: 0 0 0 1px hsl(180, 100%, 38%), 0 0 3px hsla(180, 100%, 60%, .5);
}
[data-focused-via-click] :focus, [data-focused-via-click] :focus,
[data-focused-via-click]:focus { [data-focused-via-click]:focus {
outline: none; outline: none;
box-shadow: none;
} }
@supports (-moz-appearance: none) { @supports (-moz-appearance: none) {