Spaces:
Paused
Paused
File size: 2,836 Bytes
f9abe0d 7459389 70217f6 bd550f9 a6699a3 f9abe0d 18566eb a6699a3 006c5a6 2ff0cc4 a6699a3 3bd6166 a6699a3 2ff0cc4 70217f6 a6699a3 2ff0cc4 a6699a3 d2fe918 a6699a3 c59749a a6699a3 fa097e7 a6699a3 bd550f9 a6699a3 bd550f9 a6699a3 2ff0cc4 a6699a3 4be6af9 03c340b 757308b 61b3334 757308b 9faa877 a6699a3 0155ace bd550f9 a6699a3 c0d3ed9 d2fe918 c0d3ed9 1f8f7bc a6699a3 c0d3ed9 6aa0df5 a6699a3 6aa0df5 50f6c66 5a646b7 c0d3ed9 658e1bd a6699a3 cd0a54e c9f5a1d 6a0de2d 9a475e9 a6699a3 ce5f85f b58be9f 6a8dfd2 9c9e45a ce5f85f ed48360 006c5a6 4d0d50b ed48360 9c590b6 ed48360 c655754 ed48360 0f4d877 8bad7d5 40096d7 0f4d877 ce5f85f 1530b40 3a629ce 1d59d15 e1c8df8 1d59d15 2ff0cc4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | html {
height: 100%;
margin: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #121212;
color: white;
margin: 0;
padding: 3px;
display: flex;
flex-direction: column;
height: calc(100% - 120px);
}
#search-container {
padding: 15px;
background-color: #222;
}
#search-bar {
width: calc(100% - 40px);
padding: 10px;
border-radius: 20px;
border: 1px solid #333;
background-color: #333;
color: white;
outline: none;
}
#search-bar::placeholder {
color: #888;
}
#navigation {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
}
button {
background-color: #333;
border: none;
color: white;
padding: 10px 20px;
margin: 0 10px;
cursor: pointer;
border-radius: 20px;
}
#navigation button:disabled {
background-color: #555;
cursor: not-allowed;
}
#loader-container {
display: flex;
justify-content: center;
margin-left: 20px;
}
#top-bar {
display: flex;
justify-content: center;
align-items: center;
}
.loader {
content: '';
width: 10px;
height: 10px;
border: 5px solid #aaa;
border-top-color: transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#music-list {
flex-grow: 1;
overflow-y: auto;
padding: 10px;
}
.music-item {
display: flex;
align-items: center;
padding: 10px;
margin: 10px 0;
background-color: #222;
border-radius: 10px;
}
.album-art {
width: 50px;
height: 50px;
margin-right: 15px;
border-radius: 8px;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
#audio-player {
position: fixed;
bottom: 0;
padding: 3px;
margin-bottom: 10px;
width: calc(100% - 13px);
border: none;
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
align-items: center;
display: flex;
flex-direction: column;
}
#main-con {
width: 98%;
flex-direction: row;
align-items: center;
}
#sound-con {
display: flex;
flex-direction: row;
width: 50%;
align-items: center;
}
#audio-player button {
margin: 2px;
padding: 10px 15px;
}
#progress-bar, #volume-control {
width: 100%;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 92%;
height: 5px;
background: #444;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 5px;
background: #555;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 10px;
height: 10px;
background: #555;
cursor: pointer;
} |