PrometheusGroup/voidscape-noir

1@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');2 3body {4    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;5    -webkit-font-smoothing: antialiased;6    -moz-osx-font-smoothing: grayscale;7}8 9/* Custom scrollbar */10::-webkit-scrollbar {11    width: 8px;12    height: 8px;13}14 15::-webkit-scrollbar-track {16    background: #1a1a1a;17}18 19::-webkit-scrollbar-thumb {20    background: #333;21    border-radius: 4px;22}23 24::-webkit-scrollbar-thumb:hover {25    background: #444;26}27/* Animation classes */28.fade-in {29    animation: fadeIn 0.5s ease-in-out;30}31 32@keyframes fadeIn {33    from { opacity: 0; }34    to { opacity: 1; }35}36 37.slide-up {38    animation: slideUp 0.5s ease-out;39}40 41@keyframes slideUp {42    from { 43        opacity: 0;44        transform: translateY(20px);45    }46    to { 47        opacity: 1;48        transform: translateY(0);49    }50}51 52/* Player styles */53#mini-player {54    transition: transform 0.2s;55    z-index: 100;56}57 58#mini-player:hover {59    transform: scale(1.02);60}61 62.draggable {63    cursor: grab;64    user-select: none;65}66 67/* Card styles */68.music-card {69    position: relative;70    background: #1e293b;71    border-radius: 0.75rem;72    overflow: hidden;73    transition: all 0.3s ease;74}75 76.music-card:hover {77    transform: translateY(-4px);78    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);79}80 81.music-card.downloaded {82    background: linear-gradient(to bottom right, #1e293b, #14532d);83}84 85.music-card.not-downloaded {86    background: linear-gradient(to bottom right, #1e293b, #7f1d1d);87}88.music-card.selected {89    box-shadow: 0 0 0 3px #4ade80, 0 0 20px rgba(74, 222, 128, 0.5);90    transition: box-shadow 0.3s ease;91}92.music-card .thumbnail {93    width: 100%;94    aspect-ratio: 1;95    object-fit: cover;96}97 98.music-card .duration {99    position: absolute;100    top: 0.5rem;101    right: 0.5rem;102    background: rgba(0, 0, 0, 0.7);103    padding: 0.25rem 0.5rem;104    border-radius: 0.25rem;105    font-size: 0.75rem;106}107 108.music-card .remove-btn {109    position: absolute;110    bottom: 0.5rem;111    right: 0.5rem;112    width: 1.5rem;113    height: 1.5rem;114    background: rgba(239, 68, 68, 0.9);115    border-radius: 50%;116    display: flex;117    align-items: center;118    justify-content: center;119    cursor: pointer;120    transition: all 0.2s;121}122 123.music-card .remove-btn:hover {124    transform: scale(1.1);125}126 127.music-card .info {128    padding: 0.75rem;129}130 131.music-card .title {132    font-weight: 500;133    margin-bottom: 0.25rem;134    white-space: nowrap;135    overflow: hidden;136    text-overflow: ellipsis;137}138 139.music-card .artist {140    font-size: 0.875rem;141    color: #94a3b8;142    white-space: nowrap;143    overflow: hidden;144    text-overflow: ellipsis;145}146 147/* Modal styles */148#search-modal {149    backdrop-filter: blur(5px);150}151 152/* Grid columns */153.grid-cols-2 {154    grid-template-columns: repeat(2, minmax(0, 1fr));155}156 157.grid-cols-3 {158    grid-template-columns: repeat(3, minmax(0, 1fr));159}160 161.grid-cols-4 {162    grid-template-columns: repeat(4, minmax(0, 1fr));163}164 165.grid-cols-5 {166    grid-template-columns: repeat(5, minmax(0, 1fr));167}168 169.grid-cols-6 {170    grid-template-columns: repeat(6, minmax(0, 1fr));171}172 173.grid-cols-7 {174    grid-template-columns: repeat(7, minmax(0, 1fr));175}176 177.grid-cols-8 {178    grid-template-columns: repeat(8, minmax(0, 1fr));179}180