| 1 | .narrating { |
| 2 | position: relative; |
| 3 | z-index: 1; |
| 4 | } |
| 5 | |
| 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 | } |
| 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; |
| 25 | transition: left 0.1s ease, width 0.1s ease; |
| 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 | } |