Skip to content

Instantly share code, notes, and snippets.

@tommargar

tommargar/gist:6c3cace5149062fcc7ee429692f875b7

Created February 25, 2023 20:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tommargar/6c3cace5149062fcc7ee429692f875b7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tommargar/6c3cace5149062fcc7ee429692f875b7 to your computer and use it in GitHub Desktop.
Download ZIP
Scyfin film strip addon
Raw
gistfile1.txt
@import url('https://fonts.googleapis.com/css2?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&display=swap');
/*@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/main.css");*/
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.7/CSS/css-scyfin/scyfin-theme-backdrop.css');
@import url("https://cdn.jsdelivr.net/npm/jellyskin@12.2.0/dist/addons/gradients/sea.css");
/*
:root{
--accent1-light: #269dbb;
--accent1-dark: #234148;
--accent1-light-opacity1: rgba(169,91,194,.4);
--accent2-light: #0066db;
--accent2-dark: #002652;
}}
*/
/* Scyfin Fixes */
/* 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));
}
.detailsGroupItem {
min-width: 22em;
}
.layout-desktop .detailLogo {
top: 10vh !important;
}
.layout-desktop .detailPagePrimaryContainer {
max-width: 65vw;
padding-bottom: 1vh;
}
/* Darken the drawer bg */
.mainDrawer-scrollContainer
{
background: rgba(35, 35, 35, 0.5) !important;
border-radius: 15px !important;
backdrop-filter: blur(40px) !important;
}
/* 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;
}
.layout-desktop .detailPageContent {padding-top: 2vh;}
.layout-desktop .itemMiscInfo {
margin-top: 5vh !important;
}
.layout-desktop .nameContainer {
margin-top: -7.5vh !important;
/* padding-bottom: 2vh; */
}
/* Smaller cast images */
.card[data-type=Person] .cardBox,
.card[data-type=Actor],
.card[data-type=Actor] .cardBox,
.card[data-type=Actor] .cardScalable {
/* aspect-ratio: 2/3; */
width: 7vw;
overflow-clip-margin: 1vw;
margin-right: 1vw;
}
/* Font stuff */
html {
line-height: 1.6;
letter-spacing: 0.06em;
}
body {
font-family: 'Raleway', sans-serif;
}
body #itemDetailPage .parentName,
body #itemDetailPage .parentNameLast {
/* font-size: 1.2em !important; */
letter-spacing: 0.04em;
padding-right: 0.6em;
}
h1 {
font-weight: 900;
}
h2 {
font-weight: 200;
letter-spacing: 0.06em;
/* width: auto; */
}
h4.itemName.infoText.originalTitle {
font-variant-caps: all-petite-caps;
font-weight: 300;
letter-spacing: 0.1em;
}
.tagline {
font-style: italic;
}
.backgroundContainer.withBackdrop {
background-color: rgba(0, 0, 0, 0.11);
}
/*16x9 Show Episode Image (on Season Page */
.listItemImage-large {
height: 9vw;
width: 16vw;
border-radius: 15px !important;
}
.listItemImage-large-tv {
height: 16vw !important;
width: 30vw !important;
}
button.card.itemAction.chapterCard.overflowBackdropCard {
/* height: 40%; */
width: 20vh;
/* aspect-ratio: 21/9; */
transform: rotate(-90deg) translateY(18vh);
/* justify-content: center; */
/* align-items: center; */
margin-left: -8vh;
margin-right: 0vh;
margin-top: 4vh;
/* overflow: visible; */
margin-bottom: 4vh;
}
/* Film strip view */
#scenesCollapsible .emby-scroller {
--background: rgba(0, 0, 0, 0.9);
--size: 8px;
--holes: 2;
background-image:
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), transparent var(--size)),
linear-gradient(to bottom, transparent var(--size), var(--background) var(--size));
background-size:
calc(var(--size) * var(--holes)) var(--size),
calc(var(--size) * 2) var(--size),
calc(var(--size) * var(--holes)) var(--size),
calc(var(--size) * 2) var(--size),
100% calc(100% - var(--size) * 3);
background-repeat: repeat-x;
background-position: 0 var(--size), top left, 0 calc(100% - var(--size)), bottom left, 0 var(--size);
padding: calc(var(--size) * 3) calc(var(--size) * 2.5);
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; */
transform: rotate(90deg) translateY(-100%);
transform-origin: top left;
/* max-height: 39vh; */
/* display: table; */
/* max-width: 100%; */
padding-left: 4vh;
padding: 3.5vh;
/* margin: 5vh; */
width: 80vh;
/* height: 20vw; */
}
/* Film strip titling with Typewriter font */
#scenesContent > button > div > div > div.innerCardFooter {
display: flex;
font-size: 0.8em;
letter-spacing: 0em;
/* left: 50%; */
transform: rotate(180deg);
font-family: Courier New, MONOSPACE;
writing-mode: vertical-rl;
/* display: flex; */
justify-content: space-between;
flex-direction: column;
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;
}
/* Flex layout was reworked to grid for vertical strip view
I might have missed some views, and it's not optimized */
.detailPageContent {
grid-template-columns: 50vw 30vh auto;
grid-template-areas:
'details1 strip .'
'showsinfo showsinfo .'
'showsseason showsseason .'
'details2 details2 .'
'seriesSchedule seriesSchedule .'
'cast cast .'
'similar similar .';
display: grid;
}
.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;
}
/*pan the background for backdrops*/
@keyframes backgroundScroll {
0% {
background-position: 10% 10%;
opacity: 0;
background-size: 250% 250%;
-webkit-filter: blur(50px);
}
20% {
opacity: 1;
-webkit-filter: blur(30px);
}
50% {
background-position: 50% 50%;
background-size: 150% 150%;
-webkit-filter: blur(0px);
opacity: 0;
}
90% {
opacity: 1;
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
-webkit-filter: blur(50px);
background-size: 120% 120%;
background-position: 60% 60%;
}
}
.backdropImage {
background-size: 120% 120%;
opacity: 0;
background-position: 50% 50%;
animation: backgroundScroll 40s ease-in-out 2s;
}
@keyframes backgroundScrollmob {
0% {
background-position: 99% 1%;
opacity: 0;
-webkit-filter: blur(100px);
}
33% {
background-position: 50% 50%;
opacity: 1;
}
40% {
background-position: 1% 99%;
opacity: 0
}
66% {
background-position: 99% 50%;
opacity: 0;
}
75% {
background-position: 99% 99%;
opacity: 1;
-webkit-filter: blur(0px)
}
100% {
background-position: 50% 50%;
opacity: 0;
}
}
@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;
opacity:1;
transition: 1s ease;
}
#scenesContent>button>div:hover{
opacity:0.5;
transition: 0.5s ease;
}
/* Fixes the positioning of the scenes after rotating */
div#scenesContent {
margin-left: -16vh;
}
/* 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;
}
#nextUpSection {
grid-area: strip;
}
/*#specialsCollapsible,*/
#seriesScheduleSection{
grid-area: seriesSchedule;
}
#seriesScheduleList{
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: rgba(0, 0, 0, .4);
/* stroke-width: 1px; */
}
div#childrenCollapsible {
grid-area: details2;
}
#seriesScheduleList > div:nth-child(odd){
background-color: rgba(40, 40, 40, .7);
}
#seriesScheduleList > div:nth-child(even){
background-color: rgba(0, 0, 0, .5)
}
.listItem.listItem-border {
/* border-color: white !important; */
/* border: 1px !important; */
/* stroke-width: 5px; */
/* -webkit-text-stroke-color: aliceblue; */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment