default_style.css

@import url('https://ctalvio.github.io/Monochromic/default_style.css');
@import url('https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css');
:root {--accent: 98, 121, 205;}
:root {--rounding: 12px;}

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

.blurhash-canvas {
  filter: none;
}

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

/*Card indicators*/
.cardIndicators,
.listItemIndicators {
  right: 0;
  top: 0;
}
.innerCardFooter {
  border-radius: 0px var(--rounding) !important;
  box-shadow: 1px -1px 4px 0 rgba(0,0,0,0.3);
}
.countIndicator, .playedIndicator {
  border-radius: 0px var(--rounding) !important;
  box-shadow: -1px 1px 4px 0 rgba(0,0,0,0.3);
}
.countIndicator {
  background: rgba(var(--accent),0.8);
}
.playedIndicator, .innerCardFooter {
  background: rgba(0,0,0,0.4)
}

/*Accenting*/
.drawer-open {
    box-shadow: 0px 0px 5px rgba(var(--accent), 1) !important;
    border-right: solid 1px rgba(var(--accent), 1) !important;
}

.preload {
    background-color: black;
}
.backgroundContainer {
    background-color: rgba(var(--accent),0.17) !important;
}
.formDialogHeader,
.formDialogFooter {
    background-color: rgba(var(--accent),0.15) !important;
}
.button-flat:hover {
	background: rgba(var(--accent),0.25);
}
.paper-icon-button-light:hover {
  background-color: rgba(var(--accent),0.25) !important;
}

.navMenuOption-selected {
  color: white;
}

.subtitleappearance-preview {
  background: linear-gradient(140deg,rgba(var(--accent)),#111) !important;
}
.navMenuOption-selected, .selectionCommandsPanel {
    background: rgba(var(--accent), 0.8) !important;
}
.raised,
.fab,
a[data-role="button"] {
  background: rgba(var(--accent), 0.8) !important;
	transition: all 0.2s !important;
}

/*Glow accent*/
.raised.homeLibraryButton {
    box-shadow: 0px 0px 5px rgba(var(--accent), 0) !important;
    border: solid 1px rgba(var(--accent),0) !important;
}
.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;
}
.cardOverlayContainer {
  border: solid 1px rgba(var(--accent),0.0) !important;
}

/*Various box-shadows*/
.cardBox:not(.visualCardBox) .cardPadder, .cardContent-shadow {
    box-shadow: none !important;
}
body, h1, h2, h3, h4, .textActionButton, .emby-button-foreground  {
  text-shadow: 0px 0px 4px rgba(0,0,0,.6) !important;
}
.blurhashed {
    box-shadow: 0 0 4px 0 rgba(0,0,0,.6) !important;
}

/*Change look of fields*/
.infoBanner {
    background: rgba(var(--accent),0.15) !important;
}
fieldset {
    border: 1px solid rgba(var(--accent), 0.3);
}
.checkboxOutline,
.emby-input,
.emby-textarea,
.emby-select-withcolor {
  border: none !important;
  background: rgba(0, 0, 0, 0.5); 
}
#itemDetailPage .emby-select-withcolor {
  background: rgba(0, 0, 0, 0.2);
}

/*Change look of in-focus fields*/
.emby-checkbox:checked + span + .checkboxOutline,
.emby-input:focus,
.emby-textarea:focus,
.emby-select-withcolor:focus,
.itemSelectionPanel {
  border: none !important;
  background: rgba(var(--accent), 0.25) !important;
}
.checkboxIcon {
    color: rgba(var(--accent));
}

progress {
  border: 0px solid rgba(255, 255, 255, 0.22);
}
progress::-webkit-progress-bar {
  border: 0px solid rgba(255, 255, 255, 0.22);
}
.taskProgressOuter {
  border: 0px solid rgba(255, 255, 255, 0.22);
}

/*Style backdrop*/
.backdropImage {
  filter: blur(18px) saturate(120%) contrast(120%) brightness(40%);
}
@media all and (max-width: 32em) {
  .itemBackdrop {
    filter: blur(18px) saturate(120%) contrast(120%) brightness(40%);
  }
}

/*Colors for loading spinner and other stuff*/
.mdl-spinner__layer-1 {border-color: rgba(var(--accent), 1);}
.mdl-spinner__layer-2 {border-color: rgba(var(--accent), .8);}
.mdl-spinner__layer-3 {border-color: rgba(var(--accent), .6);}
.mdl-spinner__layer-4 {border-color: rgba(var(--accent), .5);}


.defaultCardBackground1 {
	background-color: rgba(var(--accent), .5);
}
.defaultCardBackground2 {
	background-color: rgba(var(--accent), .4);
}
.defaultCardBackground3 {
	background-color: rgba(var(--accent), .8);
}
.defaultCardBackground4 {
	background-color: rgba(var(--accent), .7);
}
.defaultCardBackground5 {
	background-color: rgba(var(--accent), .6);
}