/*This file contains color changes for the light theme type*/
:root {--accent: 255, 255, 255;}
:root {--indicator: var(--accent);}
:root {--selection: var(--accent);}

/*Colors for title_2*/
.layout-desktop .detailRibbon {
  background: rgba(255,255,255,.2) !important;
}
.itemBackdrop::after {
  background: rgba(0,0,0,.2) !important;
}

/*Flip indicator colors*/
.countIndicator {
  background: rgba(var(--accent),0.8);
}
.playedIndicator {
  background: rgba(255, 255, 255, 0.3);
}

/*Various themeing*/
#itemDetailPage .emby-select-withcolor {
  background-color: rgba(255, 255, 255, 0.2);
}

.pageTitleWithDefaultLogo {
    background-image: url(../../jellyfin/web/assets/img/banner-dark.png);
}

.infoBanner {
    color: #000;
    background: #eaeaea;
}
#indexPage .transcodingProgress > div, #indexPage .itemProgressBarForeground {
    background-color: rgba(var(--accent),0.35);
}

/*Accenting*/
.ratingbutton-icon-withrating,
.playstatebutton-icon-played {
	color: rgba(var(--accent)) !important;
}

.button-flat:hover {
	background: rgba(var(--accent),0.55);
}
.paper-icon-button-light:hover {
  background-color: rgba(var(--accent),0.55) !important;
}

.raised,
.fab,
a[data-role="button"] {
  background: rgba(var(--accent), 0.8) !important;
  transition: all 0.2s !important;
}

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

.emby-checkbox:checked + span + .checkboxOutline,
.emby-input:focus,
.emby-textarea:focus,
.emby-select-withcolor:focus,
.itemSelectionPanel {
  background: rgba(var(--accent), 0.25) !important;
}
.checkboxIcon {
    color: rgba(var(--accent));
}

.navMenuOption:hover, .actionSheetMenuItem:hover {
  background-color: rgba(var(--accent),1) !important;
}

/*Login background*/
#loginPage {
  background: url(https://raw.githubusercontent.com/CTalvio/Ultrachromic/main/assets/background.png) !important;
  background-size: cover !important;
}

/*Theme the library scan progress bar*/
progress {
  background: #cecece !important;
  border: 1px solid rgba(255, 255, 255);
}
progress::-webkit-progress-bar {
  background: #cecece !important;
  border: 0px solid rgba(255, 255, 255);
}
progress::-webkit-progress-value {
  background-color: rgba(255,255,255);
}
#divRunningTasks span {
  color: black !important;
}
.taskProgressOuter {
  background: #cecece !important;
  border: 1px solid rgba(255, 255, 255);
}
.taskProgressInner {
  background: rgba(255,255,255) !important;
}
#scheduledTasksPage span {
  color: rgba(255,255,255) !important;
}

/*Make various stuff black, remove text shading*/
.endsAtText,
.osdTextContainer,
.listItemBodyText,
.textareaLabelUnfocused,
.paper-icon-button-light:hover,
.raised.homeLibraryButton:hover,
.button-flat:hover,
.playstatebutton-icon-played,
.ratingbutton-icon-withrating,
.paper-icon-button-light:hover:not(:disabled),
.emby-tab-button:hover,
.selectLabelFocused,
.inputLabelFocused,
.textareaLabelFocused,
.buttonActive,
.button-link,
.emby-tab-button-active,
.toast,
.cardText,
.paperListLabel,
#scheduledTasksPage span,
.raised.homeLibraryButton:hover,
body,
a,
h1,
h2,
h3,
h4,
.textActionButton,
.inputLabel,
.inputLabelUnfocused,
.fieldDescription,
.navMenuOption-selected,
.raised,
.countIndicator,
.playedIndicator,
.mediaInfoItem,
.nowPlayingBarCurrentTime,
.paper-icon-button-light {
    text-shadow: none !important;
    color: black !important;
}

.cardText-secondary,
.fieldDescription,
.guide-programNameCaret,
.listItem,
.secondary,
.nowPlayingBarSecondaryText,
.programSecondaryTitle,
.secondaryText {
    color: rgba(0, 0, 0, 0.7);
}

.material-icons {
    color: black !important;
}

.cardOverlayContainer:hover, .dialog, .toast, .raised.homeLibraryButton:hover {
    box-shadow: none !important;
}

