| author | Chloe Laisne <chloe.laisne@gmail.com> |
| Fri, 05 Aug 2016 14:55:45 +0200 | |
| changeset 251 | ac320de33ec7 |
| parent 248 | 256272c33349 |
| child 254 | a7cf2887e993 |
| permissions | -rw-r--r-- |
|
246
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
1 |
.transcript-component { |
|
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
2 |
background-color: $light-blue; |
|
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 |
|
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
8 |
.transcript-component h2 { |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
9 |
position: absolute; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
10 |
z-index: 1; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
11 |
width: inherit; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
12 |
background: linear-gradient($light-blue, $light-blue 50%, transparent); |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
13 |
padding-bottom: 54px; |
|
246
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
14 |
} |
|
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
15 |
|
|
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
16 |
.transcript-component .transcript { |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
17 |
list-style: none; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
18 |
margin: 0px; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
19 |
padding: 154px 20px 0px 20px; |
|
246
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
20 |
} |
|
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
21 |
|
|
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
22 |
.transcript-component .transcript .sentence { |
|
248
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
23 |
padding: 20px 20px 20px 64px; |
|
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
24 |
color: $medium-grey; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
25 |
position: relative; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
26 |
background-color: transparent; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
27 |
transition: background-color .15s, color .15s; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
28 |
} |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
29 |
|
|
248
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
30 |
.transcript-component .transcript .sentence:not(.active):hover { |
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
31 |
cursor: pointer; |
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
32 |
background-color: $medium-grey-5; |
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
33 |
} |
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
34 |
|
|
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
35 |
.transcript-component .transcript .sentence.active { |
|
246
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
36 |
background-color: $grey-blue; |
|
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
37 |
color: $light-white; |
|
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
38 |
} |
|
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
39 |
|
|
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
40 |
.transcript-component .transcript .sentence.active .translation { |
|
246
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
41 |
color: $light-blue; |
|
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
42 |
} |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
43 |
|
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
44 |
.transcript-component .transcript .sentence .fa-play { |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
45 |
position: absolute; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
46 |
border: solid 2px $medium-grey; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
47 |
border-radius: 100%; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
48 |
width: 24px; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
49 |
height: 24px; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
50 |
line-height: 20px; |
|
248
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
51 |
left: 20px; |
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
52 |
cursor: pointer; |
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
53 |
opacity: 0; |
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
54 |
border-color: $light-blue; |
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
55 |
color: $light-blue; |
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
56 |
transition: opacity .15s; |
|
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
57 |
} |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
58 |
|
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
59 |
.transcript-component .transcript .sentence .fa-play::before { |
|
248
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
60 |
margin-left: 3px; |
|
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
61 |
} |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
62 |
|
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
63 |
.transcript-component .transcript .sentence.active .fa-play { |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
64 |
border-color: $light-blue; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
65 |
color: $light-blue; |
|
248
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
66 |
opacity: 1; |
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
67 |
} |
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
68 |
|
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
69 |
.transcript-component .transcript .sentence:not(.active):hover .fa-play { |
|
256272c33349
Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents:
247
diff
changeset
|
70 |
opacity: 1; |
|
247
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
71 |
} |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
72 |
|
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
73 |
.transcript-component .transcript .sentence p { |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
74 |
margin: 0; |
|
7a5d729992b8
Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents:
246
diff
changeset
|
75 |
line-height: 24px; |
|
246
5b7ae96768be
Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents:
245
diff
changeset
|
76 |
} |