MaximilianGT500/scyfin
1
0
Fork 0
mirror of https://github.com/loof2736/scyfin.git synced 2025-11-04 08:28:52 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'loof2736:main' into main

Browse Source
This commit is contained in:
Jam 2024-05-29 20:02:06 +01:00 committed by GitHub
commit 0c45181a49
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 326 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
CSS/css-scyfin/disable-static-drawer-backdrop.css
View File

@ -1,8 +1,7 @@
/* Reset size of Jellyfin logo */ /* Reset size of Jellyfin logo */
.layout-desktop .pageTitleWithLogo { .layout-desktop .pageTitleWithLogo {
margin-left: 25px !important;
height: 30px !important; height: 30px !important;
margin-top: 0px !important; width: 100px !important;
} }
/* Un-static left drawer */ /* Un-static left drawer */
@ -71,29 +70,28 @@
margin-right: 3.3% !important; margin-right: 3.3% !important;
} }
/* Background for home, hamburger, and Jellyfin */ /* Background for top left buttons */
.layout-desktop:not(.transparentDocument) .headerLeft::before { .layout-desktop .headerLeft {
content: ""; padding: 2px 15px 2px 2px !important;
position: absolute; top: -3px !important;
top: 39px;
left: 10px;
width: 245px;
height: 45px;
background-color: rgba(35, 35, 35, 0.5) !important; background-color: rgba(35, 35, 35, 0.5) !important;
border-radius: 50px !important; border-radius: 50px !important;
backdrop-filter: blur(50px) !important; backdrop-filter: blur(50px) !important;
} }
.headerLeft {
flex-grow: 0 !important;
-webkit-flex-grow: 0 !important;
}
.headerRight {
position: absolute !important;
right: 12px !important;
}
/* Reduce the size of the header when the logo is not present */ /* Reduce the size of the header when the logo is not present */
.layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before { .layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
width: 160px; width: 160px;
} }
.layout-desktop .headerLeft {
padding: 2px !important;
top: -3px !important;
}
.layout-desktop .pageTitle { .layout-desktop .pageTitle {
z-index: 1099 !important; z-index: 1099 !important;
} }

28
CSS/css-scyfin/disable-static-drawer.css
View File

@ -1,8 +1,7 @@
/* Reset size of Jellyfin logo */ /* Reset size of Jellyfin logo */
.layout-desktop .pageTitleWithLogo { .layout-desktop .pageTitleWithLogo {
margin-left: 25px !important;
height: 30px !important; height: 30px !important;
margin-top: 0px !important; width: 100px !important;
} }
/* Un-static left drawer */ /* Un-static left drawer */
@ -65,29 +64,28 @@
margin-right: 3.3% !important; margin-right: 3.3% !important;
} }
/* Background for home, hamburger, and Jellyfin */ /* Background for top left buttons */
.layout-desktop:not(.transparentDocument) .headerLeft::before { .layout-desktop .headerLeft {
content: ""; padding: 2px 15px 2px 2px !important;
position: absolute; top: -3px !important;
top: 39px;
left: 10px;
width: 245px;
height: 45px;
background-color: rgba(35, 35, 35, 0.5) !important; background-color: rgba(35, 35, 35, 0.5) !important;
border-radius: 50px !important; border-radius: 50px !important;
backdrop-filter: blur(50px) !important; backdrop-filter: blur(50px) !important;
} }
.headerLeft {
flex-grow: 0 !important;
-webkit-flex-grow: 0 !important;
}
.headerRight {
position: absolute !important;
right: 12px !important;
}
/* Reduce the size of the header when the logo is not present */ /* Reduce the size of the header when the logo is not present */
.layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before { .layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
width: 160px; width: 160px;
} }
.layout-desktop .headerLeft {
padding: 2px !important;
top: -3px !important;
}
.layout-desktop .pageTitle { .layout-desktop .pageTitle {
z-index: 1099 !important; z-index: 1099 !important;
} }

160
CSS/css-scyfin/scyfin-theme-backdrop.css
View File

