├── README.md ├── alternate-itempage_style.css ├── alternate_style.css ├── backdrop-hack_style.css ├── bottom-progress_style.css ├── customcolor-advanced_style.css ├── customcolor_style.css ├── default_style.css ├── improve-performance_style.css ├── jfblue_style.css ├── jfpurple_style.css ├── screenshots ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png └── 8.png ├── sharp_style.css └── test_style.css /README.md: -------------------------------------------------------------------------------- 1 | # Monochromic - deprecated 2 | ### Superseded by the new [Ultrachromic](https://github.com/CTalvio/Ultrachromic) theme 3 | 4 | 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. 5 | 6 | Check out my other theme, [Kaleidochromic](https://github.com/CTalvio/Kaleidochromic), if you are looking for something more colorful, or [Novachromic](https://github.com/CTalvio/Novachromic) if you are a full on light mode kind of person. 7 | 8 | To use the theme copy paste the line below 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. **NOTE: Theme may not work when using reverse proxy**, check the bottom section of this readme for more info. 9 | 10 | 11 | ```css 12 | @import url('https://ctalvio.github.io/Monochromic/default_style.css'); 13 | ``` 14 | 15 | ![six](screenshots/6.png) 16 | ![five](screenshots/5.png) 17 | 18 | ## Features 19 | - Themes **EVERYTHING** 20 | - Dark, Transparent, Minimalistic 21 | - Uses the same font as the JF logo everywhere 22 | - Add-ons for an easy personal touch 23 | - Customizable accent color 24 | - Blurred backdrops 25 | - Squared aesthetic with rounded corners (optionally corners so sharp you might get an eye poked out) 26 | - Two options for progress bars 27 | - Works well on mobile 28 | - More compact 29 | - Smaller and squared cast info 30 | 31 | ## Add-ons 32 | 33 | This theme has some additional options, they can allow the use of a custom accent color, and more. These are added immediately after the default import line. 34 | 35 | 36 | ### Alternate itempage 37 | 38 | A different itempage to the default of the theme, more reminiscient of "vanilla" as it does not remove the backdrop banner. 39 | 40 | ```css 41 | @import url('https://ctalvio.github.io/Monochromic/alternate-itempage_style.css'); 42 | ``` 43 | ![eight](screenshots/8.png) 44 | 45 | 46 | ### Improve performance 47 | 48 | The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect. I may switch to this method being the default. 49 | 50 | ```css 51 | @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); 52 | ``` 53 | 54 | ### Accent color presets 55 | 56 | Blue restores some of the default jellyfin blue accenting, while purple uses... Well, purple, in a Jellyfin shade of course. 57 | 58 | ```css 59 | @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css'); 60 | 61 | @import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css'); 62 | ``` 63 | 64 | ### Restore bottom bar style episode progress 65 | 66 | Don't like my transparent view progress overlay? Use this to go back to the old style. 67 | 68 | ```css 69 | @import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css'); 70 | ``` 71 | 72 | ### Backdrop on mobile for 10.7.0 73 | 74 | This add-on turns the cover image on the mobile item page into a backdrop, since mobile on 10.7.0 has no backdrop for library items on mobile. 75 | 76 | ```css 77 | @import url('https://ctalvio.github.io/Monochromic/backdrop-hack_style.css'); 78 | ``` 79 | 80 | ### Define your own accent color 81 | 82 | This now uses a single RGB value in a variable. This lets me use the color at various transparencies and hence apply the accent more flexibly in places. Use any RGB color picker to find the value for any given color and enter it. **This import line and variable should always be last**. 83 | ```css 84 | @import url('https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css'); 85 | :root {--accent: R, G, B;} 86 | ``` 87 | 88 | ### Modify rounding 89 | 90 | By adding this variable at the bottom, after the import lines, the rounding can be removed, reduced or increased. **Variables should always be last**. 91 | ```css 92 | :root {--rounding: 5px;} 93 | ``` 94 | 95 | ## Screenshots 96 | 97 | ![one](screenshots/1.png) 98 | ![two](screenshots/2.png) 99 | ![four](screenshots/4.png) 100 | ![seven](screenshots/7.png) 101 | ![three](screenshots/3.png) 102 | 103 | 104 | ## Using with reverse proxy 105 | 106 | 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 all this.) 107 | 108 | Because the config includes Content-Security-Policy which reduces risk of XSS, you need to add the URL from this repo and the fonts to the list of allowed external sources. 109 | 110 | In the nginx config you should change the 111 | 112 | ``` 113 | add_header Content-Security-Policy .... 114 | ``` 115 | to: 116 | 117 | ``` 118 | add_header Content-Security-Policy "default-src https: data: blob:; style-src 'self' 'unsafe-inline' https://ctalvio.github.io/Monochromic/default_style.css https://ctalvio.github.io/Monochromic/jfblue_style.css https://ctalvio.github.io/Monochromic/jfpurple_style.css https://ctalvio.github.io/Monochromic/bottom-progress_style.css https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css https://ctalvio.github.io/Monochromic/improve-performance_style.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'"; 119 | ``` 120 | 121 | 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. 122 | 123 | Thanks to [LickABrick](https://github.com/LickABrick) for discovering this, and submitting instructions on how to fix. 124 | -------------------------------------------------------------------------------- /alternate-itempage_style.css: -------------------------------------------------------------------------------- 1 | /*Alternate itempage*/ 2 | .itemBackdrop { 3 | height: 31vh !important; 4 | display: inherit; 5 | } 6 | .layout-desktop .detailRibbon { 7 | margin-top: 0; 8 | padding-top: .5em; 9 | padding-bottom: .5em; 10 | background: rgba(0,0,0,.2) !important; 11 | } 12 | .detailImageContainer .card.backdropCard { 13 | top: 40vh; 14 | } 15 | 16 | .itemBackdrop::after { 17 | background: rgba(0,0,0,.5) !important; 18 | } 19 | -------------------------------------------------------------------------------- /alternate_style.css: -------------------------------------------------------------------------------- 1 | # Kaleidochromic 2 | A custom theme for Jellyfin mediaserver created using CSS overrides. While a separate theme, it is built on top other theme, Monochromic. Therefore, please open any issues over there. Kaleidochromic is essentially Monochromic, but with yet another layer of overrides. This makes maintenance easier. 3 | 4 | To use the theme copy paste the line below 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. **NOTE: Theme may not work when using reverse proxy**, check the bottom section of this readme for more info. 5 | 6 | 7 | ```css 8 | @import url('https://ctalvio.github.io/Kaleidochromic/default_style.css'); 9 | ``` 10 | 11 | ![six](screenshots/6.png) 12 | ![five](screenshots/5.png) 13 | 14 | ## Features 15 | - Themes **EVERYTHING** 16 | - Bright, Transparent, Minimalistic 17 | - Uses the same font as the JF logo everywhere 18 | - Add-ons for an easy personal touch 19 | - Customizable accent color 20 | - Blurred backdrops 21 | - Rounded look (optionally sharp) 22 | - Two options for progress bars 23 | - Works well on mobile 24 | - More compact 25 | - Smaller and squared cast info 26 | 27 | ## Add-ons 28 | 29 | This theme has some additional options, they can allow the use of a custom accent color, and more. These are added immediately after the default import line. 30 | 31 | ### Improve performance 32 | 33 | The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect. I may switch to this method being the default. 34 | 35 | ```css 36 | @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); 37 | ``` 38 | 39 | ### Restore bottom bar style episode progress 40 | 41 | Don't like my transparent view progress overlay? Use this to go back to the old style. 42 | 43 | ```css 44 | @import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css'); 45 | ``` 46 | 47 | ### Accent color presets 48 | 49 | Blue restores some of the default jellyfin blue accenting, while purple uses... Well, purple, in a Jellyfin shade of course. 50 | 51 | ```css 52 | @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css'); 53 | 54 | @import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css'); 55 | ``` 56 | 57 | ### Modify rounding 58 | 59 | By adding this variable at the bottom, after the import lines, the rounding can be removed, reduced or increased. **Variables should always be last**. 60 | 61 | ```css 62 | :root {--rounding: 12px;} 63 | ``` 64 | 65 | ### Define your own accent color 66 | 67 | This is now integrated into the theme and requires no additional import line, and uses a variable same as rounding. Use any RGB color picker to find the value for any given color and enter it. **Variables should always be last**. 68 | :root {--accent: R, G, B;} 69 | ``` 70 | 71 | ## Screenshots 72 | 73 | ![one](screenshots/1.png) 74 | ![two](screenshots/2.png) 75 | ![four](screenshots/4.png) 76 | ![seven](screenshots/7.png) 77 | ![three](screenshots/3.png) 78 | 79 | 80 | ## Using with reverse proxy 81 | 82 | 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 all this.) 83 | 84 | Because the config includes Content-Security-Policy which reduces risk of XSS, you need to add the URL from this repo and the fonts to the list of allowed external sources. 85 | 86 | In the nginx config you should change the 87 | ``` 88 | add_header Content-Security-Policy .... 89 | ``` 90 | to: 91 | ``` 92 | add_header Content-Security-Policy "default-src https: data: blob:; style-src 'self' 'unsafe-inline' 93 | https://ctalvio.github.io/Monochromic/default_style.css 94 | https://ctalvio.github.io/Monochromic/jfblue_style.css 95 | https://ctalvio.github.io/Monochromic/jfpurple_style.css 96 | https://ctalvio.github.io/Monochromic/bottom-progress_style.css.css 97 | https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css 98 | https://ctalvio.github.io/Monochromic/improve-performance_style.css 99 | https://ctalvio.github.io/Kaleidochromic/default_style.css 100 | https://fonts.googleapis.com/css2; 101 | script-src 'self' 'unsafe-inline' 102 | https://www.gstatic.com/cv/js/sender/v1/cast_sender.js 103 | https://www.youtube.com/iframe_api https://s.ytimg.com 104 | https://ctalvio.github.io/Monochromic/default_style.css 105 | https://ctalvio.github.io/Monochromic/jfblue_style.css 106 | https://ctalvio.github.io/Monochromic/jfpurple_style.css 107 | https://ctalvio.github.io/Monochromic/bottom-progress_style.css 108 | https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css 109 | https://ctalvio.github.io/Monochromic/improve-performance_style.css 110 | https://ctalvio.github.io/Kaleidochromic/default_style.css 111 | worker-src 'self' blob:; connect-src 'self'; object-src 'none'; frame-ancestors 'self'"; 112 | ``` 113 | 114 | 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. 115 | 116 | Thanks to [LickABrick](https://github.com/LickABrick) for discovering this, and submitting instructions on how to fix. 117 | -------------------------------------------------------------------------------- /backdrop-hack_style.css: -------------------------------------------------------------------------------- 1 | .layout-mobile .detailPageWrapperContainer { 2 | margin-top: 0em; 3 | z-index: 0; 4 | } 5 | .layout-mobile .detailPagePrimaryContainer { 6 | z-index: -1; 7 | } 8 | .layout-mobile .primaryImageWrapper { 9 | -webkit-flex: 0 0 auto; 10 | flex: 0 0 auto; 11 | } 12 | .layout-mobile .mainDetailButtons { 13 | background: rgba(0, 0, 0, 0.2); 14 | z-index: 1; 15 | margin-left: -.5em; 16 | margin-right: -.5em; 17 | } 18 | .layout-mobile .infoText { 19 | z-index: 1; 20 | } 21 | .layout-mobile .primaryImageWrapper > img { 22 | min-width: 100vw; 23 | min-height: 100vh; 24 | position: fixed; 25 | left: 0; 26 | top: 0; 27 | filter: blur(20px) saturate(190%) contrast(140%) brightness(25%); 28 | } 29 | -------------------------------------------------------------------------------- /bottom-progress_style.css: -------------------------------------------------------------------------------- 1 | :root {--accent: 255, 255, 255;} 2 | 3 | .itemProgressBar { 4 | height: 5px; 5 | background: rgba(0,0,0,.5); 6 | } 7 | 8 | .playbackProgress>div, .itemProgressBarForeground { 9 | background-color: rgba(var(--accent), 0.75) !important; 10 | } 11 | 12 | .transcodingProgress>div { 13 | background-color: rgba(var(--accent), 0.35) !important; 14 | } 15 | -------------------------------------------------------------------------------- /customcolor-advanced_style.css: -------------------------------------------------------------------------------- 1 | .raised:hover, 2 | .fab:hover, 3 | a[data-role="button"]:hover { 4 | background: rgba(var(--accent),0.5) !important; 5 | } 6 | 7 | .subtitleappearance-preview { 8 | background: linear-gradient(140deg,rgb(var(--accent)),#111) !important; 9 | } 10 | 11 | .navMenuOption-selected { 12 | color: rgba(var(--accent)); 13 | } 14 | .mdl-slider-background-lower { 15 | background-color: rgba(var(--accent)); 16 | } 17 | 18 | .playbackProgress>div { 19 | background-color: rgba(var(--accent),0.75); 20 | } 21 | progress::-moz-progress-bar { 22 | background-color: rgba(var(--accent),0.75); 23 | } 24 | progress::-webkit-progress-value { 25 | background-color: rgba(var(--accent),0.75); 26 | } 27 | .taskProgressInner { 28 | background: rgba(var(--accent),0.75) !important; 29 | } 30 | 31 | .transcodingProgress>div, 32 | .itemProgressBarForeground { 33 | background-color: rgba(var(--accent),0.35); 34 | } 35 | 36 | .mdl-slider-background-lower { 37 | background-color: rgb(var(--accent)); 38 | } 39 | .mdl-slider::-moz-range-thumb { 40 | background: rgb(var(--accent)); 41 | } 42 | .mdl-slider::-ms-thumb { 43 | background: rgb(var(--accent)); 44 | } 45 | .mdl-slider::-webkit-slider-thumb { 46 | background: rgb(var(--accent)); 47 | } 48 | .iconOsdProgressInner { 49 | background: rgb(var(--accent)); 50 | } 51 | 52 | .paper-icon-button-light:hover, 53 | .raised.homeLibraryButton:hover, 54 | .button-flat:hover, 55 | .playstatebutton-icon-played, 56 | .ratingbutton-icon-withrating, 57 | .paper-icon-button-light:hover:not(:disabled), 58 | .emby-tab-button:hover, 59 | .selectLabelFocused, 60 | .inputLabelFocused, 61 | .textareaLabelFocused, 62 | .buttonActive, 63 | .button-link { 64 | color: rgba(var(--accent)) !important; 65 | } 66 | 67 | #itemDetailPage .button-link {color: inherit !important;} 68 | 69 | .navMenuOption:hover, 70 | .actionSheetMenuItem:hover { 71 | background-color: rgba(var(--accent),0.5) !important; 72 | } 73 | 74 | .emby-checkbox:checked + span + .checkboxOutline, 75 | .emby-textarea:focus, 76 | .emby-select-withcolor:focus, 77 | .emby-input:focus, 78 | .itemSelectionPanel { 79 | border: 0.01em solid rgba(var(--accent),0.5) !important; 80 | } 81 | 82 | .upNextDialog-countdownText { 83 | color: rgba(var(--accent)); 84 | } 85 | 86 | .mdl-spinner__layer-1 { 87 | border-color: rgba(var(--accent)); 88 | } 89 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { 90 | background: rgba(var(--accent), 0.5); 91 | } 92 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { 93 | background: rgba(var(--accent)); 94 | } 95 | 96 | ::-webkit-scrollbar-thumb { 97 | background: rgba(var(--accent),0.8) !important; 98 | } 99 | * { 100 | scrollbar-color: rgba(var(--accent),0.8) #0000 !important; 101 | } 102 | 103 | 104 | /* Syncplay theming*/ 105 | .syncPlayIconCircle { 106 | color: rgba(var(--accent),1) !important; 107 | text-shadow: none !important; 108 | } 109 | -------------------------------------------------------------------------------- /customcolor_style.css: -------------------------------------------------------------------------------- 1 | .raised:hover, .fab:hover { 2 | background: var(--hoveraccent) !important; 3 | } 4 | 5 | .navMenuOption-selected { 6 | color: var(--accent); 7 | } 8 | .mdl-slider-background-lower { 9 | background-color: var(--accent); 10 | } 11 | 12 | .itemProgressBarForeground { 13 | background: var(--hoveraccent) !important; 14 | } 15 | 16 | div[data-role="controlgroup"] a.ui-btn-active, 17 | .iconOsdProgressInner, 18 | .mdl-slider::-moz-range-thumb { 19 | background: var(--accent) !important; 20 | } 21 | 22 | .paper-icon-button-light:hover, 23 | .raised.homeLibraryButton:hover, 24 | .button-flat:hover, 25 | .playstatebutton-icon-played, 26 | .ratingbutton-icon-withrating, 27 | .paper-icon-button-light:hover:not(:disabled), 28 | .emby-tab-button:hover, 29 | .selectLabelFocused, 30 | .inputLabelFocused, 31 | .textareaLabelFocused { 32 | color: var(--accent) !important; 33 | } 34 | 35 | .navMenuOption:hover, 36 | .actionSheetMenuItem:hover { 37 | background-color: var(--hoveraccent) !important; 38 | } 39 | 40 | .emby-checkbox:checked + span + .checkboxOutline, 41 | .emby-textarea:focus, 42 | .emby-select-withcolor:focus, 43 | .emby-input:focus, 44 | .itemSelectionPanel { 45 | border: 0.01em solid var(--hoveraccent) !important; 46 | } 47 | 48 | .mdl-spinner__layer-1 {border-color: var(--accent);} 49 | -------------------------------------------------------------------------------- /default_style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); body, h1, h2, h3, h4 { 2 | font-family: 'Quicksand', sans-serif; 3 | } 4 | 5 | :root {--rounding: 5px;} 6 | 7 | /*Narrow margins, theme main page*/ 8 | .cardBox-bottompadded { 9 | margin-bottom: 0.6em !important; 10 | } 11 | .itemsContainer > .card > .cardBox { 12 | margin-right: 0.8em; 13 | } 14 | .raised.homeLibraryButton { 15 | background: rgba(0, 0, 0, 0.3) !important; 16 | } 17 | .raised.homeLibraryButton:hover { 18 | background: rgba(0, 0, 0, 0.5) !important; 19 | } 20 | .raised.homeLibraryButton:hover {transition: filter 0.2s} 21 | .raised.homeLibraryButton {transition: filter 0.2s} 22 | .homeLibraryButton { 23 | min-width: 12em; 24 | margin: 0.4em; 25 | } 26 | 27 | /*Blur backdrops, feel free to edit the intensity of the blur/saturation/dimming*/ 28 | .backdropImage { 29 | filter: blur(60px) saturate(200%) contrast(160%) brightness(25%); 30 | } 31 | .backgroundContainer.withBackdrop { 32 | background-color: rgba(0,0,0,0); 33 | } 34 | 35 | /*Shrink and square (or round) cast thumnails*/ 36 | @media all and (min-width: 131.25em){ 37 | #castContent .card.overflowPortraitCard { 38 | width: 6.3vw !important; 39 | font-size: 90% !important; 40 | } 41 | } 42 | @media all and (min-width: 120em) and (max-width: 131.25em){ 43 | #castContent .card.overflowPortraitCard { 44 | width: 6.4vw !important; 45 | font-size: 90% !important; 46 | } 47 | } 48 | @media all and (min-width: 100em) and (max-width: 120em){ 49 | #castContent .card.overflowPortraitCard { 50 | width: 7.6vw !important; 51 | font-size: 90% !important; 52 | } 53 | } 54 | @media all and (min-width: 87.5em) and (max-width: 100em){ 55 | #castContent .card.overflowPortraitCard { 56 | width: 9.3vw !important; 57 | font-size: 90% !important; 58 | } 59 | } 60 | @media all and (min-width: 75em) and (max-width: 87.5em){ 61 | #castContent .card.overflowPortraitCard { 62 | width: 10.5vw !important; 63 | font-size: 90% !important; 64 | } 65 | } 66 | @media all and (min-width: 50em) and (max-width: 75em){ 67 | #castContent .card.overflowPortraitCard { 68 | width: 15vw !important; 69 | font-size: 90% !important; 70 | } 71 | } 72 | @media all and (min-width: 43.75em) and (max-width: 50em){ 73 | #castContent .card.overflowPortraitCard { 74 | width: 20.1vw !important; 75 | font-size: 90% !important; 76 | } 77 | } 78 | @media all and (min-width: 25em) and (max-width: 43.75em){ 79 | #castContent .card.overflowPortraitCard { 80 | width: 31.2vw !important; 81 | font-size: 90% !important; 82 | } 83 | } 84 | @media all and (max-width: 25em){ 85 | #castContent .card.overflowPortraitCard { 86 | width: 40vw !important; 87 | font-size: 90% !important; 88 | } 89 | } 90 | 91 | .cardPadder { 92 | background-color: #0000 !important; box-shadow: none !important; 93 | } 94 | 95 | /*Correct image aspect ratio behaviour, set border-radius to zero for square tiles*/ 96 | 97 | @media all and (min-width: 131.25em){ 98 | #castContent .cardScalable { 99 | width: calc(6.3vw - 0.6em) !important; 100 | height: calc(6.3vw - 0.6em) !important; 101 | } 102 | } 103 | @media all and (min-width: 120em) and (max-width: 131.25em){ 104 | #castContent .cardScalable { 105 | width: calc(6.4vw - 0.6em) !important; 106 | height: calc(6.4vw - 0.6em) !important; 107 | } 108 | } 109 | @media all and (min-width: 100em) and (max-width: 120em){ 110 | #castContent .cardScalable { 111 | width: calc(7.6vw - 0.6em) !important; 112 | height: calc(7.6vw - 0.6em) !important; 113 | } 114 | } 115 | @media all and (min-width: 87.5em) and (max-width: 100em){ 116 | #castContent .cardScalable { 117 | width: calc(9.3vw - 0.6em) !important; 118 | height: calc(9.3vw - 0.6em) !important; 119 | } 120 | } 121 | @media all and (min-width: 75em) and (max-width: 87.5em){ 122 | #castContent .cardScalable { 123 | width: calc(10.5vw - 0.6em) !important; 124 | height: calc(10.5vw - 0.6em) !important; 125 | } 126 | } 127 | @media all and (min-width: 50em) and (max-width: 75em){ 128 | #castContent .cardScalable { 129 | width: calc(15vw - 0.6em) !important; 130 | height: calc(15vw - 0.6em) !important; 131 | } 132 | } 133 | @media all and (min-width: 43.75em) and (max-width: 50em){ 134 | #castContent .cardScalable { 135 | width: calc(20.1vw - 0.6em) !important; 136 | height: calc(20.1vw - 0.6em) !important; 137 | } 138 | } 139 | @media all and (min-width: 25em) and (max-width: 43.75em){ 140 | #castContent .cardScalable { 141 | width: calc(31.2vw - 0.6em) !important; 142 | height: calc(31.2vw - 0.6em) !important; 143 | } 144 | } 145 | @media all and (max-width: 25em){ 146 | #castContent .cardScalable { 147 | width: calc(40vw - 0.6em) !important; 148 | height: calc(40vw - 0.6em) !important; 149 | } 150 | } 151 | 152 | /*Tweak series/movie/album title screen*/ 153 | .detailImageContainer .card { 154 | position:fixed; 155 | } 156 | 157 | .mainDetailButtons { 158 | font-size: 120%; 159 | } 160 | @media all and (max-width: 100em){ 161 | .mainDetailButtons { 162 | font-size: 155%; 163 | } 164 | } 165 | 166 | .detailSectionContent { 167 | max-width: 66em; 168 | } 169 | .trackSelections { 170 | max-width: 22em; 171 | } 172 | .detailLogo { 173 | display: none; 174 | } 175 | .detailPagePrimaryContainer { 176 | background: rgba(0,0,0,0) !important; 177 | } 178 | @media all and (min-width: 32em){ 179 | .itemBackdrop { 180 | display: none; 181 | } 182 | .layout-desktop .detailRibbon { 183 | margin-top: 13vh; 184 | } 185 | } 186 | 187 | /*Change backdrop behaviour on mobile pre-10.7.0*/ 188 | @media all and (max-width: 32em) { 189 | .itemBackdrop { 190 | width: 100vw!important; 191 | height: 100vh!important; 192 | position: fixed; 193 | } 194 | .detailPageWrapperContainer { 195 | margin-top: 5em; 196 | } 197 | .itemBackdrop { 198 | filter: blur(45px) saturate(200%) contrast(160%) brightness(25%); 199 | } 200 | } 201 | 202 | /*Accommodate ultrawide aspect ratios*/ 203 | @media (min-aspect-ratio: 1.98/1) { 204 | .detailImageContainer .card { 205 | width: 21vw; 206 | } 207 | .detailPagePrimaryContainer { 208 | padding-left: 28.45vw !important; 209 | } 210 | .detailPageContent { 211 | padding-left: 28.45vw; 212 | } 213 | } 214 | @media (min-aspect-ratio: 2.7/1) { 215 | .detailImageContainer .card { 216 | width: 16vw; 217 | } 218 | .detailPagePrimaryContainer { 219 | padding-left: 23.45vw !important; 220 | } 221 | .detailPageContent { 222 | padding-left: 23.45vw; 223 | } 224 | } 225 | 226 | 227 | /*Size episode preview images in a more compact way*/ 228 | .listItem:hover { 229 | transition: 0.2s; background: rgba(0, 0, 0, 0.4); 230 | } 231 | .listItemImage.listItemImage-large.itemAction.lazy { 232 | transition: filter 0.2s 233 | } 234 | .listItemImageButton-icon { 235 | padding: 0; 236 | } 237 | .secondary.listItem-overview.listItemBodyText { 238 | height: 61px; 239 | margin: 0; 240 | } 241 | .listItemImageButton { 242 | margin: auto; 243 | font-size: 1.6em !important; 244 | } 245 | @media all and (min-width: 100em){ 246 | .listItemImage.listItemImage-large.itemAction.lazy { 247 | height: 110px; 248 | } 249 | .listItem-content { 250 | height: 115px; 251 | } 252 | .secondary.listItem-overview.listItemBodyText { 253 | height: 4em; 254 | margin: 0; 255 | } 256 | } 257 | @media all and (max-width: 100em){ 258 | .listItemImage.listItemImage-large.itemAction.lazy {height: 80px;} 259 | .listItem-content {height: 85px;} 260 | .secondary.listItem-overview.listItemBodyText {height: 2.5em; margin: 0;} 261 | } 262 | 263 | .missingIndicator, .unairedIndicator { 264 | background: #ae3030eb; 265 | padding: .3em .6em; 266 | border-radius: var(--rounding); 267 | color: #fff; 268 | } 269 | 270 | /*Banner transparency*/ 271 | #dashboardPage, 272 | #dashboardGeneralPage, 273 | #userProfilesPage, 274 | #devicesPage, 275 | #serverActivityPage, 276 | #liveTvStatusPage, 277 | #liveTvSettingsPage, 278 | #networkingPage, 279 | #apiKeysPage, 280 | #logPage, 281 | #notificationSettingsPage, 282 | #scheduledTasksPage, 283 | #itemDetailPage { 284 | mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px); 285 | -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px); 286 | overflow: scroll; 287 | } 288 | 289 | @media all and (min-width: 100em){ 290 | #indexPage, 291 | #moviesPage, 292 | #tvRecommendedPage, 293 | #musicRecommendedPage { 294 | mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 70px, rgb(0, 0, 0) 120px); 295 | -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 70px, rgb(0, 0, 0) 120px); 296 | overflow: scroll; 297 | } 298 | #encodingSettingsPage, 299 | #mediaLibraryPage, 300 | #dlnaSettingsPage, 301 | #pluginsPage { 302 | mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px); 303 | -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px); 304 | overflow: scroll; 305 | } 306 | } 307 | 308 | @media all and (max-width: 100em){ 309 | #indexPage, 310 | #moviesPage, 311 | #tvRecommendedPage, 312 | #encodingSettingsPage, 313 | #mediaLibraryPage, 314 | #dlnaSettingsPage, 315 | #pluginsPage, 316 | #musicRecommendedPage { 317 | mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px); 318 | -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 135px); 319 | overflow: scroll; 320 | margin-top: 30px; 321 | } 322 | } 323 | 324 | @media all and (max-width: 100em){ 325 | #indexPage, 326 | #moviesPage, 327 | #tvRecommendedPage, 328 | #encodingSettingsPage, 329 | #mediaLibraryPage, 330 | #dlnaSettingsPage, 331 | #pluginsPage, 332 | #musicRecommendedPage { 333 | mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px); 334 | -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px); 335 | overflow: scroll; 336 | margin-top: 20px; 337 | } 338 | } 339 | 340 | /*Top "task bar" make transparent and enlarge text*/ 341 | .skinHeader { 342 | background: none !important; 343 | background-color: rgba(0, 0, 0, 0) !important; 344 | } 345 | .headerTabs.sectionTabs { 346 | text-size-adjust: 110%; 347 | font-size: 110%; 348 | } 349 | .pageTitle { 350 | margin-top: auto; 351 | margin-bottom: auto; 352 | } 353 | .emby-tab-button { 354 | padding: 1.75em 1.7em; 355 | } 356 | 357 | /*Narrow the login form, size according to display size (bigger on mobile)*/ 358 | #loginPage .readOnlyContent, 359 | #loginPage form { 360 | max-width: 22em; 361 | } 362 | 363 | /*Hide "please login" text, margin is to prevent login form moving too far up*/ 364 | #loginPage h1 { 365 | display: none 366 | } 367 | #loginPage .padded-left.padded-right.padded-bottom-page { 368 | margin-top: 50px 369 | } 370 | 371 | /*Hide "manual" and "forgot" buttons}*/ 372 | #loginPage .raised.cancel.block.btnForgotPassword.emby-button { 373 | display: none 374 | } 375 | 376 | /*Login background*/ 377 | #loginPage { 378 | background: url(https://i.imgur.com/9vL4iNf.png) !important; 379 | background-size: cover !important; 380 | } 381 | 382 | /*Make watched icon, footer on chapter thumnails (and other things), and count indicator dark and transparent*/ 383 | .innerCardFooter, 384 | .countIndicator, 385 | .playedIndicator { 386 | background: rgba(0,0,0,0.4); 387 | box-shadow: none; 388 | } 389 | .countIndicator { 390 | box-shadow: none; 391 | } 392 | 393 | /*Rounded corners on pretty much everything*/ 394 | .formDialogHeader { 395 | border-top-left-radius: var(--rounding); 396 | border-top-right-radius: var(--rounding); 397 | } 398 | .formDialogFooter { 399 | border-bottom-left-radius: var(--rounding); 400 | border-bottom-right-radius: var(--rounding); 401 | } 402 | .cardOverlayContainer { 403 | border-radius: var(--rounding) !important; 404 | } 405 | .primaryImageWrapper > img, 406 | .toast, 407 | .paperList, 408 | .cardContent, 409 | .sessionNowPlayingInnerContent, 410 | .listItem:hover, 411 | .cardImage, 412 | .fab, 413 | .raised, 414 | .multiSelectCheckboxOutline, 415 | .itemSelectionPanel, 416 | .cardContent-button, 417 | .cardContent-shadow, 418 | .itemDetailImage, 419 | .cardOverlayButton-hover, 420 | .cardImageContainer, 421 | .cardPadder, 422 | .listItemImage, 423 | .listItemImageButton, 424 | .listItemButton, 425 | .headerButton, 426 | .paper-icon-button-light, 427 | .innerCardFooter, 428 | .blurhash-canvas, 429 | .dialog, 430 | .countIndicator, 431 | .playedIndicator, 432 | .listItemIcon, 433 | .listItem-border, 434 | .button-flat, 435 | .visualCardBox, 436 | .checkboxOutline, 437 | .emby-select-withcolor, 438 | .chapterThumbTextContainer, 439 | .chapterThumbContainer, 440 | .chapterThumb, 441 | .emby-input, 442 | .emby-textarea, 443 | .emby-select-withcolor, 444 | .nowPlayingPageImage, 445 | .upNextDialog-poster-img, 446 | .upNextContainer, 447 | .cardOverlayButtonIcon { 448 | border-radius: var(--rounding) !important; 449 | } 450 | .osdPoster img { 451 | border-radius: var(--rounding); border: none; 452 | } 453 | .mdl-slider::-moz-range-thumb { 454 | border-radius: var(--rounding); 455 | } 456 | .mdl-slider::-ms-thumb { 457 | border-radius: var(--rounding); 458 | } 459 | .mdl-slider::-webkit-slider-thumb { 460 | border-radius: var(--rounding); 461 | } 462 | 463 | div[data-role="controlgroup"] a[data-role="button"]:first-child { 464 | border-bottom-left-radius: var(--rounding); 465 | border-top-left-radius: var(--rounding); 466 | } 467 | div[data-role="controlgroup"] a[data-role="button"]:last-child { 468 | border-bottom-right-radius: var(--rounding); 469 | border-top-right-radius: var(--rounding); 470 | } 471 | #dashboardPage .cardContent, #dashboardPage .sessionNowPlayingInnerContent { 472 | border-radius: var(--rounding) var(--rounding) 0 0 !important; 473 | } 474 | #divVirtualFolders .cardImageContainer, #divVirtualFolders .cardContent { 475 | border-radius: var(--rounding) var(--rounding) 0 0 !important; 476 | } 477 | #userProfilesPage .cardImage, #userProfilesPage .cardContent { 478 | border-radius: var(--rounding) var(--rounding) 0 0 !important; 479 | } 480 | 481 | /*Homepage modifications, transparent footerplayer and fixed sectiontitles*/ 482 | .appfooter { 483 | background: rgba(0,0,0,0.9); 484 | } 485 | 486 | /*Modify subtitle settings page*/ 487 | .subtitleappearance-preview { 488 | background: linear-gradient(140deg,#444,#111) !important; 489 | } 490 | 491 | /*Fix weird shevron off centering*/ 492 | .layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { 493 | padding-top:0em; 494 | } 495 | .sectionTitle { 496 | margin-left: .4em !important; 497 | margin-top: .2em !important; 498 | margin-bottom: .2em !important; 499 | } 500 | .sectionTitleTextButton > .material-icons { 501 | margin: 0; 502 | } 503 | .layout-mobile .sectionTitleTextButton > .material-icons { 504 | padding-top: .2em; 505 | } 506 | 507 | /*Fix the UI shifting around*/ 508 | .nowPlayingBarCurrentTime { 509 | width: 6em; 510 | } 511 | .osdTextContainer { 512 | margin: 0 !important; 513 | margin-top: 0.2em !important; 514 | padding-left: 0.5em !important; 515 | padding-right: 0.5em !important; 516 | } 517 | 518 | /*Fix top right user icon when using a profile image*/ 519 | .headerUserButtonRound { 520 | border-radius: 50px !important; 521 | } 522 | 523 | /*Modified progress bar, play and item menu buttons*/ 524 | .innerCardFooter.fullInnerCardFooter.innerCardFooterClear { 525 | border-radius: 0px !important; 526 | background: rgba(0,0,0,0.7); 527 | } 528 | 529 | .itemProgressBar { 530 | height: 2000em; 531 | background: #0000; 532 | } 533 | .playbackProgress>div { 534 | background-color: rgba(255,255,255,0.75); 535 | } 536 | .transcodingProgress>div, .itemProgressBarForeground { 537 | background-color: rgba(255,255,255,0.3); 538 | } 539 | 540 | .innerCardFooter.fullInnerCardFooter.innerCardFooterClear { 541 | border-radius: 0px !important; 542 | background: rgba(0,0,0,0); 543 | } 544 | 545 | /*Accommodate mobile and set positions, I think*/ 546 | .cardIndicators, 547 | .listItemIndicators { 548 | right: 0.3em; 549 | top: 0.3em; 550 | } 551 | 552 | @media all and (min-width: 70em){ 553 | .cardOverlayFab-primary { 554 | background-color: #00000000; 555 | } 556 | .cardOverlayButtonIcon { 557 | background-color: #00000000 !important; 558 | } 559 | .cardOverlayContainer { 560 | background-color: rgba(0, 0, 0, 0.7); 561 | } 562 | } 563 | @media all and (max-width: 70em){ 564 | .cardOverlayButtonIcon { 565 | background-color: rgba(0, 0, 0, 0.5) !important; 566 | } 567 | .cardOverlayButton { 568 | padding: 0.3em; 569 | } 570 | } 571 | 572 | /*ANIMATIONS*/ 573 | /*Fade as images load*/ 574 | .blurhash-canvas { 575 | transition: 0.2s; 576 | } 577 | .cardImageContainer { 578 | transition: 0.7s; 579 | } 580 | 581 | /*Hover background for buttons*/ 582 | .button-flat:hover { 583 | background: rgba(0,0,0,0.4); 584 | } 585 | .button-flat { 586 | padding: .5em !important; 587 | margin: .2em !important; 588 | } 589 | 590 | /*Some themeing for the dashboard*/ 591 | 592 | #user_usage_report_table, 593 | .detailTable { 594 | background: rgba(0,0,0,.5); 595 | border-radius: var(--rounding); 596 | } 597 | .detailTableBodyRow-shaded { 598 | background: #0000 !important; 599 | } 600 | 601 | .infoBanner { 602 | background: #101010; 603 | } 604 | .navMenuOptionText { 605 | margin-top: 0; 606 | } 607 | .backgroundProgress > div { 608 | background-color: #0000; 609 | } 610 | 611 | .visualCardBox, .cardImageContainer { 612 | box-shadow: none; 613 | } 614 | 615 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { 616 | background: rgba(120, 120, 120, 0.6); 617 | } 618 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { 619 | background: white; 620 | } 621 | 622 | .dashboardSection h3 { 623 | margin-left: 0.5em; 624 | } 625 | .sessionCardFooter { 626 | border: none; 627 | } 628 | .paperList, 629 | .visualCardBox { 630 | background-color: rgba(0, 0, 0, 0.5); 631 | } 632 | .listItem-border { 633 | border-color: rgba(255, 255, 255, 0) !important; 634 | } 635 | fieldset { 636 | border: 1px solid rgba(40, 40, 40, 0.8); 637 | border-radius: 0.4em; 638 | } 639 | 640 | /*Theme the library scan progress bar*/ 641 | progress { 642 | background: rgba(0, 0, 0, 0.5) !important; 643 | border-radius: var(--rounding); 644 | border: 1px solid rgba(255, 255, 255, 0.22); 645 | } 646 | progress::-webkit-progress-bar { 647 | background: rgba(0, 0, 0, 0.5) !important; 648 | border-radius: var(--rounding); 649 | border: 0px solid rgba(255, 255, 255, 0.22); 650 | } 651 | progress::-moz-progress-bar { 652 | background-color: rgba(255,255,255,0.75); 653 | border-radius: var(--rounding); 654 | } 655 | progress::-webkit-progress-value { 656 | background-color: rgba(255,255,255,0.75); 657 | border-radius: var(--rounding); 658 | } 659 | #divRunningTasks span { 660 | color: rgba(255,255,255,0.75) !important; 661 | } 662 | 663 | .taskProgressOuter, 664 | .taskProgressInner { 665 | border-radius: var(--rounding) !important; 666 | } 667 | .taskProgressOuter { 668 | background: rgba(0, 0, 0, 0.5) !important; 669 | border: 1px solid rgba(255, 255, 255, 0.22); 670 | } 671 | .taskProgressInner { 672 | background: rgba(255,255,255,0.75) !important; 673 | } 674 | #scheduledTasksPage span { 675 | color: rgba(255,255,255,0.75) !important; 676 | } 677 | 678 | /*Shrink the mouseover chapter image when scrobbling*/ 679 | .chapterThumb { 680 | height: 14vh; 681 | min-width: 14vh; 682 | } 683 | .chapterThumbText { 684 | font-size: 1em; 685 | } 686 | .sliderBubble { 687 | background: #0000; 688 | } 689 | 690 | /*Color theming*/ 691 | 692 | /*Theme process progress ring*/ 693 | .progressring-spiner { 694 | border-color: rgba(var(--accent)); 695 | border-width: .35em; 696 | } 697 | .progressring { 698 | margin: .4em; 699 | } 700 | .progressring-bg { 701 | display: none; 702 | } 703 | 704 | /*Affects blurhash to remove the saturated colors to fit overall look*/ 705 | .blurhash-canvas { 706 | filter: opacity(60%) saturate(60%); 707 | } 708 | 709 | /*Theme user setting tab buttons*/ 710 | div[data-role="controlgroup"] a.ui-btn-active { 711 | background: rgba(0, 0, 0, 0.5) !important; 712 | color: white !important; 713 | } 714 | a[data-role="button"]:hover { 715 | background: rgba(80, 80, 80, 0.8) !important; 716 | } 717 | 718 | div[data-role=controlgroup] a[data-role=button]+a[data-role=button] { 719 | margin: 0 !important; 720 | } 721 | 722 | /*Rating star, normally yellow*/ 723 | .starIcon { 724 | color: rgba(255,255,255,.8); 725 | } 726 | 727 | 728 | /*Theme media player*/ 729 | .startTimeText, .endTimeText { 730 | width: 3.4em; 731 | display: block; 732 | text-align: center; 733 | } 734 | .osdTitle { 735 | margin-left: 0.5em; 736 | } 737 | .mdl-slider-background-lower { 738 | background-color: rgb(255, 255, 255); 739 | } 740 | .mdl-slider::-moz-range-thumb { 741 | background: rgb(255, 255, 255); 742 | } 743 | .mdl-slider::-ms-thumb { 744 | background: rgb(255, 255, 255); 745 | } 746 | .mdl-slider::-webkit-slider-thumb { 747 | background: rgb(255, 255, 255); 748 | } 749 | .iconOsdProgressInner { 750 | background: rgb(255, 255, 255); 751 | } 752 | 753 | .videoOsdBottom { 754 | background: rgba(0,0,0,.7); 755 | padding-top: 1em; 756 | } 757 | .skinHeader-withBackground.osdHeader { 758 | background: rgba(0,0,0,.7) !important; 759 | height: 5em; 760 | } 761 | 762 | .nowPlayingPageImage { 763 | border: none; 764 | } 765 | 766 | .upNextDialog-countdownText { 767 | color: white; 768 | } 769 | 770 | 771 | 772 | /*Theme syncplay*/ 773 | .syncPlayIconCircle { 774 | color: rgba(255,255,255,1) !important; 775 | text-shadow: none !important; 776 | } 777 | 778 | @-webkit-keyframes pulse { 779 | 0% { 780 | -webkit-transform:scale(.95); 781 | transform:scale(.95); 782 | color:rgba(0,0,0,.7); 783 | background:rgba(0,0,0,.3); 784 | box-shadow:0 0 0 0 rgba(0,0,0,.3) 785 | } 786 | 70% { 787 | -webkit-transform:scale(1); 788 | transform:scale(1); 789 | color:rgba(0,0,0,.6); 790 | background:rgba(0,0,0,0); 791 | box-shadow:0 0 0 60px rgba(0,0,0,0) 792 | } 793 | to { 794 | -webkit-transform:scale(.95); 795 | transform:scale(.95); 796 | color:rgba(0,0,0,.7); 797 | background:rgba(0,0,0,.3); 798 | box-shadow:0 0 0 0 rgba(0,0,0,0) 799 | } 800 | } 801 | @keyframes pulse { 802 | 0% { 803 | -webkit-transform:scale(.95); 804 | transform:scale(.95); 805 | color:rgba(0,0,0,.7); 806 | background:rgba(0,0,0,.3); 807 | box-shadow:0 0 0 0 rgba(0,0,0,.3) 808 | } 809 | 70% { 810 | -webkit-transform:scale(1); 811 | transform:scale(1); 812 | color:rgba(0,0,0,.6); 813 | background:rgba(0,0,0,0); 814 | box-shadow:0 0 0 60px rgba(0,0,0,0) 815 | } 816 | to { 817 | -webkit-transform:scale(.95); 818 | transform:scale(.95); 819 | color:rgba(0,0,0,.7); 820 | background:rgba(0,0,0,.3); 821 | box-shadow:0 0 0 0 rgba(0,0,0,0) 822 | } 823 | } 824 | @-webkit-keyframes infinite-pulse { 825 | 0% { 826 | -webkit-transform:scale(.95); 827 | transform:scale(.95); 828 | color:rgba(0,0,0,.7); 829 | background:rgba(0,0,0,.3); 830 | box-shadow:0 0 0 0 rgba(0,0,0,.3) 831 | } 832 | 70% { 833 | -webkit-transform:scale(1); 834 | transform:scale(1); 835 | color:rgba(0,0,0,.6); 836 | background:rgba(0,0,0,0); 837 | box-shadow:0 0 0 60px rgba(0,0,0,0) 838 | } 839 | to { 840 | -webkit-transform:scale(.95); 841 | transform:scale(.95); 842 | color:rgba(0,0,0,.7); 843 | background:rgba(0,0,0,.3); 844 | box-shadow:0 0 0 0 rgba(0,0,0,0) 845 | } 846 | } 847 | @keyframes infinite-pulse { 848 | 0% { 849 | -webkit-transform:scale(.95); 850 | transform:scale(.95); 851 | color:rgba(0,0,0,.7); 852 | background:rgba(0,0,0,.3); 853 | box-shadow:0 0 0 0 rgba(0,0,0,.3) 854 | } 855 | 70% { 856 | -webkit-transform:scale(1); 857 | transform:scale(1); 858 | color:rgba(0,0,0,.6); 859 | background:rgba(0,0,0,0); 860 | box-shadow:0 0 0 60px rgba(0,0,0,0) 861 | } 862 | to { 863 | -webkit-transform:scale(.95); 864 | transform:scale(.95); 865 | color:rgba(0,0,0,.7); 866 | background:rgba(0,0,0,.3); 867 | box-shadow:0 0 0 0 rgba(0,0,0,0) 868 | } 869 | } 870 | 871 | /*Theme buttons and cards*/ 872 | .navMenuOption-selected, 873 | .selectionCommandsPanel { 874 | background: #101010 !important; 875 | } 876 | 877 | .paper-icon-button-light:hover, 878 | .raised.homeLibraryButton:hover, 879 | .button-flat:hover, 880 | .playstatebutton-icon-played, 881 | .ratingbutton-icon-withrating, 882 | .paper-icon-button-light:hover:not(:disabled), 883 | .emby-tab-button:hover, 884 | .selectLabelFocused, 885 | .inputLabelFocused, 886 | .textareaLabelFocused, 887 | .buttonActive, 888 | .button-link{ 889 | color: rgba(120, 120, 120, 0.6) !important; 890 | } 891 | 892 | #itemDetailPage .button-link {color: inherit !important;} 893 | 894 | .listItemIcon { 895 | background: #0000 !important; 896 | } 897 | 898 | .raised, 899 | .fab, 900 | a[data-role="button"] { 901 | background: rgba(40, 40, 40, 0.8) !important; 902 | transition: all 0.2s !important; 903 | } 904 | 905 | .paper-icon-button-light:hover { 906 | background-color: rgba(0, 0, 0, 0.4) !important; 907 | } 908 | 909 | .raised:hover, 910 | .fab:hover, 911 | .navMenuOption:hover, 912 | .actionSheetMenuItem:hover { 913 | background: rgba(80, 80, 80, 0.8) !important; 914 | } 915 | 916 | 917 | /*Theme dialogues, drop downs, toast*/ 918 | .dialog, 919 | .toast { 920 | background-color: rgba(0, 0, 0, 0.8); 921 | } 922 | .actionSheetMenuItem:hover { 923 | background-color: rgba(0, 164, 220, 0.2); 924 | } 925 | .mainDrawer { 926 | background-color: rgba(0, 0, 0, 0.8); 927 | } 928 | .navMenuOption:hover { 929 | background: rgba(0, 164, 220, 0.2); 930 | } 931 | .formDialogHeader, .formDialogFooter { 932 | background-color: #101010 !important; 933 | } 934 | .formDialogHeader.formDialogHeader-clear.justify-content-center, 935 | .formDialogFooter.formDialogFooter-clear.formDialogFooter-flex, 936 | .collapseContent { 937 | background-color: #0000 !important; 938 | } 939 | 940 | /*Improve some menu alignments*/ 941 | .formDialogContent { 942 | margin-bottom: 6.2em; 943 | } 944 | .dialogContentInner { 945 | padding: .5em 1em 1em; 946 | padding-right: 1em; 947 | padding-left: 1em; 948 | } 949 | .listItem-indexnumberleft { 950 | margin: 1em; 951 | } 952 | .listItem { 953 | padding-left: 1em; 954 | } 955 | 956 | /*Tweak entry fields, checkamarks*/ 957 | .emby-input, 958 | .emby-textarea { 959 | padding: .4em .55em; 960 | } 961 | .emby-select { 962 | padding: .35em 1.9em .35em .35em; 963 | } 964 | .selectArrow { 965 | margin-top: 1.05em; 966 | } 967 | .checkboxOutline, 968 | .emby-input, 969 | .emby-textarea, 970 | .emby-select-withcolor { 971 | background: rgba(0, 0, 0, 0.2); 972 | border: 0.01em solid rgba(255, 255, 255, 0.22); 973 | } 974 | .emby-input:focus, 975 | .emby-textarea:focus, 976 | .emby-select-withcolor:focus { 977 | background: rgba(0, 0, 0, 0.5) !important; 978 | } 979 | 980 | .emby-textarea:focus, 981 | .emby-select-withcolor:focus, 982 | .emby-input:focus, 983 | .itemSelectionPanel { 984 | border: 0.01em solid rgba(40, 40, 40, 0.8) !important; 985 | } 986 | .emby-checkbox:checked + span + .checkboxOutline { 987 | background-color: rgba(20, 20, 20, 0.8) !important; 988 | border: 0.01em solid rgba(255, 255, 255, 0.22) !important; 989 | } 990 | 991 | /*Colors for loading spinner, placeholders, scroll bars*/ 992 | .mdl-spinner__layer-1 {border-color: rgba(255, 255, 255, 1);} 993 | .mdl-spinner__layer-2 {border-color: rgba(128, 128, 128, 1);} 994 | .mdl-spinner__layer-3 {border-color: rgba(40, 40, 40, 1);} 995 | .mdl-spinner__layer-4 {border-color: rgba(0, 0, 0, 1);} 996 | 997 | ::-webkit-scrollbar-track-piece { 998 | background-color: #0000; 999 | } 1000 | ::-webkit-scrollbar-corner { 1001 | background-color: #0000; 1002 | } 1003 | ::-webkit-scrollbar-thumb { 1004 | background: rgba(120,120,120,0.6) !important; 1005 | border-radius: var(--rounding); 1006 | } 1007 | 1008 | * { 1009 | scrollbar-color: rgba(120,120,120,0.6) #0000 !important; 1010 | } 1011 | 1012 | .defaultCardBackground1 { 1013 | background-color: #0a0a0a; 1014 | } 1015 | .defaultCardBackground2 { 1016 | background-color: #141414; 1017 | } 1018 | .defaultCardBackground3 { 1019 | background-color: #212121; 1020 | } 1021 | .defaultCardBackground4 { 1022 | background-color: #333333; 1023 | } 1024 | .defaultCardBackground5 { 1025 | background-color: #666666; 1026 | } 1027 | -------------------------------------------------------------------------------- /improve-performance_style.css: -------------------------------------------------------------------------------- 1 | /*Achieves similar effect without use of mask-image, foregoing the cool fade effect*/ 2 | #dashboardPage, 3 | #dashboardGeneralPage, 4 | #userProfilesPage, 5 | #devicesPage, 6 | #serverActivityPage, 7 | #liveTvStatusPage, 8 | #liveTvSettingsPage, 9 | #networkingPage, 10 | #apiKeysPage, 11 | #logPage, 12 | #notificationSettingsPage, 13 | #scheduledTasksPage, 14 | #itemDetailPage, 15 | #userImagePage, 16 | #displayPreferencesPage, 17 | #homeScreenPreferencesPage, 18 | #languagePreferencesPage, 19 | #quickConnectPreferencesPage { 20 | margin-top: 60px; 21 | padding-top: 0px !important; 22 | overflow: scroll; 23 | } 24 | 25 | @media all and (min-width: 100em){ 26 | #indexPage, 27 | #moviesPage, 28 | #tvRecommendedPage, 29 | #musicRecommendedPage { 30 | margin-top: 70px; 31 | padding-top: 0px !important; 32 | overflow: scroll; 33 | } 34 | #encodingSettingsPage, 35 | #mediaLibraryPage, 36 | #dlnaSettingsPage, 37 | #pluginsPage { 38 | margin-top: 60px; 39 | padding-top: 0px !important; 40 | overflow: scroll; 41 | } 42 | } 43 | 44 | @media all and (max-width: 100em){ 45 | #indexPage, 46 | #moviesPage, 47 | #tvRecommendedPage, 48 | #encodingSettingsPage, 49 | #mediaLibraryPage, 50 | #dlnaSettingsPage, 51 | #pluginsPage, 52 | #musicRecommendedPage { 53 | margin-top: 130px; 54 | padding-top: 0px !important; 55 | overflow: scroll; 56 | } 57 | } 58 | 59 | #dashboardPage, 60 | #dashboardGeneralPage, 61 | #userProfilesPage, 62 | #devicesPage, 63 | #serverActivityPage, 64 | #liveTvStatusPage, 65 | #liveTvSettingsPage, 66 | #networkingPage, 67 | #apiKeysPage, 68 | #logPage, 69 | #notificationSettingsPage, 70 | #scheduledTasksPage, 71 | #itemDetailPage, 72 | #indexPage, 73 | #moviesPage, 74 | #tvRecommendedPage, 75 | #encodingSettingsPage, 76 | #mediaLibraryPage, 77 | #dlnaSettingsPage, 78 | #pluginsPage, 79 | #musicRecommendedPage { 80 | mask-image: none; 81 | -webkit-mask-image: none; 82 | } 83 | -------------------------------------------------------------------------------- /jfblue_style.css: -------------------------------------------------------------------------------- 1 | @import url('https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css'); 2 | :root {--accent: 0, 164, 220;} 3 | -------------------------------------------------------------------------------- /jfpurple_style.css: -------------------------------------------------------------------------------- 1 | @import url('https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css'); 2 | :root {--accent: 98, 121, 205;} 3 | -------------------------------------------------------------------------------- /screenshots/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CTalvio/Monochromic/746f0597547ffaaaec1a1d54749fcbe594b3a325/screenshots/1.png -------------------------------------------------------------------------------- /screenshots/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CTalvio/Monochromic/746f0597547ffaaaec1a1d54749fcbe594b3a325/screenshots/2.png -------------------------------------------------------------------------------- /screenshots/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CTalvio/Monochromic/746f0597547ffaaaec1a1d54749fcbe594b3a325/screenshots/3.png -------------------------------------------------------------------------------- /screenshots/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CTalvio/Monochromic/746f0597547ffaaaec1a1d54749fcbe594b3a325/screenshots/4.png -------------------------------------------------------------------------------- /screenshots/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CTalvio/Monochromic/746f0597547ffaaaec1a1d54749fcbe594b3a325/screenshots/5.png -------------------------------------------------------------------------------- /screenshots/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CTalvio/Monochromic/746f0597547ffaaaec1a1d54749fcbe594b3a325/screenshots/6.png -------------------------------------------------------------------------------- /screenshots/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CTalvio/Monochromic/746f0597547ffaaaec1a1d54749fcbe594b3a325/screenshots/7.png -------------------------------------------------------------------------------- /screenshots/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CTalvio/Monochromic/746f0597547ffaaaec1a1d54749fcbe594b3a325/screenshots/8.png -------------------------------------------------------------------------------- /sharp_style.css: -------------------------------------------------------------------------------- 1 | :root {--rounding: 0px;} 2 | -------------------------------------------------------------------------------- /test_style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); body, h1, h2, h3, h4 { 2 | font-family: 'Quicksand', sans-serif; 3 | } 4 | 5 | :root {--rounding: 5px;} 6 | 7 | /*Narrow margins, theme main page*/ 8 | .cardBox-bottompadded { 9 | margin-bottom: 0.6em !important; 10 | } 11 | .itemsContainer > .card > .cardBox { 12 | margin-right: 0.8em; 13 | } 14 | .raised.homeLibraryButton { 15 | background: rgba(0, 0, 0, 0.3) !important; 16 | } 17 | .raised.homeLibraryButton:hover { 18 | background: rgba(0, 0, 0, 0.5) !important; 19 | } 20 | .raised.homeLibraryButton:hover {transition: filter 0.2s} 21 | .raised.homeLibraryButton {transition: filter 0.2s} 22 | .homeLibraryButton { 23 | min-width: 12em; 24 | margin: 0.4em; 25 | } 26 | 27 | /*Blur backdrops, feel free to edit the intensity of the blur/saturation/dimming*/ 28 | .backdropImage { 29 | filter: blur(60px) saturate(200%) contrast(160%) brightness(25%); 30 | } 31 | .backgroundContainer.withBackdrop { 32 | background-color: rgba(0,0,0,0); 33 | } 34 | 35 | /*Shrink and square (or round) cast thumnails*/ 36 | @media all and (min-width: 131.25em){ 37 | #castContent .card.overflowPortraitCard { 38 | width: 6.3vw !important; 39 | font-size: 90% !important; 40 | } 41 | } 42 | @media all and (min-width: 120em) and (max-width: 131.25em){ 43 | #castContent .card.overflowPortraitCard { 44 | width: 6.4vw !important; 45 | font-size: 90% !important; 46 | } 47 | } 48 | @media all and (min-width: 100em) and (max-width: 120em){ 49 | #castContent .card.overflowPortraitCard { 50 | width: 7.6vw !important; 51 | font-size: 90% !important; 52 | } 53 | } 54 | @media all and (min-width: 87.5em) and (max-width: 100em){ 55 | #castContent .card.overflowPortraitCard { 56 | width: 9.3vw !important; 57 | font-size: 90% !important; 58 | } 59 | } 60 | @media all and (min-width: 75em) and (max-width: 87.5em){ 61 | #castContent .card.overflowPortraitCard { 62 | width: 10.5vw !important; 63 | font-size: 90% !important; 64 | } 65 | } 66 | @media all and (min-width: 50em) and (max-width: 75em){ 67 | #castContent .card.overflowPortraitCard { 68 | width: 15vw !important; 69 | font-size: 90% !important; 70 | } 71 | } 72 | @media all and (min-width: 43.75em) and (max-width: 50em){ 73 | #castContent .card.overflowPortraitCard { 74 | width: 20.1vw !important; 75 | font-size: 90% !important; 76 | } 77 | } 78 | @media all and (min-width: 25em) and (max-width: 43.75em){ 79 | #castContent .card.overflowPortraitCard { 80 | width: 31.2vw !important; 81 | font-size: 90% !important; 82 | } 83 | } 84 | @media all and (max-width: 25em){ 85 | #castContent .card.overflowPortraitCard { 86 | width: 40vw !important; 87 | font-size: 90% !important; 88 | } 89 | } 90 | 91 | .cardPadder { 92 | background-color: #0000 !important; box-shadow: none !important; 93 | } 94 | 95 | /*Correct image aspect ratio behaviour, set border-radius to zero for square tiles*/ 96 | 97 | @media all and (min-width: 131.25em){ 98 | #castContent .cardScalable { 99 | width: calc(6.3vw - 0.6em) !important; 100 | height: calc(6.3vw - 0.6em) !important; 101 | } 102 | } 103 | @media all and (min-width: 120em) and (max-width: 131.25em){ 104 | #castContent .cardScalable { 105 | width: calc(6.4vw - 0.6em) !important; 106 | height: calc(6.4vw - 0.6em) !important; 107 | } 108 | } 109 | @media all and (min-width: 100em) and (max-width: 120em){ 110 | #castContent .cardScalable { 111 | width: calc(7.6vw - 0.6em) !important; 112 | height: calc(7.6vw - 0.6em) !important; 113 | } 114 | } 115 | @media all and (min-width: 87.5em) and (max-width: 100em){ 116 | #castContent .cardScalable { 117 | width: calc(9.3vw - 0.6em) !important; 118 | height: calc(9.3vw - 0.6em) !important; 119 | } 120 | } 121 | @media all and (min-width: 75em) and (max-width: 87.5em){ 122 | #castContent .cardScalable { 123 | width: calc(10.5vw - 0.6em) !important; 124 | height: calc(10.5vw - 0.6em) !important; 125 | } 126 | } 127 | @media all and (min-width: 50em) and (max-width: 75em){ 128 | #castContent .cardScalable { 129 | width: calc(15vw - 0.6em) !important; 130 | height: calc(15vw - 0.6em) !important; 131 | } 132 | } 133 | @media all and (min-width: 43.75em) and (max-width: 50em){ 134 | #castContent .cardScalable { 135 | width: calc(20.1vw - 0.6em) !important; 136 | height: calc(20.1vw - 0.6em) !important; 137 | } 138 | } 139 | @media all and (min-width: 25em) and (max-width: 43.75em){ 140 | #castContent .cardScalable { 141 | width: calc(31.2vw - 0.6em) !important; 142 | height: calc(31.2vw - 0.6em) !important; 143 | } 144 | } 145 | @media all and (max-width: 25em){ 146 | #castContent .cardScalable { 147 | width: calc(40vw - 0.6em) !important; 148 | height: calc(40vw - 0.6em) !important; 149 | } 150 | } 151 | 152 | /*Tweak series/movie/album title screen*/ 153 | .detailImageContainer .card { 154 | position:fixed; 155 | } 156 | 157 | .mainDetailButtons { 158 | font-size: 120%; 159 | } 160 | @media all and (max-width: 100em){ 161 | .mainDetailButtons { 162 | font-size: 155%; 163 | } 164 | } 165 | 166 | .detailSectionContent { 167 | max-width: 66em; 168 | } 169 | .trackSelections { 170 | max-width: 22em; 171 | } 172 | .detailLogo { 173 | display: none; 174 | } 175 | .detailPagePrimaryContainer { 176 | background: rgba(0,0,0,0) !important; 177 | } 178 | 179 | /*Remove backdrop tweaks that no longer work for 10.7.0*/ 180 | 181 | 182 | 183 | /*Size episode preview images in a more compact way*/ 184 | .listItem:hover { 185 | transition: 0.2s; background: rgba(0, 0, 0, 0.4); 186 | } 187 | .listItemImage.listItemImage-large.itemAction.lazy { 188 | transition: filter 0.2s 189 | } 190 | .listItemImageButton-icon { 191 | padding: 0; 192 | } 193 | .secondary.listItem-overview.listItemBodyText { 194 | height: 61px; 195 | margin: 0; 196 | } 197 | .listItemImageButton { 198 | margin: auto; 199 | font-size: 1.6em !important; 200 | } 201 | @media all and (min-width: 100em){ 202 | .listItemImage.listItemImage-large.itemAction.lazy { 203 | height: 110px; 204 | } 205 | .listItem-content { 206 | height: 115px; 207 | } 208 | .secondary.listItem-overview.listItemBodyText { 209 | height: 4em; 210 | margin: 0; 211 | } 212 | } 213 | @media all and (max-width: 100em){ 214 | .listItemImage.listItemImage-large.itemAction.lazy {height: 80px;} 215 | .listItem-content {height: 85px;} 216 | .secondary.listItem-overview.listItemBodyText {height: 2.5em; margin: 0;} 217 | } 218 | 219 | /*Banner transparency*/ 220 | #dashboardPage, 221 | #dashboardGeneralPage, 222 | #userProfilesPage, 223 | #devicesPage, 224 | #serverActivityPage, 225 | #liveTvStatusPage, 226 | #liveTvSettingsPage, 227 | #networkingPage, 228 | #apiKeysPage, 229 | #logPage, 230 | #notificationSettingsPage, 231 | #scheduledTasksPage, 232 | #itemDetailPage { 233 | mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px); 234 | -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px); 235 | overflow: scroll; 236 | } 237 | 238 | @media all and (min-width: 100em){ 239 | #indexPage, 240 | #moviesPage, 241 | #tvRecommendedPage, 242 | #musicRecommendedPage { 243 | mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 70px, rgb(0, 0, 0) 120px); 244 | -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 70px, rgb(0, 0, 0) 120px); 245 | overflow: scroll; 246 | } 247 | #encodingSettingsPage, 248 | #mediaLibraryPage, 249 | #dlnaSettingsPage, 250 | #pluginsPage { 251 | mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px); 252 | -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px); 253 | overflow: scroll; 254 | } 255 | } 256 | 257 | @media all and (max-width: 100em){ 258 | #indexPage, 259 | #moviesPage, 260 | #tvRecommendedPage, 261 | #encodingSettingsPage, 262 | #mediaLibraryPage, 263 | #dlnaSettingsPage, 264 | #pluginsPage, 265 | #musicRecommendedPage { 266 | mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px); 267 | -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 135px); 268 | overflow: scroll; 269 | margin-top: 30px; 270 | } 271 | } 272 | 273 | @media all and (max-width: 100em){ 274 | #indexPage, 275 | #moviesPage, 276 | #tvRecommendedPage, 277 | #encodingSettingsPage, 278 | #mediaLibraryPage, 279 | #dlnaSettingsPage, 280 | #pluginsPage, 281 | #musicRecommendedPage { 282 | mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px); 283 | -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px); 284 | overflow: scroll; 285 | margin-top: 20px; 286 | } 287 | } 288 | 289 | /*Top "task bar" make transparent and enlarge text*/ 290 | .skinHeader { 291 | background: none !important; 292 | background-color: rgba(0, 0, 0, 0) !important; 293 | } 294 | .headerTabs.sectionTabs { 295 | text-size-adjust: 110%; 296 | font-size: 110%; 297 | } 298 | .pageTitle { 299 | margin-top: auto; 300 | margin-bottom: auto; 301 | } 302 | .emby-tab-button { 303 | padding: 1.75em 1.7em; 304 | } 305 | 306 | /*Narrow the login form, size according to display size (bigger on mobile)*/ 307 | #loginPage .readOnlyContent, 308 | #loginPage form { 309 | max-width: 22em; 310 | } 311 | 312 | /*Hide "please login" text, margin is to prevent login form moving too far up*/ 313 | #loginPage h1 { 314 | display: none 315 | } 316 | #loginPage .padded-left.padded-right.padded-bottom-page { 317 | margin-top: 50px 318 | } 319 | 320 | /*Hide "manual" and "forgot" buttons}*/ 321 | #loginPage .raised.cancel.block.btnForgotPassword.emby-button { 322 | display: none 323 | } 324 | 325 | /*Login background*/ 326 | #loginPage { 327 | background: url(https://i.imgur.com/9vL4iNf.png) !important; 328 | background-size: cover !important; 329 | } 330 | 331 | /*Make watched icon, footer on chapter thumnails (and other things), and count indicator dark and transparent*/ 332 | .innerCardFooter, 333 | .countIndicator, 334 | .playedIndicator { 335 | background: rgba(0,0,0,0.4); 336 | box-shadow: none; 337 | } 338 | .countIndicator { 339 | box-shadow: none; 340 | } 341 | 342 | /*Rounded corners on pretty much everything*/ 343 | .formDialogHeader { 344 | border-top-left-radius: var(--rounding); 345 | border-top-right-radius: var(--rounding); 346 | } 347 | .formDialogFooter { 348 | border-bottom-left-radius: var(--rounding); 349 | border-bottom-right-radius: var(--rounding); 350 | } 351 | .cardOverlayContainer { 352 | border-radius: var(--rounding) !important; 353 | } 354 | .primaryImageWrapper > img, 355 | .toast, 356 | .paperList, 357 | .cardContent, 358 | .sessionNowPlayingInnerContent, 359 | .listItem:hover, 360 | .cardImage, 361 | .fab, 362 | .raised, 363 | .multiSelectCheckboxOutline, 364 | .itemSelectionPanel, 365 | .cardContent-button, 366 | .cardContent-shadow, 367 | .itemDetailImage, 368 | .cardOverlayButton-hover, 369 | .cardImageContainer, 370 | .cardPadder, 371 | .listItemImage, 372 | .listItemImageButton, 373 | .listItemButton, 374 | .headerButton, 375 | .paper-icon-button-light, 376 | .innerCardFooter, 377 | .blurhash-canvas, 378 | .dialog, 379 | .countIndicator, 380 | .playedIndicator, 381 | .listItemIcon, 382 | .listItem-border, 383 | .button-flat, 384 | .visualCardBox, 385 | .checkboxOutline, 386 | .emby-select-withcolor, 387 | .chapterThumbTextContainer, 388 | .chapterThumbContainer, 389 | .chapterThumb, 390 | .emby-input, 391 | .emby-textarea, 392 | .emby-select-withcolor, 393 | .nowPlayingPageImage, 394 | .upNextDialog-poster-img, 395 | .cardOverlayButtonIcon { 396 | border-radius: var(--rounding) !important; 397 | } 398 | .osdPoster img { 399 | border-radius: var(--rounding); border: none; 400 | } 401 | .mdl-slider::-moz-range-thumb { 402 | border-radius: var(--rounding); 403 | } 404 | .mdl-slider::-ms-thumb { 405 | border-radius: var(--rounding); 406 | } 407 | .mdl-slider::-webkit-slider-thumb { 408 | border-radius: var(--rounding); 409 | } 410 | 411 | div[data-role="controlgroup"] a[data-role="button"]:first-child { 412 | border-bottom-left-radius: var(--rounding); 413 | border-top-left-radius: var(--rounding); 414 | } 415 | div[data-role="controlgroup"] a[data-role="button"]:last-child { 416 | border-bottom-right-radius: var(--rounding); 417 | border-top-right-radius: var(--rounding); 418 | } 419 | 420 | /*Homepage modifications, transparent footerplayer and fixed sectiontitles*/ 421 | .appfooter { 422 | background: rgba(0,0,0,0.9); 423 | } 424 | 425 | /*Modify subtitle settings page*/ 426 | .subtitleappearance-preview { 427 | background: linear-gradient(140deg,#444,#111) !important; 428 | } 429 | 430 | /*Fix weird shevron off centering*/ 431 | .layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { 432 | padding-top:0em; 433 | } 434 | .sectionTitle { 435 | margin-left: .4em !important; 436 | margin-top: .2em !important; 437 | margin-bottom: .2em !important; 438 | } 439 | 440 | /*For 10.7.0*/ 441 | .sectionTitleTextButton > .material-icons { 442 | margin: 0 !important; 443 | } 444 | 445 | /*Fix the UI shifting around*/ 446 | .nowPlayingBarCurrentTime { 447 | width: 6em; 448 | } 449 | /*Fix top right user icon when using a profile image*/ 450 | .headerUserButtonRound { 451 | border-radius: 50px !important; 452 | } 453 | 454 | /*Modified progress bar, play and item menu buttons*/ 455 | .innerCardFooter.fullInnerCardFooter.innerCardFooterClear { 456 | border-radius: 0px !important; 457 | background: rgba(0,0,0,0.7); 458 | } 459 | 460 | .itemProgressBar { 461 | height: 2000em; 462 | background: #0000; 463 | } 464 | .playbackProgress>div { 465 | background-color: rgba(255,255,255,0.75); 466 | } 467 | .transcodingProgress>div, .itemProgressBarForeground { 468 | background-color: rgba(255,255,255,0.3); 469 | } 470 | 471 | .innerCardFooter.fullInnerCardFooter.innerCardFooterClear { 472 | border-radius: 0px !important; 473 | background: rgba(0,0,0,0); 474 | } 475 | 476 | /*Accommodate mobile and set positions, I think*/ 477 | .cardIndicators, 478 | .listItemIndicators { 479 | right: 0.3em; 480 | top: 0.3em; 481 | } 482 | 483 | @media all and (min-width: 70em){ 484 | .cardOverlayFab-primary { 485 | background-color: #00000000; 486 | } 487 | .cardOverlayButtonIcon { 488 | background-color: #00000000 !important; 489 | } 490 | .cardOverlayContainer { 491 | background-color: rgba(0, 0, 0, 0.7); 492 | } 493 | } 494 | @media all and (max-width: 70em){ 495 | .cardOverlayButtonIcon { 496 | background-color: rgba(0, 0, 0, 0.5) !important; 497 | } 498 | .cardOverlayButton { 499 | padding: 0.3em; 500 | } 501 | } 502 | 503 | /*ANIMATIONS*/ 504 | /*Fade as images load*/ 505 | .blurhash-canvas { 506 | transition: 0.2s; 507 | } 508 | .cardImageContainer { 509 | transition: 0.7s; 510 | } 511 | 512 | /*Hover background for buttons*/ 513 | .button-flat:hover { 514 | background: rgba(0,0,0,0.4); 515 | } 516 | .button-flat { 517 | padding: .5em !important; 518 | margin: .2em !important; 519 | } 520 | 521 | /*Some themeing for the dashboard*/ 522 | .visualCardBox { 523 | box-shadow: none; 524 | } 525 | 526 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { 527 | background: rgba(120, 120, 120, 0.6); 528 | } 529 | .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { 530 | background: white; 531 | } 532 | 533 | .dashboardSection h3 { 534 | margin-left: 0.5em; 535 | } 536 | .sessionCardFooter { 537 | border: none; 538 | } 539 | .paperList, 540 | .visualCardBox { 541 | background-color: rgba(0, 0, 0, 0.5); 542 | } 543 | .listItem-border { 544 | border-color: rgba(255, 255, 255, 0) !important; 545 | } 546 | fieldset { 547 | border: 1px solid rgba(40, 40, 40, 0.8); 548 | border-radius: 0.4em; 549 | } 550 | 551 | /*Theme the library scan progress bar*/ 552 | progress { 553 | background: rgba(0, 0, 0, 0.5) !important; 554 | border-radius: var(--rounding); 555 | border: 1px solid rgba(255, 255, 255, 0.22); 556 | } 557 | progress::-webkit-progress-bar { 558 | background: rgba(0, 0, 0, 0.5) !important; 559 | border-radius: var(--rounding); 560 | border: 0px solid rgba(255, 255, 255, 0.22); 561 | } 562 | progress::-moz-progress-bar { 563 | background-color: rgba(255,255,255,0.75); 564 | border-radius: var(--rounding); 565 | } 566 | progress::-webkit-progress-value { 567 | background-color: rgba(255,255,255,0.75); 568 | border-radius: var(--rounding); 569 | } 570 | #divRunningTasks span { 571 | color: rgba(255,255,255,0.75) !important; 572 | } 573 | 574 | .taskProgressOuter, 575 | .taskProgressInner { 576 | border-radius: var(--rounding) !important; 577 | } 578 | .taskProgressOuter { 579 | background: rgba(0, 0, 0, 0.5) !important; 580 | border: 1px solid rgba(255, 255, 255, 0.22); 581 | } 582 | .taskProgressInner { 583 | background: rgba(255,255,255,0.75) !important; 584 | } 585 | #scheduledTasksPage span { 586 | color: rgba(255,255,255,0.75) !important; 587 | } 588 | 589 | /*Shrink the mouseover chapter image when scrobbling*/ 590 | .chapterThumb { 591 | height: 14vh; 592 | min-width: 14vh; 593 | } 594 | .chapterThumbText { 595 | font-size: 1em; 596 | } 597 | .sliderBubble { 598 | background: #0000; 599 | } 600 | 601 | /*Color theming*/ 602 | 603 | /*Theme process progress ring*/ 604 | .progressring-spiner { 605 | border-color: rgba(var(--accent)); 606 | border-width: .35em; 607 | } 608 | .progressring { 609 | margin: .4em; 610 | } 611 | .progressring-bg { 612 | display: none; 613 | } 614 | 615 | /*Affects blurhash to remove the saturated colors to fit overall look*/ 616 | .blurhash-canvas { 617 | filter: opacity(60%) saturate(60%); 618 | } 619 | 620 | /*Theme user setting tab buttons*/ 621 | div[data-role="controlgroup"] a.ui-btn-active { 622 | background: rgba(0, 0, 0, 0.5) !important; 623 | color: white !important; 624 | } 625 | a[data-role="button"]:hover { 626 | background: rgba(80, 80, 80, 0.8) !important; 627 | } 628 | 629 | div[data-role=controlgroup] a[data-role=button]+a[data-role=button] { 630 | margin: 0 !important; 631 | } 632 | 633 | /*Rating star, normally yellow*/ 634 | .starIcon { 635 | color: white; 636 | } 637 | 638 | 639 | /*Theme media player*/ 640 | .mdl-slider-background-lower { 641 | background-color: rgb(255, 255, 255); 642 | } 643 | .mdl-slider::-moz-range-thumb { 644 | background: rgb(255, 255, 255); 645 | } 646 | .mdl-slider::-ms-thumb { 647 | background: rgb(255, 255, 255); 648 | } 649 | .mdl-slider::-webkit-slider-thumb { 650 | background: rgb(255, 255, 255); 651 | } 652 | .iconOsdProgressInner { 653 | background: rgb(255, 255, 255); 654 | } 655 | 656 | .osdHeader { 657 | linear-gradient(180deg,rgba(16,16,16,.75),rgba(16,16,16,0)); 658 | } 659 | 660 | .nowPlayingPageImage { 661 | border: none; 662 | } 663 | 664 | .upNextDialog-countdownText { 665 | color: rgba(120, 120, 120, 0.6); 666 | } 667 | 668 | /*Theme buttons and cards*/ 669 | .navMenuOption-selected, 670 | .selectionCommandsPanel { 671 | background: #101010 !important; 672 | } 673 | 674 | .paper-icon-button-light:hover, 675 | .raised.homeLibraryButton:hover, 676 | .button-flat:hover, 677 | .playstatebutton-icon-played, 678 | .ratingbutton-icon-withrating, 679 | .paper-icon-button-light:hover:not(:disabled), 680 | .emby-tab-button:hover, 681 | .selectLabelFocused, 682 | .inputLabelFocused, 683 | .textareaLabelFocused, 684 | .buttonActive, 685 | .button-link{ 686 | color: rgba(120, 120, 120, 0.6) !important; 687 | } 688 | 689 | #itemDetailPage .button-link {color: inherit !important;} 690 | 691 | .listItemIcon, 692 | .cardImage, 693 | .blurhashed { 694 | background-color: #0000 !important; 695 | } 696 | 697 | .raised, 698 | .fab, 699 | a[data-role="button"] { 700 | background: rgba(40, 40, 40, 0.8) !important; 701 | transition: all 0.2s !important; 702 | } 703 | 704 | .paper-icon-button-light:hover { 705 | background-color: rgba(0, 0, 0, 0.4) !important; 706 | } 707 | 708 | .raised:hover, 709 | .fab:hover, 710 | .navMenuOption:hover, 711 | .actionSheetMenuItem:hover { 712 | background: rgba(80, 80, 80, 0.8) !important; 713 | } 714 | 715 | 716 | /*Theme dialogues, drop downs, toast*/ 717 | .dialog, 718 | .toast { 719 | background-color: rgba(0, 0, 0, 0.8); 720 | } 721 | .actionSheetMenuItem:hover { 722 | background-color: rgba(0, 164, 220, 0.2); 723 | } 724 | .mainDrawer { 725 | background-color: rgba(0, 0, 0, 0.8); 726 | } 727 | .navMenuOption:hover { 728 | background: rgba(0, 164, 220, 0.2); 729 | } 730 | .formDialogHeader, .formDialogFooter { 731 | background-color: #101010 !important; 732 | } 733 | .formDialogHeader.formDialogHeader-clear.justify-content-center, 734 | .formDialogFooter.formDialogFooter-clear.formDialogFooter-flex, 735 | .collapseContent { 736 | background-color: #0000 !important; 737 | } 738 | 739 | /*Improve some menu alignments*/ 740 | .formDialogContent { 741 | margin-bottom: 6.2em; 742 | } 743 | .dialogContentInner { 744 | padding: .5em 1em 1em; 745 | padding-right: 1em; 746 | padding-left: 1em; 747 | } 748 | .listItem-indexnumberleft { 749 | margin: 1em; 750 | } 751 | .listItem { 752 | padding-left: 1em; 753 | } 754 | 755 | /*Tweak entry fields, checkamarks*/ 756 | .selectContainer { 757 | margin-right: 1em !important; 758 | } 759 | .checkboxOutline, 760 | .emby-input, 761 | .emby-textarea, 762 | .emby-select-withcolor { 763 | background: rgba(0, 0, 0, 0.2); 764 | border: 0.01em solid rgba(255, 255, 255, 0.22); 765 | } 766 | .emby-input:focus, 767 | .emby-textarea:focus, 768 | .emby-select-withcolor:focus { 769 | background: rgba(0, 0, 0, 0.5) !important; 770 | } 771 | 772 | .emby-textarea:focus, 773 | .emby-select-withcolor:focus, 774 | .emby-input:focus, 775 | .itemSelectionPanel { 776 | border: 0.01em solid rgba(40, 40, 40, 0.8) !important; 777 | } 778 | .emby-checkbox:checked + span + .checkboxOutline { 779 | background-color: rgba(20, 20, 20, 0.8) !important; 780 | border: 0.01em solid rgba(255, 255, 255, 0.22) !important; 781 | } 782 | 783 | /*Colors for loading spinner, placeholders, scroll bars*/ 784 | .mdl-spinner__layer-1 {border-color: rgba(255, 255, 255, 1);} 785 | .mdl-spinner__layer-2 {border-color: rgba(128, 128, 128, 1);} 786 | .mdl-spinner__layer-3 {border-color: rgba(40, 40, 40, 1);} 787 | .mdl-spinner__layer-4 {border-color: rgba(0, 0, 0, 1);} 788 | 789 | ::-webkit-scrollbar-track-piece { 790 | background-color: #0000; 791 | } 792 | ::-webkit-scrollbar-corner { 793 | background-color: #0000; 794 | } 795 | ::-webkit-scrollbar-thumb { 796 | background: rgba(120,120,120,0.6) !important; 797 | border-radius: var(--rounding); 798 | } 799 | 800 | * { 801 | scrollbar-color: rgba(120,120,120,0.6) #0000 !important; 802 | } 803 | 804 | .defaultCardBackground1 { 805 | background-color: #0d0d0d80; 806 | } 807 | .defaultCardBackground2 { 808 | background-color: #4d4d4d80; 809 | } 810 | .defaultCardBackground3 { 811 | background-color: #1a1a1a80; 812 | } 813 | .defaultCardBackground4 { 814 | background-color: #33333380; 815 | } 816 | .defaultCardBackground5 { 817 | background-color: #66666680; 818 | } 819 | --------------------------------------------------------------------------------