87 lines
2.1 KiB
CSS
87 lines
2.1 KiB
CSS
/* Universal box-sizing for consistency */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--lrc-text-color: #333; /* darker text */
|
|
--lrc-bg-color: rgba(0, 0, 0, 0.05);
|
|
--lrc-active-color: #000; /* bold black for active */
|
|
--lrc-active-shadow: none; /* no glow in light mode */
|
|
--lrc-hover-color: #005fcc; /* darker blue hover */
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--lrc-text-color: #ccc; /* original gray */
|
|
--lrc-bg-color: rgba(255, 255, 255, 0.02);
|
|
--lrc-active-color: #fff; /* bright white for active */
|
|
--lrc-active-shadow: 0 0 4px rgba(212, 175, 55, 0.6); /* gold glow */
|
|
--lrc-hover-color: #4fa2ff; /* original blue hover */
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
min-width: 100vw;
|
|
min-height: 100vh;
|
|
/* background: linear-gradient(-45deg, #FFCDD2 50%, #B2EBF2 50%); */
|
|
}
|
|
|
|
/* Container for the player and album cover */
|
|
.music-container {
|
|
width: 800px; /* fixed desktop width */
|
|
max-width: 90vw; /* prevent overflow on smaller screens */
|
|
height: auto !important;
|
|
margin: 0 auto 120px auto; /* increased bottom margin */
|
|
overflow-x: visible; /* allow horizontal overflow if needed */
|
|
overflow-y: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Album cover section */
|
|
.album-cover {
|
|
aspect-ratio: 1 / 1;
|
|
width: 100%;
|
|
max-width: 30%;
|
|
height: auto;
|
|
}
|
|
|
|
.album-cover > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
|
|
.album-cover > img:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Player info and controls */
|
|
.music-player {
|
|
flex: 1 1 70%; /* Take remaining ~70% */
|
|
max-width: 70%;
|
|
width: auto;
|
|
height: auto !important; /* Match container height */
|
|
padding: 1em;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background: inherit;
|
|
box-sizing: border-box;
|
|
min-width: 0; /* Fix flex overflow */
|
|
flex-shrink: 0; /* Prevent shrinking that hides content */
|
|
}
|