Mercurial Mercurial > corpus_parole / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
cms/app-client/app/styles/components/transcript-component.scss
changeset 373 e952c8a31a2b
parent 303 2fef8007c2b2
child 454 710a2ae08a74
equal deleted inserted replaced
363:eac9e4eb75c7 373:e952c8a31a2b 
     1 .transcript-component {
 
     1 .transcript-component {
 
     2     background-color: $light-blue;
 
     2     background-color: $corpus-light-grey;
 
     3     padding: 0px;
 
     3     padding: 0px;
 
     4     width: 554px;
 
     4     width: 554px;
 
     5     box-sizing: border-box;
 
     5     box-sizing: border-box;
 
     6 }
 
     6 }
 
     7 
     7 
    11 
    11 
    12 .transcript-component h2 {
 
    12 .transcript-component h2 {
 
    13     position: absolute;
 
    13     position: absolute;
 
    14     z-index: 1;
 
    14     z-index: 1;
 
    15     width: inherit;
 
    15     width: inherit;
 
    16     background: linear-gradient($light-blue, $light-blue 50%, transparent);
 
    16     background: linear-gradient($corpus-light-grey, $corpus-light-grey 50%, transparent);
 
    17     padding-top: 12px;
 
    17     padding-top: 12px;
 
    18     padding-bottom: 66px;
 
    18     padding-bottom: 66px;
 
    19     line-height: 30px;
 
    19     line-height: 30px;
 
    20     margin: 0px!important;
 
    20     margin: 0px!important;
 
       
    21     color: $corpus-blue;
 
       
    22     font-weight: bold;
 
    21 }
 
    23 }
 
    22 
    24 
    23 .transcript-component h2 span{
 
    25 .transcript-component h2 .translation{
 
    24     display: block;
 
    26     display: block;
 
    25     color: $medium-grey;
 
    27     font-weight: normal;
 
    26 }
 
    28 }
 
    27 
    29 
    28 body.videoscreen .transcript-component h2 {
 
    30 body.videoscreen .transcript-component h2 {
 
    29     padding-bottom: 0px;
 
    31     padding-bottom: 0px;
 
    30     position: static;
 
    32     position: static;
 
    40 }
 
    42 }
 
    41 
    43 
    42 .transcript-component .transcript h3 {
 
    44 .transcript-component .transcript h3 {
 
    43     padding: 20px 20px 20px 64px;
 
    45     padding: 20px 20px 20px 64px;
 
    44     font-weight: bold;
 
    46     font-weight: bold;
 
    45     color: $medium-blue;
 
    47     color: $corpus-blue;
 
    46     font-size: 12px;
 
    48     font-size: 12px;
 
    47     line-height: 24px;
 
    49     line-height: 24px;
 
    48 }
 
    50 }
 
    49 
    51 
    50 .transcript-component .transcript .annotations {
 
    52 .transcript-component .transcript .annotations {
 
    53     padding: 0px;
 
    55     padding: 0px;
 
    54 }
 
    56 }
 
    55 
    57 
    56 .transcript-component .transcript .annotations .sentence {
 
    58 .transcript-component .transcript .annotations .sentence {
 
    57     padding: 20px 20px 20px 64px;
 
    59     padding: 20px 20px 20px 64px;
 
    58     color: $dark-grey;
 
    60     color: $corpus-black;
 
    59     position: relative;
 
    61     position: relative;
 
    60     background-color: transparent;
 
    62     background-color: transparent;
 
    61     transition: background-color .15s, color .15s;
 
    63     transition: background-color .15s, color .15s;
 
    62     min-height: 24px;
 
    64     min-height: 24px;
 
    63 }
 
    65 }
 
    64 
    66 
    65 .transcript-component .transcript .annotations .sentence:not(.active):hover {
 
    67 .transcript-component .transcript .annotations .sentence:not(.active):hover {
 
    66     cursor: pointer;
 
    68     cursor: pointer;
 
    67     background-color: $medium-grey-5;
 
    69     background-color: $corpus-grey;
 
       
    70     color: $corpus-white;
 
    68 }
 
    71 }
 
    69 
    72 
    70 .transcript-component .transcript .annotations .sentence.active {
 
    73 .transcript-component .transcript .annotations .sentence.active {
 
    71     background-color: $grey-blue;
 
    74     background-color: $corpus-blue;
 
    72     color: $light-white;
 
    75     color: $corpus-white;
 
    73     pointer-events: none;
 
    76     pointer-events: none;
 
       
    77 }
 
       
    78 
       
    79 
       
    80 .transcript-component .transcript .annotations .sentence.active .translation {
 
       
    81     color: $corpus-white;
 
       
    82     font-weight: normal;
 
    74 }
 
    83 }
 
    75 
    84 
    76 .transcript-component .transcript .annotations .sentence .words {
 
    85 .transcript-component .transcript .annotations .sentence .words {
 
    77     font-size: 0px;
 
    86     font-size: 0px;
 
    78     margin: 20px 0px;
 
    87     margin: 10px 0px;
 
    79 }
 
    88 }
 
    80 
    89 
    81 .transcript-component .transcript .annotations .sentence .words .word {
 
    90 .transcript-component .transcript .annotations .sentence .words .word {
 
    82     display: inline-block;
 
    91     display: inline-block;
 
    83 }
 
    92 }
 
    84 
    93 
       
    94 .transcript-component .transcript .annotations .sentence .original {
 
       
    95     font-weight: bold;
 
       
    96 }
 
       
    97 
    85 .transcript-component .transcript .annotations .sentence .words .word .original,
 
    98 .transcript-component .transcript .annotations .sentence .words .word .original,
 
    86 .transcript-component .transcript .annotations .sentence .words .word .translation {
 
    99 .transcript-component .transcript .annotations .sentence .words .word .translation {
 
    87     background-color: $medium-grey;
 
   100     background-color: $corpus-black;
 
    88     padding: 0px 4px;
 
   101     padding: 0px 4px;
 
    89     margin-right: 2px;
 
   102     margin-right: 2px;
 
    90     margin-bottom: 2px;
 
   103     margin-bottom: 1px;
 
    91     font-size: 12px;
 
   104     font-size: 12px;
 
       
   105 }
 
       
   106 
       
   107 .transcript-component .transcript .annotations .sentence:hover .words .word .original,
 
       
   108 .transcript-component .transcript .annotations .sentence:hover .words .word .translation {
 
       
   109     background-color: $corpus-white;
 
       
   110     color: $corpus-grey;
 
    92 }
 
   111 }
 
    93 
   112 
    94 .transcript-component .transcript .annotations .sentence.active .words .word .original,
 
   113 .transcript-component .transcript .annotations .sentence.active .words .word .original,
 
    95 .transcript-component .transcript .annotations .sentence.active .words .word .translation {
 
   114 .transcript-component .transcript .annotations .sentence.active .words .word .translation {
 
    96     background-color: $light-white;
 
   115     background-color: $corpus-white;
 
    97 }
 
   116 }
 
    98 
   117 
    99 .transcript-component .transcript .annotations .sentence .words .word {
 
   118 .transcript-component .transcript .annotations .sentence .words .word {
 
   100     color: $light-blue;
 
   119     color: $corpus-white;
 
   101 }
 
   120 }
 
   102 
   121 
   103 .transcript-component .transcript .annotations .sentence.active .words .word .original {
 
   122 .transcript-component .transcript .annotations .sentence .words .word p {
 
   104     color: $grey-blue;
 
   123     line-height: 20px;
 
       
   124 }
 
       
   125 
       
   126 .transcript-component .transcript .annotations .sentence.active .words .word .original,
 
       
   127 .transcript-component .transcript .annotations .sentence.active .words .word .translation {
 
       
   128     color: $corpus-blue;
 
   105 }
 
   129 }
 
   106 
   130 
   107 .transcript-component .transcript .annotations .sentence .words .word .translation {
 
   131 .transcript-component .transcript .annotations .sentence .words .word .translation {
 
   108     margin-bottom: 4px;
 
   132     margin-bottom: 2px;
 
   109 }
 
       
   110 
       
   111 
       
   112 .transcript-component .transcript .annotations .sentence.active .translation {
 
       
   113     color: $light-blue;
 
       
   114 }
 
   133 }
 
   115 
   134 
   116 .transcript-component .transcript .annotations .sentence .fa-play {
 
   135 .transcript-component .transcript .annotations .sentence .fa-play {
 
   117     position: absolute;
 
   136     position: absolute;
 
   118     border: solid 2px $medium-grey;
 
   137     border-style: solid;
 
       
   138     border-width: 2px;
 
       
   139     border-color: $corpus-black;
 
   119     border-radius: 100%;
 
   140     border-radius: 100%;
 
   120     width: 24px;
 
   141     width: 24px;
 
   121     height: 24px;
 
   142     height: 24px;
 
   122     line-height: 20px;
 
   143     line-height: 20px;
 
   123     left: 20px;
 
   144     left: 20px;
 
   124     cursor: pointer;
 
   145     cursor: pointer;
 
   125     opacity: 0;
 
   146     opacity: 1;
 
   126     border-color: $light-blue;
 
   147     color: $corpus-black;
 
   127     color: $light-blue;
 
       
   128     transition: opacity .15s;
 
       
   129 }
 
   148 }
 
   130 
   149 
   131 .transcript-component .transcript .annotations .sentence .fa-play::before {
 
   150 .transcript-component .transcript .annotations .sentence .fa-play::before {
 
   132     margin-left: 3px;
 
   151     margin-left: 3px;
 
   133 }
 
   152 }
 
   134 
   153 
   135 .transcript-component .transcript .annotations .sentence.active .fa-play {
 
       
   136     pointer-events: all;
 
       
   137     border-color: $light-blue;
 
       
   138     color: $light-blue;
 
       
   139     opacity: 1;
 
       
   140 }
 
       
   141 
       
   142 .transcript-component .transcript .annotations .sentence:not(.active):hover .fa-play {
 
   154 .transcript-component .transcript .annotations .sentence:not(.active):hover .fa-play {
 
   143     opacity: 1;
 
   155     border-color: $corpus-white;
 
       
   156     color: $corpus-white;
 
   144 }
 
   157 }
 
   145 
   158 
   146 .transcript-component .transcript .annotations .sentence p {
 
   159 .transcript-component .transcript .annotations .sentence p {
 
   147     margin: 0;
 
   160     margin: 0;
 
   148     line-height: 24px;
 
   161     line-height: 24px;
 
   154 
   167 
   155 .transcript-component .transcript .annotations .sentence .title {
 
   168 .transcript-component .transcript .annotations .sentence .title {
 
   156     float: right;
 
   169     float: right;
 
   157     line-height: 24px;
 
   170     line-height: 24px;
 
   158     padding-left: 20px;
 
   171     padding-left: 20px;
 
   159     color: $grey-blue;
 
   172     color: $corpus-grey;
 
   160     font-weight: bold;
 
   173     font-weight: bold;
 
   161 }
 
   174 }
 
   162 
   175 
   163 .transcript-component .transcript .annotations .sentence.active .title {
 
   176 .transcript-component .transcript .annotations .sentence.active .title {
 
   164     color: $light-white;
 
   177     color: $corpus-white;
 
   165 }
 
   178 }
 
       
   179 
       
   180 .transcript-component .transcript .annotations .sentence:not(.active):hover .title {
 
       
   181     color: $corpus-white;
 
       
   182 }
corpus_parole