--- 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