349 lines
7.7 KiB
CSS
349 lines
7.7 KiB
CSS
@import url('https://ctalvio.github.io/Monochromic/default_style.css');
|
|
@import url('https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css');
|
|
@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');
|
|
|
|
:root {--accent: 255, 255, 255;}
|
|
:root {--rounding: 0px;}
|
|
|
|
|
|
/*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);
|
|
}
|
|
|
|
.backdropImage {
|
|
filter: blur(22px) saturate(95%) contrast(15%) brightness(155%);
|
|
}
|
|
.infoBanner {
|
|
color: #000;
|
|
background: #eaeaea;
|
|
}
|
|
#indexPage .transcodingProgress > div, #indexPage .itemProgressBarForeground {
|
|
background-color: rgba(var(--accent),0.35);
|
|
}
|
|
|
|
/*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;
|
|
}
|
|
|
|
.playedIndicator {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.nowPlayingContextMenu, .nowPlayingPlaylist, html {
|
|
background-color: #cecece !important;
|
|
}
|
|
|
|
.backgroundContainer, .dialog, .innerCardFooter {
|
|
background-color: #cecece;
|
|
}
|
|
|
|
.formDialogHeader, .formDialogFooter {
|
|
background-color: #eaeaea !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);
|
|
}
|
|
|
|
/*Accenting*/
|
|
|
|
.ratingbutton-icon-withrating,
|
|
.playstatebutton-icon-played {
|
|
color: rgba(var(--accent)) !important;
|
|
}
|
|
|
|
.countIndicator {
|
|
background: rgba(var(--accent),0.8);
|
|
}
|
|
|
|
.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));
|
|
}
|
|
|
|
/*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);
|
|
} |