diff -r 686926d132ff -r 9b7a6c099870 cms/app-client/app/styles/components/transcript-component.scss --- a/cms/app-client/app/styles/components/transcript-component.scss Fri Dec 02 17:22:16 2016 +0100 +++ b/cms/app-client/app/styles/components/transcript-component.scss Sat Dec 03 00:09:28 2016 +0100 @@ -101,13 +101,23 @@ } .transcript-component .transcript .annotations .sentence .words .word .original, -.transcript-component .transcript .annotations .sentence .words .word .translation { +.transcript-component .transcript .annotations .sentence .words .word .translation + { background-color: $corpus-black; padding: 0px 4px; margin-right: 2px; margin-bottom: 1px; font-size: 12px; } +.transcript-component .transcript .annotations .sentence .words .word .morphene-original, +.transcript-component .transcript .annotations .sentence .words .word .morphene-translation { + background-color: $corpus-dark-grey; + padding: 0px 2px; + margin-right: 2px; + margin-bottom: 1px; + font-size: 12px; +} + .transcript-component .transcript .annotations .sentence:hover .words .word .original, .transcript-component .transcript .annotations .sentence:hover .words .word .translation { @@ -115,24 +125,41 @@ color: $corpus-grey; } +.transcript-component .transcript .annotations .sentence:hover .words .word .morphene-original, +.transcript-component .transcript .annotations .sentence:hover .words .word .morphene-translation { + background-color: $corpus-light-grey2; + color: $corpus-grey; +} + + .transcript-component .transcript .annotations .sentence.active .words .word .original, .transcript-component .transcript .annotations .sentence.active .words .word .translation { background-color: $corpus-white; + color: $corpus-blue; +} + +.transcript-component .transcript .annotations .sentence.active .words .word .morphene-original, +.transcript-component .transcript .annotations .sentence.active .words .word .morphene-translation { + background-color: $corpus-lighter-blue; + color: $corpus-blue; } .transcript-component .transcript .annotations .sentence .words .word { color: $corpus-white; + margin-top: 2px; } .transcript-component .transcript .annotations .sentence .words .word p { line-height: 20px; } -.transcript-component .transcript .annotations .sentence.active .words .word .original, -.transcript-component .transcript .annotations .sentence.active .words .word .translation { - color: $corpus-blue; +.transcript-component .transcript .annotations .sentence .words .word .morphene-container { + line-height: 15px; + display: -ms-inline-flexbox; + display: inline-flex; } + .transcript-component .transcript .annotations .sentence .words .word .translation { margin-bottom: 2px; }