2024-04-23 16:03:12 +02:00
|
|
|
@import url("https://git.levi.land/Levi/jellyskin-mod-public/raw/branch/main/wll-fonts.css");
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
--accent1-light: hsla(349, 100%, 80%, 1);
|
|
|
|
|
--accent1-dark: hsla(349, 46%, 58%, 1);
|
|
|
|
|
--accent1-light-opacity1: hsla(349, 100%, 80%, 0.4);
|
|
|
|
|
--accent1-light-opacity0-2: hsla(349, 100%, 80%, 0.2);
|
|
|
|
|
--accent2-light: hsla(348, 100%, 71%, 1);
|
|
|
|
|
--accent2-dark: hsla(348, 50%, 50%, 1);
|
|
|
|
|
--accent2-superdark: hsla(348, 58%, 23%, 1);
|
|
|
|
|
--swiper-theme-color: hsla(351, 100%, 70%, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.headerTop {
|
|
|
|
|
padding: 1.1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Display the new sections */
|
|
|
|
|
.homeLibraryButton {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-right: 10px; /* Adjust the margin as needed */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.verticalSection-extrabottompadding > .sectionTitle-cards:not(#similarCollapsible .sectionTitle-cards) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.emby-itemscontainer {
|
|
|
|
|
margin: 0 auto; /* Set left and right margins to auto */
|
|
|
|
|
text-align: center; /* Center the content inside the container */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
font-family: "SickFontBro", sans-serif;
|
|
|
|
|
font-size: 12pt; /* Default font size for the body */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.itemMiscInfo.itemMiscInfo-primary {
|
|
|
|
|
font-size: 14pt;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p.overview.detail-clamp-text {
|
|
|
|
|
font-size: 13pt; /* Font size for the description */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Font for the Movies, TV and Live TV buttons */
|
|
|
|
|
span.homeLibraryText {
|
|
|
|
|
font-family: "SickFontBro", sans-serif;
|
|
|
|
|
font-size: 12pt;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.innerCardFooter.fullInnerCardFooter.innerCardFooterClear {
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
right: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.itemProgressBarForeground {
|
|
|
|
|
background: linear-gradient(to right, var(--accent1-dark) 0%, var(--accent1-light) 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Alternate itempage*/
|
|
|
|
|
|
|
|
|
|
.itemBackdrop {
|
|
|
|
|
height: 31vh !important;
|
|
|
|
|
display: inherit;
|
|
|
|
|
}
|
|
|
|
|
.detailLogo {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.layout-desktop .detailRibbon {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
padding-top: 0em;
|
|
|
|
|
padding-bottom: 0em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.layout-desktop .detailImageContainer .card {
|
|
|
|
|
top: 18vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Title Banner Logo */
|
|
|
|
|
#itemDetailPage .detailLogo {
|
|
|
|
|
position: static;
|
|
|
|
|
margin-left: 50%;
|
|
|
|
|
display: block;
|
|
|
|
|
-webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75));
|
|
|
|
|
/*! filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); */
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
background-position: 0 50%;
|
|
|
|
|
margin-top: -18vh;
|
|
|
|
|
margin-bottom: 2vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.layout-mobile .detailLogo {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#itemDetailPage .itemName.infoText.parentNameLast {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hide+.detailPageWrapperContainer .itemName {
|
|
|
|
|
display: block !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.itemName {
|
|
|
|
|
margin: .5em 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.layout-mobile #itemDetailPage .itemName.infoText.parentNameLast {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*This file contains color and style changes for the dark theme type*/
|
|
|
|
|
:root {--selection: 170, 95, 200;}
|
|
|
|
|
|
|
|
|
|
.backgroundContainer.withBackdrop {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Some themeing for the dashboard*/
|
|
|
|
|
|
|
|
|
|
#user_usage_report_table,
|
|
|
|
|
.detailTable {
|
|
|
|
|
background: rgba(0,0,0,.5);
|
|
|
|
|
}
|
|
|
|
|
.detailTableBodyRow-shaded {
|
|
|
|
|
background: #0000 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.infoBanner {
|
|
|
|
|
background: #101010;
|
|
|
|
|
}
|
|
|
|
|
.navMenuOptionText {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
.backgroundProgress > div {
|
|
|
|
|
background-color: #0000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.visualCardBox, .cardImageContainer {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
|
|
|
|
|
background: rgba(120, 120, 120, 0.6);
|
|
|
|
|
}
|
|
|
|
|
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
|
|
|
|
background: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dashboardSection h3 {
|
|
|
|
|
margin-left: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
.sessionCardFooter {
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
.paperList,
|
|
|
|
|
.visualCardBox {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
}
|
|
|
|
|
.listItem-border {
|
|
|
|
|
border-color: rgba(255, 255, 255, 0) !important;
|
|
|
|
|
}
|
|
|
|
|
fieldset {
|
|
|
|
|
border: 1px solid rgba(40, 40, 40, 0.8);
|
|
|
|
|
border-radius: 0.4em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Colors for title_2*/
|
|
|
|
|
.layout-desktop .detailRibbon {
|
|
|
|
|
background: rgba(255,255,255,.1) !important;
|
|
|
|
|
height: 6em;
|
|
|
|
|
}
|
|
|
|
|
.itemBackdrop::after {
|
|
|
|
|
background: rgba(0,0,0,.1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Homepage modifications, transparent footerplayer and fixed sectiontitles*/
|
|
|
|
|
.appfooter {
|
|
|
|
|
background: rgba(0,0,0,0.9);
|
|
|
|
|
}
|
|
|
|
|
.button-flat:hover {
|
|
|
|
|
background: rgba(0,0,0,0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Theme the library scan progress bar*/
|
|
|
|
|
progress {
|
|
|
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.22);
|
|
|
|
|
}
|
|
|
|
|
progress::-webkit-progress-bar {
|
|
|
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
|
|
|
border: 0px solid rgba(255, 255, 255, 0.22);
|
|
|
|
|
}
|
|
|
|
|
progress::-moz-progress-bar {
|
|
|
|
|
background-color: rgba(255,255,255,0.75);
|
|
|
|
|
}
|
|
|
|
|
progress::-webkit-progress-value {
|
|
|
|
|
background-color: rgba(255,255,255,0.75);
|
|
|
|
|
}
|
|
|
|
|
#divRunningTasks span {
|
|
|
|
|
color: rgba(255,255,255,0.75) !important;
|
|
|
|
|
}
|
|
|
|
|
.taskProgressOuter {
|
|
|
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.22);
|
|
|
|
|
}
|
|
|
|
|
.taskProgressInner {
|
|
|
|
|
background: rgba(255,255,255,0.75) !important;
|
|
|
|
|
}
|
|
|
|
|
#scheduledTasksPage span {
|
|
|
|
|
color: rgba(255,255,255,0.75) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Make watched icon, footer on chapter thumbnails (and other things), and count indicator dark and transparent*/
|
|
|
|
|
.innerCardFooter,
|
|
|
|
|
.countIndicator,
|
|
|
|
|
.playedIndicator {
|
|
|
|
|
background: linear-gradient(to right, hsla(348, 58%, 23%, 0.5) 0%, hsla(348, 50%, 50%, 0.5) 100%);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.countIndicator {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Modify subtitle settings page*/
|
|
|
|
|
.subtitleappearance-preview {
|
|
|
|
|
background: linear-gradient(140deg,#444,#111) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Affects blurhash to remove the saturated colors to fit overall look*/
|
|
|
|
|
.blurhash-canvas {
|
|
|
|
|
filter: opacity(60%) saturate(60%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Dash and general UI styling*/
|
|
|
|
|
.navMenuOption-selected, .selectionCommandsPanel {
|
|
|
|
|
background: #101010 !important;
|
|
|
|
|
}
|
|
|
|
|
.mainDrawer {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
|
|
|
}
|
|
|
|
|
.raised,
|
|
|
|
|
.fab,
|
|
|
|
|
a[data-role="button"] {
|
|
|
|
|
background: rgba(40, 40, 40, 0.8) !important;
|
|
|
|
|
transition: all 0.2s !important;
|
|
|
|
|
}
|
|
|
|
|
.raised:hover,
|
|
|
|
|
.fab:hover,
|
|
|
|
|
.navMenuOption:hover,
|
|
|
|
|
.actionSheetMenuItem:hover {
|
|
|
|
|
background: rgba(80, 80, 80, 0.8) !important;
|
|
|
|
|
}
|
|
|
|
|
.paper-icon-button-light:hover {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.4) !important;
|
|
|
|
|
}
|
|
|
|
|
.navMenuOption-selected,
|
|
|
|
|
.selectionCommandsPanel {
|
|
|
|
|
background: #101010 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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{
|
|
|
|
|
color: rgba(120, 120, 120, 0.6) !important;
|
|
|
|
|
}
|
|
|
|
|
progress {
|
|
|
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Theme syncplay*/
|
|
|
|
|
.syncPlayIconCircle {
|
|
|
|
|
color: rgba(255,255,255,1) !important;
|
|
|
|
|
text-shadow: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes pulse {
|
|
|
|
|
0% {
|
|
|
|
|
-webkit-transform:scale(.95);
|
|
|
|
|
transform:scale(.95);
|
|
|
|
|
color:rgba(0,0,0,.7);
|
|
|
|
|
background:rgba(0,0,0,.3);
|
|
|
|
|
box-shadow:0 0 0 0 rgba(0,0,0,.3)
|
|
|
|
|
}
|
|
|
|
|
70% {
|
|
|
|
|
-webkit-transform:scale(1);
|
|
|
|
|
transform:scale(1);
|
|
|
|
|
color:rgba(0,0,0,.6);
|
|
|
|
|
background:rgba(0,0,0,0);
|
|
|
|
|
box-shadow:0 0 0 60px rgba(0,0,0,0)
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
-webkit-transform:scale(.95);
|
|
|
|
|
transform:scale(.95);
|
|
|
|
|
color:rgba(0,0,0,.7);
|
|
|
|
|
background:rgba(0,0,0,.3);
|
|
|
|
|
box-shadow:0 0 0 0 rgba(0,0,0,0)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@keyframes pulse {
|
|
|
|
|
0% {
|
|
|
|
|
-webkit-transform:scale(.95);
|
|
|
|
|
transform:scale(.95);
|
|
|
|
|
color:rgba(0,0,0,.7);
|
|
|
|
|
background:rgba(0,0,0,.3);
|
|
|
|
|
box-shadow:0 0 0 0 rgba(0,0,0,.3)
|
|
|
|
|
}
|
|
|
|
|
70% {
|
|
|
|
|
-webkit-transform:scale(1);
|
|
|
|
|
transform:scale(1);
|
|
|
|
|
color:rgba(0,0,0,.6);
|
|
|
|
|
background:rgba(0,0,0,0);
|
|
|
|
|
box-shadow:0 0 0 60px rgba(0,0,0,0)
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
-webkit-transform:scale(.95);
|
|
|
|
|
transform:scale(.95);
|
|
|
|
|
color:rgba(0,0,0,.7);
|
|
|
|
|
background:rgba(0,0,0,.3);
|
|
|
|
|
box-shadow:0 0 0 0 rgba(0,0,0,0)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@-webkit-keyframes infinite-pulse {
|
|
|
|
|
0% {
|
|
|
|
|
-webkit-transform:scale(.95);
|
|
|
|
|
transform:scale(.95);
|
|
|
|
|
color:rgba(0,0,0,.7);
|
|
|
|
|
background:rgba(0,0,0,.3);
|
|
|
|
|
box-shadow:0 0 0 0 rgba(0,0,0,.3)
|
|
|
|
|
}
|
|
|
|
|
70% {
|
|
|
|
|
-webkit-transform:scale(1);
|
|
|
|
|
transform:scale(1);
|
|
|
|
|
color:rgba(0,0,0,.6);
|
|
|
|
|
background:rgba(0,0,0,0);
|
|
|
|
|
box-shadow:0 0 0 60px rgba(0,0,0,0)
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
-webkit-transform:scale(.95);
|
|
|
|
|
transform:scale(.95);
|
|
|
|
|
color:rgba(0,0,0,.7);
|
|
|
|
|
background:rgba(0,0,0,.3);
|
|
|
|
|
box-shadow:0 0 0 0 rgba(0,0,0,0)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@keyframes infinite-pulse {
|
|
|
|
|
0% {
|
|
|
|
|
-webkit-transform:scale(.95);
|
|
|
|
|
transform:scale(.95);
|
|
|
|
|
color:rgba(0,0,0,.7);
|
|
|
|
|
background:rgba(0,0,0,.3);
|
|
|
|
|
box-shadow:0 0 0 0 rgba(0,0,0,.3)
|
|
|
|
|
}
|
|
|
|
|
70% {
|
|
|
|
|
-webkit-transform:scale(1);
|
|
|
|
|
transform:scale(1);
|
|
|
|
|
color:rgba(0,0,0,.6);
|
|
|
|
|
background:rgba(0,0,0,0);
|
|
|
|
|
box-shadow:0 0 0 60px rgba(0,0,0,0)
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
-webkit-transform:scale(.95);
|
|
|
|
|
transform:scale(.95);
|
|
|
|
|
color:rgba(0,0,0,.7);
|
|
|
|
|
background:rgba(0,0,0,.3);
|
|
|
|
|
box-shadow:0 0 0 0 rgba(0,0,0,0)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Colors for loading spinner, placeholders, scroll bars*/
|
|
|
|
|
.mdl-spinner__layer-1 {border-color: rgba(255, 255, 255, 1);}
|
|
|
|
|
.mdl-spinner__layer-2 {border-color: rgba(128, 128, 128, 1);}
|
|
|
|
|
.mdl-spinner__layer-3 {border-color: rgba(40, 40, 40, 1);}
|
|
|
|
|
.mdl-spinner__layer-4 {border-color: rgba(0, 0, 0, 1);}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-track-piece {
|
|
|
|
|
background-color: #0000;
|
|
|
|
|
}
|
|
|
|
|
::-webkit-scrollbar-corner {
|
|
|
|
|
background-color: #0000;
|
|
|
|
|
}
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
|
background: rgba(120,120,120,0.6) !important;
|
|
|
|
|
border-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
* {
|
|
|
|
|
scrollbar-color: rgba(120,120,120,0.6) #0000 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.defaultCardBackground1 {
|
|
|
|
|
background-color: #0a0a0a;
|
|
|
|
|
}
|
|
|
|
|
.defaultCardBackground2 {
|
|
|
|
|
background-color: #141414;
|
|
|
|
|
}
|
|
|
|
|
.defaultCardBackground3 {
|
|
|
|
|
background-color: #212121;
|
|
|
|
|
}
|
|
|
|
|
.defaultCardBackground4 {
|
|
|
|
|
background-color: #333333;
|
|
|
|
|
}
|
|
|
|
|
.defaultCardBackground5 {
|
|
|
|
|
background-color: #666666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.raised:hover,
|
|
|
|
|
.fab:hover,
|
|
|
|
|
a[data-role="button"]:hover {
|
|
|
|
|
background: rgba(var(--accent),0.5) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.subtitleappearance-preview {
|
|
|
|
|
background: linear-gradient(140deg,rgb(var(--accent)),#111) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.navMenuOption-selected {
|
|
|
|
|
color: rgba(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
.mdl-slider-background-lower {
|
|
|
|
|
background-color: rgba(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.playbackProgress>div {
|
|
|
|
|
background-color: rgba(var(--accent),0.75);
|
|
|
|
|
}
|
|
|
|
|
progress::-moz-progress-bar {
|
|
|
|
|
background-color: rgba(var(--accent),0.75);
|
|
|
|
|
}
|
|
|
|
|
progress::-webkit-progress-value {
|
|
|
|
|
background-color: rgba(var(--accent),0.75);
|
|
|
|
|
}
|
|
|
|
|
.taskProgressInner {
|
|
|
|
|
background: rgba(var(--accent),0.75) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.transcodingProgress>div,
|
|
|
|
|
.itemProgressBarForeground {
|
|
|
|
|
background-color: rgba(var(--accent),0.35);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mdl-slider-background-lower {
|
|
|
|
|
background-color: rgb(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
.mdl-slider::-moz-range-thumb {
|
|
|
|
|
background: rgb(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
.mdl-slider::-ms-thumb {
|
|
|
|
|
background: rgb(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
.mdl-slider::-webkit-slider-thumb {
|
|
|
|
|
background: rgb(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
.iconOsdProgressInner {
|
|
|
|
|
background: rgb(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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 {
|
|
|
|
|
color: rgba(var(--accent)) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#itemDetailPage .button-link {color: inherit !important;}
|
|
|
|
|
|
|
|
|
|
.navMenuOption:hover,
|
|
|
|
|
.actionSheetMenuItem:hover {
|
|
|
|
|
background-color: rgba(var(--accent),0.5) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.upNextDialog-countdownText {
|
|
|
|
|
color: rgba(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mdl-spinner__layer-1 {
|
|
|
|
|
border-color: rgba(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
|
|
|
|
|
background: rgba(var(--accent), 0.5);
|
|
|
|
|
}
|
|
|
|
|
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
|
|
|
|
background: rgba(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
|
background: rgba(var(--accent),0.8) !important;
|
|
|
|
|
}
|
|
|
|
|
* {
|
|
|
|
|
scrollbar-color: rgba(var(--accent),0.8) #0000 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Syncplay theming*/
|
|
|
|
|
.syncPlayIconCircle {
|
|
|
|
|
color: rgba(var(--accent),1) !important;
|
|
|
|
|
text-shadow: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Card indicators style normal*/
|
|
|
|
|
.innerCardFooter {
|
|
|
|
|
margin: .5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.countIndicator {
|
|
|
|
|
background: rgba(var(--indicator),0.8);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
.playedIndicator, .innerCardFooter {
|
|
|
|
|
background: rgba(0,0,0,0.4);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mediaSourceIndicator {
|
|
|
|
|
background: rgba(0,0,0,0.4);
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
border-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Tweak entry fields, checkmarks, thin borders dark highlight*/
|
|
|
|
|
.emby-input,
|
|
|
|
|
.emby-textarea {
|
|
|
|
|
padding: .4em .55em;
|
|
|
|
|
}
|
|
|
|
|
.emby-select {
|
|
|
|
|
padding: .35em 1.9em .35em .35em;
|
|
|
|
|
}
|
|
|
|
|
.selectArrow {
|
|
|
|
|
margin-top: 1.05em;
|
|
|
|
|
}
|
|
|
|
|
.checkboxOutline,
|
|
|
|
|
.emby-input,
|
|
|
|
|
.emby-textarea,
|
|
|
|
|
.emby-select-withcolor {
|
|
|
|
|
background: rgba(0, 0, 0, 0.2);
|
|
|
|
|
border: 0.01em solid rgba(255, 255, 255, 0.22);
|
|
|
|
|
}
|
|
|
|
|
.emby-input:focus,
|
|
|
|
|
.emby-textarea:focus,
|
|
|
|
|
.emby-select-withcolor:focus {
|
|
|
|
|
background: rgba(0, 0 , 0, 0.4) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.emby-textarea:focus,
|
|
|
|
|
.emby-select-withcolor:focus,
|
|
|
|
|
.emby-input:focus,
|
|
|
|
|
.itemSelectionPanel {
|
|
|
|
|
border: 0.01em solid rgba(var(--selection), 0.8) !important;
|
|
|
|
|
}
|
|
|
|
|
.emby-checkbox:checked + span + .checkboxOutline {
|
|
|
|
|
background-color: rgba(0, 0 , 0, 0.4) !important;
|
|
|
|
|
border: 0.01em solid rgba(var(--selection), 0.8) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Theme the library scan progress bar*/
|
|
|
|
|
progress {
|
|
|
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.22);
|
|
|
|
|
}
|
|
|
|
|
progress::-webkit-progress-bar {
|
|
|
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
|
|
|
border: 0px solid rgba(255, 255, 255, 0.22);
|
|
|
|
|
}
|
|
|
|
|
progress::-moz-progress-bar {
|
|
|
|
|
background-color: rgba(255,255,255,0.75);
|
|
|
|
|
}
|
|
|
|
|
progress::-webkit-progress-value {
|
|
|
|
|
background-color: rgba(255,255,255,0.75);
|
|
|
|
|
}
|
|
|
|
|
#divRunningTasks span {
|
|
|
|
|
color: rgba(255,255,255,0.75) !important;
|
|
|
|
|
}
|
|
|
|
|
.taskProgressOuter {
|
|
|
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.22);
|
|
|
|
|
}
|
|
|
|
|
.taskProgressInner {
|
|
|
|
|
background: rgba(255,255,255,0.75) !important;
|
|
|
|
|
}
|
|
|
|
|
#scheduledTasksPage span {
|
|
|
|
|
color: rgba(255,255,255,0.75) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Narrow the login form, size according to display size (bigger on mobile)*/
|
|
|
|
|
#loginPage .readOnlyContent,
|
|
|
|
|
#loginPage form {
|
|
|
|
|
max-width: 22em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#loginPage .padded-left.padded-right.padded-bottom-page {
|
2024-04-23 17:07:30 +02:00
|
|
|
margin-top: 4em;
|
2024-04-23 16:03:12 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Hide "manual" and "forgot" buttons}*/
|
|
|
|
|
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
|
|
|
|
|
display: none
|
|
|
|
|
}
|
|
|
|
|
|
2024-04-23 17:07:30 +02:00
|
|
|
|
2024-04-23 16:03:12 +02:00
|
|
|
#loginPage .padded-left.padded-right.padded-bottom-page {
|
2024-04-23 17:07:30 +02:00
|
|
|
padding-left: 1%;
|
|
|
|
|
padding-right: 1%;
|
2024-04-23 16:03:12 +02:00
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
background: rgba(0, 0, 0, 0.35);
|
2024-04-23 17:07:30 +02:00
|
|
|
width: 40em;
|
2024-04-23 16:03:12 +02:00
|
|
|
border-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
#loginPage .squareCard {
|
2024-04-23 17:07:30 +02:00
|
|
|
width: 25%;
|
2024-04-23 16:03:12 +02:00
|
|
|
}
|
|
|
|
|
#loginPage form {
|
|
|
|
|
padding-top: 4em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#loginPage .sectionTitle{
|
|
|
|
|
margin-left: auto !important;
|
|
|
|
|
margin-right: auto !important;
|
|
|
|
|
margin-bottom: 1.2em !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Size episode preview images in a more compact way*/
|
|
|
|
|
.listItemImage.listItemImage-large.itemAction.lazy {
|
|
|
|
|
transition: filter 0.2s
|
|
|
|
|
}
|
|
|
|
|
.listItemImageButton-icon {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
.secondary.listItem-overview.listItemBodyText {
|
|
|
|
|
height: 61px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
.listItemImageButton {
|
|
|
|
|
margin: auto;
|
|
|
|
|
font-size: 1.6em !important;
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 100em){
|
|
|
|
|
.listItemImage.listItemImage-large.itemAction.lazy {
|
|
|
|
|
height: 110px;
|
|
|
|
|
}
|
|
|
|
|
.listItem-content {
|
|
|
|
|
height: 115px;
|
|
|
|
|
}
|
|
|
|
|
.secondary.listItem-overview.listItemBodyText {
|
|
|
|
|
height: 4em;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (max-width: 100em){
|
|
|
|
|
.listItemImage.listItemImage-large.itemAction.lazy {height: 80px;}
|
|
|
|
|
.listItem-content {height: 85px;}
|
|
|
|
|
.secondary.listItem-overview.listItemBodyText {height: 2.5em; margin: 0;}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.missingIndicator, .unairedIndicator {
|
|
|
|
|
background: #ae6030eb;
|
|
|
|
|
padding: .3em .6em;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.layout-mobile .listItemImageButton {
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Rounded corners on pretty much everything*/
|
|
|
|
|
|
|
|
|
|
.detailButton {
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
progress {
|
|
|
|
|
border-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
progress::-webkit-progress-bar {
|
|
|
|
|
border-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
progress::-moz-progress-bar {
|
|
|
|
|
border-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
progress::-webkit-progress-value {
|
|
|
|
|
border-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
.taskProgressOuter,
|
|
|
|
|
.taskProgressInner {
|
|
|
|
|
border-radius: var(--rounding) !important;
|
|
|
|
|
}
|
|
|
|
|
.formDialogHeader {
|
|
|
|
|
border-top-left-radius: var(--rounding);
|
|
|
|
|
border-top-right-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
.formDialogFooter {
|
|
|
|
|
border-bottom-left-radius: var(--rounding);
|
|
|
|
|
border-bottom-right-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
.cardOverlayContainer {
|
|
|
|
|
border-radius: var(--rounding) !important;
|
|
|
|
|
}
|
|
|
|
|
.missingIndicator,
|
|
|
|
|
.unairedIndicator,
|
|
|
|
|
.detailTable,
|
|
|
|
|
.primaryImageWrapper > img,
|
|
|
|
|
.toast,
|
|
|
|
|
.paperList,
|
|
|
|
|
.cardContent,
|
|
|
|
|
.sessionNowPlayingInnerContent,
|
|
|
|
|
.listItem:hover,
|
|
|
|
|
.cardImage,
|
|
|
|
|
.fab,
|
|
|
|
|
.raised,
|
|
|
|
|
.multiSelectCheckboxOutline,
|
|
|
|
|
.itemSelectionPanel,
|
|
|
|
|
.cardContent-button,
|
|
|
|
|
.cardContent-shadow,
|
|
|
|
|
.itemDetailImage,
|
|
|
|
|
.cardImageContainer,
|
|
|
|
|
.cardPadder,
|
|
|
|
|
.listItemImage,
|
|
|
|
|
.listItemImageButton,
|
|
|
|
|
.listItemButton,
|
|
|
|
|
.innerCardFooter,
|
|
|
|
|
.blurhash-canvas,
|
|
|
|
|
.dialog,
|
|
|
|
|
.countIndicator,
|
|
|
|
|
.playedIndicator,
|
|
|
|
|
.listItemIcon,
|
|
|
|
|
.listItem-border,
|
|
|
|
|
.visualCardBox,
|
|
|
|
|
.checkboxOutline,
|
|
|
|
|
.emby-select-withcolor,
|
|
|
|
|
.chapterThumbTextContainer,
|
|
|
|
|
.chapterThumbContainer,
|
|
|
|
|
.chapterThumb,
|
|
|
|
|
.emby-input,
|
|
|
|
|
.emby-textarea,
|
|
|
|
|
.emby-select-withcolor,
|
|
|
|
|
.nowPlayingPageImage,
|
|
|
|
|
.upNextDialog-poster-img,
|
|
|
|
|
.upNextContainer,
|
|
|
|
|
.cardOverlayButtonIcon {
|
|
|
|
|
border-radius: var(--rounding) !important;
|
|
|
|
|
}
|
|
|
|
|
.osdPoster img {
|
|
|
|
|
border-radius: var(--rounding); border: none;
|
|
|
|
|
}
|
|
|
|
|
.mdl-slider::-moz-range-thumb {
|
|
|
|
|
border-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
.mdl-slider::-ms-thumb {
|
|
|
|
|
border-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
.mdl-slider::-webkit-slider-thumb {
|
|
|
|
|
border-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div[data-role="controlgroup"] a[data-role="button"]:first-child {
|
|
|
|
|
border-bottom-left-radius: var(--rounding);
|
|
|
|
|
border-top-left-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
div[data-role="controlgroup"] a[data-role="button"]:last-child {
|
|
|
|
|
border-bottom-right-radius: var(--rounding);
|
|
|
|
|
border-top-right-radius: var(--rounding);
|
|
|
|
|
}
|
|
|
|
|
#dashboardPage .cardContent, #dashboardPage .sessionNowPlayingInnerContent {
|
|
|
|
|
border-radius: var(--rounding) var(--rounding) 0 0 !important;
|
|
|
|
|
}
|
|
|
|
|
#divVirtualFolders .cardImageContainer, #divVirtualFolders .cardContent {
|
|
|
|
|
border-radius: var(--rounding) var(--rounding) 0 0 !important;
|
|
|
|
|
}
|
|
|
|
|
#userProfilesPage .cardImage, #userProfilesPage .cardContent {
|
|
|
|
|
border-radius: var(--rounding) var(--rounding) 0 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.emby-textarea {
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
font-size: 10pt;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card.show-animation:focus>.cardBox {
|
|
|
|
|
-webkit-transform:scale(1.1);
|
|
|
|
|
transform:scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Theme user setting tab buttons*/
|
|
|
|
|
div[data-role="controlgroup"] a.ui-btn-active {
|
|
|
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
|
|
|
color: orange !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div[data-role="controlgroup"] a[data-role="button"] {
|
|
|
|
|
display: table-cell !important;
|
|
|
|
|
margin: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Mobile tweaks*/
|
|
|
|
|
.layout-mobile .detailPagePrimaryContainer {
|
|
|
|
|
background: transparent;
|
|
|
|
|
padding-top: 0.5em;
|
|
|
|
|
padding-bottom: 0.5em;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.layout-mobile .adminDrawerLogo {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
.layout-mobile .itemBackdrop {
|
|
|
|
|
margin-top: 4rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Stop covers from being scrolled on desktop*/
|
|
|
|
|
.layout-desktop .detailImageContainer .card {
|
|
|
|
|
position: fixed !important;
|
|
|
|
|
top: 10% !important;
|
|
|
|
|
}
|
|
|
|
|
.layout-mobile .detailImageContainer .card {
|
|
|
|
|
position: absolute !important;
|
|
|
|
|
}
|
|
|
|
|
/*Top "task bar" enlarge text*/
|
|
|
|
|
.headerTabs.sectionTabs {
|
|
|
|
|
text-size-adjust: 110%;
|
|
|
|
|
font-size: 110%;
|
|
|
|
|
}
|
|
|
|
|
.pageTitle {
|
|
|
|
|
margin-top: auto;
|
|
|
|
|
margin-bottom: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Theme process progress ring*/
|
|
|
|
|
.progressring-spiner {
|
|
|
|
|
border-color: rgba(var(--accent));
|
|
|
|
|
border-width: .35em;
|
|
|
|
|
}
|
|
|
|
|
.progressring {
|
|
|
|
|
margin: .4em;
|
|
|
|
|
}
|
|
|
|
|
.progressring-bg {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Theme link color*/
|
|
|
|
|
#itemDetailPage .button-link {color: inherit !important;}
|
|
|
|
|
|
|
|
|
|
/*Accommodate mobile and align buttons and indicators*/
|
|
|
|
|
.cardIndicators,
|
|
|
|
|
.listItemIndicators {
|
|
|
|
|
right: 0.5em;
|
|
|
|
|
top: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mediaSourceIndicator {
|
|
|
|
|
left: 0.5em;
|
|
|
|
|
top: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media all and (min-width: 70em){
|
|
|
|
|
.cardOverlayFab-primary {
|
|
|
|
|
background-color: #00000000;
|
|
|
|
|
}
|
|
|
|
|
.cardOverlayButtonIcon {
|
|
|
|
|
background-color: #00000000 !important;
|
|
|
|
|
}
|
|
|
|
|
.cardOverlayContainer {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/* Play button hovering (for low width windows) */
|
|
|
|
|
@media all and (max-width: 70em){
|
|
|
|
|
.cardOverlayFab-primary {
|
|
|
|
|
background-color: #00000000;
|
|
|
|
|
}
|
|
|
|
|
.cardOverlayButtonIcon {
|
|
|
|
|
background-color: #00000000 !important;
|
|
|
|
|
}
|
|
|
|
|
.cardOverlayContainer {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
}
|
|
|
|
|
.cardOverlayButton {
|
|
|
|
|
padding: 0.25em;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Media player*/
|
|
|
|
|
.nowPlayingPageImage {
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.upNextDialog-countdownText {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Shrink the mouseover chapter image when scrobbling, still media player*/
|
|
|
|
|
.chapterThumb {
|
|
|
|
|
height: 14vh;
|
|
|
|
|
min-width: 14vh;
|
|
|
|
|
box-shadow: 0 0 1.9vh #000;
|
|
|
|
|
}
|
|
|
|
|
.chapterThumbText {
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
}
|
|
|
|
|
.sliderBubble {
|
|
|
|
|
background: #0000;
|
|
|
|
|
}
|
|
|
|
|
.chapterThumbTextContainer {
|
|
|
|
|
right: auto;
|
|
|
|
|
bottom: 4px;
|
|
|
|
|
padding: .25em 0.7em;
|
|
|
|
|
}
|
|
|
|
|
.chapterThumbContainer {
|
|
|
|
|
box-shadow: 0 0 1.9vh #000;
|
|
|
|
|
}
|
|
|
|
|
.sliderBubble {
|
|
|
|
|
-webkit-transform: translate3d(-50%,-108%,0);
|
|
|
|
|
transform: translate3d(-50%,-108%,0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Narrow margins, theme main page*/
|
|
|
|
|
.cardBox-bottompadded {
|
|
|
|
|
margin-bottom: 0.4em !important;
|
|
|
|
|
}
|
|
|
|
|
.itemsContainer > .card > .cardBox {
|
|
|
|
|
margin-right: 0.8em;
|
|
|
|
|
}
|
|
|
|
|
.raised.homeLibraryButton {
|
|
|
|
|
background: rgba(0, 0, 0, 0.3) !important;
|
|
|
|
|
}
|
|
|
|
|
.raised.homeLibraryButton:hover {
|
|
|
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
|
|
|
}
|
|
|
|
|
.raised.homeLibraryButton:hover {transition: filter 0.2s}
|
|
|
|
|
.raised.homeLibraryButton {transition: filter 0.2s}
|
|
|
|
|
.homeLibraryButton {
|
|
|
|
|
min-width: 9em;
|
|
|
|
|
margin: 0.4em;
|
|
|
|
|
}
|
|
|
|
|
@media all and (max-width: 26em){
|
|
|
|
|
.homeLibraryButton {
|
|
|
|
|
min-width: 35%;
|
|
|
|
|
width: auto !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.homeLibraryButton {
|
|
|
|
|
width: auto !important;
|
|
|
|
|
}
|
|
|
|
|
.listItem:hover {
|
|
|
|
|
transition: 0.2s;
|
|
|
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
|
|
}
|
|
|
|
|
.visualCardBox, .cardImageContainer {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
.backgroundProgress > div {
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
}
|
|
|
|
|
.itemProgressBar {
|
|
|
|
|
background: rgba(0, 0, 0, 0.25);
|
|
|
|
|
height: .5em;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0em;
|
|
|
|
|
left: 0; /* You may adjust the left position if needed */
|
|
|
|
|
width: 100%; /* Ensures it spans the full width of the container */
|
|
|
|
|
}
|
|
|
|
|
#divRunningTasks span {
|
|
|
|
|
color: rgba(255,255,255,0.75) !important;
|
|
|
|
|
}
|
|
|
|
|
.itemsContainer > .card > .cardBox {
|
|
|
|
|
margin-left: 0.6em !important;
|
|
|
|
|
}
|
|
|
|
|
.itemsContainer > .card > .cardBox {
|
|
|
|
|
margin-right: 0.8em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*ANIMATIONS*/
|
|
|
|
|
/*Hover background for section title buttons*/
|
|
|
|
|
.button-flat:hover {
|
2024-04-23 16:18:27 +02:00
|
|
|
background: rgba(221, 78, 130, 15%);
|
|
|
|
|
color: rgba(var(--accent)) !important;
|
2024-04-23 16:03:12 +02:00
|
|
|
}
|
|
|
|
|
.dashboardSection h3 {
|
|
|
|
|
margin: .5em .0em .5em .5em;
|
|
|
|
|
}
|
|
|
|
|
.dashboardSection .sectionTitleTextButton > .material-icons.material-icons {
|
|
|
|
|
margin-top: .5em;
|
|
|
|
|
margin-bottom: .5em;
|
|
|
|
|
margin-right: .2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Remove background on some icons*/
|
|
|
|
|
.listItemIcon {
|
|
|
|
|
background: #0000 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Remove divider on list items*/
|
|
|
|
|
.listItem-border {
|
|
|
|
|
border-color: rgba(255, 255, 255, 0) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Fix footers/headers displaying on small pop-ups*/
|
|
|
|
|
.formDialogFooter-clear,
|
|
|
|
|
.formDialogHeader-clear,
|
|
|
|
|
.innerCardFooterClear {
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.emby-button.show-focus:focus {
|
|
|
|
|
background: rgba(var(--accent),0.5) !important;
|
|
|
|
|
}
|
|
|
|
|
.paper-icon-button-light.show-focus:focus {
|
|
|
|
|
color: rgba(var(--accent)) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Title text buttons*/
|
|
|
|
|
button-flat:hover {
|
|
|
|
|
color: rgba(var(--accent)) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.raised:hover,
|
|
|
|
|
.fab:hover,
|
|
|
|
|
a[data-role="button"]:hover {
|
|
|
|
|
background: rgba(var(--accent),0.5) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.subtitleappearance-preview {
|
|
|
|
|
background: linear-gradient(140deg,rgb(var(--accent)),#111) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.navMenuOption-selected {
|
|
|
|
|
color: rgba(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
.mdl-slider-background-lower {
|
|
|
|
|
background-color: rgba(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
progress::-moz-progress-bar {
|
|
|
|
|
background-color: rgba(var(--accent),0.75);
|
|
|
|
|
}
|
|
|
|
|
progress::-webkit-progress-value {
|
|
|
|
|
background-color: rgba(var(--accent),0.75);
|
|
|
|
|
}
|
|
|
|
|
.taskProgressInner {
|
|
|
|
|
background: rgba(var(--accent),0.75) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#dashboardPage .playbackProgress > div {
|
|
|
|
|
background-color: rgba(var(--accent), 0.75) !important;
|
|
|
|
|
}
|
|
|
|
|
#dashboardPage .transcodingProgress > div {
|
|
|
|
|
background-color: rgba(var(--accent), 0.35) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mdl-slider-background-lower {
|
|
|
|
|
background-color: rgb(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
.mdl-slider::-moz-range-thumb {
|
|
|
|
|
background: rgb(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
.mdl-slider::-ms-thumb {
|
|
|
|
|
background: rgb(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
.mdl-slider::-webkit-slider-thumb {
|
|
|
|
|
background: rgb(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
.iconOsdProgressInner {
|
|
|
|
|
background: rgb(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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 {
|
|
|
|
|
color: rgba(var(--accent)) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#itemDetailPage .button-link {color: inherit !important;}
|
|
|
|
|
|
|
|
|
|
.navMenuOption:hover,
|
|
|
|
|
.actionSheetMenuItem:hover {
|
|
|
|
|
background-color: rgba(var(--accent),0.5) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.emby-checkbox:checked + span + .checkboxOutline,
|
|
|
|
|
.emby-textarea:focus,
|
|
|
|
|
.emby-select-withcolor:focus,
|
|
|
|
|
.emby-input:focus,
|
|
|
|
|
.itemSelectionPanel {
|
|
|
|
|
border: 0.01em solid rgba(var(--accent),0.5) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.upNextDialog-countdownText {
|
|
|
|
|
color: rgba(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mdl-spinner__layer-1 {
|
|
|
|
|
border-color: rgba(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
|
|
|
|
|
background: rgba(var(--accent), 0.5);
|
|
|
|
|
}
|
|
|
|
|
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
|
|
|
|
background: rgba(var(--accent));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
|
background: rgba(var(--accent),0.8) !important;
|
|
|
|
|
}
|
|
|
|
|
* {
|
|
|
|
|
scrollbar-color: rgba(var(--accent),0.8) #0000 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Syncplay theming*/
|
|
|
|
|
.syncPlayIconCircle {
|
|
|
|
|
color: rgba(var(--accent),1) !important;
|
|
|
|
|
text-shadow: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Enlarge button row on item page, even more on mobile*/
|
|
|
|
|
.mainDetailButtons {
|
|
|
|
|
font-size: 120%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Add fixes, start of file*/
|
|
|
|
|
@media all and (min-width: 100em){
|
|
|
|
|
.button-flat {
|
|
|
|
|
margin: .2em !important;
|
|
|
|
|
padding: .85em !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (max-width: 100em){
|
|
|
|
|
.mainDetailButtons {
|
|
|
|
|
font-size: 155%;
|
|
|
|
|
}
|
|
|
|
|
.detailButton {
|
|
|
|
|
max-width: 15vw !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Media player*/
|
|
|
|
|
.startTimeText, .endTimeText {
|
|
|
|
|
width: 3.4em;
|
|
|
|
|
display: block;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.osdTitle {
|
|
|
|
|
margin-left: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
2024-04-23 17:07:30 +02:00
|
|
|
.videoSubtitlesInner {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pageTitle {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2024-04-23 16:03:12 +02:00
|
|
|
.videoOsdBottom {
|
|
|
|
|
padding-top: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.skinHeader-withBackground.osdHeader {
|
|
|
|
|
height: 5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Accommodate ultrawide aspect ratios*/
|
|
|
|
|
@media (min-aspect-ratio: 1.98/1) {
|
|
|
|
|
.detailImageContainer .card {
|
|
|
|
|
width: 21vw !important ;
|
|
|
|
|
}
|
|
|
|
|
.detailPagePrimaryContainer {
|
|
|
|
|
padding-left: 28.45vw !important;
|
|
|
|
|
}
|
|
|
|
|
.detailPageContent {
|
|
|
|
|
padding-left: 28.45vw !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (min-aspect-ratio: 2.7/1) {
|
|
|
|
|
.detailImageContainer .card {
|
|
|
|
|
width: 16vw !important;
|
|
|
|
|
}
|
|
|
|
|
.detailPagePrimaryContainer {
|
|
|
|
|
padding-left: 23.45vw !important;
|
|
|
|
|
}
|
|
|
|
|
.detailPageContent {
|
|
|
|
|
padding-left: 23.45vw !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Tweak entry field padding and alignment/sizes*/
|
|
|
|
|
.emby-input,
|
|
|
|
|
.emby-textarea {
|
|
|
|
|
padding: .4em .55em;
|
|
|
|
|
}
|
|
|
|
|
.emby-select {
|
|
|
|
|
padding: .35em 1.9em .35em .35em;
|
|
|
|
|
}
|
|
|
|
|
.selectArrow {
|
|
|
|
|
margin-top: 1.05em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Fix weird shevron off centering*/
|
|
|
|
|
.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
|
|
|
|
|
padding-top:0em;
|
|
|
|
|
}
|
|
|
|
|
.sectionTitle {
|
|
|
|
|
margin-left: .4em !important;
|
|
|
|
|
margin-top: .2em !important;
|
|
|
|
|
margin-bottom: .2em !important;
|
|
|
|
|
}
|
|
|
|
|
.sectionTitleTextButton > .material-icons {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
.layout-mobile .sectionTitleTextButton > .material-icons {
|
|
|
|
|
padding-top: .2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Fix the UI shifting around*/
|
|
|
|
|
.nowPlayingBarCurrentTime {
|
|
|
|
|
width: 6em;
|
|
|
|
|
}
|
|
|
|
|
.osdTextContainer {
|
|
|
|
|
margin: 0 !important;
|
|
|
|
|
margin-top: 0.2em !important;
|
|
|
|
|
padding-left: 0.5em !important;
|
|
|
|
|
padding-right: 0.5em !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Fix top right user icon when using a profile image*/
|
|
|
|
|
.headerUserButtonRound {
|
|
|
|
|
border-radius: 50px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Improve some menu alignments*/
|
|
|
|
|
.navMenuOptionText {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
.formDialogHeaderTitle {
|
|
|
|
|
margin-left: 1em;
|
|
|
|
|
}
|
|
|
|
|
.formDialogContent {
|
|
|
|
|
margin-bottom: 6.2em;
|
|
|
|
|
}
|
|
|
|
|
.dialogContentInner {
|
|
|
|
|
padding: .5em 1em 1em;
|
|
|
|
|
padding-right: 1em;
|
|
|
|
|
padding-left: 1em;
|
|
|
|
|
}
|
|
|
|
|
.listItem-indexnumberleft {
|
|
|
|
|
margin: 1em;
|
|
|
|
|
}
|
|
|
|
|
.listItem {
|
|
|
|
|
padding-left: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Shrink and square (or round) cast thumnails*/
|
|
|
|
|
@media all and (min-width: 131.25em){
|
|
|
|
|
#castContent .card.overflowPortraitCard {
|
|
|
|
|
width: 6.3vw !important;
|
|
|
|
|
font-size: 90% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 120em) and (max-width: 131.25em){
|
|
|
|
|
#castContent .card.overflowPortraitCard {
|
|
|
|
|
width: 6.4vw !important;
|
|
|
|
|
font-size: 90% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 100em) and (max-width: 120em){
|
|
|
|
|
#castContent .card.overflowPortraitCard {
|
|
|
|
|
width: 7.6vw !important;
|
|
|
|
|
font-size: 90% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 87.5em) and (max-width: 100em){
|
|
|
|
|
#castContent .card.overflowPortraitCard {
|
|
|
|
|
width: 9.3vw !important;
|
|
|
|
|
font-size: 90% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 75em) and (max-width: 87.5em){
|
|
|
|
|
#castContent .card.overflowPortraitCard {
|
|
|
|
|
width: 10.5vw !important;
|
|
|
|
|
font-size: 90% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 50em) and (max-width: 75em){
|
|
|
|
|
#castContent .card.overflowPortraitCard {
|
|
|
|
|
width: 15vw !important;
|
|
|
|
|
font-size: 90% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 43.75em) and (max-width: 50em){
|
|
|
|
|
#castContent .card.overflowPortraitCard {
|
|
|
|
|
width: 20.1vw !important;
|
|
|
|
|
font-size: 90% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 25em) and (max-width: 43.75em){
|
|
|
|
|
#castContent .card.overflowPortraitCard {
|
|
|
|
|
width: 31.2vw !important;
|
|
|
|
|
font-size: 90% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (max-width: 25em){
|
|
|
|
|
#castContent .card.overflowPortraitCard {
|
|
|
|
|
width: 40vw !important;
|
|
|
|
|
font-size: 90% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cardPadder {
|
|
|
|
|
background-color: #0000 !important; box-shadow: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Correct image aspect ratio behaviour, set border-radius to zero for square tiles*/
|
|
|
|
|
|
|
|
|
|
@media all and (min-width: 131.25em){
|
|
|
|
|
#castContent .cardScalable {
|
|
|
|
|
width: calc(6.3vw - 0.6em) !important;
|
|
|
|
|
height: calc(6.3vw - 0.6em) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 120em) and (max-width: 131.25em){
|
|
|
|
|
#castContent .cardScalable {
|
|
|
|
|
width: calc(6.4vw - 0.6em) !important;
|
|
|
|
|
height: calc(6.4vw - 0.6em) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 100em) and (max-width: 120em){
|
|
|
|
|
#castContent .cardScalable {
|
|
|
|
|
width: calc(7.6vw - 0.6em) !important;
|
|
|
|
|
height: calc(7.6vw - 0.6em) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 87.5em) and (max-width: 100em){
|
|
|
|
|
#castContent .cardScalable {
|
|
|
|
|
width: calc(9.3vw - 0.6em) !important;
|
|
|
|
|
height: calc(9.3vw - 0.6em) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 75em) and (max-width: 87.5em){
|
|
|
|
|
#castContent .cardScalable {
|
|
|
|
|
width: calc(10.5vw - 0.6em) !important;
|
|
|
|
|
height: calc(10.5vw - 0.6em) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 50em) and (max-width: 75em){
|
|
|
|
|
#castContent .cardScalable {
|
|
|
|
|
width: calc(15vw - 0.6em) !important;
|
|
|
|
|
height: calc(15vw - 0.6em) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 43.75em) and (max-width: 50em){
|
|
|
|
|
#castContent .cardScalable {
|
|
|
|
|
width: calc(20.1vw - 0.6em) !important;
|
|
|
|
|
height: calc(20.1vw - 0.6em) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (min-width: 25em) and (max-width: 43.75em){
|
|
|
|
|
#castContent .cardScalable {
|
|
|
|
|
width: calc(31.2vw - 0.6em) !important;
|
|
|
|
|
height: calc(31.2vw - 0.6em) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media all and (max-width: 25em){
|
|
|
|
|
#castContent .cardScalable {
|
|
|
|
|
width: calc(40vw - 0.6em) !important;
|
|
|
|
|
height: calc(40vw - 0.6em) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: 120em) {
|
|
|
|
|
.portraitCard, .squareCard {
|
|
|
|
|
width: 9.1111111111%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.skinHeader-withBackground {
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Pages the have single unit height taskbar*/
|
|
|
|
|
@media all and (min-width: 100em){
|
|
|
|
|
#indexPage,
|
|
|
|
|
#moviesPage,
|
|
|
|
|
#tvRecommendedPage,
|
|
|
|
|
#musicRecommendedPage {
|
|
|
|
|
margin-top: 68px;
|
|
|
|
|
padding-top: 0px !important;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Pages the have two unit height taskbar*/
|
|
|
|
|
@media all and (max-width: 100em){
|
|
|
|
|
#indexPage,
|
|
|
|
|
#moviesPage,
|
|
|
|
|
#tvRecommendedPage,
|
|
|
|
|
#musicRecommendedPage {
|
|
|
|
|
margin-top: 130px;
|
|
|
|
|
padding-top: 0.5em !important;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.force-scroll {
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Glow accent on hover*/
|
|
|
|
|
.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) !important;
|
|
|
|
|
}
|
|
|
|
|
.cardOverlayContainer {
|
|
|
|
|
border: solid 1px rgba(var(--accent),0.0) !important;
|
|
|
|
|
}
|
|
|
|
|
.drawer-open {
|
|
|
|
|
box-shadow: 0px 0px 5px rgba(var(--accent), 1) !important;
|
|
|
|
|
border-right: solid 1px rgba(var(--accent), 1) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@supports (backdrop-filter: blur(15px)) {
|
|
|
|
|
.dialog,
|
|
|
|
|
.mainDrawer,
|
|
|
|
|
.toast,
|
|
|
|
|
.appfooter {
|
|
|
|
|
backdrop-filter: blur(15px);
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.35);
|
|
|
|
|
}
|
|
|
|
|
.paper-icon-button-light:hover,
|
|
|
|
|
#itemDetailPage .itemProgressBar,
|
|
|
|
|
#dashboardPage .backgroundProgress > div {
|
|
|
|
|
backdrop-filter: blur(0px);
|
|
|
|
|
}
|
|
|
|
|
@media all and (max-width: 70em){
|
|
|
|
|
.cardOverlayButtonIcon {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.35) !important;
|
|
|
|
|
}
|
|
|
|
|
.cardOverlayButtonIcon {
|
|
|
|
|
backdrop-filter: blur(4px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.indicator {
|
|
|
|
|
backdrop-filter: blur(2px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:root {--accent: 217, 6, 105;}
|
|
|
|
|
|
|
|
|
|
:root {--rounding: 12px;}
|
|
|
|
|
|
|
|
|
|
/*hover zoom*/
|
|
|
|
|
.homeLibraryButton:hover,
|
|
|
|
|
.homeLibraryButton:focus,
|
|
|
|
|
.card:hover,
|
|
|
|
|
.card:focus {
|
|
|
|
|
-webkit-filter: none !important;
|
|
|
|
|
box-shadow: 0 0 5px 0, 255, 222;
|
|
|
|
|
filter: none !important;
|
|
|
|
|
transform: scale(1.05);
|
|
|
|
|
transition: transform 1s ease; /* Add a 1-second transition with ease timing function */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Custom CSS to show only the channel name without the channel number */
|
|
|
|
|
.channelsContainer .guide-channelHeaderCell::after {
|
|
|
|
|
content: attr(title);
|
|
|
|
|
display: block;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #ffffff; /* You can customize the color */
|
|
|
|
|
margin-top: 10px; /* Adjust the spacing as needed */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.channelsContainer .guide-channelHeaderCell .guideChannelNumber {
|
|
|
|
|
display: none; /* Hide the channel number */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Style backdrop*/
|
|
|
|
|
.backdropImage {filter: blur(0px) saturate(120%) contrast(130%) brightness(100%);}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Center the listItem content */
|
|
|
|
|
.listItem {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hide the listItemIcon */
|
|
|
|
|
.listItemIcon {
|
|
|
|
|
display: none;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hide Genres and Writers */
|
|
|
|
|
.detailsGroupItem.genresGroup,
|
|
|
|
|
.detailsGroupItem.writersGroup {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hide Tags */
|
|
|
|
|
.itemTags {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Extend max width of Video, Audio and Subtitles details */
|
|
|
|
|
|
|
|
|
|
.detailsGroupItem, .trackSelections .selectContainer {
|
|
|
|
|
display: -webkit-flex;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin: 0 0 .5em !important;
|
|
|
|
|
max-width: 60em !important;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.trackSelections {
|
|
|
|
|
max-width: 60em !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hide Upcoming On TV section */
|
|
|
|
|
#seriesScheduleSection {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sectionTitle.sectionTitle-cards {
|
|
|
|
|
margin-right: 10px; /* Adjust the margin as needed */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.itemsContainer.padded-left {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex; /* Add this line */
|
|
|
|
|
justify-content: center; /* Center the items within the container */
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sectionTitle.sectionTitle-cards {
|
|
|
|
|
margin-right: 10px; /* Adjust the margin as needed */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.itemsContainer.padded-left {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Top bar padding 1px */
|
|
|
|
|
.flex.align-items-center.flex-grow.headerTop {
|
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
height: 3.2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hide specific Live TV buttons */
|
|
|
|
|
a[href="#!/livetv.html?tab=0&serverId=67303d06cb7c4c16b5be3492dafb9cae"],
|
|
|
|
|
a[href="#!/livetv.html?tab=1&serverId=67303d06cb7c4c16b5be3492dafb9cae"],
|
|
|
|
|
a[href="#!/livetv.html?tab=2&serverId=67303d06cb7c4c16b5be3492dafb9cae"],
|
|
|
|
|
a[href="#!/livetv.html?tab=3&serverId=67303d06cb7c4c16b5be3492dafb9cae"],
|
|
|
|
|
a[href="#!/livetv.html?tab=4&serverId=67303d06cb7c4c16b5be3492dafb9cae"],
|
|
|
|
|
a[href="#!/livetv.html?tab=5&serverId=67303d06cb7c4c16b5be3492dafb9cae"] {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.headerTabs .emby-tab-button {
|
|
|
|
|
/* Set your desired width */
|
|
|
|
|
width: 160px; /* Adjust this value as needed */
|
|
|
|
|
padding-top: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.verticalSection-extrabottompadding > .sectionTitle-cards:not(#similarCollapsible .sectionTitle-cards) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.verticalSection.section2 .card.overflowBackdropCard {
|
|
|
|
|
width: 200px !important; /* Adjust the width as needed */
|
|
|
|
|
font-size: 90% !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Adjust font size for smaller screens if needed */
|
|
|
|
|
@media all and (max-width: 767px) {
|
|
|
|
|
.verticalSection.section2 .card.overflowBackdropCard {
|
|
|
|
|
font-size: 80% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Add more media queries for other screen sizes as needed */
|
|
|
|
|
|
|
|
|
|
/* Mobile or smaller screens */
|
|
|
|
|
@media all and (max-width: 25em) {
|
|
|
|
|
.verticalSection.section2 .card.overflowBackdropCard {
|
|
|
|
|
width: 48vw !important; /* Adjust the width as needed */
|
|
|
|
|
font-size: 90% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Adjust the size of cards in the "Series" section */
|
|
|
|
|
.verticalSection.detailVerticalSection .overflowPortraitCard {
|
|
|
|
|
width: 30vw !important; /* Set the desired width for larger screens */
|
|
|
|
|
font-size: 90% !important; /* Adjust the font size if needed */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Larger screens */
|
|
|
|
|
@media all and (min-width: 58em) and (max-width: 64em) {
|
|
|
|
|
.verticalSection.detailVerticalSection .overflowPortraitCard {
|
|
|
|
|
width: 15vw !important; /* Set a different width for larger screens */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Extra-large screens */
|
|
|
|
|
@media all and (min-width: 64em) {
|
|
|
|
|
.verticalSection.detailVerticalSection .overflowPortraitCard {
|
|
|
|
|
width: 10vw !important; /* Set an even smaller width for extra-large screens */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Mobile or smaller screens */
|
|
|
|
|
@media all and (max-width: 48em) {
|
|
|
|
|
.verticalSection.detailVerticalSection .overflowPortraitCard {
|
|
|
|
|
width: 80vw !important; /* Set a larger width for smaller screens */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Gradient for buttons on hover */
|
|
|
|
|
.mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover,
|
|
|
|
|
.mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover emby-button,
|
|
|
|
|
button.is-emby-button:hover emby-button {
|
2024-04-23 16:06:08 +02:00
|
|
|
background: linear-gradient(to right, var(--accent1-dark), var(--accent1-light)) !important;
|
2024-04-23 16:03:12 +02:00
|
|
|
transition: background 0.3s ease; /* Add transition for smooth effect */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Remove default hover background color */
|
|
|
|
|
.mainDrawer-scrollContainer.scrollContainer .navMenuOption,
|
|
|
|
|
.mainDrawer-scrollContainer.scrollContainer .navMenuOption emby-button,
|
|
|
|
|
button.is-emby-button emby-button {
|
|
|
|
|
background-color: transparent !important; /* Set background color to transparent */
|
|
|
|
|
transition: background 0.3s ease; /* Add transition for smooth effect */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Ensure the text color remains white when hovered */
|
|
|
|
|
.mainDrawer-scrollContainer.scrollContainer .navMenuOption:hover .navMenuOptionText,
|
|
|
|
|
button.is-emby-button:hover emby-button .navMenuOptionText {
|
|
|
|
|
color: white !important; /* Set the text color */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Video Playback Progress Bar */
|
|
|
|
|
.mdl-slider-background-lower,
|
|
|
|
|
.mdl-slider-background-upper {
|
2024-04-23 16:12:46 +02:00
|
|
|
background: linear-gradient(to right, hsla(348, 58%, 23%, 0.5) 0%, hsla(348, 50%, 50%, 0.5) 100%);
|
2024-04-23 16:03:12 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Push scroll buttons to the right */
|
|
|
|
|
.homePage .section1.verticalSection .sectionTitle-cards + .emby-scrollbuttons {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Adjust the card size for smaller screens if needed */
|
|
|
|
|
@media all and (max-width: 767px) {
|
|
|
|
|
.homePage .section1.verticalSection .itemsContainer .card.overflowBackdropCard {
|
|
|
|
|
width: 250px !important; /* Adjust the width as needed for smaller screens */
|
|
|
|
|
font-size: 80% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Adjust the size of the card image */
|
|
|
|
|
.verticalSection .card img {
|
|
|
|
|
width: 100%; /* Make the image fill the card container */
|
|
|
|
|
height: auto; /* Maintain the aspect ratio */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Adjust the space between Next Up header and card */
|
|
|
|
|
.detailVerticalSection .sectionTitle {
|
|
|
|
|
margin-bottom: 5px; /* Adjust the margin to your preference */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.detailVerticalSection .nextUpItems {
|
|
|
|
|
margin-top: -5px; /* Adjust the negative margin to bring the cards closer */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#txtCustomCss {
|
|
|
|
|
height: 400px !important; /* Adjust the height as needed */
|
|
|
|
|
max-height: none !important;
|
|
|
|
|
overflow-y: scroll !important;
|
|
|
|
|
resize: vertical !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.customCssContainer textarea {
|
|
|
|
|
height: auto !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sectionTitleContainer.sectionTitleContainer-cards.padded-left > .sectionTitle.sectionTitle-cards {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sectionTitle.sectionTitle-cards.padded-left + .itemsContainer {
|
|
|
|
|
margin-bottom: -2.6em;
|
|
|
|
|
padding-top: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mediaInfoItem {
|
|
|
|
|
margin-top: 0.6em !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sectionTitleContainer-cards {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding-top: 0em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.itemName {
|
|
|
|
|
margin: 0em 0 !important;
|
|
|
|
|
padding-top: 0em;
|
|
|
|
|
}
|
|
|
|
|
.infoText {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
.subtitle {
|
|
|
|
|
margin: .15em 0 .2em -1em;
|
|
|
|
|
padding-left: 0em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.homePage .section1.verticalSection .sectionTitle-cards {
|
|
|
|
|
margin-right: 0.5em;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.homeLibraryButton {
|
|
|
|
|
margin-left: 0.1em !important;
|
|
|
|
|
margin-right: 0.1em !important;
|
|
|
|
|
min-width: 7em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.alphaPickerRow {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 4em;
|
|
|
|
|
}
|
