cms/app-client/app/styles/components/player-component.scss
changeset 351 c69dcc3b0524
parent 350 c3a6266ebe0a
child 360 d592af4a27a0
equal deleted inserted replaced
350:c3a6266ebe0a 351:c69dcc3b0524
     1 .player-component {
     1 .player-component {
     2     color: $light-white;
     2     color: $light-white;
     3     text-align: left;
     3     text-align: left;
     4     padding: 0px 40px;
     4     padding: 0px 40px;
     5     height: 80px;
     5     height: 80px;
     6     background-color: $dark-blue;
     6     background-color: $corpus-blue;
       
     7     border-bottom: 1px solid$corpus-black;
     7     overflow: hidden;
     8     overflow: hidden;
     8     position: relative;
     9     position: relative;
     9 }
    10 }
    10 
    11 
    11 .player-component #audio {
    12 .player-component #audio {
    30 }
    31 }
    31 
    32 
    32 .player-component #audio .controls i.disabled {
    33 .player-component #audio .controls i.disabled {
    33     cursor: pointer;
    34     cursor: pointer;
    34     pointer-events: none;
    35     pointer-events: none;
    35     opacity: .1;
    36     color: $corpus-light-blue;
    36 }
    37 }
    37 
    38 
    38 .player-component #audio .controls i.fa-backward {
    39 .player-component #audio .controls i.fa-backward {
    39     margin-right: 10px;
    40     margin-right: 10px;
    40 }
    41 }
    41 
    42 
    42 .player-component #audio .controls i.fa-play,
    43 .player-component #audio .controls i.fa-play,
    43 .player-component #audio .controls i.fa-pause {
    44 .player-component #audio .controls i.fa-pause {
    44     border: 2px solid $light-white;
    45     border: 2px solid $corpus-white;
    45     border-radius: 100%;
    46     border-radius: 100%;
    46     margin-right: 8px;
    47     margin-right: 8px;
    47     margin-left: 8px;
    48     margin-left: 8px;
    48     width: 40px;
    49     width: 40px;
    49 }
    50 }
   101 }
   102 }
   102 
   103 
   103 .player-component #audio .progress .bar {
   104 .player-component #audio .progress .bar {
   104     width: 303px;
   105     width: 303px;
   105     height: 3px;
   106     height: 3px;
   106     background-color: $light-white;
   107     background-color: $corpus-light-blue;
   107     margin: -1px 60px 0 60px;
   108     margin: -1px 60px 0 60px;
   108     position: relative;
   109     position: relative;
   109     display: block;
   110     display: block;
   110     top: 50%;
   111     top: 50%;
   111     cursor: pointer;
   112     cursor: pointer;
   120 }
   121 }
   121 
   122 
   122 .player-component #audio .progress .bar .value {
   123 .player-component #audio .progress .bar .value {
   123     width: 0%;
   124     width: 0%;
   124     height: 100%;
   125     height: 100%;
   125     background-color: $blue;
   126     background-color: $corpus-white;
   126     display: block;
   127     display: block;
   127 }
   128 }
   128 
   129 
   129 .player-component #audio .meta {
   130 .player-component #audio .meta {
   130     width: 431px;
   131     width: 431px;