Ultrachromic/WIP.css

@supports (backdrop-filter: blur(15px)) {
  .dialog, .mainDrawer, .toast, .appfooter {
    backdrop-filter: blur(15px);
    background-color: rgba(0, 0, 0, 0.35);
  }
}

/*From Mono*/
/*Modified item status progress bar, play and item menu buttons*/
.innerCardFooter.fullInnerCardFooter.innerCardFooterClear {
  border-radius: 0px !important; 
  background: rgba(0,0,0,0.7);
}

.playbackProgress>div {
  background-color: rgba(255,255,255,0.75);
}
.transcodingProgress>div, .itemProgressBarForeground {
  background-color: rgba(255,255,255,0.3);
}

.innerCardFooter.fullInnerCardFooter.innerCardFooterClear {
  border-radius: 0px !important; 
  background: rgba(0,0,0,0);
}




/*Theme user setting tab buttons*/
div[data-role="controlgroup"] a.ui-btn-active {
	background: rgba(0, 0, 0, 0.5) !important;
	color: white !important;
}
a[data-role="button"]:hover {
    background: rgba(80, 80, 80, 0.8) !important;
}

div[data-role=controlgroup] a[data-role=button]+a[data-role=button] {
	margin: 0 !important;
}

/*Theme media player*/
.mdl-slider-background-lower {
  background-color: rgb(255, 255, 255);
}
.mdl-slider::-moz-range-thumb {
  background: rgb(255, 255, 255);
}
.mdl-slider::-ms-thumb {
  background: rgb(255, 255, 255);
}
.mdl-slider::-webkit-slider-thumb {
  background: rgb(255, 255, 255);
}
.iconOsdProgressInner {
  background: rgb(255, 255, 255);
}

.videoOsdBottom {
    background: rgba(0,0,0,.7);
}
.skinHeader-withBackground.osdHeader {
    background: rgba(0,0,0,.7) !important;
}



/*From Kaleido*/
/*Cosmetic fixes for quirks (drop down padding and dialogue hover rounding)*/
.detailTrackSelect {
    padding-left: .2em !important;
}
@media all and (max-width: 100em){
   .detailTrackSelect {
     padding-left: .5em !important;
  }
}

.actionSheetMenuItem:hover {
  border-radius: 0 !important;
}

.itemsContainer>.card>.cardBox {
   margin-left: 0.6em !important;
}

@media all and (min-width: 131.25em){
  #castContent .cardScalable {
    width: calc(6.3vw - 1.2em) !important; 
    height: calc(6.3vw - 1.2em) !important;
  }
}
@media all and (min-width: 120em) and (max-width: 131.25em){
  #castContent .cardScalable {
    width:  calc(6.4vw - 1.2em) !important; 
    height: calc(6.4vw - 1.2em) !important;
  }
}
@media all and (min-width: 100em) and (max-width: 120em){
  #castContent .cardScalable {
    width:  calc(7.6vw - 1.2em) !important; 
    height: calc(7.6vw - 1.2em) !important;
  }
}
@media all and (min-width: 87.5em) and (max-width: 100em){
  #castContent .cardScalable {
    width:  calc(9.3vw - 1.2em) !important; 
    height: calc(9.3vw - 1.2em) !important;
  }
}
@media all and (min-width: 75em) and (max-width: 87.5em){
  #castContent .cardScalable {
    width:  calc(10.5vw - 1.2em) !important; 
    height: calc(10.5vw - 1.2em) !important;
  }
}
@media all and (min-width: 50em) and (max-width: 75em){
  #castContent .cardScalable {
    width:  calc(15vw - 1.2em) !important; 
    height: calc(15vw - 1.2em) !important;
  }
}
@media all and (min-width: 43.75em) and (max-width: 50em){
  #castContent .cardScalable {
    width:  calc(20.1vw - 1.2em) !important; 
    height: calc(20.1vw - 1.2em) !important;
  }
}
@media all and (min-width: 25em) and (max-width: 43.75em){
  #castContent .cardScalable {
    width:  calc(31.2vw - 1.2em) !important; 
    height: calc(31.2vw - 1.2em) !important;
  }
}
@media all and (max-width: 25em){
  #castContent .cardScalable {
    width:  calc(40vw - 1.2em) !important;
    height: calc(40vw - 1.2em) !important;
  }
}