Audiobook player UI updated
[wolnelektury.git] / src / wolnelektury / static / 2021 / css / components / _player.scss
1 .c-player {
2   display: flex;
3   width: 100%;
4   align-items: center;
5   position: relative;
6 }
7
8 .c-player__btn {
9   background: $color-primary;
10   border: 0;
11   outline: 0;
12   border-radius: 50%;
13   padding: 0;
14   width: 60px;
15   height: 60px;
16   display: flex;
17   align-items: center;
18   justify-content: center;
19   cursor: pointer;
20   transition: all $ease-dynamic 350ms;
21
22   &:hover {
23     background: darken($color-primary, 3%);
24     border-color: darken($color-primary, 3%);
25   }
26 }
27
28 .c-player__timeline {
29   width: calc(100% - 60px);
30
31   span {
32     height: 5px;
33     width: 100%;
34     background: $color-primary;
35     display: block;
36   }
37 }
38
39 .c-player__length {
40   position: absolute;
41   right: 0;
42   padding-top: 3px;
43   font-weight: bold;
44   @include font-size(16px);
45   line-height: 19px;
46   text-align: right;
47   letter-spacing: 0.01em;
48 }