Skip to content

Instantly share code, notes, and snippets.

@tommargar
Created April 25, 2023 18:52
Show Gist options
  • Select an option

  • Save tommargar/36249bea8e6504964c41bbde3414e44b to your computer and use it in GitHub Desktop.

Select an option

Save tommargar/36249bea8e6504964c41bbde3414e44b to your computer and use it in GitHub Desktop.
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Limelight&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Yesteryear&display=swap');
@import url('https://fonts.cdnfonts.com/css/showtime');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700;900&display=swap');
/*@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/main.css");*/
:root {
--buttonSize: min(40vw, 20em);
--background: rgba(0, 0, 0, 0.9);
--size: calc(var(--buttonSize) / 44);
--size2: calc(var(--size) * 1.5) !important;
--holes: 2;
--accent1-light: #269dbb;
--accent1-dark: #234148;
--accent1-light-opacity1: rgba(169, 91, 194, .4);
--accent2-light: #0066db;
--accent2-dark: #002652;
--trsn: all 0.5s ease 0s;
--black: #000;
--background1: red;
--background2: green;
--background3: blue;
--background4: cyan;
--background5: magenta;
--background6: yellow;
--bg-filmstrip: linear-gradient(to bottom, var(--background) var(--size), transparent var(--size)),
linear-gradient(to right, var(--background) var(--size), transparent var(--size)),
linear-gradient(to bottom, var(--background) var(--size), transparent var(--size)),
linear-gradient(to right, var(--background) var(--size), transparent var(--size)),
linear-gradient(to bottom, var(--background) var(--size), var(--background) var(--size));
--bg-pos: calc(var(--size) * 0.85) 0,
left top,
calc(100% - calc(var(--size) *0.8)) 0,
right top,
calc(var(--size) * 2) 0;
--bg-size: var(--size2) calc(var(--size) * var(--holes)), var(--size) calc(var(--size) * 2), var(--size2) calc(var(--size) * var(--holes)), var(--size) calc(var(--size) * 2), calc(100% - var(--size) * 4) 100% !important;
}
/*
*, *:before, *:after {
position: absolute;
}
*/
/* Glow for the logo */
.detailLogo.lazy.lazy-image-fadein-fast {
-webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));
filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));
/* display: block; */
/* width: auto; */
/* height: calc(5.5vh + 5.5vw); */
/* max-width: min(33em, 40vw); */
}
/* New layout for grid */
.layout-desktop .content.focuscontainer-x {
white-space: break-spaces !important;
}
.layout-desktop .detailsGroupItem {
border-radius: 15px !important;
max-width: 100% !important;
width: auto !important;
}
/* Font stuff */
html {
line-height: 1.6;
letter-spacing: 0.06em;
}
body {
font-family: 'Fira Sans', sans-serif;
}
h1 {
font-family: 'Limelight';
/* line-height: 1; */
/* font-size: 2.2em; */
/* padding-right: 0.6em; */
}
h2 {
font-weight: 200;
letter-spacing: 0.06em;
font-family: 'Bangers';
font-size: 2.1em;
/* background-color: var(--accent1-light-opacity1); */
}
h4.itemName.infoText.originalTitle {
/* font-variant-caps: all-petite-caps; */
/* font-weight: 300; */
/* letter-spacing: 0.1em; */
/* padding-left: 3vw; */
padding-top: 1vw;
}
.tagline {
/* font-style: italic; */
/* font-family: monospace; */
/* font-size: 1.6em; */
line-height: 1.3;
font-family: 'Bangers';
font-family: 'Special Elite', monospace;
/* max-width: 40ch; */
}
.backgroundContainer.withBackdrop {
background-color: rgba(0, 0, 0, 0.11);
}
/* Film strip view */
#scenesCollapsible .emby-scroller {
padding-bottom: calc(var(--size) * 2);
padding-top: calc(var(--size) * 2);
filter: drop-shadow(1px 1px 5px grey);
}
/* Film strip titling with Typewriter font */
#scenesContent>button>div>div>div.innerCardFooter {
display: flex;
font-size: 0.8em;
letter-spacing: 0em;
/* left: 50%; */
font-family: 'Special Elite', monospace;
letter-spacing: 0.2em;
/* display: flex; */
justify-content: space-between;
flex-direction: row;
/* height: 100% !important; */
width: 100% !important;
/* left: -2vw; */
/* z-index: 100; */
/* max-width: 20vw; */
background: transparent;
border-radius: 0px !important;
bottom: 0% !important;
margin: 0 !important;
flex-wrap: wrap;
align-items: center;
align-content: center;
border-radius: 0px !important;
}
.chapterThumbContainer {
--holes: 2;
background-image: var(--bg-filmstrip) !important;
background-size: var(--bg-size) !important;
background-repeat: repeat-y;
background-position: var(--bg-pos) !important;
padding: 0 calc(var(--size) * 4);
box-sizing: border-box;
-webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.3));
filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.3));
/* padding-bottom: 1vw; */
/* max-height: 39vh; */
/* display: table; */
/* max-width: 100%; */
/* margin: 5vh; */
/* height: 20vw; */
}
.chapterThumbTextContainer {
font-size: 0.8em;
letter-spacing: 0em;
/* left: 50%; */
font-family: Courier New, MONOSPACE;
align-content: space-between;
text-align: center;
/* background-color: transparent; */
/* left: -2vw; */
/* z-index: 100; */
/* max-width: 20vw; */
/* width: 100% !important; */
justify-content: space-between;
flex-direction: row;
display: flex;
flex-wrap: wrap;
height: min-content;
align-items: center;
align-content: center;
margin-left: 3vh;
margin-right: 3vh;
}
/*pan the background for backdrops*/
/*
.backdropImage {
background-size: 120% 120%;
opacity: 0;
background-position: 50% 50%;
animation: backgroundScroll 40s ease-in-out 2s;
}*/
.backdropImage {
filter: blur(8px) saturate(1.2) brightness(0.5);
}
/*
@media (max-width: 600px) {
.backdropImage {
background-size: 150% 150% cover;
opacity: 0;
background-position: 99% 1%;
animation: backgroundScrollmob 60s ease-in-out 1s;
}
}
*/
/* Fade In Out effect for film strip */
#scenesContent>button>div
{
margin: 0.1em!important;
filter: saturate(0.7) brightness(0.7) /*blur(2px)*/;
transition: 1s ease;
/* width: 14vw; */
/* margin-left: 0.1vw !important; */
/* margin-right: 0.1vw !important; */
/* aspect-ratio: 21/9; */
width: auto;
/* aspect-ratio: 2/1; */
/* height: auto; */
/* margin-right: 150px; */
}
div:not(.detailImageContainer .padded-left) > [data-type~="Movie"][data-mediatype~="Video"]:hover > div > div.cardScalable
{
/* margin: 0.4vh; */
filter: saturate(1.2) brightness(1.1);
transition: 0.5s ease;
}
div:not(.detailImageContainer .padded-left) > [data-type~="Movie"][data-mediatype~="Video"] > div > div.cardScalable
{
/* margin: 0.4vh; */
/* filter: saturate(0.7) brightness(0.7); */
transition: 1s ease;
}
/* --- LAYER #3-1 -- Flickering */
#scenesContent>button:hover>div,
div:not(.detailImageContainer .padded-left) > [data-type~="Movie"][data-mediatype~="Video"] > div > div.cardScalable:hover
{
/* filter: saturate(1.2) brightness(1.4); */
transition: 1s ease;
animation: flicker 0.66s steps(2) infinite;
}
#scenesContent>button:hover {
transition: 0.5s ease;
scale: 1.12;
transform: rotate(-90deg) translateY(calc(-0.2 * var(--buttonSize)));
z-index: 99;
-webkit-filter: drop-shadow(0px 0px 0.5vh rgba(255, 255, 255, 0.7));
filter: drop-shadow(0px 0px 1vh rgba(255, 255, 255, 0.7));
}
/* Black bg for film strip chapter text */
.innerCardFooter>.cardText {
background: rgba(0, 0, 0, .7);
/* overflow: visible; */
/* height: 100%; */
white-space: break-spaces;
/* width: fit-content; */
/* text-align: center; */
}
#seriesScheduleList {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: rgba(0, 0, 0, .4);
/* stroke-width: 1px; */
}
#seriesScheduleList>div:nth-child(odd) {
background-color: rgba(40, 40, 40, .7);
}
#seriesScheduleList>div:nth-child(even) {
background-color: rgba(0, 0, 0, .5)
}
/*.detailPageContent {
grid-template-columns: 94vw;
grid-template-areas:
'details1'
'strip'
'showsinfo'
'showsseason'
'details2'
'seriesSchedule'
'cast'
'similar';
display: grid;
}*/
div#itemBackdrop {
background-size: 100%;
background-position: 0 5vh;
}
#scenesContent>button:nth-child(odd):hover {
transform: translateX(0vh);
}
#scenesContent>button:nth-child(even):hover {
transform: translateX(0vh);
}
/*
button.card.itemAction.chapterCard.overflowBackdropCard:hover {
transform: rotate(0deg);
transition: 0.5s ease;
transform-origin: center;
width: calc(var(--buttonSize) * 1.2);
margin-left: calc(var(--buttonSize) / 8);
margin-right: calc(var(--buttonSize) / 5);
}
*/
@media (min-width: 70em) {
.detailPageContent {
grid-template-columns: 42vw 2vw 33vh;
grid-template-areas:
'details1 . strip '
'showsinfo showsinfo . '
'showsseason showsseason . '
'details2 details2 details2'
'seriesSchedule seriesSchedule seriesSchedule '
'cast cast cast '
'similar similar similar';
display: grid;
/* gap: 1vw; */
}
#scenesCollapsible .emby-scroller {
transform: rotate(90deg) translateY(-80%);
transform-origin: top left;
width: calc(var(--buttonSize) * 4 * 0.5);
padding-top: calc(var(--buttonSize) * 0.35);
padding-bottom: calc(var(--buttonSize) * 0.35);
/* padding-left: calc(1 * var(--size)); */
/* padding-right: calc(1.7 * var(--size)); */
/* padding-right: 0px; */
/* margin-bottom: 100px; */
}
div#scenesCollapsible {
min-height: calc(var(--buttonSize) * 4 * 0.4975 + 2vw);
}
button.card.itemAction.chapterCard.overflowBackdropCard {
transform: rotate(-90deg) translateY(calc(-44.2%));
/* margin-right: calc(var(--buttonSize) * -0.51); */
margin-top: calc(var(--size) * 4);
margin-bottom: calc(var(--size) * 4);
margin-right: calc(-0.5 * var(--buttonSize) + 0vh);
/* margin-right: calc(-0.47 * var(--buttonSize)); */
/* width: var(--buttonSize) !important; */
width: 50%;
}
#scenesContent>button>div {
margin-top: 0.5vh;
margin-bottom: 0.5vh !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#scenesContent>button:nth-child(1):hover,
#scenesContent>button:nth-child(4n+5):hover {
transform: rotate(-90deg) translateY(-25%);
}
#scenesContent>button:nth-child(4n+4):hover,
#scenesContent>button:nth-last-child(1):hover {
transform: rotate(-90deg) translateY(calc(-0.33 * var(--buttonSize)));
}
}
#scenesContent>button>div>div>div.innerCardFooter {
/* transform: rotate(180deg); */
font-family: 'Special Elite', monospace;
/* writing-mode: vertical-rl; */
flex-direction: column;
height: 100% !important;
}
.verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container {
grid-area: details2;
}
.collectionItems {
grid-area: details2;
}
div#castCollapsible {
grid-area: cast;
}
div#similarCollapsible {
grid-area: similar;
}
.detailSection .detailSectionContent {
/* max-width: 44em; */
grid-area: details1;
/*max-width: 47em;*/
}
#nextUpSection {
grid-area: strip;
}
/*#specialsCollapsible,*/
#seriesScheduleSection {
grid-area: seriesSchedule;
}
div#childrenCollapsible {
grid-area: details2;
}
.nextUpSection.verticalSection.detailVerticalSection {
grid-area: strip;
}
div#scenesCollapsible {
grid-area: strip;
/* min-height: calc(var(--buttonSize) * 4 * 0.5 + 6vh); */
/* height: 640px; */
}
h1.itemName.infoText.parentNameLast.withOriginalTitle {
/* font-family: 'Limelight'; */
/* font-size: 2.8em; */
margin-bottom: -0.3em;
}
#itemDetailPage>div.detailPageWrapperContainer.padded-bottom-page>div.detailPagePrimaryContainer.padded-left.padded-right.detailRibbon>div.infoWrapper>div.detailImageContainer.padded-left>div>div>div {
/* width: 20vw; */
animation: none;
}
.label {
/* font-weight: 700; */
font-family: 'Limelight';
}
/* ??? */
#seriesTab>div>div>div>div.cardFooter>div.cardText.cardTextCentered.cardText-secondary {
font-family: 'Bangers';
font-size: 0.9em;
width: 6em;
white-space: break-spaces;
line-height: 1.1;
text-align: right;
width: max-content;
overflow: initial;
}
.infoWrapper {
/* width: 150px !important; */
/* display: flex; */
/* margin-bottom: -13px; */
/* white-space: break-spaces; */
/* flex-direction: column; */
/* align-items: flex-start; */
align-content: space-between;
}
.emby-button-foreground {
font-family: 'Limelight';
font-size: 1.3em;
letter-spacing: 0.05em;
}
.skinHeader-withBackground,
.skinHeader.semiTransparent {
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px) brightness(0.8) saturate(0.5) !important;
}
.itemName {
/* white-space: break-spaces; */
font-weight: 400;
/* font-size: 2.7em; */
}
#castContent>div>div>div.cardText.cardTextCentered.cardText-first>button {
font-family: 'Satisfy';
white-space: break-spaces;
font-size: 1.4em;
margin-top: 0.2em;
min-height: 2.2em;
margin-bottom: 0.1em;
line-height: 1;
}
/* --- LAYER #1 -- Film Strip with padding */
#items>div>div.itemsContainer.vertical-wrap.lazy.padded-left.padded-right>div:hover, div:not(.detailImageContainer) > [data-type~="Movie"][data-mediatype~="Video"]:hover
{
transform: translateY(11%);
background-image: var(--bg-filmstrip) !important;
background-size: var(--size2) calc(var(--size) * var(--holes)), var(--size) calc(var(--size) * 2), var(--size2) calc(var(--size) * var(--holes)), var(--size) calc(var(--size) * 2), calc(100% - var(--size) * 6) 100% !important;
background-repeat: repeat-y !important;
background-position: calc(var(--size) * 0.85) 0, left top, calc(100% - calc(var(--size) *2.8)) 0, calc(100% - 2 * var(--size)) top, calc(var(--size) * 2) 0 !important;
/* padding: 0 calc(var(--size) * 1.5) 0 calc(var(--size) * 1.5 + 1.2em); */
-webkit-filter: drop-shadow(0px 0px 0.5vh rgba(255, 255, 255, 0.7));
filter: drop-shadow(0px 0px 0.5vh rgba(255, 255, 255, 0.7));
/* box-sizing: border-box; */
/* aspect-ratio: 21/9; */
/* height: auto; */
z-index: 999;
/* scale: 1.25; */
/* transform: translateY(0px); */
/* height: max-content; */
max-height: 100%;
/* width: min-content; */
/* white-space: break-spaces !important; */
scale: 1.3;
transform-origin: center;
}
button.card.itemAction.chapterCard.overflowBackdropCard {
/* width: calc(var(--buttonSize) - 0vh); */
/* width: 50%; */
transition: 0.5s ease;
background-image: var(--bg-filmstrip) !important;
background-size: var(--bg-size) !important;
background-repeat: repeat-y !important;
background-position: var(--bg-pos) !important;
padding: 0vh calc(var(--size) * 3);
/* height: calc(var(--buttonSize) /2); */
}
#castContent>div>div>div.cardText.cardTextCentered.cardText-secondary {
white-space: break-spaces;
line-height: 1.3;
}
/* change */
#seriesTab>div>div>div>div.cardFooter {
display: flex;
align-content: space-between;
justify-content: space-between;
align-items: center;
}
@media (min-width: 100em) {
.portraitCard,
.squareCard {
width: 14.285%;
}
}
p.overview.detail-clamp-text {
/* max-width: 80ch; */
-webkit-line-clamp: 7;
}
.mainDrawer.transition.touch-menu-la.drawer-open {
background-color: rgba(35, 35, 35, 0.7) !important;
/* border-radius: 50px !important; */
backdrop-filter: blur(10px) !important;
}
button.alphaPickerButton.alphaPickerButton-vertical {
font-family: 'Bangers';
font-size: 1.2em;
transition: ease 0.5s;
}
button.alphaPickerButton.alphaPickerButton-vertical:hover {
background-color: antiquewhite;
color: burlywood;
scale: 1.3;
}
button.alphaPickerButton.alphaPickerButton-vertical.alphaPickerButton-selected {
background-color: blueviolet;
scale: 1.3;
transition: ease 0.5s;
}
button.alphaPickerButton.alphaPickerButton-vertical.alphaPickerButton-selected:hover {
background-color: grey;
color: antiquewhite;
}
/*
OLD FILM EFFECT
<div class="content">
<div class='film'> <-- image
<div class="effect">
<div class="grain"></div>
*, *:before, *:after {
position: absolute;
}
*/
div:not(.detailImageContainer .padded-left) > [data-type~="Movie"][data-mediatype~="Video"] > div > div.cardScalable > div.cardOverlayContainer.itemAction
{
background: transparent;
}
/* --- LAYER #3-3 -- Blur */
#scenesContent>button>div>div>div.innerCardFooter,
/*div [data-type~="Movie"][data-mediatype~="Video"]:hover > div > div.cardScalable > div.cardOverlayContainer.itemAction,*/
/*div [data-type~="Movie"][data-mediatype~="Video"]:hover > div > div.cardScalable > a:after,*/
.film,
.effect {
content: "";
width: 100%;
height: 100%;
filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
background: transparent;
}
/* --- LAYER #3-4 -- Film Scratch */
#scenesContent>button:hover>div>div>div.innerCardFooter:after,
div:not(.detailImageContainer .padded-left) > [data-type~="Movie"][data-mediatype~="Video"] > div > div.cardScalable > div.cardOverlayContainer.itemAction:hover::after,
.film:after,
.effect:after {
position: absolute;
content: '';
width: 120%;
height: 100%;
top: 0;
left: 0;
padding-left: 100px;
opacity: 0.5;
animation: film-scratch 0.45s steps(1) infinite;
background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
}
#scenesContent>button:hover>div>div>div.innerCardFooter:after,
div:not(.detailImageContainer .padded-left) > [data-type~="Movie"][data-mediatype~="Video"]:hover > div > div.cardScalable > div.cardOverlayContainer.itemAction:after
{
position: absolute;
left: 30%;
animation: effect-scratch 2s infinite;
}
.grain {
width: 100%;
height: 100%;
}
/* --- LAYER #3-2 -- Grain */
#scenesContent>button:hover>div>div>div.innerCardFooter:before,
div:not(.detailImageContainer .padded-left) > [data-type~="Movie"][data-mediatype~="Video"] > div > div.cardScalable > div.cardOverlayContainer.itemAction:hover::before,
.grain:after
{
position: absolute;
content: '';
width: 110%;
height: 110%;
top: -5%;
left: -5%;
opacity: .25;
background-image:
repeating-conic-gradient(var(--black) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
repeating-conic-gradient(var(--black) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
animation: grain 0.5s steps(1) infinite;
filter: drop-shadow(0px 0px 1px black);
}
@keyframes flicker {
0%,
100% {
filter: saturate(1) brightness(1);
}
50% {
filter: saturate(1.15) brightness(1.15);
}
}
@keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-1%, -1%);
}
20% {
transform: translate(1%, 1%) rotate(180deg);
}
30% {
transform: translate(-2%, -2%);
}
40% {
transform: translate(3%, 3%) rotate(180deg);
}
50% {
transform: translate(-3%, -3%);
}
60% {
transform: translate(4%, 4%) rotate(180deg);
}
70% {
transform: translate(-4%, -4%);
}
80% {
transform: translate(2%, 2%) rotate(180deg);
}
90% {
transform: translate(-3%, -3%);
}
}
@keyframes film-scratch {
0%,
100% {
transform: translateX(0);
opacity: 0.5;
}
10% {
transform: translateX(-1%);
}
20% {
transform: translateX(1%);
}
30% {
transform: translateX(-2%);
opacity: 0.75;
}
40% {
transform: translateX(3%);
}
50% {
transform: translateX(-3%);
opacity: 0.5;
}
60% {
transform: translateX(8%);
}
70% {
transform: translateX(-3%);
}
80% {
transform: translateX(10%);
opacity: 0.25;
}
90% {
transform: translateX(-2%);
}
}
@keyframes effect-scratch {
0% {
transform: translateX(0);
opacity: 0.75;
}
10% {
transform: translateX(-1%);
}
20% {
transform: translateX(1%);
}
30% {
transform: translateX(-2%);
}
40% {
transform: translateX(3%);
}
50% {
transform: translateX(-3%);
opacity: 0.5;
}
60% {
transform: translateX(8%);
}
70% {
transform: translateX(-3%);
}
80% {
transform: translateX(10%);
opacity: 0.25;
}
90% {
transform: translateX(20%);
}
100% {
transform: translateX(30%);
}
}
/**** OLD FILM EFFECT END ****/
#scenesCollapsible>h2 {
padding-top: 0;
}
.cardOverlayButton-br.flex {
background-color: rgba(30, 30, 30, 0.8);
}
/* --- LAYER #2 -- Align margins */
/* Grid for hover state to re-align the caption */
/* #homeTab>div>div.verticalSection.section1.emby-scroller-container>div.padded-top-focusscale.padded-bottom-focusscale.emby-scroller>div>div:hover>div,
#homeTab>div>div.section6>div>div.padded-top-focusscale.padded-bottom-focusscale.emby-scroller>div>div:hover>div,
/*#collectionsTab > div.itemsContainer.vertical-wrap.centered.padded-left.padded-right > div:hover > div,*/
/*#suggestionsTab>div.recommendations>div>div>div:hover>div,*/
div:not(.detailImageContainer .padded-left) > [data-type~="Movie"][data-mediatype~="Video"]:hover > div
{
margin-left: calc(3 * var(--size)) !important;
margin-right: calc(5 * var(--size)) !important;
display: grid;
margin-bottom: 0 !important;
/* transition: none; */
}
#moviesTab>div.itemsContainer>div:hover>div>div.cardFooter>div {
white-space: break-spaces;
font-family: 'Special Elite';
font-size: 0.8em;
line-height: 150%;
/* scale: 0.5; */
}
div:not(.detailImageContainer .padded-left) > [data-type~="Movie"][data-mediatype~="Video"]:hover >div>div.cardText.cardTextCentered.cardText-first
{
font-size: 1em;
font-family: 'Limelight';
white-space: break-spaces;
line-height: 1.1;
/* margin-bottom: 0.1em; */
margin-top: 0.3em;
}
div:not(.detailImageContainer .padded-left) > [data-type~="Movie"][data-mediatype~="Video"]:hover >div>div.cardText.cardTextCentered.cardText-secondary
{
font-family: 'Bangers';
/* font-size: 1.1em; */
margin-top: 0em;
}
div:not(.detailImageContainer .padded-left) > [data-type~="Movie"][data-mediatype~="Video"] :hover > div {
margin-right: 0;
}
div:not(.detailImageContainer .padded-left) > [data-type~="Movie"][data-mediatype~="Video"] a:hover {
background: none;
transform: none;
filter: none;
}
#itemDetailPage > div.detailPageWrapperContainer.padded-bottom-page > div.detailPagePrimaryContainer.padded-left.padded-right.detailRibbon > div.infoWrapper > div.detailImageContainer.padded-left > div:hover > div {
margin-right: inherit !important;
margin-left: inherit !important;
}
#itemDetailPage > div.detailPageWrapperContainer.padded-bottom-page > div.detailPagePrimaryContainer.padded-left.padded-right.detailRibbon > div.infoWrapper > div.detailImageContainer.padded-left > div > div > div > a:hover {
/* background: initial; */
background-position: 50%;
background-position-x: 50%;
background-position-y: center;
background-size: cover;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment