71 lines
No EOL
1.5 KiB
CSS
71 lines
No EOL
1.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--background: #121212;
|
|
--foreground: #FFFFFF;
|
|
|
|
/* Spotify Colors */
|
|
--spotify-base: #121212;
|
|
--spotify-sidebar: #000000;
|
|
--spotify-player: #000000;
|
|
--spotify-highlight: #1DB954;
|
|
--spotify-hover: #282828;
|
|
--spotify-text-main: #FFFFFF;
|
|
--spotify-text-muted: #B3B3B3;
|
|
--spotify-text-subdued: #A7A7A7;
|
|
}
|
|
|
|
@layer utilities {
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
/* IE and Edge */
|
|
scrollbar-width: none;
|
|
/* Firefox */
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: var(--spotify-base);
|
|
color: var(--spotify-text-main);
|
|
/* font-family set in layout via className */
|
|
}
|
|
|
|
/* Soundwave Animations for Logo */
|
|
@keyframes soundwave-1 {
|
|
0%, 100% { height: 12px; }
|
|
50% { height: 8px; }
|
|
}
|
|
|
|
@keyframes soundwave-2 {
|
|
0%, 100% { height: 20px; }
|
|
50% { height: 10px; }
|
|
}
|
|
|
|
@keyframes soundwave-3 {
|
|
0%, 100% { height: 16px; }
|
|
50% { height: 6px; }
|
|
}
|
|
|
|
@keyframes soundwave-4 {
|
|
0%, 100% { height: 8px; }
|
|
50% { height: 14px; }
|
|
}
|
|
|
|
.animate-soundwave-1 { animation: soundwave-1 0.8s ease-in-out infinite; }
|
|
.animate-soundwave-2 { animation: soundwave-2 0.6s ease-in-out infinite; }
|
|
.animate-soundwave-3 { animation: soundwave-3 0.7s ease-in-out infinite; }
|
|
.animate-soundwave-4 { animation: soundwave-4 0.9s ease-in-out infinite; }
|
|
|
|
/* Fade-in animation */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-in { animation: fadeIn 0.5s ease-out forwards; } |