Merge branch 'loof2736:main' into main

CSS/css-scyfin/disable-static-drawer-backdrop.css

@@ -1,8 +1,7 @@
 /* Reset size of Jellyfin logo */
 .layout-desktop .pageTitleWithLogo {
-    margin-left: 25px !important;
     height: 30px !important;
-    margin-top: 0px !important;
+    width: 100px !important;
 }
 
 /* Un-static left drawer */
@@ -71,29 +70,28 @@
     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;
     border-radius: 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 */
 .layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
     width: 160px;
 }
 
-.layout-desktop .headerLeft {
-    padding: 2px !important;
-    top: -3px !important;
-}
-
 .layout-desktop .pageTitle {
     z-index: 1099 !important;
 }

CSS/css-scyfin/disable-static-drawer.css

@@ -1,8 +1,7 @@
 /* Reset size of Jellyfin logo */
 .layout-desktop .pageTitleWithLogo {
-    margin-left: 25px !important;
     height: 30px !important;
-    margin-top: 0px !important;
+    width: 100px !important;
 }
 
 /* Un-static left drawer */
@@ -65,29 +64,28 @@
     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;
     border-radius: 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 */
 .layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
     width: 160px;
 }
 
-.layout-desktop .headerLeft {
-    padding: 2px !important;
-    top: -3px !important;
-}
-
 .layout-desktop .pageTitle {
     z-index: 1099 !important;
 }

CSS/css-scyfin/scyfin-theme-backdrop.css

@@ -1,9 +1,7 @@
 /* Increase size of Jellyfin logo */
 .layout-desktop .pageTitleWithLogo {
-    margin-left: 15px !important;
+    margin-left: 10px !important;
-    width: 100px !important;
     height: 40px !important;
-    margin-top: 5px !important;
 }
 
 /* Static left drawer */
@@ -101,16 +99,34 @@
 
 /* Floating progress bar */
 .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;
     width: 90% !important;
     margin: auto !important;
     border-radius: 100px !important;
+    padding: 0px !important;
 }
 .itemProgressBar {
-    height: 8px !important;
+    height: 10px !important;
+    background: rgba(35,35,35,0.75) !important;
+    backdrop-filter: blur(2px) !important;
 }
 .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 */
@@ -172,6 +188,9 @@
 .layout-tv .skinHeader {
     padding-top: 1.5em !important;
 }
+.layout-tv .skinHeader {
+    padding-bottom: 10px !important;
+}
 /* Rounded header buttons */
 .headerTabs,
 .headerRight {
@@ -185,9 +204,8 @@
 .layout-tv .headerRight {
     margin-bottom: 10px !important;
 }
-.layout-desktop .headerTabs,
+.layout-desktop .headerTabs {
-.layout-desktop .headerRight {
+    margin-left: 160px !important;
-    margin-left: 250px !important;
 }
 /* Button height */
 .headerRight,
@@ -198,6 +216,9 @@
 .layout-desktop .headerRight {
     padding: 0px 5px !important;
 }
+.layout-tv .headerRight {
+    padding: 20px 10px !important;
+}
 /* Move left header back up */
 .layout-desktop .headerLeft
 .layout-tv .headerLeft {
@@ -499,7 +520,7 @@
 
 
 /* Player modifications */
-.upNextContainer, .toastVisible, .sliderBubble {
+.upNextContainer, .toastVisible {
     backdrop-filter: blur(50px) !important;
 }
 .upNextContainer {
@@ -512,14 +533,42 @@
 }
 .sliderBubble {
     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 */
 .chapterThumbContainer {
+    background: none !important;
     border-radius: 15px !important;
 }
+.chapterThumb {
+    border-radius: 15px !important;
+    margin-bottom: 40px !important;
+}
 .chapterThumbTextContainer {
-    background: rgba(35,35,35,0.5) !important;
+    background: none !important;
+}
+.chapterThumbText {
+    text-align: center !important;
+}
+.chapterThumbText-dim {
+    display: none !important;
 }
 
 
@@ -570,6 +619,8 @@
     }
 }
 
+
+
 /* Fixes for TV Layout */
 .layout-tv .sectionTabs {
     width: auto !important;
@@ -577,3 +628,90 @@
 .layout-tv .headerLeft {
     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;
+}

CSS/css-scyfin/scyfin-theme.css

@@ -1,9 +1,7 @@
 /* Increase size of Jellyfin logo */
 .layout-desktop .pageTitleWithLogo {
-    margin-left: 15px !important;
+    margin-left: 10px !important;
-    width: 100px !important;
     height: 40px !important;
-    margin-top: 5px !important;
 }
 
 /* Static left drawer */
@@ -101,16 +99,34 @@
 
 /* Floating progress bar */
 .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;
     width: 90% !important;
     margin: auto !important;
     border-radius: 100px !important;
+    padding: 0px !important;
 }
 .itemProgressBar {
-    height: 8px !important;
+    height: 10px !important;
+    background: rgba(35,35,35,0.75) !important;
+    backdrop-filter: blur(2px) !important;
 }
 .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 */
@@ -174,6 +190,9 @@ html {
 .layout-tv .skinHeader {
     padding-top: 1.5em !important;
 }
+.layout-tv .skinHeader {
+    padding-bottom: 10px !important;
+}
 /* Rounded header buttons */
 .headerTabs,
 .headerRight {
@@ -187,9 +206,8 @@ html {
 .layout-tv .headerRight {
     margin-bottom: 10px !important;
 }
-.layout-desktop .headerTabs,
+.layout-desktop .headerTabs {
-.layout-desktop .headerRight {
+    margin-left: 160px !important;
-    margin-left: 250px !important;
 }
 /* Button height */
 .headerRight,
@@ -225,7 +243,7 @@ html {
 
 
 /* Player modifications */
-.upNextContainer, .toastVisible, .sliderBubble {
+.upNextContainer, .toastVisible {
     backdrop-filter: blur(50px) !important;
 }
 .upNextContainer {
@@ -238,14 +256,42 @@ html {
 }
 .sliderBubble {
     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 */
 .chapterThumbContainer {
+    background: none !important;
     border-radius: 15px !important;
 }
+.chapterThumb {
+    border-radius: 15px !important;
+    margin-bottom: 40px !important;
+}
 .chapterThumbTextContainer {
-    background: rgba(35,35,35,0.5) !important;
+    background: none !important;
+}
+.chapterThumbText {
+    text-align: center !important;
+}
+.chapterThumbText-dim {
+    display: none !important;
 }
 
 
@@ -550,6 +596,8 @@ html {
     }
 }
 
+
+
 /* Fixes for TV Layout */
 .layout-tv .sectionTabs {
     width: auto !important;
@@ -557,3 +605,90 @@ html {
 .layout-tv .headerLeft {
     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;
+}

README.md

@@ -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/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)
 - 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-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)
-- 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) 
-    - `@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');`
 
 ---