mirror of
https://github.com/M4X809/list-of-lp.git
synced 2026-06-25 16:00:25 +00:00
m4x809
23b8d363ec
- Added `@tailwindcss/postcss` and `tailwind-merge` to package dependencies for better Tailwind CSS integration. - Updated `tailwindcss` to version 4.1.16. - Enhanced `TrackCard` and `TrackModal` components with new styling and functionality, including support for `lpTV` badges. - Refactored CSS imports and layout structure in `index.css` and `page.tsx` for improved responsiveness and visual appeal. - Updated album data in `list.ts` to reflect accurate track information and descriptions.
95 lines
1.6 KiB
CSS
95 lines
1.6 KiB
CSS
@layer theme, base, mantine, components, utilities;
|
|
|
|
@import "tailwindcss";
|
|
|
|
@import "@mantine/core/styles.layer.css";
|
|
|
|
/* Dark mode base - prevent white flash
|
|
* {
|
|
border-color: #1f2937;
|
|
} */
|
|
|
|
/* html {
|
|
background-color: #111827;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background-color: #111827 !important;
|
|
color: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
} */
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
/* View Transitions API Configuration */
|
|
/* Enable smooth cross-document view transitions (browser navigation) */
|
|
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
|
|
/* Default transition for all elements */
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 0.3s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
/* Fade transition for page root */
|
|
::view-transition-old(root) {
|
|
animation-name: fade-out;
|
|
}
|
|
|
|
::view-transition-new(root) {
|
|
animation-name: fade-in;
|
|
}
|
|
|
|
/* Custom transitions for specific elements with view-transition-name */
|
|
::view-transition-old(*),
|
|
::view-transition-new(*) {
|
|
animation-duration: 0.4s;
|
|
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
/* Smooth image transitions */
|
|
::view-transition-image-pair(*) {
|
|
isolation: isolate;
|
|
}
|
|
|
|
/* Keyframes for fade animations */
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|