Ultrachromic/WIP.css

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

/*
.cardOverlayContainer:hover, .dialog, .toast, .raised.homeLibraryButton:hover {
    box-shadow: 0px 0px 5px rgb(var(--accent)) !important;
    border: solid 1px rgba(var(--accent),0.6) !important;
}

body.force-scroll {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
}



.skinHeader {
    position: static;
    width: 100%;
    align-self: flex-start;
}
 
.mainAnimatedPages {
    height: 100vh;
    position: relative !important;
    overflow: hidden;
}
 
.libraryPage:not(.noSecondaryNavPage) {
    padding: 0 !important;
}
 
div#itemDetailPage {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
 
@media (min-width: 40em) {
    .dashboardDocument .skinBody {
        left: 20em;
        width: calc(100vw - 20em);
    }
}
 
div#loginPage {
    margin-top: 0 !important;
    position: fixed;
}
 
div[data-role=page] {
    margin: 0 !important;
    padding: 0 !important;
    position: static;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-mask: linear-gradient(to bottom, transparent, black 15px calc(100% - 15px), transparent);
    mask: linear-gradient(to bottom, transparent, black 15px calc(100% - 15px), transparent);
}
 
.layout-tv .mainAnimatedPages {
    overflow: visible;
    mask: none;
    -webkit-mask: none;
}
 
div#videoOsdPage {
    overflow: hidden !important;
    margin-top: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
}
 
div[data-role=page]:not(.withTabs) {
    margin-top: 0 !important;
}
 
div#itemBackdrop {
    display: none;
}
 
.layout-desktop .detailRibbon {
    margin-top: 7.2em;
}
 
.layout-mobile #itemDetailPage {
    position: fixed;
    -webkit-mask: none;
    mask: none;
    margin-top: 4em !important;
    height: calc(100vh - 4em);
}
*/



/*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;
  }
}