Card by bociKond
#212121
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}
1.4K views
Variation of acard
puvy123 9. August 2023. at 7:07
9. August 2023. at 7:07
nice one
MIT License