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       cursor: pointer;
 246
 247       span {
 248           display: none;
 249       }
 250       span.title {
 251           display: inline;
 252       }
 253     }
 254   }
 255 }
 256
 257 .c-player__volume {
 258   display: flex;
 259   align-items: center;
 260   justify-content: center;
 261   margin-left: 40px;
 262
 263   .icon {
 264     font-size: 21px;
 265     color: #007880;
 266     margin-right: 8px;
 267     cursor: pointer;
 268   }
 269
 270   .jp-volume-bar {
 271     width: 100px;
 272     border-radius: 5px;
 273     height: 10px;
 274     display: block;
 275     background: white;
 276   }
 277   .jp-volume-bar-value {
 278       display: block;
 279       height: 10px;
 280       border-radius: 5px;
 281       background: #006066;
 282   }
 283 }
 284
 285
 286 .c-player__length {
 287   width: 100%;
 288   display: block;
 289   position: relative;
 290
 291   > span {
 292     position: absolute;
 293     padding-top: 10px;
 294     font-style: normal;
 295     font-weight: normal;
 296     font-size: 12px;
 297     line-height: 140%;
 298     letter-spacing: 0.05em;
 299     color: #083F4D;
 300
 301     &:nth-child(1) { left: 0; }
 302     &:nth-child(2) { right: 0; }
 303     &:nth-child(3) {
 304         left: 0;
 305         right: 0;
 306         text-align: center;
 307     }
 308   }
 309 }