Simon Rozman
c27f9628f4
This adjusts markup color slightly for the dark display, makes it fully opaque, alternates the squiggly line between grammar and spelling mistakes to visualize one-word-two-mistake-types, paints most important mistakes last/on top etc. All to make the markup as visible as possible.
68 lines
1.2 KiB
CSS
68 lines
1.2 KiB
CSS
/* Mistake types styles */
|
|
.bes-highlight-rect {
|
|
position: absolute;
|
|
cursor: text;
|
|
}
|
|
|
|
.bes-highlight-spelling {
|
|
color: hsl(211, 100%, 60%);
|
|
background: hsla(211, 100%, 60%, 0.3);
|
|
}
|
|
|
|
.bes-highlight-grammar {
|
|
color: hsl(27, 100%, 45%);
|
|
background: hsla(27, 100%, 45%, 0.3);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.bes-highlight-spelling {
|
|
color: hsl(211, 100%, 55%);
|
|
background: hsla(211, 100%, 55%, 0.3);
|
|
}
|
|
|
|
.bes-highlight-grammar {
|
|
color: hsl(27, 100%, 65%);
|
|
background: hsla(27, 100%, 65%, 0.3);
|
|
}
|
|
}
|
|
|
|
/* Styles required to ensure full functionality and optimal user experience. */
|
|
.bes-correction-panel {
|
|
position: relative;
|
|
overflow: visible;
|
|
float: left;
|
|
display: inline;
|
|
width: 0px;
|
|
height: 0px;
|
|
border: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.bes-scroll-panel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-color: transparent;
|
|
color: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bes-canvas {
|
|
position: relative;
|
|
z-index: 3;
|
|
cursor: text;
|
|
}
|
|
|
|
.bes-text-panel {
|
|
position: absolute;
|
|
margin: 0px;
|
|
color: transparent;
|
|
border-color: transparent;
|
|
background: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.bes-highlight-placeholder {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|