cms/app-client/app/styles/components/transcript-component.scss
author ymh <ymh.work@gmail.com>
Fri, 02 Dec 2016 15:30:16 +0100
changeset 459 6a296e92887f
parent 457 a7a333c0b1eb
child 461 9b7a6c099870
permissions -rw-r--r--
add a spinner when opening a transcript
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;
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
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
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
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    45
body.videoscreen .transcript-component .transcript {
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    46
    padding-top: 0px;
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    47
}
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    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
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    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;
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
    81
    pointer-events: none;
246
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    82
}
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    83
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    84
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    85
.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
    86
    color: $corpus-white;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    87
    font-weight: normal;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    88
}
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
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 {
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    91
    font-size: 0px;
454
710a2ae08a74 rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents: 373
diff changeset
    92
    margin: 5px 0px;
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    93
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    94
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    95
.transcript-component .transcript .annotations .sentence .words .word {
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    96
    display: inline-block;
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    97
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    98
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
    99
.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
   100
    font-weight: bold;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   101
}
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   102
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   103
.transcript-component .transcript .annotations .sentence .words .word .original,
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   104
.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
   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
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   111
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   112
.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
   113
.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
   114
    background-color: $corpus-white;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   115
    color: $corpus-grey;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   116
}
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
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.active .words .word .original,
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   119
.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
   120
    background-color: $corpus-white;
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   121
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   122
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   123
.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
   124
    color: $corpus-white;
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   125
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   126
373
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 .words .word p {
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   128
    line-height: 20px;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   129
}
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   130
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   131
.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
   132
.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
   133
    color: $corpus-blue;
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   134
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   135
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   136
.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
   137
    margin-bottom: 2px;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   138
}
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   139
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   140
.transcript-component .transcript .annotations .sentence .fa-play {
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   141
    position: absolute;
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   142
    border-style: solid;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   143
    border-width: 2px;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   144
    border-color: $corpus-black;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   145
    border-radius: 100%;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   146
    width: 24px;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   147
    height: 24px;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   148
    line-height: 20px;
457
a7a333c0b1eb Optimize transcript rendering : remove call to components
ymh <ymh.work@gmail.com>
parents: 454
diff changeset
   149
    left: 2.5px;
248
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   150
    cursor: pointer;
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   151
    opacity: 1;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   152
    color: $corpus-black;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   153
}
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   154
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   155
.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
   156
    margin-left: 3px;
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: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
   160
    border-color: $corpus-white;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   161
    color: $corpus-white;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   162
}
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
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 p {
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   165
    margin: 0;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   166
    line-height: 24px;
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   167
}
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   168
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   169
.transcript-component .transcript .annotations .sentence .speaker {
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   170
    font-weight: bold;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   171
}
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   172
454
710a2ae08a74 rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents: 373
diff changeset
   173
.transcript-component .transcript .annotations .sentence .hidden-speaker {
710a2ae08a74 rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents: 373
diff changeset
   174
    visibility: hidden;
710a2ae08a74 rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents: 373
diff changeset
   175
}
710a2ae08a74 rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents: 373
diff changeset
   176
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   177
.transcript-component .transcript .annotations .sentence .title {
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   178
    float: right;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   179
    line-height: 24px;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   180
    padding-left: 20px;
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   181
    color: $corpus-grey;
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   182
    font-weight: bold;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   183
}
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
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.active .title {
373
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   186
    color: $corpus-white;
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   187
}
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   188
e952c8a31a2b Transcript design + Fix video display and filter component font
Chloe Laisne <chloe.laisne@gmail.com>
parents: 303
diff changeset
   189
.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
   190
    color: $corpus-white;
454
710a2ae08a74 rework transcript component to correct various bugs
ymh <ymh.work@gmail.com>
parents: 373
diff changeset
   191
}