author | ymh <ymh.work@gmail.com> |
Thu, 19 Jan 2017 13:53:17 +0100 | |
changeset 490 | 76da86cf9696 |
parent 476 | 9cffc7f32f14 |
child 546 | 178f9add0784 |
permissions | -rw-r--r-- |
246
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
1 |
.transcript-component { |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
2 |
background-color: $corpus-light-grey; |
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
3 |
padding: 0px; |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
4 |
width: 554px; |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
5 |
box-sizing: border-box; |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
6 |
} |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
7 |
|
254 | 8 |
body.videoscreen .transcript-component { |
9 |
overflow: scroll; |
|
10 |
} |
|
11 |
||
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
12 |
.transcript-component h2 { |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
13 |
position: absolute; |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
14 |
z-index: 1; |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
15 |
width: inherit; |
454
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
16 |
//background: linear-gradient($corpus-light-grey, $corpus-light-grey 50%, transparent); |
256
18f0c3ee9aa5
Add title translation to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
255
diff
changeset
|
17 |
padding-top: 12px; |
454
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
18 |
padding-bottom: 20px; |
254 | 19 |
line-height: 30px; |
256
18f0c3ee9aa5
Add title translation to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
255
diff
changeset
|
20 |
margin: 0px!important; |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
21 |
color: $corpus-blue; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
22 |
font-weight: bold; |
256
18f0c3ee9aa5
Add title translation to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
255
diff
changeset
|
23 |
} |
18f0c3ee9aa5
Add title translation to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
255
diff
changeset
|
24 |
|
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
25 |
.transcript-component h2 .translation{ |
256
18f0c3ee9aa5
Add title translation to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
255
diff
changeset
|
26 |
display: block; |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
27 |
font-weight: normal; |
254 | 28 |
} |
29 |
||
30 |
body.videoscreen .transcript-component h2 { |
|
31 |
padding-bottom: 0px; |
|
32 |
position: static; |
|
246
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
33 |
} |
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
34 |
|
454
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
35 |
body.videoscreen .transcript-component .transcript { |
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
36 |
margin: 0px; |
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
37 |
padding: 154px 20px 0px 20px; |
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
38 |
} |
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
39 |
|
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
40 |
.transcript-component .transcript { |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
41 |
margin: 0px; |
454
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
42 |
padding: 70px 20px 0px 20px; |
246
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
43 |
} |
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
44 |
|
254 | 45 |
body.videoscreen .transcript-component .transcript { |
46 |
padding-top: 0px; |
|
47 |
} |
|
48 |
||
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
49 |
.transcript-component .transcript h3 { |
454
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
50 |
padding: 10px 10px 10px 32px; |
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
51 |
font-weight: bold; |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
52 |
color: $corpus-blue; |
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
53 |
font-size: 12px; |
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
54 |
line-height: 24px; |
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
55 |
} |
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
56 |
|
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
57 |
.transcript-component .transcript .annotations { |
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
58 |
list-style: none; |
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
59 |
margin: 0px; |
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
60 |
padding: 0px; |
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
61 |
} |
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
62 |
|
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
63 |
.transcript-component .transcript .annotations .sentence { |
454
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
64 |
padding: 10px 10px 10px 32px; |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
65 |
color: $corpus-black; |
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
66 |
position: relative; |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
67 |
background-color: transparent; |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
68 |
transition: background-color .15s, color .15s; |
254 | 69 |
min-height: 24px; |
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
70 |
} |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
71 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
72 |
.transcript-component .transcript .annotations .sentence:not(.active):hover { |
248
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
73 |
cursor: pointer; |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
74 |
background-color: $corpus-grey; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
75 |
color: $corpus-white; |
248
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
76 |
} |
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
77 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
78 |
.transcript-component .transcript .annotations .sentence.active { |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
79 |
background-color: $corpus-blue; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
80 |
color: $corpus-white; |
246
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
81 |
} |
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
82 |
|
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
83 |
|
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
84 |
.transcript-component .transcript .annotations .sentence.active .translation { |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
85 |
color: $corpus-white; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
86 |
font-weight: normal; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
87 |
} |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
88 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
89 |
.transcript-component .transcript .annotations .sentence .words { |
255
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
90 |
font-size: 0px; |
454
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
91 |
margin: 5px 0px; |
255
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
92 |
} |
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
93 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
94 |
.transcript-component .transcript .annotations .sentence .words .word { |
255
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
95 |
display: inline-block; |
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
96 |
} |
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
97 |
|
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
98 |
.transcript-component .transcript .annotations .sentence .original { |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
99 |
font-weight: bold; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
100 |
} |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
101 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
102 |
.transcript-component .transcript .annotations .sentence .words .word .original, |
461 | 103 |
.transcript-component .transcript .annotations .sentence .words .word .translation |
104 |
{ |
|
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
105 |
background-color: $corpus-black; |
255
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
106 |
padding: 0px 4px; |
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
107 |
margin-right: 2px; |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
108 |
margin-bottom: 1px; |
255
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
109 |
font-size: 12px; |
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
110 |
} |
461 | 111 |
.transcript-component .transcript .annotations .sentence .words .word .morphene-original, |
112 |
.transcript-component .transcript .annotations .sentence .words .word .morphene-translation { |
|
113 |
background-color: $corpus-dark-grey; |
|
114 |
padding: 0px 2px; |
|
115 |
margin-right: 2px; |
|
116 |
margin-bottom: 1px; |
|
117 |
font-size: 12px; |
|
118 |
} |
|
119 |
||
255
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
120 |
|
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
121 |
.transcript-component .transcript .annotations .sentence:hover .words .word .original, |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
122 |
.transcript-component .transcript .annotations .sentence:hover .words .word .translation { |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
123 |
background-color: $corpus-white; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
124 |
color: $corpus-grey; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
125 |
} |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
126 |
|
461 | 127 |
.transcript-component .transcript .annotations .sentence:hover .words .word .morphene-original, |
128 |
.transcript-component .transcript .annotations .sentence:hover .words .word .morphene-translation { |
|
129 |
background-color: $corpus-light-grey2; |
|
130 |
color: $corpus-grey; |
|
131 |
} |
|
132 |
||
133 |
||
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
134 |
.transcript-component .transcript .annotations .sentence.active .words .word .original, |
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
135 |
.transcript-component .transcript .annotations .sentence.active .words .word .translation { |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
136 |
background-color: $corpus-white; |
461 | 137 |
color: $corpus-blue; |
138 |
} |
|
139 |
||
140 |
.transcript-component .transcript .annotations .sentence.active .words .word .morphene-original, |
|
141 |
.transcript-component .transcript .annotations .sentence.active .words .word .morphene-translation { |
|
142 |
background-color: $corpus-lighter-blue; |
|
143 |
color: $corpus-blue; |
|
255
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
144 |
} |
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
145 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
146 |
.transcript-component .transcript .annotations .sentence .words .word { |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
147 |
color: $corpus-white; |
461 | 148 |
margin-top: 2px; |
255
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
149 |
} |
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
150 |
|
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
151 |
.transcript-component .transcript .annotations .sentence .words .word p { |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
152 |
line-height: 20px; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
153 |
} |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
154 |
|
461 | 155 |
.transcript-component .transcript .annotations .sentence .words .word .morphene-container { |
156 |
line-height: 15px; |
|
157 |
display: -ms-inline-flexbox; |
|
158 |
display: inline-flex; |
|
255
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
159 |
} |
ed05b89e3299
Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
254
diff
changeset
|
160 |
|
461 | 161 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
162 |
.transcript-component .transcript .annotations .sentence .words .word .translation { |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
163 |
margin-bottom: 2px; |
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
164 |
} |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
165 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
166 |
.transcript-component .transcript .annotations .sentence .fa-play { |
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
167 |
position: absolute; |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
168 |
border-style: solid; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
169 |
border-width: 2px; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
170 |
border-color: $corpus-black; |
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
171 |
border-radius: 100%; |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
172 |
width: 24px; |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
173 |
height: 24px; |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
174 |
line-height: 20px; |
457
a7a333c0b1eb
Optimize transcript rendering : remove call to components
ymh <ymh.work@gmail.com>
parents:
454
diff
changeset
|
175 |
left: 2.5px; |
248
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
176 |
cursor: pointer; |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
177 |
opacity: 1; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
178 |
color: $corpus-black; |
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
179 |
} |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
180 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
181 |
.transcript-component .transcript .annotations .sentence .fa-play::before { |
248
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
182 |
margin-left: 3px; |
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
183 |
} |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
184 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
185 |
.transcript-component .transcript .annotations .sentence:not(.active):hover .fa-play { |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
186 |
border-color: $corpus-white; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
187 |
color: $corpus-white; |
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
188 |
} |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
189 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
190 |
.transcript-component .transcript .annotations .sentence p { |
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
191 |
margin: 0; |
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
192 |
line-height: 24px; |
257
eba9edbd8f46
Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents:
256
diff
changeset
|
193 |
} |
eba9edbd8f46
Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents:
256
diff
changeset
|
194 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
195 |
.transcript-component .transcript .annotations .sentence .speaker { |
257
eba9edbd8f46
Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents:
256
diff
changeset
|
196 |
font-weight: bold; |
eba9edbd8f46
Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents:
256
diff
changeset
|
197 |
} |
eba9edbd8f46
Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents:
256
diff
changeset
|
198 |
|
454
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
199 |
.transcript-component .transcript .annotations .sentence .hidden-speaker { |
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
200 |
visibility: hidden; |
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
201 |
} |
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
202 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
203 |
.transcript-component .transcript .annotations .sentence .title { |
257
eba9edbd8f46
Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents:
256
diff
changeset
|
204 |
float: right; |
eba9edbd8f46
Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents:
256
diff
changeset
|
205 |
line-height: 24px; |
eba9edbd8f46
Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents:
256
diff
changeset
|
206 |
padding-left: 20px; |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
207 |
color: $corpus-grey; |
257
eba9edbd8f46
Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents:
256
diff
changeset
|
208 |
font-weight: bold; |
eba9edbd8f46
Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents:
256
diff
changeset
|
209 |
} |
eba9edbd8f46
Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents:
256
diff
changeset
|
210 |
|
258
12c694392e8e
Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
257
diff
changeset
|
211 |
.transcript-component .transcript .annotations .sentence.active .title { |
373
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
212 |
color: $corpus-white; |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
213 |
} |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
214 |
|
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
215 |
.transcript-component .transcript .annotations .sentence:not(.active):hover .title { |
e952c8a31a2b
Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents:
303
diff
changeset
|
216 |
color: $corpus-white; |
454
710a2ae08a74
rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents:
373
diff
changeset
|
217 |
} |