/* Add-on: Media Bar plugin support nightly for the ElegantFin Theme for Jellyfin by lscambo13 */ /* this styles the media bar plugin - start */ .play-button::before, .detail-button::before, .favorite-button::before, .favorite-button.favorited::before { font-weight: 400; } .play-button { font-family: "Inter"; font-size: 1em; font-weight: 500; } .backdrop, .backdrop-container, .backdrop-overlay { mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0)); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0)); background-color: transparent; } .backdrop { transform-origin: center left; } .rating-value { flex-wrap: wrap; justify-content: center; } .age-rating { font-size: 0.8em; } #slides-container { width: calc(100vw - (2 * var(--sidePadding))); height: 62%; top: var(--appBarHeight); border: var(--defaultBorder); border-radius: var(--largerRadius); transition: all 0.125s, border 0s; user-select: none; } .logo-container { top: 10vh; } .backdrop, .backdrop-container, .backdrop-overlay { mask-image: none; -webkit-mask-image: none; } .backdrop-overlay { background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent); } @media only screen and (max-width: 767px) and (orientation: portrait) { .button-container { top: calc(50% + 20vh); transform: translateX(-50%) scale(0.8); } .tomato-rating { display: none; } .dots-container { top: calc(50% + 19vh); } .backdrop { transform-origin: center; } } @media (min-width: 75em) { #slides-container { top: calc(0.5 * var(--appBarHeight)); } } @media only screen and (max-height: 767px) and (orientation: landscape) { #slides-container { height: 57%; } .logo-container { top: 3%; } } @media only screen and (max-width: 767px) and (orientation: portrait) { .logo-container { top: 50%; } } /* this styles the media bar plugin - end */