.player {
width:fit-content;
border: #CECECE solid 2px;
border-radius: 100px;
margin-left:auto;
margin-right:auto;
background: linear-gradient(0deg, rgba(205,205,205,1) 0%, rgba(230,230,230,1) 30%, rgba(255,255,255,1) 100%);
padding:5px;
}
.seek_slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 6px;
background: #e4d5dc;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
border-radius: 8px;
}
.seek_slider::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 8px;
height: 8px;
background: white;
cursor: pointer;
border-radius: 50%;
border:1px solid #cecece;
padding-top:3px;
position:relative;
bottom:3px;
}
button,input,label,option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Myriad Pro";font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}button,input[type=reset],input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}.vertical-bar,button,input[type=reset],input[type=submit].vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{opacity:0.5}}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{opacity:1}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}}
@media (not(hover)){
button:not(:disabled):hover {
box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}
@font-face {
font-family: "Myriad Pro";
src: url("https://dl.dropbox.com/scl/fi/z8hqw29h8a9i3a3cbbxkt/MYRIADPRO-REGULAR.OTF?rlkey=begwqxljs2gzyw26h00oeovzi&st=px0mbeax&dl=0") format("woff");
}
.window, .title-bar {
font-family: "Myriad Pro";
-webkit-font-smoothing: none;
font-size: 11px;
}
.window {
padding:10px;
width:290px;
}
.window-body {
display:block;
margin:auto;
border-radius:0em;
}
input[type=range] {
-webkit-appearance: none;
appearance:none;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 2px; /* thickness of seeking track */
cursor: pointer;
}
/* settings for firefox browsers */
input[type=range]::-moz-range-track {
width: 100%;
height: 2px; /* thickness of seeking track */
cursor: pointer;
}
.flex {display: flex;}
#musicplayer {
display:block;
float:right;
background: linear-gradient(0deg, #F1E3F0, white) padding-box, linear-gradient(to top, white, #A2A2A2) border-box;
border-radius: 60em;
border: 2px solid transparent;
margin-left:8px;
padding-left:10px;
box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
}
.wheel {
display: block;
justify-content: center;
margin:auto;
background: linear-gradient(white, white) padding-box, linear-gradient(to top, white, #A2A2A2) border-box;
border-radius: 50em;
border: 2px solid transparent;
padding-top:0px;
box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
}
.innerwheel {
border-radius: 50em;
border: 2px solid #E2E2E2;
padding:9px;
padding-left:10px;
padding-right:12px;
margin:0;
box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
}
th{
width:20px;
margin:0;
}
.fas fa-minus{
margins:0;
padding-bottom:5px;
}
.wheelcontrols {
font-size:14px !important; /* size of controls */
text-align:center;
padding-top:2px;
color: #aaa;
opacity: 0.8;
}
.wheelcontrols button {
background: none;
border: none;
color: #aaa;
opacity: 0.6;
font-size: 14px;
padding: 2px;
cursor: pointer;
}
.wheelcontrols button:hover {
opacity: 1;
}
.controls button:hover {
opacity: 1;
}
.playpause-track button{
display:block;
color:#C1C1C1;
font-size: 20px;
margin:auto;
}
.playpause-track {
font-size: 22px !important;
padding: 3px;
}
.songtitle {
padding:25px; /* padding around song title */
color:#A3A3A3;
padding-bottom:0;
margin-left:15px;
margin-right:20px;
font-size: 16px;
display:block;
font-family:Myriad Pro;
}
.controls button{
display:block;
margin-left:15px;
font-size:14px !important; /* size of controls */
text-align:center;
color:#ccb3be;
opacity:0.6
}
button {
min-width:20px;
background:none;
text-align:center;
}
button:active {
opacity: 0.7;
}
.seeking {
display:flex;
justify-content: space-evenly;
padding:10px; /* padding around seeking bar */
padding-left:0;
padding-bottom:0px;
color:#A3A3A3;
}
.current-time {
padding-right:5px;
}
.total-duration {
padding-left:5px;
}