Card by bociKond

1/* Spotify music card made by: csozi | Website: www.csozi.hu*/
2
3.card {
4  position: relative;
5  min-width: 250px;
6  min-height: 120px;
7  background: #191414;
8  border-radius: 10px;
9  padding: .8rem;
10  display: flex;
11  flex-direction: column;
12  gap: .5rem;
13  box-shadow: 0 10px 40px -25px rgba(100, 100, 100, .5);
14}
15
16.top {
17  position: relative;
18  width: 100%;
19  display: flex;
20  align-items: center;
21  gap: 10px;
22  margin-block-end: .5rem;
23}
24
25.pfp {
26  position: relative;
27  height: 40px;
28  width: 40px;
29  background-color: white;
30  border-radius: 5px;
31  display: flex;
32  justify-content: center;
33  align-items: center;
34}
35
36.title-1 {
37  color: white;
38  font-size: 1.25rem;
39  font-weight: 900;
40}
41
42.title-2 {
43  color: white;
44  font-size: .75rem;
45  opacity: .8;
46}
47
48/* new */
49.song-time {
50  width: 100%;
51  margin-inline: auto;
52  position: relative;
53  display: flex;
54  align-items: center;
55  gap: .3rem;
56}
57
58.time {
59  width: 90%;
60  background-color: #5e5e5e;
61  height: .35rem;
62  border-radius: 3px;
63}
64
65.elapsed {
66  width: 42%;
67  background-color: #1db954;
68  height: 100%;
69  border-radius: 3px;
70}
71
72.controls {
73  color: white;
74  display: flex;
75  justify-content: space-evenly;
76  align-items: center;
77  width: 100%;
78}
79
80.volume {
81  height: 100%;
82  width: 48px;
83}
84
85.air {
86  height: 100%;
87  width: 48px;
88}
89
90.controls svg {
91  cursor: pointer;
92  transition: 0.1s;
93}
94
95.controls svg:hover {
96  color: #1db954;
97}
98
99.controls .heart:hover {
100  color: pink;
101}
102
103.volume {
104  opacity: 0;
105  position: relative;
106  transition: 0.2s;
107}
108
109.volume .slider {
110  height: 4px;
111  background-color: #5e5e5e;
112  width: 80%;
113  border-radius: 2px;
114  margin-left: .3rem;
115}
116
117.volume .slider .green {
118  background-color: #1db954;
119  height: 100%;
120  width: 80%;
121  border-radius: 3px;
122}
123
124.volume .circle {
125  background-color: white;
126  height: 6px;
127  width: 6px;
128  border-radius: 3px;
129  position: absolute;
130  right: 20%;
131  top: 50%;
132  transform: translateY(-50%);
133}
134
135.volume_button:hover ~ .volume {
136  opacity: 1;
137}
138
139.timetext {
140  color: white;
141}
142
143.time_now {
144  font-size: .8rem;
145  background-color: #00000060;
146  padding: .5rem;
147  border-radius: .5rem;
148  background-blend-mode: multiply;
149}
150
151.time_full {
152  font-size: .8rem;
153  background-color: #00000060;
154  padding: .5rem;
155  border-radius: .5rem;
156  background-blend-mode: multiply;
157}
158
159.playing {
160  display: flex;
161  position: relative;
162  justify-content: center;
163  gap: 1px;
164  width: 30px;
165  height: 20px;
166}
167
168.greenline {
169  background-color: #1db954;
170  height: 20px;
171  width: 2px;
172  position: relative;
173  transform-origin: bottom;
174}
175
176.line-1 {
177  animation: infinite playing 1s ease-in-out;
178  animation-delay: 0.2s;
179}
180
181.line-2 {
182  animation: infinite playing 1s ease-in-out;
183  animation-delay: 0.5s;
184}
185
186.line-3 {
187  animation: infinite playing 1s ease-in-out;
188  animation-delay: 0.6s;
189}
190
191.line-4 {
192  animation: infinite playing 1s ease-in-out;
193  animation-delay: 0s;
194}
195
196.line-5 {
197  animation: infinite playing 1s ease-in-out;
198  animation-delay: 0.4s;
199}
200
201@keyframes playing {
202  0% {
203    transform: scaleY(0.1);
204  }
205
206  33% {
207    transform: scaleY(0.6);
208  }
209
210  66% {
211    transform: scaleY(0.9);
212  }
213
214  100% {
215    transform: scaleY(0.1);
216  }
217}