1 .transcript-component { |
1 .transcript-component { |
2 background-color: $light-blue; |
2 background-color: $light-blue; |
3 padding: 0px; |
3 padding: 0px; |
4 width: 554px; |
4 width: 554px; |
5 box-sizing: border-box; |
5 box-sizing: border-box; |
|
6 } |
|
7 |
|
8 body.videoscreen .transcript-component { |
|
9 overflow: scroll; |
6 } |
10 } |
7 |
11 |
8 .transcript-component h2 { |
12 .transcript-component h2 { |
9 position: absolute; |
13 position: absolute; |
10 z-index: 1; |
14 z-index: 1; |
11 width: inherit; |
15 width: inherit; |
12 background: linear-gradient($light-blue, $light-blue 50%, transparent); |
16 background: linear-gradient($light-blue, $light-blue 50%, transparent); |
13 padding-bottom: 54px; |
17 padding-bottom: 54px; |
|
18 line-height: 30px; |
|
19 margin: 12px auto; |
|
20 } |
|
21 |
|
22 body.videoscreen .transcript-component h2 { |
|
23 padding-bottom: 0px; |
|
24 position: static; |
14 } |
25 } |
15 |
26 |
16 .transcript-component .transcript { |
27 .transcript-component .transcript { |
17 list-style: none; |
28 list-style: none; |
18 margin: 0px; |
29 margin: 0px; |
19 padding: 154px 20px 0px 20px; |
30 padding: 154px 20px 0px 20px; |
20 } |
31 } |
21 |
32 |
|
33 body.videoscreen .transcript-component .transcript { |
|
34 padding-top: 0px; |
|
35 } |
|
36 |
22 .transcript-component .transcript .sentence { |
37 .transcript-component .transcript .sentence { |
23 padding: 20px 20px 20px 64px; |
38 padding: 20px 20px 20px 64px; |
24 color: $medium-grey; |
39 color: $medium-grey; |
25 position: relative; |
40 position: relative; |
26 background-color: transparent; |
41 background-color: transparent; |
27 transition: background-color .15s, color .15s; |
42 transition: background-color .15s, color .15s; |
|
43 min-height: 24px; |
28 } |
44 } |
29 |
45 |
30 .transcript-component .transcript .sentence:not(.active):hover { |
46 .transcript-component .transcript .sentence:not(.active):hover { |
31 cursor: pointer; |
47 cursor: pointer; |
32 background-color: $medium-grey-5; |
48 background-color: $medium-grey-5; |