* { font-family: "Roboto", sans-serif; /* This is fine, but also good to link the font in HTML */ color: #D8E3A0; box-sizing: border-box; } body { background: #111; /* Dark neutral page background */ margin: 0; /* Remove default body margin */ display: flex; flex-direction: column; /* Allow description to be below player if needed */ align-items: center; justify-content: center; min-height: 100vh; /* Ensure body takes at least full viewport height */ padding: 20px; /* Add some breathing room around the player */ } .player { height: 600px; width: 320px; max-width: 100%; /* Ensures player shrinks on screens narrower than 320px + body padding */ max-height: calc(100vh - 40px); /* Player height won't exceed viewport height minus body padding */ overflow-y: auto; /* If content overflows the (potentially reduced) height, player becomes scrollable */ border-radius: 40px; background: #1D2B29; margin: 0 auto; display: block; position: relative; /* For positioning the menu */ border: solid 2px #2a403c; /* Lighter shade of background */ } .top { display: flex; justify-content: space-between; padding: 30px; align-items: center; /* Align items vertically */ } /* Station Menu Styles */ .station-menu { position: absolute; top: 0; right: 0; /* Align its right edge with the player's right edge */ width: 250px; height: 100%; background: #2a403c; /* Lighter shade of background */ box-shadow: -5px 0px 15px rgba(0,0,0,0.3); padding: 20px; padding-top: 70px; /* Space for top bar */ transform: translateX(100%); /* Initially hide it by translating it off-screen to the right */ transition: transform 0.3s ease-in-out, visibility 0s 0.3s; /* Delay visibility transition until transform is done for hiding */ z-index: 100; overflow-y: auto; border-left: 1px solid #141f1c; /* Darker shade of background */ border-top-left-radius: 40px; /* Match player's border-radius */ border-bottom-left-radius: 40px; /* Match player's border-radius */ /* Round all corners to match the player's border-radius */ border-radius: 40px; visibility: hidden; /* Initially hidden */ box-sizing: border-box; /* Ensure padding and border are included in width calculation */ } .station-menu.visible { transform: translateX(0); /* Slide it into view */ visibility: visible; /* Make it visible */ transition: transform 0.3s ease-in-out, visibility 0s; /* Visibility changes immediately when becoming visible */ } .station-menu-list { list-style: none; padding: 0; margin: 0; } .station-menu-list li { padding: 12px 10px; color: #D8E3A0; cursor: pointer; border-bottom: 1px solid #1D2B29; /* Main background color */ transition: background-color 0.2s ease; font-size: 14px; } .station-menu-list li:hover { background-color: rgba(216, 227, 160, 0.1); color: #f0ffb3; /* Brighter text color on hover */ } .indicator { font-size: 10px; } .small, .big, .big_play_pause { border-radius: 50%; height: 40px; width: 40px; background: #1D2B29; border: none; box-shadow: -6px -6px 12px #263a36, 6px 6px 12px #141f1c; padding: 0; display: flex; /* Make the button a flex container */ justify-content: center; /* Center content horizontally */ align-items: center; /* Center content vertically */ } .big, .big_play_pause { height: 60px; width: 60px; box-shadow: -6px -6px 12px #263a36, 6px 6px 12px #141f1c; } .big_play_pause { background: #D8E3A0; /* Accent Color */ } .inner_button, .inner_button_big, .playpause { border-radius: 50%; height: 35px; width: 35px; background: #1D2B29; box-shadow: inset -3px -3px 7px #263a36, inset 3px 3px 7px #141f1c; margin: 0 auto; border: none; display: flex; justify-content: center; /* align-self: center; */ align-items: center; } .inner_button_big { height: 55px; width: 55px; } .playpause { background: #D8E3A0; /* Accent Color */ height: 55px; width: 55px; box-shadow: none; } /* Styles for icons */ .icon-small { height: 10px; display: block; /* Ensures proper rendering and spacing */ } .icon-big { height: 15px; display: block; /* Ensures proper rendering and spacing */ color: #1D2B29; /* Set icon color to contrast with the button */ } .icon-previous { transform: scaleX(-1); /* For the horizontally flipped previous track icon */ } .small:active, .big:active { box-shadow: inset -3px -3px 7px #263a36, inset 3px 3px 7px #141f1c; } .big_play_pause:active { transform: translateY(4px); box-shadow: -3px -3px 8px rgba(216, 227, 160, 0.1), 3px 3px 8px rgba(0, 0, 0, 0.4); } .center { height: 220px; width: 220px; box-shadow: -10px -10px 20px #263a36, 10px 10px 20px #141f1c; background: #1D2B29; display: flex; /* To center the album image inside */ justify-content: center; align-items: center; margin: 0 auto; /* Centers the .center block itself within .player */ border-radius: 50%; } .album { border-radius: 50%; height: 205px; width: 205px; object-fit: cover; } .song_details { text-align: center; margin-top: 40px; } .song-title { font-size: 14px; /* Made 2px smaller */ color: #D8E3A0; font-weight: 500; margin-bottom: 5px; /* Add a little space below the title */ /* Ensure the title stays on one line and truncates with an ellipsis if too long */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .controls { display: flex; justify-content: space-around; margin: 30px 30px 0px 30px; } .slider { margin: 20px auto; width: 70%; } .slider_bar { background: #1D2B29; height: 6px; border-radius: 5px; margin: 0 auto; box-shadow: inset -2px -2px 4px #141f1c, inset 2px 2px 4px #263a36; } .inner_slider_bar { width: 60%; height: 100%; background: #D8E3A0; margin: 0; border-radius: 5px; } .time { display: flex; justify-content: space-between; align-items: center; font-size: 10px; margin-bottom: 5px; color: #8a946b; /* Muted text color */ } .description{ line-height : 1.5; margin : 20px; /* text-align: center; /* Optional: if you want description centered */ /* font-size: 12px; /* Optional: adjust size */ } /* You might also want to change .description a color to match the new accent */