fbc861c313e0cd82c3ebabc41fa10515938cd229
[wolnelektury.git] / 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 }