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   padding: 25px 34px;
   7   background-color: #D5ECED;
   8   border-radius: 5px;
   9 }
  10
  11 .c-player__btn {
  12   background: white;
  13   border: 0;
  14   outline: 0;
  15   border-radius: 50%;
  16   padding: 0;
  17   width: 60px;
  18   height: 60px;
  19   display: flex;
  20   align-items: center;
  21   justify-content: center;
  22   cursor: pointer;
  23   transition: all $ease-dynamic 350ms;
  24
  25   &:hover {
  26     background: #083F4D;
  27     .icon {color: white;}
  28   }
  29
  30   .icon {
  31     color: #007880;
  32     font-size: 26px;
  33     position: relative;
  34     transition: background $ease-dynamic 350ms;
  35     &.icon-play {
  36       left: 3px;
  37     }
  38     &.icon-pause {
  39       left: 1px;
  40     }
  41   }
  42 }
  43
  44 .c-player__timeline {
  45   max-width: 590px;
  46   width: calc(100% - 60px);
  47   margin-left: auto;
  48   margin-right: 0;
  49   position: relative;
  50
  51   &:before {
  52     content: "1×";
  53     font-weight: bold;
  54     font-size: 15px;
  55     line-height: 120%;
  56     text-align: center;
  57     color: #007880;
  58     position: absolute;
  59     top: 0;
  60     bottom: 0;
  61     margin: auto;
  62     display: flex;
  63     align-items: center;
  64     justify-content: center;
  65     margin-left: -70px;
  66   }
  67
  68   & > span {
  69     height: 10px;
  70     width: 100%;
  71     display: block;
  72     background: #FFFFFF;
  73     border-radius: 5px;
  74     position: relative;
  75     overflow: hidden;
  76
  77     span {
  78       width: 40%;
  79       height: 100%;
  80       position: absolute;
  81       border-radius: 5px;
  82       background-color: #083F4D;
  83       top: 0; left: 0;
  84     }
  85   }
  86 }
  87
  88 .c-player__info {
  89   top: -27px;
  90   right: 0;
  91   position: absolute;
  92   font-style: normal;
  93   font-weight: normal;
  94   font-size: 12px;
  95   line-height: 140%;
  96   letter-spacing: 0.05em;
  97   color: #083F4D;
  98 }
  99
 100 .c-player__length {
 101   width: 100%;
 102   display: block;
 103   position: relative;
 104
 105   span {
 106     position: absolute;
 107     padding-top: 10px;
 108     font-style: normal;
 109     font-weight: normal;
 110     font-size: 12px;
 111     line-height: 140%;
 112     letter-spacing: 0.05em;
 113     color: #083F4D;
 114
 115     &:nth-child(1) { left: 0; }
 116     &:nth-child(2) { right: 0; }
 117   }
 118 }