Musify/web-player/src/routes/layout.css

@import 'tailwindcss';

@theme {
	--font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
	--font-display: 'Sora Variable', 'Inter Variable', ui-sans-serif, system-ui, sans-serif;

	--color-bg: var(--mf-bg);
	--color-elevated: var(--mf-elevated);
	--color-surface: var(--mf-surface);
	--color-surface-2: var(--mf-surface-2);
	--color-surface-hover: var(--mf-surface-hover);
	--color-hover: rgba(255, 255, 255, 0.05);
	--color-line: var(--mf-border);
	--color-line-strong: var(--mf-border-strong);
	--color-track: var(--mf-track);
	--color-fg: var(--mf-text);
	--color-fg-2: var(--mf-text-2);
	--color-fg-3: var(--mf-text-3);
	--color-muted: var(--mf-text-4);
	--color-accent: var(--mf-accent);
	--color-accent-soft: var(--mf-accent-soft);
	--color-on-accent: var(--mf-on-art);
	--color-scrim: var(--mf-scrim);
	--color-on-art: var(--mf-on-art);
	--color-danger: oklch(63.7% 0.15 25.331);
	--color-danger-fg: oklch(88.5% 0.062 18.334);

	--radius-control: 0.625rem;
	--radius-panel: 1rem;
	--radius-art: 0.75rem;
	--radius-art-lg: 1rem;
	--radius-art-round: 1.75rem;

	--shadow-art: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
	--shadow-art-lg: 0 20px 45px -15px rgba(0, 0, 0, 0.7);
	--shadow-menu: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
}

@utility page-x {
	padding-inline: --spacing(4);

	@media (width >= 40rem) {
		padding-inline: --spacing(8);
	}
}

@utility media-grid {
	grid-template-columns: repeat(auto-fill, minmax(var(--mf-grid-min-mobile), 1fr));

	@media (width >= 40rem) {
		grid-template-columns: repeat(auto-fill, minmax(var(--mf-grid-min), 1fr));
	}
}

@utility track-grid {
	grid-template-columns: var(--mf-track-cols-mobile);

	@media (width >= 40rem) {
		grid-template-columns: var(--mf-track-cols);
	}
}

@utility scrollbar-stable {
	scrollbar-gutter: stable;
}

:root {
	color-scheme: dark;
}

button:not(:disabled),
[role='button'],
label:has(input[type='file']),
summary {
	cursor: pointer;
}

button:disabled {
	cursor: not-allowed;
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes pop-in {
	from {
		opacity: 0;
		transform: scale(0.96) translateY(0.5rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes slide-in-left {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes equalize {
	0%,
	100% {
		transform: scaleY(0.35);
	}
	50% {
		transform: scaleY(1);
	}
}

@keyframes breathe {
	0%,
	100% {
		opacity: 0.55;
		transform: scale(1.2);
	}
	50% {
		opacity: 0.78;
		transform: scale(1.32);
	}
}

@keyframes sheen {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: -200% 0;
	}
}

.animate-enter {
	animation: fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-pop {
	animation: pop-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-fade {
	animation: fade-in 0.4s ease both;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
	background-color: var(--mf-bg);
	-webkit-tap-highlight-color: transparent;
	overflow-x: hidden;
}

html.home {
	background-image: linear-gradient(to bottom, var(--mf-accent), transparent 340px);
	background-repeat: no-repeat;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.18);
	border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 0.32);
}

::-webkit-scrollbar-track {
	background: transparent;
}