@ -1,9 +1,7 @@
/* Increase size of Jellyfin logo */ /* Increase size of Jellyfin logo */
.layout-desktop .pageTitleWithLogo { .layout-desktop .pageTitleWithLogo {
margin-left: 15px !important; margin-left: 10px !important;
width: 100px !important;
height: 40px !important; height: 40px !important;
margin-top: 5px !important;
} }
/* Static left drawer */ /* Static left drawer */
@ -101,16 +99,34 @@
/* Floating progress bar */ /* Floating progress bar */
.innerCardFooter { .innerCardFooter {
border-radius: 15px !important;
width: 100px !important;
margin-left: 5px !important;
margin-bottom: 5px !important;
padding: 5px !important;
bottom: 0% !important;
background: rgba(0,0,0,0.5) !important;
}
.fullInnerCardFooter {
bottom: 5% !important; bottom: 5% !important;
width: 90% !important; width: 90% !important;
margin: auto !important; margin: auto !important;
border-radius: 100px !important; border-radius: 100px !important;
padding: 0px !important;
} }
.itemProgressBar { .itemProgressBar {
height: 8px !important; height: 10px !important;
background: rgba(35,35,35,0.75) !important;
backdrop-filter: blur(2px) !important;
} }
.innerCardFooterClear { .innerCardFooterClear {
background-color: black !important; background-color: none !important;
}
.innerCardFooter .cardText {
padding: 0 0 0 10px !important
}
.itemProgressBarForeground {
border-radius: 100px !important;
} }
/* Green watched indicator */ /* Green watched indicator */
@ -172,6 +188,9 @@
.layout-tv .skinHeader { .layout-tv .skinHeader {
padding-top: 1.5em !important; padding-top: 1.5em !important;
} }
.layout-tv .skinHeader {
padding-bottom: 10px !important;
}
/* Rounded header buttons */ /* Rounded header buttons */
.headerTabs, .headerTabs,
.headerRight { .headerRight {
@ -185,9 +204,8 @@
.layout-tv .headerRight { .layout-tv .headerRight {
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
.layout-desktop .headerTabs, .layout-desktop .headerTabs {
.layout-desktop .headerRight { margin-left: 160px !important;
margin-left: 250px !important;
} }
/* Button height */ /* Button height */
.headerRight, .headerRight,
@ -198,6 +216,9 @@
.layout-desktop .headerRight { .layout-desktop .headerRight {
padding: 0px 5px !important; padding: 0px 5px !important;
} }
.layout-tv .headerRight {
padding: 20px 10px !important;
}
/* Move left header back up */ /* Move left header back up */
.layout-desktop .headerLeft .layout-desktop .headerLeft
.layout-tv .headerLeft { .layout-tv .headerLeft {
@ -499,7 +520,7 @@
/* Player modifications */ /* Player modifications */
.upNextContainer, .toastVisible, .sliderBubble { .upNextContainer, .toastVisible {
backdrop-filter: blur(50px) !important; backdrop-filter: blur(50px) !important;
} }
.upNextContainer { .upNextContainer {
@ -512,14 +533,42 @@
} }
.sliderBubble { .sliderBubble {
border-radius: 15px !important; border-radius: 15px !important;
background-color: rgba(0,0,0,0.5) !important; background-color: rgba(0,0,0,0.6) !important;
backdrop-filter: blur(10px) !important;
} }
.mdl-slider-background-flex {
height: 10px !important;
margin-top: -5px !important;
border-radius: 100px !important;
background: hsla(0,0%,100%,.2) !important;
}
.mdl-slider-background-lower {
border-radius: 100px !important;
}
.mdl-slider::-moz-range-thumb {
background: rgba(0,0,0,0) !important;
}
.mdl-slider-background-upper {
display: none !important;
}
/* Support for Jellyscrub plugin */ /* Support for Jellyscrub plugin */
.chapterThumbContainer { .chapterThumbContainer {
background: none !important;
border-radius: 15px !important; border-radius: 15px !important;
} }
.chapterThumb {
border-radius: 15px !important;
margin-bottom: 40px !important;
}
.chapterThumbTextContainer { .chapterThumbTextContainer {
background: rgba(35,35,35,0.5) !important; background: none !important;
}
.chapterThumbText {
text-align: center !important;
}
.chapterThumbText-dim {
display: none !important;
} }
@ -570,10 +619,99 @@
} }
} }
/* Fixes for TV Layout */ /* Fixes for TV Layout */
.layout-tv .sectionTabs { .layout-tv .sectionTabs {
width: auto !important; width: auto !important;
} }
.layout-tv .headerLeft { .layout-tv .headerLeft {
padding: 5px !important; padding: 5px !important;
}
/* Login page */
.layout-desktop #loginPage {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
background: #181818 !important;
width: 400px !important;
border-radius: 25px !important;
padding: 50px !important;
}
.layout-desktop #loginPage .manualLoginForm .btnCancel {
position: absolute !important;
background: none !important;
width: 100px !important;
margin-left: -10px !important;
margin-top: 70px !important;
text-align: left !important;
}
.layout-desktop #loginPage .visualLoginForm {
position: relative !important;
background: #181818 !important;
z-index: 1000 !important;
}
.layout-desktop #loginPage .btnForgotPassword {
background: none !important;
font-weight: normal !important;
width: 150px !important;
text-align: right !important;
position: absolute !important;
margin-left: 255px !important;
margin-top: -195px !important;
font-size: smaller !important;
color: rgba(255, 255, 255, 0.5) !important;
z-index: 1 !important;
}
.layout-desktop #loginPage .disclaimerContainer {
top: 130px !important;
position: relative !important;
left: -50px !important;
width: 500px !important;
margin-top: -35px !important;
}
.layout-desktop #loginPage .squareCard {
width: 25% !important;
font-size: smaller !important;
}
@media (max-width: 100em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
.layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
width: 600px !important;
}
.layout-desktop #loginPage .btnForgotPassword {
margin-left: 450px !important;
}
.layout-desktop #loginPage .disclaimerContainer {
width: 700px !important;
}
}
@media (max-width: 87.5em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
}
@media (max-width: 75em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
}
@media (max-width: 43.75em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
}
/* Dialog box */
.layout-desktop .dialog {
padding: 0px 10px 10px 10px !important;
} }

