toolkit/themes/shared/narrate.css


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

.narrating {
  position: relative;
  z-index: 1;
}

body.light .narrating {
  background-color: #ffc;
}

body.sepia .narrating {
  background-color: #e0d7c5;
}

body.dark .narrating {
  background-color: #242424;
}

.narrate-word-highlight {
  position: absolute;
  display: none;
  transform: translate(-50%, calc(-50% - 2px));
  z-index: -1;
  border-bottom-style: solid;
  border-bottom-width: 7px;
  transition: left 0.1s ease;
}

.narrating > .narrate-word-highlight {
  display: inline-block;
}

.narrate-word-highlight.newline {
  transition: none;
}

body.light .narrate-word-highlight {
  border-bottom-color: #ffe087;
}

body.sepia .narrate-word-highlight {
  border-bottom-color: #bdb5a5;
}

body.dark .narrate-word-highlight {
  border-bottom-color: #6f6f6f;
}