| ... | @@ -10,43 +10,62 @@ jelly.{$HOME_DOMAIN} { | ... | @@ -10,43 +10,62 @@ jelly.{$HOME_DOMAIN} { |
| 10 | 			@import url("https://jellyfin.catppuccin.com/catppuccin-macchiato.css"); | 10 | 			@import url("https://jellyfin.catppuccin.com/catppuccin-macchiato.css"); |
| 11 | 			@import url("https://jellyfin.catppuccin.com/catppuccin-latte.css") (prefers-color-scheme: light); | 11 | 			@import url("https://jellyfin.catppuccin.com/catppuccin-latte.css") (prefers-color-scheme: light); |
| 12 | | 12 | |
| 13 | 			body { font-family: "Name Sans", sans-serif;} | 13 | /* font */ |
| 14 | 			.preload, .touch-menu-la, .mainDrawer-scrollContainer { | 14 | 			body { font-family: "Name Sans", sans-serif } |
| 15 | 			background-color: var(--main-background); | | |
| 16 | 			color: var(--main-text);} | | |
| 17 | | | |
| 18 | 			:root { | 15 | 			:root { |
| 19 | 			--main-color: var(--sapphire); | 16 | --main-color: var(--sapphire); |
| 20 | 			--jf-font-button: 500 0.875rem / 1.75 "Name Sans", sans-serif; | 17 | --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; | 18 | --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; | 19 | --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; | 20 | --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; | 21 | --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; | 22 | --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; | 23 | --jf-font-h6: 500 1.25rem / 1.6 "Name Sans", sans-serif; |
| 27 | 			--jf-font-subtitle1: 400 1rem / 1.75 "Name Sans", sans-serif; | 24 | --jf-font-subtitle1: 400 1rem / 1.75 "Name Sans", sans-serif; |
| 28 | 			--jf-font-subtitle2: 500 0.875rem / 1.57 "Name Sans", sans-serif; | 25 | --jf-font-subtitle2: 500 0.875rem / 1.57 "Name Sans", sans-serif; |
| 29 | 			--jf-font-body1: 400 1rem / 1.5 "Name Sans", sans-serif; | 26 | --jf-font-body1: 400 1rem / 1.5 "Name Sans", sans-serif; |
| 30 | 			--jf-font-body2: 400 0.875rem / 1.43 "Name Sans", sans-serif; | 27 | --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; | 28 | --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; | 29 | --jf-font-overline: 400 0.75rem / 2.66 "Name Sans", sans-serif; |
| 33 | 			--jf-font-inherit: inherit inherit / inherit inherit;} | 30 | --jf-font-inherit: inherit inherit / inherit inherit; |
| 34 | | 31 | } |
| 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;}} | | |
| 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 | 			@media (prefers-color-scheme: light) { | 42 | 			@media (prefers-color-scheme: light) { |
| 43 | 			.pageTitleWithDefaultLogo { background-image: url(/web/extra/cloverfin-banner-light.png)!important;} | 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;} | 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;}} | 45 | .splashLogo { background-image: url(/web/extra/cloverfin-icon-light.png)!important } |
| 46 | | 46 | } |
| 47 | 			@media (min-device-width: 992px) and (prefers-color-scheme: light) { | 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 | 	} |