Commit | Line | Data |
---|---|---|
987dae1b RK |
1 | .narrating { |
2 | position: relative; | |
3 | z-index: 1; | |
4 | } | |
5 | ||
7729765c RK |
6 | body.light .narrating { |
7 | background-color: #ffc; | |
8 | } | |
9 | ||
10 | body.sepia .narrating { | |
11 | background-color: #e0d7c5; | |
12 | } | |
13 | ||
14 | body.dark .narrating { | |
15 | background-color: #242424; | |
16 | } | |
987dae1b RK |
17 | |
18 | .narrate-word-highlight { | |
19 | position: absolute; | |
20 | display: none; | |
21 | transform: translate(-50%, calc(-50% - 2px)); | |
22 | z-index: -1; | |
23 | border-bottom-style: solid; | |
24 | border-bottom-width: 7px; | |
a9f6369d | 25 | transition: left 0.1s ease, width 0.1s ease; |
987dae1b RK |
26 | } |
27 | ||
28 | .narrating > .narrate-word-highlight { | |
29 | display: inline-block; | |
30 | } | |
31 | ||
32 | .narrate-word-highlight.newline { | |
33 | transition: none; | |
34 | } | |
35 | ||
36 | body.light .narrate-word-highlight { | |
37 | border-bottom-color: #ffe087; | |
38 | } | |
39 | ||
40 | body.sepia .narrate-word-highlight { | |
41 | border-bottom-color: #bdb5a5; | |
42 | } | |
43 | ||
44 | body.dark .narrate-word-highlight { | |
45 | border-bottom-color: #6f6f6f; | |
46 | } |