cms/app-client/app/styles/components/transcript-component.scss
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--
External OLAC links leads now to the OLAC documentation. Closes #0025936
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;
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
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   103
.transcript-component .transcript .annotations .sentence .words .word .translation
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   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
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   111
.transcript-component .transcript .annotations .sentence .words .word .morphene-original,
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   112
.transcript-component .transcript .annotations .sentence .words .word .morphene-translation {
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   113
    background-color: $corpus-dark-grey;
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   114
    padding: 0px 2px;
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   115
    margin-right: 2px;
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   116
    margin-bottom: 1px;
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   117
    font-size: 12px;
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   118
}
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   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
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   127
.transcript-component .transcript .annotations .sentence:hover .words .word .morphene-original,
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   128
.transcript-component .transcript .annotations .sentence:hover .words .word .morphene-translation {
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   129
    background-color: $corpus-light-grey2;
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   130
    color: $corpus-grey;
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   131
}
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   132
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   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
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   137
    color: $corpus-blue;
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   138
}
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   139
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   140
.transcript-component .transcript .annotations .sentence.active .words .word .morphene-original,
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   141
.transcript-component .transcript .annotations .sentence.active .words .word .morphene-translation {
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   142
    background-color: $corpus-lighter-blue;
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   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
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   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
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   155
.transcript-component .transcript .annotations .sentence .words .word .morphene-container {
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   156
    line-height: 15px;
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   157
    display: -ms-inline-flexbox;
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   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
9b7a6c099870 add morphenes to transcripts
ymh <ymh.work@gmail.com>
parents: 457
diff changeset
   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
}