Thanks for fixing these issues so quickly, but there are still some minor issues. When

Bug: A few more problems,about prayag17/jellyskin

Comments (23)

prayag17 commented on June 3, 2024

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

from jellyskin.

shanyan-wcx commented on June 3, 2024

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?

from jellyskin.

prayag17 commented on June 3, 2024

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)

from jellyskin.

shanyan-wcx commented on June 3, 2024

Anyway, please remove the green, it's so ugly that even a watched tag is better than green.

from jellyskin.

prayag17 commented on June 3, 2024

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?

from jellyskin.

shanyan-wcx commented on June 3, 2024

I think it would be nice to have a little watched tab with a colour gradient next to the title.

from jellyskin.

prayag17 commented on June 3, 2024

I will try implementing it but I don't think it is possible

from jellyskin.

shanyan-wcx commented on June 3, 2024

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.

from jellyskin.

shanyan-wcx commented on June 3, 2024

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?

from jellyskin.

prayag17 commented on June 3, 2024

I don't see jellyfin changing color for the dark channel logo, I have fixed all of the issues here, can you confirm?
For now, can you copy and paste the content of https://raw.githubusercontent.com/prayag17/JellySkin/master/default.css

from jellyskin.

shanyan-wcx commented on June 3, 2024

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?

from jellyskin.

prayag17 commented on June 3, 2024

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

from jellyskin.

shanyan-wcx commented on June 3, 2024

Because I'm in China, I can't connect to raw.githubusercontent.com, so can you use cdn.jsdelivr.net?

from jellyskin.

shanyan-wcx commented on June 3, 2024

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.

from jellyskin.

shanyan-wcx commented on June 3, 2024

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.

from jellyskin.

shanyan-wcx commented on June 3, 2024

And why did the program become like this?

from jellyskin.

prayag17 commented on June 3, 2024

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;
}

from jellyskin.

shanyan-wcx commented on June 3, 2024

It's all fixed, except that the duration of the album on the tablet is still white.

from jellyskin.

shanyan-wcx commented on June 3, 2024

Can you make the black rectangle of the selected song a little more beautiful?

from jellyskin.

prayag17 commented on June 3, 2024

the duration of the album on the tablet is still white.

Can you share an image?

from jellyskin.

prayag17 commented on June 3, 2024

Can you make the black rectangle of the selected song a little more beautiful?

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;
}

from jellyskin.

shanyan-wcx commented on June 3, 2024

from jellyskin.

prayag17 commented on June 3, 2024

Issue has been fixed use this instead:

  @import url("https://cdn.jsdelivr.net/gh/prayag17/[email protected]/default.css");

from jellyskin.

Bug: A few more problems about jellyskin HOT 23 CLOSED

Comments (23)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs