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   background-color: #D5ECED;
   7   padding: 25px 34px 25px 14px;
   8 }
   9
  10 .c-player__head {
  11   background: #006066;
  12   padding: 8px 14px;
  13   border-radius: 5px 5px 0px 0px;
  14   font-weight: 600;
  15   font-size: 12px;
  16   line-height: 140%;
  17   letter-spacing: 0.02em;
  18   color: #FFFFFF;
  19 }
  20
  21 .c-player__btn {
  22   background: white;
  23   border: 0;
  24   outline: 0;
  25   border-radius: 50%;
  26   padding: 0;
  27   width: 60px;
  28   height: 60px;
  29   display: flex;
  30   align-items: center;
  31   justify-content: center;
  32   cursor: pointer;
  33   transition: all $ease-dynamic 350ms;
  34
  35   &:hover {
  36     background: #083F4D;
  37     .icon {color: white;}
  38   }
  39
  40   .icon {
  41     color: #007880;
  42     font-size: 26px;
  43     position: relative;
  44     transition: background $ease-dynamic 350ms;
  45     &.icon-play {
  46       left: 3px;
  47     }
  48     &.icon-pause {
  49       left: 1px;
  50     }
  51   }
  52 }
  53
  54 .c-player__btns {
  55   display: flex;
  56   align-items: center;
  57
  58   button {
  59     padding: 0;
  60     display: flex;
  61     align-items: center;
  62     justify-content: center;
  63     background-color: transparent;
  64     width: 40px; height: 40px;
  65     border-radius: 50%;
  66     cursor: pointer;
  67     margin: 0 5px;
  68     outline: 0;
  69     border: 1px solid transparent;
  70     transition: border-color $ease-out 450ms;
  71
  72     &:first-child {
  73       margin-left: 0;
  74     }
  75
  76     &:hover {
  77       border-color: rgba(#007880, 0.5);
  78     }
  79
  80     &.c-player__btn--md {
  81       width: 50px; height: 50px;
  82       .icon-play {
  83         font-size: 20px;
  84         position: relative;
  85         left: 2px;
  86       }
  87       .icon-pause {
  88         font-size: 20px;
  89       }
  90     }
  91
  92     .icon {
  93       color: #007880;
  94       font-size: 16px;
  95     }
  96   }
  97 }
  98
  99 .c-player__timeline {
 100   max-width: 590px;
 101   width: calc(100% - 60px);
 102   margin-left: auto;
 103   margin-right: 0;
 104   position: relative;
 105
 106   & > span {
 107     height: 10px;
 108     width: 100%;
 109     display: block;
 110     background: #FFFFFF;
 111     border-radius: 5px;
 112     position: relative;
 113     overflow: hidden;
 114
 115     span {
 116       width: 40%;
 117       height: 100%;
 118       position: absolute;
 119       border-radius: 5px;
 120       background-color: #006066;
 121       top: 0; left: 0;
 122     }
 123   }
 124 }
 125
 126 .c-player__info {
 127   top: -27px;
 128   left: 0;
 129   position: absolute;
 130   font-style: normal;
 131   font-weight: normal;
 132   font-size: 12px;
 133   line-height: 140%;
 134   letter-spacing: 0.05em;
 135   color: #083F4D;
 136 }
 137
 138 .c-player__chapters {
 139   top: -27px;
 140   right: 0;
 141   position: absolute;
 142   font-style: normal;
 143   font-weight: normal;
 144   font-size: 12px;
 145   line-height: 140%;
 146   letter-spacing: 0.05em;
 147   color: #083F4D;
 148   z-index: 1;
 149
 150   &.is-active {
 151     span {
 152       &:after {
 153         transform: rotate(180deg);
 154       }
 155     }
 156     ul {
 157       opacity: 1;
 158       transform: none;
 159       pointer-events: all;
 160     }
 161   }
 162
 163   span {
 164     display: flex;
 165     align-items: center;
 166     cursor: pointer;
 167
 168     &:after {
 169       margin-left: 5px;
 170       content: $icon-arrow-down;
 171       font-family: '#{$icomoon-font-family}' !important;
 172       transition: transform $ease-out 450ms;
 173     }
 174   }
 175
 176   ul {
 177     width: 283px;
 178     position: absolute;
 179     background-color: #083F4D;
 180     transform: translateY(-10px);
 181     opacity: 0;
 182     box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
 183     transition: all $ease-out 450ms;
 184     list-style-position: inside;
 185     border-radius: 10px;
 186     right: 0;
 187     margin: 10px 0 0;
 188     padding: 15px;
 189     pointer-events: none;
 190     li {
 191       font-size: 12px;
 192       line-height: 140%;
 193       letter-spacing: 0.05em;
 194       list-style-type: decimal;
 195       margin: 5px 0;
 196       color: white;
 197     }
 198   }
 199 }
 200
 201 .c-player__volume {
 202   display: flex;
 203   align-items: center;
 204   justify-content: center;
 205   margin-left: 40px;
 206
 207   .icon {
 208     font-size: 21px;
 209     color: #007880;
 210     margin-right: 8px;
 211     cursor: pointer;
 212   }
 213
 214   input[type=range] {
 215     width: 100px;
 216     -webkit-appearance: none;
 217     background: 0 0;
 218     border: 0;
 219     border-radius: 5px;
 220     height: 10px;
 221     color: #006066;
 222     display: block;
 223     margin: 0;
 224     padding: 0;
 225     transition: box-shadow .3s ease;
 226     outline: 0;
 227
 228     background: white;
 229     background-image: linear-gradient(#006066, #006066);
 230     background-size: 60% 100%;
 231     background-repeat: no-repeat;
 232   }
 233 }
 234
 235 input[type=range]::-webkit-slider-thumb {
 236   height: 10px;
 237   width: 10px;
 238   background: #006066;
 239   border-radius: 50%;
 240   cursor: pointer;
 241 }
 242
 243 input[type=range],
 244 input[type=range]::-webkit-slider-runnable-track,
 245 input[type=range]::-webkit-slider-thumb {
 246   -webkit-appearance: none;
 247 }
 248
 249 .c-player__length {
 250   width: 100%;
 251   display: block;
 252   position: relative;
 253
 254   span {
 255     position: absolute;
 256     padding-top: 10px;
 257     font-style: normal;
 258     font-weight: normal;
 259     font-size: 12px;
 260     line-height: 140%;
 261     letter-spacing: 0.05em;
 262     color: #083F4D;
 263
 264     &:nth-child(1) { left: 0; }
 265     &:nth-child(2) { right: 0; }
 266   }
 267 }