.alphaPickerButton {
    color: rgba(0, 0, 0, 0.5);
}
#dashboardPage .playbackProgress>div {
  background-color: rgba(0,0,0,0.75);
}
#dashboardPage .transcodingProgress>div, #dashboardPage .itemProgressBarForeground {
  background-color: rgba(0,0,0,0.23);
}
.sessionAppInfo {
    filter: brightness(10%);
}
#devicesPage .cardImage {
    filter: brightness(20%);
}

/*Theme media player*/
.videoOsdBottom {
    background: rgba(210,210,210,.72);
    padding-top: 0;
}
.skinHeader-withBackground.osdHeader {
    background: rgba(255,255,255,.7) !important;
    height: 5em;
}
.mdl-slider-background-flex {
    background: rgba(0,0,0,.45);
}

/*Syncplay*/
@-webkit-keyframes pulse {
 0% {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),.7);
  background:rgba(var(--accent),.3);
  box-shadow:0 0 0 0 rgba(var(--accent),.3)
 }
 70% {
  -webkit-transform:scale(1);
  transform:scale(1);
  color:rgba(var(--accent),0);
  background:rgba(var(--accent),0);
  box-shadow:0 0 0 60px rgba(var(--accent),0)
 }
 to {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),0);
  background:rgba(var(--accent),0);
  box-shadow:0 0 0 0 rgba(var(--accent),0)
 }
}
@keyframes pulse {
 0% {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),.7);
  background:rgba(var(--accent),.3);
  box-shadow:0 0 0 0 rgba(var(--accent),.3)
 }
 70% {
  -webkit-transform:scale(1);
  transform:scale(1);
  color:rgba(var(--accent),0);
  background:rgba(var(--accent),0);
  box-shadow:0 0 0 60px rgba(var(--accent),0)
 }
 to {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),0);
  background:rgba(var(--accent),0);
  box-shadow:0 0 0 0 rgba(var(--accent),0)
 }
}
@-webkit-keyframes infinite-pulse {
 0% {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),.7);
  background:rgba(var(--accent),.3);
  box-shadow:0 0 0 0 rgba(var(--accent),.3)
 }
 70% {
  -webkit-transform:scale(1);
  transform:scale(1);
  color:rgba(var(--accent),.6);
  background:rgba(var(--accent),0);
  box-shadow:0 0 0 60px rgba(var(--accent),0)
 }
 to {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),.7);
  background:rgba(var(--accent),.3);
  box-shadow:0 0 0 0 rgba(var(--accent),0)
 }
}
@keyframes infinite-pulse {
 0% {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),.7);
  background:rgba(var(--accent),.3);
  box-shadow:0 0 0 0 rgba(var(--accent),.3)
 }
 70% {
  -webkit-transform:scale(1);
  transform:scale(1);
  color:rgba(var(--accent),.6);
  background:rgba(var(--accent),0);
  box-shadow:0 0 0 60px rgba(var(--accent),0)
 }
 to {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),.7);
  background:rgba(var(--accent),.3);
  box-shadow:0 0 0 0 rgba(var(--accent),0)
 }
}

/*Make various stuff light*/
.sessionNowPlayingInnerContent {
    background: rgba(220,220,220,.8);
}
.emby-select-withcolor > option {
    color: #333;
    background: #cecece;
}
.raised.homeLibraryButton {
  background: rgba(255, 255, 255, 0.8) !important;
}
.raised.homeLibraryButton:hover {
  background: rgba(200, 200, 200, 0.25) !important;
}

.navMenuOption-selected {
  color: white;
}

.navMenuOption-selected, .selectionCommandsPanel {
    background: #cecece !important;
}

.nowPlayingContextMenu, .nowPlayingPlaylist, html {
    background-color: #cecece !important;
}

.backgroundContainer {
    background-color: transparent !important;
}
.dialog, .innerCardFooter {
    background-color: #cecece80;
}
.formDialogHeader, .formDialogFooter {
    background-color: #eaeaea !important;
}
/*Fix footers/headers displaying on small pop-ups*/
.formDialogFooter-clear,
.formDialogHeader-clear,
.innerCardFooterClear {
    background-color: transparent !important;
}


.cardOverlayContainer {
    background-color: rgba(200, 200, 200, 0.7);
}

.listItem:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.dialog,
#user_usage_report_table,
.detailTable,
.mainDrawer,
.toast,
.nowPlayingBarTop,
.paperList,
.visualCardBox,
.checkboxOutline,
.emby-input,
.emby-textarea,
.emby-select-withcolor {
    background-color: rgba(245, 245, 245, 0.8);
}

/*Colors for loading spinner, placeholders, scroll bars*/
.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);
}