Bug: A few more problems #51
Labels
bug
Something isn't working
Comments
|
The cards are clickable on mobile you just have to click on title, the green tint appears as to indicate the episode it watched, I won't be able to bring the episode info and the episode title in the same row as the title may vary in size and also the size of the episode card depends on the episode description so I can't change that. I will fix the text color issue ASAP |
|
Green looks so weird, why not add a button? On computers and tablets, overly long plot descriptions are folded, which I think is fine. The title area is relatively narrow, it is better to click on the entire block comfortably. On the tablet, the entire block can be clicked, why not on the mobile phone? |
|
I did add a button before but it didn't work properly, the title for many episodes I have are large and actually don't properly work with divided space, the reason for as to why the title is the only clickable block on mobile is cause of the layout constraint on mobile ( I might fix it in future maybe in JF 10.8) |
|
Anyway, please remove the green, it's so ugly that even a watched tag is better than green. |
|
I wanted to ask should I grey out the background of played episode or add the a translucent accent gradient overlay to the black and white BG or something else? |
|
I think it would be nice to have a little watched tab with a colour gradient next to the title. |
|
I will try implementing it but I don't think it is possible |
|
Information on the phone sometimes overlaps. Is it possible to make the music player translucent, like emby? In addition, there is a large amount of space at the bottom of the music player on the phone that is wasted, and the controls are too tight. Why not move the controls down a bit and leave some space between each row, I think it will look more beautiful. The music controls on the desktop can also be scaled down a little and spread out a bit.
|
|
There is a meaningless space on the top of the guide of live TV. The logo on the channel is not fully displayed and the black logo cannot be seen clearly. Can you add some background colors to the channel like the original jellyfin? |
prayag17
added a commit
that referenced
this issue
Jan 19, 2022
|
I don't see jellyfin changing color for the dark channel logo, I have fixed all of the issues here, can you confirm? |
|
I used 11.3.6 and the following problems still seem to exist. About the black channel logo, I think it's because the background of the channel box is not completely black in the default skin, and your skin looks too black, so I can't see it clearly. Why isn't it as transparent as the program? Can't the background of the music player become transparent? |
|
The 11.3.6 release doesn't include the fix just copy and paste the contents of https://raw.githubusercontent.com/prayag17/JellySkin/master/default.css |
|
Because I'm in China, I can't connect to raw.githubusercontent.com, so can you use cdn.jsdelivr.net? |
|
I solved it myself. The problem in the first picture above still appears on the tablet, the second picture still appears on the mobile phone, and three and four have indeed been solved. However, after the music player is fully transparent, it is mixed with the background. I hope it to become blurred translucent. |
|
It seems that you simply delete artists and duration from your mobile phone and tablet, which is not a good idea. There is also the following problem. The album cover is too high and overlaps with the top. |
|
And why did the program become like this? |
prayag17
added a commit
that referenced
this issue
Jan 20, 2022
|
The Episode cards on the tablet are like that cause of the title many of the titles are very long and then it just messes the UI, I don't think much of the space is wasted though and also if I wanted to change the layout for it I wouldn't be able to do so with just CSS All of the above mentioned issues should be fixed can you confirm? CSS: /*Fonts */
@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons@latest/Font%20Awesome/light.css");
@import url("./src/Raleway.css");
@import url("./src/Montserrat.css");
html,
body,
h1,
h2,
h3,
h4 {
font-family: "Montserrat", "Raleway", sans-serif;
}
::-moz-selection {
background: #aa5cc3;
text-shadow: none;
}
::selection {
background: #aa5cc3;
text-shadow: none;
}
/*Mini My media*/
#indexPage .raised.emby-button:hover {
background: rgb(0, 0, 0, 0.75) !important;
box-shadow: 0px 5px 9px 0px black;
}
.section0 .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX {
flex-flow: wrap;
align-content: flex-start;
flex: 1 1 80px !important;
}
.section0 .emby-scrollbuttons {
display: none;
}
#indexPage .raised.emby-button {
background: rgb(0, 0, 0, 0.25) !important;
box-shadow: 0px 0px 9px 0px black;
transition: background 0.15s ease-out, box-shadow 0.15s ease-out;
border-radius: var(--rounding);
}
.raised {
border-radius: 50vh;
overflow: hidden;
}
.backgroundContainer,
.dialog,
.nowPlayingPlaylist,
.nowPlayingContextMenu,
.mainDrawer,
.drawer-open,
html {
background: rgb(0 60 80 / 10%);
}
.withTabs .content-primary,
.content-primary {
padding-top: 0 !important;
}
.layout-tv body {
overflow-y: scroll !important;
}
.layout-tv div[data-role="page"] {
margin: 0;
overflow: auto;
}
/*Subtitle Fonts thanks the u/Edgementality-https://bit.ly/33slrSa*/
/*Firefox*/
.videoSubtitles {
font-family: "Raleway", sans-serif !important;
font-weight: 700 !important;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 1) !important;
}
/*Chrome, Edge Chromium & Saffari*/
video::-webkit-media-text-track-display {
font-family: "Raleway", sans-serif !important;
font-weight: 700 !important;
text-shadow: 0em 0em 0.2em rgba(0, 0, 0, 1) !important;
}
/*backup for subtitles*/
video::-webkit-media-text-track-container {
font-family: "Raleway", sans-serif !important;
font-weight: 700 !important;
text-shadow: 0em 0em 0.2em rgba(0, 0, 0, 1) !important;
}
video:cue {
font-family: "Raleway" !important;
font-weight: 700 !important;
text-shadow: 0em 0em 0.2em rgba(0, 0, 0, 1) !important;
}
/*Setting border Radius*/
:root {
--rounding: 10px;
--card-rounding: 10px 10px 0px 0px;
--accent: linear-gradient(140deg, #aa5cc3, #00a4dc);
--accent-selected: linear-gradient(140deg, #00a4dc, #aa5cc3);
--accent-text: linear-gradient(#00a4dc 0%, #aa5cc3 60%);
--accent-icon: linear-gradient(140deg, #aa5cc3 20%, #00a4dc);
}
/*Image streching fix*/
img {
-o-object-fit: cover;
object-fit: cover;
}
/*Rounded corners on pretty much everything-Source Monochromic*/
.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(---card-rounding) !important;
}
.nowPlayingPageImage,
.toast,
.fab,
.multiSelectCheckboxOutline,
.itemSelectionPanel,
.cardContent-button,
.cardContent-shadow,
.itemDetailImage,
.cardOverlayButton-hover,
.listItemImageButton,
.listItemButton,
.headerButton,
.paper-icon-button-light,
.dialog,
.button-flat,
.visualCardBox,
.chapterThumbContainer,
.cardOverlayButtonIcon,
.subtitleappearance-preview.flex.align-items-center.justify-content-center {
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);
}
.detailImageContainer .cardBox {
overflow: hidden;
border-right: var(--rounding);
}
.emby-select,
.emby-select-withcolor {
border-radius: 5px;
}
.cardContent-button,
.cardContent-shadow,
.itemDetailImage,
.cardOverlayButton-hover,
.cardImageContainer,
.listItemImageButton,
.listItemButton,
.headerButton,
.paper-icon-button-light,
.cardOverlayButton,
.dialog,
a.listItem-border {
border-radius: var(--rounding);
}
.cardScalable,
.cardImage,
.visualCardBox .cardContent,
.sessionNowPlayingInnerContent,
.cardImageContainer,
.blurhash-canvas,
.cardPadder {
border-radius: var(--card-rounding);
}
.checkboxOutline {
border-radius: 5px !important;
}
.paperList {
border-radius: 20px !important;
overflow: hidden;
border: 0.01em solid #191819;
}
/*fixing Poster Margin*/
.itemsContainer > .card > .cardBox {
margin-left: 16px;
margin-right: 16px;
margin-top: 16px;
}
.cardBox-bottompadded {
margin-bottom: 16px !important;
}
.collectionItemsContainer .card.portraitCard {
width: 13rem;
}
.sectionTitleContainer.flex {
box-shadow: 0 0 black !important;
}
.section2 a.raised.homeLibraryButton.emby-button {
background: rgba(0, 0, 0, 0.4) !important;
}
fieldset {
border: 1px dotted rgb(87 87 87);
border-radius: var(--rounding);
}
/*Hover items*/
.emby-input,
.emby-textarea {
color: inherit;
border: 0.07em solid #7b7b7b;
border-radius: 5px;
box-shadow: 0 0 8px 0px black !important;
background: rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(60px);
-webkit-backdrop-filter: blur(60px);
text-shadow: 0 0 5px black;
}
.emby-select-withcolor {
border: 0.07em solid #7b7b7b;
}
.cardIndicators {
right: 0;
top: 0;
}
.indicator {
background: var(--accent) !important;
border-radius: 0px 0px 0px 5px;
padding: 0.1em;
box-shadow: 0 0 10px 1px black;
color: white;
}
.indicators {
right: 0;
top: 0;
}
.actionSheetMenuItem:hover {
background: linear-gradient(140deg, #aa5cc385, #00a4dc75) !important;
}
.cardBox {
background: rgba(0, 0, 0, 0.25);
border-radius: 10px;
box-shadow: 0px 0px 9px 0px rgb(0 0 0);
transition: background 0.15s ease-out, box-shadow 0.15s ease-out;
}
.card:hover .cardBox,
.card:focus .cardBox {
background: rgba(0, 0, 0, 0.75);
box-shadow: 0 5px 9px black;
}
.cardScalable {
overflow: hidden;
}
.layout-mobile .card:hover .cardBox {
background: rgba(0, 0, 0, 0.25) !important;
}
.layout-mobile .cardImageContainer {
background-size: cover;
}
.layout-mobile .card:hover .cardImageContainer {
background-size: cover;
}
.overflowSquareCard .cardImageContainer {
background-size: 180%;
}
.overflowSquareCard:hover .cardImageContainer {
background-size: 200%;
}
.overflowSquareCard .cardImageContainer::before {
content: "";
background: inherit;
width: 130%;
height: 130%;
position: absolute;
top: 50%;
left: 50%;
background-size: cover;
-webkit-filter: brightness(40%) blur(10px);
filter: brightness(40%) blur(10px);
z-index: 0;
transform: translate(-50%, -50%);
}
.overflowSquareCard .cardImageContainer::after {
content: "";
background: inherit;
z-index: 0;
position: absolute;
width: 100%;
height: 100%;
background-size: 100%;
transition: all 0.15s;
}
.overflowSquareCard:hover .cardImageContainer::after {
background-size: 120%;
}
:not(.detailImageContainer)
> .card:not(.overflowSquareCard)
.cardImageContainer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
background-size: cover;
transition: 0.15s;
}
.card:not(.overflowSquareCard):hover .cardImageContainer::before {
transform: scale(1.2);
}
.dialog .cardImageContainer::before,
.liveTvPage .cardImageContainer::before {
display: none;
}
.layout-mobile
.card:not(.overflowSquareCard):hover
.cardImageContainer::before {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
.progressring-bg {
border: 0.25em solid transparent;
background: transparent;
}
.itemName.parentNameLast {
font-size: 35px;
}
#itemDetailPage .button-flat:hover {
transform: scale(1.5);
}
.button-flat {
border-radius: 5px !important;
}
.detailButton-content {
-webkit-filter: drop-shadow(0px 3px 3px black);
filter: drop-shadow(0px 3px 3px black);
}
.navMenuOption {
background: transparent !important;
flex-grow: 0 !important;
}
.navMenuOption::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: var(--accent);
z-index: -1;
left: 0;
opacity: 0%;
transition: opacity 0.2s;
}
.navMenuOption:hover::before {
opacity: 100%;
}
.navMenuOption .navMenuOptionIcon {
transition: margin-right 0.2s;
width: 1.2em;
}
.navMenuOption:hover .navMenuOptionIcon {
margin-right: 1.5em;
}
.listItem-border.emby-button:hover {
background: black;
}
.listItem-border.emby-button:hover .listItemIcon {
margin-right: 0.65rem;
}
.listItem-border.emby-button .listItemIcon {
transition: margin-right 0.2s;
}
.listItemIcon.material-icons {
background: var(--accent-icon);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.defaultCardBackground {
background: transparent;
}
.cardImageIcon {
background: var(--accent);
color: transparent;
-webkit-background-clip: text !important;
background-clip: text !important;
}
.navMenuOption-selected {
background: var(--accent-selected) !important;
}
span.material-icons.detailButton-icon.check.playstatebutton-icon-played,
span.material-icons.detailButton-icon.favorite.ratingbutton-icon-withrating {
background: var(--accent-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.raised::before {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
background: var(--accent);
border-radius: 5px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.raised:hover::before {
opacity: 100%;
}
.dashboardSection .defaultCardBackground {
color: white;
}
#indexPage .raised::before {
background: transparent;
}
/*fancy link*/
.button-link::after {
content: "";
width: 100%;
height: 1px;
background: #00a4dc;
position: absolute;
bottom: 0;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.2s ease;
}
.button-link:hover {
text-decoration: none;
}
.button-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
#itemDetailPage .button-link::after {
background: white;
height: 2px;
}
/*fancy link end*/
.listItem.listItem-border:hover {
border-color: rgba(0, 0, 0, 0) !important;
background: #3f3f3f;
}
.listItem-border {
transition: border-color 0.2s, background 0.2s;
}
div#divRunningTasks:hover {
transform: scale(1.1);
}
div#divRunningTasks {
transition: transform 0.2s, background 0.2s;
}
.navMenuOption-selected {
background: var(--accent-selected) !important;
}
.detailPageContent {
text-shadow: 0 0 5px black;
}
select {
box-shadow: 0 0 6px 0px black !important;
background: rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(50px) !important;
-webkit-backdrop-filter: blur(50px);
text-shadow: 0 0 5px black !important;
}
/*Header*/
.skinHeader-withBackground {
text-shadow: 0 0 5px black;
background-color: transparent !important;
}
.emby-button-foreground::after {
content: "";
height: 2px;
width: 0%;
background: rgb(0, 164, 220);
position: absolute;
bottom: -35%;
left: 50%;
transform: translateX(-50%);
transition: width 0.15s ease-in-out;
}
.emby-tab-button:hover .emby-button-foreground::after {
width: 75%;
}
body.force-scroll {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
overflow: hidden;
}
.skinHeader {
position: static;
width: 100%;
align-self: flex-start;
}
.mainAnimatedPages {
height: 100vh;
position: relative !important;
overflow: hidden;
}
.libraryPage:not(.noSecondaryNavPage) {
padding: 0 !important;
}
div#itemDetailPage {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
@media (min-width: 40em) {
.dashboardDocument .skinBody {
left: 20em;
width: calc(100vw - 20em);
}
}
div[data-role="page"] {
margin: 0 !important;
padding: 0 !important;
position: static;
width: 100%;
height: 100%;
overflow-y: scroll;
-webkit-mask: linear-gradient(
to bottom,
transparent,
black 15px calc(100% - 15px),
transparent
);
mask: linear-gradient(
to bottom,
transparent,
black 15px calc(100% - 15px),
transparent
);
}
div[data-role="page"] > * {
padding-top: 16px;
}
.layout-tv .mainAnimatedPages {
overflow: visible;
mask: none;
-webkit-mask: none;
}
div#videoOsdPage {
overflow: hidden !important;
margin-top: 0 !important;
-webkit-mask: none !important;
mask: none !important;
}
div[data-role="page"]:not(.withTabs) {
margin-top: 0 !important;
}
div#itemBackdrop {
display: none;
}
.layout-desktop .detailRibbon {
margin-top: 0 !important;
}
.layout-mobile #itemDetailPage {
position: fixed;
-webkit-mask: none;
mask: none;
margin-top: 4em !important;
height: calc(100vh - 4em);
}
.layout-mobile .detailPageWrapperContainer {
height: 100%;
overflow: scroll;
position: relative;
background: #ddd;
color: #383838;
width: 90%;
border-radius: 10px;
font-size: 110%;
margin: 20px auto;
text-shadow: none !important;
}
.layout-mobile .detailPageWrapperContainer::after {
content: "";
position: fixed;
width: 90%;
background: linear-gradient(
0deg,
#ddd,
transparent 15px calc(100% - 15px),
#ddd
);
left: 50%;
transform: translatex(-50%);
z-index: 200;
height: calc(100% - 4em - 34px);
bottom: 20px;
border-radius: var(--rounding);
-webkit-transform: translatex(-50%);
-moz-transform: translatex(-50%);
-ms-transform: translatex(-50%);
-o-transform: translatex(-50%);
pointer-events: none;
}
.layout-mobile
.detailPagePrimaryContainer.padded-left.padded-right.detailRibbon {
text-shadow: none !important;
}
.layout-mobile .detailPageContent {
text-shadow: none !important;
}
.layout-mobile
#itemDetailPage
.childrenSectionHeader.sectionTitle.sectionTitle-cards {
text-shadow: none !important;
}
/*Subtitle preview*/
.subtitleappearance-preview {
background: var(--accent) !important;
}
/*Video Player*/
div#videoOsdPage {
overflow: hidden !important;
margin-top: 0 !important;
}
.layout-desktop .osdControls {
width: 100%;
max-width: 100%;
}
.sliderBubble {
border-radius: var(--rounding);
background: rgba(0, 0, 0, 0.4);
font-weight: 400 !important;
}
h1.sliderBubbleText {
background: var(--accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
}
/* Music Player */
.appfooter,
.playlistSectionButton {
background: transparent !important;
-webkit-backdrop-filter: blur(50px);
backdrop-filter: blur(50px);
}
/*cardbox border-radius change*/
#indexPage
button.cardImageContainer.cardContent.itemAction.lazy.blurhashed.lazy-image-fadein-fast,
.emby-scroller button.cardImageContainer.coveredImage.cardContent,
.childrenItemsContainer button.cardImageContainer.coveredImage.cardContent,
.nextUpItems
button.cardImageContainer.cardContent.itemAction.lazy.blurhashed.lazy-image-fadein-fast,
.vertical-wrap button.cardImageContainer.coveredImage.cardContent,
.emby-scroller button.cardImageContainer {
border-radius: 10px 10px 0px 0px !important;
}
.justify-content-center.flex-wrap-wrap.padded-top.padded-left.padded-right.padded-bottom {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: 0 0 black;
}
.detailPagePrimaryContainer.padded-left.padded-right.detailRibbon,
button.button-flat.btnResume.detailButton.emby-button,
button.emby-tab-button.emby-button,
h2 {
text-shadow: 0 0 5px black;
}
.tmla-mask {
background-color: rgba(0, 0, 0, 0);
}
.dialogBackdropOpened {
opacity: 1 !important;
}
.dialogBackdrop {
background-color: #0000;
}
.raised {
background: #00a4dc;
}
.cardBox:not(.visualCardBox) .cardPadder,
.cardContent-shadow {
background: transparent;
box-shadow: 0 0 rgba(0, 0, 0, 0) !important;
}
.card-hoverable:hover .cardOverlayContainer {
border-radius: 10px 10px 0px 0px !important;
-webkit-border-radius: 10px 10px 0px 0px !important;
-moz-border-radius: 10px 10px 0px 0px !important;
-ms-border-radius: 10px 10px 0px 0px !important;
-o-border-radius: 10px 10px 0px 0px !important;
}
.layout-mobile .overflowPortraitCard,
.layout-mobile .overflowSquareCard {
width: 200px !important;
}
/* Adjust both "size-adjust" and "size" to modify size */
.pageTitle {
margin-top: auto;
margin-bottom: auto;
}
.emby-tab-button {
padding: 1.75em 1.7em;
}
/*Blur backdrops, feel free to edit the intensity of the filter values*/
.backdropImage {
-webkit-filter: blur(10px) saturate(110%) contrast(110%) brightness(95%);
filter: blur(10px) saturate(110%) contrast(110%) brightness(95%);
}
.backgroundContainer.withBackdrop {
background: rgba(24, 24, 24, 0.5);
box-shadow: inset 0 0 100px 100px rgb(4 4 4 / 85%);
}
.layout-desktop .itemBackdrop:after,
.layout-tv .itemBackdrop:after {
background: transparent;
}
.dialog {
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(60px) !important;
-webkit-backdrop-filter: blur(60px) !important;
-moz-backdrop-filterss: blur (60px) !important;
-o-backdrop-filter: blur(60px) !important;
box-shadow: 0 0 0 500vw rgb(0, 0, 0, 0.5), 0 0 20px 4px black;
}
/* Top menu transparency */
.upNextDialog {
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
box-shadow: 0 0 8px 5px black;
}
.upNextDialog-poster-img {
border-radius: 10px;
}
.cardOverlayContainer {
background-color: rgba(0, 0, 0, 0.8);
}
/*Theme some dialogues*/
.mainDrawer.drawer-open {
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 1000vh rgb(0 0 0 / 45%), 0 0 20px 0px black;
}
.mainDrawer {
background-color: rgba(0, 0, 0, 0.1);
box-shadow: none;
transition: all 0.2s !important;
-webkit-backdrop-filter: blur(60px);
-moz-backdrop-filter: blur(60px);
-o-backdrop-filter: blur(60px);
backdrop-filter: blur(60px);
-webkit-transition: all 0.2s !important;
-moz-transition: all 0.2s !important;
-ms-transition: all 0.2s !important;
-o-transition: all 0.2s !important;
}
.layout-mobile
.mainDrawer-scrollContainer.scrollContainer.focuscontainer-y.scrollY {
overflow: hidden;
}
.layout-mobile .adminDrawerLogo {
border-bottom: 0;
border-radius: 0 !important;
padding: 1.5em 1em 1.2em;
margin: 0;
}
.layout-mobile .drawerContent {
padding-bottom: 4em;
overflow: scroll;
height: 100%;
-webkit-mask: linear-gradient(
to bottom,
transparent,
black 15px calc(100% - 15px),
transparent
);
mask: linear-gradient(
to bottom,
transparent,
black 15px calc(100% - 15px),
transparent
);
}
.layout-mobile
.drawer-open
.mainDrawer-scrollContainer.scrollContainer.focuscontainer-y.scrollY {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
margin: 0 !important;
padding: 0 !important;
overflow: scroll;
}
/*Fixing position of tv or movie poster*/
.detailImageContainer .card {
position: fixed;
top: 50% !important;
}
/*Tweak series/movie/album title screen*/
.detailPagePrimaryContainer {
background: rgba(0, 0, 0, 0) !important;
}
.mediaInfoOfficialRating {
border-radius: 100vh;
}
.detailImageContainer .cardScalable .cardImageContainer {
background-size: cover !important;
}
.card[data-type="Actor"] .cardBox {
background: none;
position: relative;
}
.card[data-type="Actor"] .cardScalable {
height: 0;
overflow: hidden;
padding-top: 100%;
border-radius: var(--rounding);
}
.card[data-type="Actor"] .cardText {
position: absolute;
background: transparent !important;
}
.card[data-type="Actor"] .cardImageContainer::after {
content: "";
background: linear-gradient(360deg, rgba(0, 0, 0, 0.75), transparent 70%);
width: 100%;
bottom: 0;
position: absolute;
padding-top: 100%;
}
.card[data-type="Actor"] .cardText-secondary {
bottom: 0%;
width: -webkit-fill-available;
border-radius: 0px 0px 10px 10px;
height: 22px;
}
.card[data-type="Actor"] .cardText-first {
bottom: 23.5px;
width: -webkit-fill-available;
height: 22px;
}
.layout-mobile .card[data-type="Actor"] .cardText-first {
color: white !important;
}
.card[data-type="Actor"] .cardScalable {
overflow: hidden;
border-radius: var(--rounding);
height: 3rem;
}
.card[data-type="Actor"] .cardOverlayButton-br {
position: absolute;
bottom: 23%;
right: 0;
}
.card[data-type="Actor"] .cardPadder {
background: none;
}
.card[data-type="Actor"] .cardImageIcon {
bottom: 41%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.detailLogo {
display: none;
}
.layout-mobile .tagline {
text-align: center;
font-weight: 700;
background: var(--accent);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
border-radius: 10px;
width: -webkit-fit-content !important;
width: -moz-fit-content !important;
width: fit-content !important;
margin: 0 auto;
}
#itemDetailPage .emby-select {
box-shadow: none !important;
}
.layout-mobile #itemDetailPage .cardBox {
box-shadow: 0px 15px 10px -10px #5d5d5d, 0px 0px 13px 0px #a1a1a1;
background: rgba(0, 0, 0, 0.25) !important;
}
.layout-mobile #itemDetailPage::before {
content: "";
background: linear-gradient(140deg, #3e2247 10%, #003c50 90%);
position: fixed;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
.layout-mobile .mainDetailButtons {
width: 100%;
font-size: 100%;
}
.layout-mobile .detailButton-content {
-webkit-filter: none;
filter: none;
}
@media (min-width: 32em), (min-height: 32em) {
.itemBackdrop {
height: 23vh !important;
background-image: none !important;
}
}
.layout-mobile .mainDetailButtons {
margin-left: auto;
margin-right: auto;
}
.layout-mobile .primaryImageWrapper > img {
display: block;
margin: 0 auto;
max-width: 80vw;
max-height: 50vh;
border-radius: var(--rounding);
margin-bottom: 0.5rem;
box-shadow: 0px 2rem 3rem -1.5rem #111111, 0px 0px 20px 0px #afaeae;
}
.layout-mobile
.detailPagePrimaryContainer.padded-left.padded-right.detailRibbon,
.layout-mobile button.button-flat.btnResume.detailButton.emby-button,
.layout-mobile button.emby-tab-button.emby-button,
.layout-mobile h2 {
text-shadow: none !important;
}
.layout-mobile .detailPageContent {
text-shadow: none !important;
}
.layout-mobile select {
text-shadow: none !important;
}
.layout-mobile .button-flat:hover {
transform: none;
}
.layout-mobile .detailPagePrimaryContainer {
flex-wrap: wrap;
position: relative;
padding: 4.5em 4.5em 0.5rem;
grid-column-gap: 1em;
justify-content: space-around;
}
.layout-mobile .detailPagePrimaryContainer > * {
flex: 0 0 auto;
}
.itemProgressBar {
height: 100%;
background: rgba(0, 0, 0, 0);
}
.innerCardFooter {
height: 6px;
background: rgba(255, 255, 255, 0.6);
width: 95%;
left: 50%;
transform: translate(-50%, -5px);
border-radius: var(--rounding);
}
.itemProgressBarForeground {
background: var(--accent) !important;
}
.mainDetailButtons {
font-size: 130%;
}
.navMenuOptionIcon {
font-size: 1.75rem !important;
transition: margin 0.2s ease-in-out;
}
.paper-icon-button-light:hover {
background-color: rgba(0, 0, 0, 0);
}
@media all and (min-width: 100em) {
.cardOverlayFab-primary {
background-color: #00000000;
}
.cardOverlayButtonIcon {
background-color: #00000000 !important;
}
.cardOverlayContainer {
background-color: rgba(0, 0, 0, 0.7);
}
}
@media all and (max-width: 100em) {
.cardOverlayButtonIcon {
border-radius: 5px !important;
}
.layout-mobile .cardOverlayButtonIcon {
background-color: rgba(0, 0, 0, 0.5) !important;
}
.cardOverlayButton {
padding: 0.3em;
}
}
/*Player theme*/
.nowPlayingPageImage {
box-shadow: none !important;
border: none;
overflow: hidden;
}
.layout-mobile .remoteControlContent {
background: transparent;
padding: 0;
margin: 0;
overflow: hidden;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
position: relative;
top: 48%;
transform: translateY(-50%);
}
.layout-mobile .playlistSectionButton {
position: static !important;
}
.playlistSectionButton .volumecontrol {
width: -webkit-fit-content !important;
width: -moz-fit-content !important;
width: fit-content !important;
}
.nowPlayingSongName {
font-size: 3vh;
}
.infoContainer,
.sliderContainer {
align-items: center;
}
/*Size episode preview images in a more compact way*/
.childrenItemsContainer.itemsContainer.padded-right.vertical-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media all and (max-width: 1001px) {
.childrenItemsContainer.itemsContainer.padded-right.vertical-list {
grid-template-columns: 1fr 1fr;
}
}
.layout-mobile
.childrenItemsContainer.itemsContainer.padded-right.vertical-list {
grid-template-columns: 1fr;
}
#itemDetailPage .listItem-content {
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
overflow: hidden;
transition: background 0.15s ease-in-out;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
flex-flow: column;
-webkit-transition: background 0.15s ease-in-out;
-moz-transition: background 0.15s ease-in-out;
-ms-transition: background 0.15s ease-in-out;
-o-transition: background 0.15s ease-in-out;
}
.listItemImage.listItemImage-large {
width: 100%;
margin: 0;
}
.listItem-overview.listItemBodyText {
height: 2.5em !important;
font-size: 1em !important;
-webkit-mask: linear-gradient(to top, transparent, black 1.2em);
mask: linear-gradient(to top, transparent, black 1.2em);
}
#itemDetailPage .listItem:hover .listItem-content {
background: rgba(0, 0, 0, 0.8);
}
.listItemImageButton-icon {
padding: 0;
}
#itemDetailPage .listItem {
position: relative;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
overflow: hidden;
margin-bottom: 1.5rem;
border-radius: var(--rounding);
}
#itemDetailPage .secondary.listItem-overview.listItemBodyText {
height: 100%;
margin: 0;
}
.listItem[data-mediatype="Audio"] {
padding: 0 1em;
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
-moz-border-radius: 15px !important;
-ms-border-radius: 15px !important;
-o-border-radius: 15px !important;
}
.layout-mobile #itemDetailPage .listItemImageButton {
font-size: 0 !important;
width: 100%;
height: 100%;
background: rgba(16, 16, 16, 0.65);
z-index: -1;
}
.layout-mobile .listItemIndicators {
right: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--accent);
opacity: 0.45;
}
.layout-mobile .listItemIndicators > * {
display: none;
}
.layout-mobile .playedIndicator {
width: 100%;
height: 100%;
font-size: 1.2rem;
}
.layout-mobile .listItemIndicators .indicatorIcon.check {
position: absolute;
top: 5%;
right: 32%;
}
.layout-mobile .listItemBodyText {
max-width: 100% !important;
}
.layout-mobile .listItemBodyText.secondary {
color: #999;
}
.layout-mobile .listItem .playedIndicator {
background: transparent !important;
}
.layout-mobile .listItemImage {
height: 100% !important;
width: 100% !important;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
border-radius: 10px !important;
z-index: -1;
}
.layout-mobile .listViewUserDataButtons {
position: static;
}
.layout-mobile .listItemButton {
padding: 0 0.556em !important;
}
.layout-mobile #itemDetailPage .listItem-content {
-webkit-backdrop-filter: none;
backdrop-filter: none;
align-items: center;
flex-flow: row;
background: none !important;
position: unset;
color: white;
}
.listItemImageButton {
margin: auto;
font-size: 1.6em !important;
}
/* My Media Styling */
.section0 button.itemAction.textActionButton {
height: 3.5em;
background: rgba(0, 0, 0, 0);
border-radius: 10px;
}
.section0 .overflowBackdropCard,
.section0 .overflowSmallBackdropCard {
max-width: 90vw;
}
.section0 .emby-scroller {
margin-right: 0;
}
.emby-scroller {
-webkit-mask: linear-gradient(
to left,
transparent,
black 15px calc(100% - 15px),
transparent
);
mask: linear-gradient(
to left,
transparent,
black 15px calc(100% - 15px),
transparent
);
}
.mainDrawer-scrollContainer {
-webkit-mask: linear-gradient(
to top,
transparent,
black 15px calc(100% - 15px),
transparent
);
mask: linear-gradient(
to top,
transparent,
black 15px calc(100% - 15px),
transparent
);
}
.raised.homeLibraryButton:hover {
transition: -webkit-filter 1s;
transition: filter 1s;
transition: filter 1s, -webkit-filter 1s;
}
.raised.homeLibraryButton {
transition: -webkit-filter 1s;
transition: filter 1s;
transition: filter 1s, -webkit-filter 1s;
}
.homeLibraryButton {
min-width: 12em;
margin: 0.4em;
}
/*Login Page Theming*/
div#loginPage {
margin-top: 0 !important;
position: fixed;
background-image: url("data:image/svg+xml,%3Csvg id='frame-1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1920 1080' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' style='background-color:transparent'%3E%3Cstyle%3E%3C!%5BCDATA%5B%23frame-1-ellipse-1_to %7Banimation: frame-1-ellipse-1_to__to 100s linear infinite%7D@keyframes frame-1-ellipse-1_to__to %7B 0%25 %7Btransform: translate(363px,117px); opacity: 0%7D 5%25%7Bopacity: 1%7D 10%25 %7Btransform: translate(1641.235694px,758.610087px)%7D 20%25 %7Btransform: translate(363px,289.960233px)%7D 30%25 %7Btransform: translate(260.866149px,1004.897187px)%7D 40%25 %7Btransform: translate(1617.413191px,127.593598px)%7D 50%25 %7Btransform: translate(250.390882px,986.565469px)%7D 60%25 %7Btransform: translate(1062.224054px,596.871968px)%7D 70%25 %7Btransform: translate(831.768186px,1060.402521px)%7D 80%25 %7Btransform: translate(-160.763337px,437.12415px)%7D 90%25 %7Btransform: translate(1704.430952px,854.389903px)%7D 95%25%7Bopacity: 1%7D 100%25 %7Btransform: translate(84.487123px,28.28309px); opacity: 0%7D%7D %23frame-1-ellipse-3_to %7Banimation: frame-1-ellipse-3_to__to 100s linear infinite%7D@keyframes frame-1-ellipse-3_to__to %7B 0%25 %7Btransform: translate(209.5px,770px); opacity: 0%7D 5%25%7Bopacity: 1%7D 10%25 %7Btransform: translate(1856.735694px,302px)%7D 20%25 %7Btransform: translate(135.705626px,212.960233px)%7D 30%25 %7Btransform: translate(1793.416587px,61.068865px)%7D 40%25 %7Btransform: translate(658.420951px,673.871968px)%7D 50%25 %7Btransform: translate(1195.278371px,776.593588px)%7D 60%25 %7Btransform: translate(638.913191px,391.627536px)%7D 70%25 %7Btransform: translate(0px,386.389903px)%7D 80%25 %7Btransform: translate(563.045587px,386.389903px)%7D 90%25 %7Btransform: translate(1746.045587px,915.61458px)%7D 95%25%7Bopacity: 1%7D 100%25 %7Btransform: translate(164.825515px,227.49999px); opacity: 0%7D%7D %23frame-1-ellipse-5_to %7Banimation: frame-1-ellipse-5_to__to 100s linear infinite%7D@keyframes frame-1-ellipse-5_to__to %7B 0%25 %7Btransform: translate(960px,302.5px); opacity: 0%7D 5%25%7Bopacity: 1%7D 10%25 %7Btransform: translate(355px,302px)%7D 20%25 %7Btransform: translate(1515.13579px,197.247332px)%7D 30%25 %7Btransform: translate(169.064015px,404.63385px)%7D 40%25 %7Btransform: translate(1687.413191px,501.530067px)%7D 50%25 %7Btransform: translate(1800.022308px,205.871968px)%7D 60%25 %7Btransform: translate(111.913191px,669.402521px)%7D 70%25 %7Btransform: translate(1512.980116px,817.095053px)%7D 80%25 %7Btransform: translate(-52.098932px,620.683802px)%7D 90%25 %7Btransform: translate(896.633111px,274.99999px)%7D 95%25%7Bopacity: 1%7D 100%25 %7Btransform: translate(1600.114694px,152.78309px); opacity: 0%7D%7D %23frame-1-ellipse-4_to %7Banimation: frame-1-ellipse-4_to__to 100s linear infinite%7D@keyframes frame-1-ellipse-4_to__to %7B 0%25 %7Btransform: translate(1597.5px,466.5px); opacity: 0%7D 5%25%7Bopacity: 1%7D 10%25 %7Btransform: translate(1016.122697px,838.371969px)%7D 20%25 %7Btransform: translate(345.705626px,818px)%7D 30%25 %7Btransform: translate(1691.777401px,920.13385px)%7D 40%25 %7Btransform: translate(-162.344811px,802.2871px)%7D 50%25 %7Btransform: translate(428.913191px,624.207566px)%7D 60%25 %7Btransform: translate(1871.881183px,685.093588px)%7D 70%25 %7Btransform: translate(722.220659px,817.095053px)%7D 80%25 %7Btransform: translate(1536.045587px,232.99999px)%7D 90%25 %7Btransform: translate(864.833802px,717.04695px)%7D 95%25%7Bopacity: 1%7D 100%25 %7Btransform: translate(1664.614694px,1114.99998px); opacity: 0%7D%7D %23frame-1-ellipse-6_to %7Banimation: frame-1-ellipse-6_to__to 100s linear infinite%7D@keyframes frame-1-ellipse-6_to__to %7B 0%25 %7Btransform: translate(407.637245px,302.5px); opacity: 0%7D 5%25%7Bopacity: 1%7D 10%25 %7Btransform: translate(1154px,241.440348px)%7D 20%25 %7Btransform: translate(1216.8516px,770px)%7D 30%25 %7Btransform: translate(816px,275px)%7D 40%25 %7Btransform: translate(2159.452959px,851.13967px)%7D 50%25 %7Btransform: translate(747.910767px,217.386033px)%7D 60%25 %7Btransform: translate(300.093114px,817.095053px)%7D 70%25 %7Btransform: translate(1790.199807px,183.389903px)%7D 80%25 %7Btransform: translate(1290.901068px,563.12415px)%7D 90%25 %7Btransform: translate(1185.633111px,1055.49999px)%7D 95%25%7Bopacity: 1%7D 100%25 %7Btransform: translate(1192.087071px,790.49998px); opacity: 0%7D%7D %23frame-1-ellipse-2_to %7Banimation: frame-1-ellipse-2_to__to 100s linear infinite%7D@keyframes frame-1-ellipse-2_to__to %7B 0%25 %7Btransform: translate(935px,699.5px); opacity: 0%7D 5%25%7Bopacity: 1%7D 10%25 %7Btransform: translate(734.5px,581.653249px)%7D 20%25 %7Btransform: translate(1297.5px,298.821047px)%7D 30%25 %7Btransform: translate(1383.920951px,785.712891px)%7D 40%25 %7Btransform: translate(1885.913191px,858.806489px)%7D 50%25 %7Btransform: translate(1859.725024px,467.806489px)%7D 60%25 %7Btransform: translate(-7.49127px,508.307944px)%7D 70%25 %7Btransform: translate(673.401068px,-308.787109px)%7D 80%25 %7Btransform: translate(564.736663px,1168.337041px)%7D 90%25 %7Btransform: translate(725.5px,1130.712881px)%7D 95%25%7Bopacity: 1%7D 100%25 %7Btransform: translate(80.104053px,340.212891px); opacity: 0%7D%7D%5D%5D%3E%3C/style%3E%3Cdefs%3E%3ClinearGradient id='frame-1-rect1-fill' x1='960' y1='0' x2='960' y2='1080' spreadMethod='pad' gradientUnits='userSpaceOnUse'%3E%3Cstop id='frame-1-rect1-fill-0' offset='0%25' stop-color='rgb(170,92,195)'/%3E%3Cstop id='frame-1-rect1-fill-1' offset='100%25' stop-color='rgb(0,164,220)'/%3E%3C/linearGradient%3E%3Cfilter id='frame-1-group-1-filter' x='-400%25' width='600%25' y='-400%25' height='600%25'%3E%3CfeGaussianBlur id='frame-1-group-1-filter-blur-0' stdDeviation='100,100' result='result'/%3E%3C/filter%3E%3C/defs%3E%3Cg id='frame-1-g1' clip-path='url(%23frame-1-clip0)'%3E%3Cg id='frame-1-frame-1'%3E%3Crect id='frame-1-rect1' width='1920' height='1080' rx='0' ry='0' fill='url(%23frame-1-rect1-fill)' stroke='none' stroke-width='1'/%3E%3Cg id='frame-1-group-1' style='mix-blend-mode:hue' filter='url(%23frame-1-group-1-filter)'%3E%3Cg id='frame-1-ellipse-1_to' transform='translate(363,117)'%3E%3Cg id='frame-1-ellipse-1' transform='translate(-363,-117)'%3E%3Cellipse id='frame-1-ellipse1' rx='597' ry='391' transform='matrix(1 0 0 1 363 117)' fill='rgb(201,31,255)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='frame-1-ellipse-3_to' transform='translate(209.5,770)'%3E%3Cg id='frame-1-ellipse-3' transform='translate(-209.5,-770)'%3E%3Cellipse id='frame-1-ellipse2' rx='381.5' ry='468' transform='matrix(1 0 0 1 209.5 770)' fill='rgb(46,161,200)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='frame-1-ellipse-5_to' transform='translate(960,302.5)'%3E%3Cg id='frame-1-ellipse-5' transform='translate(-960,-302.5)'%3E%3Cellipse id='frame-1-ellipse3' rx='527' ry='515.5' transform='matrix(1 0 0 1 960 302.5)' fill='rgb(0,164,220)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='frame-1-ellipse-4_to' transform='translate(1597.5,466.5)'%3E%3Cg id='frame-1-ellipse-4' transform='translate(-1597.5,-466.5)'%3E%3Cellipse id='frame-1-ellipse4' rx='591.5' ry='557.5' transform='matrix(1 0 0 1 1597.5 466.5)' fill='rgb(158,78,184)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='frame-1-ellipse-6_to' transform='translate(407.637245,302.5)'%3E%3Cg id='frame-1-ellipse-6' transform='translate(-1154,-997)'%3E%3Cellipse id='frame-1-ellipse5' rx='816' ry='265' transform='matrix(1 0 0 1 1154 997)' fill='rgb(4,93,122)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='frame-1-ellipse-2_to' transform='translate(935,699.5)'%3E%3Cg id='frame-1-ellipse-2' transform='translate(-935,-699.5)'%3E%3Cellipse id='frame-1-ellipse6' rx='582' ry='324.5' transform='matrix(1 0 0 1 791.5 683.787099)' fill='rgb(173,37,196)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='frame-1-rectangle-1' style='mix-blend-mode:overlay' opacity='0.5'%3E%3Crect id='frame-1-rect2' width='1920' height='1080' rx='0' ry='0' fill='rgb(142,142,142)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3CclipPath id='frame-1-clip0'%3E%3Crect id='frame-1-rect3' width='1920' height='1080' rx='0' ry='0' fill='rgb(255,255,255)' stroke='none' stroke-width='1'/%3E%3C/clipPath%3E%3C/g%3E%3C/svg%3E");
background-size: cover !important;
background-blend-mode: overlay;
margin-top: 0 !important;
-webkit-mask: none;
mask: none;
}
#loginPage .squareCard {
width: 20vh;
}
div#divUsers {
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
overflow-x: scroll;
grid-gap: 10px;
max-width: 45em;
}
#loginPage .padded-left.padded-right.padded-bottom-page {
width: 50vw;
margin-left: auto;
margin-right: auto;
padding: 2em 2em !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
background: transparent;
overflow: hidden;
}
html:not(.layout-mobile) #loginPage .inputContainer {
position: relative;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
margin-bottom: 2.75em;
background: transparent;
border-bottom: 3px solid white !important;
border-radius: 0;
}
html:not(.layout-mobile) #loginPage .inputLabelUnfocused {
position: absolute;
z-index: 1;
top: 50%;
left: 0;
transform: translateY(-50%);
transition: 0.2s;
color: white;
font-size: 1.5em;
}
html:not(.layout-mobile) #loginPage .inputLabelFocused,
html:not(.layout-mobile) #loginPage .inputLabel:not(.inputLabel-float) {
top: -50%;
left: 0;
position: absolute;
z-index: 1;
transition: 0.2s;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%) scale(1.1);
-o-transform: translateY(-50%) scale(1.1);
font-size: 1em;
color: white !important;
-webkit-animation: none !important;
animation: none !important;
}
.layout-mobile #loginPage {
background: linear-gradient(140deg, #3e2247 10%, #003c50) !important;
overflow: scroll;
}
.layout-mobile #loginPage .padded-left.padded-right.padded-bottom-page {
background: #eee;
width: 80%;
color: #373737;
border-radius: 5px;
margin-top: auto;
margin-bottom: auto;
}
.layout-mobile #loginPage .cardBox.cardBox-bottompadded {
background: white;
color: black;
font-weight: 800;
border: 0.5px solid rgba(0, 0, 0, 0.5);
box-shadow: none;
}
.layout-mobile #loginPage .emby-input {
height: 100%;
width: 80%;
float: right;
background: transparent !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none !important;
border: none;
font-size: 2rem;
text-shadow: none;
}
.layout-mobile #loginPage .raised {
border-radius: 50px;
background: linear-gradient(90deg, #aa5cc3 0%, #00a4dc);
font-size: 1.3rem !important;
overflow: hidden !important;
}
.layout-mobile #loginPage h1 {
display: none;
}
.layout-mobile #loginPage .inputContainer {
position: relative;
height: 3rem;
border: 1px solid #aaa;
border-radius: 50px;
overflow: hidden;
}
.layout-mobile #loginPage .inputLabel[for="txtManualName"] {
font-size: 0;
color: #383838;
}
.layout-mobile #loginPage .inputLabel[for="txtManualName"]::before {
content: "\f406";
font-size: 2rem;
font-family: "Font Awesome 5 Pro";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1rem;
}
.layout-mobile #loginPage .inputLabel[for="txtManualName"]::after {
content: "";
height: 70%;
width: 2px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
right: 82.5%;
top: 50%;
transform: translateY(-50%);
}
.layout-mobile #loginPage .inputLabel[for="txtManualName"]::after {
content: "";
height: 70%;
width: 2px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
right: 82.5%;
top: 50%;
transform: translateY(-50%);
}
.layout-mobile #loginPage .inputLabel[for="txtManualPassword"] {
font-size: 0;
color: #383838;
}
.layout-mobile #loginPage .inputLabel[for="txtManualPassword"]::before {
content: "\f084";
font-size: 2rem;
font-family: "Font Awesome 5 Pro";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1rem;
}
.layout-mobile #loginPage .inputLabel[for="txtManualPassword"]::after {
content: "";
height: 70%;
width: 2px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
right: 82.5%;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 346px) {
.layout-mobile #loginPage .inputLabel[for="txtManualName"]::before {
font-size: 2.5rem;
}
.layout-mobile #loginPage .inputLabel[for="txtManualPassword"]::before {
font-size: 2.5rem;
}
.layout-mobile #loginPage .emby-input {
font-size: 1.5rem;
}
.layout-mobile #loginPage .raised {
font-size: 0.895rem !important;
}
}
#loginPage .cardBox.cardBox-bottompadded {
margin: 0;
box-shadow: none;
background: transparent;
}
#loginPage .cardScalable {
background: rgb(255 255 255 / 0.7);
border-radius: var(--rounding);
}
#loginPage .emby-button {
background: rgb(255 255 255 / 0.2);
border: 2px solid white;
}
div#divUsers::-webkit-scrollbar-track-piece {
background: transparent !important;
}
div#divUsers::-webkit-scrollbar-track {
box-shadow: none !important;
}
#loginPage .raised::before {
background: rgb(255 255 255 / 0.25);
}
#loginPage .raised span {
z-index: 1;
color: white;
background: transparent;
}
#loginPage .raised::before {
transform: scale(0);
transition: all 0.35s !important;
border-radius: 100vh;
opacity: 1;
z-index: -5;
}
#loginPage .raised:hover::before {
transform: scale(1) !important;
}
html:not(.layout-mobile) #loginPage .inputContainer input {
background: transparent !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none !important;
color: white;
border: none;
text-shadow: none;
font-size: 1.5em;
}
html:not(.layout-mobile) #loginPage .inputContainer {
margin-top: 1.2em;
}
.layout-mobile #loginPage .padded-left.padded-right.padded-bottom-page {
background: #eee;
width: 80%;
color: #373737;
border-radius: 5px;
margin-top: auto;
margin-bottom: auto;
}
/*Theming for the dashboard*/
.paperList,
.visualCardBox {
background-color: #000;
}
.listItem-border {
border-color: rgba(0, 0, 0, 0) !important;
}
.headerButton.headerButtonRight.paper-icon-button-light.headerUserButtonRound {
border-radius: 5px !important;
}
#dashboardPage .cardBox {
box-shadow: none;
border: 0.01em solid #191819;
}
.listItem.listItem-border {
border-radius: 0 !important;
}
a.button-link.emby-button[href="https://jellyfin.org"]:hover,
a.button-link.emby-button[href="https://jellyfin.org"]:focus
{
font-weight: 700;
}
a.button-link.emby-button[href="https://jellyfin.org"]
{
font-size: 3em;
font-weight: 300;
background: var(--accent);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
a.button-link.emby-button[href="https://jellyfin.org"]::after
{
background: var(--accent);
height: 5px;
bottom: -5px;
}
/*Theming Playback data info*/
.playerStats {
background: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(90px);
-webkit-backdrop-filter: blur(90px);
box-shadow: 0 0 8px black;
}
/*For browsers that don't support backdrop-filter*/
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
.mainDrawer.drawer-open {
background: rgba(0, 0, 0, 0.85);
}
.dialogBackdropOpened {
opacity: 1 !important;
background: rgba(0, 0, 0, 0.1);
}
.dialog {
background-color: rgba(0, 0, 0, 0.95) !important;
box-shadow: 0 0 20px 4px black;
}
.mainDrawer {
background-color: rgba(0, 0, 0, 0.95);
box-shadow: none;
}
.playerStats {
background: rgba(28, 28, 28, 0.8);
box-shadow: 0 0 8px black !important;
}
.appfooter,
.playlistSectionButton {
background: rgba(6, 6, 6, 0.65) !important;
}
}
/* Chapters */
.chapterCard .innerCardFooter {
height: auto;
background: rgba(0, 0, 0, 0.7);
}
.chapterCard .innerCardFooter > .cardText:first-child {
float: left;
}
.chapterCard .innerCardFooter > .cardText:last-child {
float: right;
}
.chapterThumbContainer {
box-shadow: none !important;
position: relative;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.chapterThumb {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: var(--card-rounding);
-webkit-border-radius: var(--card-rounding);
-moz-border-radius: var(--card-rounding);
-ms-border-radius: var(--card-rounding);
-o-border-radius: var(--card-rounding);
}
.chapterThumbTextContainer {
position: relative;
padding: 0 1em;
border-radius: 0px 0px 10px 10px !important;
background: transparent !important;
}
.sliderBubble::after {
content: "";
position: absolute;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgba(0, 0, 0, 0.4);
bottom: -20px;
}
.selectionCommandsPanel {
background: rgba(24, 24, 24, 0.75);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-shadow: 0 0 44px black;
}
.dashboardSection .sectionTitleTextButton > .material-icons {
margin-left: 0.5em;
}
/* Live tv fix */
.absolutePageTabContent {
top: 0 !important;
} |
|
It's all fixed, except that the duration of the album on the tablet is still white. |
|
Can you make the black rectangle of the selected song a little more beautiful? |
Can you share an image? |
I have themed the selected song rectangle in the latest commit. CSS /*Fonts */
@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons@latest/Font%20Awesome/light.css");
@import url("./src/Raleway.css");
@import url("./src/Montserrat.css");
html,
body,
h1,
h2,
h3,
h4 {
font-family: "Montserrat", "Raleway", sans-serif;
}
::-moz-selection {
background: #aa5cc3;
text-shadow: none;
}
::selection {
background: #aa5cc3;
text-shadow: none;
}
/*Mini My media*/
#indexPage .raised.emby-button:hover {
background: rgb(0, 0, 0, 0.75) !important;
box-shadow: 0px 5px 9px 0px black;
}
.section0 .itemsContainer.scrollSlider.focuscontainer-x.animatedScrollX {
flex-flow: wrap;
align-content: flex-start;
flex: 1 1 80px !important;
}
.section0 .emby-scrollbuttons {
display: none;
}
#indexPage .raised.emby-button {
background: rgb(0, 0, 0, 0.25) !important;
box-shadow: 0px 0px 9px 0px black;
transition: background 0.15s ease-out, box-shadow 0.15s ease-out;
border-radius: var(--rounding);
}
.raised {
border-radius: 50vh;
overflow: hidden;
}
.backgroundContainer,
.dialog,
.nowPlayingPlaylist,
.nowPlayingContextMenu,
.mainDrawer,
.drawer-open,
html {
background: rgb(0 60 80 / 10%);
}
.withTabs .content-primary,
.content-primary {
padding-top: 0 !important;
}
.layout-tv body {
overflow-y: scroll !important;
}
.layout-tv div[data-role="page"] {
margin: 0;
overflow: auto;
}
/*Subtitle Fonts thanks the u/Edgementality-https://bit.ly/33slrSa*/
/*Firefox*/
.videoSubtitles {
font-family: "Raleway", sans-serif !important;
font-weight: 700 !important;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 1) !important;
}
/*Chrome, Edge Chromium & Saffari*/
video::-webkit-media-text-track-display {
font-family: "Raleway", sans-serif !important;
font-weight: 700 !important;
text-shadow: 0em 0em 0.2em rgba(0, 0, 0, 1) !important;
}
/*backup for subtitles*/
video::-webkit-media-text-track-container {
font-family: "Raleway", sans-serif !important;
font-weight: 700 !important;
text-shadow: 0em 0em 0.2em rgba(0, 0, 0, 1) !important;
}
video:cue {
font-family: "Raleway" !important;
font-weight: 700 !important;
text-shadow: 0em 0em 0.2em rgba(0, 0, 0, 1) !important;
}
/*Setting border Radius*/
:root {
--rounding: 10px;
--card-rounding: 10px 10px 0px 0px;
--accent: linear-gradient(140deg, #aa5cc3, #00a4dc);
--accent-selected: linear-gradient(140deg, #00a4dc, #aa5cc3);
--accent-text: linear-gradient(#00a4dc 0%, #aa5cc3 60%);
--accent-icon: linear-gradient(140deg, #aa5cc3 20%, #00a4dc);
}
/*Image streching fix*/
img {
-o-object-fit: cover;
object-fit: cover;
}
/*Rounded corners on pretty much everything-Source Monochromic*/
.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(---card-rounding) !important;
}
.nowPlayingPageImage,
.toast,
.fab,
.multiSelectCheckboxOutline,
.itemSelectionPanel,
.cardContent-button,
.cardContent-shadow,
.itemDetailImage,
.cardOverlayButton-hover,
.listItemImageButton,
.listItemButton,
.headerButton,
.paper-icon-button-light,
.dialog,
.button-flat,
.visualCardBox,
.chapterThumbContainer,
.cardOverlayButtonIcon,
.subtitleappearance-preview.flex.align-items-center.justify-content-center {
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);
}
.detailImageContainer .cardBox {
overflow: hidden;
border-right: var(--rounding);
}
.emby-select,
.emby-select-withcolor {
border-radius: 5px;
}
.cardContent-button,
.cardContent-shadow,
.itemDetailImage,
.cardOverlayButton-hover,
.cardImageContainer,
.listItemImageButton,
.listItemButton,
.headerButton,
.paper-icon-button-light,
.cardOverlayButton,
.dialog,
a.listItem-border {
border-radius: var(--rounding);
}
.cardScalable,
.cardImage,
.visualCardBox .cardContent,
.sessionNowPlayingInnerContent,
.cardImageContainer,
.blurhash-canvas,
.cardPadder {
border-radius: var(--card-rounding);
}
.checkboxOutline {
border-radius: 5px !important;
}
.paperList {
border-radius: 20px !important;
overflow: hidden;
border: 0.01em solid #191819;
}
/*fixing Poster Margin*/
.itemsContainer > .card > .cardBox {
margin-left: 16px;
margin-right: 16px;
margin-top: 16px;
}
.cardBox-bottompadded {
margin-bottom: 16px !important;
}
.collectionItemsContainer .card.portraitCard {
width: 13rem;
}
.sectionTitleContainer.flex {
box-shadow: 0 0 black !important;
}
.section2 a.raised.homeLibraryButton.emby-button {
background: rgba(0, 0, 0, 0.4) !important;
}
fieldset {
border: 1px dotted rgb(87 87 87);
border-radius: var(--rounding);
}
/*Hover items*/
.emby-input,
.emby-textarea {
color: inherit;
border: 0.07em solid #7b7b7b;
border-radius: 5px;
box-shadow: 0 0 8px 0px black !important;
background: rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(60px);
-webkit-backdrop-filter: blur(60px);
text-shadow: 0 0 5px black;
}
.emby-select-withcolor {
border: 0.07em solid #7b7b7b;
}
.cardIndicators {
right: 0;
top: 0;
}
.indicator {
background: var(--accent) !important;
border-radius: 0px 0px 0px 5px;
padding: 0.1em;
box-shadow: 0 0 10px 1px black;
color: white;
}
.indicators {
right: 0;
top: 0;
}
.actionSheetMenuItem:hover {
background: linear-gradient(140deg, #aa5cc385, #00a4dc75) !important;
}
.cardBox {
background: rgba(0, 0, 0, 0.25);
border-radius: 10px;
box-shadow: 0px 0px 9px 0px rgb(0 0 0);
transition: background 0.15s ease-out, box-shadow 0.15s ease-out;
}
.card:hover .cardBox,
.card:focus .cardBox {
background: rgba(0, 0, 0, 0.75);
box-shadow: 0 5px 9px black;
}
.cardScalable {
overflow: hidden;
}
.layout-mobile .card:hover .cardBox {
background: rgba(0, 0, 0, 0.25) !important;
}
.layout-mobile .cardImageContainer {
background-size: cover;
}
.layout-mobile .card:hover .cardImageContainer {
background-size: cover;
}
.overflowSquareCard .cardImageContainer {
background-size: 180%;
}
.overflowSquareCard:hover .cardImageContainer {
background-size: 200%;
}
.overflowSquareCard .cardImageContainer::before {
content: "";
background: inherit;
width: 130%;
height: 130%;
position: absolute;
top: 50%;
left: 50%;
background-size: cover;
-webkit-filter: brightness(40%) blur(10px);
filter: brightness(40%) blur(10px);
z-index: 0;
transform: translate(-50%, -50%);
}
.overflowSquareCard .cardImageContainer::after {
content: "";
background: inherit;
z-index: 0;
position: absolute;
width: 100%;
height: 100%;
background-size: 100%;
transition: all 0.15s;
}
.overflowSquareCard:hover .cardImageContainer::after {
background-size: 120%;
}
:not(.detailImageContainer)
> .card:not(.overflowSquareCard)
.cardImageContainer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
background-size: cover;
transition: 0.15s;
}
.card:not(.overflowSquareCard):hover .cardImageContainer::before {
transform: scale(1.2);
}
.dialog .cardImageContainer::before,
.liveTvPage .cardImageContainer::before {
display: none;
}
.layout-mobile
.card:not(.overflowSquareCard):hover
.cardImageContainer::before {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
.progressring-bg {
border: 0.25em solid transparent;
background: transparent;
}
.itemName.parentNameLast {
font-size: 35px;
}
#itemDetailPage .button-flat:hover {
transform: scale(1.5);
}
.button-flat {
border-radius: 5px !important;
}
.detailButton-content {
-webkit-filter: drop-shadow(0px 3px 3px black);
filter: drop-shadow(0px 3px 3px black);
}
.navMenuOption {
background: transparent !important;
flex-grow: 0 !important;
}
.navMenuOption::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: var(--accent);
z-index: -1;
left: 0;
opacity: 0%;
transition: opacity 0.2s;
}
.navMenuOption:hover::before {
opacity: 100%;
}
.navMenuOption .navMenuOptionIcon {
transition: margin-right 0.2s;
width: 1.2em;
}
.navMenuOption:hover .navMenuOptionIcon {
margin-right: 1.5em;
}
.listItem-border.emby-button:hover {
background: black;
}
.listItem-border.emby-button:hover .listItemIcon {
margin-right: 0.65rem;
}
.listItem-border.emby-button .listItemIcon {
transition: margin-right 0.2s;
}
.listItemIcon.material-icons {
background: var(--accent-icon);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.defaultCardBackground {
background: transparent;
}
.cardImageIcon {
background: var(--accent);
color: transparent;
-webkit-background-clip: text !important;
background-clip: text !important;
}
.navMenuOption-selected {
background: var(--accent-selected) !important;
}
span.material-icons.detailButton-icon.check.playstatebutton-icon-played,
span.material-icons.detailButton-icon.favorite.ratingbutton-icon-withrating {
background: var(--accent-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.raised::before {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
background: var(--accent);
border-radius: 5px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.raised:hover::before {
opacity: 100%;
}
.dashboardSection .defaultCardBackground {
color: white;
}
#indexPage .raised::before {
background: transparent;
}
/*fancy link*/
.button-link::after {
content: "";
width: 100%;
height: 1px;
background: #00a4dc;
position: absolute;
bottom: 0;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.2s ease;
}
.button-link:hover {
text-decoration: none;
}
.button-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
#itemDetailPage .button-link::after {
background: white;
height: 2px;
}
.listItem.listItem-border:hover {
border-color: rgba(0, 0, 0, 0) !important;
background: #1010109e;
}
.listItem-border {
transition: border-color 0.2s, background 0.2s;
}
div#divRunningTasks:hover {
transform: scale(1.1);
}
div#divRunningTasks {
transition: transform 0.2s, background 0.2s;
}
.navMenuOption-selected {
background: var(--accent-selected) !important;
}
.detailPageContent {
text-shadow: 0 0 5px black;
}
select {
box-shadow: 0 0 6px 0px black !important;
background: rgba(0, 0, 0, 0.2) !important;
backdrop-filter: blur(50px) !important;
-webkit-backdrop-filter: blur(50px);
text-shadow: 0 0 5px black !important;
}
/*Header*/
.skinHeader-withBackground {
text-shadow: 0 0 5px black;
background-color: transparent !important;
}
.emby-button-foreground::after {
content: "";
height: 2px;
width: 0%;
background: rgb(0, 164, 220);
position: absolute;
bottom: -35%;
left: 50%;
transform: translateX(-50%);
transition: width 0.15s ease-in-out;
}
.emby-tab-button:hover .emby-button-foreground::after {
width: 75%;
}
body.force-scroll {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
overflow: hidden;
}
.skinHeader {
position: static;
width: 100%;
align-self: flex-start;
}
.mainAnimatedPages {
height: 100vh;
position: relative !important;
overflow: hidden;
}
.libraryPage:not(.noSecondaryNavPage) {
padding: 0 !important;
}
div#itemDetailPage {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
@media (min-width: 40em) {
.dashboardDocument .skinBody {
left: 20em;
width: calc(100vw - 20em);
}
}
div[data-role="page"] {
margin: 0 !important;
padding: 0 !important;
position: static;
width: 100%;
height: 100%;
overflow-y: scroll;
-webkit-mask: linear-gradient(
to bottom,
transparent,
black 15px calc(100% - 15px),
transparent
);
mask: linear-gradient(
to bottom,
transparent,
black 15px calc(100% - 15px),
transparent
);
}
div[data-role="page"] > * {
padding-top: 16px;
}
.layout-tv .mainAnimatedPages {
overflow: visible;
mask: none;
-webkit-mask: none;
}
div#videoOsdPage {
overflow: hidden !important;
margin-top: 0 !important;
-webkit-mask: none !important;
mask: none !important;
}
div[data-role="page"]:not(.withTabs) {
margin-top: 0 !important;
}
div#itemBackdrop {
display: none;
}
.layout-desktop .detailRibbon {
margin-top: 0 !important;
}
.layout-mobile #itemDetailPage {
position: fixed;
-webkit-mask: none;
mask: none;
margin-top: 4em !important;
height: calc(100vh - 4em);
}
.layout-mobile .detailPageWrapperContainer {
height: 100%;
overflow: scroll;
position: relative;
background: #ddd;
color: #383838;
width: 90%;
border-radius: 10px;
font-size: 110%;
margin: 20px auto;
text-shadow: none !important;
}
.layout-mobile .detailPageWrapperContainer::after {
content: "";
position: fixed;
width: 90%;
background: linear-gradient(
0deg,
#ddd,
transparent 15px calc(100% - 15px),
#ddd
);
left: 50%;
transform: translatex(-50%);
z-index: 200;
height: calc(100% - 4em - 34px);
bottom: 20px;
border-radius: var(--rounding);
-webkit-transform: translatex(-50%);
-moz-transform: translatex(-50%);
-ms-transform: translatex(-50%);
-o-transform: translatex(-50%);
pointer-events: none;
}
.layout-mobile
.detailPagePrimaryContainer.padded-left.padded-right.detailRibbon {
text-shadow: none !important;
}
.layout-mobile .detailPageContent {
text-shadow: none !important;
}
.layout-mobile
#itemDetailPage
.childrenSectionHeader.sectionTitle.sectionTitle-cards {
text-shadow: none !important;
}
/*Subtitle preview*/
.subtitleappearance-preview {
background: var(--accent) !important;
}
/*Video Player*/
div#videoOsdPage {
overflow: hidden !important;
margin-top: 0 !important;
}
.layout-desktop .osdControls {
width: 100%;
max-width: 100%;
}
.sliderBubble {
border-radius: var(--rounding);
background: rgba(0, 0, 0, 0.4);
font-weight: 400 !important;
}
h1.sliderBubbleText {
background: var(--accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
}
/* Music Player */
.appfooter,
.playlistSectionButton {
background: transparent !important;
-webkit-backdrop-filter: blur(50px);
backdrop-filter: blur(50px);
}
/*cardbox border-radius change*/
#indexPage
button.cardImageContainer.cardContent.itemAction.lazy.blurhashed.lazy-image-fadein-fast,
.emby-scroller button.cardImageContainer.coveredImage.cardContent,
.childrenItemsContainer button.cardImageContainer.coveredImage.cardContent,
.nextUpItems
button.cardImageContainer.cardContent.itemAction.lazy.blurhashed.lazy-image-fadein-fast,
.vertical-wrap button.cardImageContainer.coveredImage.cardContent,
.emby-scroller button.cardImageContainer {
border-radius: 10px 10px 0px 0px !important;
}
.justify-content-center.flex-wrap-wrap.padded-top.padded-left.padded-right.padded-bottom {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: 0 0 black;
}
.detailPagePrimaryContainer.padded-left.padded-right.detailRibbon,
button.button-flat.btnResume.detailButton.emby-button,
button.emby-tab-button.emby-button,
h2 {
text-shadow: 0 0 5px black;
}
.tmla-mask {
background-color: rgba(0, 0, 0, 0);
}
.dialogBackdropOpened {
opacity: 1 !important;
}
.dialogBackdrop {
background-color: #0000;
}
.raised {
background: #00a4dc;
}
.cardBox:not(.visualCardBox) .cardPadder,
.cardContent-shadow {
background: transparent;
box-shadow: 0 0 rgba(0, 0, 0, 0) !important;
}
.card-hoverable:hover .cardOverlayContainer {
border-radius: 10px 10px 0px 0px !important;
-webkit-border-radius: 10px 10px 0px 0px !important;
-moz-border-radius: 10px 10px 0px 0px !important;
-ms-border-radius: 10px 10px 0px 0px !important;
-o-border-radius: 10px 10px 0px 0px !important;
}
.layout-mobile .overflowPortraitCard,
.layout-mobile .overflowSquareCard {
width: 200px !important;
}
/* Adjust both "size-adjust" and "size" to modify size */
.pageTitle {
margin-top: auto;
margin-bottom: auto;
}
.emby-tab-button {
padding: 1.75em 1.7em;
}
/*Blur backdrops, feel free to edit the intensity of the filter values*/
.backdropImage {
-webkit-filter: blur(10px) saturate(110%) contrast(110%) brightness(95%);
filter: blur(10px) saturate(110%) contrast(110%) brightness(95%);
}
.backgroundContainer.withBackdrop {
background: rgba(24, 24, 24, 0.5);
box-shadow: inset 0 0 100px 100px rgb(4 4 4 / 85%);
}
.layout-desktop .itemBackdrop:after,
.layout-tv .itemBackdrop:after {
background: transparent;
}
.dialog {
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(60px) !important;
-webkit-backdrop-filter: blur(60px) !important;
-moz-backdrop-filterss: blur (60px) !important;
-o-backdrop-filter: blur(60px) !important;
box-shadow: 0 0 0 500vw rgb(0, 0, 0, 0.5), 0 0 20px 4px black;
}
/* Top menu transparency */
.upNextDialog {
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
box-shadow: 0 0 8px 5px black;
}
.upNextDialog-poster-img {
border-radius: 10px;
}
.cardOverlayContainer {
background-color: rgba(0, 0, 0, 0.8);
}
/*Theme some dialogues*/
.mainDrawer.drawer-open {
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 1000vh rgb(0 0 0 / 45%), 0 0 20px 0px black;
}
.mainDrawer {
background-color: rgba(0, 0, 0, 0.1);
box-shadow: none;
transition: all 0.2s !important;
-webkit-backdrop-filter: blur(60px);
-moz-backdrop-filter: blur(60px);
-o-backdrop-filter: blur(60px);
backdrop-filter: blur(60px);
-webkit-transition: all 0.2s !important;
-moz-transition: all 0.2s !important;
-ms-transition: all 0.2s !important;
-o-transition: all 0.2s !important;
}
.layout-mobile
.mainDrawer-scrollContainer.scrollContainer.focuscontainer-y.scrollY {
overflow: hidden;
}
.layout-mobile .adminDrawerLogo {
border-bottom: 0;
border-radius: 0 !important;
padding: 1.5em 1em 1.2em;
margin: 0;
}
.layout-mobile .drawerContent {
padding-bottom: 4em;
overflow: scroll;
height: 100%;
-webkit-mask: linear-gradient(
to bottom,
transparent,
black 15px calc(100% - 15px),
transparent
);
mask: linear-gradient(
to bottom,
transparent,
black 15px calc(100% - 15px),
transparent
);
}
.layout-mobile
.drawer-open
.mainDrawer-scrollContainer.scrollContainer.focuscontainer-y.scrollY {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
margin: 0 !important;
padding: 0 !important;
overflow: scroll;
}
/*Fixing position of tv or movie poster*/
.detailImageContainer .card {
position: fixed;
top: 50% !important;
}
/*Tweak series/movie/album title screen*/
.detailPagePrimaryContainer {
background: rgba(0, 0, 0, 0) !important;
}
.mediaInfoOfficialRating {
border-radius: 100vh;
}
.detailImageContainer .cardScalable .cardImageContainer {
background-size: cover !important;
}
.card[data-type="Actor"] .cardBox {
background: none;
position: relative;
}
.card[data-type="Actor"] .cardScalable {
height: 0;
overflow: hidden;
padding-top: 100%;
border-radius: var(--rounding);
}
.card[data-type="Actor"] .cardText {
position: absolute;
background: transparent !important;
}
.card[data-type="Actor"] .cardImageContainer::after {
content: "";
background: linear-gradient(360deg, rgba(0, 0, 0, 0.75), transparent 70%);
width: 100%;
bottom: 0;
position: absolute;
padding-top: 100%;
}
.card[data-type="Actor"] .cardText-secondary {
bottom: 0%;
width: -webkit-fill-available;
border-radius: 0px 0px 10px 10px;
height: 22px;
}
.card[data-type="Actor"] .cardText-first {
bottom: 23.5px;
width: -webkit-fill-available;
height: 22px;
}
.layout-mobile .card[data-type="Actor"] .cardText-first {
color: white !important;
}
.card[data-type="Actor"] .cardScalable {
overflow: hidden;
border-radius: var(--rounding);
height: 3rem;
}
.card[data-type="Actor"] .cardOverlayButton-br {
position: absolute;
bottom: 23%;
right: 0;
}
.card[data-type="Actor"] .cardPadder {
background: none;
}
.card[data-type="Actor"] .cardImageIcon {
bottom: 41%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.detailLogo {
display: none;
}
.layout-mobile .tagline {
text-align: center;
font-weight: 700;
background: var(--accent);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
border-radius: 10px;
width: -webkit-fit-content !important;
width: -moz-fit-content !important;
width: fit-content !important;
margin: 0 auto;
}
#itemDetailPage .emby-select {
box-shadow: none !important;
}
.layout-mobile #itemDetailPage .cardBox {
box-shadow: 0px 15px 10px -10px #5d5d5d, 0px 0px 13px 0px #a1a1a1;
background: rgba(0, 0, 0, 0.25) !important;
}
.layout-mobile #itemDetailPage::before {
content: "";
background: linear-gradient(140deg, #3e2247 10%, #003c50 90%);
position: fixed;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
.layout-mobile .mainDetailButtons {
width: 100%;
font-size: 100%;
}
.layout-mobile .detailButton-content {
-webkit-filter: none;
filter: none;
}
@media (min-width: 32em), (min-height: 32em) {
.itemBackdrop {
height: 23vh !important;
background-image: none !important;
}
}
.layout-mobile .mainDetailButtons {
margin-left: auto;
margin-right: auto;
}
.layout-mobile .primaryImageWrapper > img {
display: block;
margin: 0 auto;
max-width: 80vw;
max-height: 50vh;
border-radius: var(--rounding);
margin-bottom: 0.5rem;
box-shadow: 0px 2rem 3rem -1.5rem #111111, 0px 0px 20px 0px #afaeae;
}
.layout-mobile
.detailPagePrimaryContainer.padded-left.padded-right.detailRibbon,
.layout-mobile button.button-flat.btnResume.detailButton.emby-button,
.layout-mobile button.emby-tab-button.emby-button,
.layout-mobile h2 {
text-shadow: none !important;
}
.layout-mobile .detailPageContent {
text-shadow: none !important;
}
.layout-mobile select {
text-shadow: none !important;
}
.layout-mobile .button-flat:hover {
transform: none;
}
.layout-mobile .detailPagePrimaryContainer {
flex-wrap: wrap;
position: relative;
padding: 4.5em 4.5em 0.5rem;
grid-column-gap: 1em;
justify-content: space-around;
}
.layout-mobile .detailPagePrimaryContainer > * {
flex: 0 0 auto;
}
.itemProgressBar {
height: 100%;
background: rgba(0, 0, 0, 0);
}
.innerCardFooter {
height: 6px;
background: rgba(255, 255, 255, 0.6);
width: 95%;
left: 50%;
transform: translate(-50%, -5px);
border-radius: var(--rounding);
}
.itemProgressBarForeground {
background: var(--accent) !important;
}
.mainDetailButtons {
font-size: 130%;
}
.navMenuOptionIcon {
font-size: 1.75rem !important;
transition: margin 0.2s ease-in-out;
}
.paper-icon-button-light:hover {
background-color: rgba(0, 0, 0, 0);
}
@media all and (min-width: 100em) {
.cardOverlayFab-primary {
background-color: #00000000;
}
.cardOverlayButtonIcon {
background-color: #00000000 !important;
}
.cardOverlayContainer {
background-color: rgba(0, 0, 0, 0.7);
}
}
@media all and (max-width: 100em) {
.cardOverlayButtonIcon {
border-radius: 5px !important;
}
.layout-mobile .cardOverlayButtonIcon {
background-color: rgba(0, 0, 0, 0.5) !important;
}
.cardOverlayButton {
padding: 0.3em;
}
}
/*Player theme*/
.nowPlayingPageImage {
box-shadow: none !important;
border: none;
overflow: hidden;
}
.layout-mobile .remoteControlContent {
background: transparent;
padding: 0;
margin: 0;
overflow: hidden;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
position: relative;
top: 48%;
transform: translateY(-50%);
}
.layout-mobile .playlistSectionButton {
position: static !important;
}
.playlistSectionButton .volumecontrol {
width: -webkit-fit-content !important;
width: -moz-fit-content !important;
width: fit-content !important;
}
.nowPlayingSongName {
font-size: 3vh;
}
.infoContainer,
.sliderContainer {
align-items: center;
}
/*Size episode preview images in a more compact way*/
.childrenItemsContainer.itemsContainer.padded-right.vertical-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media all and (max-width: 1001px) {
.childrenItemsContainer.itemsContainer.padded-right.vertical-list {
grid-template-columns: 1fr 1fr;
}
}
.layout-mobile
.childrenItemsContainer.itemsContainer.padded-right.vertical-list {
grid-template-columns: 1fr;
}
#itemDetailPage .listItem-content {
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
overflow: hidden;
transition: background 0.15s ease-in-out;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
flex-flow: column;
-webkit-transition: background 0.15s ease-in-out;
-moz-transition: background 0.15s ease-in-out;
-ms-transition: background 0.15s ease-in-out;
-o-transition: background 0.15s ease-in-out;
}
.listItemImage.listItemImage-large {
width: 100%;
margin: 0;
}
.listItem-overview.listItemBodyText {
height: 2.5em !important;
font-size: 1em !important;
-webkit-mask: linear-gradient(to top, transparent, black 1.2em);
mask: linear-gradient(to top, transparent, black 1.2em);
}
#itemDetailPage .listItem:hover .listItem-content {
background: rgba(0, 0, 0, 0.8);
}
.listItemImageButton-icon {
padding: 0;
}
#itemDetailPage .listItem {
position: relative;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
overflow: hidden;
margin-bottom: 1.5rem;
border-radius: var(--rounding) !important;
}
#itemDetailPage .secondary.listItem-overview.listItemBodyText {
height: 100%;
margin: 0;
}
.listItem[data-mediatype="Audio"] {
padding: 0 1em;
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
-moz-border-radius: 15px !important;
-ms-border-radius: 15px !important;
-o-border-radius: 15px !important;
}
.layout-mobile #itemDetailPage .listItemImageButton {
font-size: 0 !important;
width: 100%;
height: 100%;
background: rgba(16, 16, 16, 0.65);
z-index: -1;
}
.layout-mobile .listItemIndicators {
right: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--accent);
opacity: 0.45;
}
.layout-mobile .listItemIndicators > * {
display: none;
}
.layout-mobile .playedIndicator {
width: 100%;
height: 100%;
font-size: 1.2rem;
}
.layout-mobile .listItemIndicators .indicatorIcon.check {
position: absolute;
top: 5%;
right: 32%;
}
.layout-mobile .listItemBodyText {
max-width: 100% !important;
}
.layout-mobile .listItemBodyText.secondary {
color: #999;
}
.layout-mobile .listItem .playedIndicator {
background: transparent !important;
}
.layout-mobile .listItemImage {
height: 100% !important;
width: 100% !important;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
border-radius: 10px !important;
z-index: -1;
}
.layout-mobile .listViewUserDataButtons {
position: static;
}
.layout-mobile .listItemButton {
padding: 0 0.556em !important;
}
.layout-mobile #itemDetailPage .listItem-content {
-webkit-backdrop-filter: none;
backdrop-filter: none;
align-items: center;
flex-flow: row;
background: none !important;
position: unset;
color: white;
}
.listItemImageButton {
margin: auto;
font-size: 1.6em !important;
}
/* My Media Styling */
.section0 button.itemAction.textActionButton {
height: 3.5em;
background: rgba(0, 0, 0, 0);
border-radius: 10px;
}
.section0 .overflowBackdropCard,
.section0 .overflowSmallBackdropCard {
max-width: 90vw;
}
.section0 .emby-scroller {
margin-right: 0;
}
.emby-scroller {
-webkit-mask: linear-gradient(
to left,
transparent,
black 15px calc(100% - 15px),
transparent
);
mask: linear-gradient(
to left,
transparent,
black 15px calc(100% - 15px),
transparent
);
}
.mainDrawer-scrollContainer {
-webkit-mask: linear-gradient(
to top,
transparent,
black 15px calc(100% - 15px),
transparent
);
mask: linear-gradient(
to top,
transparent,
black 15px calc(100% - 15px),
transparent
);
}
.raised.homeLibraryButton:hover {
transition: -webkit-filter 1s;
transition: filter 1s;
transition: filter 1s, -webkit-filter 1s;
}
.raised.homeLibraryButton {
transition: -webkit-filter 1s;
transition: filter 1s;
transition: filter 1s, -webkit-filter 1s;
}
.homeLibraryButton {
min-width: 12em;
margin: 0.4em;
}
/*Login Page Theming*/
div#loginPage {
margin-top: 0 !important;
position: fixed;
background-image: url("data:image/svg+xml,%3Csvg id='frame-1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1920 1080' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' style='background-color:transparent'%3E%3Cstyle%3E%3C!%5BCDATA%5B%23frame-1-ellipse-1_to %7Banimation: frame-1-ellipse-1_to__to 100s linear infinite%7D@keyframes frame-1-ellipse-1_to__to %7B 0%25 %7Btransform: translate(363px,117px); opacity: 0%7D 5%25%7Bopacity: 1%7D 10%25 %7Btransform: translate(1641.235694px,758.610087px)%7D 20%25 %7Btransform: translate(363px,289.960233px)%7D 30%25 %7Btransform: translate(260.866149px,1004.897187px)%7D 40%25 %7Btransform: translate(1617.413191px,127.593598px)%7D 50%25 %7Btransform: translate(250.390882px,986.565469px)%7D 60%25 %7Btransform: translate(1062.224054px,596.871968px)%7D 70%25 %7Btransform: translate(831.768186px,1060.402521px)%7D 80%25 %7Btransform: translate(-160.763337px,437.12415px)%7D 90%25 %7Btransform: translate(1704.430952px,854.389903px)%7D 95%25%7Bopacity: 1%7D 100%25 %7Btransform: translate(84.487123px,28.28309px); opacity: 0%7D%7D %23frame-1-ellipse-3_to %7Banimation: frame-1-ellipse-3_to__to 100s linear infinite%7D@keyframes frame-1-ellipse-3_to__to %7B 0%25 %7Btransform: translate(209.5px,770px); opacity: 0%7D 5%25%7Bopacity: 1%7D 10%25 %7Btransform: translate(1856.735694px,302px)%7D 20%25 %7Btransform: translate(135.705626px,212.960233px)%7D 30%25 %7Btransform: translate(1793.416587px,61.068865px)%7D 40%25 %7Btransform: translate(658.420951px,673.871968px)%7D 50%25 %7Btransform: translate(1195.278371px,776.593588px)%7D 60%25 %7Btransform: translate(638.913191px,391.627536px)%7D 70%25 %7Btransform: translate(0px,386.389903px)%7D 80%25 %7Btransform: translate(563.045587px,386.389903px)%7D 90%25 %7Btransform: translate(1746.045587px,915.61458px)%7D 95%25%7Bopacity: 1%7D 100%25 %7Btransform: translate(164.825515px,227.49999px); opacity: 0%7D%7D %23frame-1-ellipse-5_to %7Banimation: frame-1-ellipse-5_to__to 100s linear infinite%7D@keyframes frame-1-ellipse-5_to__to %7B 0%25 %7Btransform: translate(960px,302.5px); opacity: 0%7D 5%25%7Bopacity: 1%7D 10%25 %7Btransform: translate(355px,302px)%7D 20%25 %7Btransform: translate(1515.13579px,197.247332px)%7D 30%25 %7Btransform: translate(169.064015px,404.63385px)%7D 40%25 %7Btransform: translate(1687.413191px,501.530067px)%7D 50%25 %7Btransform: translate(1800.022308px,205.871968px)%7D 60%25 %7Btransform: translate(111.913191px,669.402521px)%7D 70%25 %7Btransform: translate(1512.980116px,817.095053px)%7D 80%25 %7Btransform: translate(-52.098932px,620.683802px)%7D 90%25 %7Btransform: translate(896.633111px,274.99999px)%7D 95%25%7Bopacity: 1%7D 100%25 %7Btransform: translate(1600.114694px,152.78309px); opacity: 0%7D%7D %23frame-1-ellipse-4_to %7Banimation: frame-1-ellipse-4_to__to 100s linear infinite%7D@keyframes frame-1-ellipse-4_to__to %7B 0%25 %7Btransform: translate(1597.5px,466.5px); opacity: 0%7D 5%25%7Bopacity: 1%7D 10%25 %7Btransform: translate(1016.122697px,838.371969px)%7D 20%25 %7Btransform: translate(345.705626px,818px)%7D 30%25 %7Btransform: translate(1691.777401px,920.13385px)%7D 40%25 %7Btransform: translate(-162.344811px,802.2871px)%7D 50%25 %7Btransform: translate(428.913191px,624.207566px)%7D 60%25 %7Btransform: translate(1871.881183px,685.093588px)%7D 70%25 %7Btransform: translate(722.220659px,817.095053px)%7D 80%25 %7Btransform: translate(1536.045587px,232.99999px)%7D 90%25 %7Btransform: translate(864.833802px,717.04695px)%7D 95%25%7Bopacity: 1%7D 100%25 %7Btransform: translate(1664.614694px,1114.99998px); opacity: 0%7D%7D %23frame-1-ellipse-6_to %7Banimation: frame-1-ellipse-6_to__to 100s linear infinite%7D@keyframes frame-1-ellipse-6_to__to %7B 0%25 %7Btransform: translate(407.637245px,302.5px); opacity: 0%7D 5%25%7Bopacity: 1%7D 10%25 %7Btransform: translate(1154px,241.440348px)%7D 20%25 %7Btransform: translate(1216.8516px,770px)%7D 30%25 %7Btransform: translate(816px,275px)%7D 40%25 %7Btransform: translate(2159.452959px,851.13967px)%7D 50%25 %7Btransform: translate(747.910767px,217.386033px)%7D 60%25 %7Btransform: translate(300.093114px,817.095053px)%7D 70%25 %7Btransform: translate(1790.199807px,183.389903px)%7D 80%25 %7Btransform: translate(1290.901068px,563.12415px)%7D 90%25 %7Btransform: translate(1185.633111px,1055.49999px)%7D 95%25%7Bopacity: 1%7D 100%25 %7Btransform: translate(1192.087071px,790.49998px); opacity: 0%7D%7D %23frame-1-ellipse-2_to %7Banimation: frame-1-ellipse-2_to__to 100s linear infinite%7D@keyframes frame-1-ellipse-2_to__to %7B 0%25 %7Btransform: translate(935px,699.5px); opacity: 0%7D 5%25%7Bopacity: 1%7D 10%25 %7Btransform: translate(734.5px,581.653249px)%7D 20%25 %7Btransform: translate(1297.5px,298.821047px)%7D 30%25 %7Btransform: translate(1383.920951px,785.712891px)%7D 40%25 %7Btransform: translate(1885.913191px,858.806489px)%7D 50%25 %7Btransform: translate(1859.725024px,467.806489px)%7D 60%25 %7Btransform: translate(-7.49127px,508.307944px)%7D 70%25 %7Btransform: translate(673.401068px,-308.787109px)%7D 80%25 %7Btransform: translate(564.736663px,1168.337041px)%7D 90%25 %7Btransform: translate(725.5px,1130.712881px)%7D 95%25%7Bopacity: 1%7D 100%25 %7Btransform: translate(80.104053px,340.212891px); opacity: 0%7D%7D%5D%5D%3E%3C/style%3E%3Cdefs%3E%3ClinearGradient id='frame-1-rect1-fill' x1='960' y1='0' x2='960' y2='1080' spreadMethod='pad' gradientUnits='userSpaceOnUse'%3E%3Cstop id='frame-1-rect1-fill-0' offset='0%25' stop-color='rgb(170,92,195)'/%3E%3Cstop id='frame-1-rect1-fill-1' offset='100%25' stop-color='rgb(0,164,220)'/%3E%3C/linearGradient%3E%3Cfilter id='frame-1-group-1-filter' x='-400%25' width='600%25' y='-400%25' height='600%25'%3E%3CfeGaussianBlur id='frame-1-group-1-filter-blur-0' stdDeviation='100,100' result='result'/%3E%3C/filter%3E%3C/defs%3E%3Cg id='frame-1-g1' clip-path='url(%23frame-1-clip0)'%3E%3Cg id='frame-1-frame-1'%3E%3Crect id='frame-1-rect1' width='1920' height='1080' rx='0' ry='0' fill='url(%23frame-1-rect1-fill)' stroke='none' stroke-width='1'/%3E%3Cg id='frame-1-group-1' style='mix-blend-mode:hue' filter='url(%23frame-1-group-1-filter)'%3E%3Cg id='frame-1-ellipse-1_to' transform='translate(363,117)'%3E%3Cg id='frame-1-ellipse-1' transform='translate(-363,-117)'%3E%3Cellipse id='frame-1-ellipse1' rx='597' ry='391' transform='matrix(1 0 0 1 363 117)' fill='rgb(201,31,255)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='frame-1-ellipse-3_to' transform='translate(209.5,770)'%3E%3Cg id='frame-1-ellipse-3' transform='translate(-209.5,-770)'%3E%3Cellipse id='frame-1-ellipse2' rx='381.5' ry='468' transform='matrix(1 0 0 1 209.5 770)' fill='rgb(46,161,200)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='frame-1-ellipse-5_to' transform='translate(960,302.5)'%3E%3Cg id='frame-1-ellipse-5' transform='translate(-960,-302.5)'%3E%3Cellipse id='frame-1-ellipse3' rx='527' ry='515.5' transform='matrix(1 0 0 1 960 302.5)' fill='rgb(0,164,220)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='frame-1-ellipse-4_to' transform='translate(1597.5,466.5)'%3E%3Cg id='frame-1-ellipse-4' transform='translate(-1597.5,-466.5)'%3E%3Cellipse id='frame-1-ellipse4' rx='591.5' ry='557.5' transform='matrix(1 0 0 1 1597.5 466.5)' fill='rgb(158,78,184)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='frame-1-ellipse-6_to' transform='translate(407.637245,302.5)'%3E%3Cg id='frame-1-ellipse-6' transform='translate(-1154,-997)'%3E%3Cellipse id='frame-1-ellipse5' rx='816' ry='265' transform='matrix(1 0 0 1 1154 997)' fill='rgb(4,93,122)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='frame-1-ellipse-2_to' transform='translate(935,699.5)'%3E%3Cg id='frame-1-ellipse-2' transform='translate(-935,-699.5)'%3E%3Cellipse id='frame-1-ellipse6' rx='582' ry='324.5' transform='matrix(1 0 0 1 791.5 683.787099)' fill='rgb(173,37,196)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='frame-1-rectangle-1' style='mix-blend-mode:overlay' opacity='0.5'%3E%3Crect id='frame-1-rect2' width='1920' height='1080' rx='0' ry='0' fill='rgb(142,142,142)' stroke='none' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3CclipPath id='frame-1-clip0'%3E%3Crect id='frame-1-rect3' width='1920' height='1080' rx='0' ry='0' fill='rgb(255,255,255)' stroke='none' stroke-width='1'/%3E%3C/clipPath%3E%3C/g%3E%3C/svg%3E");
background-size: cover !important;
background-blend-mode: overlay;
margin-top: 0 !important;
-webkit-mask: none;
mask: none;
}
#loginPage .squareCard {
width: 20vh;
}
div#divUsers {
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
overflow-x: scroll;
grid-gap: 10px;
max-width: 45em;
}
#loginPage .padded-left.padded-right.padded-bottom-page {
width: 50vw;
margin-left: auto;
margin-right: auto;
padding: 2em 2em !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
background: transparent;
overflow: hidden;
}
html:not(.layout-mobile) #loginPage .inputContainer {
position: relative;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
margin-bottom: 2.75em;
background: transparent;
border-bottom: 3px solid white !important;
border-radius: 0;
}
html:not(.layout-mobile) #loginPage .inputLabelUnfocused {
position: absolute;
z-index: 1;
top: 50%;
left: 0;
transform: translateY(-50%);
transition: 0.2s;
color: white;
font-size: 1.5em;
}
html:not(.layout-mobile) #loginPage .inputLabelFocused,
html:not(.layout-mobile) #loginPage .inputLabel:not(.inputLabel-float) {
top: -50%;
left: 0;
position: absolute;
z-index: 1;
transition: 0.2s;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%) scale(1.1);
-o-transform: translateY(-50%) scale(1.1);
font-size: 1em;
color: white !important;
-webkit-animation: none !important;
animation: none !important;
}
.layout-mobile #loginPage {
background: linear-gradient(140deg, #3e2247 10%, #003c50) !important;
overflow: scroll;
}
.layout-mobile #loginPage .padded-left.padded-right.padded-bottom-page {
background: #eee;
width: 80%;
color: #373737;
border-radius: 5px;
margin-top: auto;
margin-bottom: auto;
}
.layout-mobile #loginPage .cardBox.cardBox-bottompadded {
background: white;
color: black;
font-weight: 800;
border: 0.5px solid rgba(0, 0, 0, 0.5);
box-shadow: none;
}
.layout-mobile #loginPage .emby-input {
height: 100%;
width: 80%;
float: right;
background: transparent !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none !important;
border: none;
font-size: 2rem;
text-shadow: none;
}
.layout-mobile #loginPage .raised {
border-radius: 50px;
background: linear-gradient(90deg, #aa5cc3 0%, #00a4dc);
font-size: 1.3rem !important;
overflow: hidden !important;
}
.layout-mobile #loginPage h1 {
display: none;
}
.layout-mobile #loginPage .inputContainer {
position: relative;
height: 3rem;
border: 1px solid #aaa;
border-radius: 50px;
overflow: hidden;
}
.layout-mobile #loginPage .inputLabel[for="txtManualName"] {
font-size: 0;
color: #383838;
}
.layout-mobile #loginPage .inputLabel[for="txtManualName"]::before {
content: "\f406";
font-size: 2rem;
font-family: "Font Awesome 5 Pro";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1rem;
}
.layout-mobile #loginPage .inputLabel[for="txtManualName"]::after {
content: "";
height: 70%;
width: 2px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
right: 82.5%;
top: 50%;
transform: translateY(-50%);
}
.layout-mobile #loginPage .inputLabel[for="txtManualName"]::after {
content: "";
height: 70%;
width: 2px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
right: 82.5%;
top: 50%;
transform: translateY(-50%);
}
.layout-mobile #loginPage .inputLabel[for="txtManualPassword"] {
font-size: 0;
color: #383838;
}
.layout-mobile #loginPage .inputLabel[for="txtManualPassword"]::before {
content: "\f084";
font-size: 2rem;
font-family: "Font Awesome 5 Pro";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1rem;
}
.layout-mobile #loginPage .inputLabel[for="txtManualPassword"]::after {
content: "";
height: 70%;
width: 2px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
right: 82.5%;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 346px) {
.layout-mobile #loginPage .inputLabel[for="txtManualName"]::before {
font-size: 2.5rem;
}
.layout-mobile #loginPage .inputLabel[for="txtManualPassword"]::before {
font-size: 2.5rem;
}
.layout-mobile #loginPage .emby-input {
font-size: 1.5rem;
}
.layout-mobile #loginPage .raised {
font-size: 0.895rem !important;
}
}
#loginPage .cardBox.cardBox-bottompadded {
margin: 0;
box-shadow: none;
background: transparent;
}
#loginPage .cardScalable {
background: rgb(255 255 255 / 0.7);
border-radius: var(--rounding);
}
#loginPage .emby-button {
background: rgb(255 255 255 / 0.2);
border: 2px solid white;
}
div#divUsers::-webkit-scrollbar-track-piece {
background: transparent !important;
}
div#divUsers::-webkit-scrollbar-track {
box-shadow: none !important;
}
#loginPage .raised::before {
background: rgb(255 255 255 / 0.25);
}
#loginPage .raised span {
z-index: 1;
color: white;
background: transparent;
}
#loginPage .raised::before {
transform: scale(0);
transition: all 0.35s !important;
border-radius: 100vh;
opacity: 1;
z-index: -5;
}
#loginPage .raised:hover::before {
transform: scale(1) !important;
}
html:not(.layout-mobile) #loginPage .inputContainer input {
background: transparent !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none !important;
color: white;
border: none;
text-shadow: none;
font-size: 1.5em;
}
html:not(.layout-mobile) #loginPage .inputContainer {
margin-top: 1.2em;
}
.layout-mobile #loginPage .padded-left.padded-right.padded-bottom-page {
background: #eee;
width: 80%;
color: #373737;
border-radius: 5px;
margin-top: auto;
margin-bottom: auto;
}
/*Theming for the dashboard*/
.paperList,
.visualCardBox {
background-color: #000;
}
.listItem-border {
border-color: rgba(0, 0, 0, 0) !important;
}
.headerButton.headerButtonRight.paper-icon-button-light.headerUserButtonRound {
border-radius: 5px !important;
}
#dashboardPage .cardBox {
box-shadow: none;
border: 0.01em solid #191819;
}
.listItem.listItem-border {
border-radius: 0 !important;
}
a.button-link.emby-button[href="https://jellyfin.org"]:hover,
a.button-link.emby-button[href="https://jellyfin.org"]:focus
{
font-weight: 700;
}
a.button-link.emby-button[href="https://jellyfin.org"]
{
font-size: 3em;
font-weight: 300;
background: var(--accent);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
a.button-link.emby-button[href="https://jellyfin.org"]::after
{
background: var(--accent);
height: 5px;
bottom: -5px;
}
/*Theming Playback data info*/
.playerStats {
background: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(90px);
-webkit-backdrop-filter: blur(90px);
box-shadow: 0 0 8px black;
}
/*For browsers that don't support backdrop-filter*/
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
.mainDrawer.drawer-open {
background: rgba(0, 0, 0, 0.85);
}
.dialogBackdropOpened {
opacity: 1 !important;
background: rgba(0, 0, 0, 0.1);
}
.dialog {
background-color: rgba(0, 0, 0, 0.95) !important;
box-shadow: 0 0 20px 4px black;
}
.mainDrawer {
background-color: rgba(0, 0, 0, 0.95);
box-shadow: none;
}
.playerStats {
background: rgba(28, 28, 28, 0.8);
box-shadow: 0 0 8px black !important;
}
.appfooter,
.playlistSectionButton {
background: rgba(6, 6, 6, 0.65) !important;
}
}
/* Chapters */
.chapterCard .innerCardFooter {
height: auto;
background: rgba(0, 0, 0, 0.7);
}
.chapterCard .innerCardFooter > .cardText:first-child {
float: left;
}
.chapterCard .innerCardFooter > .cardText:last-child {
float: right;
}
.chapterThumbContainer {
box-shadow: none !important;
position: relative;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.chapterThumb {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: var(--card-rounding);
-webkit-border-radius: var(--card-rounding);
-moz-border-radius: var(--card-rounding);
-ms-border-radius: var(--card-rounding);
-o-border-radius: var(--card-rounding);
}
.chapterThumbTextContainer {
position: relative;
padding: 0 1em;
border-radius: 0px 0px 10px 10px !important;
background: transparent !important;
}
.sliderBubble::after {
content: "";
position: absolute;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgba(0, 0, 0, 0.4);
bottom: -20px;
}
.selectionCommandsPanel {
background: rgba(24, 24, 24, 0.75);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-shadow: 0 0 44px black;
}
.dashboardSection .sectionTitleTextButton > .material-icons {
margin-left: 0.5em;
}
/* Live tv fix */
.absolutePageTabContent {
top: 0 !important;
}
/* Fix Playback report plugn text */
select#weeks,
select#max_data_age_select,
select#files_to_keep,
select#user_list_for_add {
color: white !important;
} |
|
|
|
Issue has been fixed use this instead: @import url("https://cdn.jsdelivr.net/gh/prayag17/JellySkin@11.3.8/default.css"); |
prayag17
added a commit
that referenced
this issue
Jan 22, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for fixing these issues so quickly, but there are still some minor issues. When I mark a video as watched, its image turns green. The second picture is a suggestion. There is a lot of space on the tablet. Moving this part of the information to the right of the title can improve space utilization and display more introductions. In the third picture, the singer and duration in white fonts are a little unclear on a white background, and it is better to change them to gray. The fourth picture is that sometimes the picture mask disappears, and I don't know how to reproduce it. Finally, the page on the phone is still not clickable. And they vary in length and are not as neat as web pages and tablets.
The text was updated successfully, but these errors were encountered: