diff -r eba9edbd8f46 -r 12c694392e8e cms/app-client/app/styles/components/transcript-component.scss --- a/cms/app-client/app/styles/components/transcript-component.scss Sun Aug 21 13:51:22 2016 +0200 +++ b/cms/app-client/app/styles/components/transcript-component.scss Tue Aug 23 00:32:11 2016 +0200 @@ -22,7 +22,7 @@ .transcript-component h2 span{ display: block; - color: $medium-grey; + color: $medium-grey; } body.videoscreen .transcript-component h2 { @@ -31,7 +31,6 @@ } .transcript-component .transcript { - list-style: none; margin: 0px; padding: 154px 20px 0px 20px; } @@ -40,7 +39,21 @@ padding-top: 0px; } -.transcript-component .transcript .sentence { +.transcript-component .transcript h3 { + padding: 20px 20px 20px 64px; + font-weight: bold; + color: $medium-blue; + font-size: 12px; + line-height: 24px; +} + +.transcript-component .transcript .annotations { + list-style: none; + margin: 0px; + padding: 0px; +} + +.transcript-component .transcript .annotations .sentence { padding: 20px 20px 20px 64px; color: $medium-grey; position: relative; @@ -49,28 +62,28 @@ min-height: 24px; } -.transcript-component .transcript .sentence:not(.active):hover { +.transcript-component .transcript .annotations .sentence:not(.active):hover { cursor: pointer; background-color: $medium-grey-5; } -.transcript-component .transcript .sentence.active { +.transcript-component .transcript .annotations .sentence.active { background-color: $grey-blue; color: $light-white; pointer-events: none; } -.transcript-component .transcript .sentence .words { +.transcript-component .transcript .annotations .sentence .words { font-size: 0px; margin: 20px 0px; } -.transcript-component .transcript .sentence .words .word { +.transcript-component .transcript .annotations .sentence .words .word { display: inline-block; } -.transcript-component .transcript .sentence .words .word .original, -.transcript-component .transcript .sentence .words .word .translation { +.transcript-component .transcript .annotations .sentence .words .word .original, +.transcript-component .transcript .annotations .sentence .words .word .translation { background-color: $medium-grey; padding: 0px 4px; margin-right: 2px; @@ -78,29 +91,29 @@ font-size: 12px; } -.transcript-component .transcript .sentence.active .words .word .original, -.transcript-component .transcript .sentence.active .words .word .translation { +.transcript-component .transcript .annotations .sentence.active .words .word .original, +.transcript-component .transcript .annotations .sentence.active .words .word .translation { background-color: $light-white; } -.transcript-component .transcript .sentence .words .word { +.transcript-component .transcript .annotations .sentence .words .word { color: $light-blue; } -.transcript-component .transcript .sentence.active .words .word .original { +.transcript-component .transcript .annotations .sentence.active .words .word .original { color: $grey-blue; } -.transcript-component .transcript .sentence .words .word .translation { +.transcript-component .transcript .annotations .sentence .words .word .translation { margin-bottom: 4px; } -.transcript-component .transcript .sentence.active .translation { +.transcript-component .transcript .annotations .sentence.active .translation { color: $light-blue; } -.transcript-component .transcript .sentence .fa-play { +.transcript-component .transcript .annotations .sentence .fa-play { position: absolute; border: solid 2px $medium-grey; border-radius: 100%; @@ -115,31 +128,31 @@ transition: opacity .15s; } -.transcript-component .transcript .sentence .fa-play::before { +.transcript-component .transcript .annotations .sentence .fa-play::before { margin-left: 3px; } -.transcript-component .transcript .sentence.active .fa-play { +.transcript-component .transcript .annotations .sentence.active .fa-play { pointer-events: all; border-color: $light-blue; color: $light-blue; opacity: 1; } -.transcript-component .transcript .sentence:not(.active):hover .fa-play { +.transcript-component .transcript .annotations .sentence:not(.active):hover .fa-play { opacity: 1; } -.transcript-component .transcript .sentence p { +.transcript-component .transcript .annotations .sentence p { margin: 0; line-height: 24px; } -.transcript-component .transcript .sentence .speaker { +.transcript-component .transcript .annotations .sentence .speaker { font-weight: bold; } -.transcript-component .transcript .sentence .title { +.transcript-component .transcript .annotations .sentence .title { float: right; line-height: 24px; padding-left: 20px; @@ -147,6 +160,6 @@ font-weight: bold; } -.transcript-component .transcript .sentence.active .title { +.transcript-component .transcript .annotations .sentence.active .title { color: $light-white; } \ No newline at end of file