cms/app-client/app/styles/components/transcript-component.scss
author Chloe Laisne <chloe.laisne@gmail.com>
Sun, 02 Oct 2016 15:27:15 +0200
changeset 312 cd62bbf96322
parent 303 2fef8007c2b2
child 373 e952c8a31a2b
permissions -rw-r--r--
Add hover state to discourse bubbles
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 {
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
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;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    16
    background: linear-gradient($light-blue, $light-blue 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;
18f0c3ee9aa5 Add title translation to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 255
diff changeset
    21
}
18f0c3ee9aa5 Add title translation to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 255
diff changeset
    22
18f0c3ee9aa5 Add title translation to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 255
diff changeset
    23
.transcript-component h2 span{
18f0c3ee9aa5 Add title translation to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 255
diff changeset
    24
    display: block;
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    25
    color: $medium-grey;
254
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    26
}
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    27
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    28
body.videoscreen .transcript-component h2 {
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    29
    padding-bottom: 0px;
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    30
    position: static;
246
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    31
}
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    32
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    33
.transcript-component .transcript {
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    34
    margin: 0px;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    35
    padding: 154px 20px 0px 20px;
246
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    36
}
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    37
254
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    38
body.videoscreen .transcript-component .transcript {
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    39
    padding-top: 0px;
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    40
}
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    41
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    42
.transcript-component .transcript h3 {
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    43
    padding: 20px 20px 20px 64px;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    44
    font-weight: bold;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    45
    color: $medium-blue;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    46
    font-size: 12px;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    47
    line-height: 24px;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    48
}
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    49
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    50
.transcript-component .transcript .annotations {
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    51
    list-style: none;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    52
    margin: 0px;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    53
    padding: 0px;
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    54
}
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
.transcript-component .transcript .annotations .sentence {
248
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
    57
    padding: 20px 20px 20px 64px;
303
2fef8007c2b2 Transcript icon in player white by default and blue when active + Transcript font color darker
Chloe Laisne <chloe.laisne@gmail.com>
parents: 258
diff changeset
    58
    color: $dark-grey;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    59
    position: relative;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    60
    background-color: transparent;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    61
    transition: background-color .15s, color .15s;
254
a7cf2887e993 Hide/Show video CSS
Chloe Laisne <chloe.laisne@gmail.com>
parents: 248
diff changeset
    62
    min-height: 24px;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    63
}
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
    64
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    65
.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
    66
    cursor: pointer;
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
    67
    background-color: $medium-grey-5;
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
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    70
.transcript-component .transcript .annotations .sentence.active {
246
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    71
    background-color: $grey-blue;
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    72
    color: $light-white;
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
    73
    pointer-events: none;
246
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    74
}
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
    75
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    76
.transcript-component .transcript .annotations .sentence .words {
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    77
    font-size: 0px;
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    78
    margin: 20px 0px;
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    79
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    80
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    81
.transcript-component .transcript .annotations .sentence .words .word {
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    82
    display: inline-block;
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    83
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
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 .word .original,
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    86
.transcript-component .transcript .annotations .sentence .words .word .translation {
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    87
    background-color: $medium-grey;
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    88
    padding: 0px 4px;
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    89
    margin-right: 2px;
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    90
    margin-bottom: 2px;
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    91
    font-size: 12px;
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.active .words .word .original,
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    95
.transcript-component .transcript .annotations .sentence.active .words .word .translation {
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
    96
    background-color: $light-white;
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
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
    99
.transcript-component .transcript .annotations .sentence .words .word {
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   100
    color: $light-blue;
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   101
}
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
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.active .words .word .original {
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   104
    color: $grey-blue;
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
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   107
.transcript-component .transcript .annotations .sentence .words .word .translation {
255
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   108
    margin-bottom: 4px;
ed05b89e3299 Add words to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 254
diff changeset
   109
}
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
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   112
.transcript-component .transcript .annotations .sentence.active .translation {
246
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
   113
    color: $light-blue;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   114
}
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   115
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   116
.transcript-component .transcript .annotations .sentence .fa-play {
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   117
    position: absolute;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   118
    border: solid 2px $medium-grey;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   119
    border-radius: 100%;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   120
    width: 24px;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   121
    height: 24px;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   122
    line-height: 20px;
248
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   123
    left: 20px;
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   124
    cursor: pointer;
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   125
    opacity: 0;
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   126
    border-color: $light-blue;
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   127
    color: $light-blue;
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   128
    transition: opacity .15s;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   129
}
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
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 .fa-play::before {
248
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   132
    margin-left: 3px;
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.active .fa-play {
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   136
    pointer-events: all;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   137
    border-color: $light-blue;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   138
    color: $light-blue;
248
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   139
    opacity: 1;
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   140
}
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   141
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   142
.transcript-component .transcript .annotations .sentence:not(.active):hover .fa-play {
248
256272c33349 Transcript sentence lick and play
Chloe Laisne <chloe.laisne@gmail.com>
parents: 247
diff changeset
   143
    opacity: 1;
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   144
}
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
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 p {
247
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   147
    margin: 0;
7a5d729992b8 Design and animate transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 246
diff changeset
   148
    line-height: 24px;
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   149
}
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   150
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   151
.transcript-component .transcript .annotations .sentence .speaker {
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   152
    font-weight: bold;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   153
}
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
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 .title {
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   156
    float: right;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   157
    line-height: 24px;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   158
    padding-left: 20px;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   159
    color: $grey-blue;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   160
    font-weight: bold;
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   161
}
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   162
258
12c694392e8e Add topic to transcript
Chloe Laisne <chloe.laisne@gmail.com>
parents: 257
diff changeset
   163
.transcript-component .transcript .annotations .sentence.active .title {
257
eba9edbd8f46 Add title to annotation
Chloe Laisne <chloe.laisne@gmail.com>
parents: 256
diff changeset
   164
    color: $light-white;
246
5b7ae96768be Bsic transcript-component design
Chloe Laisne <chloe.laisne@gmail.com>
parents: 245
diff changeset
   165
}