now playing x of y
◦music player by: ibroughtyoumybullets.neocities.org
/** if inserting into your css, just add the colors into your own root**/
:root {
/**music player colors, feel free to change**/
--playerbg: #A4BE7B;
--playerborder: #5F8D4E;
--playertext: #285430;
--playertitlebg: #5F8D4E;
--playerbar: #285430;
--playericons: #5F8D4E;
}
.playercontainer {
display: flex;
flex-flow: column nowrap;
width: 100%;
height: 100%;
background-color: var(--playerbg);
border: 3px outset var(--playerborder);
padding: 5px;
align-content: center;
align-items: center;
}
.playercontainer .now-playing {
width: 100%;
height: 15%;
color: var(--playertext);
text-align: center;
text-justify: center;
font-size: .8vw;
}
.playercontainer marquee {
width: 70%;
height: 35%;
border: 3px inset var(--playerborder);
background-color: var(--playertitlebg);
color: var(--playertext);
text-align: center;
font-size: 1.15vw;
}
.playercontainer .trackdurationcontrols {
width: 100%;
height: 25%;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
text-align: center;
margin-left: auto;
margin-right: auto;
gap: .4vw;
font-size: .85vw;
color: var(--playertext);
}
.playercontainer .trackdurationcontrols .bar {
width: 60%;
margin-left: .1vw;
}
.playercontainer .trackdurationcontrols .time {
width: 15%;
}
.playercontainer .trackdurationcontrols #current-time {
margin-left: -3px;
}
.playercontainer .trackdurationcontrols #duration {
margin-left: -3px;
}
.playercontainer .trackdurationcontrols input[type="range"] {
-webkit-appearance: none;
background: transparent;
display: block;
margin-left: 0;
margin-right: 0;
width: 100%;
}
/** Chrome, Safari, Opera, and Edge Chromium Track**/
.playercontainer .trackdurationcontrols input[type="range"]::-webkit-slider-runnable-track {
background: var(--playerbar);
height: 0.1rem;
width: 100%;
}
/** Firefox Track**/
.playercontainer .trackdurationcontrols input[type="range"]::-moz-range-track {
background: var(--playerbar);
height: 0.1rem;
width: 100%;
}
/** Chrome, Safari, Opera, and Edge Chromium Thumb**/
.playercontainer .trackdurationcontrols input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: .1rem solid var(--playerbar);
appearance: none;
margin-top: -12px;
background-color: var(--playericons);
height: .5rem;
width: .5rem;
}
/** Firefox Thumb**/
.playercontainer .trackdurationcontrols input[type="range"]::-moz-range-thumb {
border: .1rem solid var(--playerbar);
border-radius: 0;
background-color: var(--playericons);
height: .5rem;
width: .5rem;
}
.playercontainer .trackcontrols {
width: inherit;
height: 20%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
gap: 5px;
margin-top: -5%;
}
.playercontainer .trackcontrols button {
color: var(--playericons);
font-size: 1.8vw;
background-color: transparent;
border: none;
}
.playercontainer .creditstooltip {
color: var(--playerbar);
text-align: right;
align-self: flex-end;
margin-bottom: -5px;
}
/* Tooltip text */
.playercontainer .creditstooltip .playercredits {
visibility: hidden;
width: 170px;
font-size: 10px;
background-color: var(--playertitlebg);
color: white;
text-align: center;
padding: 2px 0;
border-radius: 2px;
margin: 18px 0 0 -162px;
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.playercontainer .creditstooltip:hover .playercredits {
visibility: visible;
}
@media only screen and (max-width: 750px) {
.playercontainer .now-playing {
font-size: 1.7vw;
}
.playercontainer marquee {
font-size: 2.3vw;
}
.playercontainer .trackdurationcontrols {
gap: .4vw;
font-size: 1.7vw;
}
.playercontainer .trackdurationcontrols .bar {
margin-left: .2vw;
margin-right: .3vw;
}
.playercontainer .trackdurationcontrols #current-time {
margin-left: -2px;
}
.playercontainer .trackdurationcontrols #duration {
margin-left: -3px;
}
.playercontainer .trackcontrols button {
color: var(--playericons);
font-size: 4vw;
background-color: transparent;
border: none;
}
}