forked from arnog/mathlive
-
Notifications
You must be signed in to change notification settings - Fork 0
/
keystroke-caption.less
63 lines (54 loc) · 1.78 KB
/
keystroke-caption.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
@shadow1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
/* The element that displays the keys as the user type them */
#mathlive-keystroke-caption-panel {
visibility: hidden;
/*min-width: 160px;*/
/*background-color: rgba(97, 97, 200, .95);*/
background: var(--secondary, hsl(var(--_hue), 19%, 26%));
border-color: var(--secondary-border, hsl(0, 0%, 91%));
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
text-align: center;
border-radius: 6px;
padding: 16px;
position: absolute;
z-index: 1;
display: flex;
flex-direction: row-reverse;
justify-content: center;
// For keystroke caption
--keystroke: white;
--on-keystroke: #555;
--keystroke-border: #f7f7f7;
}
@media (prefers-color-scheme: dark) {
body:not([theme='light']) #mathlive-keystroke-caption-panel {
--keystroke: hsl(var(--_hue), 50%, 30%);
--on-keystroke: hsl(0, 0%, 98%);
--keystroke-border: hsl(var(--_hue), 50%, 25%);
}
}
body[theme='dark'] #mathlive-keystroke-caption-panel {
--keystroke: hsl(var(--_hue), 50%, 30%);
--on-keystroke: hsl(0, 0%, 98%);
--keystroke-border: hsl(var(--_hue), 50%, 25%);
}
#mathlive-keystroke-caption-panel > span {
min-width: 14px;
/*height: 8px;*/
margin: 0 8px 0 0;
padding: 4px;
background-color: var(--keystroke);
color: var(--on-keystroke);
fill: currentColor;
font-family: @system;
font-size: 1em;
// text-shadow: 0 1px #fff;
// letter-spacing: -0.07rem;
border-radius: 6px;
border: 2px solid var(--keystroke-border);
/*box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);*/
// box-shadow: @shadow1;
}