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