diff -r a7cf2887e993 -r ed05b89e3299 cms/app-client/app/styles/components/transcript-component.scss --- a/cms/app-client/app/styles/components/transcript-component.scss Tue Aug 16 00:16:08 2016 +0200 +++ b/cms/app-client/app/styles/components/transcript-component.scss Wed Aug 17 15:30:19 2016 +0200 @@ -53,6 +53,42 @@ color: $light-white; } +.transcript-component .transcript .sentence .words { + font-size: 0px; + margin: 20px 0px; +} + +.transcript-component .transcript .sentence .words .word { + display: inline-block; +} + +.transcript-component .transcript .sentence .words .word .original, +.transcript-component .transcript .sentence .words .word .translation { + background-color: $medium-grey; + padding: 0px 4px; + margin-right: 2px; + margin-bottom: 2px; + font-size: 12px; +} + +.transcript-component .transcript .sentence.active .words .word .original, +.transcript-component .transcript .sentence.active .words .word .translation { + background-color: $light-white; +} + +.transcript-component .transcript .sentence .words .word { + color: $light-blue; +} + +.transcript-component .transcript .sentence.active .words .word .original { + color: $grey-blue; +} + +.transcript-component .transcript .sentence .words .word .translation { + margin-bottom: 4px; +} + + .transcript-component .transcript .sentence.active .translation { color: $light-blue; }