2024-03-30, 04:26 PM
(This post was last modified: 2024-03-30, 06:12 PM by ZestyJelly. Edited 1 time in total.)
Hey guys, I kinda made my own theme by combining Ultrachromic, Glassmorphism, and JellyTheme, as well as my own tweaks.
I have only tested it on my phone and computer (1080p), on both the app and the web interface. So it may look broken on 720p, 2K and 4K.
Here is what it looks like:
Code is here until Github unflags my account as spam
To install add to Dashboard > General > Custom CSS
Code is a mess and It is still WIP, but mostly done.
Some things I'd still like to do but don't know how would be:
Add profile pics back:
Add season posters back:
Turn seasons into a carousel to prevent this behavior:
If you know how to do any of this, please let me know!
I have only tested it on my phone and computer (1080p), on both the app and the web interface. So it may look broken on 720p, 2K and 4K.
Here is what it looks like:
Code is here until Github unflags my account as spam
To install add to Dashboard > General > Custom CSS
Code:
:root {--accent: 187, 241, 221;} /* BBF1DD */
:root {--accent-off: 107, 138, 127;} /* 6B8A7F */
:root {--dark: 27, 36, 33;} /* 1B2421 */ /* used for some details where a color too dark or too light wouldn't be ideal*/
:root {--darkest: 21, 28, 25;} /* 151C19 */ /* used for field's bg, text color when accent/accent-off becomes the bg color, etc */
:root {--dark-highlight: 64, 83, 76;} /* 40534C */ /* lighter than dark, used for dark highlights. BG in login page, etc */
:root {--dark-apparent: 32, 41, 37;} /* 202925 */ /* Only used in mobile layout. It is the color of the gradient over the backdrop image. must be its own value bc the color of the background color is the result of overlays. so just use a color picker on the background color in settings and put the value here */
:root {--white: 243, 242, 243;} /* F3F2F3 */ /* used for the BG of the play button */
:root {--white-off: 207, 221, 233;} /* CFDDE9 */ /* used for the BG of the AppleTV-esque bar */
:root {--jade-green: 0, 172, 111;} /* 00AC6F */ /* used for watched check */
:root {--honey-yellow: 255, 194, 85;} /* FFC255 */ /* used for the rating star color */
:root {--cherry-red: 212, 51, 83;} /* D43353 */ /* used for the shutdown button */
/* some colors are hardcoded. search for "hardcoded" to find most of them */
:root {--rounding: 12px;}
:root {--rounding-alt: 9px;}
:root {--rounding-large: 24px;}
:root {--rounding-circle: 100px;}
/*Style backdrop*/
.backdropImage {
filter: blur(12px) saturate(120%) contrast(120%) brightness(40%);
}
.card.show-animation:focus>.cardBox {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
/* JF Font */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); body, h1, h2, h3, h4 {
font-family: 'Quicksand', sans-serif;
}
/* ###### Desktop Layout ##### */
.layout-desktop .detailLogo {
left: 5%;
background-position: left;
}
.detailLogo {
height: 16vh;
position: absolute;
right: 25vw;
top: 10vh;
width: 34em;
}
.layout-desktop .itemBackdrop {
background-attachment: scroll;
background-position: center;
background-image: none !important;
background-size: cover;
height: 100vh;
position: relative;
}
.layout-desktop .detailPageWrapperContainer {
margin-top: -71vh;
/* inicial: 73 */
}
.layout-desktop .detailImageContainer .card,
.layout-desktop .itemTags {
display: none;
}
.detailsGroupItem.writersGroup {
display: none;
}
.layout-desktop .detailPagePrimaryContainer,
.layout-desktop .detailPageContent {
padding-left: 5%;
}
.layout-desktop .detailPagePrimaryContent {
width: 45%;
}
.layout-desktop .detailPagePrimaryContainer {
display: inline-table;
z-index: 2;
left: 5%;
}
.layout-desktop .detailPageSecondaryContainer {
margin: 0 0 1.25em 0;
}
.layout-desktop .itemDetailsGroup {
margin-top: 0;
padding-bottom: 2vh;
}
.layout-desktop a.overview-expand.emby-button {
margin: none;
padding: none;
}
.layout-desktop .itemName.originalTitle {
display: none;
}
.layout-desktop .itemName,
.layout-mobile .itemName {
font-weight: normal;
}
.infoWrapper {
margin-bottom: 3vh;
}
/* hides trailes tab */
button.emby-tab-button:nth-child(3) {
display: none;
}
/* Hides track selection box */
.trackSelections {
display: none;
}
/* header transparent */
.skinHeader.semiTransparent {
background-color: transparent;
}
.skinHeader-withBackground {
background-color: transparent;
}
/* Prominent play button */
.layout-desktop .btnPlay {
border-radius: 2em;
background-color: rgb(var(--white));
color: rgb(var(--darkest)) !important;
margin-right: 3vw !important;
border-radius: 14px !important;
}
.layout-desktop .btnPlay:hover {
background-color: rgba(var(--accent));
color: rgb(var(--darkest)) !important;
}
.layout-desktop .btnPlay::after {
content : attr(title);
margin: 1px 11px 0 2px;
color: rgba(var(--darkest));
}
.layout-desktop .material-icons.detailButton-icon.play_arrow {
color: rgba(var(--darkest));
}
.layout-desktop .btnPlay.detailButton {
flex-direction: row;
}
.layout-desktop .listViewUserDataButtons {
display: none;
}
/* Hide shuffle and replay buttons in media page */
.btnShuffle, .btnReplay {
display: none;
}
/* change Rating star, color */
.starIcon {
color: rgba(var(--honey-yellow), 0.8);
}
/* Resize cast, scenes and similar movies */
.layout-desktop #castContent .card.overflowPortraitCard {
font-size:95%!important;
width: 13.6em !important;
}
.layout-tv #castContent .card.overflowPortraitCard {
font-size: 90%!important;
width: 13em !important;
margin-left: -1.6vw !important;
height: 30vh;
}
.layout-desktop #similarCollapsible .card.overflowPortraitCard{
width: 14.6em !important;
}
.layout-desktop #scenesContent .card.itemAction.chapterCard{
width: 29.1em !important;
}
/* scene chapters rounded overlay */
.chapterCard .innerCardFooter {
background: rgba(var(--dark), 0.5);
color: rgba(var(--accent), 0.9);
backdrop-filter: blur(5px);
width: 50%;
margin: 0 auto;
position: absolute;
bottom: 7px;
left: 7px;
padding: 1px;
border-radius: 5.5px !important;
}
/* Increase title font size */
.detailPagePrimaryContainer {
font-size: 115% !important;
}
/* increases font size of "Show more" button */
a.overview-expand.emby-button {
font-size: 110%;
}
/* Add padding to description*/
.layout-desktop .detailSectionContent {
margin-top: 1.25vw !important;
padding: 0vw 0vw 1.25vw 1vw !important;
}
/* makes description and tagline bold */
.detailSectionContent .tagline {
font-weight: bold;
font-size: 125% !important;
margin-bottom: 1.5vh;
}
.detailSectionContent .detail-clamp-text, .detailSectionContent .overview {
font-weight: bold;
font-size: 125% !important;
}
/* hide imdb, tmdb trakt links */
.itemExternalLinks {
display: none;
}
/* Rounded left drawer buttons */
.navMenuOption,
.navMenuOption:hover,
.navMenuOption-selected {
border-radius: var(--rounding-alt) !important;
width: 85% !important;
margin: auto !important;
text-align: center !important;
height: 45px !important;
margin-top: 4px !important;
margin-bottom: 4px !important;
}
.navMenuOption,
.navMenuOption-selected {
width: 85% !important;
}
.navMenuOption:hover {
width: 89% !important;
}
.navMenuOption:hover:not(.navMenuOption-selected) {
backdrop-filter: blur(4px);
background-color: rgba(var(--accent), 0.85);
color: rgba(var(--darkest));
}
/* Selected Custom button color */
.navMenuOption-selected {
background: rgba(var(--accent), 0.7) !important;
color: rgba(var(--darkest)) !important;
backdrop-filter: blur(50px) !important;
}
/* change button hover color */
.raised:hover, .fab:hover, a[data-role="button"]:hover {
background: rgba(var(--accent), 0.95) !important;
}
/* hover background in settings */
#myPreferencesMenuPage .listItem:hover {
color: rgba(var(--darkest)) !important;
background: rgba(var(--accent),0.8) !important;
}
/* makes Activity and Paths boxes in settings have padding */
.listItem:not(.listItem-button) {
margin: 0.6em;
padding-left: 1em;
}
.listItem:hover:not(.listItem-button) {
transition: 0.2s;
background: rgba(var(--dark));
margin: 0.6em;
}
.paperList:not(.listItem-button) {
padding: 0.6em;
border-radius: var(--rounding-large);
}
/* adds padding to icons in Settings > Activity */
.listItemIcon:not(.listItemIcon-transparent) {
margin: 0 0.2em 0 0.1em;
}
/* adds padding to server info in Settings > Dashboard */
#serverName, #versionNumber, #operatingSystem, #architecture {
padding-left: 1em;
}
/* fixes the above applying rounding to the checkboxlist in settings */
.checkboxList.paperList {
border-radius: var(--rounding);
}
/* changes color of active device text in settings > dashboard and adds padding*/
#dashboardPage .sessionNowPlayingInnerContent {
color: rgb(var(--accent));
padding: 1em;
}
/* changes color of darken overlay in Activity devices */
.darkenContent {
background: rgba(var(--darkest),.55);
}
/* progressbar bg was dark gray */
#dashboardPage .backgroundProgress > div {
background-color: transparent;
display: none; /* this may break something? */
}
/* changes colors of icons inside cards (eg: person icon inside card images without pictures) */
.cardImageIcon {
color: rgb(var(--dark));
}
/* #### Accentlist #### */
.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;}
/* rounds hover menu options */
.navMenuOption:hover, .actionSheetMenuItem:hover {
background-color: rgba(var(--accent),0.5) !important;
color: rgba(var(--darkest), 1) !important;
border-radius: var(--rounding) !important;
}
.actionSheetMenuItem:hover .listItemBodyText.secondary {
color: rgba(var(--darkest), .85);
}
./* increases size and changes color of check boxes */
.checkboxOutline {
border: 0.25em solid;
top: 4px;
}
.checkboxOutline, .multiSelectCheckboxOutline {
border-color: rgba(var(--accent)) !important;
}
#chkSubtitle .checkboxOutline {
border-color: rgba(var(--accent)) !important;
border: 0.25em solid;
background: none;
}
.emby-checkbox:checked {
background-color: rgba(var(--accent)) !important;
font-size: 120% !important;
}
.mdl-radio__focus-circle {
background: var(--accent) !important;
}
/* changes color of checkboxes, text areas and selection panels */
.emby-checkbox:checked + span + .checkboxOutline {
border: 0.01em solid rgba(var(--accent)) !important;
background-color: rgba(var(--accent)) !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;
}
/* #### Rounding #### */
/*Rounded corners on pretty much everything*/
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);
}
/* rounds and add a dark blur to media cover/thumbs on hover */
.cardOverlayContainer {
border-radius: var(--rounding) !important;
background: rgba(var(--accent-off),.42);
}
.missingIndicator,
.unairedIndicator,
.detailTable,
.primaryImageWrapper > img,
.toast,
.cardContent,
.sessionNowPlayingInnerContent,
.listItem,
.listItem:hover,
.cardImage,
.fab,
.raised,
.itemSelectionPanel,
.cardContent-button,
.cardContent-shadow,
.itemDetailImage,
.cardImageContainer,
.cardPadder,
.listItemImage,
.listItemButton,
.headerButton,
.innerCardFooter,
.blurhash-canvas,
.dialog,
.countIndicator,
.playedIndicator,
.listItemIcon,
.listItem-border,
.button-flat,
.visualCardBox,
.emby-select-withcolor,
.chapterThumbTextContainer,
.chapterThumbContainer,
.chapterThumb,
.emby-input,
.emby-textarea,
.emby-select-withcolor,
.nowPlayingPageImage,
.upNextDialog-poster-img,
.upNextContainer {
border-radius: var(--rounding) !important;
}
/* Makes check boxes circular */
.checkboxOutline, .multiSelectCheckboxOutline {
border-radius: var(--rounding-circle) !important;
}
fieldset {
border-radius: var(--rounding);
}
.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;
}
/* Fix rounding issue on media poster in media page */
.cardBox:not(.visualCardBox) .cardPadder,
.cardContent-shadow {
box-shadow:0 .0725em .29em 0 rgba(0,0,0,0)
}
/* indicator corner */
/*Card indicators style corner*/
.cardIndicators,
.listItemIndicators {
right: 0;
top: 0;
}
.innerCardFooter {
/* border-radius: 0px var(--rounding) !important; */ /* conflicts with my edits of the progress bar */
/* box-shadow: 1px 0px 5px 2px rgba(var(--dark),0.5); */
}
.countIndicator, .playedIndicator {
border-radius: 0px var(--rounding) !important;
box-shadow: -1px 1px 5px 1px rgba(var(--darkest),.5);
}
.countIndicator {
background: rgba(var(--accent),1);
}
.playedIndicator {
background: rgba(var(--darkest), 1)
}
.mediaSourceIndicator {
left: 0;
top: 0;
}
.mediaSourceIndicator {
border-radius: var(--rounding) 0px !important;
box-shadow: -1px 1px 5px 1px rgba(var(--darkest),.5);
background: rgba(0,0,0,0.5)
}
.countIndicator, .playedIndicator {
background: rgba(var(--accent), 1) !important;
color: rgba(var(--darkest), 1) !important;
font-weight: bold;
}
/* colorful */
/*Colors for Title ribbon */
.layout-desktop .detailRibbon {
background: rgba(0, 0, 0, 0);
}
/* Item backdrop overlay color */
.itemBackdrop::after {
background: rgba(0,0,0,0) !important;
}
/*Accenting*/
.preload {
background-color: black;
}
.backgroundContainer {
background-color: rgba(var(--accent),0.17) !important;
}
.formDialogHeader,
.formDialogFooter {
background-color: rgba(var(--accent),0.15) !important;
backdrop-filter: blur(25px);
}
/*Fix footers/headers displaying on small pop-ups*/
.formDialogFooter-clear,
.formDialogHeader-clear,
.innerCardFooterClear {
background-color: transparent !important;
}
.button-flat:hover {
background: rgba(var(--accent),0.25);
}
.paper-icon-button-light:hover, .paper-icon-button-light:hover:not(:disabled) {
background-color: rgba(var(--accent),0.25) !important;
}
.cardOverlayFab-primary:hover {
-webkit-transform: scale(1.4);
transform: scale(1.4);
transition: .2s;
}
.navMenuOption-selected {
color: var(--dark);
}
.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;
}
/*Various box-shadows, might be related to glowstyle*/
.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: 1px 1px 4px 0px rgba(var(--darkest),.3) !important;
}
/*Dash and general UI styling*/
.paperList, .visualCardBox {
background-color: rgba(var(--darkest), 1);
}
.navMenuOption-selected {
color: var(--dark);
}
progress {
background: rgba(0, 0, 0, 0.5) !important;
}
/*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);}
/* changes colors of Active devices cards in settings > dashboard */
.defaultCardBackground1 {
background-color: rgba(var(--dark-highlight), 1);
}
.defaultCardBackground2 {
background-color: rgba(var(--dark-highlight), 1);
}
.defaultCardBackground3 {
background-color: rgba(var(--dark-highlight), 1);
}
.defaultCardBackground4 {
background-color: rgba(var(--dark-highlight), 1);
}
.defaultCardBackground5 {
background-color: rgba(var(--dark-highlight), 1);
}
/*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)
}
}
/* Syncplay theming*/
.syncPlayIconCircle {
color: rgba(var(--accent),1) !important;
text-shadow: none !important;
}
/* Red shutdown button */
#btnShutdown {
background: rgba(var(--cherry-red)) !important;
color: rgba(var(--darkest)) !important;
}
/*Remove divider on list items*/
.listItem-border {
border: 0 !important;
}
/* Green played check icon */
.playstatebutton-icon-played {
color: rgba(var(--jade-green), 1) !important;
}
/* white dialog Backdrop */
.dialogBackdropOpened {
opacity: 0.2;
}
.dialogBackdrop {
background-color: rgb(var(--darkest));
}
.tmla-mask {
background-color: rgba(249,249,249,0.2); /* hardcoded */
}
/* floating */
/* Floating progressbar edit - from JellyFlix theme */
.itemProgressBar {
backdrop-filter: blur(4px);
background: rgba(128, 128, 128, 0.55) !important; /* hardcoded */
height: 8px;
border-radius: 30px;
}
/* doesn't apply the blur inside Settings > Dashboard as it broke things for some reason */
#dashboardPage .itemProgressBar {
backdrop-filter: none;
}
.itemProgressBarForeground {
background: rgb(var(--accent));
border-radius: var(--rounding-circle);
}
.innerCardFooter {
width: calc(100% - 24px);
margin: 0 auto;
position: absolute;
bottom: 12px;
}
/* glossy */
@supports (backdrop-filter: blur(15px)) {
.dialog,
.mainDrawer,
.toast,
.appfooter {
backdrop-filter: blur(15px);
background-color: rgba(var(--darkest), 0.75) !important;
}
#itemDetailPage .itemProgressBar,
#dashboardPage .backgroundProgress > div {
backdrop-filter: blur(4px);
}
@media all and (max-width: 70em){
.cardOverlayButtonIcon {
background-color: rgba(var(--darkest), 0.35) !important;
}
.cardOverlayButtonIcon {
backdrop-filter: blur(4px);
}
}
.indicator {
backdrop-filter: blur(2px);
}
.paper-icon-button-light:hover:not(.headerButtonRight) {
backdrop-filter: blur(4px);
}
}
/* Episode List */
/*Size episode preview images in a normal way*/
.listItemImage.listItemImage-large.itemAction.lazy {
transition: filter 0.2s
}
.listItemImageButton-icon {
padding: 0;
}
.listItemImageButton {
margin: auto;
font-size: 1.6em !important;
}
/* CSS rules for screen sizes larger than 110em */
@media all and (min-width: 105.01em){
.listItemImage.listItemImage-large.itemAction.lazy {
height: 190px;
width: 338px;
}
.listItem-content {
height: 200px;
}
}
/* CSS rules for screen sizes between 80em and 110em */
@media all and (min-width: 80em) and (max-width: 105em) {
.listItemImage.listItemImage-large.itemAction.lazy {
height: 127px;
width: 225px;
}
.listItem-content {
height: 133px;
}
.layout-desktop .sectionTabs {
width: auto !important;
align-self: center !important;
margin-top: -4em;
}
}
/* CSS rules for screen sizes less than 80em */
@media all and (max-width: 79.99em){
.listItemImage.listItemImage-large.itemAction.lazy {
height: 80px;
width: 106px;
}
.listItem-content {
height: 85px;
}
.secondary.listItem-overview.listItemBodyText {
height: 2.5em;
margin: 0;
}
.layout-desktop .sectionTabs {
width: auto !important;
align-self: center !important;
margin-top: -4em;
}
}
.missingIndicator, .unairedIndicator {
background: #AAAAAA; /* hardcoded */
padding: .3em .6em;
color: rgba(var(--darkest));
}
/* #### login frame #### */
/*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 {
margin-top: 8em
}
/*Hide "manual" and "forgot" buttons}*/
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
display: none
}
#loginPage .padded-left.padded-right.padded-bottom-page {
margin-left: auto;
margin-right: auto;
background: rgba(var(--dark-highlight),.33);
backdrop-filter: blur(1px);
width: 24em;
border-radius: var(--rounding-large);
}
#loginPage .squareCard {
width: 33%;
}
#loginPage form {
padding-top: 4em;
}
#loginPage .sectionTitle{
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 1.2em !important;
}
#loginPage {
background: url(https://i.imgur.com/NzrSCuv.png) !important; /* previously https://i.imgur.com/9vL4iNf.png https://i.imgur.com/T4zHTDI.jpeg */
background-size: cover !important;
}
#loginPage .pageTitleWithDefaultLogo {
display: none !important;
}
/* margin to Jellyfin logo */
.pageTitle {
margin: 0 0 0 .15em;
}
/* #### Media Player #### */
/* hide volume bar in media player */
.osdVolumeSliderContainer {
-webkit-flex-grow: 1;
flex-grow: 1;
width: 9em;
display: none;
}
.osdVolumeSlider.mdl-slider.mdl-js-slider.mdl-slider-hoverthumb {
display: none;
}
.volumeButtons {
display: flex;
margin: 0 1em 0 .29em;
margin-right: 0px;
}
/* Hide extra buttons in media player */
.btnPreviousChapter, .btnNextChapter, .btnRewind, .btnFastForward, .btnPreviousTrack {
display: none;
}
/* increase player header and bottom icon sizes */
.osdHeader .headerTop {
max-height: 3em;
pointer-events: all;
font-size: 125%;
}
.videoOsdBottom .buttons {
flex-wrap:wrap;
padding:.25em 0 0;
font-size: 125%;
}
/* increase header bar icon sizes */
.layout-desktop .headerTop {
font-size: 125%;
}
/* increases sidebar icon sizes to match above */
.layout-desktop .drawerContent {
font-size: 110%;
}
.mainDrawer-scrollContainer {
font-size: 110%;
}
/* turns slider bubble into same thickness as play bar*/
.mdl-slider::-moz-range-thumb {
border-radius:50%;
height:0.8em;
-moz-transition:.2s;
transition:.2s;
width:0.8em
}
.mdl-slider::-webkit-slider-thumb {
-webkit-appearance:none;
border-radius:50%;
height:0.8em;
pointer-events:none;
-webkit-transition:.2s;
transition:.2s;
width:0.8em
}
/* turns slider bubble into white rectangle on hover */
.mdl-slider-hoverthumb:hover::-moz-range-thumb {
transform:scale(0.75, 2.3);
border-radius:70%/17%;
background-color:white;
}
.mdl-slider.show-focus:focus::-moz-range-thumb {
transform:scale(0.75, 2.3);
border-radius:70%/17%;
background-color:white;
}
.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
-webkit-transform:scale(0.7, 2.3);
transform:scale(0.75, 2.3);
border-radius:70%/17%;
background-color:white;
}
.mdl-slider.show-focus:focus::-webkit-slider-thumb {
-webkit-transform:scale(0.75, 2.3);
transform:scale(0.7, 2.3);
border-radius:70%/17%;
background-color:white;
}
/* round and blur progress bar */
.mdl-slider-background-flex {
background:hsla(0,0%,100%,.3);
border:0;
display:-webkit-flex;
display:flex;
height:.8em;
left:0;
margin-top:-.39em;
overflow:hidden;
padding:0;
top:50%;
width:100%;
border-radius: 12px !important;
backdrop-filter: blur(9px) !important
}
/* round playbar buffer */
.mdl-slider-background-upper {
background:#666;
background:hsla(0,0%,100%,.4);
bottom:0;
left:0;
position:absolute;
top:0;
width:0;
border-radius: 12px
}
/* dialogs */
.dialog, .mainDrawer, .appfooter {
backdrop-filter: blur(21px);
background-color: rgba(var(--dark), 0.75) !important;
border-radius:var(--rounding-large) !important;
box-shadow: 0 0 1.9vh #000;
}
.toast {
backdrop-filter: blur(21px);
background-color: rgba(var(--accent-off), 0.75) !important;
color: rgba(var(--darkest), 1) !important;
text-shadow: 0px 0px 4px rgba(0,0,0,0) !important;
font-weight: bold;
box-shadow: 0 0 1.9vh #000;
}
.actionSheetContent {
padding: 0.4em 0 !important;
margin-left: 0.75em !important;
margin-right: 0.75em !important;
margin-bottom: 0.35em !important;
}
.navMenuOption-selected, .selectionCommandsPanel {
color: rgba(var(--darkest), 1) !important;
background-color: rgba(var(--accent), 0.55) !important;
backdrop-filter: blur(4px);
}
.raised, .fab, a[data-role="button"] {
background: rgba(var(--accent), 0.75) !important;
color: rgba(var(--darkest), 1) !important;
}
div[data-role="controlgroup"] a.ui-btn-active {
background: rgb(var(--accent)) !important;
color: rgba(var(--darkest), 1) !important;
}
/* changes the color of icons in various places such as settings > activity, settings> notifications, subtitle results, etc*/
#peopleList .material-icons.listItemIcon.person,
#listGenres .material-icons.listItemIcon.live_tv,
#listStudios .material-icons.listItemIcon.live_tv,
#listTags .material-icons.listItemIcon.live_tv,
#repositories .listItemIcon:not(.listItemIcon-transparent),
#dlnaProfilesPage .listItemIcon:not(.listItemIcon-transparent),
.subtitleList .material-icons.listItemIcon.closed_caption,
.subtitleResults .material-icons.listItemIcon.closed_caption {
background: rgba(var(--accent-off), 1) !important;
color: rgba(var(--darkest), 1) !important;
}
/* fixes alignment of download and delete icons in edit subtitle screen */
.subtitleList, .btnDelete.listItemButton.paper-icon-button-light,
.subtitleResults .btnDownload.listItemButton.paper-icon-button-light {
margin-right: 1em;
}
/* moves dialogs up
.dialogContainer {
top: -110px;
}*/
/* rounds and pads episode list */
.layout-desktop #childrenContent .listItem {
padding-left: 1em !important;
padding-right: 0.5em !important;
padding-top: 0.7em !important;
padding-bottom: 0.7em !important;
border-radius: 28px !important;
}
#childrenContent .listItem:hover:not(.listItem-button) {
background-color: rgba(var(--darkest),0.6);
backdrop-filter: blur(6px);
}
/* collapsable menu */
.collapseContent {
background-color: rgba(var(--darkest),0.96);
border-radius: var(--rounding-alt);
margin-top: 9px;
}
.mdl-radio__circles {
border-radius: 50%;
height: 1.78em;
margin-right: 1.54em;
width: 1.78em;
}
/*Improve some menu alignments*/
.navMenuOptionText {
margin-top: 0;
}
.formDialogHeaderTitle {
margin-left: 1em;
}
.formDialogContent {
margin-bottom: 1.1em; /* previously 6.2 */
}
.dialogContentInner {
padding: .5em 1em 1em;
padding-right: 1em;
padding-left: 1em;
}
.listItem-indexnumberleft {
margin: 1em;
}
/* adds padding to entries in Settings > Dashboard: Activity, Settings > Activity, etc.
.listItem:not(.listItem-button.actionSheetMenuItem.emby-button) {
padding-left: 1em;
}
*/
/* Removes above padding from Settings > Dashboard: Path */
div.dashboardSection:nth-child(3) > div:nth-child(2) .listItem {
padding-left: 0em;
}
.activeSession .backdropCard .backdropCard-scalable {
padding: 0.8em;
}
/* makes progressbar in the Settings > Dashboard nicer */
#dashboardPage .activeSession .backgroundProgress, .activeSession .playbackProgress, .activeSession .transcodingProgress {
bottom: 0.6em;
height: 8px;
left: 0.7em;
position: absolute;
right: 0.7em;
width: 94%;
}
.dialogContainer .focuscontainer {
border-radius: var(--rounding-large) !important;
}
/* adds top padding to right click dialogs */
.dialogContainer .focuscontainer.actionsheet-not-fullscreen.actionSheet.centeredDialog {
padding-top: 5.5px;
}
.formDialogContent.smoothScrollY {
padding-bottom: 3em;
padding-top: 2em;
}
/* recolors icons in Settings > Activities, Notifications and Scheduled Tasks*/
#dashboardPage .listItemIcon, #serverActivityPage .listItemIcon {
background-color: rgba(var(--accent-off)) !important;
color: rgba(var(--darkest)) !important;
}
.listItemIcon.material-icons.notifications_active {
background-color: rgba(var(--accent-off)) !important;
color: rgba(var(--darkest)) !important;
}
.listItemIcon.material-icons.notifications_off {
background-color: rgba(var(--accent-off),.44) !important;
color: rgba(var(--darkest)) !important;
}
.material-icons.listItemIcon.schedule {
background-color: rgba(var(--accent-off)) !important;
color: rgba(var(--darkest)) !important;
}
/* fields no border */
/*No borders, background highlights*/
.infoBanner {
background: rgba(var(--accent), 0.15) !important;
}
fieldset {
border: 1px solid rgba(var(--accent), 0.3);
}
.emby-input,
.emby-textarea,
.emby-select-withcolor {
border: none !important;
background-color: rgba(var(--darkest));
}
.checkboxOutline {
border: 0.22em solid rgba(var(--accent-off)) !important;
}
#itemDetailPage .emby-select-withcolor {
background: rgba(0, 0, 0, 0.2);
}
/*Change look of in-focus fields: text areas and selection panels */
.itemSelectionPanel {
border: 0.01em solid rgba(var(--accent)) !important;
background-color: rgba(var(--accent),.2) !important;
padding: 0.5em;
}
.itemSelectionCount {
color: rgba(var(--darkest)) !important;
}
.emby-textarea {
background-color: rgba(var(--darkest)) !important;
color: rgba(var(--accent)) !important;
}
.emby-textarea:focus {
border-color: rgba(var(--accent),.9) !important;
background-color: rgba(var(--darkest)) !important;
}
.emby-input:focus {
border-color: rgba(var(--accent),.9) !important;
background-color: rgba(var(--darkest)) !important;
}
.emby-select-withcolor:focus {
border-color: rgba(var(--accent),.9) !important;
background-color: rgba(var(--darkest)) !important;
}
.emby-select-withcolor {
background-color: rgba(var(--darkest)) !important;
color: white;
}
.emby-input {
background-color: rgba(var(--darkest)) !important;
color: white;
}
.checkboxIcon {
color: rgba(var(--dark)) !important;
font-size: 1.4em;
margin-right: 1px;
margin-top: 2px;
}
/* increases size of check boxes */
.checkboxList > .emby-checkbox-label {
display: flex;
margin: 0.5em 0.5em 0.4em 0.4em;
font-size: 120%;
}
.emby-checkbox-label {
padding: 0 0 0 3em;
}
/* padding to fields */
.emby-input,
.emby-textarea,
.emby-select {
padding: calc(0.8em - 4.5px) !important;
}
/* fixes audio/subtitle selector arrow in media page */
.trackSelections .selectContainer .selectArrowContainer .selectArrow {
margin-top: 4px;
}
/* Removes hover bg from right headerbar */
.headerRight .paper-icon-button-light:hover, .headerRight .paper-icon-button-light:hover:not(:disabled) {
background-color: transparent !important;
}
.headerRight .paper-icon-button-light:focus, .headerRight .paper-icon-button-light:focus:not(:disabled) {
background-color: transparent !important;
}
/* Mobile fixes */
.layout-mobile .headroom--unpinned {
transform: translateY(-50%);
}
/* AppleTV-esque bar */
/* Transparent header bar */
.skinHeader {
background-color: transparent !important;
}
.layout-desktop .skinHeader {
padding-top: 1.5em !important;
padding-bottom: 1.5em !important;
}
/* Button height */
.headerRight,
.layout-desktop .emby-tab-button {
height: 45px !important;
}
/* fixes issue with text no being centered */
.emby-tab-button {
display: inline-flex;
}
/* Rounded header buttons */
.headerTabs,
.headerRight {
background-color:rgba(var(--white-off), 0.35) !important;
border-radius: var(--rounding-circle) !important;
color: rgba(var(--darkest)) !important;
backdrop-filter: blur(50px) !important;
}
.homeLibraryText, .emby-button-foreground {
color: rgb(var(--darkest));
}
#indexPage .homeLibraryButton, .emby-tab-button {
background: transparent !important;
min-width: 0 !important;
max-width: 50vw !important;
width: fit-content !important;
}
.layout-desktop .itemsContainer, .layout-desktop .emby-tabs-slider {
margin: 0 !important;
}
.layout-desktop .homeLibraryButton, .layout-desktop .emby-tab-button {
margin: .5em !important;
}
.raised:hover .homeLibraryText, .emby-tab-button:hover .emby-button-foreground {
color: rgb(var(--darkest)) !important;
transition: 100ms;
}
#indexPage .homeLibraryButton:hover, .emby-tab-button:hover {
background-color: rgba(var(--accent),.5) !important;
border-radius: var(--rounding-circle) !important;
}
.raised.homeLibraryButton.emby-button:hover, .emby-tab-button:hover, .homeLibraryButton:focus {
outline: none !important;
box-shadow: none !important;
}
.emby-tab-button:hover::after {
background: unset !important;
}
.emby-tab-button-active {
background-color: rgb(var(--accent)) !important;
border-radius: var(--rounding-circle) !important;
}
.cardOverlayButtonIcon {
color: rgb(var(--accent));
}
.cardOverlayFab-primary {
background-color: #00000000;
}
.cardOverlayContainer .paper-icon-button-light:hover,
.cardOverlayContainer .paper-icon-button-light:hover:not(:disabled) {
color: rgba(var(--dark)) !important;
}
/* hides card overlay buttons (watched, favorites, etc) */
.cardOverlayButton-br {
display: none;
}
.adminDrawerLogo img { content: url(https://i.imgur.com/wHaGTm4.png) !important; } imgLogoIcon { content: url(https://i.imgur.com/wHaGTm4.png) !important; } .pageTitleWithLogo { background-image: url(https://i.imgur.com/wHaGTm4.png) !important; } /* dark variant https://i.imgur.com/QXXfCCs.png */
/* Support for Jellyscrub plugin */
.chapterThumbTextContainer {
background: rgba(var(--dark),0.5) !important;
}
/* fixes issue with Movies > Genres hover boxes */
.sectionTitleTextButton > .sectionTitle {
margin-bottom: .35em;
margin-top: .35em;
margin-left: .6em;
margin-right: .6em;
}
.sectionTitleTextButton > .material-icons.chevron_right {
display: none;
}
/* Playback info tweaks */
.playerStats {
background: rgba(var(--dark),0.75);
border-radius: var(--rounding);
color: rgba(var(--accent),1);
backdrop-filter: blur(7px);
top: 8em;
}
.playerStats-stat-value {
color: rgba(var(--accent),.65);
}
.playerStats-closeButton {
color: rgb(var(--accent));
position: absolute;
right: .25em;
top: 0.4em;
z-index: 1;
}
.playerStats-stats {
padding: 1.8em 2.7em 2.6em 2.4em;
font-size: 110%;
}
#childrenCollapsible .padded-right {
padding-right: 33%;
}
.layout-desktop .nextUpSection {
border-radius: 34px;
margin-left: 66%;
margin-right: -30vw;
margin-top: 14vh;
margin-bottom: 1vh;
padding-left: 2.5em;
margin-right: 2.5em;
background-color: rgba(var(--darkest),.8);
padding-top: .5em;
backdrop-filter: blur(4px);
position: absolute;
/* margin-left: 1.5vw; */
}
.cardBox-bottompadded {
margin-bottom: 1.5em !important;
}
.cardText.cardTextCentered.cardText-first .itemAction.textActionButton{
margin-top: 0.8em;
}
.layout-desktop .nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata {
right: 0.7em;
position: relative;
}
.layout-desktop .nextUpSection .cardBox-bottompadded {
margin-bottom: 1.3em !important;
}
/*#####################################################################################################################
LAYOUT MOBILE
######################################################################################################################*/
.layout-mobile .headerHomeButton,
/* .layout-mobile .headerCastButton, */
.layout-mobile .headerSyncButton {
display: none;
}
.layout-mobile .mainDrawerButton {
display: block !important;
}
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
background: none;
background-color: rgba(10, 80, 160, 0.75);
}
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
background: none;
background-color: rgba(190, 80, 10, 0);
}
.layout-mobile .emby-button-foreground {
top: 0px !important;
}
.layout-mobile .sectionTabs {
padding-left: 0.4em !important;
padding-right: 0.4em !important;
width: auto;
align-self: center;
}
.pageTitle {
margin-top: auto;
margin-bottom: auto;
}
.layout-mobile .emby-tab-button {
padding: 0.9em 0.95em;
margin-top: 0.4em;
margin-bottom: 0.4em;
}
/* Seccion Peliculas/Series */
.layout-mobile .itemTags,
.layout-mobile .itemName.originalTitle,
.layout-mobile .trackSelections,
.layout-mobile .itemExternalLinks,
.layout-mobile .writersGroup,
#seriesAirTime {
display: none;
}
/* Quitamos imagen de poster */
.layout-mobile .detailImageContainer .card,
.layout-mobile .detailImageContainer .card.backdropCard,
.layout-mobile .detailImageContainer .card.squareCard {
top: auto;
display: none;
}
/* Mostrando Logo y posicionandolo */
.layout-mobile .detailLogo {
display: block;
width: 15em;
left: 5%;
top: 17vh;
}
/* Mismo color de fondo a franja gris */
.detailRibbon {
background: rgba(32, 32, 32, 0);
}
/* Sipnosis tamano de 5 lineas */
.detail-clamp-text {
-webkit-line-clamp: 4;
}
.layout-mobile .infoWrapper {
padding-left: 0;
margin-top: 6em;
}
.layout-mobile .itemMiscInfo,
.layout-mobile .itemName,
.layout-mobile .mainDetailButtons,
.layout-mobile .parentName {
text-align: left;
}
.layout-mobile .itemMiscInfo,
.layout-mobile .itemName,
.layout-mobile .mainDetailButtons,
.layout-mobile .parentName {
justify-content: left;
text-align: left;
}
/* moviendo a la Izq Contenedor de botones de pelicula*/
.layout-mobile .mainDetailButtons {
padding-left: 0;
}
/* arregalndo padding y margin y aumentando tamano de fanart y agregando degradado */
.layout-mobile .itemBackdrop {
background-size: contain;
height: 29vh;
/*30*/
margin-top: calc(45px + 0.5em);
}
/* overlay on top of backdrop in mobile layout */
.layout-mobile .itemBackdrop::before {
content: '';
right: 0;
left: 0;
bottom: 0;
height: 29vh;
position: absolute;
z-index: -1;
background:linear-gradient(to top, rgba(var(--dark-apparent),1) 10%, rgba(var(--dark-apparent),0.6) 16%, rgba(var(--dark-apparent),0) 21%), linear-gradient(to bottom, rgba(var(--dark-apparent),1) 1%, rgba(var(--dark-apparent),0) 10%);
}
.layout-mobile .detailPageWrapperContainer {
top: -5em;
}
.layout-mobile .infoWrapper {
margin-top: 0;
}
.layout-mobile .detailPageSecondaryContainer {
margin: 0 0 1em 0;
}
.layout-mobile .overview-expand {
padding: 0 1em 0.3em 1em;
}
/* play button */
.layout-mobile .mainDetailButtons {
margin-top: 1.5em;
}
.layout-mobile .btnPlay {
border-radius: 2em;
background-color: rgb(var(--white));
color: rgb(var(--darkest)) !important;
margin-right: 2.7em !important;
border-radius: 14px !important;
}
.layout-mobile .btnPlay::after {
content: attr(title);
margin: 0 10px 0 2px;
}
.layout-mobile .btnPlay.detailButton {
flex-direction: row;
}
.layout-mobile .btnShuffle,
.layout-desktop .btnShuffle {
display: none;
}
.layout-mobile .material-icons.detailButton-icon.play_arrow {
color: rgb(var(--darkest)) !important;
}
.layout-mobile .listViewUserDataButtons {
display: none;
}
.layout-mobile .listItem-content {
display: block;
}
/* fixes placement of episodes titles */
.layout-mobile .listItem-content .listItemBody {
left: 110px;
position: relative;
bottom: 88px;
max-width: 64%;
}
.layout-mobile .listItem-bottomoverview {
font-size: 100%;
margin-bottom: .1em;
margin-top: 0.5em;
}
#childrenContent .listItem {
padding-left: 1em !important;
padding-right: 1em !important;
padding-top: 1em !important;
padding-bottom: 1em !important;
border-radius: 24px !important;
}
.layout-mobile .listItem-content .listItemImage-large {
height: 30vw;
width: 86vw;
}
.layout-mobile .listItem-content .listItemImage-large .listItemImageButton,
.listItemIndicators {
font-size: 1em !important;
}
.layout-mobile .detailPagePrimaryContent {
position: relative;
/* margin-top: 1em; */
}
.layout-mobile .detailPagePrimaryContainer {
display: block;
padding: 2.5rem 1.15rem 2rem;
position: relative;
}
/* Animation of disappearing headerbars in mobile layout */
.layout-mobile .headroom--unpinned {
transform: translateY(-115%);
transition: transform 0.3s ease-in-out;
}
.headroom--pinned {
transition: transform 0.3s ease-in-out;
}
.listItemImageButton {
color: rgb(var(--accent));
background: rgba(0, 0, 0, 0);
}
.layout-mobile .headerRight {
height: 40px !important;
}
/* adds padding to custom css box */
#txtCustomCss {
padding: 1em !important;
}
/* changes color of library scan percentage */
#divRunningTasks > p:nth-child(1) > span:nth-child(3){
color: rgb(var(--accent)) !important;
}
#divRunningTasks > p:nth-child(1) > span:nth-child(2){
color: rgb(var(--cherry-red)) !important;
}
/* fixes elector arrow's wrong placement */
.selectArrow {
margin-top: 1.1em;
}
/* tweaks playback chapter thumbs */
.chapterThumbTextContainer {
background-color: rgba(var(--dark),.7) !important;
width: 50%;
margin: 0 auto;
position: absolute;
margin-bottom: 7px;
border-radius: 5.5px !important;
margin-left: 7px;
padding-left: 8px;
padding-right: 8px;
padding-top: 5px;
padding-bottom: 2px;
}
.sliderBubble {
background-color: transparent;
}
.chapterThumbContainer,
.chapterThumb {
background-color: transparent !important;
margin-bottom: -5px;
}
.chapterThumbText {
color: rgba(var(--accent),.8) !important;
}
.chapterThumbText-dim {
color: rgba(var(--accent),.7) !important;
opacity: 1;
}
Code is a mess and It is still WIP, but mostly done.
Some things I'd still like to do but don't know how would be:
Add profile pics back:
Add season posters back:
Turn seasons into a carousel to prevent this behavior:
If you know how to do any of this, please let me know!