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