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