radio styling changes (add/fix mobile responsivity); WIP, player still does not function on iOS
This commit is contained in:
@@ -1,263 +1,268 @@
|
||||
div > img {
|
||||
transition: 300ms;
|
||||
}
|
||||
div > img:hover {
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.album-cover > img {
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.3em;
|
||||
/* Universal box-sizing for consistency */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Mukta", sans-serif;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 100vw;
|
||||
min-height: 100vh;
|
||||
/* background: linear-gradient(-45deg, #FFCDD2 50%, #B2EBF2 50%); */
|
||||
}
|
||||
|
||||
div,
|
||||
section {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.c-containter {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.station-tabs {
|
||||
top: 4rem;
|
||||
font-family: "Mukta", 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 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
/* top: 20%;
|
||||
left: 30%; */
|
||||
width: 40%;
|
||||
max-width: 700px;
|
||||
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3);
|
||||
max-height: 290px;
|
||||
margin-bottom: 50px;
|
||||
width: 800px; /* fixed desktop width */
|
||||
max-width: 90vw; /* prevent overflow on smaller screens */
|
||||
height: 290px;
|
||||
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 {
|
||||
flex: 1 0 30%;
|
||||
}
|
||||
.album-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 0 0 30%; /* Fixed ~30% width */
|
||||
max-width: 30%;
|
||||
height: 100%;
|
||||
overflow: hidden; /* Prevent image spill */
|
||||
min-width: 0; /* Fix flex overflow */
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: calc(50% - 2.5em);
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border: 0;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.arrow:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.arrow img {
|
||||
display: block;
|
||||
width: 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.arrow.left {
|
||||
left: -5em;
|
||||
}
|
||||
.arrow.right {
|
||||
right: -5em;
|
||||
/* Album cover image */
|
||||
.album-cover > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1;
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
.album-cover > img:hover {
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Player info and controls */
|
||||
.music-player {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
justify-content: center;
|
||||
background: inherit;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
width: 500px;
|
||||
max-width: 500px;
|
||||
flex: 1 1 70%; /* Take remaining ~70% */
|
||||
max-width: 70%;
|
||||
width: auto;
|
||||
height: 100%; /* 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 */
|
||||
}
|
||||
|
||||
/* Text styling */
|
||||
.music-player__title {
|
||||
color: inherit;
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 0.1em 0;
|
||||
color: inherit;
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 0.1em 0;
|
||||
}
|
||||
|
||||
.music-player__header {
|
||||
color: inherit;
|
||||
font-size: 1rem;
|
||||
margin: 1 0 0.1em 0;
|
||||
color: inherit;
|
||||
font-size: 1rem;
|
||||
margin: 1 0 0.1em 0;
|
||||
}
|
||||
|
||||
.music-player__author {
|
||||
color: inherit;
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 0.5em 0;
|
||||
color: inherit;
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
|
||||
.music-player__genre {
|
||||
color: inherit;
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 0.5em 0;
|
||||
color: inherit;
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
|
||||
.music-player__genre:before {
|
||||
font-weight: bold;
|
||||
content: "Genre: "
|
||||
font-weight: bold;
|
||||
content: "Genre: ";
|
||||
}
|
||||
|
||||
.station-tabs {
|
||||
padding-top: 2%;
|
||||
}
|
||||
|
||||
/* Music bar and progress */
|
||||
.music-bar {
|
||||
background: #efefef;
|
||||
stroke-width: 1;
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
.music-bar:hover {
|
||||
cursor: pointer;
|
||||
background: #efefef;
|
||||
stroke-width: 1;
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.music-bar #length {
|
||||
width: 0%;
|
||||
background: #2196F3;
|
||||
height: 100%;
|
||||
transition: width linear 200ms;
|
||||
width: 0%;
|
||||
background: #2196F3;
|
||||
height: 100%;
|
||||
transition: width linear 200ms;
|
||||
}
|
||||
|
||||
/* Time display */
|
||||
.music-time {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.music-time__last {
|
||||
margin-left: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Playback order icons */
|
||||
.music-order {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.music-order__shuffle, .music-order__loop {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
opacity: 0.2;
|
||||
margin: 0.3em 0;
|
||||
|
||||
.music-order__shuffle,
|
||||
.music-order__loop {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
opacity: 0.2;
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
.music-order__shuffle.is-loop, .music-order__loop.is-loop {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.music-order__shuffle.is-loop-one, .music-order__loop.is-loop-one {
|
||||
opacity: 1 !important;
|
||||
|
||||
.music-order__shuffle.is-loop,
|
||||
.music-order__loop.is-loop,
|
||||
.music-order__shuffle.is-loop-one,
|
||||
.music-order__loop.is-loop-one {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.music-order__shuffle {
|
||||
margin-left: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Controls container */
|
||||
.music-control {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 2em;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.music-control__play {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
margin: 0 1em;
|
||||
}
|
||||
.music-control__backward, .music-control__forward {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.music-control__backward,
|
||||
.music-control__forward {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
/* Arrows for navigation */
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: calc(50% - 2.5em);
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border: 0;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.arrow:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.arrow img {
|
||||
display: block;
|
||||
width: 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.arrow.left {
|
||||
left: -5em;
|
||||
}
|
||||
|
||||
.arrow.right {
|
||||
right: -5em;
|
||||
}
|
||||
|
||||
/* Mobile override */
|
||||
@media all and (max-width: 960px) {
|
||||
.c-containter {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
max-height: inherit;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.music-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-flow: column wrap;
|
||||
margin: 0 auto;
|
||||
padding-left: 25%;
|
||||
overflow: auto;
|
||||
}
|
||||
.music-container {
|
||||
flex-direction: column !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
margin-bottom: 50px !important;
|
||||
overflow: visible !important;
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
.music-player__author {
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
.album-cover {
|
||||
flex: none !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
margin-bottom: 1rem !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.music-player__title {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
.album-cover > img {
|
||||
aspect-ratio: unset !important;
|
||||
height: auto !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.music-player__genre {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.music-player {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.album-cover {
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: calc(50% - 1.5em);
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
}
|
||||
.arrow.left {
|
||||
left: 0;
|
||||
}
|
||||
.arrow.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.music-control__play {
|
||||
width: 2.2em;
|
||||
height: 2.2em;
|
||||
}
|
||||
}
|
||||
.music-player {
|
||||
flex: none !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
min-width: 0 !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.arrow.left,
|
||||
.arrow.right {
|
||||
position: relative !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
background: transparent !important;
|
||||
cursor: default !important;
|
||||
margin: 0 1em !important;
|
||||
}
|
||||
|
||||
.arrow img {
|
||||
width: 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user