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

   1 .c-player {
   2   width: 100%;
   3   align-items: center;
   4   position: relative;
   5   background-color: #D5ECED;
   6   padding: 105px 70px 25px 70px;
   7
   8   @include rwd($break-flow) {
   9       display: flex;
  10       flex-direction: row;
  11       padding: 25px 34px 25px 14px;
  12   }
  13 }
  14
  15 .c-player__head {
  16   background: #006066;
  17   padding: 8px 14px;
  18   border-radius: 5px 5px 0px 0px;
  19   font-weight: 600;
  20   font-size: 12px;
  21   line-height: 140%;
  22   letter-spacing: 0.02em;
  23   color: #FFFFFF;
  24 }
  25
  26 .c-player__btn {
  27   background: white;
  28   border: 0;
  29   outline: 0;
  30   border-radius: 50%;
  31   padding: 0;
  32   width: 60px;
  33   height: 60px;
  34   display: flex;
  35   align-items: center;
  36   justify-content: center;
  37   cursor: pointer;
  38   transition: all $ease-dynamic 350ms;
  39
  40   &:hover {
  41     background: #083F4D;
  42     .icon {color: white;}
  43   }
  44
  45   .icon {
  46     color: #007880;
  47     font-size: 26px;
  48     position: relative;
  49     transition: background $ease-dynamic 350ms;
  50     &.icon-play {
  51       left: 3px;
  52     }
  53     &.icon-pause {
  54       left: 1px;
  55     }
  56   }
  57 }
  58 .jp-state-playing {
  59     .c-player__btn {
  60         .icon.icon-play {
  61             left: 1px;
  62         }
  63     }
  64 }
  65
  66 .c-player__btns {
  67   display: flex;
  68   align-items: center;
  69
  70   .play-prev {
  71       position: absolute;
  72       left: calc(30% - 20px);
  73       top: 15px;
  74       @include rwd($break-flow) {
  75           position: static;
  76       }
  77   }
  78   .jp-play {
  79       position: absolute;
  80       left: calc(50% - 25px);
  81       top: 10px;
  82       @include rwd($break-flow) {
  83           position: static;
  84       }
  85   }
  86   .play-next {
  87       position: absolute;
  88       left: calc(70% - 20px);
  89       top: 15px;
  90       @include rwd($break-flow) {
  91           position: static;
  92       }
  93   }
  94
  95   button {
  96     padding: 0;
  97     display: flex;
  98     align-items: center;
  99     justify-content: center;
 100     background-color: transparent;
 101     width: 40px; height: 40px;
 102     border-radius: 50%;
 103     cursor: pointer;
 104     margin: 0 5px;
 105     outline: 0;
 106     border: 1px solid transparent;
 107     transition: border-color $ease-out 450ms;
 108
 109     &:first-child {
 110       margin-left: 0;
 111     }
 112
 113     &:hover {
 114       border-color: rgba(#007880, 0.5);
 115     }
 116
 117     &:disabled {
 118         opacity: .33;
 119         &:hover {
 120             border-color: transparent;
 121         }
 122     }
 123
 124     &.c-player__btn--md {
 125       width: 50px; height: 50px;
 126       .icon-play {
 127         font-size: 20px;
 128         position: relative;
 129         left: 2px;
 130       }
 131       .icon-pause {
 132         font-size: 20px;
 133       }
 134     }
 135
 136     .icon {
 137       color: #007880;
 138       font-size: 16px;
 139     }
 140   }
 141 }
 142 .jp-state-playing {
 143     .c-player__btns {
 144         button {
 145             &.c-player__btn--md {
 146                 .icon-play {
 147                     left: 0;
 148                 }
 149             }
 150         }
 151     }
 152 }
 153
 154 .c-player__timeline {
 155   @include rwd($break-flow) {
 156       position: relative;
 157       width: calc(100% - 60px);
 158       margin-left: auto;
 159       max-width: 590px;
 160       margin-right: 0;
 161   }
 162
 163   & > span {
 164     height: 10px;
 165     width: 100%;
 166     display: block;
 167     background: #F2F2F2;
 168     border-radius: 5px;
 169     position: relative;
 170     overflow: hidden;
 171
 172     span.jp-seek-bar {
 173       height: 100%;
 174       position: absolute;
 175       border-radius: 5px;
 176       background-color: #FFFFFF;
 177       top: 0; left: 0;
 178     }
 179
 180     span.jp-play-bar {
 181       height: 100%;
 182       position: absolute;
 183       border-radius: 5px;
 184       background-color: #006066;
 185       top: 0; left: 0;
 186     }
 187   }
 188 }
 189
 190
 191
 192
 193 .c-player__title {
 194   top: -27px;
 195   left: 0;
 196   position: absolute;
 197   font-style: normal;
 198   font-weight: normal;
 199   font-size: 12px;
 200   line-height: 140%;
 201   letter-spacing: 0.05em;
 202   color: #083F4D;
 203 }
 204
 205
 206 .c-player__info {
 207   position: absolute;
 208   font-style: normal;
 209   font-weight: normal;
 210   font-size: 12px;
 211   line-height: 140%;
 212   letter-spacing: 0.05em;
 213   color: #083F4D;
 214
 215   top: 70px;
 216   left: 16px;
 217
 218   @include rwd($break-flow) {
 219       top: -27px;
 220       left: 0;
 221   }
 222 }
 223
 224 .c-player__chapters {
 225   top: 35px - 8.4px;
 226   right: calc(10% - 50px);
 227   width: 100px;
 228   position: absolute;
 229   font-style: normal;
 230   font-weight: normal;
 231   font-size: 12px;
 232   line-height: 140%;
 233   letter-spacing: 0.05em;
 234   color: #083F4D;
 235   z-index: 1;
 236
 237   @include rwd($break-flow) {
 238       top: -27px;
 239       right: 0;
 240   }
 241
 242   &.is-active {
 243     > span {
 244       &:after {
 245         transform: rotate(180deg);
 246       }
 247     }
 248     ul {
 249       opacity: 1;
 250       transform: none;
 251       pointer-events: all;
 252     }
 253   }
 254
 255   > span {
 256     display: flex;
 257     align-items: center;
 258     cursor: pointer;
 259     justify-content: center;
 260
 261     &:after {
 262       margin-left: 5px;
 263       content: $icon-arrow-down;
 264       font-family: '#{$icomoon-font-family}' !important;
 265       transition: transform $ease-out 450ms;
 266     }
 267   }
 268
 269   ul {
 270     width: 283px;
 271     position: absolute;
 272     background-color: #083F4D;
 273     transform: translateY(-10px);
 274     opacity: 0;
 275     box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
 276     transition: all $ease-out 450ms;
 277     list-style-position: inside;
 278     border-radius: 10px;
 279     right: 0;
 280     margin: 10px 0 0;
 281     padding: 15px;
 282     pointer-events: none;
 283     li {
 284       font-size: 12px;
 285       line-height: 140%;
 286       letter-spacing: 0.05em;
 287       list-style-type: decimal;
 288       margin: 5px 0;
 289       color: white;
 290       cursor: pointer;
 291
 292       span {
 293           display: none;
 294       }
 295       span.title {
 296           display: inline;
 297       }
 298     }
 299     div.title {
 300       font-size: 12px;
 301       line-height: 140%;
 302       letter-spacing: 0.05em;
 303       list-style-type: decimal;
 304       margin: 5px 0;
 305       color: white;
 306       cursor: pointer;
 307     }
 308   }
 309 }
 310
 311 .c-player__volume {
 312   display: none;
 313   align-items: center;
 314   justify-content: center;
 315   margin-left: 40px;
 316
 317   @include rwd($break-flow) {
 318       display: flex;
 319   }
 320
 321   .icon {
 322     font-size: 21px;
 323     color: #007880;
 324     margin-right: 8px;
 325     cursor: pointer;
 326   }
 327
 328   .jp-volume-bar {
 329     width: 100px;
 330     border-radius: 5px;
 331     height: 10px;
 332     display: block;
 333     background: white;
 334   }
 335   .jp-volume-bar-value {
 336       display: block;
 337       height: 10px;
 338       border-radius: 5px;
 339       background: #006066;
 340   }
 341 }
 342
 343
 344 .c-player__length {
 345
 346   @include rwd($break-flow) {
 347       position: relative;
 348       display: block;
 349       width: 100%;
 350   }
 351
 352   > span {
 353     position: absolute;
 354     font-style: normal;
 355     font-weight: normal;
 356     font-size: 12px;
 357     line-height: 140%;
 358     letter-spacing: 0.05em;
 359     color: #083F4D;
 360
 361     bottom: 22px;
 362
 363     @include rwd($break-flow) {
 364         padding-top: 10px;
 365         bottom: auto;
 366     }
 367
 368     &.jp-current-time {
 369         left: 16px;
 370
 371         @include rwd($break-flow) {
 372             left: 0;
 373         }
 374     }
 375     &.time-left {
 376         right: 16px;
 377         @include rwd($break-flow) {
 378             right: 0;
 379         }
 380     }
 381     &.total-time-left {
 382         left: 0;
 383         right: 0;
 384         bottom: 5px;
 385         text-align: center;
 386         @include rwd($break-flow) {
 387             bottom: auto;
 388         }
 389     }
 390   }
 391 }
 392
 393
 394 .project-icon {
 395     max-width: 100px;
 396     max-height: 50px;
 397 }