├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── unthemed-element.md ├── LICENSE ├── README.md ├── WIP.css ├── accentlist.css ├── base.css ├── bottombarprogress.css ├── cornerindicator ├── indicator_corner.css └── indicator_floating.css ├── effects ├── glassy.css ├── hoverglow.css └── pan-animation.css ├── episodelist ├── episodes_compactlist.css └── episodes_grid.css ├── fields ├── fields_border.css └── fields_noborder.css ├── fixes.css ├── header ├── header_transparent-dashboard.css └── header_transparent.css ├── jf_font.css ├── login ├── login_frame.css └── login_minimalistic.css ├── overlayprogress.css ├── presets ├── kaleidochromic_preset.css ├── monochromic_preset.css └── novachromic_preset.css ├── progress └── floating.css ├── rounding.css ├── rounding_circlehover.css ├── saved.css ├── smallercast.css ├── titlepage ├── title_banner-logo.css ├── title_banner.css ├── title_simple-logo.css └── title_simple.css └── type ├── colorful.css ├── dark.css ├── dark_withaccent.css └── light.css /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report of an issue so I can know to fix it 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the problem is, and in what circumstances it occurs. What device/client. etc. 12 | 13 | **To Reproduce** 14 | Include the exact contents of your "Custom CSS" field. 15 | 16 | **Screenshots** 17 | If applicable, add screenshots to help explain your problem. 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/unthemed-element.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Unthemed element 3 | about: Reporting an unthemed part of UI 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe what and where does not get themed by Ultrachromic** 11 | A clear on concise description. 12 | 13 | **Screenshots** 14 | They really help. 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Casper Talvio 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ultrachromic 2 | 3 | The final form, the true evolution of the chromic theme saga! The old trilogy of chromic themes are deprecated, as their appearances can be replicated using Ultrachromic. 4 | 5 | This is a custom theme for Jellyfin mediaserver created using CSS overrides. Note that I maintain this theme to be compatible with whatever version of Jellyfin I am currently using. Which is usually the latest stable release. You can therefore assume that using the theme on older versions may not work, but also that if a new release breaks something, that I will fix it. If you encounter unthemed elements or something broken, open an issue. 6 | 7 | ![Untitled](https://user-images.githubusercontent.com/4365015/127774204-03957527-7178-4ea2-8674-d83fe6a97d1c.png) 8 | 9 |
10 | 11 | ## Features 12 | - Themes **EVERYTHING** 13 | - Three types of styles to choose from 14 | - Extensive additional options 15 | - Customizable accent color 16 | - Choose how blurry you want your backdrops 17 | - Squared or rounded UI 18 | - Options for progress bars, title pages, backdrops, logos... 19 | - Works well on mobile, more compact and aligned UI 20 | - Various small tweaks and fixes to the stock UI 21 | 22 |
23 | 24 | Buy Me a Coffee at ko-fi.com 25 | 26 | # How to 27 | To use the theme copy paste one of the presets, or follow the instructions to create a custom combination, paste that into "Dashboard>General>Custom CSS" and click save, it will apply immediately server-wide to all users on top of any theme they may be using. To remove the theme, clear the "Custom CSS" field and then click save. 28 | 29 | **Adding modules after a preset may or may not work**, do not open an issue if you try to do things this way and it doesn't work. Either use a preset or a custom combination, not a mix of both, as that is not a use case I will be testing and guaranteeing to work. 30 | 31 | **NOTE: Theme may not work when using reverse proxy**, check the bottom section of this readme for more info. 32 | 33 |
34 | 35 | ## Single line presets 36 | 37 | These let you use Ultrachromic using a couple presets. These follow the same look as the old chromic themes. 38 | 39 | ```css 40 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/monochromic_preset.css'); 41 | ``` 42 | OR 43 | ```css 44 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/kaleidochromic_preset.css'); 45 | ``` 46 | OR 47 | ```css 48 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/novachromic_preset.css'); 49 | ``` 50 | Only one line is needed, nova and kaleido support custom accents. 51 | 52 |
53 |
54 | 55 | ## Customization using multiple import lines 56 | 57 | Ultrachromic is composed of multiple "parts" allowing you to theme only the parts you want, and to have some choice in how you want things themed. Simply add one import after another, in the order they are listed here. Simply omit the options you do not want to use. 58 | 59 |
60 | 61 | ### 1. Recommended 62 | 63 | fixes.css contains various small tweaks all over the JF UI, an alignment here, a size tweak there. That kind of thing. jf_font.css will make JF use the same font as its logo, for everything. You can use both, one, or none of these. 64 | 65 | ```css 66 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css'); 67 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css'); 68 | ``` 69 | 70 |
71 | 72 | ### 2. Required 73 | 74 | These lines are required. 75 | 76 | ```css 77 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css'); 78 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css'); 79 | ``` 80 | 81 |
82 | 83 | ### 3. Rounding 84 | 85 | If you want to modify the rounding of corners in the UI, include one of these, circlehover keeps the stock circle accent when hovering over things, otherwise the accent will be a rounded square like everythig else. 86 | 87 | ```css 88 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css'); 89 | ``` 90 | OR 91 | ```css 92 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding_circlehover.css'); 93 | ``` 94 | 95 |
96 | 97 | ### 4. Smaller cast list 98 | 99 | ![image](https://user-images.githubusercontent.com/4365015/127768495-3f211a57-3147-4b11-a9e0-5c9bdebc32b0.png) 100 | 101 | A smaller, square aspect ratio style cast list. 102 | 103 | ```css 104 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css'); 105 | ``` 106 | 107 |
108 | 109 | ### 5. Compact episode list 110 | 111 | ![image](https://user-images.githubusercontent.com/4365015/127768733-c86aee2c-3bff-4b78-be54-003823d60276.png) 112 | 113 | A more easily scrolled episode list, there is the option to keep it as a list that is more compact, or turning the episode list into a grid menu. 114 | 115 | ```css 116 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css'); 117 | ``` 118 | OR 119 | ```css 120 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_grid.css'); 121 | ``` 122 | 123 |
124 | 125 | ### 6. Transparent top bar 126 | 127 | ![image](https://user-images.githubusercontent.com/4365015/127768778-056a68eb-402f-49d0-8277-c11a71edbbe5.png) 128 | 129 | Transaparent top bar. 130 | 131 | ```css 132 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent.css'); 133 | ``` 134 | 135 |
136 | 137 | ### 7. Login screen 138 | 139 | ![image](https://user-images.githubusercontent.com/4365015/127768970-e827c7e4-f4ce-4229-a68a-b2e87a723ef0.png) 140 | 141 | Login screen styles. The minimalistic option has no frame or prompt text. You can also set a custom background, see further below. 142 | 143 | ```css 144 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_minimalistic.css'); 145 | ``` 146 | OR 147 | ```css 148 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css'); 149 | ``` 150 | 151 |
152 | 153 | ### 8. Input fields 154 | 155 | ![image](https://user-images.githubusercontent.com/4365015/127769216-1d04cd30-14e0-4fda-9b2c-e0bfdb3514f6.png) 156 | 157 | Input field styles, with borders that highlight when selected, or with no borders, and the background highlights, when selected. 158 | 159 | ```css 160 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_border.css'); 161 | ``` 162 | OR 163 | ```css 164 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css'); 165 | ``` 166 | 167 |
168 | 169 | ### 9. Watched/Unwatched indicators 170 | 171 | ![image](https://user-images.githubusercontent.com/4365015/127769354-f7a0c402-0c9a-4a8e-a347-e6c352ecabbf.png) 172 | 173 | Two options, should the indicator be floating, or attached to the corner of the title card. 174 | 175 | ```css 176 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_floating.css'); 177 | ``` 178 | OR 179 | ```css 180 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css'); 181 | ``` 182 | 183 |
184 | 185 | ### 10. Choose type 186 | 187 | ![Untitled](https://user-images.githubusercontent.com/4365015/127774204-03957527-7178-4ea2-8674-d83fe6a97d1c.png) 188 | 189 | Dark, light, and colorful type. You must use one of these. If you wish to use an accent color with the dark style, use the "_withaccent" line. 190 | 191 | ```css 192 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark.css'); 193 | ``` 194 | OR 195 | ```css 196 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/light.css'); 197 | ``` 198 | OR 199 | ```css 200 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/colorful.css'); 201 | ``` 202 | OR 203 | ```css 204 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark_withaccent.css'); 205 | ``` 206 | 207 |
208 | 209 | ### 11. Title page 210 | 211 | ![image](https://user-images.githubusercontent.com/4365015/127778994-ddee8235-6bb2-42ae-a8b1-f9023dc69398.png) 212 | 213 | 214 | Four options, two versions, each version can be used with or without a logo replacing title text. 215 | 216 | ```css 217 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple.css'); 218 | ``` 219 | OR 220 | ```css 221 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple-logo.css'); 222 | ``` 223 | OR 224 | ```css 225 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner.css'); 226 | ``` 227 | OR 228 | ```css 229 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner-logo.css'); 230 | ``` 231 | 232 |
233 | 234 | ### 12. Progress bar 235 | 236 | ![Screenshot_20210817_003507](https://user-images.githubusercontent.com/4365015/129632467-b545bcfc-3dbe-430d-8d3c-e89355eae29e.png) 237 | 238 | Default, overlay or floating style progress indicator for library items. 239 | 240 | ```css 241 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/overlayprogress.css'); 242 | ``` 243 | OR 244 | ```css 245 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/bottombarprogress.css'); 246 | ``` 247 | OR 248 | ```css 249 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/progress/floating.css'); 250 | ``` 251 | 252 | 253 |
254 | 255 | ### 13. Effects 256 | 257 | ![image](https://user-images.githubusercontent.com/4365015/127781073-c2a2a1f1-4c60-4c57-afa9-13a4775489bb.png) 258 | 259 | Additional eye candy. Make items glow on hover, make some UI elements glassy see-through. Pan animation animates the backdrop with a slow pan. The last one is a hacky way to turn the cover art into a backdrop on mobile, as it was removed in 10.7.0. 260 | 261 | Known issues: Pan-animation can cause flickering on chromium based browsers when the backdrop is also modified. 262 | 263 | ```css 264 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/hoverglow.css'); 265 | ``` 266 | AND/OR 267 | ```css 268 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css'); 269 | ``` 270 | AND/OR 271 | ```css 272 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/pan-animation.css'); 273 | ``` 274 | AND/OR 275 | ```css 276 | @import url('https://ctalvio.github.io/Monochromic/backdrop-hack_style.css'); 277 | ``` 278 | 279 |
280 | 281 | ### 14. Manual options 282 | 283 | There are some manual options you can define if you want, after the import lines add this short snippet of code, you can edit it to set anything you want as a login background, or modify how blurry or dark/light your backdrops are, as well as to set a custom accent color. 284 | 285 | ```css 286 | /*Style backdrop*/ 287 | .backdropImage {filter: blur(18px) saturate(120%) contrast(120%) brightness(40%);} 288 | 289 | /*Login background*/ 290 | #loginPage {background: url(https://i.imgur.com/9vL4iNf.png) !important;} 291 | 292 | /*Accent and roundingd*/ 293 | :root {--accent: 98, 121, 205;} 294 | :root {--rounding: 12px;} 295 | ``` 296 | 297 |
298 | 299 | ### Extras 300 | 301 | [Check out these custom icons by @prayag17!](https://github.com/prayag17/Jellyfin-Icons) 302 | 303 | Also a general thanks to prayag17, I've joinked some code from him for this project. (grid episodes, title logo) 304 | 305 |
306 |
307 | 308 | ### Fix for use with some reverse proxy setups 309 | 310 | When using the Nginx Reverse proxy config from the [Jellyfin docs](https://jellyfin.org/docs/general/networking/nginx.html) the theme will not work by default. (If you are using the subpath config, you can ignore this.) 311 | 312 | Because the config includes Content-Security-Policy which reduces risk of XSS, you need to add the URL's from this repo and the fonts to the list of allowed external sources. 313 | 314 | In the nginx config you should change the 315 | 316 | ``` 317 | add_header Content-Security-Policy .... 318 | ``` 319 | to: 320 | 321 | ``` 322 | add_header Content-Security-Policy "default-src https: data: blob:; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/bottombarprogress.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/overlayprogress.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding_circlehover.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding_circlehover.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_floating.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/pan-animation.css https://ctalvio.github.io/Monochromic/backdrop-hack_style.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/hoverglow.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/scrollfade.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_grid.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_border.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent-dashboard.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_minimalistic.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/monochromic_preset.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/kaleidochromic_preset.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/novachromic_preset.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner-logo.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple-logo.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/light.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/colorful.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark_withaccent.css https://fonts.googleapis.com/css2; script-src 'self' 'unsafe-inline' https://www.gstatic.com/cv/js/sender/v1/cast_sender.js worker-src 'self' blob:; connect-src 'self'; object-src 'none'; frame-ancestors 'self'"; 323 | ``` 324 | 325 | If you don't do this the theme will simply not load (reverts back to default theme) and the browser console will spit out an error. Even if you paste in all the CSS, the font will still not load since it is loaded from an external source. 326 | -------------------------------------------------------------------------------- /WIP.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | .cardOverlayContainer:hover, .dialog, .toast, .raised.homeLibraryButton:hover { 4 | box-shadow: 0px 0px 5px rgb(var(--accent)) !important; 5 | border: solid 1px rgba(var(--accent),0.6) !important; 6 | } 7 | */ 8 | 9 | 10 | /*Theme media player*/ 11 | .mdl-slider-background-lower { 12 | background-color: rgb(255, 255, 255); 13 | } 14 | .mdl-slider::-moz-range-thumb { 15 | background: rgb(255, 255, 255); 16 | } 17 | .mdl-slider::-ms-thumb { 18 | background: rgb(255, 255, 255); 19 | } 20 | .mdl-slider::-webkit-slider-thumb { 21 | background: rgb(255, 255, 255); 22 | } 23 | .iconOsdProgressInner { 24 | background: rgb(255, 255, 255); 25 | } 26 | 27 | .videoOsdBottom { 28 | background: rgba(0,0,0,.7); 29 | } 30 | .skinHeader-withBackground.osdHeader { 31 | background: rgba(0,0,0,.7) !important; 32 | } 33 | 34 | 35 | 36 | /*From Kaleido*/ 37 | /*Cosmetic fixes for quirks (drop down padding and dialogue hover rounding)*/ 38 | .detailTrackSelect { 39 | padding-left: .2em !important; 40 | } 41 | @media all and (max-width: 100em){ 42 | .detailTrackSelect { 43 | padding-left: .5em !important; 44 | } 45 | } 46 | 47 | .actionSheetMenuItem:hover { 48 | border-radius: 0 !important; 49 | } 50 | 51 | .itemsContainer>.card>.cardBox { 52 | margin-left: 0.6em !important; 53 | } 54 | 55 | @media all and (min-width: 131.25em){ 56 | #castContent .cardScalable { 57 | width: calc(6.3vw - 1.2em) !important; 58 | height: calc(6.3vw - 1.2em) !important; 59 | } 60 | } 61 | @media all and (min-width: 120em) and (max-width: 131.25em){ 62 | #castContent .cardScalable { 63 | width: calc(6.4vw - 1.2em) !important; 64 | height: calc(6.4vw - 1.2em) !important; 65 | } 66 | } 67 | @media all and (min-width: 100em) and (max-width: 120em){ 68 | #castContent .cardScalable { 69 | width: calc(7.6vw - 1.2em) !important; 70 | height: calc(7.6vw - 1.2em) !important; 71 | } 72 | } 73 | @media all and (min-width: 87.5em) and (max-width: 100em){ 74 | #castContent .cardScalable { 75 | width: calc(9.3vw - 1.2em) !important; 76 | height: calc(9.3vw - 1.2em) !important; 77 | } 78 | } 79 | @media all and (min-width: 75em) and (max-width: 87.5em){ 80 | #castContent .cardScalable { 81 | width: calc(10.5vw - 1.2em) !important; 82 | height: calc(10.5vw - 1.2em) !important; 83 | } 84 | } 85 | @media all and (min-width: 50em) and (max-width: 75em){ 86 | #castContent .cardScalable { 87 | width: calc(15vw - 1.2em) !important; 88 | height: calc(15vw - 1.2em) !important; 89 | } 90 | } 91 | @media all and (min-width: 43.75em) and (max-width: 50em){ 92 | #castContent .cardScalable { 93 | width: calc(20.1vw - 1.2em) !important; 94 | height: calc(20.1vw - 1.2em) !important; 95 | } 96 | } 97 | @media all and (min-width: 25em) and (max-width: 43.75em){ 98 | #castContent .cardScalable { 99 | width: calc(31.2vw - 1.2em) !important; 100 | height: calc(31.2vw - 1.2em) !important; 101 | } 102 | } 103 | @media all and (max-width: 25em){ 104 | #castContent .cardScalable { 105 | width: calc(40vw - 1.2em) !important; 106 | height: calc(40vw - 1.2em) !important; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /accentlist.css: -------------------------------------------------------------------------------- 1 | .emby-button.show-focus:focus { 2 | background: rgba(var(--accent),0.5) !important; 3 | } 4 | .paper-icon-button-light.show-focus:focus { 5 | color: rgba(var(--accent)) !important; 6 | } 7 | 8 | /*Title text buttons*/ 9 | button-flat:hover { 10 | color: rgba(var(--accent)) !important; 11 | } 12 | 13 | .raised:hover, 14 | .fab:hover, 15 | a[data-role="button"]:hover { 16 | background: rgba(var(--accent),0.5) !important; 17 | } 18 | 19 | .subtitleappearance-preview { 20 | background: linear-gradient(140deg,rgb(var(--accent)),#111) !important; 21 | } 22 | 23 | .navMenuOption-selected, 24 | .css-17c09up.Mui-selected { 25 | color: rgba(var(--accent)); 26 | } 27 | .mdl-slider-background-lower { 28 | background-color: rgba(var(--accent)); 29 | } 30 | 31 | progress::-moz-progress-bar { 32 | background-color: rgba(var(--accent),0.75); 33 | } 34 | progress::-webkit-progress-value { 35 | background-color: rgba(var(--accent),0.75); 36 | } 37 | .taskProgressInner, 38 | .sliderMarker.watched { 39 | background: rgba(var(--accent),0.75) !important; 40 | } 41 | 42 | #dashboardPage .playbackProgress > div { 43 | background-color: rgba(var(--accent), 0.75) !important; 44 | } 45 | #dashboardPage .transcodingProgress > div { 46 | background-color: rgba(var(--accent), 0.35) !important; 47 | } 48 | 49 | .mdl-slider-background-lower { 50 | background-color: rgb(var(--accent)); 51 | } 52 | .mdl-slider::-moz-range-thumb { 53 | background: rgb(var(--accent)); 54 | } 55 | .mdl-slider::-ms-thumb { 56 | background: rgb(var(--accent)); 57 | } 58 | .mdl-slider::-webkit-slider-thumb { 59 | background: rgb(var(--accent)); 60 | } 61 | .iconOsdProgressInner { 62 | background: rgb(var(--accent)); 63 | } 64 | 65 | .paper-icon-button-light:hover, 66 | .raised.homeLibraryButton:hover, 67 | .button-flat:hover, 68 | .playstatebutton-icon-played, 69 | .ratingbutton-icon-withrating, 70 | .paper-icon-button-light:hover:not(:disabled), 71 | .emby-tab-button:hover, 72 | .selectLabelFocused, 73 | .inputLabelFocused, 74 | .textareaLabelFocused, 75 | .buttonActive, 76 | .button-link { 77 | color: rgba(var(--accent)) !important; 78 | } 79 | 80 | #itemDetailPage .button-link {color: inherit !important;} 81 | 82 | .navMenuOption:hover, 83 | .actionSheetMenuItem:hover, 84 | .css-17c09up:hover { 85 | background-color: rgba(var(--accent),0.5) !important; 86 | } 87 | 88 | .emby-checkbox:checked + span + .checkboxOutline, 89 | .emby-textarea:focus, 90 | .emby-select-withcolor:focus, 91 | .emby-input:focus, 92 | .itemSelectionPanel { 93 | border: 0.01em solid rgba(var(--accent),0.5) !important; 94 | } 95 | 96 | .upNextDialog-countdownText { 97 | color: rgba(var(--accent)); 98 | } 99 | 100 | .mdl-spinner__layer-1 { 101 | border-color: rgba(var(--accent)); 102 | } 103 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { 104 | background: rgba(var(--accent), 0.5); 105 | } 106 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { 107 | background: rgba(var(--accent)); 108 | } 109 | 110 | ::-webkit-scrollbar-thumb { 111 | background: rgba(var(--accent),0.8) !important; 112 | } 113 | * { 114 | scrollbar-color: rgba(var(--accent),0.8) #0000 !important; 115 | } 116 | 117 | /* Syncplay theming*/ 118 | .syncPlayIconCircle { 119 | color: rgba(var(--accent),1) !important; 120 | text-shadow: none !important; 121 | } 122 | 123 | .css-4yt2of { 124 | border-right: 1px solid rgba(var(--accent), 0.12); 125 | } 126 | -------------------------------------------------------------------------------- /base.css: -------------------------------------------------------------------------------- 1 | :root {--indicator: 0, 164, 220;} 2 | :root {--selection: 0, 164, 220;} 3 | 4 | .css-4yt2of { 5 | background-color: rgba(0, 0, 0, 0.2); 6 | } 7 | 8 | .emby-textarea { 9 | font-family: monospace; 10 | font-size: 10pt; 11 | } 12 | 13 | .card.show-animation:focus>.cardBox { 14 | -webkit-transform:scale(1.1); 15 | transform:scale(1.1); 16 | } 17 | 18 | /*Theme user setting tab buttons*/ 19 | div[data-role="controlgroup"] a.ui-btn-active { 20 | background: rgba(0, 0, 0, 0.5) !important; 21 | color: white !important; 22 | } 23 | 24 | div[data-role="controlgroup"] a[data-role="button"] { 25 | display: table-cell !important; 26 | margin: 0 !important; 27 | } 28 | 29 | /*Mobile tweaks*/ 30 | .layout-mobile .detailPagePrimaryContainer { 31 | background: transparent; 32 | } 33 | .layout-mobile .adminDrawerLogo { 34 | border-bottom: none; 35 | } 36 | .layout-mobile .itemBackdrop { 37 | margin-top: 4rem; 38 | } 39 | 40 | /*Stop covers from being scrolled on desktop*/ 41 | .layout-desktop .detailImageContainer .card { 42 | position: fixed !important; 43 | top: 10% !important; 44 | } 45 | .layout-mobile .detailImageContainer .card { 46 | position: absolute !important; 47 | } 48 | /*Top "task bar" enlarge text*/ 49 | .headerTabs.sectionTabs { 50 | text-size-adjust: 110%; 51 | font-size: 110%; 52 | } 53 | .pageTitle { 54 | margin-top: auto; 55 | margin-bottom: auto; 56 | } 57 | 58 | /*Theme process progress ring*/ 59 | .progressring-spiner { 60 | border-color: rgba(var(--accent)); 61 | border-width: .35em; 62 | } 63 | .progressring { 64 | margin: .4em; 65 | } 66 | .progressring-bg { 67 | display: none; 68 | } 69 | 70 | /*Theme link color*/ 71 | #itemDetailPage .button-link {color: inherit !important;} 72 | 73 | /*Accommodate mobile and align buttons and indicators*/ 74 | .cardIndicators, 75 | .listItemIndicators { 76 | right: 0.5em; 77 | top: 0.5em; 78 | } 79 | 80 | .mediaSourceIndicator { 81 | left: 0.5em; 82 | top: 0.5em; 83 | } 84 | 85 | @media all and (min-width: 70em){ 86 | .cardOverlayFab-primary { 87 | background-color: #00000000; 88 | } 89 | .cardOverlayButtonIcon { 90 | background-color: #00000000 !important; 91 | } 92 | .cardOverlayContainer { 93 | background-color: rgba(0, 0, 0, 0.7); 94 | } 95 | } 96 | /* Play button hovering (for low width windows) */ 97 | @media all and (max-width: 70em){ 98 | .cardOverlayFab-primary { 99 | background-color: #00000000; 100 | } 101 | .cardOverlayButtonIcon { 102 | background-color: #00000000 !important; 103 | } 104 | .cardOverlayContainer { 105 | background-color: rgba(0, 0, 0, 0.7); 106 | } 107 | .cardOverlayButton { 108 | padding: 0.25em; 109 | } 110 | } 111 | 112 | /*Media player*/ 113 | .nowPlayingPageImage { 114 | border: none; 115 | } 116 | 117 | .upNextDialog-countdownText { 118 | color: white; 119 | } 120 | 121 | /*Shrink the mouseover chapter image when scrobbling, still media player*/ 122 | .chapterThumb { 123 | height: 14vh; 124 | min-width: 14vh; 125 | box-shadow: 0 0 1.9vh #000; 126 | } 127 | .chapterThumbText { 128 | font-size: 1em; 129 | } 130 | .sliderBubble { 131 | background: #0000; 132 | } 133 | .chapterThumbTextContainer { 134 | right: auto; 135 | bottom: 4px; 136 | padding: .25em 0.7em; 137 | } 138 | .chapterThumbContainer { 139 | box-shadow: 0 0 1.9vh #000; 140 | } 141 | .sliderBubble { 142 | -webkit-transform: translate3d(-50%,-108%,0); 143 | transform: translate3d(-50%,-108%,0); 144 | } 145 | 146 | /*Narrow margins, theme main page*/ 147 | .cardBox-bottompadded { 148 | margin-bottom: 0.6em !important; 149 | } 150 | .itemsContainer > .card > .cardBox { 151 | margin-right: 0.8em; 152 | } 153 | .raised.homeLibraryButton { 154 | background: rgba(0, 0, 0, 0.3) !important; 155 | } 156 | .raised.homeLibraryButton:hover { 157 | background: rgba(0, 0, 0, 0.5) !important; 158 | } 159 | .raised.homeLibraryButton:hover {transition: filter 0.2s} 160 | .raised.homeLibraryButton {transition: filter 0.2s} 161 | .homeLibraryButton { 162 | min-width: 12em; 163 | margin: 0.4em; 164 | } 165 | @media all and (max-width: 26em){ 166 | .homeLibraryButton { 167 | min-width: 45%; 168 | width: auto !important; 169 | } 170 | } 171 | .homeLibraryButton { 172 | width: auto !important; 173 | } 174 | .listItem:hover { 175 | transition: 0.2s; 176 | background: rgba(0, 0, 0, 0.4); 177 | } 178 | .visualCardBox, .cardImageContainer { 179 | box-shadow: none; 180 | } 181 | .backgroundProgress > div { 182 | background: rgba(0, 0, 0, 0); 183 | } 184 | .itemProgressBar { 185 | background: rgba(0, 0, 0, 0.25); 186 | } 187 | #divRunningTasks span { 188 | color: rgba(255,255,255,0.75) !important; 189 | } 190 | .itemsContainer > .card > .cardBox { 191 | margin-left: 0.6em !important; 192 | } 193 | .itemsContainer > .card > .cardBox { 194 | margin-right: 0.8em; 195 | } 196 | 197 | /*ANIMATIONS*/ 198 | /*Hover background for section title buttons*/ 199 | .button-flat:hover { 200 | background: rgba(0, 164, 220, 0.2); 201 | color: #00a4dc !important; 202 | } 203 | .dashboardSection h3 { 204 | margin: .5em .0em .5em .5em; 205 | } 206 | .dashboardSection .sectionTitleTextButton > .material-icons.material-icons { 207 | margin-top: .5em; 208 | margin-bottom: .5em; 209 | margin-right: .2em; 210 | } 211 | 212 | /*Rating star, normally yellow*/ 213 | .starIcon { 214 | color: rgba(255,255,255,.8); 215 | } 216 | 217 | /*Remove background on some icons*/ 218 | .listItemIcon { 219 | background: #0000 !important; 220 | } 221 | 222 | /*Remove divider on list items*/ 223 | .listItem-border { 224 | border-color: rgba(255, 255, 255, 0) !important; 225 | } 226 | 227 | /*Fix footers/headers displaying on small pop-ups*/ 228 | .formDialogFooter-clear, 229 | .formDialogHeader-clear, 230 | .innerCardFooterClear { 231 | background-color: transparent !important; 232 | } 233 | 234 | /*Theme slider marker style*/ 235 | .sliderMarker { 236 | width: 3px; 237 | border-radius: 2px; 238 | } 239 | -------------------------------------------------------------------------------- /bottombarprogress.css: -------------------------------------------------------------------------------- 1 | #itemDetailPage .itemProgressBar, 2 | #indexPage .itemProgressBar{ 3 | height: 5px; 4 | background: rgba(0, 0, 0, 0.45); 5 | } 6 | .itemProgressBarForeground { 7 | background-color: rgba(var(--accent),0.75); 8 | } 9 | .transcodingProgress > div { 10 | background-color: rgba(var(--accent), 0.35); 11 | } 12 | -------------------------------------------------------------------------------- /cornerindicator/indicator_corner.css: -------------------------------------------------------------------------------- 1 | /*Card indicators style corner*/ 2 | 3 | .cardIndicators, 4 | .listItemIndicators { 5 | right: 0 !important; 6 | top: 0 !important; 7 | } 8 | .innerCardFooter { 9 | border-radius: 0px var(--rounding) !important; 10 | box-shadow: 1px -1px 4px 0 rgba(0,0,0,0.3); 11 | } 12 | .countIndicator, .playedIndicator { 13 | border-radius: 0px var(--rounding) !important; 14 | box-shadow: -1px 1px 4px 0 rgba(0,0,0,0.3); 15 | } 16 | .countIndicator { 17 | background: rgba(var(--indicator),0.8); 18 | } 19 | .playedIndicator, .innerCardFooter { 20 | background: rgba(0,0,0,0.4) 21 | } 22 | 23 | .mediaSourceIndicator { 24 | left: 0; 25 | top: 0; 26 | } 27 | .mediaSourceIndicator { 28 | border-radius: var(--rounding) 0px !important; 29 | box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.3); 30 | background: rgba(0,0,0,0.4) 31 | } 32 | -------------------------------------------------------------------------------- /cornerindicator/indicator_floating.css: -------------------------------------------------------------------------------- 1 | /*Card indicators style normal*/ 2 | .innerCardFooter { 3 | margin: .5em; 4 | } 5 | 6 | .countIndicator { 7 | background: rgba(var(--indicator),0.8); 8 | box-shadow: none; 9 | } 10 | .playedIndicator, .innerCardFooter { 11 | background: rgba(0,0,0,0.4); 12 | box-shadow: none; 13 | } 14 | 15 | .mediaSourceIndicator { 16 | background: rgba(0,0,0,0.4); 17 | box-shadow: none; 18 | border-radius: var(--rounding); 19 | } 20 | -------------------------------------------------------------------------------- /effects/glassy.css: -------------------------------------------------------------------------------- 1 | @supports (backdrop-filter: blur(15px)) { 2 | .skinHeader-withBackground, 3 | .css-fknfom { 4 | backdrop-filter: blur(15px); 5 | } 6 | .dialog, 7 | .mainDrawer, 8 | .toast, 9 | .appfooter { 10 | backdrop-filter: blur(15px); 11 | background-color: rgba(0, 0, 0, 0.35); 12 | } 13 | .paper-icon-button-light:hover, 14 | #itemDetailPage .itemProgressBar, 15 | #dashboardPage .backgroundProgress > div { 16 | backdrop-filter: blur(4px); 17 | } 18 | @media all and (max-width: 70em){ 19 | .cardOverlayButtonIcon { 20 | background-color: rgba(0, 0, 0, 0.35) !important; 21 | } 22 | .cardOverlayButtonIcon { 23 | backdrop-filter: blur(4px); 24 | } 25 | } 26 | .indicator { 27 | backdrop-filter: blur(2px); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /effects/hoverglow.css: -------------------------------------------------------------------------------- 1 | /*Glow accent on hover*/ 2 | .raised.homeLibraryButton { 3 | box-shadow: 0px 0px 5px rgba(var(--accent), 0) !important; 4 | border: solid 1px rgba(var(--accent),0) !important; 5 | } 6 | .cardOverlayContainer:hover, 7 | .dialog, 8 | .toast, 9 | .raised.homeLibraryButton:hover { 10 | box-shadow: 0px 0px 5px rgb(var(--accent)) !important; 11 | border: solid 1px rgba(var(--accent),0.6) !important; 12 | } 13 | .cardOverlayContainer { 14 | border: solid 1px rgba(var(--accent),0.0) !important; 15 | } 16 | .drawer-open { 17 | box-shadow: 0px 0px 5px rgba(var(--accent), 1) !important; 18 | border-right: solid 1px rgba(var(--accent), 1) !important; 19 | } 20 | -------------------------------------------------------------------------------- /effects/pan-animation.css: -------------------------------------------------------------------------------- 1 | @keyframes backgroundScroll { 2 | 0% { 3 | background-position: 99% 1%; opacity: 0; 4 | } 5 | 2% { 6 | opacity: 1; 7 | } 8 | 20% { 9 | background-position: 1% 50%; 10 | } 11 | 40% { 12 | background-position: 99% 99%; 13 | } 14 | 60% { 15 | background-position: 1% 1%; 16 | } 17 | 80% { 18 | background-position: 50% 99%; 19 | } 20 | 100% { 21 | background-position: 99% 1%; 22 | } 23 | } 24 | 25 | 26 | @keyframes backgroundScrollmob { 27 | 0% { 28 | background-position: 99% 1%; opacity: 0; 29 | } 30 | 12% { 31 | opacity: 1; 32 | } 33 | 88% { 34 | opacity: 1; 35 | } 36 | 100% { 37 | background-position: 50% 50%; opacity: 0; 38 | } 39 | } 40 | 41 | 42 | 43 | @media all and (min-width: 100em){ 44 | .backdropImage { 45 | background-size: 150% 150%; 46 | background-position: 99% 1%; 47 | animation: backgroundScroll 630s ease; 48 | animation-iteration-count: infinite; 49 | } 50 | } 51 | 52 | @media all and (max-width: 100em){ 53 | .backdropImage { 54 | /*background-size: 150% 150%;*/ 55 | background-position: 99% 1%; 56 | animation: backgroundScrollmob 25s ease; 57 | animation-iteration-count: infinite; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /episodelist/episodes_compactlist.css: -------------------------------------------------------------------------------- 1 | /*Size episode preview images in a more compact way*/ 2 | .listItemImage.listItemImage-large.itemAction.lazy { 3 | transition: filter 0.2s 4 | } 5 | .listItemImageButton-icon { 6 | padding: 0; 7 | } 8 | .secondary.listItem-overview.listItemBodyText { 9 | height: unset !important; 10 | margin: 0; 11 | } 12 | .listItemImageButton { 13 | margin: auto; 14 | font-size: 1.6em !important; 15 | } 16 | @media all and (min-width: 100em){ 17 | .listItemImage.listItemImage-large.itemAction.lazy { 18 | height: 160px !important; 19 | } 20 | .listItem-content { 21 | height: unset !important; 22 | } 23 | .secondary.listItem-overview.listItemBodyText { 24 | height: unset !important; 25 | margin: 0; 26 | } 27 | } 28 | @media all and (max-width: 100em){ 29 | .listItemImage.listItemImage-large.itemAction.lazy {height: 160px !important;} 30 | .listItem-content {height: unset !important;} 31 | .secondary.listItem-overview.listItemBodyText {height: unset !important; margin: 0;} 32 | } 33 | 34 | .missingIndicator, .unairedIndicator { 35 | background: #ae3030eb; 36 | padding: .3em .6em; 37 | color: #fff; 38 | } 39 | .layout-mobile .listItemImageButton { 40 | background: rgba(0, 0, 0, 0); 41 | } 42 | -------------------------------------------------------------------------------- /episodelist/episodes_grid.css: -------------------------------------------------------------------------------- 1 | /*Size episode preview images in a more compact way*/ 2 | 3 | .childrenItemsContainer.itemsContainer.padded-right.vertical-list { 4 | display: grid; 5 | grid-template-columns: 1fr 1fr 1fr 1fr; 6 | } 7 | 8 | @media all and (min-width: 2000px) { 9 | .listItemImage-large { 10 | height: 9.5vw; 11 | } 12 | } 13 | 14 | @media all and (max-width: 2000px) { 15 | .childrenItemsContainer.itemsContainer.padded-right.vertical-list { 16 | grid-template-columns: 1fr 1fr 1fr; 17 | } 18 | } 19 | 20 | @media all and (max-width: 1000px) { 21 | .childrenItemsContainer.itemsContainer.padded-right.vertical-list { 22 | grid-template-columns: 1fr 1fr; 23 | } 24 | } 25 | 26 | .layout-mobile 27 | .childrenItemsContainer.itemsContainer.padded-right.vertical-list { 28 | grid-template-columns: 1fr; 29 | } 30 | 31 | #itemDetailPage .listItem-content { 32 | border-radius: var(--rounding); 33 | overflow: hidden; 34 | transition: background 0.15s ease-in-out; 35 | flex-flow: column; 36 | -webkit-transition: background 0.15s ease-in-out; 37 | -moz-transition: background 0.15s ease-in-out; 38 | -ms-transition: background 0.15s ease-in-out; 39 | -o-transition: background 0.15s ease-in-out; 40 | } 41 | 42 | .listItemImage.listItemImage-large { 43 | width: 100%; 44 | margin: 0; 45 | } 46 | 47 | .listItem-overview.listItemBodyText { 48 | height: 5.5em !important; 49 | font-size: 1em !important; 50 | } 51 | 52 | .layout-mobile .listItemImageButton-icon { 53 | padding: 0; 54 | top: 0.34em; 55 | position: absolute !important; 56 | font-size: 1.5em !important; 57 | right: 3em; 58 | } 59 | 60 | #itemDetailPage .listItem { 61 | position: relative; 62 | height: -webkit-fit-content; 63 | height: -moz-fit-content; 64 | height: fit-content; 65 | overflow: hidden; 66 | margin-bottom: 1.5rem; 67 | border-radius: var(--rounding); 68 | padding: .5em; 69 | } 70 | 71 | #itemDetailPage .secondary.listItem-overview.listItemBodyText { 72 | height: 100%; 73 | margin: 0; 74 | } 75 | 76 | .listItem[data-mediatype="Audio"] { 77 | padding: 0 1em; 78 | border-radius: var(--rounding) !important; 79 | -webkit-border-radius: var(--rounding) !important; 80 | -moz-border-radius: var(--rounding) !important; 81 | -ms-border-radius: var(--rounding) !important; 82 | -o-border-radius: var(--rounding) !important; 83 | } 84 | 85 | .layout-mobile #itemDetailPage .listItemImageButton { 86 | width: 100%; 87 | height: 100%; 88 | background: rgba(0, 0, 0, 0.5); 89 | z-index: -1; 90 | -webkit-backdrop-filter: blur(4px); 91 | backdrop-filter: blur(4px); 92 | color: white; 93 | } 94 | 95 | .layout-mobile .listItemIndicators { 96 | right: 0; 97 | top: 0; 98 | z-index: 0; 99 | } 100 | 101 | .layout-mobile .playedIndicator { 102 | width: 2em; 103 | height: 2em; 104 | font-size: 1.2rem; 105 | position: absolute; 106 | top: 0; 107 | right: 0; 108 | box-shadow: none; 109 | } 110 | 111 | .layout-mobile .listItemIndicators .indicatorIcon.check { 112 | z-index: 2; 113 | } 114 | 115 | .layout-mobile .listItemBodyText { 116 | max-width: 36vw; 117 | } 118 | 119 | @media all and (min-width: 50em) { 120 | .layout-mobile .listItemBodyText { 121 | max-width: 100%; 122 | } 123 | } 124 | 125 | .layout-mobile .listItem .playedIndicator { 126 | background: transparent !important; 127 | color: rgba(var(--accent)); 128 | } 129 | 130 | .layout-mobile .listItemImage { 131 | height: 100% !important; 132 | width: 100% !important; 133 | position: absolute; 134 | left: 50%; 135 | top: 50%; 136 | transform: translate(-50%, -50%); 137 | overflow: hidden; 138 | border-radius: var(--rounding) !important; 139 | } 140 | 141 | .layout-mobile .listItemImageButton:hover { 142 | transform: scale(1); 143 | } 144 | 145 | .layout-mobile .listViewUserDataButtons { 146 | position: absolute; 147 | right: 0; 148 | top: 1.25em; 149 | padding-right: 1em; 150 | } 151 | 152 | .layout-mobile .listItemButton { 153 | padding: 0 0.556em !important; 154 | } 155 | 156 | .layout-mobile #itemDetailPage .listItem-content { 157 | -webkit-backdrop-filter: none; 158 | backdrop-filter: none; 159 | align-items: flex-start; 160 | } 161 | 162 | .layout-mobile #itemDetailPage .listItem-content { 163 | background: none !important; 164 | position: unset; 165 | color: white; 166 | } 167 | 168 | .listItemImageButton { 169 | margin: auto; 170 | font-size: 1.6em !important; 171 | } 172 | .listItemBody.itemAction, 173 | .listItem-bottomoverview.secondary{ 174 | z-index: 1; 175 | } 176 | .listItem-bottomoverview.secondary{ 177 | text-align: justify; 178 | padding: .5em; 179 | margin: 0; 180 | } 181 | -------------------------------------------------------------------------------- /fields/fields_border.css: -------------------------------------------------------------------------------- 1 | /*Tweak entry fields, checkmarks, thin borders dark highlight*/ 2 | .emby-input, 3 | .emby-textarea { 4 | padding: .4em .55em; 5 | } 6 | .emby-select { 7 | padding: .35em 1.9em .35em .35em; 8 | } 9 | .selectArrow { 10 | margin-top: 1.05em; 11 | } 12 | .checkboxOutline, 13 | .emby-input, 14 | .emby-textarea, 15 | .emby-select-withcolor { 16 | background: rgba(0, 0, 0, 0.2); 17 | border: 0.01em solid rgba(255, 255, 255, 0.22); 18 | } 19 | .emby-input:focus, 20 | .emby-textarea:focus, 21 | .emby-select-withcolor:focus { 22 | background: rgba(0, 0 , 0, 0.4) !important; 23 | } 24 | 25 | .emby-textarea:focus, 26 | .emby-select-withcolor:focus, 27 | .emby-input:focus, 28 | .itemSelectionPanel { 29 | border: 0.01em solid rgba(var(--selection), 0.8) !important; 30 | } 31 | .emby-checkbox:checked + span + .checkboxOutline { 32 | background-color: rgba(0, 0 , 0, 0.4) !important; 33 | border: 0.01em solid rgba(var(--selection), 0.8) !important; 34 | } 35 | 36 | /*Theme the library scan progress bar*/ 37 | progress { 38 | background: rgba(0, 0, 0, 0.5) !important; 39 | border: 1px solid rgba(255, 255, 255, 0.22); 40 | } 41 | progress::-webkit-progress-bar { 42 | background: rgba(0, 0, 0, 0.5) !important; 43 | border: 0px solid rgba(255, 255, 255, 0.22); 44 | } 45 | progress::-moz-progress-bar { 46 | background-color: rgba(255,255,255,0.75); 47 | } 48 | progress::-webkit-progress-value { 49 | background-color: rgba(255,255,255,0.75); 50 | } 51 | #divRunningTasks span { 52 | color: rgba(255,255,255,0.75) !important; 53 | } 54 | .taskProgressOuter { 55 | background: rgba(0, 0, 0, 0.5) !important; 56 | border: 1px solid rgba(255, 255, 255, 0.22); 57 | } 58 | .taskProgressInner { 59 | background: rgba(255,255,255,0.75) !important; 60 | } 61 | #scheduledTasksPage span { 62 | color: rgba(255,255,255,0.75) !important; 63 | } -------------------------------------------------------------------------------- /fields/fields_noborder.css: -------------------------------------------------------------------------------- 1 | /*No borders, background highlights*/ 2 | .infoBanner { 3 | background: rgba(var(--selection), 0.15) !important; 4 | } 5 | fieldset { 6 | border: 1px solid rgba(var(--selection), 0.3); 7 | } 8 | .checkboxOutline, 9 | .emby-input, 10 | .emby-textarea, 11 | .emby-select-withcolor { 12 | border: none !important; 13 | background: rgba(0, 0, 0, 0.5); 14 | } 15 | #itemDetailPage .emby-select-withcolor { 16 | background: rgba(0, 0, 0, 0.2); 17 | } 18 | 19 | /*Change look of in-focus fields*/ 20 | .emby-checkbox:checked + span + .checkboxOutline, 21 | .emby-input:focus, 22 | .emby-textarea:focus, 23 | .emby-select-withcolor:focus, 24 | .itemSelectionPanel { 25 | border: none !important; 26 | background: rgba(var(--selection), 0.25) !important; 27 | } 28 | .checkboxIcon { 29 | color: rgba(var(--selection), 1); 30 | } 31 | 32 | /*Progress bars*/ 33 | progress { 34 | border: 0px solid rgba(255, 255, 255, 0.22); 35 | } 36 | progress::-webkit-progress-bar { 37 | border: 0px solid rgba(255, 255, 255, 0.22); 38 | } 39 | .taskProgressOuter { 40 | border: 0px solid rgba(255, 255, 255, 0.22); 41 | } -------------------------------------------------------------------------------- /fixes.css: -------------------------------------------------------------------------------- 1 | /*Enlarge button row on item page, even more on mobile*/ 2 | .mainDetailButtons { 3 | font-size: 120%; 4 | } 5 | 6 | /*Add fixes, start of file*/ 7 | @media all and (min-width: 100em){ 8 | .button-flat { 9 | margin: .2em !important; 10 | padding: .85em !important; 11 | } 12 | } 13 | @media all and (max-width: 100em){ 14 | .mainDetailButtons { 15 | font-size: 155%; 16 | } 17 | .detailButton { 18 | max-width: 15vw !important; 19 | } 20 | } 21 | 22 | /*Media player*/ 23 | .startTimeText, .endTimeText { 24 | width: 3.4em; 25 | display: block; 26 | text-align: center; 27 | } 28 | .osdTitle { 29 | margin-left: 0.5em; 30 | } 31 | 32 | .videoOsdBottom { 33 | padding-top: 1em; 34 | } 35 | 36 | .skinHeader-withBackground.osdHeader { 37 | height: 5em; 38 | } 39 | 40 | /*Accommodate ultrawide aspect ratios*/ 41 | @media (min-aspect-ratio: 1.98/1) { 42 | .detailImageContainer .card { 43 | width: 21vw !important ; 44 | } 45 | .detailPagePrimaryContainer { 46 | padding-left: 28.45vw !important; 47 | } 48 | .detailPageContent { 49 | padding-left: 28.45vw !important; 50 | } 51 | } 52 | @media (min-aspect-ratio: 2.7/1) { 53 | .detailImageContainer .card { 54 | width: 16vw !important; 55 | } 56 | .detailPagePrimaryContainer { 57 | padding-left: 23.45vw !important; 58 | } 59 | .detailPageContent { 60 | padding-left: 23.45vw !important; 61 | } 62 | } 63 | 64 | /*Tweak entry field padding and alignment/sizes*/ 65 | .emby-input, 66 | .emby-textarea { 67 | padding: .4em .55em; 68 | } 69 | .emby-select { 70 | padding: .35em 1.9em .35em .35em; 71 | } 72 | .selectArrow { 73 | margin-top: 1.05em; 74 | } 75 | 76 | /*Fix weird shevron off centering*/ 77 | .layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { 78 | padding-top:0em; 79 | } 80 | .sectionTitle { 81 | margin-left: .4em !important; 82 | margin-top: .2em !important; 83 | margin-bottom: .2em !important; 84 | } 85 | .sectionTitleTextButton > .material-icons { 86 | margin: 0; 87 | } 88 | .layout-mobile .sectionTitleTextButton > .material-icons { 89 | padding-top: .2em; 90 | } 91 | 92 | /*Fix the UI shifting around*/ 93 | .nowPlayingBarCurrentTime { 94 | width: 6em; 95 | } 96 | .osdTextContainer { 97 | margin: 0 !important; 98 | margin-top: 0.2em !important; 99 | padding-left: 0.5em !important; 100 | padding-right: 0.5em !important; 101 | } 102 | 103 | /*Fix top right user icon when using a profile image*/ 104 | .headerUserButtonRound { 105 | border-radius: 50px !important; 106 | } 107 | 108 | /*Improve some menu alignments*/ 109 | .navMenuOptionText { 110 | margin-top: 0; 111 | } 112 | .formDialogHeaderTitle { 113 | margin-left: 1em; 114 | } 115 | .formDialogContent { 116 | margin-bottom: 6.2em; 117 | } 118 | .dialogContentInner { 119 | padding: .5em 1em 1em; 120 | padding-right: 1em; 121 | padding-left: 1em; 122 | } 123 | .listItem-indexnumberleft { 124 | margin: 1em; 125 | } 126 | .listItem { 127 | padding-left: 1em; 128 | } 129 | -------------------------------------------------------------------------------- /header/header_transparent-dashboard.css: -------------------------------------------------------------------------------- 1 | .skinHeader-withBackground { 2 | background-color: transparent; 3 | } 4 | 5 | /*Pages the have single unit height taskbar*/ 6 | @media all and (min-width: 100em){ 7 | #indexPage, 8 | #moviesPage, 9 | #tvRecommendedPage, 10 | #musicRecommendedPage { 11 | margin-top: 68px; 12 | padding-top: 0px !important; 13 | overflow-y: scroll; 14 | } 15 | } 16 | 17 | /*Pages the have two unit height taskbar*/ 18 | @media all and (max-width: 100em){ 19 | #indexPage, 20 | #moviesPage, 21 | #tvRecommendedPage, 22 | #musicRecommendedPage { 23 | margin-top: 130px; 24 | padding-top: 0.5em !important; 25 | overflow-y: scroll; 26 | } 27 | } 28 | 29 | .force-scroll { 30 | overflow-y: auto; 31 | overflow-x: auto; 32 | } 33 | -------------------------------------------------------------------------------- /header/header_transparent.css: -------------------------------------------------------------------------------- 1 | .skinHeader-withBackground { 2 | background-color: transparent; 3 | } 4 | 5 | /*Pages the have single unit height taskbar*/ 6 | @media all and (min-width: 100em){ 7 | #indexPage, 8 | #moviesPage, 9 | #tvRecommendedPage, 10 | #musicRecommendedPage { 11 | margin-top: 68px; 12 | padding-top: 0px !important; 13 | overflow-y: scroll; 14 | } 15 | } 16 | 17 | /*Pages the have two unit height taskbar*/ 18 | @media all and (max-width: 100em){ 19 | #indexPage, 20 | #moviesPage, 21 | #tvRecommendedPage, 22 | #musicRecommendedPage { 23 | margin-top: 130px; 24 | padding-top: 0.5em !important; 25 | overflow-y: scroll; 26 | } 27 | } 28 | 29 | .force-scroll { 30 | overflow-y: auto; 31 | overflow-x: auto; 32 | } 33 | -------------------------------------------------------------------------------- /jf_font.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap'); body, h1, h2, h3, h4 { 2 | font-family: 'Plus Jakarta Sans', sans-serif; 3 | } 4 | 5 | .emby-textarea { 6 | font-family: monospace; 7 | font-size: 10pt; 8 | } 9 | -------------------------------------------------------------------------------- /login/login_frame.css: -------------------------------------------------------------------------------- 1 | /*Narrow the login form, size according to display size (bigger on mobile)*/ 2 | #loginPage .readOnlyContent, 3 | #loginPage form { 4 | max-width: 22em; 5 | } 6 | 7 | #loginPage .padded-left.padded-right.padded-bottom-page { 8 | margin-top: 8em 9 | } 10 | 11 | /*Hide "manual" and "forgot" buttons}*/ 12 | #loginPage .raised.cancel.block.btnForgotPassword.emby-button { 13 | display: none 14 | } 15 | 16 | #loginPage .padded-left.padded-right.padded-bottom-page { 17 | margin-left: auto; 18 | margin-right: auto; 19 | background: rgba(0, 0, 0, 0.35); 20 | width: 24em; 21 | border-radius: var(--rounding); 22 | } 23 | #loginPage .squareCard { 24 | width: 33%; 25 | } 26 | #loginPage form { 27 | padding-top: 4em; 28 | } 29 | 30 | #loginPage .sectionTitle{ 31 | margin-left: auto !important; 32 | margin-right: auto !important; 33 | margin-bottom: 1.2em !important; 34 | } 35 | #loginPage { 36 | background: url(https://i.imgur.com/9vL4iNf.png) !important; 37 | background-size: cover !important; 38 | } 39 | -------------------------------------------------------------------------------- /login/login_minimalistic.css: -------------------------------------------------------------------------------- 1 | /*Narrow the login form, size according to display size (bigger on mobile)*/ 2 | #loginPage .readOnlyContent, 3 | #loginPage form { 4 | max-width: 22em; 5 | } 6 | 7 | /*Hide "please login" text, margin is to prevent login form moving too far up*/ 8 | #loginPage h1 { 9 | display: none 10 | } 11 | #loginPage .padded-left.padded-right.padded-bottom-page { 12 | margin-top: 8em 13 | } 14 | 15 | /*Hide "manual" and "forgot" buttons}*/ 16 | #loginPage .raised.cancel.block.btnForgotPassword.emby-button { 17 | display: none 18 | } 19 | #loginPage { 20 | background: url(https://i.imgur.com/9vL4iNf.png) !important; 21 | background-size: cover !important; 22 | } 23 | -------------------------------------------------------------------------------- /overlayprogress.css: -------------------------------------------------------------------------------- 1 | #itemDetailPage .itemProgressBar, 2 | #indexPage .itemProgressBar { 3 | height: 2000em; 4 | background: #0000; 5 | } 6 | .innerCardFooter.fullInnerCardFooter.innerCardFooterClear { 7 | background: rgba(0,0,0,0); 8 | right: 0; 9 | left: 0; 10 | top: 0; 11 | bottom: 0; 12 | margin: 0; 13 | } 14 | .itemProgressBarForeground { 15 | background-color: rgba(var(--accent), 0.35); 16 | } 17 | -------------------------------------------------------------------------------- /presets/kaleidochromic_preset.css: -------------------------------------------------------------------------------- 1 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css'); 2 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css'); 3 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css'); 4 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css'); 5 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css'); 6 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css'); 7 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css'); 8 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent-dashboard.css'); 9 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css'); 10 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css'); 11 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css'); 12 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/colorful.css'); 13 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple.css'); 14 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/overlayprogress.css'); 15 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/hoverglow.css'); 16 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css'); 17 | 18 | 19 | 20 | :root {--rounding: 12px;} 21 | 22 | /*Style backdrop*/ 23 | .backdropImage { 24 | filter: blur(18px) saturate(120%) contrast(120%) brightness(40%); 25 | } 26 | -------------------------------------------------------------------------------- /presets/monochromic_preset.css: -------------------------------------------------------------------------------- 1 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css'); 2 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css'); 3 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css'); 4 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css'); 5 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css'); 6 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css'); 7 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent-dashboard.css'); 8 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_minimalistic.css'); 9 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_border.css'); 10 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css'); 11 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark.css'); 12 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple.css'); 13 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/overlayprogress.css'); 14 | 15 | :root {--rounding: 5px;} 16 | 17 | /*Style backdrop*/ 18 | .backdropImage { 19 | filter: blur(60px) saturate(200%) contrast(160%) brightness(25%); 20 | } 21 | -------------------------------------------------------------------------------- /presets/novachromic_preset.css: -------------------------------------------------------------------------------- 1 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css'); 2 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css'); 3 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css'); 4 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css'); 5 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css'); 6 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css'); 7 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css'); 8 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent-dashboard.css'); 9 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_minimalistic.css'); 10 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css'); 11 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_floating.css'); 12 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/light.css'); 13 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple.css'); 14 | @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/overlayprogress.css'); 15 | 16 | :root {--rounding: 0px;} 17 | 18 | /*Style backdrop*/ 19 | .backdropImage { 20 | filter: blur(22px) saturate(95%) contrast(15%) brightness(155%); 21 | } 22 | -------------------------------------------------------------------------------- /progress/floating.css: -------------------------------------------------------------------------------- 1 | /*New progress bar*/ 2 | #indexPage .innerCardFooterClear, 3 | .libraryPage .innerCardFooterClear, 4 | #itemDetailPage .innerCardFooterClear { 5 | background-color: transparent !important; 6 | box-shadow: none; 7 | } 8 | #indexPage .itemProgressBarForeground, 9 | .libraryPage .itemProgressBarForeground, 10 | #itemDetailPage .itemProgressBarForeground, 11 | #indexPage .itemProgressBar, 12 | .libraryPage .itemProgressBar, 13 | #itemDetailPage .itemProgressBar { 14 | border-radius: var(--rounding); 15 | } 16 | #indexPage .itemProgressBarForeground, 17 | .libraryPage .itemProgressBarForeground, 18 | #itemDetailPage .itemProgressBarForeground { 19 | background-color: rgba(var(--accent), 0.95) !important; 20 | } 21 | #indexPage .itemProgressBar, 22 | .libraryPage .itemProgressBar, 23 | #itemDetailPage .itemProgressBar { 24 | height: 6px; 25 | background: rgba(0,0,0,0.4); 26 | margin: .5em .8em; 27 | } 28 | /*Accommodate play button on mobile*/ 29 | @media all and (max-width: 100em){ 30 | #indexPage .itemProgressBar, 31 | .libraryPage .itemProgressBar, 32 | #itemDetailPage .itemProgressBar { 33 | margin-right: 3.2em; 34 | } 35 | } 36 | @supports (backdrop-filter: blur(15px)) { 37 | #indexPage .itemProgressBar, 38 | .libraryPage .itemProgressBar, 39 | #itemDetailPage .itemProgressBar{ 40 | backdrop-filter: blur(4px); 41 | background: rgba(0, 0, 0, 0.35) !important; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /rounding.css: -------------------------------------------------------------------------------- 1 | /*Rounded corners on pretty much everything*/ 2 | 3 | progress { 4 | border-radius: var(--rounding); 5 | } 6 | progress::-webkit-progress-bar { 7 | border-radius: var(--rounding); 8 | } 9 | progress::-moz-progress-bar { 10 | border-radius: var(--rounding); 11 | } 12 | progress::-webkit-progress-value { 13 | border-radius: var(--rounding); 14 | } 15 | .taskProgressOuter, 16 | .taskProgressInner { 17 | border-radius: var(--rounding) !important; 18 | } 19 | .formDialogHeader { 20 | border-top-left-radius: var(--rounding); 21 | border-top-right-radius: var(--rounding); 22 | } 23 | .formDialogFooter { 24 | border-bottom-left-radius: var(--rounding); 25 | border-bottom-right-radius: var(--rounding); 26 | } 27 | .cardOverlayContainer { 28 | border-radius: var(--rounding) !important; 29 | } 30 | .missingIndicator, 31 | .unairedIndicator, 32 | .detailTable, 33 | .primaryImageWrapper > img, 34 | .toast, 35 | .paperList, 36 | .cardContent, 37 | .sessionNowPlayingInnerContent, 38 | .listItem:hover, 39 | .cardImage, 40 | .fab, 41 | .raised, 42 | .multiSelectCheckboxOutline, 43 | .itemSelectionPanel, 44 | .cardContent-button, 45 | .cardContent-shadow, 46 | .itemDetailImage, 47 | .cardOverlayButton-hover, 48 | .cardImageContainer, 49 | .cardPadder, 50 | .listItemImage, 51 | .listItemImageButton, 52 | .listItemButton, 53 | .headerButton, 54 | .paper-icon-button-light, 55 | .innerCardFooter, 56 | .blurhash-canvas, 57 | .dialog, 58 | .countIndicator, 59 | .playedIndicator, 60 | .listItemIcon, 61 | .listItem-border, 62 | .button-flat, 63 | .visualCardBox, 64 | .checkboxOutline, 65 | .emby-select-withcolor, 66 | .chapterThumbTextContainer, 67 | .chapterThumbContainer, 68 | .chapterThumb, 69 | .emby-input, 70 | .emby-textarea, 71 | .emby-select-withcolor, 72 | .nowPlayingPageImage, 73 | .upNextDialog-poster-img, 74 | .upNextContainer, 75 | .cardOverlayButtonIcon { 76 | border-radius: var(--rounding) !important; 77 | } 78 | .actionSheetMenuItem:hover { 79 | border-radius: 0 !important; 80 | } 81 | fieldset { 82 | border-radius: var(--rounding); 83 | } 84 | .osdPoster img { 85 | border-radius: var(--rounding); border: none; 86 | } 87 | .mdl-slider::-moz-range-thumb { 88 | border-radius: var(--rounding); 89 | } 90 | .mdl-slider::-ms-thumb { 91 | border-radius: var(--rounding); 92 | } 93 | .mdl-slider::-webkit-slider-thumb { 94 | border-radius: var(--rounding); 95 | } 96 | 97 | div[data-role="controlgroup"] a[data-role="button"]:first-child { 98 | border-bottom-left-radius: var(--rounding); 99 | border-top-left-radius: var(--rounding); 100 | } 101 | div[data-role="controlgroup"] a[data-role="button"]:last-child { 102 | border-bottom-right-radius: var(--rounding); 103 | border-top-right-radius: var(--rounding); 104 | } 105 | #dashboardPage .cardContent, #dashboardPage .sessionNowPlayingInnerContent { 106 | border-radius: var(--rounding) var(--rounding) 0 0 !important; 107 | } 108 | #divVirtualFolders .cardImageContainer, #divVirtualFolders .cardContent { 109 | border-radius: var(--rounding) var(--rounding) 0 0 !important; 110 | } 111 | #userProfilesPage .cardImage, #userProfilesPage .cardContent { 112 | border-radius: var(--rounding) var(--rounding) 0 0 !important; 113 | } -------------------------------------------------------------------------------- /rounding_circlehover.css: -------------------------------------------------------------------------------- 1 | /*Rounded corners on pretty much everything*/ 2 | 3 | .detailButton { 4 | border-radius: 50%; 5 | } 6 | 7 | progress { 8 | border-radius: var(--rounding); 9 | } 10 | progress::-webkit-progress-bar { 11 | border-radius: var(--rounding); 12 | } 13 | progress::-moz-progress-bar { 14 | border-radius: var(--rounding); 15 | } 16 | progress::-webkit-progress-value { 17 | border-radius: var(--rounding); 18 | } 19 | .taskProgressOuter, 20 | .taskProgressInner { 21 | border-radius: var(--rounding) !important; 22 | } 23 | .formDialogHeader { 24 | border-top-left-radius: var(--rounding); 25 | border-top-right-radius: var(--rounding); 26 | } 27 | .formDialogFooter { 28 | border-bottom-left-radius: var(--rounding); 29 | border-bottom-right-radius: var(--rounding); 30 | } 31 | .cardOverlayContainer { 32 | border-radius: var(--rounding) !important; 33 | } 34 | .missingIndicator, 35 | .unairedIndicator, 36 | .detailTable, 37 | .primaryImageWrapper > img, 38 | .toast, 39 | .paperList, 40 | .cardContent, 41 | .sessionNowPlayingInnerContent, 42 | .listItem:hover, 43 | .cardImage, 44 | .fab, 45 | .raised, 46 | .multiSelectCheckboxOutline, 47 | .itemSelectionPanel, 48 | .cardContent-button, 49 | .cardContent-shadow, 50 | .itemDetailImage, 51 | .cardImageContainer, 52 | .cardPadder, 53 | .listItemImage, 54 | .listItemImageButton, 55 | .listItemButton, 56 | .innerCardFooter, 57 | .blurhash-canvas, 58 | .dialog, 59 | .countIndicator, 60 | .playedIndicator, 61 | .listItemIcon, 62 | .listItem-border, 63 | .visualCardBox, 64 | .checkboxOutline, 65 | .emby-select-withcolor, 66 | .chapterThumbTextContainer, 67 | .chapterThumbContainer, 68 | .chapterThumb, 69 | .emby-input, 70 | .emby-textarea, 71 | .emby-select-withcolor, 72 | .nowPlayingPageImage, 73 | .upNextDialog-poster-img, 74 | .upNextContainer, 75 | .cardOverlayButtonIcon { 76 | border-radius: var(--rounding) !important; 77 | } 78 | .osdPoster img { 79 | border-radius: var(--rounding); border: none; 80 | } 81 | .mdl-slider::-moz-range-thumb { 82 | border-radius: var(--rounding); 83 | } 84 | .mdl-slider::-ms-thumb { 85 | border-radius: var(--rounding); 86 | } 87 | .mdl-slider::-webkit-slider-thumb { 88 | border-radius: var(--rounding); 89 | } 90 | 91 | div[data-role="controlgroup"] a[data-role="button"]:first-child { 92 | border-bottom-left-radius: var(--rounding); 93 | border-top-left-radius: var(--rounding); 94 | } 95 | div[data-role="controlgroup"] a[data-role="button"]:last-child { 96 | border-bottom-right-radius: var(--rounding); 97 | border-top-right-radius: var(--rounding); 98 | } 99 | #dashboardPage .cardContent, #dashboardPage .sessionNowPlayingInnerContent { 100 | border-radius: var(--rounding) var(--rounding) 0 0 !important; 101 | } 102 | #divVirtualFolders .cardImageContainer, #divVirtualFolders .cardContent { 103 | border-radius: var(--rounding) var(--rounding) 0 0 !important; 104 | } 105 | #userProfilesPage .cardImage, #userProfilesPage .cardContent { 106 | border-radius: var(--rounding) var(--rounding) 0 0 !important; 107 | } -------------------------------------------------------------------------------- /saved.css: -------------------------------------------------------------------------------- 1 | @import url('https://ctalvio.github.io/Kaleidochromic/default_style.css'); 2 | @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); 3 | @import url('https://ctalvio.github.io/Kaleidochromic/alternate-itempage_style.css'); 4 | @import url('https://ctalvio.github.io/Kaleidochromic/backdrop-hack_style.css'); 5 | 6 | :root {--rounding: 12px;} 7 | 8 | .nowPlayingBarCurrentTime { 9 | margin: 0 !important; 10 | padding-left: 1.5em !important; 11 | width: 10em; 12 | } 13 | 14 | .videoIndicator { 15 | border-radius: 0px var(--rounding) !important; 16 | box-shadow: 1px -1px 4px 0 rgba(0,0,0,0.3); 17 | background: rgba(0,0,0,0.4) 18 | } 19 | .indicatorIcon { 20 | font-size: 1.3em; 21 | color: rgba(255,255,255,0.75); 22 | } 23 | 24 | .sessionNowPlayingInnerContent { 25 | background: rgba(0,0,0,.55); 26 | } -------------------------------------------------------------------------------- /smallercast.css: -------------------------------------------------------------------------------- 1 | /*Shrink and square (or round) cast thumnails*/ 2 | @media all and (min-width: 131.25em){ 3 | #castContent .card.overflowPortraitCard { 4 | width: 6.3vw !important; 5 | font-size: 90% !important; 6 | } 7 | } 8 | @media all and (min-width: 120em) and (max-width: 131.25em){ 9 | #castContent .card.overflowPortraitCard { 10 | width: 6.4vw !important; 11 | font-size: 90% !important; 12 | } 13 | } 14 | @media all and (min-width: 100em) and (max-width: 120em){ 15 | #castContent .card.overflowPortraitCard { 16 | width: 7.6vw !important; 17 | font-size: 90% !important; 18 | } 19 | } 20 | @media all and (min-width: 87.5em) and (max-width: 100em){ 21 | #castContent .card.overflowPortraitCard { 22 | width: 9.3vw !important; 23 | font-size: 90% !important; 24 | } 25 | } 26 | @media all and (min-width: 75em) and (max-width: 87.5em){ 27 | #castContent .card.overflowPortraitCard { 28 | width: 10.5vw !important; 29 | font-size: 90% !important; 30 | } 31 | } 32 | @media all and (min-width: 50em) and (max-width: 75em){ 33 | #castContent .card.overflowPortraitCard { 34 | width: 15vw !important; 35 | font-size: 90% !important; 36 | } 37 | } 38 | @media all and (min-width: 43.75em) and (max-width: 50em){ 39 | #castContent .card.overflowPortraitCard { 40 | width: 20.1vw !important; 41 | font-size: 90% !important; 42 | } 43 | } 44 | @media all and (min-width: 25em) and (max-width: 43.75em){ 45 | #castContent .card.overflowPortraitCard { 46 | width: 31.2vw !important; 47 | font-size: 90% !important; 48 | } 49 | } 50 | @media all and (max-width: 25em){ 51 | #castContent .card.overflowPortraitCard { 52 | width: 40vw !important; 53 | font-size: 90% !important; 54 | } 55 | } 56 | 57 | .cardPadder { 58 | background-color: #0000 !important; box-shadow: none !important; 59 | } 60 | 61 | /*Correct image aspect ratio behaviour, set border-radius to zero for square tiles*/ 62 | 63 | @media all and (min-width: 131.25em){ 64 | #castContent .cardScalable { 65 | width: calc(6.3vw - 0.6em) !important; 66 | height: calc(6.3vw - 0.6em) !important; 67 | } 68 | } 69 | @media all and (min-width: 120em) and (max-width: 131.25em){ 70 | #castContent .cardScalable { 71 | width: calc(6.4vw - 0.6em) !important; 72 | height: calc(6.4vw - 0.6em) !important; 73 | } 74 | } 75 | @media all and (min-width: 100em) and (max-width: 120em){ 76 | #castContent .cardScalable { 77 | width: calc(7.6vw - 0.6em) !important; 78 | height: calc(7.6vw - 0.6em) !important; 79 | } 80 | } 81 | @media all and (min-width: 87.5em) and (max-width: 100em){ 82 | #castContent .cardScalable { 83 | width: calc(9.3vw - 0.6em) !important; 84 | height: calc(9.3vw - 0.6em) !important; 85 | } 86 | } 87 | @media all and (min-width: 75em) and (max-width: 87.5em){ 88 | #castContent .cardScalable { 89 | width: calc(10.5vw - 0.6em) !important; 90 | height: calc(10.5vw - 0.6em) !important; 91 | } 92 | } 93 | @media all and (min-width: 50em) and (max-width: 75em){ 94 | #castContent .cardScalable { 95 | width: calc(15vw - 0.6em) !important; 96 | height: calc(15vw - 0.6em) !important; 97 | } 98 | } 99 | @media all and (min-width: 43.75em) and (max-width: 50em){ 100 | #castContent .cardScalable { 101 | width: calc(20.1vw - 0.6em) !important; 102 | height: calc(20.1vw - 0.6em) !important; 103 | } 104 | } 105 | @media all and (min-width: 25em) and (max-width: 43.75em){ 106 | #castContent .cardScalable { 107 | width: calc(31.2vw - 0.6em) !important; 108 | height: calc(31.2vw - 0.6em) !important; 109 | } 110 | } 111 | @media all and (max-width: 25em){ 112 | #castContent .cardScalable { 113 | width: calc(40vw - 0.6em) !important; 114 | height: calc(40vw - 0.6em) !important; 115 | } 116 | } -------------------------------------------------------------------------------- /titlepage/title_banner-logo.css: -------------------------------------------------------------------------------- 1 | /*Alternate itempage*/ 2 | 3 | .itemBackdrop { 4 | height: 31vh !important; 5 | display: inherit; 6 | } 7 | .detailLogo { 8 | display: none; 9 | } 10 | .layout-desktop .detailRibbon { 11 | margin-top: 0; 12 | padding-top: .5em; 13 | padding-bottom: .5em; 14 | } 15 | 16 | .layout-desktop .detailImageContainer .card { 17 | top: 18vh; 18 | } 19 | 20 | #itemDetailPage .detailLogo { 21 | position: static; 22 | margin-left: 32.5%; 23 | display: block; 24 | -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); 25 | /*! filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); */ 26 | flex-shrink: 0; 27 | background-position: 0 50%; 28 | margin-top: -18vh; 29 | margin-bottom: 2vh; 30 | } 31 | 32 | .layout-mobile .detailLogo { 33 | display: none !important; 34 | } 35 | 36 | #itemDetailPage .itemName.infoText.parentNameLast { 37 | display: none; 38 | } 39 | 40 | .hide+.detailPageWrapperContainer .itemName { 41 | display: block !important; 42 | } 43 | 44 | .itemName { 45 | margin: .5em 0 !important; 46 | } 47 | 48 | .layout-mobile #itemDetailPage .itemName.infoText.parentNameLast { 49 | display: block; 50 | } 51 | 52 | -------------------------------------------------------------------------------- /titlepage/title_banner.css: -------------------------------------------------------------------------------- 1 | /*Alternate itempage*/ 2 | 3 | .itemBackdrop { 4 | height: 31vh !important; 5 | display: inherit; 6 | } 7 | .detailLogo { 8 | display: none; 9 | } 10 | .layout-desktop .detailRibbon { 11 | margin-top: 0; 12 | padding-top: .5em; 13 | padding-bottom: .5em; 14 | } 15 | .layout-desktop .detailImageContainer .card { 16 | top: 18vh; 17 | } 18 | -------------------------------------------------------------------------------- /titlepage/title_simple-logo.css: -------------------------------------------------------------------------------- 1 | /*Tweak series/movie/album title screen*/ 2 | 3 | .detailSectionContent { 4 | max-width: 66em; 5 | } 6 | .trackSelections { 7 | max-width: 22em; 8 | } 9 | .detailLogo { 10 | display: none; 11 | } 12 | .detailPagePrimaryContainer { 13 | background: rgba(0,0,0,0) !important; 14 | } 15 | .layout-desktop .detailRibbon { 16 | background: rgba(0,0,0,0) !important; 17 | } 18 | 19 | /* Fix poster image not showing in high width windows */ 20 | .layout-desktop .detailImageContainer .card { 21 | top: 18vh; 22 | } 23 | 24 | @media all and (min-width: 32em){ 25 | .itemBackdrop { 26 | display: none; 27 | } 28 | .layout-desktop .detailRibbon { 29 | margin-top: 13vh; 30 | } 31 | } 32 | 33 | #itemDetailPage .detailLogo { 34 | position: static; 35 | margin-left: 32.5%; 36 | display: block; 37 | -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); 38 | /*! filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); */ 39 | flex-shrink: 0; 40 | background-position: 0 50%; 41 | margin-top: 8vh; 42 | margin-bottom: -12vh; 43 | } 44 | 45 | .layout-mobile .detailLogo { 46 | display: none !important; 47 | } 48 | 49 | #itemDetailPage .itemName.infoText.parentNameLast { 50 | display: none; 51 | } 52 | 53 | .hide+.detailPageWrapperContainer .itemName { 54 | display: block !important; 55 | } 56 | 57 | .itemName { 58 | margin: .5em 0 !important; 59 | } 60 | 61 | .layout-mobile #itemDetailPage .itemName.infoText.parentNameLast { 62 | display: block; 63 | } 64 | 65 | -------------------------------------------------------------------------------- /titlepage/title_simple.css: -------------------------------------------------------------------------------- 1 | /*Tweak series/movie/album title screen*/ 2 | 3 | .detailSectionContent { 4 | max-width: 66em; 5 | } 6 | .trackSelections { 7 | max-width: 22em; 8 | } 9 | .detailLogo { 10 | display: none; 11 | } 12 | .detailPagePrimaryContainer { 13 | background: rgba(0,0,0,0) !important; 14 | } 15 | .layout-desktop .detailRibbon { 16 | background: rgba(0,0,0,0) !important; 17 | } 18 | @media all and (min-width: 32em){ 19 | .itemBackdrop { 20 | display: none; 21 | } 22 | .layout-desktop .detailRibbon { 23 | margin-top: 13vh; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /type/colorful.css: -------------------------------------------------------------------------------- 1 | /*This file contains color and style changes for the colorful theme type*/ 2 | :root {--accent: 98, 121, 205;} 3 | :root {--indicator: var(--accent);} 4 | :root {--selection: var(--accent);} 5 | 6 | .dialog, 7 | .mainDrawer, 8 | .toast, 9 | .appfooter { 10 | background-color: rgba(8, 8, 8, 0.85); 11 | } 12 | 13 | /*Login background*/ 14 | #loginPage { 15 | background: url(https://i.imgur.com/9vL4iNf.png) !important; 16 | background-size: cover !important; 17 | } 18 | 19 | /*Colors for title_2*/ 20 | .layout-desktop .detailRibbon { 21 | background: rgba(0, 0, 0, 0.2); 22 | } 23 | .itemBackdrop::after { 24 | background: rgba(0,0,0,.26) !important; 25 | } 26 | 27 | /*Accenting*/ 28 | 29 | .preload { 30 | background-color: black; 31 | } 32 | .backgroundContainer { 33 | background-color: rgba(var(--accent),0.17) !important; 34 | } 35 | .formDialogHeader, 36 | .formDialogFooter { 37 | background-color: rgba(var(--accent),0.15) !important; 38 | } 39 | /*Fix footers/headers displaying on small pop-ups*/ 40 | .formDialogFooter-clear, 41 | .formDialogHeader-clear, 42 | .innerCardFooterClear { 43 | background-color: transparent !important; 44 | } 45 | 46 | .button-flat:hover { 47 | background: rgba(var(--accent),0.25); 48 | } 49 | .paper-icon-button-light:hover { 50 | background-color: rgba(var(--accent),0.25) !important; 51 | } 52 | 53 | .navMenuOption-selected { 54 | color: white; 55 | } 56 | 57 | .subtitleappearance-preview { 58 | background: linear-gradient(140deg,rgba(var(--accent)),#111) !important; 59 | } 60 | .navMenuOption-selected, .selectionCommandsPanel { 61 | background: rgba(var(--accent), 0.8) !important; 62 | } 63 | .raised, 64 | .fab, 65 | a[data-role="button"] { 66 | background: rgba(var(--accent), 0.8) !important; 67 | transition: all 0.2s !important; 68 | } 69 | 70 | /*Various box-shadows, might be related to glowstyle*/ 71 | .cardBox:not(.visualCardBox) .cardPadder, .cardContent-shadow { 72 | box-shadow: none !important; 73 | } 74 | body, h1, h2, h3, h4, .textActionButton, .emby-button-foreground { 75 | text-shadow: 0px 0px 4px rgba(0,0,0,.6) !important; 76 | } 77 | .blurhashed { 78 | box-shadow: 0 0 4px 0 rgba(0,0,0,.6) !important; 79 | } 80 | 81 | /*Dash and general UI styling*/ 82 | .paperList, .visualCardBox { 83 | background-color: rgba(0, 0, 0, 0.5); 84 | } 85 | .navMenuOption-selected { 86 | color: white; 87 | } 88 | progress { 89 | background: rgba(0, 0, 0, 0.5) !important; 90 | } 91 | 92 | /*Colors for loading spinner, placeholders, scroll bars*/ 93 | .mdl-spinner__layer-1 {border-color: rgba(var(--accent), 1);} 94 | .mdl-spinner__layer-2 {border-color: rgba(var(--accent), .8);} 95 | .mdl-spinner__layer-3 {border-color: rgba(var(--accent), .6);} 96 | .mdl-spinner__layer-4 {border-color: rgba(var(--accent), .5);} 97 | 98 | 99 | .defaultCardBackground1 { 100 | background-color: rgba(var(--accent), .5); 101 | } 102 | .defaultCardBackground2 { 103 | background-color: rgba(var(--accent), .4); 104 | } 105 | .defaultCardBackground3 { 106 | background-color: rgba(var(--accent), .8); 107 | } 108 | .defaultCardBackground4 { 109 | background-color: rgba(var(--accent), .7); 110 | } 111 | .defaultCardBackground5 { 112 | background-color: rgba(var(--accent), .6); 113 | } 114 | 115 | /*Syncplay*/ 116 | @-webkit-keyframes pulse { 117 | 0% { 118 | -webkit-transform:scale(.95); 119 | transform:scale(.95); 120 | color:rgba(var(--accent),.7); 121 | background:rgba(var(--accent),.3); 122 | box-shadow:0 0 0 0 rgba(var(--accent),.3) 123 | } 124 | 70% { 125 | -webkit-transform:scale(1); 126 | transform:scale(1); 127 | color:rgba(var(--accent),0); 128 | background:rgba(var(--accent),0); 129 | box-shadow:0 0 0 60px rgba(var(--accent),0) 130 | } 131 | to { 132 | -webkit-transform:scale(.95); 133 | transform:scale(.95); 134 | color:rgba(var(--accent),0); 135 | background:rgba(var(--accent),0); 136 | box-shadow:0 0 0 0 rgba(var(--accent),0) 137 | } 138 | } 139 | @keyframes pulse { 140 | 0% { 141 | -webkit-transform:scale(.95); 142 | transform:scale(.95); 143 | color:rgba(var(--accent),.7); 144 | background:rgba(var(--accent),.3); 145 | box-shadow:0 0 0 0 rgba(var(--accent),.3) 146 | } 147 | 70% { 148 | -webkit-transform:scale(1); 149 | transform:scale(1); 150 | color:rgba(var(--accent),0); 151 | background:rgba(var(--accent),0); 152 | box-shadow:0 0 0 60px rgba(var(--accent),0) 153 | } 154 | to { 155 | -webkit-transform:scale(.95); 156 | transform:scale(.95); 157 | color:rgba(var(--accent),0); 158 | background:rgba(var(--accent),0); 159 | box-shadow:0 0 0 0 rgba(var(--accent),0) 160 | } 161 | } 162 | @-webkit-keyframes infinite-pulse { 163 | 0% { 164 | -webkit-transform:scale(.95); 165 | transform:scale(.95); 166 | color:rgba(var(--accent),.7); 167 | background:rgba(var(--accent),.3); 168 | box-shadow:0 0 0 0 rgba(var(--accent),.3) 169 | } 170 | 70% { 171 | -webkit-transform:scale(1); 172 | transform:scale(1); 173 | color:rgba(var(--accent),.6); 174 | background:rgba(var(--accent),0); 175 | box-shadow:0 0 0 60px rgba(var(--accent),0) 176 | } 177 | to { 178 | -webkit-transform:scale(.95); 179 | transform:scale(.95); 180 | color:rgba(var(--accent),.7); 181 | background:rgba(var(--accent),.3); 182 | box-shadow:0 0 0 0 rgba(var(--accent),0) 183 | } 184 | } 185 | @keyframes infinite-pulse { 186 | 0% { 187 | -webkit-transform:scale(.95); 188 | transform:scale(.95); 189 | color:rgba(var(--accent),.7); 190 | background:rgba(var(--accent),.3); 191 | box-shadow:0 0 0 0 rgba(var(--accent),.3) 192 | } 193 | 70% { 194 | -webkit-transform:scale(1); 195 | transform:scale(1); 196 | color:rgba(var(--accent),.6); 197 | background:rgba(var(--accent),0); 198 | box-shadow:0 0 0 60px rgba(var(--accent),0) 199 | } 200 | to { 201 | -webkit-transform:scale(.95); 202 | transform:scale(.95); 203 | color:rgba(var(--accent),.7); 204 | background:rgba(var(--accent),.3); 205 | box-shadow:0 0 0 0 rgba(var(--accent),0) 206 | } 207 | } 208 | -------------------------------------------------------------------------------- /type/dark.css: -------------------------------------------------------------------------------- 1 | /*This file contains color and style changes for the dark theme type*/ 2 | :root {--accent: 255, 255, 255;} 3 | :root {--selection: 120, 120, 120;} 4 | 5 | .transcodingProgress > div, .itemProgressBarForeground { 6 | background-color: rgba(255,255,255,0.3); 7 | } 8 | .playbackProgress > div { 9 | background-color: rgba(255,255,255,0.75); 10 | } 11 | .backgroundContainer.withBackdrop { 12 | background-color: rgba(0, 0, 0, 0); 13 | } 14 | 15 | 16 | /*Some themeing for the dashboard*/ 17 | 18 | #user_usage_report_table, 19 | .detailTable { 20 | background: rgba(0,0,0,.5); 21 | } 22 | .detailTableBodyRow-shaded { 23 | background: #0000 !important; 24 | } 25 | 26 | .infoBanner { 27 | background: #101010; 28 | } 29 | .navMenuOptionText { 30 | margin-top: 0; 31 | } 32 | .backgroundProgress > div { 33 | background-color: #0000; 34 | } 35 | 36 | .visualCardBox, .cardImageContainer { 37 | box-shadow: none; 38 | } 39 | 40 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { 41 | background: rgba(120, 120, 120, 0.6); 42 | } 43 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { 44 | background: white; 45 | } 46 | 47 | .dashboardSection h3 { 48 | margin-left: 0.5em; 49 | } 50 | .sessionCardFooter { 51 | border: none; 52 | } 53 | .paperList, 54 | .visualCardBox { 55 | background-color: rgba(0, 0, 0, 0.5); 56 | } 57 | .listItem-border { 58 | border-color: rgba(255, 255, 255, 0) !important; 59 | } 60 | fieldset { 61 | border: 1px solid rgba(40, 40, 40, 0.8); 62 | border-radius: 0.4em; 63 | } 64 | 65 | /*Colors for title_2*/ 66 | .layout-desktop .detailRibbon { 67 | background: rgba(0,0,0,.2) !important; 68 | } 69 | .itemBackdrop::after { 70 | background: rgba(0,0,0,.5) !important; 71 | } 72 | 73 | 74 | /*Homepage modifications, transparent footerplayer and fixed sectiontitles*/ 75 | .appfooter { 76 | background: rgba(0,0,0,0.9); 77 | } 78 | .button-flat:hover { 79 | background: rgba(0,0,0,0.4); 80 | } 81 | 82 | /*Theme the library scan progress bar*/ 83 | progress { 84 | background: rgba(0, 0, 0, 0.5) !important; 85 | border: 1px solid rgba(255, 255, 255, 0.22); 86 | } 87 | progress::-webkit-progress-bar { 88 | background: rgba(0, 0, 0, 0.5) !important; 89 | border: 0px solid rgba(255, 255, 255, 0.22); 90 | } 91 | progress::-moz-progress-bar { 92 | background-color: rgba(255,255,255,0.75); 93 | } 94 | progress::-webkit-progress-value { 95 | background-color: rgba(255,255,255,0.75); 96 | } 97 | #divRunningTasks span { 98 | color: rgba(255,255,255,0.75) !important; 99 | } 100 | .taskProgressOuter { 101 | background: rgba(0, 0, 0, 0.5) !important; 102 | border: 1px solid rgba(255, 255, 255, 0.22); 103 | } 104 | .taskProgressInner { 105 | background: rgba(255,255,255,0.75) !important; 106 | } 107 | #scheduledTasksPage span { 108 | color: rgba(255,255,255,0.75) !important; 109 | } 110 | 111 | /*Login background*/ 112 | #loginPage { 113 | background: url(https://i.imgur.com/9vL4iNf.png) !important; 114 | background-size: cover !important; 115 | } 116 | 117 | /*Make watched icon, footer on chapter thumnails (and other things), and count indicator dark and transparent*/ 118 | .innerCardFooter, 119 | .countIndicator, 120 | .playedIndicator { 121 | background: rgba(0,0,0,0.4); 122 | box-shadow: none; 123 | } 124 | .countIndicator { 125 | box-shadow: none; 126 | } 127 | 128 | /*Modify subtitle settings page*/ 129 | .subtitleappearance-preview { 130 | background: linear-gradient(140deg,#444,#111) !important; 131 | } 132 | 133 | /*Affects blurhash to remove the saturated colors to fit overall look*/ 134 | .blurhash-canvas { 135 | filter: opacity(60%) saturate(60%); 136 | } 137 | 138 | /*Dash and general UI styling*/ 139 | .navMenuOption-selected, .selectionCommandsPanel { 140 | background: #101010 !important; 141 | } 142 | .mainDrawer { 143 | background-color: rgba(0, 0, 0, 0.8); 144 | } 145 | .raised, 146 | .fab, 147 | a[data-role="button"] { 148 | background: rgba(40, 40, 40, 0.8) !important; 149 | transition: all 0.2s !important; 150 | } 151 | .raised:hover, 152 | .fab:hover, 153 | .navMenuOption:hover, 154 | .actionSheetMenuItem:hover { 155 | background: rgba(80, 80, 80, 0.8) !important; 156 | } 157 | .paper-icon-button-light:hover { 158 | background-color: rgba(0, 0, 0, 0.4) !important; 159 | } 160 | .navMenuOption-selected, 161 | .selectionCommandsPanel { 162 | background: #101010 !important; 163 | } 164 | 165 | .paper-icon-button-light:hover, 166 | .raised.homeLibraryButton:hover, 167 | .button-flat:hover, 168 | .playstatebutton-icon-played, 169 | .ratingbutton-icon-withrating, 170 | .paper-icon-button-light:hover:not(:disabled), 171 | .emby-tab-button:hover, 172 | .selectLabelFocused, 173 | .inputLabelFocused, 174 | .textareaLabelFocused, 175 | .buttonActive, 176 | .button-link{ 177 | color: rgba(120, 120, 120, 0.6) !important; 178 | } 179 | progress { 180 | background: rgba(0, 0, 0, 0.5) !important; 181 | } 182 | 183 | /*Theme syncplay*/ 184 | .syncPlayIconCircle { 185 | color: rgba(255,255,255,1) !important; 186 | text-shadow: none !important; 187 | } 188 | 189 | @-webkit-keyframes pulse { 190 | 0% { 191 | -webkit-transform:scale(.95); 192 | transform:scale(.95); 193 | color:rgba(0,0,0,.7); 194 | background:rgba(0,0,0,.3); 195 | box-shadow:0 0 0 0 rgba(0,0,0,.3) 196 | } 197 | 70% { 198 | -webkit-transform:scale(1); 199 | transform:scale(1); 200 | color:rgba(0,0,0,.6); 201 | background:rgba(0,0,0,0); 202 | box-shadow:0 0 0 60px rgba(0,0,0,0) 203 | } 204 | to { 205 | -webkit-transform:scale(.95); 206 | transform:scale(.95); 207 | color:rgba(0,0,0,.7); 208 | background:rgba(0,0,0,.3); 209 | box-shadow:0 0 0 0 rgba(0,0,0,0) 210 | } 211 | } 212 | @keyframes pulse { 213 | 0% { 214 | -webkit-transform:scale(.95); 215 | transform:scale(.95); 216 | color:rgba(0,0,0,.7); 217 | background:rgba(0,0,0,.3); 218 | box-shadow:0 0 0 0 rgba(0,0,0,.3) 219 | } 220 | 70% { 221 | -webkit-transform:scale(1); 222 | transform:scale(1); 223 | color:rgba(0,0,0,.6); 224 | background:rgba(0,0,0,0); 225 | box-shadow:0 0 0 60px rgba(0,0,0,0) 226 | } 227 | to { 228 | -webkit-transform:scale(.95); 229 | transform:scale(.95); 230 | color:rgba(0,0,0,.7); 231 | background:rgba(0,0,0,.3); 232 | box-shadow:0 0 0 0 rgba(0,0,0,0) 233 | } 234 | } 235 | @-webkit-keyframes infinite-pulse { 236 | 0% { 237 | -webkit-transform:scale(.95); 238 | transform:scale(.95); 239 | color:rgba(0,0,0,.7); 240 | background:rgba(0,0,0,.3); 241 | box-shadow:0 0 0 0 rgba(0,0,0,.3) 242 | } 243 | 70% { 244 | -webkit-transform:scale(1); 245 | transform:scale(1); 246 | color:rgba(0,0,0,.6); 247 | background:rgba(0,0,0,0); 248 | box-shadow:0 0 0 60px rgba(0,0,0,0) 249 | } 250 | to { 251 | -webkit-transform:scale(.95); 252 | transform:scale(.95); 253 | color:rgba(0,0,0,.7); 254 | background:rgba(0,0,0,.3); 255 | box-shadow:0 0 0 0 rgba(0,0,0,0) 256 | } 257 | } 258 | @keyframes infinite-pulse { 259 | 0% { 260 | -webkit-transform:scale(.95); 261 | transform:scale(.95); 262 | color:rgba(0,0,0,.7); 263 | background:rgba(0,0,0,.3); 264 | box-shadow:0 0 0 0 rgba(0,0,0,.3) 265 | } 266 | 70% { 267 | -webkit-transform:scale(1); 268 | transform:scale(1); 269 | color:rgba(0,0,0,.6); 270 | background:rgba(0,0,0,0); 271 | box-shadow:0 0 0 60px rgba(0,0,0,0) 272 | } 273 | to { 274 | -webkit-transform:scale(.95); 275 | transform:scale(.95); 276 | color:rgba(0,0,0,.7); 277 | background:rgba(0,0,0,.3); 278 | box-shadow:0 0 0 0 rgba(0,0,0,0) 279 | } 280 | } 281 | 282 | /*Colors for loading spinner, placeholders, scroll bars*/ 283 | .mdl-spinner__layer-1 {border-color: rgba(255, 255, 255, 1);} 284 | .mdl-spinner__layer-2 {border-color: rgba(128, 128, 128, 1);} 285 | .mdl-spinner__layer-3 {border-color: rgba(40, 40, 40, 1);} 286 | .mdl-spinner__layer-4 {border-color: rgba(0, 0, 0, 1);} 287 | 288 | ::-webkit-scrollbar-track-piece { 289 | background-color: #0000; 290 | } 291 | ::-webkit-scrollbar-corner { 292 | background-color: #0000; 293 | } 294 | ::-webkit-scrollbar-thumb { 295 | background: rgba(120,120,120,0.6) !important; 296 | border-radius: var(--rounding); 297 | } 298 | 299 | * { 300 | scrollbar-color: rgba(120,120,120,0.6) #0000 !important; 301 | } 302 | 303 | .defaultCardBackground1 { 304 | background-color: #0a0a0a; 305 | } 306 | .defaultCardBackground2 { 307 | background-color: #141414; 308 | } 309 | .defaultCardBackground3 { 310 | background-color: #212121; 311 | } 312 | .defaultCardBackground4 { 313 | background-color: #333333; 314 | } 315 | .defaultCardBackground5 { 316 | background-color: #666666; 317 | } 318 | -------------------------------------------------------------------------------- /type/dark_withaccent.css: -------------------------------------------------------------------------------- 1 | /*This file contains color and style changes for the dark theme type*/ 2 | :root {--accent: 255, 255, 255;} 3 | :root {--selection: 120, 120, 120;} 4 | 5 | .backgroundContainer.withBackdrop { 6 | background-color: rgba(0, 0, 0, 0); 7 | } 8 | 9 | /*Some themeing for the dashboard*/ 10 | 11 | #user_usage_report_table, 12 | .detailTable { 13 | background: rgba(0,0,0,.5); 14 | } 15 | .detailTableBodyRow-shaded { 16 | background: #0000 !important; 17 | } 18 | 19 | .infoBanner { 20 | background: #101010; 21 | } 22 | .navMenuOptionText { 23 | margin-top: 0; 24 | } 25 | .backgroundProgress > div { 26 | background-color: #0000; 27 | } 28 | 29 | .visualCardBox, .cardImageContainer { 30 | box-shadow: none; 31 | } 32 | 33 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { 34 | background: rgba(120, 120, 120, 0.6); 35 | } 36 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { 37 | background: white; 38 | } 39 | 40 | .dashboardSection h3 { 41 | margin-left: 0.5em; 42 | } 43 | .sessionCardFooter { 44 | border: none; 45 | } 46 | .paperList, 47 | .visualCardBox { 48 | background-color: rgba(0, 0, 0, 0.5); 49 | } 50 | .listItem-border { 51 | border-color: rgba(255, 255, 255, 0) !important; 52 | } 53 | fieldset { 54 | border: 1px solid rgba(40, 40, 40, 0.8); 55 | border-radius: 0.4em; 56 | } 57 | 58 | /*Colors for title_2*/ 59 | .layout-desktop .detailRibbon { 60 | background: rgba(0,0,0,.2) !important; 61 | } 62 | .itemBackdrop::after { 63 | background: rgba(0,0,0,.5) !important; 64 | } 65 | 66 | 67 | /*Homepage modifications, transparent footerplayer and fixed sectiontitles*/ 68 | .appfooter { 69 | background: rgba(0,0,0,0.9); 70 | } 71 | .button-flat:hover { 72 | background: rgba(0,0,0,0.4); 73 | } 74 | 75 | /*Theme the library scan progress bar*/ 76 | progress { 77 | background: rgba(0, 0, 0, 0.5) !important; 78 | border: 1px solid rgba(255, 255, 255, 0.22); 79 | } 80 | progress::-webkit-progress-bar { 81 | background: rgba(0, 0, 0, 0.5) !important; 82 | border: 0px solid rgba(255, 255, 255, 0.22); 83 | } 84 | progress::-moz-progress-bar { 85 | background-color: rgba(255,255,255,0.75); 86 | } 87 | progress::-webkit-progress-value { 88 | background-color: rgba(255,255,255,0.75); 89 | } 90 | #divRunningTasks span { 91 | color: rgba(255,255,255,0.75) !important; 92 | } 93 | .taskProgressOuter { 94 | background: rgba(0, 0, 0, 0.5) !important; 95 | border: 1px solid rgba(255, 255, 255, 0.22); 96 | } 97 | .taskProgressInner { 98 | background: rgba(255,255,255,0.75) !important; 99 | } 100 | #scheduledTasksPage span { 101 | color: rgba(255,255,255,0.75) !important; 102 | } 103 | 104 | /*Login background*/ 105 | #loginPage { 106 | background: url(https://i.imgur.com/9vL4iNf.png) !important; 107 | background-size: cover !important; 108 | } 109 | 110 | /*Make watched icon, footer on chapter thumnails (and other things), and count indicator dark and transparent*/ 111 | .innerCardFooter, 112 | .countIndicator, 113 | .playedIndicator { 114 | background: rgba(0,0,0,0.4); 115 | box-shadow: none; 116 | } 117 | .countIndicator { 118 | box-shadow: none; 119 | } 120 | 121 | /*Modify subtitle settings page*/ 122 | .subtitleappearance-preview { 123 | background: linear-gradient(140deg,#444,#111) !important; 124 | } 125 | 126 | /*Affects blurhash to remove the saturated colors to fit overall look*/ 127 | .blurhash-canvas { 128 | filter: opacity(60%) saturate(60%); 129 | } 130 | 131 | /*Dash and general UI styling*/ 132 | .navMenuOption-selected, .selectionCommandsPanel { 133 | background: #101010 !important; 134 | } 135 | .mainDrawer { 136 | background-color: rgba(0, 0, 0, 0.8); 137 | } 138 | .raised, 139 | .fab, 140 | a[data-role="button"] { 141 | background: rgba(40, 40, 40, 0.8) !important; 142 | transition: all 0.2s !important; 143 | } 144 | .raised:hover, 145 | .fab:hover, 146 | .navMenuOption:hover, 147 | .actionSheetMenuItem:hover { 148 | background: rgba(80, 80, 80, 0.8) !important; 149 | } 150 | .paper-icon-button-light:hover { 151 | background-color: rgba(0, 0, 0, 0.4) !important; 152 | } 153 | .navMenuOption-selected, 154 | .selectionCommandsPanel { 155 | background: #101010 !important; 156 | } 157 | 158 | .paper-icon-button-light:hover, 159 | .raised.homeLibraryButton:hover, 160 | .button-flat:hover, 161 | .playstatebutton-icon-played, 162 | .ratingbutton-icon-withrating, 163 | .paper-icon-button-light:hover:not(:disabled), 164 | .emby-tab-button:hover, 165 | .selectLabelFocused, 166 | .inputLabelFocused, 167 | .textareaLabelFocused, 168 | .buttonActive, 169 | .button-link{ 170 | color: rgba(120, 120, 120, 0.6) !important; 171 | } 172 | progress { 173 | background: rgba(0, 0, 0, 0.5) !important; 174 | } 175 | 176 | /*Theme syncplay*/ 177 | .syncPlayIconCircle { 178 | color: rgba(255,255,255,1) !important; 179 | text-shadow: none !important; 180 | } 181 | 182 | @-webkit-keyframes pulse { 183 | 0% { 184 | -webkit-transform:scale(.95); 185 | transform:scale(.95); 186 | color:rgba(0,0,0,.7); 187 | background:rgba(0,0,0,.3); 188 | box-shadow:0 0 0 0 rgba(0,0,0,.3) 189 | } 190 | 70% { 191 | -webkit-transform:scale(1); 192 | transform:scale(1); 193 | color:rgba(0,0,0,.6); 194 | background:rgba(0,0,0,0); 195 | box-shadow:0 0 0 60px rgba(0,0,0,0) 196 | } 197 | to { 198 | -webkit-transform:scale(.95); 199 | transform:scale(.95); 200 | color:rgba(0,0,0,.7); 201 | background:rgba(0,0,0,.3); 202 | box-shadow:0 0 0 0 rgba(0,0,0,0) 203 | } 204 | } 205 | @keyframes pulse { 206 | 0% { 207 | -webkit-transform:scale(.95); 208 | transform:scale(.95); 209 | color:rgba(0,0,0,.7); 210 | background:rgba(0,0,0,.3); 211 | box-shadow:0 0 0 0 rgba(0,0,0,.3) 212 | } 213 | 70% { 214 | -webkit-transform:scale(1); 215 | transform:scale(1); 216 | color:rgba(0,0,0,.6); 217 | background:rgba(0,0,0,0); 218 | box-shadow:0 0 0 60px rgba(0,0,0,0) 219 | } 220 | to { 221 | -webkit-transform:scale(.95); 222 | transform:scale(.95); 223 | color:rgba(0,0,0,.7); 224 | background:rgba(0,0,0,.3); 225 | box-shadow:0 0 0 0 rgba(0,0,0,0) 226 | } 227 | } 228 | @-webkit-keyframes infinite-pulse { 229 | 0% { 230 | -webkit-transform:scale(.95); 231 | transform:scale(.95); 232 | color:rgba(0,0,0,.7); 233 | background:rgba(0,0,0,.3); 234 | box-shadow:0 0 0 0 rgba(0,0,0,.3) 235 | } 236 | 70% { 237 | -webkit-transform:scale(1); 238 | transform:scale(1); 239 | color:rgba(0,0,0,.6); 240 | background:rgba(0,0,0,0); 241 | box-shadow:0 0 0 60px rgba(0,0,0,0) 242 | } 243 | to { 244 | -webkit-transform:scale(.95); 245 | transform:scale(.95); 246 | color:rgba(0,0,0,.7); 247 | background:rgba(0,0,0,.3); 248 | box-shadow:0 0 0 0 rgba(0,0,0,0) 249 | } 250 | } 251 | @keyframes infinite-pulse { 252 | 0% { 253 | -webkit-transform:scale(.95); 254 | transform:scale(.95); 255 | color:rgba(0,0,0,.7); 256 | background:rgba(0,0,0,.3); 257 | box-shadow:0 0 0 0 rgba(0,0,0,.3) 258 | } 259 | 70% { 260 | -webkit-transform:scale(1); 261 | transform:scale(1); 262 | color:rgba(0,0,0,.6); 263 | background:rgba(0,0,0,0); 264 | box-shadow:0 0 0 60px rgba(0,0,0,0) 265 | } 266 | to { 267 | -webkit-transform:scale(.95); 268 | transform:scale(.95); 269 | color:rgba(0,0,0,.7); 270 | background:rgba(0,0,0,.3); 271 | box-shadow:0 0 0 0 rgba(0,0,0,0) 272 | } 273 | } 274 | 275 | /*Colors for loading spinner, placeholders, scroll bars*/ 276 | .mdl-spinner__layer-1 {border-color: rgba(255, 255, 255, 1);} 277 | .mdl-spinner__layer-2 {border-color: rgba(128, 128, 128, 1);} 278 | .mdl-spinner__layer-3 {border-color: rgba(40, 40, 40, 1);} 279 | .mdl-spinner__layer-4 {border-color: rgba(0, 0, 0, 1);} 280 | 281 | ::-webkit-scrollbar-track-piece { 282 | background-color: #0000; 283 | } 284 | ::-webkit-scrollbar-corner { 285 | background-color: #0000; 286 | } 287 | ::-webkit-scrollbar-thumb { 288 | background: rgba(120,120,120,0.6) !important; 289 | border-radius: var(--rounding); 290 | } 291 | 292 | * { 293 | scrollbar-color: rgba(120,120,120,0.6) #0000 !important; 294 | } 295 | 296 | .defaultCardBackground1 { 297 | background-color: #0a0a0a; 298 | } 299 | .defaultCardBackground2 { 300 | background-color: #141414; 301 | } 302 | .defaultCardBackground3 { 303 | background-color: #212121; 304 | } 305 | .defaultCardBackground4 { 306 | background-color: #333333; 307 | } 308 | .defaultCardBackground5 { 309 | background-color: #666666; 310 | } 311 | 312 | .raised:hover, 313 | .fab:hover, 314 | a[data-role="button"]:hover { 315 | background: rgba(var(--accent),0.5) !important; 316 | } 317 | 318 | .subtitleappearance-preview { 319 | background: linear-gradient(140deg,rgb(var(--accent)),#111) !important; 320 | } 321 | 322 | .navMenuOption-selected { 323 | color: rgba(var(--accent)); 324 | } 325 | .mdl-slider-background-lower { 326 | background-color: rgba(var(--accent)); 327 | } 328 | 329 | .playbackProgress>div { 330 | background-color: rgba(var(--accent),0.75); 331 | } 332 | progress::-moz-progress-bar { 333 | background-color: rgba(var(--accent),0.75); 334 | } 335 | progress::-webkit-progress-value { 336 | background-color: rgba(var(--accent),0.75); 337 | } 338 | .taskProgressInner { 339 | background: rgba(var(--accent),0.75) !important; 340 | } 341 | 342 | .transcodingProgress>div, 343 | .itemProgressBarForeground { 344 | background-color: rgba(var(--accent),0.35); 345 | } 346 | 347 | .mdl-slider-background-lower { 348 | background-color: rgb(var(--accent)); 349 | } 350 | .mdl-slider::-moz-range-thumb { 351 | background: rgb(var(--accent)); 352 | } 353 | .mdl-slider::-ms-thumb { 354 | background: rgb(var(--accent)); 355 | } 356 | .mdl-slider::-webkit-slider-thumb { 357 | background: rgb(var(--accent)); 358 | } 359 | .iconOsdProgressInner { 360 | background: rgb(var(--accent)); 361 | } 362 | 363 | .paper-icon-button-light:hover, 364 | .raised.homeLibraryButton:hover, 365 | .button-flat:hover, 366 | .playstatebutton-icon-played, 367 | .ratingbutton-icon-withrating, 368 | .paper-icon-button-light:hover:not(:disabled), 369 | .emby-tab-button:hover, 370 | .selectLabelFocused, 371 | .inputLabelFocused, 372 | .textareaLabelFocused, 373 | .buttonActive, 374 | .button-link { 375 | color: rgba(var(--accent)) !important; 376 | } 377 | 378 | #itemDetailPage .button-link {color: inherit !important;} 379 | 380 | .navMenuOption:hover, 381 | .actionSheetMenuItem:hover { 382 | background-color: rgba(var(--accent),0.5) !important; 383 | } 384 | 385 | .upNextDialog-countdownText { 386 | color: rgba(var(--accent)); 387 | } 388 | 389 | .mdl-spinner__layer-1 { 390 | border-color: rgba(var(--accent)); 391 | } 392 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { 393 | background: rgba(var(--accent), 0.5); 394 | } 395 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { 396 | background: rgba(var(--accent)); 397 | } 398 | 399 | ::-webkit-scrollbar-thumb { 400 | background: rgba(var(--accent),0.8) !important; 401 | } 402 | * { 403 | scrollbar-color: rgba(var(--accent),0.8) #0000 !important; 404 | } 405 | 406 | 407 | /* Syncplay theming*/ 408 | .syncPlayIconCircle { 409 | color: rgba(var(--accent),1) !important; 410 | text-shadow: none !important; 411 | } 412 | -------------------------------------------------------------------------------- /type/light.css: -------------------------------------------------------------------------------- 1 | /*This file contains color changes for the light theme type*/ 2 | :root {--accent: 255, 255, 255;} 3 | :root {--indicator: var(--accent);} 4 | :root {--selection: var(--accent);} 5 | 6 | /*Colors for title_2*/ 7 | .layout-desktop .detailRibbon { 8 | background: rgba(255,255,255,.2) !important; 9 | } 10 | .itemBackdrop::after { 11 | background: rgba(0,0,0,.2) !important; 12 | } 13 | 14 | /*Flip indicator colors*/ 15 | .countIndicator { 16 | background: rgba(var(--accent),0.8); 17 | } 18 | .playedIndicator { 19 | background: rgba(255, 255, 255, 0.3); 20 | } 21 | 22 | /*Various themeing*/ 23 | #itemDetailPage .emby-select-withcolor { 24 | background-color: rgba(255, 255, 255, 0.2); 25 | } 26 | 27 | .pageTitleWithDefaultLogo { 28 | background-image: url(../../jellyfin/web/assets/img/banner-dark.png); 29 | } 30 | 31 | .infoBanner { 32 | color: #000; 33 | background: #eaeaea; 34 | } 35 | #indexPage .transcodingProgress > div, #indexPage .itemProgressBarForeground { 36 | background-color: rgba(var(--accent),0.35); 37 | } 38 | 39 | /*Accenting*/ 40 | .ratingbutton-icon-withrating, 41 | .playstatebutton-icon-played { 42 | color: rgba(var(--accent)) !important; 43 | } 44 | 45 | .button-flat:hover { 46 | background: rgba(var(--accent),0.55); 47 | } 48 | .paper-icon-button-light:hover { 49 | background-color: rgba(var(--accent),0.55) !important; 50 | } 51 | 52 | .raised, 53 | .fab, 54 | a[data-role="button"] { 55 | background: rgba(var(--accent), 0.8) !important; 56 | transition: all 0.2s !important; 57 | } 58 | 59 | .raised.homeLibraryButton { 60 | box-shadow: none !important; 61 | border: solid 1px rgba(var(--accent),0) !important; 62 | } 63 | .cardOverlayContainer:hover, 64 | .dialog, 65 | .toast, 66 | .raised.homeLibraryButton:hover { 67 | box-shadow: none !important; 68 | border: solid 1px rgba(var(--accent),0.6) !important; 69 | } 70 | .cardOverlayContainer { 71 | border: solid 1px rgba(var(--accent),0.0) !important; 72 | } 73 | 74 | .emby-checkbox:checked + span + .checkboxOutline, 75 | .emby-input:focus, 76 | .emby-textarea:focus, 77 | .emby-select-withcolor:focus, 78 | .itemSelectionPanel { 79 | background: rgba(var(--accent), 0.25) !important; 80 | } 81 | .checkboxIcon { 82 | color: rgba(var(--accent)); 83 | } 84 | 85 | .navMenuOption:hover, .actionSheetMenuItem:hover { 86 | background-color: rgba(var(--accent),1) !important; 87 | } 88 | 89 | /*Login background*/ 90 | #loginPage { 91 | background: url(https://imgur.com/S3WiZIM.png) !important; 92 | background-size: cover !important; 93 | } 94 | 95 | /*Theme the library scan progress bar*/ 96 | progress { 97 | background: #cecece !important; 98 | border: 1px solid rgba(255, 255, 255); 99 | } 100 | progress::-webkit-progress-bar { 101 | background: #cecece !important; 102 | border: 0px solid rgba(255, 255, 255); 103 | } 104 | progress::-webkit-progress-value { 105 | background-color: rgba(255,255,255); 106 | } 107 | #divRunningTasks span { 108 | color: black !important; 109 | } 110 | .taskProgressOuter { 111 | background: #cecece !important; 112 | border: 1px solid rgba(255, 255, 255); 113 | } 114 | .taskProgressInner { 115 | background: rgba(255,255,255) !important; 116 | } 117 | #scheduledTasksPage span { 118 | color: rgba(255,255,255) !important; 119 | } 120 | 121 | /*Make various stuff black, remove text shading*/ 122 | .endsAtText, 123 | .osdTextContainer, 124 | .listItemBodyText, 125 | .textareaLabelUnfocused, 126 | .paper-icon-button-light:hover, 127 | .raised.homeLibraryButton:hover, 128 | .button-flat:hover, 129 | .playstatebutton-icon-played, 130 | .ratingbutton-icon-withrating, 131 | .paper-icon-button-light:hover:not(:disabled), 132 | .emby-tab-button:hover, 133 | .selectLabelFocused, 134 | .inputLabelFocused, 135 | .textareaLabelFocused, 136 | .buttonActive, 137 | .button-link, 138 | .emby-tab-button-active, 139 | .toast, 140 | .cardText, 141 | .paperListLabel, 142 | #scheduledTasksPage span, 143 | .raised.homeLibraryButton:hover, 144 | body, 145 | a, 146 | h1, 147 | h2, 148 | h3, 149 | h4, 150 | .textActionButton, 151 | .inputLabel, 152 | .inputLabelUnfocused, 153 | .fieldDescription, 154 | .navMenuOption-selected, 155 | .raised, 156 | .countIndicator, 157 | .playedIndicator, 158 | .mediaInfoItem, 159 | .nowPlayingBarCurrentTime, 160 | .paper-icon-button-light { 161 | text-shadow: none !important; 162 | color: black !important; 163 | } 164 | 165 | .cardText-secondary, 166 | .fieldDescription, 167 | .guide-programNameCaret, 168 | .listItem, 169 | .secondary, 170 | .nowPlayingBarSecondaryText, 171 | .programSecondaryTitle, 172 | .secondaryText { 173 | color: rgba(0, 0, 0, 0.7); 174 | } 175 | 176 | .material-icons { 177 | color: black !important; 178 | } 179 | 180 | .cardOverlayContainer:hover, .dialog, .toast, .raised.homeLibraryButton:hover { 181 | box-shadow: none !important; 182 | } 183 | 184 | .alphaPickerButton { 185 | color: rgba(0, 0, 0, 0.5); 186 | } 187 | #dashboardPage .playbackProgress>div { 188 | background-color: rgba(0,0,0,0.75); 189 | } 190 | #dashboardPage .transcodingProgress>div, #dashboardPage .itemProgressBarForeground { 191 | background-color: rgba(0,0,0,0.23); 192 | } 193 | .sessionAppInfo { 194 | filter: brightness(10%); 195 | } 196 | #devicesPage .cardImage { 197 | filter: brightness(20%); 198 | } 199 | 200 | /*Theme media player*/ 201 | .videoOsdBottom { 202 | background: rgba(210,210,210,.72); 203 | padding-top: 0; 204 | } 205 | .skinHeader-withBackground.osdHeader { 206 | background: rgba(255,255,255,.7) !important; 207 | height: 5em; 208 | } 209 | .mdl-slider-background-flex { 210 | background: rgba(0,0,0,.45); 211 | } 212 | 213 | /*Syncplay*/ 214 | @-webkit-keyframes pulse { 215 | 0% { 216 | -webkit-transform:scale(.95); 217 | transform:scale(.95); 218 | color:rgba(var(--accent),.7); 219 | background:rgba(var(--accent),.3); 220 | box-shadow:0 0 0 0 rgba(var(--accent),.3) 221 | } 222 | 70% { 223 | -webkit-transform:scale(1); 224 | transform:scale(1); 225 | color:rgba(var(--accent),0); 226 | background:rgba(var(--accent),0); 227 | box-shadow:0 0 0 60px rgba(var(--accent),0) 228 | } 229 | to { 230 | -webkit-transform:scale(.95); 231 | transform:scale(.95); 232 | color:rgba(var(--accent),0); 233 | background:rgba(var(--accent),0); 234 | box-shadow:0 0 0 0 rgba(var(--accent),0) 235 | } 236 | } 237 | @keyframes pulse { 238 | 0% { 239 | -webkit-transform:scale(.95); 240 | transform:scale(.95); 241 | color:rgba(var(--accent),.7); 242 | background:rgba(var(--accent),.3); 243 | box-shadow:0 0 0 0 rgba(var(--accent),.3) 244 | } 245 | 70% { 246 | -webkit-transform:scale(1); 247 | transform:scale(1); 248 | color:rgba(var(--accent),0); 249 | background:rgba(var(--accent),0); 250 | box-shadow:0 0 0 60px rgba(var(--accent),0) 251 | } 252 | to { 253 | -webkit-transform:scale(.95); 254 | transform:scale(.95); 255 | color:rgba(var(--accent),0); 256 | background:rgba(var(--accent),0); 257 | box-shadow:0 0 0 0 rgba(var(--accent),0) 258 | } 259 | } 260 | @-webkit-keyframes infinite-pulse { 261 | 0% { 262 | -webkit-transform:scale(.95); 263 | transform:scale(.95); 264 | color:rgba(var(--accent),.7); 265 | background:rgba(var(--accent),.3); 266 | box-shadow:0 0 0 0 rgba(var(--accent),.3) 267 | } 268 | 70% { 269 | -webkit-transform:scale(1); 270 | transform:scale(1); 271 | color:rgba(var(--accent),.6); 272 | background:rgba(var(--accent),0); 273 | box-shadow:0 0 0 60px rgba(var(--accent),0) 274 | } 275 | to { 276 | -webkit-transform:scale(.95); 277 | transform:scale(.95); 278 | color:rgba(var(--accent),.7); 279 | background:rgba(var(--accent),.3); 280 | box-shadow:0 0 0 0 rgba(var(--accent),0) 281 | } 282 | } 283 | @keyframes infinite-pulse { 284 | 0% { 285 | -webkit-transform:scale(.95); 286 | transform:scale(.95); 287 | color:rgba(var(--accent),.7); 288 | background:rgba(var(--accent),.3); 289 | box-shadow:0 0 0 0 rgba(var(--accent),.3) 290 | } 291 | 70% { 292 | -webkit-transform:scale(1); 293 | transform:scale(1); 294 | color:rgba(var(--accent),.6); 295 | background:rgba(var(--accent),0); 296 | box-shadow:0 0 0 60px rgba(var(--accent),0) 297 | } 298 | to { 299 | -webkit-transform:scale(.95); 300 | transform:scale(.95); 301 | color:rgba(var(--accent),.7); 302 | background:rgba(var(--accent),.3); 303 | box-shadow:0 0 0 0 rgba(var(--accent),0) 304 | } 305 | } 306 | 307 | /*Make various stuff light*/ 308 | .sessionNowPlayingInnerContent { 309 | background: rgba(220,220,220,.8); 310 | } 311 | .emby-select-withcolor > option { 312 | color: #333; 313 | background: #cecece; 314 | } 315 | .raised.homeLibraryButton { 316 | background: rgba(255, 255, 255, 0.8) !important; 317 | } 318 | .raised.homeLibraryButton:hover { 319 | background: rgba(200, 200, 200, 0.25) !important; 320 | } 321 | 322 | .navMenuOption-selected { 323 | color: white; 324 | } 325 | 326 | .navMenuOption-selected, .selectionCommandsPanel { 327 | background: #cecece !important; 328 | } 329 | 330 | .nowPlayingContextMenu, .nowPlayingPlaylist, html { 331 | background-color: #cecece !important; 332 | } 333 | 334 | .backgroundContainer { 335 | background-color: transparent !important; 336 | } 337 | .dialog, .innerCardFooter { 338 | background-color: #cecece80; 339 | } 340 | .formDialogHeader, .formDialogFooter { 341 | background-color: #eaeaea !important; 342 | } 343 | /*Fix footers/headers displaying on small pop-ups*/ 344 | .formDialogFooter-clear, 345 | .formDialogHeader-clear, 346 | .innerCardFooterClear { 347 | background-color: transparent !important; 348 | } 349 | 350 | 351 | .cardOverlayContainer { 352 | background-color: rgba(200, 200, 200, 0.7); 353 | } 354 | 355 | .listItem:hover { 356 | background-color: rgba(255, 255, 255, 0.4); 357 | } 358 | 359 | .dialog, 360 | #user_usage_report_table, 361 | .detailTable, 362 | .mainDrawer, 363 | .toast, 364 | .nowPlayingBarTop, 365 | .paperList, 366 | .visualCardBox, 367 | .checkboxOutline, 368 | .emby-input, 369 | .emby-textarea, 370 | .emby-select-withcolor { 371 | background-color: rgba(245, 245, 245, 0.8); 372 | } 373 | 374 | /*Colors for loading spinner, placeholders, scroll bars*/ 375 | .mdl-spinner__layer-1 {border-color: rgba(var(--accent), 1);} 376 | .mdl-spinner__layer-2 {border-color: rgba(var(--accent), .8);} 377 | .mdl-spinner__layer-3 {border-color: rgba(var(--accent), .6);} 378 | .mdl-spinner__layer-4 {border-color: rgba(var(--accent), .5);} 379 | 380 | 381 | .defaultCardBackground1 { 382 | background-color: rgba(var(--accent), .5); 383 | } 384 | .defaultCardBackground2 { 385 | background-color: rgba(var(--accent), .4); 386 | } 387 | .defaultCardBackground3 { 388 | background-color: rgba(var(--accent), .8); 389 | } 390 | .defaultCardBackground4 { 391 | background-color: rgba(var(--accent), .7); 392 | } 393 | .defaultCardBackground5 { 394 | background-color: rgba(var(--accent), .6); 395 | } 396 | --------------------------------------------------------------------------------