src/wolnelektury/static/2022/styles/components/_player.scss

   1 .c-player {
   2   display: flex;
   3   width: 100%;
   4   align-items: center;
   5   position: relative;
   6   background-color: #D5ECED;
   7   padding: 25px 34px 25px 14px;
   8 }
   9
  10 .c-player__head {
  11   background: #006066;
  12   padding: 8px 14px;
  13   border-radius: 5px 5px 0px 0px;
  14   font-weight: 600;
  15   font-size: 12px;
  16   line-height: 140%;
  17   letter-spacing: 0.02em;
  18   color: #FFFFFF;
  19 }
  20
  21 .c-player__btn {
  22   background: white;
  23   border: 0;
  24   outline: 0;
  25   border-radius: 50%;
  26   padding: 0;
  27   width: 60px;
  28   height: 60px;
  29   display: flex;
  30   align-items: center;
  31   justify-content: center;
  32   cursor: pointer;
  33   transition: all $ease-dynamic 350ms;
  34
  35   &:hover {
  36     background: #083F4D;
  37     .icon {color: white;}
  38   }
  39
  40   .icon {
  41     color: #007880;
  42     font-size: 26px;
  43     position: relative;
  44     transition: background $ease-dynamic 350ms;
  45     &.icon-play {
  46       left: 3px;
  47     }
  48     &.icon-pause {
  49       left: 1px;
  50     }
  51   }
  52 }
  53 .jp-state-playing {
  54     .c-player__btn {
  55         .icon.icon-play {
  56             left: 1px;
  57         }
  58     }
  59 }
  60
  61 .c-player__btns {
  62   display: flex;
  63   align-items: center;
  64
  65   button {
  66     padding: 0;
  67     display: flex;
  68     align-items: center;
  69     justify-content: center;
  70     background-color: transparent;
  71     width: 40px; height: 40px;
  72     border-radius: 50%;
  73     cursor: pointer;
  74     margin: 0 5px;
  75     outline: 0;
  76     border: 1px solid transparent;
  77     transition: border-color $ease-out 450ms;
  78
  79     &:first-child {
  80       margin-left: 0;
  81     }
  82
  83     &:hover {
  84       border-color: rgba(#007880, 0.5);
  85     }
  86
  87     &:disabled {
  88         opacity: .33;
  89         &:hover {
  90             border-color: transparent;
  91         }
  92     }
  93
  94     &.c-player__btn--md {
  95       width: 50px; height: 50px;
  96       .icon-play {
  97         font-size: 20px;
  98         position: relative;
  99         left: 2px;
 100       }
 101       .icon-pause {
 102         font-size: 20px;
 103       }
 104     }
 105
 106     .icon {
 107       color: #007880;
 108       font-size: 16px;
 109     }
 110   }
 111 }
 112 .jp-state-playing {
 113     .c-player__btns {
 114         button {
 115             &.c-player__btn--md {
 116                 .icon-play {
 117                     left: 0;
 118                 }
 119             }
 120         }
 121     }
 122 }
 123
 124 .c-player__timeline {
 125   max-width: 590px;
 126   width: calc(100% - 60px);
 127   margin-left: auto;
 128   margin-right: 0;
 129   position: relative;
 130
 131   & > span {
 132     height: 10px;
 133     width: 100%;
 134     display: block;
 135     background: #F2F2F2;
 136     border-radius: 5px;
 137     position: relative;
 138     overflow: hidden;
 139
 140     span.jp-seek-bar {
 141       height: 100%;
 142       position: absolute;
 143       border-radius: 5px;
 144       background-color: #FFFFFF;
 145       top: 0; left: 0;
 146     }
 147
 148     span.jp-play-bar {
 149       height: 100%;
 150       position: absolute;
 151       border-radius: 5px;
 152       background-color: #006066;
 153       top: 0; left: 0;
 154     }
 155   }
 156 }
 157
 158
 159
 160
 161 .c-player__title {
 162   top: -27px;
 163   left: 0;
 164   position: absolute;
 165   font-style: normal;
 166   font-weight: normal;
 167   font-size: 12px;
 168   line-height: 140%;
 169   letter-spacing: 0.05em;
 170   color: #083F4D;
 171 }
 172
 173
 174 .c-player__info {
 175   top: -27px;
 176   left: 0;
 177   position: absolute;
 178   font-style: normal;
 179   font-weight: normal;
 180   font-size: 12px;
 181   line-height: 140%;
 182   letter-spacing: 0.05em;
 183   color: #083F4D;
 184 }
 185
 186 .c-player__chapters {
 187   top: -27px;
 188   right: 0;
 189   position: absolute;
 190   font-style: normal;
 191   font-weight: normal;
 192   font-size: 12px;
 193   line-height: 140%;
 194   letter-spacing: 0.05em;
 195   color: #083F4D;
 196   z-index: 1;
 197
 198   &.is-active {
 199     > span {
 200       &:after {
 201         transform: rotate(180deg);
 202       }
 203     }
 204     ul {
 205       opacity: 1;
 206       transform: none;
 207       pointer-events: all;
 208     }
 209   }
 210
 211   > span {
 212     display: flex;
 213     align-items: center;
 214     cursor: pointer;
 215
 216     &:after {
 217       margin-left: 5px;
 218       content: $icon-arrow-down;
 219       font-family: '#{$icomoon-font-family}' !important;
 220       transition: transform $ease-out 450ms;
 221     }
 222   }
 223
 224   ul {
 225     width: 283px;
 226     position: absolute;
 227     background-color: #083F4D;
 228     transform: translateY(-10px);
 229     opacity: 0;
 230     box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
 231     transition: all $ease-out 450ms;
 232     list-style-position: inside;
 233     border-radius: 10px;
 234     right: 0;
 235     margin: 10px 0 0;
 236     padding: 15px;
 237     pointer-events: none;
 238     li {
 239       font-size: 12px;
 240       line-height: 140%;
 241       letter-spacing: 0.05em;
 242       list-style-type: decimal;
 243       margin: 5px 0;
 244       color: white;
 245
 246       span {
 247           display: none;
 248       }
 249       span.title {
 250           display: inline;
 251       }
 252     }
 253   }
 254 }
 255
 256 .c-player__volume {
 257   display: flex;
 258   align-items: center;
 259   justify-content: center;
 260   margin-left: 40px;
 261
 262   .icon {
 263     font-size: 21px;
 264     color: #007880;
 265     margin-right: 8px;
 266     cursor: pointer;
 267   }
 268
 269   .jp-volume-bar {
 270     width: 100px;
 271     border-radius: 5px;
 272     height: 10px;
 273     display: block;
 274     background: white;
 275   }
 276   .jp-volume-bar-value {
 277       display: block;
 278       height: 10px;
 279       border-radius: 5px;
 280       background: #006066;
 281   }
 282 }
 283
 284
 285 .c-player__length {
 286   width: 100%;
 287   display: block;
 288   position: relative;
 289
 290   > span {
 291     position: absolute;
 292     padding-top: 10px;
 293     font-style: normal;
 294     font-weight: normal;
 295     font-size: 12px;
 296     line-height: 140%;
 297     letter-spacing: 0.05em;
 298     color: #083F4D;
 299
 300     &:nth-child(1) { left: 0; }
 301     &:nth-child(2) { right: 0; }
 302   }
 303 }