Card by bociKond

1.main {
2  --clr: #FDFFFC;
3  --clr-text: #1C1D21;
4  --clr1: #018E42;
5  background-color: var(--clr);
6  padding: 1em;
7  padding-bottom: 1.1em;
8  border-radius: 15px;
9  margin: 1em;
10  display: flex;
11  flex-direction: column;
12  outline: 2px solid var(--clr);
13  outline-offset: 3px;
14}
15
16/* new start */
17.top-bar {
18  display: flex;
19  align-items: center;
20  align-self: flex-end;
21  gap: .5rem;
22  list-style: none;
23}
24
25.btn {
26  fill: var(--clr);
27  border: none;
28  width: 2rem;
29  aspect-ratio: 1/1;
30  display: flex;
31  align-items: center;
32  justify-content: center;
33  cursor: pointer;
34  z-index: 10;
35  border-radius: 50%;
36}
37
38.close {
39  background-color: orangered;
40}
41
42.minimize {
43  background-color: var(--clr1);
44}
45
46.songs {
47  display: flex;
48  flex-direction: column;
49  gap: .5rem;
50}
51/* new end */
52
53.loader {
54  display: flex;
55  flex-direction: row;
56  height: 4em;
57  padding-inline: 1em;
58  transform: rotate(180deg);
59  justify-content: right;
60  border-radius: 10px;
61  transition: .4s ease-in-out;
62}
63
64.song > * {
65  transition: .4s ease-in-out;
66}
67
68.loader:hover {
69  cursor: pointer;
70  background-color: var(--clr1);
71  --clr-text: #FDFFFC;
72}
73
74.currentplaying {
75  display: flex;
76  align-items: center;
77  align-self: center;
78  margin: 1em 2rem;
79  padding: .5rem;
80  width: 100%;
81  background-color: #018E42dd;
82  border-radius: .5rem;
83}
84
85.spotify {
86  width: 50px;
87  height: 50px;
88  margin-right: 0.6em;
89}
90
91.heading {
92  color: var(--clr);
93  font-size: 1.1em;
94  font-weight: bold;
95  align-self: center;
96}
97
98.loading {
99  display: flex;
100  margin-top: 1em;
101  margin-left: 0.3em;
102}
103
104.load {
105  width: 2px;
106  height: 33px;
107  background-color: limegreen;
108  animation: 1s move6 infinite;
109  border-radius: 5px;
110  margin: 0.1em;
111}
112
113.load:nth-child(1) {
114  animation-delay: 0.2s;
115}
116
117.load:nth-child(2) {
118  animation-delay: 0.4s;
119}
120
121.load:nth-child(3) {
122  animation-delay: 0.6s;
123}
124
125.play {
126  position: relative;
127  left: 0.35em;
128  height: 1.6em;
129  width: 1.6em;
130  clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);
131  background-color: var(--clr-text);
132  transform: rotate(-90deg);
133  align-self: center;
134  margin-top: 0.7em;
135  justify-self: center;
136  transition: .4s ease-in-out;
137}
138
139.albumcover {
140  position: relative;
141  margin-right: 1em;
142  height: 40px;
143  width: 40px;
144  background-color: rgb(233, 232, 232);
145  align-self: center;
146  border-radius: 5px;
147}
148
149.song {
150  position: relative;
151  transform: rotate(180deg);
152  margin-right: 1em;
153  color: var(--clr-text);
154  align-self: center;
155}
156
157.artist {
158  font-size: 0.6em;
159  color: var(--clr-text);
160}
161
162@keyframes move6 {
163  0% {
164    height: 0.2em;
165  }
166
167  25% {
168    height: 0.7em;
169  }
170
171  50% {
172    height: 1.5em;
173  }
174
175  100% {
176    height: 0.2em;
177  }
178}