src/wolnelektury/static/2022/styles/reader_player.scss

   1 @import "utils/module";
   2 @import "base/icons";
   3 @import "components/select";
   4
   5
   6
   7
   8
   9 #player-bar {
  10
  11 // copied from local, move to base
  12 .jp-state-playing .icon-play {
  13   &:before {
  14     content: $icon-pause;
  15   }
  16 }
  17 .jp-state-muted .icon-volume {
  18   &:before {
  19     content: $icon-mute;
  20   }
  21 }
  22
  23 // *
  24
  25
  26
  27
  28 .c-media {
  29   margin: 0 auto;
  30 }
  31
  32 .c-media__actions {
  33   display: flex;
  34 }
  35
  36 .c-media__btn {
  37   width: 100%;
  38   text-align: center;
  39   align-items: center;
  40
  41   &:nth-child(1) { padding-right: 19px; }
  42   &:nth-child(2) { padding-left: 19px; padding-right: 19px; }
  43   &:nth-child(3) { padding-left: 19px; }
  44
  45   .l-button {
  46     width: 100%;
  47     display: flex;
  48     align-items: center;
  49     justify-content: center;
  50   }
  51 }
  52
  53 .c-media__player {
  54
  55     position: fixed;
  56     bottom: 0;
  57     left: 0;
  58     right: 0;
  59     z-index: 1000;
  60
  61
  62   h2 {
  63       //font-weight: $bold;
  64       font-weight: bold;
  65       //@include font-size(16px);
  66       font-size: 16px;
  67     line-height: 19px;
  68     text-align: center;
  69     letter-spacing: 0.01em;
  70     color: $color-gray;
  71     margin: 0;
  72   }
  73 }
  74
  75 .c-media__caption {
  76   color: #474747;
  77   background: #F2F2F2;
  78   padding: 15px 24px;
  79   border-radius: 0 0 5px 5px;
  80   margin: 0 auto;
  81   display: flex;
  82   align-items: center;
  83   justify-content: space-between;
  84
  85   .icons {}
  86   .content {
  87     padding-left: 35px;
  88     width: calc(100% - 145px);
  89   }
  90
  91   .icon {
  92     color: #808080;
  93     font-size: 26px;
  94     &:not(:last-child) {
  95       margin-right: 16px;
  96     }
  97   }
  98
  99   p {
 100     margin: 0;
 101     color: #474747;
 102     font-weight: normal;
 103     font-size: 12px;
 104     line-height: 140%;
 105   }
 106 }
 107
 108
 109
 110
 111 .c-player {
 112   display: flex;
 113   width: 100%;
 114   align-items: center;
 115   position: relative;
 116   color: #083F4D;
 117   background-color: #D5ECED;
 118   padding: 0 34px 0 14px;
 119 }
 120
 121 .c-player__btn {
 122   background: #083F4D;
 123   border: 0;
 124   outline: 0;
 125   border-radius: 50%;
 126   padding: 0;
 127   width: 60px;
 128   height: 60px;
 129   display: flex;
 130   align-items: center;
 131   justify-content: center;
 132   cursor: pointer;
 133   transition: all $ease-dynamic 350ms;
 134
 135   &:hover {
 136     background: #083F4D;
 137     .icon {color: white;}
 138   }
 139
 140   .icon {
 141     color: white;
 142     font-size: 26px;
 143     position: relative;
 144     transition: background $ease-dynamic 350ms;
 145     &.icon-play {
 146       left: 3px;
 147     }
 148     &.icon-pause {
 149       left: 1px;
 150     }
 151   }
 152 }
 153 .jp-state-playing {
 154     .c-player__btn {
 155         .icon.icon-play {
 156             left: 1px;
 157         }
 158     }
 159 }
 160
 161 .c-player__btns {
 162   display: flex;
 163   align-items: center;
 164
 165   button {
 166     padding: 0;
 167     display: flex;
 168     align-items: center;
 169     justify-content: center;
 170     background-color: transparent;
 171     width: 40px; height: 40px;
 172     border-radius: 50%;
 173     cursor: pointer;
 174     margin: 0 5px;
 175     outline: 0;
 176     border: 1px solid transparent;
 177     transition: border-color $ease-out 450ms;
 178
 179     &:first-child {
 180       margin-left: 0;
 181     }
 182
 183     &:hover {
 184       border-color: rgba(#fff, 0.5);
 185     }
 186
 187     &:disabled {
 188         opacity: .33;
 189         &:hover {
 190             border-color: transparent;
 191         }
 192     }
 193
 194     &.c-player__btn--md {
 195       width: 50px; height: 50px;
 196       .icon-play {
 197         font-size: 20px;
 198         position: relative;
 199         left: 2px;
 200       }
 201       .icon-pause {
 202         font-size: 20px;
 203       }
 204     }
 205
 206     .icon {
 207       color: #083F4D;
 208       font-size: 16px;
 209     }
 210   }
 211 }
 212 .jp-state-playing {
 213     .c-player__btns {
 214         button {
 215             &.c-player__btn--md {
 216                 .icon-play {
 217                     left: 0;
 218                 }
 219             }
 220         }
 221     }
 222 }
 223
 224 .c-player__timeline {
 225   //max-width: 590px;
 226   //width: calc(100% - 60px);
 227   //margin-left: auto;
 228     //margin-right: 0;
 229     width: 100%;
 230     margin: 0 30px;
 231   position: relative;
 232
 233   & > span {
 234     height: 10px;
 235     width: 100%;
 236     display: block;
 237     background: #F2F2F2;
 238     border-radius: 5px;
 239     position: relative;
 240     overflow: hidden;
 241
 242     span.jp-seek-bar {
 243       height: 100%;
 244       position: absolute;
 245       border-radius: 5px;
 246       background-color: #FFFFFF;
 247       top: 0; left: 0;
 248     }
 249
 250     span.jp-play-bar {
 251       height: 100%;
 252       position: absolute;
 253       border-radius: 5px;
 254       background-color: #006066;
 255       top: 0; left: 0;
 256     }
 257   }
 258 }
 259
 260
 261
 262
 263 .c-player__title {
 264   top: -27px;
 265   left: 0;
 266   position: absolute;
 267   font-style: normal;
 268   font-weight: normal;
 269   font-size: 12px;
 270   line-height: 140%;
 271   letter-spacing: 0.05em;
 272   color: #083F4D;
 273 }
 274
 275
 276 .c-player__info {
 277     display: none;
 278   font-style: normal;
 279   font-weight: normal;
 280   font-size: 12px;
 281   line-height: 140%;
 282   letter-spacing: 0.05em;
 283   color: #083F4D;
 284 }
 285
 286 .c-player__chapters {
 287     display: none;
 288   font-style: normal;
 289   font-weight: normal;
 290   font-size: 12px;
 291   line-height: 140%;
 292   letter-spacing: 0.05em;
 293   color: #083F4D;
 294   z-index: 1;
 295
 296   &.is-active {
 297     > span {
 298       &:after {
 299         transform: rotate(180deg);
 300       }
 301     }
 302     ul {
 303       opacity: 1;
 304       transform: none;
 305       pointer-events: all;
 306     }
 307   }
 308
 309   > span {
 310     display: flex;
 311     align-items: center;
 312     cursor: pointer;
 313
 314     &:after {
 315       margin-left: 5px;
 316       content: $icon-arrow-down;
 317       font-family: '#{$icomoon-font-family}' !important;
 318       transition: transform $ease-out 450ms;
 319     }
 320   }
 321
 322   ul {
 323     width: 283px;
 324     position: absolute;
 325     background-color: #083F4D;
 326     transform: translateY(-10px);
 327     opacity: 0;
 328     box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
 329     transition: all $ease-out 450ms;
 330     list-style-position: inside;
 331     border-radius: 10px;
 332     right: 0;
 333     margin: 10px 0 0;
 334     padding: 15px;
 335     pointer-events: none;
 336     li {
 337       font-size: 12px;
 338       line-height: 140%;
 339       letter-spacing: 0.05em;
 340       list-style-type: decimal;
 341       margin: 5px 0;
 342       color: white;
 343       cursor: pointer;
 344
 345       span {
 346           display: none;
 347       }
 348       span.title {
 349           display: inline;
 350       }
 351     }
 352   }
 353 }
 354
 355 .c-player__volume {
 356   display: flex;
 357   align-items: center;
 358   justify-content: center;
 359   margin-left: 40px;
 360
 361   .icon {
 362     font-size: 21px;
 363     color: #083F4D;
 364     margin-right: 8px;
 365     cursor: pointer;
 366   }
 367
 368   .jp-volume-bar {
 369     width: 100px;
 370     border-radius: 5px;
 371     height: 10px;
 372     display: block;
 373     background: white;
 374   }
 375   .jp-volume-bar-value {
 376       display: block;
 377       height: 10px;
 378       border-radius: 5px;
 379       background: #006066;
 380   }
 381 }
 382
 383
 384 .c-player__length {
 385   width: 100%;
 386   display: block;
 387   position: relative;
 388
 389   > span {
 390     position: absolute;
 391     //padding-top: 10px;
 392     font-style: normal;
 393     font-weight: normal;
 394     font-size: 12px;
 395     line-height: 140%;
 396     letter-spacing: 0.05em;
 397     color: white;
 398
 399     &:nth-child(1) { left: 0; }
 400     &:nth-child(2) { right: 0; }
 401     &:nth-child(3) {
 402         left: 0;
 403         right: 0;
 404         text-align: center;
 405     }
 406   }
 407 }
 408
 409
 410 .project-icon {
 411     max-width: 100px;
 412     max-height: 50px;
 413 }
 414
 415
 416 #locator {
 417     position: relative;
 418     &.snap {
 419         background: white;
 420         .icon {
 421             color: black;
 422         }
 423     }
 424
 425     &.up:after {
 426         content: '▲';
 427         color: #083F4D;
 428         font-size: .8em;
 429         position: absolute;
 430         top: 0px;
 431         left: 0;
 432         right: 0;
 433         text-align: center;
 434     }
 435     &.down:after {
 436         content: '▼';
 437         color: #083F4D;
 438         font-size: .8em;
 439         position: absolute;
 440         bottom: 2px;
 441         left: 0;
 442         right: 0;
 443         text-align: center;
 444     }
 445 }
 446
 447 }
 448
 449
 450 #menu {
 451     padding-bottom: 50px;
 452     * {
 453         box-sizing: content-box;
 454     }
 455 }
 456
 457
 458
 459 .with-player-bar .playing-highlight {
 460     background: #FFE694;
 461 }
 462
 463
 464
 465 #player-bar {
 466     display: none;
 467 }
 468 .with-player-bar {
 469     #player-bar {
 470         display: block;
 471     }
 472 }
 473
 474 .annoy-banner-on_blackout {
 475         display: none !important;
 476 }