| ... | ... | @@ -10,43 +10,62 @@ jelly.{$HOME_DOMAIN} { |
| 10 | 10 | 			@import url("https://jellyfin.catppuccin.com/catppuccin-macchiato.css"); |
| 11 | 11 | 			@import url("https://jellyfin.catppuccin.com/catppuccin-latte.css") (prefers-color-scheme: light); |
| 12 | 12 | |
| 13 | | 			body { font-family: "Name Sans", sans-serif;} |
| 14 | | 			.preload, .touch-menu-la, .mainDrawer-scrollContainer { |
| 15 | | 			background-color: var(--main-background); |
| 16 | | 			color: var(--main-text);} |
| 17 | | |
| 13 | /* font */ |
| 14 | 			body { font-family: "Name Sans", sans-serif } |
| 18 | 15 | 			:root { |
| 19 | | 			--main-color: var(--sapphire); |
| 20 | | 			--jf-font-button: 500 0.875rem / 1.75 "Name Sans", sans-serif; |
| 21 | | 			--jf-font-h1: 300 1.8rem / 1.167 "Name Sans", sans-serif; |
| 22 | | 			--jf-font-h2: 300 1.5rem / 1.2 "Name Sans", sans-serif; |
| 23 | | 			--jf-font-h3: 400 1.17rem / 1.167 "Name Sans", sans-serif; |
| 24 | | 			--jf-font-h4: 400 2.125rem / 1.235 "Name Sans", sans-serif; |
| 25 | | 			--jf-font-h5: 400 1.5rem / 1.334 "Name Sans", sans-serif; |
| 26 | | 			--jf-font-h6: 500 1.25rem / 1.6 "Name Sans", sans-serif; |
| 27 | | 			--jf-font-subtitle1: 400 1rem / 1.75 "Name Sans", sans-serif; |
| 28 | | 			--jf-font-subtitle2: 500 0.875rem / 1.57 "Name Sans", sans-serif; |
| 29 | | 			--jf-font-body1: 400 1rem / 1.5 "Name Sans", sans-serif; |
| 30 | | 			--jf-font-body2: 400 0.875rem / 1.43 "Name Sans", sans-serif; |
| 31 | | 			--jf-font-caption: 400 0.75rem / 1.66 "Name Sans", sans-serif; |
| 32 | | 			--jf-font-overline: 400 0.75rem / 2.66 "Name Sans", sans-serif; |
| 33 | | 			--jf-font-inherit: inherit inherit / inherit inherit;} |
| 34 | | |
| 35 | | 			.pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner.png)!important;} |
| 36 | | 			.layout-tv .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-icon.png)!important;} |
| 37 | | 			.splashLogo { background-image: url(/web/extra/cloverfin-icon.png)!important;} |
| 38 | | |
| 39 | | 			@media (min-device-width: 992px) { |
| 40 | | 			.splashLogo { background-image: url(/web/extra/cloverfin-banner.png)!important;}} |
| 16 | --main-color: var(--sapphire); |
| 17 | --jf-font-button: 500 0.875rem / 1.75 "Name Sans", sans-serif; |
| 18 | --jf-font-h1: 300 1.8rem / 1.167 "Name Sans", sans-serif; |
| 19 | --jf-font-h2: 300 1.5rem / 1.2 "Name Sans", sans-serif; |
| 20 | --jf-font-h3: 400 1.17rem / 1.167 "Name Sans", sans-serif; |
| 21 | --jf-font-h4: 400 2.125rem / 1.235 "Name Sans", sans-serif; |
| 22 | --jf-font-h5: 400 1.5rem / 1.334 "Name Sans", sans-serif; |
| 23 | --jf-font-h6: 500 1.25rem / 1.6 "Name Sans", sans-serif; |
| 24 | --jf-font-subtitle1: 400 1rem / 1.75 "Name Sans", sans-serif; |
| 25 | --jf-font-subtitle2: 500 0.875rem / 1.57 "Name Sans", sans-serif; |
| 26 | --jf-font-body1: 400 1rem / 1.5 "Name Sans", sans-serif; |
| 27 | --jf-font-body2: 400 0.875rem / 1.43 "Name Sans", sans-serif; |
| 28 | --jf-font-caption: 400 0.75rem / 1.66 "Name Sans", sans-serif; |
| 29 | --jf-font-overline: 400 0.75rem / 2.66 "Name Sans", sans-serif; |
| 30 | --jf-font-inherit: inherit inherit / inherit inherit; |
| 31 | } |
| 41 | 32 | |
| 33 | /* branding */ |
| 34 | 			.preload, .touch-menu-la, .mainDrawer-scrollContainer { |
| 35 | background-color: var(--main-background); |
| 36 | color: var(--main-text); |
| 37 | } |
| 38 | 			.pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner.png)!important; } |
| 39 | 			.layout-tv .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-icon.png)!important; } |
| 40 | 			.splashLogo { background-image: url(/web/extra/cloverfin-icon.png)!important; } |
| 41 | 			@media (min-device-width: 992px) { .splashLogo { background-image: url(/web/extra/cloverfin-banner.png)!important } } |
| 42 | 42 | 			@media (prefers-color-scheme: light) { |
| 43 | | 			.pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important;} |
| 44 | | 			.layout-tv .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important;} |
| 45 | | 			.splashLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important;}} |
| 46 | | |
| 43 | .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important } |
| 44 | .layout-tv .pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important } |
| 45 | .splashLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important } |
| 46 | } |
| 47 | 47 | 			@media (min-device-width: 992px) and (prefers-color-scheme: light) { |
| 48 | | 			.splashLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important;}} |
| 48 | .splashLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important } |
| 49 | } |
| 49 | 50 | |
| 51 | /* theme fixes */ |
| 52 | .playlistSectionButton, .noBackdropTransparency .detailPagePrimaryContainer { |
| 53 | background: rgb(from var(--main-background) r g b / 50%; |
| 54 | } |
| 55 | .selectLabel { |
| 56 | display: flex; |
| 57 | align-items: center; |
| 58 | justify-content: flex-end; |
| 59 | font-weight: bold; |
| 60 | margin: 0; |
| 61 | } |
| 62 | .selectArrowContainer { |
| 63 | position: absolute; |
| 64 | display: flex; |
| 65 | align-items: center; |
| 66 | height: 100%; |
| 67 | } |
| 68 | .selectArrow { margin: 0; } |
| 50 | 69 | 			` |
| 51 | 70 | 		} |
| 52 | 71 | 	} |