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: #F2F2F2;
  73     border-radius: 5px;
  74     position: relative;
  75     overflow: hidden;
  76
  77     span.jp-seek-bar {
  78       height: 100%;
  79       position: absolute;
  80       border-radius: 5px;
  81       background-color: #FFFFFF;
  82       top: 0; left: 0;
  83     }
  84
  85     span.jp-play-bar {
  86       height: 100%;
  87       position: absolute;
  88       border-radius: 5px;
  89       background-color: #083F4D;
  90       top: 0; left: 0;
  91     }
  92   }
  93 }
  94
  95
  96 .c-player__title {
  97   top: -27px;
  98   left: 0;
  99   position: absolute;
 100   font-style: normal;
 101   font-weight: normal;
 102   font-size: 12px;
 103   line-height: 140%;
 104   letter-spacing: 0.05em;
 105   color: #083F4D;
 106 }
 107
 108
 109 .c-player__info {
 110   top: -27px;
 111   right: 0;
 112   position: absolute;
 113   font-style: normal;
 114   font-weight: normal;
 115   font-size: 12px;
 116   line-height: 140%;
 117   letter-spacing: 0.05em;
 118   color: #083F4D;
 119 }
 120
 121 .c-player__length {
 122   width: 100%;
 123   display: block;
 124   position: relative;
 125
 126   > span {
 127     position: absolute;
 128     padding-top: 10px;
 129     font-style: normal;
 130     font-weight: normal;
 131     font-size: 12px;
 132     line-height: 140%;
 133     letter-spacing: 0.05em;
 134     color: #083F4D;
 135
 136     &:nth-child(1) { left: 0; }
 137     &:nth-child(2) { right: 0; }
 138   }
 139 }