cms/app-client/app/styles/components/transcript-component.scss
author ymh <ymh.work@gmail.com>
Thu, 03 Nov 2016 03:05:43 +0100
changeset 388 202b6f209b9a
parent 373 e952c8a31a2b
child 454 710a2ae08a74
permissions -rw-r--r--
set version 0.0.5
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
     8
body.videoscreen .transcript-component {
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
     9
    overflow: scroll;
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    10
}
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    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;
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
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;
18f0c3ee9aa5 Add title translation to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 255
diff changeset
    18
    padding-bottom: 66px;
254
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    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
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    28
}
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    29
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    30
body.videoscreen .transcript-component h2 {
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    31
    padding-bottom: 0px;
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    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
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    35
.transcript-component .transcript {
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    36
    margin: 0px;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    37
    padding: 154px 20px 0px 20px;
246
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
254
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    40
body.videoscreen .transcript-component .transcript {
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    41
    padding-top: 0px;
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    42
}
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    43
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    44
.transcript-component .transcript h3 {
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    45
    padding: 20px 20px 20px 64px;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    46
    font-weight: bold;
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    47
    color: $corpus-blue;
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    48
    font-size: 12px;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    49
    line-height: 24px;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    50
}
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    51
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    52
.transcript-component .transcript .annotations {
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    53
    list-style: none;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    54
    margin: 0px;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    55
    padding: 0px;
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
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    58
.transcript-component .transcript .annotations .sentence {
248
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
    59
    padding: 20px 20px 20px 64px;
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    60
    color: $corpus-black;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    61
    position: relative;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    62
    background-color: transparent;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    63
    transition: background-color .15s, color .15s;
254
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    64
    min-height: 24px;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    65
}
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    66
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    67
.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
    68
    cursor: pointer;
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    69
    background-color: $corpus-grey;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    70
    color: $corpus-white;
248
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
    71
}
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
    72
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    73
.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
    74
    background-color: $corpus-blue;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    75
    color: $corpus-white;
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
    76
    pointer-events: none;
246
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    77
}
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    78
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    79
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    80
.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
    81
    color: $corpus-white;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    82
    font-weight: normal;
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
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    85
.transcript-component .transcript .annotations .sentence .words {
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    86
    font-size: 0px;
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    87
    margin: 10px 0px;
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    88
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    89
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    90
.transcript-component .transcript .annotations .sentence .words .word {
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    91
    display: inline-block;
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
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    94
.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
    95
    font-weight: bold;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    96
}
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    97
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    98
.transcript-component .transcript .annotations .sentence .words .word .original,
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    99
.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
   100
    background-color: $corpus-black;
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   101
    padding: 0px 4px;
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   102
    margin-right: 2px;
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   103
    margin-bottom: 1px;
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   104
    font-size: 12px;
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   105
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   106
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   107
.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
   108
.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
   109
    background-color: $corpus-white;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   110
    color: $corpus-grey;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   111
}
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   112
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   113
.transcript-component .transcript .annotations .sentence.active .words .word .original,
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   114
.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
   115
    background-color: $corpus-white;
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   116
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   117
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   118
.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
   119
    color: $corpus-white;
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   120
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   121
373
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 .words .word p {
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   123
    line-height: 20px;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   124
}
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
.transcript-component .transcript .annotations .sentence.active .words .word .original,
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   127
.transcript-component .transcript .annotations .sentence.active .words .word .translation {
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   128
    color: $corpus-blue;
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   129
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   130
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   131
.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
   132
    margin-bottom: 2px;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   133
}
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   134
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   135
.transcript-component .transcript .annotations .sentence .fa-play {
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   136
    position: absolute;
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   137
    border-style: solid;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   138
    border-width: 2px;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   139
    border-color: $corpus-black;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   140
    border-radius: 100%;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   141
    width: 24px;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   142
    height: 24px;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   143
    line-height: 20px;
248
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   144
    left: 20px;
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   145
    cursor: pointer;
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   146
    opacity: 1;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   147
    color: $corpus-black;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   148
}
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   149
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   150
.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
   151
    margin-left: 3px;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   152
}
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   153
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   154
.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
   155
    border-color: $corpus-white;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   156
    color: $corpus-white;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   157
}
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   158
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   159
.transcript-component .transcript .annotations .sentence p {
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   160
    margin: 0;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   161
    line-height: 24px;
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   162
}
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   163
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   164
.transcript-component .transcript .annotations .sentence .speaker {
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   165
    font-weight: bold;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   166
}
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   167
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   168
.transcript-component .transcript .annotations .sentence .title {
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   169
    float: right;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   170
    line-height: 24px;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   171
    padding-left: 20px;
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   172
    color: $corpus-grey;
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   173
    font-weight: bold;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   174
}
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   175
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   176
.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
   177
    color: $corpus-white;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   178
}
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   179
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   180
.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
   181
    color: $corpus-white;
246
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
   182
}