diff --git a/service/jellyfin/branding.xml b/service/jellyfin/branding.xml index a695655922d1b7283692bd49e836f1f703ed9fbb..c071fac378ee62fef42c86193d5c1b4cebe8a9e6 100644 --- a/service/jellyfin/branding.xml +++ b/service/jellyfin/branding.xml @@ -9,7 +9,7 @@ </form> and then we knew, just like paper airplanes: that we could fly. - @import url("/web/extra/theme.css"); + @import url("/web/extra/cloverfin.css"); #loginPage { display: flex; align-items: center; justify-content: center; } #loginPage > .padded-left { width: min(100%, 32rem); margin: auto; padding: 2rem; } #loginPage .manualLoginForm, #loginPage .visualLoginForm, #loginPage .btnForgotPassword { display: none; } diff --git a/service/jellyfin/service.pkl b/service/jellyfin/service.pkl index ab970cf2d0656b460d3b054f529f596948584005..ab0e477a3fa2a2aae0e848ca71b9a516f38ce23d 100644 --- a/service/jellyfin/service.pkl +++ b/service/jellyfin/service.pkl @@ -31,10 +31,13 @@ container { subdomain = "jelly" checkPath = "/health" metricsPath = "/metrics" - overrideFiles { ["/web/extra/"] = "theme" } + overrideFiles { + ["/web/extra/"] = "theme" + ["/web/extra/cloverfin.css"] = "theme/cloverfin.css" + } headHtml { - ["/web/"] = "" - ["/web/index.html"] = "" + ["/web/"] = "" + ["/web/index.html"] = "" } } diff --git a/service/jellyfin/theme/cloverfin.css b/service/jellyfin/theme/cloverfin.css new file mode 100644 index 0000000000000000000000000000000000000000..016aec3785a92b186cc90b565f00cecf9b19733c --- /dev/null +++ b/service/jellyfin/theme/cloverfin.css @@ -0,0 +1,65 @@ +@import url("https://file.paperclover.net/.static/font.css") layer(fnt); + @import url("https://jellyfin.catppuccin.com/theme.css"); + @import url("https://jellyfin.catppuccin.com/catppuccin-macchiato.css"); + @import url("https://jellyfin.catppuccin.com/catppuccin-latte.css") (prefers-color-scheme: light); + + /* font */ + body { font-family: "Name Sans", sans-serif } + :root { + --main-color: var(--sapphire); + --jf-font-button: 500 0.875rem / 1.75 "Name Sans", sans-serif; + --jf-font-h1: 300 1.8rem / 1.167 "Name Sans", sans-serif; + --jf-font-h2: 300 1.5rem / 1.2 "Name Sans", sans-serif; + --jf-font-h3: 400 1.17rem / 1.167 "Name Sans", sans-serif; + --jf-font-h4: 400 2.125rem / 1.235 "Name Sans", sans-serif; + --jf-font-h5: 400 1.5rem / 1.334 "Name Sans", sans-serif; + --jf-font-h6: 500 1.25rem / 1.6 "Name Sans", sans-serif; + --jf-font-subtitle1: 400 1rem / 1.75 "Name Sans", sans-serif; + --jf-font-subtitle2: 500 0.875rem / 1.57 "Name Sans", sans-serif; + --jf-font-body1: 400 1rem / 1.5 "Name Sans", sans-serif; + --jf-font-body2: 400 0.875rem / 1.43 "Name Sans", sans-serif; + --jf-font-caption: 400 0.75rem / 1.66 "Name Sans", sans-serif; + --jf-font-overline: 400 0.75rem / 2.66 "Name Sans", sans-serif; + --jf-font-inherit: inherit inherit / inherit inherit; + } + + /* branding */ + .preload, .touch-menu-la, .mainDrawer-scrollContainer { + background-color: var(--main-background); + color: var(--main-text); + } + .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner.png)!important; } + .layout-tv .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-icon.png)!important; } + .splashLogo { background-image: url(/web/extra/cloverfin-icon.png)!important; } + @media (min-device-width: 992px) { .splashLogo { background-image: url(/web/extra/cloverfin-banner.png)!important } } + @media (prefers-color-scheme: light) { + .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important } + .layout-tv .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important } + .splashLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important } + } + @media (min-device-width: 992px) and (prefers-color-scheme: light) { + .splashLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important } + } + + /* theme fixes */ + .material-icons.play_arrow { display: flex } + .detailPagePrimaryContainer { + background: rgb(from var(--main-background) r g b / 75%); + } + .selectLabel { + display: flex; + align-items: center; + justify-content: flex-end; + font-weight: bold; + margin: 0; + } + .selectArrowContainer { + position: absolute; + display: flex; + align-items: center; + height: 100%; + } + .selectArrow { margin: 0; } + +html .backgroundContainer:not(.withBackdrop) { background-color: var(--main-background); } +html .backgroundContainer.withBackdrop { background-color: var(--main-background-transparent); } diff --git a/service/jellyfin/theme/theme.css b/service/jellyfin/theme/theme.css deleted file mode 100644 index 016aec3785a92b186cc90b565f00cecf9b19733c..0000000000000000000000000000000000000000 --- a/service/jellyfin/theme/theme.css +++ /dev/null @@ -1,65 +0,0 @@ -@import url("https://file.paperclover.net/.static/font.css") layer(fnt); - @import url("https://jellyfin.catppuccin.com/theme.css"); - @import url("https://jellyfin.catppuccin.com/catppuccin-macchiato.css"); - @import url("https://jellyfin.catppuccin.com/catppuccin-latte.css") (prefers-color-scheme: light); - - /* font */ - body { font-family: "Name Sans", sans-serif } - :root { - --main-color: var(--sapphire); - --jf-font-button: 500 0.875rem / 1.75 "Name Sans", sans-serif; - --jf-font-h1: 300 1.8rem / 1.167 "Name Sans", sans-serif; - --jf-font-h2: 300 1.5rem / 1.2 "Name Sans", sans-serif; - --jf-font-h3: 400 1.17rem / 1.167 "Name Sans", sans-serif; - --jf-font-h4: 400 2.125rem / 1.235 "Name Sans", sans-serif; - --jf-font-h5: 400 1.5rem / 1.334 "Name Sans", sans-serif; - --jf-font-h6: 500 1.25rem / 1.6 "Name Sans", sans-serif; - --jf-font-subtitle1: 400 1rem / 1.75 "Name Sans", sans-serif; - --jf-font-subtitle2: 500 0.875rem / 1.57 "Name Sans", sans-serif; - --jf-font-body1: 400 1rem / 1.5 "Name Sans", sans-serif; - --jf-font-body2: 400 0.875rem / 1.43 "Name Sans", sans-serif; - --jf-font-caption: 400 0.75rem / 1.66 "Name Sans", sans-serif; - --jf-font-overline: 400 0.75rem / 2.66 "Name Sans", sans-serif; - --jf-font-inherit: inherit inherit / inherit inherit; - } - - /* branding */ - .preload, .touch-menu-la, .mainDrawer-scrollContainer { - background-color: var(--main-background); - color: var(--main-text); - } - .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner.png)!important; } - .layout-tv .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-icon.png)!important; } - .splashLogo { background-image: url(/web/extra/cloverfin-icon.png)!important; } - @media (min-device-width: 992px) { .splashLogo { background-image: url(/web/extra/cloverfin-banner.png)!important } } - @media (prefers-color-scheme: light) { - .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important } - .layout-tv .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important } - .splashLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important } - } - @media (min-device-width: 992px) and (prefers-color-scheme: light) { - .splashLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important } - } - - /* theme fixes */ - .material-icons.play_arrow { display: flex } - .detailPagePrimaryContainer { - background: rgb(from var(--main-background) r g b / 75%); - } - .selectLabel { - display: flex; - align-items: center; - justify-content: flex-end; - font-weight: bold; - margin: 0; - } - .selectArrowContainer { - position: absolute; - display: flex; - align-items: center; - height: 100%; - } - .selectArrow { margin: 0; } - -html .backgroundContainer:not(.withBackdrop) { background-color: var(--main-background); } -html .backgroundContainer.withBackdrop { background-color: var(--main-background-transparent); }