157
CSS/css-scyfin/scyfin-theme.css
View File

@ -1,9 +1,7 @@
/* Increase size of Jellyfin logo */ /* Increase size of Jellyfin logo */
.layout-desktop .pageTitleWithLogo { .layout-desktop .pageTitleWithLogo {
margin-left: 15px !important; margin-left: 10px !important;
width: 100px !important;
height: 40px !important; height: 40px !important;
margin-top: 5px !important;
} }
/* Static left drawer */ /* Static left drawer */
@ -101,16 +99,34 @@
/* Floating progress bar */ /* Floating progress bar */
.innerCardFooter { .innerCardFooter {
border-radius: 15px !important;
width: 100px !important;
margin-left: 5px !important;
margin-bottom: 5px !important;
padding: 5px !important;
bottom: 0% !important;
background: rgba(0,0,0,0.5) !important;
}
.fullInnerCardFooter {
bottom: 5% !important; bottom: 5% !important;
width: 90% !important; width: 90% !important;
margin: auto !important; margin: auto !important;
border-radius: 100px !important; border-radius: 100px !important;
padding: 0px !important;
} }
.itemProgressBar { .itemProgressBar {
height: 8px !important; height: 10px !important;
background: rgba(35,35,35,0.75) !important;
backdrop-filter: blur(2px) !important;
} }
.innerCardFooterClear { .innerCardFooterClear {
background-color: black !important; background-color: none !important;
}
.innerCardFooter .cardText {
padding: 0 0 0 10px !important
}
.itemProgressBarForeground {
border-radius: 100px !important;
} }
/* Green watched indicator */ /* Green watched indicator */
@ -174,6 +190,9 @@ html {
.layout-tv .skinHeader { .layout-tv .skinHeader {
padding-top: 1.5em !important; padding-top: 1.5em !important;
} }
.layout-tv .skinHeader {
padding-bottom: 10px !important;
}
/* Rounded header buttons */ /* Rounded header buttons */
.headerTabs, .headerTabs,
.headerRight { .headerRight {
@ -187,9 +206,8 @@ html {
.layout-tv .headerRight { .layout-tv .headerRight {
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
.layout-desktop .headerTabs, .layout-desktop .headerTabs {
.layout-desktop .headerRight { margin-left: 160px !important;
margin-left: 250px !important;
} }
/* Button height */ /* Button height */
.headerRight, .headerRight,
@ -225,7 +243,7 @@ html {
/* Player modifications */ /* Player modifications */
.upNextContainer, .toastVisible, .sliderBubble { .upNextContainer, .toastVisible {
backdrop-filter: blur(50px) !important; backdrop-filter: blur(50px) !important;
} }
.upNextContainer { .upNextContainer {
@ -238,14 +256,42 @@ html {
} }
.sliderBubble { .sliderBubble {
border-radius: 15px !important; border-radius: 15px !important;
background-color: rgba(0,0,0,0.5) !important; background-color: rgba(0,0,0,0.6) !important;
backdrop-filter: blur(10px) !important;
} }
.mdl-slider-background-flex {
height: 10px !important;
margin-top: -5px !important;
border-radius: 100px !important;
background: hsla(0,0%,100%,.2) !important;
}
.mdl-slider-background-lower {
border-radius: 100px !important;
}
.mdl-slider::-moz-range-thumb {
background: rgba(0,0,0,0) !important;
}
.mdl-slider-background-upper {
display: none !important;
}
/* Support for Jellyscrub plugin */ /* Support for Jellyscrub plugin */
.chapterThumbContainer { .chapterThumbContainer {
background: none !important;
border-radius: 15px !important; border-radius: 15px !important;
} }
.chapterThumb {
border-radius: 15px !important;
margin-bottom: 40px !important;
}
.chapterThumbTextContainer { .chapterThumbTextContainer {
background: rgba(35,35,35,0.5) !important; background: none !important;
}
.chapterThumbText {
text-align: center !important;
}
.chapterThumbText-dim {
display: none !important;
} }
@ -550,10 +596,99 @@ html {
} }
} }
/* Fixes for TV Layout */ /* Fixes for TV Layout */
.layout-tv .sectionTabs { .layout-tv .sectionTabs {
width: auto !important; width: auto !important;
} }
.layout-tv .headerLeft { .layout-tv .headerLeft {
padding: 5px !important; padding: 5px !important;
}
/* Login page */
.layout-desktop #loginPage {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
background: #181818 !important;
width: 400px !important;
border-radius: 25px !important;
padding: 50px !important;
}
.layout-desktop #loginPage .manualLoginForm .btnCancel {
position: absolute !important;
background: none !important;
width: 100px !important;
margin-left: -10px !important;
margin-top: 70px !important;
text-align: left !important;
}
.layout-desktop #loginPage .visualLoginForm {
position: relative !important;
background: #181818 !important;
z-index: 1000 !important;
}
.layout-desktop #loginPage .btnForgotPassword {
background: none !important;
font-weight: normal !important;
width: 150px !important;
text-align: right !important;
position: absolute !important;
margin-left: 255px !important;
margin-top: -195px !important;
font-size: smaller !important;
color: rgba(255, 255, 255, 0.5) !important;
z-index: 1 !important;
}
.layout-desktop #loginPage .disclaimerContainer {
top: 130px !important;
position: relative !important;
left: -50px !important;
width: 500px !important;
margin-top: -35px !important;
}
.layout-desktop #loginPage .squareCard {
width: 25% !important;
font-size: smaller !important;
}
@media (max-width: 100em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
.layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
width: 600px !important;
}
.layout-desktop #loginPage .btnForgotPassword {
margin-left: 450px !important;
}
.layout-desktop #loginPage .disclaimerContainer {
width: 700px !important;
}
}
@media (max-width: 87.5em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
}
@media (max-width: 75em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
}
@media (max-width: 43.75em) {
.layout-desktop #loginPage .squareCard {
width: 20% !important;
}
}
/* Dialog box */
.layout-desktop .dialog {
padding: 0px 10px 10px 10px !important;
} }

