| 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); } |