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: #F2F2F2;
 111     border-radius: 5px;
 112     position: relative;
 113     overflow: hidden;
 114
 115     span.jp-seek-bar {
 116       height: 100%;
 117       position: absolute;
 118       border-radius: 5px;
 119       background-color: #FFFFFF;
 120       top: 0; left: 0;
 121     }
 122
 123     span.jp-play-bar {
 124       height: 100%;
 125       position: absolute;
 126       border-radius: 5px;
 127       background-color: #006066;
 128       top: 0; left: 0;
 129     }
 130   }
 131 }
 132
 133
 134 .c-player__title {
 135   top: -27px;
 136   left: 0;
 137   position: absolute;
 138   font-style: normal;
 139   font-weight: normal;
 140   font-size: 12px;
 141   line-height: 140%;
 142   letter-spacing: 0.05em;
 143   color: #083F4D;
 144 }
 145
 146
 147 .c-player__info {
 148   top: -27px;
 149   left: 0;
 150   position: absolute;
 151   font-style: normal;
 152   font-weight: normal;
 153   font-size: 12px;
 154   line-height: 140%;
 155   letter-spacing: 0.05em;
 156   color: #083F4D;
 157 }
 158
 159 .c-player__chapters {
 160   top: -27px;
 161   right: 0;
 162   position: absolute;
 163   font-style: normal;
 164   font-weight: normal;
 165   font-size: 12px;
 166   line-height: 140%;
 167   letter-spacing: 0.05em;
 168   color: #083F4D;
 169   z-index: 1;
 170
 171   &.is-active {
 172     span {
 173       &:after {
 174         transform: rotate(180deg);
 175       }
 176     }
 177     ul {
 178       opacity: 1;
 179       transform: none;
 180       pointer-events: all;
 181     }
 182   }
 183
 184   span {
 185     display: flex;
 186     align-items: center;
 187     cursor: pointer;
 188
 189     &:after {
 190       margin-left: 5px;
 191       content: $icon-arrow-down;
 192       font-family: '#{$icomoon-font-family}' !important;
 193       transition: transform $ease-out 450ms;
 194     }
 195   }
 196
 197   ul {
 198     width: 283px;
 199     position: absolute;
 200     background-color: #083F4D;
 201     transform: translateY(-10px);
 202     opacity: 0;
 203     box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
 204     transition: all $ease-out 450ms;
 205     list-style-position: inside;
 206     border-radius: 10px;
 207     right: 0;
 208     margin: 10px 0 0;
 209     padding: 15px;
 210     pointer-events: none;
 211     li {
 212       font-size: 12px;
 213       line-height: 140%;
 214       letter-spacing: 0.05em;
 215       list-style-type: decimal;
 216       margin: 5px 0;
 217       color: white;
 218     }
 219   }
 220 }
 221
 222 .c-player__volume {
 223   display: flex;
 224   align-items: center;
 225   justify-content: center;
 226   margin-left: 40px;
 227
 228   .icon {
 229     font-size: 21px;
 230     color: #007880;
 231     margin-right: 8px;
 232     cursor: pointer;
 233   }
 234
 235   input[type=range] {
 236     width: 100px;
 237     -webkit-appearance: none;
 238     background: 0 0;
 239     border: 0;
 240     border-radius: 5px;
 241     height: 10px;
 242     color: #006066;
 243     display: block;
 244     margin: 0;
 245     padding: 0;
 246     transition: box-shadow .3s ease;
 247     outline: 0;
 248
 249     background: white;
 250     background-image: linear-gradient(#006066, #006066);
 251     background-size: 60% 100%;
 252     background-repeat: no-repeat;
 253   }
 254 }
 255
 256 input[type=range]::-webkit-slider-thumb {
 257   height: 10px;
 258   width: 10px;
 259   background: #006066;
 260   border-radius: 50%;
 261   cursor: pointer;
 262 }
 263
 264 input[type=range],
 265 input[type=range]::-webkit-slider-runnable-track,
 266 input[type=range]::-webkit-slider-thumb {
 267   -webkit-appearance: none;
 268 }
 269
 270 .c-player__length {
 271   width: 100%;
 272   display: block;
 273   position: relative;
 274
 275   > span {
 276     position: absolute;
 277     padding-top: 10px;
 278     font-style: normal;
 279     font-weight: normal;
 280     font-size: 12px;
 281     line-height: 140%;
 282     letter-spacing: 0.05em;
 283     color: #083F4D;
 284
 285     &:nth-child(1) { left: 0; }
 286     &:nth-child(2) { right: 0; }
 287   }
 288 }