cms/app-client/app/styles/components/transcript-component.scss
changeset 258 12c694392e8e
parent 257 eba9edbd8f46
child 303 2fef8007c2b2
--- 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