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

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