/MY EDITS/
/ Rounded header buttons /
.section0 .homeLibraryButton {
background-color:rgba(35, 35, 35, 0.5) !important;
border-radius: 50px !important;
backdrop-filter: blur(50px) !important;
}
/My Media menu on center/
.section0 .itemsContainer {
align-items: center;
justify-content: center;
}
/ remove My Media title /
.section0 .sectionTitle {
display: none;
}
/Media player/
.startTimeText, .endTimeText {
width: 3.4em;
display: block;
text-align: center;
}
.osdTitle {
margin-left: 0.5em;
}
/ Video Playback Progress Bar /
.mdl-slider-background-lower,
.mdl-slider-background-upper {
background: linear-gradient(to right, rgba(163, 95, 198, 0.5) 0%, rgba(6, 161, 217, 0.5) 100%);
}
.videoOsdBottom {
padding-top: 1em;
}
.skinHeader-withBackground.osdHeader {
height: 5em;
}
/ Mine - Background Image /
.backdropImage {
display: none;
}
.backgroundContainer {
background-color: rgba(0, 0, 0, 0);
background-image: url('https://i.imgur.com/a4VdCjA.png');
filter: blur(10px);
background-size: cover;
}
/ Mine - Replace "Latest Movies and TV Shows" text with Custom Text to Recently Added /
homeTab
div
div.section2
div:nth-child(1)
div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
a
h2 {
display: none;
}
homeTab
div
div.section2
div:nth-child(1)
div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
a
span {
display: none;
}
homeTab
div
div.section2
div:nth-child(1)
div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
a:after {
content: 'Films ›';
font-size: 24px;
font-weight: normal;
}
homeTab
div
div.section2
div:nth-child(2)
div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
a
h2 {
display: none;
}
homeTab
div
div.section2
div:nth-child(2)
div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
a
span {
display: none;
}
homeTab
div
div.section2
div:nth-child(2)
div.sectionTitleContainer.sectionTitleContainer-cards.padded-left
a:after {
content: 'TV Series ›';
font-size: 24px;
font-weight: normal;
}
/ Make watched icon dark and transparent /
.indicator { background: #00000058 !important; }
/Theme /
/ Variables /
:root {
--primary-r: 0;
--primary-g: 164;
--primary-b: 220;
--primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
--secondary-accent-color: #00a4dc20;
--primary-background-color: #101010;
--secondary-background-color: #181818;
--primary-background-transparent: rgba(35,35,35,0.5);
--secondary-background-transparent: rgba(0,0,0,0.6);
--rounded-cards: 15px;
--blur: 10px;
}
/ Setting accent color variable /
.emby-checkbox:checked + span + .checkboxOutline,
.selectionCommandsPanel,
.countIndicator,
.MuiButton-root.MuiButton-containedSizeMedium,
.MuiChip-root.MuiChip-colorInfo:not(.MuiChip-root.MuiChip-colorError),
progress[aria-valuenow]:before {
background: var(--primary-accent-color) !important;
}
progress::-moz-progress-bar {
background: var(--primary-accent-color) !important;
}
progress::-webkit-progress-value {
background: var(--primary-accent-color) !important;
}
.MuiAlert-root.MuiAlert-standardInfo {
background: var(--secondary-accent-color) !important;
}
.emby-checkbox:checked + span + .checkboxOutline,
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
.emby-input:focus,
.emby-textarea:focus,
.emby-select-withcolor:focus,
.mdl-spinner__layer-1,
.mdl-spinner__layer-2,
.mdl-spinner__layer-3,
.mdl-spinner__layer-4,
.progressring-spiner {
border-color: var(--primary-accent-color) !important;
}
.button-link:not(.itemDetailPage .button-link),
.selectLabelFocused,
.textareaLabelFocused,
.inputLabelFocused,
.emby-tab-button:hover,
.metadataSidebarIcon,
.upNextDialog-countdownText,
.MuiSvgIcon-root.MuiSvgIcon-fontSizeInherit,
.listItemImageButton:hover,
.button-flat:hover,
divRunningTasks span {
}
@media (hover: hover) and (pointer: fine) {
.paper-icon-button-light:hover:not(:disabled) {
color: var(--primary-accent-color) !important;
background-color: var(--secondary-accent-color) !important;
backdrop-filter: blur(var(--blur)) !important;
}
}
/ Reset size of Jellyfin logo /
.layout-desktop .pageTitleWithLogo {
height: 0px !important;
width: 0px !important;
margin: 0 1em 0 .5em !important;
}
[dir="ltr"] .pageTitle {
margin: 0 1em 0 .5em !important;
}
/ Un-static left drawer from unstatic css/
.layout-desktop .mainDrawer:not(.dashboardDocument) {
left: -320px !important;
z-index: 1099 !important;
border-top-right-radius : 5px !important;
border-bottom-right-radius : 5px !important;
background: var(--primary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important;
}
.layout-desktop:has(.backgroundContainer.withBackdrop) .mainDrawer:not(.dashboardDocument) {
width: 275px !important;
background-color: var(--primary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important;
}
@supports not selector(:has(*)) {
.layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
background: blur(var(--blur)) !important;
backdrop-filter: none !important;
}
}
/ Lower drawer buttons /
.layout-desktop .mainDrawer-scrollContainer {
margin-top: 5px !important;
}
/ Shift content back to the left /
.layout-desktop .libraryPage:not(#editItemMetadataPage) {
margin-left: 0px !important;
}
/ Fix for Jellyfin Media Player /
.quickConnectSettingsContainer {
margin-left: 0px !important;
}
/ Add transition back /
.layout-desktop .touch-menu-la.transition {
transition: transform .24s ease-out,left .26s ease-out,-webkit-transform .24s ease-out !important;
}
/ Show hamburger button /
.layout-desktop .mainDrawerButton:not(.dashboardDocument) {
display: inline-flex !important;
}
/ Fix for dashboard /
.layout-desktop .dashboardDocument .mainDrawer {
top: 0px !important;
left: 0px !important;
width: 300px !important;
z-index: 998 !important;
}
.layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
padding-top: 75px !important;
}
/ Re-center header buttons /
.layout-desktop .headerTabs {
margin-left: 0px !important;
}
/ Hide home button /
.layout-desktop .headerHomeButton {
display: block !important;
}
.layout-desktop .dashboardDocument .headerHomeButton {
display: block !important;
}
/ Fix for scroll menus on home page /
.emby-scroller {
margin-right: 3.3% !important;
}
/ Background for top left buttons /
.layout-desktop .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
padding: 2px !important;
top: -3px !important;
background-color: var(--primary-background-transparent) !important;
border-radius: 50px !important;
backdrop-filter: blur(var(--blur)) !important;
}
/ Fix for JMP /
@supports not selector(:has(*)) {
.layout-desktop .headerLeft {
padding: 2px !important;
top: -3px !important;
background-color: var(--primary-background-transparent) !important;
border-radius: 50px !important;
backdrop-filter: blur(var(--blur)) !important;
}
}
.headerLeft {
flex-grow: 0 !important;
-webkit-flex-grow: 0 !important;
}
.headerRight {
position: absolute !important;
right: 12px !important;
}
/ Music Player /
.layout-desktop .appfooter {
margin-left: 0px !important;
}
/ Rounded cards /
.cardContent,
.cardPadder,
.cardOverlayContainer,
.blurhash-canvas,
.dialog,
.itemSelectionPanel {
border-radius: var(--rounded-cards) !important;
}
/ Rounded selection menu /
.itemSelectionPanel {
border: 2px solid var(--primary-accent-color) !important;
}
.itemSelectionPanel .checkboxOutline {
margin: 7px !important;
}
/ Floating progress bar /
.innerCardFooter {
border-radius: var(--rounded-cards) !important;
margin-left: 5px !important;
margin-bottom: 5px !important;
padding: 5px 15px 5px 5px !important;
bottom: 0% !important;
background: rgba(var(--white-off), 0.35) !important;
backdrop-filter: blur(var(--blur)) !important;
}
.fullInnerCardFooter {
bottom: 5% !important;
width: 90% !important;
margin: auto !important;
border-radius: 100px !important;
padding: 0px !important;
backdrop-filter: none !important;
}
.itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) {
height: 5px !important;
background: rgba(var(--white-off), 0.35) !important;
backdrop-filter: blur(4px) !important;
border-radius: 100px !important;
}
.innerCardFooterClear {
background-color: none !important;
}
.innerCardFooter .cardText {
padding: 0 0 0 10px !important
}
.itemProgressBarForeground:not(.playbackProgress .itemProgressBarForeground):not(.transcodingProgress .itemProgressBarForeground):not(.backgroundProgress .itemProgressBarForeground) {
background: var(--primary-accent-color) !important;
}
.itemProgressBarForeground {
border-radius: 100px !important;
}
.transcodingProgress > div {
background-color: hsla(0,0%,100%,.2) !important;
}
.activeSession .backgroundProgress,
.activeSession .playbackProgress,
.activeSession .transcodingProgress {
bottom: 10px !important;
border-radius: 100px !important;
width: 90% !important;
left: 5% !important;
}
.sessionNowPlayingInnerContent {
padding-bottom: 12px !important;
padding-inline: 17px !important;
}
.sessionAppInfo {
padding: .5em 0em !important;
}
.sessionNowPlayingInfo {
padding: .8em 0em !important;
}
/ Rounded left drawer buttons /
.navMenuOption,
.navMenuOption:hover,
.navMenuOption-selected {
border-radius: 100px !important;
width: 85% !important;
margin: auto !important;
text-align: center !important;
height: 45px !important;
margin-top: 3px !important;
margin-bottom: 3px !important;
}
.navMenuOption:hover:not(.navMenuOption-selected) {
background-color: rgba(44, 44, 44, 0.7);
}
/ Center icons and text and shift to the left /
.navMenuOptionIcon,
.navMenuOptionText {
position: inherit !important;
left: -10% !important;
margin-top: 0 !important;
}
/ Fix for header buttons /
.layout-desktop .emby-button-foreground {
top: -9px !important;
}
.layout-tv .emby-button-foreground {
top: -14px !important;
}
/ Custom button color /
.navMenuOption-selected {
background: var(--secondary-accent-color) !important;
color: var(--primary-accent-color) !important;
}
/ Modified background color /
html,
.backgroundContainer:not(.withBackdrop):not(.backgroundContainer-transparent),
.noBackdropTransparency .detailPageSecondaryContainer {
background-color: blur(var(--blur)) !important;
}
/ Transparent header bar /
.skinHeader {
background-color: transparent !important;
}
.layout-desktop .skinHeader,
.layout-tv .skinHeader {
padding-top: 1.5em !important;
}
.layout-tv .skinHeader {
padding-bottom: 10px !important;
}
/ Rounded header buttons /
.headerTabs,
.headerRight {
background-color: var(--primary-background-transparent) !important;
border-radius: 50px !important;
backdrop-filter: blur(var(--blur)) !important;
}
.layout-desktop .headerTabs,
.layout-tv .headerTabs {
margin-bottom: 10px !important;
}
.layout-desktop .headerTabs {
margin-left: 160px !important;
margin-top: -58px !important;
}
/ Button height /
.headerRight,
.emby-tab-button {
height: 45px !important;
}
/ Lower header and add padding to right buttons /
.layout-desktop .headerRight {
padding: 0px 5px !important;
}
.layout-tv .headerRight {
padding: 20px 10px !important;
}
/ Move left header back up /
.layout-desktop .headerLeft
.layout-tv .headerLeft {
position: relative !important;
top: -17px !important;
}
/ Mobile fixes /
.layout-mobile .headroom--unpinned {
transform: translateY(-50%);
}
.layout-mobile .sectionTabs {
margin-left: auto !important;
margin-right: auto !important;
width: auto !important;
max-width: 100% !important;
}
.layout-mobile .emby-button-foreground {
top: -2px !important;
}
.layout-mobile .skinHeader {
transition: .1s !important;
}
.layout-mobile .mainDrawer {
background: var(--secondary-background-color) !important;
}
.layout-mobile .headroom--unpinned {
transform: none;
}
.layout-mobile .headroom--unpinned:has(.headerTabs.sectionTabs:not(.hide)) {
transform: translateY(-50%);
}
.layout-mobile .headroom--not-top {
background: var(--primary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important;
}
.layout-mobile .headroom--not-top .headerRight {
background: none !important;
}
.layout-mobile .headroom--top,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) {
background: transparent !important;
backdrop-filter: none !important;
}
.layout-mobile .headroom--top .headerRight ,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) .headerRight {
background: var(--primary-background-transparent) !important;
}
@media (max-width: 380px) {
.layout-mobile .pageTitle:not(.pageTitleWithLogo):not(:empty) {
position: absolute !important;
margin-left: 50% !important;
transform: translate(-50%, 0) !important;
top: 60px !important;
}
.layout-mobile .headerTop:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) {
-webkit-align-items: start !important;
align-items: start !important;
}
.layout-mobile .skinHeader:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) {
height: 110px !important;
}
.layout-mobile .skinHeader:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)):has(.sectionTabs:not(.hide)) {
height: 140px !important;
}
.layout-mobile .libraryPage:not(.noSecondaryNavPage) {
padding-top: 9.5em !important;
}
.layout-mobile .headroom--unpinned:has(.headerTabs.sectionTabs:not(.hide)):has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) {
transform: translateY(-60%);
}
}
/ Support for Jellyscrub plugin /
.chapterThumbContainer {
background: none !important;
border-radius: var(--rounded-cards) !important;
box-shadow: unset !important;
}
.chapterThumb {
border-radius: var(--rounded-cards) !important;
margin-bottom: 47px !important;
box-shadow: 0 0 1.9vh #000 !important;
}
.chapterThumbTextContainer {
background: none !important;
}
.chapterThumbText {
text-align: center !important;
}
.chapterThumbText-dim {
display: none !important;
}
/ Support for IntroSkipper plugin /
skipIntro .btnSkipIntro {
}
skipIntro .btnSkipIntro:hover {
}
skipIntro .paper-icon-button-light:hover:not(:disabled) {
}
.sliderContainer:has(.mdl-slider-hoverthumb:not(:hover)) .sliderMarker {
opacity: 0 !important;
transition: 0.2s !important;
}
.sliderContainer:has(.mdl-slider-hoverthumb:hover) .sliderMarker {
opacity: 1 !important;
transition: 0.2s !important;
height: 10px !important;
transform: translate3d(0,40%,0) !important;
-webkit-transform: translate3d(0,40%,0) !important;
}
.sliderMarker.watched {
background-color: #FFFFFF90 !important;
z-index: 10 !important;
}
skipIntro .upNextContainer {
}
skipIntro .emby-button {
}
skipIntro .emby-button:hover {
}
skipIntro .emby-button:focus {
}
/ Support for InPlayerEpisodePreview plugin /
.layout-desktop #popupFocusContainer {
padding: 10px !important;
}
.layout-desktop #popupTitleContainer {
margin: 0px !important;
padding: 10px 0px 10px 0px !important;
}
.layout-desktop #popupContentContainer .previewEpisodeDetails {
position: unset !important;
margin: 0px 0px 6px 10px !important;
font-size: 13.5px !important;
}
.layout-desktop #popupContentContainer .previewEpisodeTitle {
font-size: 16.5px !important;
}
.layout-desktop #popupContentContainer .listItem {
padding: .25em .25em .25em .5em !important;
}
/ Modify player buttons /
.material-icons.fast_rewind::before {
content: "\e059";
}
.material-icons.fast_forward::before {
content: "\e057";
}
.material-icons.audiotrack::before {
content: "\e91f";
}
/ Player modifications /
.upNextContainer, .toastVisible, .sliderBubble {
backdrop-filter: blur(50px) !important;
}
.upNextContainer {
border-radius: 15px !important;
background-color: rgba(0, 0, 0, 0.7) !important;
}
.toastVisible {
border-radius: 30px !important;
background-color: rgba(35, 35, 35, 0.5) !important;
}
.sliderBubble {
border-radius: 15px !important;
background-color: rgba(0,0,0,0.5) !important;
}
/ Settings and dashboard modifications /
.emby-input,
.emby-textarea,
.paperList,
.listItem:hover,
.subtitleappearance-preview {
border-radius: var(--rounded-cards) !important;
}
.button-submit,
.emby-select,
.checkboxOutline,
.btnRefresh,
btnShutdown,
.raised {
border-radius: 100px !important;
}
.button-submit {
background: var(--primary-accent-color) !important;
}
/ Modify username placement on profile page /
.layout-desktop #userProfilePage .readOnlyContent div:not([class]), div[class=""]{
align-items: initial !important;
}
.layout-desktop .username {
margin: 0px 0px 10px 10px !important;
}
/ Red shutdown button /
btnShutdown {
}
/ Remove border under certain dashboard items /
.listItem-border {
border: 0 !important;
}
/ Add padding to list items /
.layout-desktop .listItem,
.layout-tv .listItem {
padding-inline: 15px !important;
}
/ Rounded dashboard cards /
.cardBox {
border-radius: var(--rounded-cards) !important;
}
/ Removed ugliness of border-card styling /
.layout-desktop fieldset.verticalSection-extrabottompadding,
.layout-tv fieldset.verticalSection-extrabottompadding {
border-radius: var(--rounded-cards) !important;
border-color: #3B3B3B !important;
padding: 10px 35px !important;
}
/ Rounded tab selections in dashboard /
.layout-desktop .localnav {
border-radius: 100px !important;
background: #202020 !important;
width: fit-content !important;
}
.layout-desktop a[data-role="button"] {
background: none !important;
}
.layout-desktop div[data-role="controlgroup"] a.ui-btn-active {
background: var(--primary-accent-color) !important;
border-radius: 100px !important;
}
.layout-desktop .dashboardDocument .mainAnimatedPage {
left: 260px !important;
}
libraryDisplayPage,
metadataImagesConfigurationPage,
metadataNfoPage {
}
mediaLibraryPage {
}
/ Re-align active devices in dashboard /
.activeDevices.itemsContainer {
margin: 0px !important;
}
.playbackProgress > div {
background: var(--primary-accent-color) !important;
}
/ IntroSkipper settings /
.layout-desktop summary {
border-radius: 100px !important;
}
.layout-desktop fieldset.verticalSection-extrabottompadding,
.layout-tv fieldset.verticalSection-extrabottompadding {
padding: 10px 35px 20px 35px !important;
}
intro_reqs,
edl,
silence,
support {
}
/ Dashboard fixes for 10.9.x /
.layout-desktop #userProfilesPage {
left: 260px !important;
}
.MuiAlert-message {
color: #fff !important;
}
.MuiDataGrid-root.MuiDataGrid-withBorderColor {
border-radius: var(--rounded-cards) !important;
}
.infoBanner {
border-radius: var(--rounded-cards) !important;
}
.MuiToggleButton-root.MuiToggleButtonGroup-groupedHorizontal {
border-radius: var(--rounded-cards);
padding-inline: 15px !important;
}
.MuiAppBar-root.MuiAppBar-positionFixed {
padding: 10px !important;
}
.MuiAppBar-root.MuiAppBar-positionFixed.MuiAppBar-colorPrimary {
background: var(--primary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important;
}
.MuiList-root.MuiList-subheader {
padding-left: 10px !important;
}
.MuiList-subheader .MuiListItem-root.MuiListItem-gutters {
width: 85% !important;
margin-inline: auto !important;
}
.MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters {
border-radius: 100px !important;
margin: 2px 0px !important;
transition: .2s !important;
height: 45px !important
}
.MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:not(.Mui-selected) .MuiListItemIcon-root,
.MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:not(.Mui-selected) {
color: #D1D1D1
}
.MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:hover:not(.Mui-selected) {
transform: scale(1.05) !important;
background: rgba(44, 44, 44, 0.7) !important;
}
.MuiListItemButton-root.Mui-selected {
background: var(--secondary-accent-color) !important;
}
.MuiListItemButton-root.Mui-selected .MuiListItemIcon-root,
.MuiListItemButton-root.Mui-selected {
color: var(--primary-accent-color) !important;
}
.MuiPaper-root.MuiDrawer-paperAnchorDockedLeft {
border-right: none !important;
background: var(--secondary-background-color) !important;
width: 250px !important;
}
.MuiListItemIcon-root.MuiSvgIcon-fontSizeMedium {
color: inherit !important;
}
.MuiPaper-root.MuiPopover-paper {
background: #252525 !important;
color: #D1D1D1 !important;
border-radius: var(--rounded-cards) !important;
}
.listItemIcon:not(.listItemIcon-transparent):not(.notification_important) {
background: var(--secondary-accent-color) !important;
color: var(--primary-accent-color) !important;
}
.MuiList-root:not(.MuiList-subheader) .MuiListItemButton-root.MuiListItemButton-gutters {
padding: 20px 38px 10px 38px !important;
}
.MuiCollapse-root.MuiCollapse-vertical .MuiListItemButton-root.MuiListItemButton-gutters {
width: 85% !important;
margin-inline: auto !important;
padding: 8px 16px !important;
}
/ Dynamic colors for "Active Devices" section to respect theme /
.defaultCardBackground1 {
background-color: var(--primary-alt1) !important;
}
.defaultCardBackground2 {
background-color: var(--primary-alt2) !important;
}
.defaultCardBackground3 {
background-color: var(--primary-alt3) !important;
}
.defaultCardBackground4 {
background-color: var(--primary-alt4) !important;
}
.defaultCardBackground5 {
background-color: var(--primary-alt5) !important;
}
/ Metadata editor fixes /
.layout-desktop .editPageSidebar {
width: 25vw !important;
}
.layout-desktop .editPageInnerContent {
width: 74vw !important;
}
.jstree-default-large .jstree-node {
line-height: 35px !important;
}
.jstree-default .jstree-wholerow-clicked {
background: var(--secondary-accent-color) !important;
}
.jstree-wholerow-hovered {
background: var(--primary-background-transparent) !important;
}
.jstree-children {
margin-left: -10px !important;
}
editItemMetadataPage .btnHeaderSave {
}
/ Live TV /
/ Modified background color of active guide cells /
.programCell-active {
background: var(--secondary-background-color) !important;
}
/ Repositioned record button /
.recordingFields {
margin: 5px 0 -7px 0 !important;
}
.recordingButton {
height: 40px !important;
}
.recordingIcon {
color: red !important;
}
/ Remove overlapping text /
.itemMiscInfo.itemMiscInfo-secondary {
margin-left: 65px !important;
}
/ Music Player /
.layout-desktop .appfooter {
margin-left: 250px !important;
}
.layout-desktop .appfooter .nowPlayingBarInfoContainer {
margin-left: 10px !important;
}
.layout-desktop .volumeOsd {
border-radius: var(--rounded-cards) !important;
background: var(--secondary-background-transparent) !important;
}
.layout-desktop .nameContainer .musicParentName {
margin-top: 18px !important;
margin-right: 22px !important;
}
.layout-desktop .appfooter .nowPlayingBar {
margin-top: 20px !important;
}
.layout-desktop .appfooter .nowPlayingBar .nowPlayingBarPositionContainer {
top: -15px !important;
}
/ Fix for scaling issues /
@media (width: 1600px) {
.layout-desktop .headerRight {
margin-bottom: 0 !important;
}
.layout-desktop .emby-button-foreground {
top: -4px !important;
}
}
@media (max-width: 1599px) {
.layout-desktop .pageTitleWithLogo {
margin-left: 25px !important;
}
.layout-desktop .headerTabs {
margin-top: -65px !important;
}
.layout-desktop .headerRight {
margin-right: 15px !important;
}
.layout-desktop .sectionTabs {
width: auto !important;
align-self: center !important;
}
.layout-desktop .emby-button-foreground {
top: -2px !important;
}
}
/ Fixes for TV Layout /
.layout-tv .sectionTabs {
width: auto !important;
}
.layout-tv .headerLeft {
padding: 5px !important;
}
/ Login page /
.layout-desktop #loginPage {
display: flex;
justify-content: center;
align-items: center;
}
.layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
background: var(--secondary-background-color) !important;
width: 400px !important;
border-radius: 25px !important;
padding: 50px !important;
}
.layout-desktop #loginPage .manualLoginForm .btnCancel {
position: absolute !important;
background: none !important;
width: 100px !important;
margin-left: -10px !important;
margin-top: 70px !important;
text-align: left !important;
}
.layout-desktop #loginPage .visualLoginForm {
position: relative !important;
background: var(--secondary-background-color) !important;
z-index: 1000 !important;
}
.layout-desktop #loginPage .btnForgotPassword {
background: none !important;
font-weight: normal !important;
width: 150px !important;
text-align: right !important;
position: absolute !important;
margin-left: 255px !important;
margin-top: -195px !important;
font-size: smaller !important;
color: rgba(255, 255, 255, 0.5) !important;
z-index: 1 !important;
}
.layout-desktop #loginPage .loginDisclaimerContainer {
top: 130px !important;
position: relative !important;
left: -50px !important;
width: 500px !important;
margin-top: -35px !important;
}
.layout-desktop #loginPage .squareCard {
width: 25% !important;
font-size: smaller !important;
}
@media (max-width: 100em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
.layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
width: 600px !important;
}
.layout-desktop #loginPage .btnForgotPassword {
margin-left: 450px !important;
}
.layout-desktop #loginPage .disclaimerContainer {
width: 700px !important;
}
}
@media (max-width: 87.5em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
}
@media (max-width: 75em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
}
@media (max-width: 43.75em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
}
/ Dialog box /
.dialog {
background-color: var(--secondary-background-color) !important;
backdrop-filter: blur(var(--blur)) !important;
}
.actionSheetTitle {
margin: 10px 20px !important;
}
/ Dynamic backdrop support /
/ Translucent cards /
.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailsGroupItem,
.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailSectionContent,
.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .trackSelections {
background: var(--primary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important;
}
/ Transparent drawer /
.layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
background: linear-gradient(to right, #10101090, transparent) !important;
}
.layout-desktop:has(#itemDetailPage.noBackdropTransparency) .mainDrawer {
background: var(--secondary-background-color) !important;
}
/ Fix for JMP /
@supports not selector(:has(*)) {
.layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
background: transparent !important;
}
.layout-desktop #itemDetailPage.noBackdropTransparency::after {
position: fixed;
content: "";
top: 0;
left: 0;
height: 100%;
width: 250px;
background: var(--secondary-background-color);
}
}
/ Blur buttons /
.layout-desktop:has(.backgroundContainer.withBackdrop) .navMenuOption-selected {
backdrop-filter: blur(var(--blur)) !important;
}
.layout-desktop:has(.backgroundContainer.withBackdrop) .navMenuOption:hover:not(.navMenuOption-selected) {
background: var(--primary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important;
}
/ Color Selection White /
:root {
--primary-r: 232;
--primary-g: 236;
--primary-b: 239;
--primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
--secondary-accent-color: rgba(232, 236, 239, 0.2);
}
.layout-desktop .button-submit,
.layout-desktop .checkboxIcon,
.layout-desktop .countIndicator {
color: var(--secondary-background-color) !important;
}
skipIntro .emby-button:hover {
}
/*********
LAYOUT DESKTOP
*********/
/ header section /
.layout-desktop .skinHeader.semiTransparent {
background-color: rgba(0, 0, 0, 0.0);
}
.layout-desktop .skinHeader-withBackground {
background-color: transparent;
}
/ removemos info innecesaria /
.layout-desktop .detailImageContainer .card,
.layout-desktop .itemTags,
.layout-desktop .itemExternalLinks,
.layout-desktop .itemName.originalTitle,
.layout-desktop .btnShuffle {
display: none;
}
/ reposicionando elementos /
.layout-desktop .detailLogo {
/left: 5vw;
background-position: bottom left;
top: 38vh;/
background-position: left bottom;
background-repeat: no-repeat;
background-size: contain;
height: 16vh;
position: absolute;
left: 5vw;
top: 40vh;
width: 35vw;
}
.layout-desktop .itemBackdrop {
height: 100vh;
}
.layout-desktop .detailRibbon {
background: none;
}
.layout-desktop .detailPagePrimaryContainer,
.layout-desktop .detailPageContent {
padding-left: var(--margin-page);
}
.detailPageSecondaryContainer {
margin-top: 0;
padding-top: 0;
}
.backgroundContainer.withBackdrop {
/background-color: rgba(0, 0, 0, 0.5);/
background: linear-gradient(45deg, black, transparent);
}
.withSectionTabs .backgroundContainer.withBackdrop {
background-color: black!important;
}
.layout-desktop .detailPageWrapperContainer {
background: linear-gradient(0deg, black, transparent);
}
.layout-desktop .detailPagePrimaryContent {
width: 60%;
}
.layout-desktop .detailButton {
/border: 2px solid #cecece;/
border-radius: 2em;
font-weight: bold;
/width: 7vw;/
background-color: rgba(255, 255, 255, 0.20);
padding: 1em 2em!important;
margin-right: 1%!important;
color: rgb(255, 255, 255);
}
.layout-desktop .detailButton:hover {
background-color: #ffffff;
color: #181818;
}
.layout-desktop .detailButton {
flex-direction: row;
}
.layout-desktop .mainDetailButtons {
width: 100%;
}
.layout-desktop .detailRibbon {
height: unset!important;
margin-top: -42vh;
}
.layout-desktop .detailPagePrimaryContainer {
/-webkit-align-content: center;/
align-content: flex-start;
/-webkit-align-items: center;/
/display: -webkit-flex;/
display: flex;
z-index: 2;
flex-direction: column;
justify-content: flex-start;
flex-wrap: wrap;
align-items: flex-start;
padding-left: 5vw!important;
padding-right: 5vw!important;
}
.layout-desktop .detailPageContent {
padding-left: 5vw!important;
padding-right: 5vw!important;
}
.noBackdropTransparency .detailPageSecondaryContainer {
background: none;
}
.layout-desktop h3.itemName {
font-size: 2em;
font-weight: normal;
}
.layout-desktop .itemMiscInfo, .nameContainer {
margin-bottom: 0.5em;
}
.layout-desktop .tagline,
.layout-desktop #seriesAirTime {
display: none;
}
.layout-desktop .detail-clamp-text {
-webkit-line-clamp: 3;
}
/ Temporadas section /
.layout-desktop .vertical-list {
flex-direction: row;
flex-wrap: wrap;
}
.layout-desktop .listItem-withContentWrapper {
align-items: flex-start;
flex-direction: column;
width: 32%;
}
.layout-desktop .listItem-content {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
}
.layout-desktop .listItemImage-large {
height: 16vw;
width: 100%;
}
.layout-desktop .listItem-withContentWrapper:hover {
background-color: rgba(255, 255, 255, 0.10);
}
/*********
LAYOUT general
*********/
/ cast & crew circular /
castContent .cardImageContainer.coveredImage.cardContent.itemAction.lazy.non-blurhashable,
castContent .cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.itemAction {
border-radius: 50%;
}
castContent .cardPadder.cardPadder-overflowPortrait,
castContent .cardPadder-mixedPortrait,
castContent .cardPadder-overflowPortrait,
castContent .cardPadder-portrait,
castContent .overflowPortraitCard-textCardPadder {
border-radius: 50%;
padding-bottom: 100%;
}
castContent .cardOverlayContainer {
border-radius: 50%;
}
castContent .cardOverlayButton-br {
bottom: 0;
position: absolute;
left: 38%;
}
/*************/
/ mobile layout /
/*************/
.layout-mobile .btnPlayTrailer,
.layout-mobile .btnShuffle {
display: none;
}
.layout-mobile .detailPageSecondaryContainer {
padding-top: 0;
}
.layout-mobile .detailImageContainer .card,
.layout-mobile .detailImageContainer .card.backdropCard,
.layout-mobile .detailImageContainer .card.squareCard {
display: none;
}
/ Mostrando Logo y posicionandolo /
.layout-mobile .detailLogo {
display: block;
width: 15em;
left: 5%;
top: 25vh;
background-position: left bottom;
}
/ 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!important;
margin-top: 2em;
}
.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;
}
/ Titulo Original y removiendo el titulo actual /
.layout-mobile .itemName.parentNameLast.withOriginalTitle {
margin: 0.6em 0;
}
/ moviendo a la Izq Contenedor de botones de pelicula/
.layout-mobile .mainDetailButtons {
margin-top: 2em;
padding-left: 0;
justify-content: space-evenly;
flex-wrap: wrap;
}
.layout-mobile .detailPagePrimaryContainer {
padding: .5rem 5% !important;
}
.layout-mobile .itemTags,
.layout-mobile .itemExternalLinks,
.layout-mobile .trackSelections,
.layout-mobile .itemName.originalTitle,
.layout-mobile .directorsGroup,
.layout-mobile .writersGroup,
.layout-mobile .studiosGroup,
.layout-mobile #seriesAirTime,
.layout-mobile .itemName.parentNameLast,
.layout-mobile .itemName.parentNameLast.withOriginalTitle,
.layout-mobile .itemName.originalTitle,
.layout-mobile .tagline,
.layout-mobile .itemTags {
display: none;
}
.layout-mobile .itemBackdrop::before {
content: '';
right: 0;
left: 0;
bottom: 0;
height: 25vh;
position: absolute;
/background: linear-gradient(0deg, #181818 15%, #18181800 65%);/
background: linear-gradient(0deg, #101010 10%, #10101000 65%);
}
.layout-mobile .itemMiscInfo,
.layout-mobile .nameContainer {
margin-bottom: 1em;
}
.layout-mobile .btnPlay {
border-radius: 2em;
width: 100%;
background-color: white;
color: black;
padding: 0.6em!important;
margin-bottom: 1em!important;
}
.layout-mobile .btnPlay::after {
content : attr(title);
margin: 0 10px 0 2px;
color: black;
}
.layout-mobile .btnPlay.detailButton {
flex-direction: row;
}
.layout-mobile .btnShuffle::after {
content : attr(title);
color: white;
font-weight: normal;
}
.layout-mobile .btnPlaystate::after {
content : 'Visto';
color: white;
font-weight: normal;
}
.layout-mobile .btnUserRating::after {
content : 'Favoritos';
color: white;
font-weight: normal;
}
.layout-mobile .btnMoreCommands::after {
content : attr(title);
color: white;
font-weight: normal;
}
.layout-mobile .btnPlayTrailer::after {
content : attr(title);
color: white;
font-weight: normal;
}
.layout-mobile .btnReplay::after {
content : attr(title);
color: white;
font-weight: normal;
}
.layout-mobile .btnShuffle .detailButton-icon,
.layout-mobile .btnReplay .detailButton-icon,
.layout-mobile .btnPlayTrailer .detailButton-icon,
.layout-mobile .btnMoreCommands .detailButton-icon,
.layout-mobile .btnUserRating .detailButton-icon,
.layout-mobile .btnPlaystate .detailButton-icon {
background-color: #ffffff21;
border-radius: 50%;
padding: .25em;
margin-bottom: .3em;
}
/ Seccion Episodios /
.layout-mobile .listViewUserDataButtons {
display: none;
}
.layout-mobile .listItem-content {
display: block;
}
.layout-mobile .listItem-content .listItemBody {
padding: 0.85em 0;
}
.layout-mobile .listItem-content .listItemImage-large {
height: 45vw;
width: 86vw;
}
.layout-mobile .listItem-content .listItemImage-large .listItemImageButton, .listItemIndicators {
font-size: 1em!important;
}
.layout-mobile .listItem-bottomoverview {
font-size: 100%;
}