14
README.md
View File

@ -1,4 +1,4 @@
<img src="./images/scyfin-full.svg" alt="scyfin logo" width="200"/> <img src="./images/scyfin-full.png" alt="scyfin logo" width="200"/>
--- ---
@ -18,13 +18,11 @@
<img src="./images/scyfin/scyfin4.png" alt="scyfin4" width="100%"/> <img src="./images/scyfin/scyfin4.png" alt="scyfin4" width="100%"/>
<img src="./images/scyfin/scyfin5.png" alt="scyfin5" width="100%"/> <img src="./images/scyfin/scyfin5.png" alt="scyfin5" width="100%"/>
`@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.17/CSS/css-scyfin/scyfin-theme.css');` `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.1.0/CSS/css-scyfin/scyfin-theme.css');`
### Options (Add these below the full theme) ### Options (Add these below the full theme)
- Disable static left drawer - Disable static left drawer
- `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.16/CSS/css-scyfin/disable-static-drawer.css');` - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.1.0/CSS/css-scyfin/disable-static-drawer.css');`
- Disable static left drawer (BACKDROP VERSION)
- `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.16/CSS/css-scyfin/disable-static-drawer-backdrop.css');`
--- ---
@ -38,13 +36,11 @@
<img src="./images/scyfin/scyfin-backdrop2.png" alt="scyfin-backdrop2" width="100%"/> <img src="./images/scyfin/scyfin-backdrop2.png" alt="scyfin-backdrop2" width="100%"/>
<img src="./images/scyfin/scyfin-backdrop3.jpg" alt="scyfin-backdrop3" width="100%"/> <img src="./images/scyfin/scyfin-backdrop3.jpg" alt="scyfin-backdrop3" width="100%"/>
`@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.17/CSS/css-scyfin/scyfin-theme-backdrop.css');` `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.1.0/CSS/css-scyfin/scyfin-theme-backdrop.css');`
### Options (Add these below the full theme) ### Options (Add these below the full theme)
- Disable static left drawer
- `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.16/CSS/css-scyfin/disable-static-drawer.css');`
- Disable static left drawer (BACKDROP VERSION) - Disable static left drawer (BACKDROP VERSION)
- `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.16/CSS/css-scyfin/disable-static-drawer-backdrop.css');` - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.1.0/CSS/css-scyfin/disable-static-drawer-backdrop.css');`
--- ---