src/wolnelektury/static/2021/css/components/_player.scss

   1 .c-player {
   2   display: flex;
   3   width: 100%;
   4   align-items: center;
   5   position: relative;
   6 }
   7
   8 .c-player__btn {
   9   background: $color-primary;
  10   border: 0;
  11   outline: 0;
  12   border-radius: 50%;
  13   padding: 0;
  14   width: 60px;
  15   height: 60px;
  16   display: flex;
  17   align-items: center;
  18   justify-content: center;
  19   cursor: pointer;
  20   transition: all $ease-dynamic 350ms;
  21
  22   &:hover {
  23     background: darken($color-primary, 3%);
  24     border-color: darken($color-primary, 3%);
  25   }
  26 }
  27
  28 .c-player__timeline {
  29   width: calc(100% - 60px);
  30
  31   span {
  32     height: 5px;
  33     width: 100%;
  34     background: $color-primary;
  35     display: block;
  36   }
  37 }
  38
  39 .c-player__length {
  40   position: absolute;
  41   right: 0;
  42   padding-top: 3px;
  43   font-weight: bold;
  44   @include font-size(16px);
  45   line-height: 19px;
  46   text-align: right;
  47   letter-spacing: 0.01em;
  48 }