| author |  clover caruso <git@paperclover.net> 2026-10-04 21:48:47-07:00 |
| committer | clover caruso <git@paperclover.net> 2026-10-05 15:36:02-07:00 |
| log | 64e64199367a939a900b3db80d1cb2376c2bacab |
| tree | 78413e96d49182f3b619146875fb4066049fc80d |
| parent | 1a84f8498293a950ce614034ad45b2b67e1a81c6 |
| signature | Signed by SSH key SHA256:52mNGHRsVFBDED9IAX5pe+LRWUefqTbxEReunq21QvU |
Revalidate the Jellyfin theme after upgrades
Give the corrected stylesheet a fresh URL and serve it with no-store so existing browsers stop using the cached layered theme.
Assisted-by: gpt-6.1-sol4 files changed, 72 insertions(+), 69 deletions(-)
service
jellyfin
service/jellyfin/branding.xml+1-1
| ... | @@ -9,7 +9,7 @@ | ... | @@ -9,7 +9,7 @@ |
| 9 | </form> | 9 | </form> |
| 10 | 10 | ||
| 11 | and then we knew, just like paper airplanes: that we could fly.</LoginDisclaimer> | 11 | and then we knew, just like paper airplanes: that we could fly.</LoginDisclaimer> |
| 12 | <CustomCss>@import url("/web/extra/theme.css"); | 12 | <CustomCss>@import url("/web/extra/cloverfin.css"); |
| 13 | #loginPage { display: flex; align-items: center; justify-content: center; } | 13 | #loginPage { display: flex; align-items: center; justify-content: center; } |
| 14 | #loginPage > .padded-left { width: min(100%, 32rem); margin: auto; padding: 2rem; } | 14 | #loginPage > .padded-left { width: min(100%, 32rem); margin: auto; padding: 2rem; } |
| 15 | #loginPage .manualLoginForm, #loginPage .visualLoginForm, #loginPage .btnForgotPassword { display: none; } | 15 | #loginPage .manualLoginForm, #loginPage .visualLoginForm, #loginPage .btnForgotPassword { display: none; } |
service/jellyfin/service.pkl+6-3
| ... | @@ -31,10 +31,13 @@ container { | ... | @@ -31,10 +31,13 @@ container { |
| 31 | subdomain = "jelly" | 31 | subdomain = "jelly" |
| 32 | checkPath = "/health" | 32 | checkPath = "/health" |
| 33 | metricsPath = "/metrics" | 33 | metricsPath = "/metrics" |
| 34 | overrideFiles { ["/web/extra/"] = "theme" } | 34 | overrideFiles { |
| 35 | ["/web/extra/"] = "theme" | ||
| 36 | ["/web/extra/cloverfin.css"] = "theme/cloverfin.css" | ||
| 37 | } | ||
| 35 | headHtml { | 38 | headHtml { |
| 36 | ["/web/"] = "<link rel=\"stylesheet\" href=\"/web/extra/theme.css\">" | 39 | ["/web/"] = "<link rel=\"stylesheet\" href=\"/web/extra/cloverfin.css\">" |
| 37 | ["/web/index.html"] = "<link rel=\"stylesheet\" href=\"/web/extra/theme.css\">" | 40 | ["/web/index.html"] = "<link rel=\"stylesheet\" href=\"/web/extra/cloverfin.css\">" |
| 38 | } | 41 | } |
| 39 | } | 42 | } |
| 40 | 43 |
service/jellyfin/theme/cloverfin.css created+65
| ... | @@ -0,0 +1,65 @@ | ||
| 1 | @import url("https://file.paperclover.net/.static/font.css") layer(fnt); | ||
| 2 | @import url("https://jellyfin.catppuccin.com/theme.css"); | ||
| 3 | @import url("https://jellyfin.catppuccin.com/catppuccin-macchiato.css"); | ||
| 4 | @import url("https://jellyfin.catppuccin.com/catppuccin-latte.css") (prefers-color-scheme: light); | ||
| 5 | |||
| 6 | /* font */ | ||
| 7 | body { font-family: "Name Sans", sans-serif } | ||
| 8 | :root { | ||
| 9 | --main-color: var(--sapphire); | ||
| 10 | --jf-font-button: 500 0.875rem / 1.75 "Name Sans", sans-serif; | ||
| 11 | --jf-font-h1: 300 1.8rem / 1.167 "Name Sans", sans-serif; | ||
| 12 | --jf-font-h2: 300 1.5rem / 1.2 "Name Sans", sans-serif; | ||
| 13 | --jf-font-h3: 400 1.17rem / 1.167 "Name Sans", sans-serif; | ||
| 14 | --jf-font-h4: 400 2.125rem / 1.235 "Name Sans", sans-serif; | ||
| 15 | --jf-font-h5: 400 1.5rem / 1.334 "Name Sans", sans-serif; | ||
| 16 | --jf-font-h6: 500 1.25rem / 1.6 "Name Sans", sans-serif; | ||
| 17 | --jf-font-subtitle1: 400 1rem / 1.75 "Name Sans", sans-serif; | ||
| 18 | --jf-font-subtitle2: 500 0.875rem / 1.57 "Name Sans", sans-serif; | ||
| 19 | --jf-font-body1: 400 1rem / 1.5 "Name Sans", sans-serif; | ||
| 20 | --jf-font-body2: 400 0.875rem / 1.43 "Name Sans", sans-serif; | ||
| 21 | --jf-font-caption: 400 0.75rem / 1.66 "Name Sans", sans-serif; | ||
| 22 | --jf-font-overline: 400 0.75rem / 2.66 "Name Sans", sans-serif; | ||
| 23 | --jf-font-inherit: inherit inherit / inherit inherit; | ||
| 24 | } | ||
| 25 | |||
| 26 | /* branding */ | ||
| 27 | .preload, .touch-menu-la, .mainDrawer-scrollContainer { | ||
| 28 | background-color: var(--main-background); | ||
| 29 | color: var(--main-text); | ||
| 30 | } | ||
| 31 | .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner.png)!important; } | ||
| 32 | .layout-tv .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-icon.png)!important; } | ||
| 33 | .splashLogo { background-image: url(/web/extra/cloverfin-icon.png)!important; } | ||
| 34 | @media (min-device-width: 992px) { .splashLogo { background-image: url(/web/extra/cloverfin-banner.png)!important } } | ||
| 35 | @media (prefers-color-scheme: light) { | ||
| 36 | .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important } | ||
| 37 | .layout-tv .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important } | ||
| 38 | .splashLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important } | ||
| 39 | } | ||
| 40 | @media (min-device-width: 992px) and (prefers-color-scheme: light) { | ||
| 41 | .splashLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important } | ||
| 42 | } | ||
| 43 | |||
| 44 | /* theme fixes */ | ||
| 45 | .material-icons.play_arrow { display: flex } | ||
| 46 | .detailPagePrimaryContainer { | ||
| 47 | background: rgb(from var(--main-background) r g b / 75%); | ||
| 48 | } | ||
| 49 | .selectLabel { | ||
| 50 | display: flex; | ||
| 51 | align-items: center; | ||
| 52 | justify-content: flex-end; | ||
| 53 | font-weight: bold; | ||
| 54 | margin: 0; | ||
| 55 | } | ||
| 56 | .selectArrowContainer { | ||
| 57 | position: absolute; | ||
| 58 | display: flex; | ||
| 59 | align-items: center; | ||
| 60 | height: 100%; | ||
| 61 | } | ||
| 62 | .selectArrow { margin: 0; } | ||
| 63 | |||
| 64 | html .backgroundContainer:not(.withBackdrop) { background-color: var(--main-background); } | ||
| 65 | html .backgroundContainer.withBackdrop { background-color: var(--main-background-transparent); } | ||
service/jellyfin/theme/theme.css deleted-65
| ... | @@ -1,65 +0,0 @@ | ||
| 1 | @import url("https://file.paperclover.net/.static/font.css") layer(fnt); | ||
| 2 | @import url("https://jellyfin.catppuccin.com/theme.css"); | ||
| 3 | @import url("https://jellyfin.catppuccin.com/catppuccin-macchiato.css"); | ||
| 4 | @import url("https://jellyfin.catppuccin.com/catppuccin-latte.css") (prefers-color-scheme: light); | ||
| 5 | |||
| 6 | /* font */ | ||
| 7 | body { font-family: "Name Sans", sans-serif } | ||
| 8 | :root { | ||
| 9 | --main-color: var(--sapphire); | ||
| 10 | --jf-font-button: 500 0.875rem / 1.75 "Name Sans", sans-serif; | ||
| 11 | --jf-font-h1: 300 1.8rem / 1.167 "Name Sans", sans-serif; | ||
| 12 | --jf-font-h2: 300 1.5rem / 1.2 "Name Sans", sans-serif; | ||
| 13 | --jf-font-h3: 400 1.17rem / 1.167 "Name Sans", sans-serif; | ||
| 14 | --jf-font-h4: 400 2.125rem / 1.235 "Name Sans", sans-serif; | ||
| 15 | --jf-font-h5: 400 1.5rem / 1.334 "Name Sans", sans-serif; | ||
| 16 | --jf-font-h6: 500 1.25rem / 1.6 "Name Sans", sans-serif; | ||
| 17 | --jf-font-subtitle1: 400 1rem / 1.75 "Name Sans", sans-serif; | ||
| 18 | --jf-font-subtitle2: 500 0.875rem / 1.57 "Name Sans", sans-serif; | ||
| 19 | --jf-font-body1: 400 1rem / 1.5 "Name Sans", sans-serif; | ||
| 20 | --jf-font-body2: 400 0.875rem / 1.43 "Name Sans", sans-serif; | ||
| 21 | --jf-font-caption: 400 0.75rem / 1.66 "Name Sans", sans-serif; | ||
| 22 | --jf-font-overline: 400 0.75rem / 2.66 "Name Sans", sans-serif; | ||
| 23 | --jf-font-inherit: inherit inherit / inherit inherit; | ||
| 24 | } | ||
| 25 | |||
| 26 | /* branding */ | ||
| 27 | .preload, .touch-menu-la, .mainDrawer-scrollContainer { | ||
| 28 | background-color: var(--main-background); | ||
| 29 | color: var(--main-text); | ||
| 30 | } | ||
| 31 | .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner.png)!important; } | ||
| 32 | .layout-tv .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-icon.png)!important; } | ||
| 33 | .splashLogo { background-image: url(/web/extra/cloverfin-icon.png)!important; } | ||
| 34 | @media (min-device-width: 992px) { .splashLogo { background-image: url(/web/extra/cloverfin-banner.png)!important } } | ||
| 35 | @media (prefers-color-scheme: light) { | ||
| 36 | .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important } | ||
| 37 | .layout-tv .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important } | ||
| 38 | .splashLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important } | ||
| 39 | } | ||
| 40 | @media (min-device-width: 992px) and (prefers-color-scheme: light) { | ||
| 41 | .splashLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important } | ||
| 42 | } | ||
| 43 | |||
| 44 | /* theme fixes */ | ||
| 45 | .material-icons.play_arrow { display: flex } | ||
| 46 | .detailPagePrimaryContainer { | ||
| 47 | background: rgb(from var(--main-background) r g b / 75%); | ||
| 48 | } | ||
| 49 | .selectLabel { | ||
| 50 | display: flex; | ||
| 51 | align-items: center; | ||
| 52 | justify-content: flex-end; | ||
| 53 | font-weight: bold; | ||
| 54 | margin: 0; | ||
| 55 | } | ||
| 56 | .selectArrowContainer { | ||
| 57 | position: absolute; | ||
| 58 | display: flex; | ||
| 59 | align-items: center; | ||
| 60 | height: 100%; | ||
| 61 | } | ||
| 62 | .selectArrow { margin: 0; } | ||
| 63 | |||
| 64 | html .backgroundContainer:not(.withBackdrop) { background-color: var(--main-background); } | ||
| 65 | html .backgroundContainer.withBackdrop { background-color: var(--main-background-transparent); } | ||