├── images ├── coral.png ├── login.png ├── snow.png ├── details.png ├── movies.png ├── scyfin.png ├── seafoam.png ├── dashboard.png ├── homepage.png ├── details-oled.png ├── scyfin-full.png ├── homepage-oled.png ├── details-backdrops.png ├── homepage-backdrops.png ├── install-client-base.png ├── install-server-base.png ├── install-client-options.png ├── install-server-options.png ├── scyfin.svg └── scyfin-full.svg ├── CSS ├── theme-seafoam.css ├── theme-coral.css ├── theme-snow.css ├── theme-oled.css ├── disable-static-drawer.css └── scyfin-theme.css ├── README.md └── LICENSE /images/coral.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/coral.png -------------------------------------------------------------------------------- /images/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/login.png -------------------------------------------------------------------------------- /images/snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/snow.png -------------------------------------------------------------------------------- /images/details.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/details.png -------------------------------------------------------------------------------- /images/movies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/movies.png -------------------------------------------------------------------------------- /images/scyfin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/scyfin.png -------------------------------------------------------------------------------- /images/seafoam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/seafoam.png -------------------------------------------------------------------------------- /images/dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/dashboard.png -------------------------------------------------------------------------------- /images/homepage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/homepage.png -------------------------------------------------------------------------------- /images/details-oled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/details-oled.png -------------------------------------------------------------------------------- /images/scyfin-full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/scyfin-full.png -------------------------------------------------------------------------------- /images/homepage-oled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/homepage-oled.png -------------------------------------------------------------------------------- /images/details-backdrops.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/details-backdrops.png -------------------------------------------------------------------------------- /images/homepage-backdrops.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/homepage-backdrops.png -------------------------------------------------------------------------------- /images/install-client-base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/install-client-base.png -------------------------------------------------------------------------------- /images/install-server-base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/install-server-base.png -------------------------------------------------------------------------------- /images/install-client-options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/install-client-options.png -------------------------------------------------------------------------------- /images/install-server-options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/HEAD/images/install-server-options.png -------------------------------------------------------------------------------- /CSS/theme-seafoam.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-r: 147; 3 | --primary-g: 215; 4 | --primary-b: 182; 5 | --primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0); 6 | --secondary-accent-color: #93D7B620; 7 | } -------------------------------------------------------------------------------- /CSS/theme-coral.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-r: 234; 3 | --primary-g: 112; 4 | --primary-b: 112; 5 | --primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0); 6 | --secondary-accent-color: rgba(234, 112, 112, 0.2); 7 | } -------------------------------------------------------------------------------- /CSS/theme-snow.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-r: 232; 3 | --primary-g: 236; 4 | --primary-b: 239; 5 | --primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0); 6 | --secondary-accent-color: rgba(232, 236, 239, 0.2); 7 | 8 | /* Alternate accents*/ 9 | --primary-alt1: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.85); 10 | --primary-alt2: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.7); 11 | --primary-alt3: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.55); 12 | --primary-alt4: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.4); 13 | --primary-alt5: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.25); 14 | } 15 | 16 | .layout-desktop .button-submit, 17 | .layout-desktop .checkboxIcon, 18 | .layout-desktop .countIndicator { 19 | color: var(--secondary-background-color) !important; 20 | } 21 | 22 | #skipIntro .emby-button:hover { 23 | color: #000 !important; 24 | } -------------------------------------------------------------------------------- /images/scyfin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 28 | 31 | 32 | 34 | 38 | 44 | σ 56 | 57 | 58 | -------------------------------------------------------------------------------- /CSS/theme-oled.css: -------------------------------------------------------------------------------- 1 | /* Variables */ 2 | :root { 3 | --primary-background-color: #000; 4 | --secondary-background-color: #101010; 5 | --tertiary-background-color: #181818; 6 | --outline-color: #252525; 7 | --primary-background-transparent: rgba(35,35,35,0.5); 8 | --secondary-background-transparent: rgba(0,0,0,0.6); 9 | } 10 | 11 | .fab, 12 | .raised, 13 | .collapseContent, 14 | .formDialogFooter:not(.formDialogFooter-clear), 15 | .formDialogHeader:not(.formDialogHeader-clear), 16 | .paperList, 17 | .visualCardBox { 18 | background: var(--secondary-background-color) !important; 19 | } 20 | 21 | .checkboxList.paperList { 22 | background: var(--primary-background-color) !important; 23 | border: 2px solid var(--outline-color) !important; 24 | } 25 | 26 | .MuiPaper-root.MuiPopover-paper { 27 | background: var(--tertiary-background-color) !important; 28 | } 29 | 30 | .button-submit { 31 | background: var(--secondary-accent-color) !important; 32 | color: var(--primary-accent-color) !important; 33 | } 34 | 35 | .emby-checkbox:checked + span + .checkboxOutline { 36 | background: var(--secondary-accent-color) !important; 37 | border-color: var(--secondary-accent-color) !important; 38 | } 39 | .checkboxIcon { 40 | color: var(--primary-accent-color) 41 | } 42 | 43 | .layout-desktop .detailSectionContent, 44 | .trackSelections, 45 | .layout-desktop .detailsGroupItem, 46 | .layout-desktop .localnav { 47 | background: var(--primary-background-color) !important; 48 | border: 2px solid var(--outline-color) !important; 49 | } 50 | 51 | .listItem:hover { 52 | background: var(--secondary-background-color) !important; 53 | } 54 | 55 | select, 56 | textarea, 57 | input:not(.mdl-slider) { 58 | background: var(--primary-background-color) !important; 59 | border: 2px solid var(--outline-color) !important; 60 | } 61 | 62 | .navMenuOption:hover:not(.navMenuOption-selected) { 63 | background: var(--tertiary-background-color) !important; 64 | } 65 | 66 | .emby-checkbox:focus:not(:checked) + span + .checkboxOutline { 67 | border-color: var(--secondary-accent-color) !important; 68 | } 69 | .checkboxOutline { 70 | border-color: var(--outline-color) !important; 71 | } -------------------------------------------------------------------------------- /images/scyfin-full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 29 | 34 | 35 | 37 | 41 | 47 | σ 59 | scyfin 70 | 71 | 72 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | scyfin logo 2 | 3 | ### **Modern CSS theme for Jellyfin with support for backdrops and custom accent colors** 4 | 5 | [Go to installation](#installation) 6 | 7 | --- 8 | 9 | ### **Scyfin Base Theme** 10 | Jellyfin 10.11.X and above 11 | ``` 12 | @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css'); 13 | ``` 14 | 15 | Jellyfin 10.10.X and lower 16 | ``` 17 | @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.4.17/CSS/scyfin-theme.css'); 18 | ``` 19 | 20 | homepage 21 | homepage-backdrops 22 | details 23 | details-backdrops 24 | movies 25 | login 26 | 27 | --- 28 | 29 | ### **Options (Add these below the base theme)** 30 | ### Disable static left drawer 31 | ``` 32 | @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css'); 33 | ``` 34 | 35 | --- 36 | 37 | ### **Themes:** 38 | ### Seafoam 39 | ``` 40 | @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-seafoam.css'); 41 | ``` 42 | seafoam-theme 43 | 44 | ### Coral 45 | ``` 46 | @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css'); 47 | ``` 48 | coral-theme 49 | 50 | ### Snow 51 | ``` 52 | @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css'); 53 | ``` 54 | snow-theme 55 | 56 | ### OLED 57 | ``` 58 | @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-oled.css'); 59 | ``` 60 | homepage-oled 61 | details-oled 62 | 63 | --- 64 | 65 | ### **Installation:** 66 | 67 | --- 68 | 69 | **Server-wide install:** 70 | * Click the hamburger icon (Top left) 71 | * Navigate to "Dashboard" (If you don't see this, make sure you are signed in to your admin account) 72 | * Navigate to "Branding" 73 | * Near the bottom, under "Custom CSS code", paste the `@import url` for the base Scyfin theme 74 | * Example: 75 | * install-server-base 76 | * Optional - Paste the `@import url` for any options / themes you may want 77 | * Example: 78 | * install-server-options 79 | * Click "Save" 80 | 81 | --- 82 | 83 | **Single client install:** 84 | * Click the hamburger icon (Top left) 85 | * Navigate to "Settings" 86 | * Navigate to "Display" 87 | * Near the middle, under "Custom CSS code", paste the `@import url` for the base Scyfin theme 88 | * Note - 89 | * If there is any server-wide custom CSS, you may want to enable "Disable server-provided custom CSS code", as the two themes WILL interfere with each other 90 | * Example: 91 | * install-client-base 92 | * Optional - Paste the `@import url` for any options / themes you may want 93 | * Example: 94 | * install-client-options 95 | * Click "Save" 96 | -------------------------------------------------------------------------------- /CSS/disable-static-drawer.css: -------------------------------------------------------------------------------- 1 | /* Reset size of Jellyfin logo */ 2 | .layout-desktop .pageTitleWithLogo { 3 | height: 30px !important; 4 | width: 100px !important; 5 | margin: 0 1em 0 .5em !important; 6 | } 7 | [dir="ltr"] .pageTitle { 8 | margin: 0 1em 0 .5em !important; 9 | } 10 | 11 | /* Un-static left drawer */ 12 | .layout-desktop .mainDrawer { 13 | left: -320px !important; 14 | z-index: 1099 !important; 15 | border-top-right-radius : var(--rounded-cards) !important; 16 | border-bottom-right-radius : var(--rounded-cards) !important; 17 | background: var(--secondary-background-color) !important; 18 | backdrop-filter: none !important; 19 | } 20 | .layout-desktop:has(.backgroundContainer.withBackdrop) .mainDrawer { 21 | width: 275px !important; 22 | background-color: var(--primary-background-transparent) !important; 23 | backdrop-filter: blur(var(--blur)) !important; 24 | } 25 | @supports not selector(:has(*)) { 26 | .layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer { 27 | background: var(--secondary-background-color) !important; 28 | backdrop-filter: none !important; 29 | } 30 | .layout-desktop #itemDetailPage.noBackdropTransparency::after { 31 | display: none !important; 32 | } 33 | } 34 | 35 | /* Lower drawer buttons */ 36 | .layout-desktop .mainDrawer-scrollContainer { 37 | margin-top: 15px !important; 38 | } 39 | 40 | /* Shift content back to the left */ 41 | .layout-desktop .libraryPage { 42 | margin-left: 0px !important; 43 | } 44 | /* Fix for Jellyfin Media Player */ 45 | .quickConnectSettingsContainer { 46 | margin-left: 0px !important; 47 | } 48 | 49 | /* Add transition back */ 50 | .layout-desktop .touch-menu-la.transition { 51 | transition: transform .24s ease-out,left .26s ease-out,-webkit-transform .24s ease-out !important; 52 | } 53 | 54 | /* Show hamburger button */ 55 | .layout-desktop body:not(.hideMainDrawer) .mainDrawerButton { 56 | display: inline-flex !important; 57 | } 58 | 59 | /* Re-center header buttons */ 60 | .layout-desktop .headerTabs { 61 | margin-left: 0px !important; 62 | } 63 | 64 | /* Re-enable home button */ 65 | .layout-desktop body:not(.hideMainDrawer) .skinHeader:not(.noHomeButtonHeader) .headerHomeButton { 66 | display: block !important; 67 | } 68 | 69 | /* Fix for scroll menus on home page */ 70 | .emby-scroller { 71 | margin-right: 3.3% !important; 72 | } 73 | 74 | /* Background for top left buttons */ 75 | .layout-desktop body:not(.hideMainDrawer) .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) { 76 | padding: 2px !important; 77 | top: -3px !important; 78 | background-color: var(--primary-background-transparent) !important; 79 | border-radius: 50px !important; 80 | backdrop-filter: blur(var(--blur)) !important; 81 | } 82 | /* Fix for JMP */ 83 | @supports not selector(:has(*)) { 84 | .layout-desktop body:not(.hideMainDrawer) .headerLeft { 85 | padding: 2px !important; 86 | top: -3px !important; 87 | background-color: var(--primary-background-transparent) !important; 88 | border-radius: 50px !important; 89 | backdrop-filter: blur(var(--blur)) !important; 90 | } 91 | } 92 | .headerLeft { 93 | flex-grow: 0 !important; 94 | -webkit-flex-grow: 0 !important; 95 | } 96 | .headerRight { 97 | position: absolute !important; 98 | right: 12px !important; 99 | } 100 | 101 | /* Music Player */ 102 | .layout-desktop .appfooter { 103 | margin-left: 15px !important; 104 | } 105 | 106 | 107 | 108 | /* Plugin support */ 109 | 110 | /* Media Bar */ 111 | .layout-desktop #slides-container { 112 | margin: 125px 50px 0 50px !important; 113 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /CSS/scyfin-theme.css: -------------------------------------------------------------------------------- 1 | /* Variables */ 2 | :root { 3 | --primary-r: 0; 4 | --primary-g: 164; 5 | --primary-b: 220; 6 | --primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0); 7 | --secondary-accent-color: #00a4dc20; 8 | --primary-background-color: #101010; 9 | --secondary-background-color: #181818; 10 | --primary-background-transparent: rgba(35,35,35,0.5); 11 | --secondary-background-transparent: rgba(0,0,0,0.6); 12 | --tertiary-background-transparent: rgba(35,35,35,0.85); 13 | --rounded-cards: 15px; 14 | --blur: 10px; 15 | 16 | /* Alternate accents*/ 17 | --primary-alt1: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 1); 18 | --primary-alt2: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.85); 19 | --primary-alt3: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.7); 20 | --primary-alt4: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.55); 21 | --primary-alt5: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.4); 22 | } 23 | 24 | /* Setting accent color variable */ 25 | .emby-checkbox:checked + span + .checkboxOutline, 26 | .selectionCommandsPanel, 27 | .countIndicator, 28 | progress[aria-valuenow]:before { 29 | background: var(--primary-accent-color) !important; 30 | } 31 | progress::-moz-progress-bar { 32 | background: var(--primary-accent-color) !important; 33 | } 34 | progress::-webkit-progress-value { 35 | background: var(--primary-accent-color) !important; 36 | } 37 | .emby-checkbox:checked + span + .checkboxOutline, 38 | .emby-checkbox:focus:not(:checked) + span + .checkboxOutline, 39 | .emby-input:focus, 40 | .emby-textarea:focus, 41 | .emby-select-withcolor:focus, 42 | .mdl-spinner__layer-1, 43 | .mdl-spinner__layer-2, 44 | .mdl-spinner__layer-3, 45 | .mdl-spinner__layer-4, 46 | .progressring-spiner { 47 | border-color: var(--primary-accent-color) !important; 48 | } 49 | .page:not(.itemDetailPage) .button-link, 50 | .selectLabelFocused, 51 | .textareaLabelFocused, 52 | .inputLabelFocused, 53 | .emby-tab-button:hover, 54 | .metadataSidebarIcon, 55 | .upNextDialog-countdownText, 56 | .listItemImageButton:hover, 57 | .button-flat:hover, 58 | #divRunningTasks span { 59 | color: var(--primary-accent-color) !important; 60 | } 61 | @media (hover: hover) and (pointer: fine) { 62 | .paper-icon-button-light:hover:not(:disabled) { 63 | color: var(--primary-accent-color) !important; 64 | background-color: var(--secondary-accent-color) !important; 65 | } 66 | } 67 | /* Dynamic colors for default cards */ 68 | .defaultCardBackground1 { 69 | background-color: var(--primary-alt1) !important; 70 | } 71 | .defaultCardBackground2 { 72 | background-color: var(--primary-alt2) !important; 73 | } 74 | .defaultCardBackground3 { 75 | background-color: var(--primary-alt3) !important; 76 | } 77 | .defaultCardBackground4 { 78 | background-color: var(--primary-alt4) !important; 79 | } 80 | .defaultCardBackground5 { 81 | background-color: var(--primary-alt5) !important; 82 | } 83 | /* Background colors */ 84 | .noBackdropTransparency .detailPagePrimaryContainer, 85 | .noBackdropTransparency .detailPageSecondaryContainer { 86 | background-color: var(--primary-background-color) !important; 87 | } 88 | 89 | /* Increase size of Jellyfin logo */ 90 | .layout-desktop .pageTitleWithLogo { 91 | margin-left: 25px !important; 92 | height: 40px !important; 93 | } 94 | 95 | /* Fix for empty header with padding */ 96 | [dir="ltr"] .pageTitle:not(.pageTitleWithLogo):empty { 97 | margin: 0 !important; 98 | } 99 | 100 | /* Static left drawer */ 101 | .layout-desktop .mainDrawer { 102 | left: 0 !important; 103 | top: 0 !important; 104 | width: 250px !important; 105 | /* Modified background color */ 106 | background: var(--secondary-background-color) !important; 107 | /* Move drawer behind header */ 108 | z-index: 998 !important; 109 | } 110 | /* Lower drawer buttons */ 111 | .layout-desktop .mainDrawer-scrollContainer { 112 | margin-top: 95px !important; 113 | margin-left: 10px !important; 114 | } 115 | .layout-mobile .mainDrawer-scrollContainer { 116 | margin-top: 15px !important; 117 | } 118 | /* Shift content to the right */ 119 | .layout-desktop .libraryPage { 120 | margin-left: 250px !important; 121 | } 122 | /* Fix for Jellyfin Media Player */ 123 | .quickConnectSettingsContainer { 124 | margin-left: 250px !important; 125 | } 126 | /* Hide transition on page load */ 127 | .layout-desktop .touch-menu-la.transition { 128 | transition: none !important; 129 | } 130 | /* Hide hamburger button */ 131 | .layout-desktop .mainDrawerButton { 132 | display: none !important; 133 | } 134 | /* Hide home button */ 135 | .layout-desktop .headerHomeButton { 136 | display: none !important; 137 | } 138 | /* Fix for video player and login page */ 139 | .layout-desktop .hide-scroll .mainDrawer, 140 | .layout-desktop .hideMainDrawer .mainDrawer { 141 | left: -320px !important; 142 | } 143 | /* Fix for collection items misalignment */ 144 | .layout-desktop .collectionItems .collectionItemsContainer { 145 | padding-left: 0% !important; 146 | } 147 | .layout-desktop .collectionItems .sectionTitleContainer { 148 | padding-left: 0% !important; 149 | } 150 | /* Dynamic buttons */ 151 | .layout-desktop .navMenuOption:hover:not(.navMenuOption-selected) { 152 | transform: scale(1.05) !important; 153 | } 154 | .layout-desktop .listItem { 155 | transition: .2s !important; 156 | border-radius: var(--rounded-cards) !important; 157 | } 158 | .layout-desktop #myPreferencesMenuPage .listItem:hover { 159 | transform: scale(1.015); 160 | } 161 | 162 | 163 | 164 | /* Rounded cards */ 165 | .cardContent, 166 | .cardPadder, 167 | .cardOverlayContainer, 168 | .blurhash-canvas, 169 | .dialog, 170 | .itemSelectionPanel, 171 | .nowPlayingPageImage { 172 | border-radius: var(--rounded-cards) !important; 173 | } 174 | /* Rounded selection menu */ 175 | .itemSelectionPanel { 176 | border: 2px solid var(--primary-accent-color) !important; 177 | } 178 | .itemSelectionPanel .checkboxOutline { 179 | margin: 7px !important; 180 | } 181 | 182 | 183 | 184 | /* Floating progress bar */ 185 | .innerCardFooter { 186 | border-radius: var(--rounded-cards) !important; 187 | margin-left: 5px !important; 188 | margin-bottom: 5px !important; 189 | padding: 5px 15px 5px 5px !important; 190 | bottom: 0% !important; 191 | background: rgba(0,0,0,0.5) !important; 192 | backdrop-filter: blur(var(--blur)) !important; 193 | } 194 | .fullInnerCardFooter { 195 | bottom: 5% !important; 196 | width: 90% !important; 197 | margin: auto !important; 198 | border-radius: 100px !important; 199 | padding: 0px !important; 200 | backdrop-filter: none !important; 201 | } 202 | .itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) { 203 | height: 10px !important; 204 | background: var(--primary-background-transparent) !important; 205 | backdrop-filter: blur(2px) !important; 206 | border-radius: 100px !important; 207 | } 208 | .innerCardFooterClear { 209 | background-color: none !important; 210 | } 211 | .innerCardFooter .cardText { 212 | padding: 0 0 0 10px !important 213 | } 214 | .cardImageContainer .innerCardFooter .itemProgressBar .itemProgressBarForeground { 215 | background: var(--primary-accent-color) !important; 216 | } 217 | 218 | 219 | 220 | /* Green watched indicator */ 221 | .playedIndicator { 222 | background: #409843 !important; 223 | } 224 | 225 | 226 | 227 | /* Rounded left drawer buttons */ 228 | .navMenuOption, 229 | .navMenuOption:hover, 230 | .navMenuOption-selected { 231 | border-radius: 100px !important; 232 | width: 85% !important; 233 | margin: auto !important; 234 | text-align: center !important; 235 | height: 45px !important; 236 | margin-top: 3px !important; 237 | margin-bottom: 3px !important; 238 | } 239 | .navMenuOption:hover:not(.navMenuOption-selected) { 240 | background-color: rgba(44, 44, 44, 0.7); 241 | } 242 | /* Center icons and text and shift to the left */ 243 | .navMenuOptionIcon, 244 | .navMenuOptionText { 245 | position: inherit !important; 246 | left: -10% !important; 247 | margin-top: 0 !important; 248 | } 249 | /* Fix for header buttons */ 250 | .layout-desktop .emby-button-foreground { 251 | top: -9px !important; 252 | } 253 | .layout-tv .emby-button-foreground { 254 | top: -14px !important; 255 | } 256 | 257 | 258 | 259 | /* Custom button color */ 260 | .navMenuOption-selected { 261 | background: var(--secondary-accent-color) !important; 262 | color: var(--primary-accent-color) !important; 263 | } 264 | 265 | /* Modified background color */ 266 | html, 267 | .backgroundContainer:not(.withBackdrop):not(.backgroundContainer-transparent), 268 | .noBackdropTransparency .detailPageSecondaryContainer { 269 | background-color: var(--primary-background-color) !important; 270 | } 271 | 272 | 273 | /* Transparent header bar */ 274 | .skinHeader { 275 | background-color: transparent !important; 276 | } 277 | .layout-desktop .skinHeader, 278 | .layout-tv .skinHeader { 279 | padding-top: 1.5em !important; 280 | } 281 | .layout-tv .skinHeader { 282 | padding-bottom: 10px !important; 283 | } 284 | /* Rounded header buttons */ 285 | .headerTabs, 286 | .headerRight { 287 | background-color: var(--primary-background-transparent) !important; 288 | border-radius: 50px !important; 289 | backdrop-filter: blur(var(--blur)) !important; 290 | } 291 | .layout-desktop .headerTabs, 292 | .layout-tv .headerTabs { 293 | margin-bottom: 10px !important; 294 | } 295 | .layout-desktop .headerTabs { 296 | margin-left: 160px !important; 297 | margin-top: -58px !important; 298 | } 299 | /* Button height */ 300 | .headerRight, 301 | .emby-tab-button { 302 | height: 45px !important; 303 | } 304 | /* Lower header and add padding to right buttons */ 305 | .layout-desktop .headerRight { 306 | padding: 0px 5px !important; 307 | } 308 | .layout-tv .headerRight { 309 | padding: 20px 10px !important; 310 | } 311 | /* Move left header back up */ 312 | .layout-desktop .headerLeft 313 | .layout-tv .headerLeft { 314 | position: relative !important; 315 | top: -17px !important; 316 | } 317 | /* Mobile fixes */ 318 | .layout-mobile .sectionTabs { 319 | margin-left: auto !important; 320 | margin-right: auto !important; 321 | width: auto !important; 322 | max-width: 100% !important; 323 | } 324 | .layout-mobile .emby-button-foreground { 325 | top: -2px !important; 326 | } 327 | .layout-mobile .skinHeader { 328 | transition: .1s !important; 329 | } 330 | .layout-mobile .mainDrawer { 331 | background: var(--secondary-background-color) !important; 332 | } 333 | .layout-mobile .headroom--unpinned { 334 | transform: none; 335 | } 336 | .layout-mobile .headroom--unpinned:has(.headerTabs.sectionTabs:not(.hide)) { 337 | transform: translateY(-50%); 338 | } 339 | .layout-mobile .headroom--not-top { 340 | background: var(--primary-background-transparent) !important; 341 | backdrop-filter: blur(var(--blur)) !important; 342 | } 343 | .layout-mobile .headroom--not-top .headerRight { 344 | background: none !important; 345 | } 346 | .layout-mobile .headroom--top, 347 | .layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) { 348 | background: transparent !important; 349 | backdrop-filter: none !important; 350 | } 351 | .layout-mobile .headroom--top .headerRight , 352 | .layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) .headerRight { 353 | background: var(--primary-background-transparent) !important; 354 | } 355 | @media (max-width: 380px) { 356 | .layout-mobile .pageTitle:not(.pageTitleWithLogo):not(:empty) { 357 | position: absolute !important; 358 | margin-left: 50% !important; 359 | transform: translate(-50%, 0) !important; 360 | top: 60px !important; 361 | } 362 | .layout-mobile .headerTop:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) { 363 | -webkit-align-items: start !important; 364 | align-items: start !important; 365 | } 366 | .layout-mobile .skinHeader:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) { 367 | height: 110px !important; 368 | } 369 | .layout-mobile .skinHeader:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)):has(.sectionTabs:not(.hide)) { 370 | height: 140px !important; 371 | } 372 | .layout-mobile .libraryPage:not(.noSecondaryNavPage) { 373 | padding-top: 9.5em !important; 374 | } 375 | .layout-mobile .headroom--unpinned:has(.headerTabs.sectionTabs:not(.hide)):has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) { 376 | transform: translateY(-60%); 377 | } 378 | } 379 | 380 | 381 | 382 | /* Player modifications */ 383 | .upNextContainer:not(#skipIntro), .toastVisible { 384 | backdrop-filter: blur(var(--blur)) !important; 385 | } 386 | .upNextContainer:not(#skipIntro) { 387 | border-radius: var(--rounded-cards) !important; 388 | background-color: rgba(0, 0, 0, 0.6) !important; 389 | } 390 | .upNextContainer { 391 | margin: 4% !important; 392 | } 393 | .toastVisible { 394 | border-radius: 30px !important; 395 | background-color: var(--primary-background-transparent) !important; 396 | } 397 | .sliderBubble { 398 | border-radius: var(--rounded-cards) !important; 399 | background-color: var(--secondary-background-transparent) !important; 400 | backdrop-filter: blur(var(--blur)) !important; 401 | } 402 | .sliderBubble:not(.osdVolumeSliderContainer .sliderBubble):has(.chapterThumbContainer) { 403 | background-color: #ffffff00 !important; 404 | top: 25px !important; 405 | backdrop-filter: unset !important; 406 | } 407 | @supports selector(div:not(.parent .child)) { 408 | .mdl-slider-background-flex:not(.layout-mobile .nowPlayingBar .mdl-slider-background-flex) { 409 | height: 10px !important; 410 | margin-top: -5px !important; 411 | border-radius: 100px !important; 412 | background: hsla(0,0%,100%,.2) !important; 413 | } 414 | } 415 | @supports not selector(div:not(.parent .child)) { 416 | .mdl-slider-background-flex { 417 | height: 10px !important; 418 | margin-top: -5px !important; 419 | border-radius: 100px !important; 420 | background: hsla(0,0%,100%,.2) !important; 421 | } 422 | } 423 | .mdl-slider-background-lower { 424 | border-radius: 100px !important; 425 | background-color: var(--primary-accent-color) !important; 426 | } 427 | /* Moz */ 428 | .mdl-slider::-moz-range-thumb { 429 | background: #ffffff00 !important; 430 | height: 10px !important; 431 | width: 8px !important; 432 | border-radius: 2px !important; 433 | } 434 | .mdl-slider-hoverthumb:hover::-moz-range-thumb { 435 | transform: scaleY(2); 436 | background: #fff !important; 437 | } 438 | /* Webkit */ 439 | .mdl-slider::-webkit-slider-thumb { 440 | background: #ffffff00 !important; 441 | height: 10px !important; 442 | width: 8px !important; 443 | border-radius: 2px !important; 444 | } 445 | .mdl-slider-hoverthumb:hover::-webkit-slider-thumb { 446 | transform: scaleY(2); 447 | background: #fff !important; 448 | } 449 | 450 | .mdl-slider-background-upper { 451 | border-top-right-radius: 100px !important; 452 | border-bottom-right-radius: 100px !important; 453 | background: hsla(0,0%,100%,.2) !important; 454 | transform: translateX(-3px) !important; 455 | } 456 | .iconOsdProgressInner { 457 | background: var(--primary-accent-color) !important; 458 | } 459 | 460 | /* Up next card */ 461 | .upNextDialog-buttons .upNextDialog-button { 462 | transition: .2s !important; 463 | } 464 | .upNextDialog-buttons .upNextDialog-button:hover { 465 | transform: scale(1.1); 466 | } 467 | 468 | /* Support for Jellyscrub plugin */ 469 | .chapterThumbContainer { 470 | background: none !important; 471 | border-radius: var(--rounded-cards) !important; 472 | box-shadow: unset !important; 473 | } 474 | .chapterThumb { 475 | border-radius: var(--rounded-cards) !important; 476 | margin-bottom: 47px !important; 477 | box-shadow: 0 0 1.9vh #000 !important; 478 | } 479 | .chapterThumbTextContainer { 480 | background: none !important; 481 | } 482 | .chapterThumbText { 483 | text-align: center !important; 484 | } 485 | .chapterThumbText-dim { 486 | display: none !important; 487 | } 488 | 489 | /* Support for IntroSkipper plugin */ 490 | #skipIntro .btnSkipIntro { 491 | transition: 0.2s; 492 | border-radius: 100px !important; 493 | backdrop-filter: blur(var(--blur)) !important; 494 | } 495 | #skipIntro .btnSkipIntro:hover { 496 | transition: .2s; 497 | transform: scale(1.05); 498 | background: var(--primary-accent-color) !important; 499 | } 500 | #skipIntro .paper-icon-button-light:hover:not(:disabled) { 501 | color: #FFF !important; 502 | } 503 | .sliderContainer:has(.mdl-slider-hoverthumb:not(:hover)) .sliderMarker { 504 | opacity: 0 !important; 505 | transition: 0.2s !important; 506 | } 507 | .sliderContainer:has(.mdl-slider-hoverthumb:hover) .sliderMarker { 508 | opacity: 1 !important; 509 | transition: 0.2s !important; 510 | height: 10px !important; 511 | transform: translate3d(0,40%,0) !important; 512 | -webkit-transform: translate3d(0,40%,0) !important; 513 | } 514 | .sliderMarker.watched { 515 | background-color: #FFFFFF90 !important; 516 | z-index: 10 !important; 517 | } 518 | #skipIntro .upNextContainer { 519 | padding: 0px !important; 520 | } 521 | #skipIntro .emby-button { 522 | background: rgba(30, 30, 30, 0.7) !important; 523 | } 524 | #skipIntro .emby-button:hover { 525 | box-shadow: 0 0 8px rgba(var(--primary-accent-color), 0.6) !important; 526 | } 527 | #skipIntro .emby-button:focus { 528 | background: rgba(30, 30, 30, 0.7) !important; 529 | box-shadow: unset !important; 530 | } 531 | /* Support for InPlayerEpisodePreview plugin */ 532 | .layout-desktop #popupFocusContainer { 533 | padding: 10px !important; 534 | } 535 | .layout-desktop #popupTitleContainer { 536 | margin: 0px !important; 537 | padding: 10px 0px 10px 0px !important; 538 | } 539 | .layout-desktop #popupContentContainer .previewEpisodeDetails { 540 | position: unset !important; 541 | margin: 0px 0px 6px 10px !important; 542 | font-size: 13.5px !important; 543 | } 544 | .layout-desktop #popupContentContainer .previewEpisodeTitle { 545 | font-size: 16.5px !important; 546 | } 547 | .layout-desktop #popupContentContainer .listItem { 548 | padding: .25em .25em .25em .5em !important; 549 | } 550 | 551 | /* Modify player buttons */ 552 | .material-icons.fast_rewind::before { 553 | content: "\e059"; 554 | } 555 | .material-icons.fast_forward::before { 556 | content: "\e057"; 557 | } 558 | .material-icons.audiotrack::before { 559 | content: "\e91f"; 560 | } 561 | 562 | 563 | 564 | /* Settings modifications */ 565 | .emby-input, 566 | .emby-textarea, 567 | .paperList, 568 | .listItem:hover, 569 | .subtitleappearance-preview { 570 | border-radius: var(--rounded-cards) !important; 571 | } 572 | .button-submit, 573 | .emby-select, 574 | .checkboxOutline, 575 | .emby-button.raised { 576 | border-radius: 100px !important; 577 | } 578 | .button-submit { 579 | background: var(--primary-accent-color) !important; 580 | } 581 | /* Modify username placement on profile page */ 582 | .layout-desktop #userProfilePage .readOnlyContent div:not([class]), div[class=""]{ 583 | align-items: initial !important; 584 | } 585 | .layout-desktop .username { 586 | margin: 0px 0px 10px 10px !important; 587 | } 588 | /* Remove border under certain dashboard items */ 589 | .listItem-border { 590 | border: 0 !important; 591 | } 592 | /* Add padding to list items */ 593 | .layout-desktop .listItem, 594 | .layout-tv .listItem { 595 | padding-inline: 15px !important; 596 | } 597 | /* Center the Quick Connect page */ 598 | .layout-desktop #quickConnectPreferencesPage form { 599 | margin: auto; 600 | } 601 | /* Theme icons for certain list objects */ 602 | .listItemIcon:not(.listItemIcon-transparent):not(.notification_important) { 603 | background: var(--secondary-accent-color) !important; 604 | color: var(--primary-accent-color) !important; 605 | } 606 | 607 | 608 | 609 | /* Resize show/movie image on details page */ 610 | .layout-desktop .detailImageContainer .card { 611 | top: 1.8em !important; 612 | width: 18.3vw !important; 613 | position: static !important; 614 | margin-bottom: 0 !important; 615 | } 616 | 617 | /* Re-position content on details page */ 618 | .layout-desktop .detailPageContent { 619 | padding-left: 3.3% !important; 620 | padding-right: 0 !important; 621 | } 622 | 623 | /* Re-position logo */ 624 | .layout-desktop .detailLogo, 625 | .layout-tv .detailLogo { 626 | right: 0 !important; 627 | left: 4% !important; 628 | top: 10% !important; 629 | } 630 | 631 | /* Transparent ribbon bar */ 632 | .detailRibbon { 633 | background: transparent !important; 634 | } 635 | 636 | /* Add card around top-right buttons */ 637 | .mainDetailButtons { 638 | background: var(--primary-background-transparent) !important; 639 | border-radius: 100px !important; 640 | backdrop-filter: blur(var(--blur)) !important; 641 | } 642 | 643 | /* Add card around groups section */ 644 | .layout-desktop .detailsGroupItem { 645 | background: var(--secondary-background-color) !important; 646 | padding: 10px 20px !important; 647 | border-radius: 20px !important; 648 | width: fit-content !important; 649 | max-width: max-content !important; 650 | display: flex; 651 | gap: 1em; 652 | } 653 | 654 | /* Fix for group section labels */ 655 | .detailsGroupItem .label, .trackSelections .selectContainer .selectLabel { 656 | min-width: 75px; 657 | flex-basis: unset; 658 | margin: unset; 659 | } 660 | 661 | /* Mobile media details page */ 662 | .layout-mobile .itemDetailsGroup { 663 | background: var(--secondary-background-color) !important; 664 | padding: 15px 20px 5px 20px !important; 665 | border-radius: var(--rounded-cards) !important; 666 | } 667 | .layout-mobile .detailPagePrimaryContent .itemsContainer.scrollX, 668 | .layout-mobile .detailPageSecondaryContainer .emby-scroller { 669 | margin-inline: -5% !important; 670 | padding-inline: 5% !important; 671 | } 672 | .layout-mobile .detailSection { 673 | display: flex !important; 674 | } 675 | .layout-mobile .detailSection { 676 | display: flex; 677 | flex-direction: column; 678 | } 679 | .layout-mobile .detailSection .detailSectionContent { 680 | order: 1; 681 | } 682 | .layout-mobile .detailSection .recordingFields { 683 | order: 2; 684 | } 685 | .layout-mobile .detailSection .trackSelections { 686 | order: 3; 687 | } 688 | .layout-mobile .detailSection .itemDetailsGroup { 689 | order: 4; 690 | } 691 | .layout-mobile .detailSection .nextUpSection { 692 | padding-top: 15px !important; 693 | order: 5; 694 | } 695 | .layout-mobile .detailSection #listChildrenCollapsible { 696 | order: 6; 697 | } 698 | 699 | /* Add card around description */ 700 | .layout-desktop .detailSectionContent { 701 | background: var(--secondary-background-color) !important; 702 | border-radius: var(--rounded-cards) !important; 703 | padding: 40px 20px 10px 20px !important; 704 | margin-top: 44px !important; 705 | } 706 | @supports selector(:has(*)) { 707 | .layout-desktop .detailPageWrapperContainer:not(:has(.itemMiscInfo-primary .mediaInfoItem)) .detailSectionContent { 708 | padding: 0px 20px 10px 20px !important; 709 | } 710 | } 711 | .layout-mobile .detailSectionContent { 712 | background: var(--secondary-background-color) !important; 713 | border-radius: var(--rounded-cards) !important; 714 | padding: 0px 20px 10px 20px !important; 715 | } 716 | /* Fix content shifting when clicking "Show more" on a long description */ 717 | .layout-desktop .detailSectionContent .overview { 718 | display: -webkit-box !important; 719 | } 720 | 721 | /* Add card around track selection */ 722 | .trackSelections { 723 | background: var(--secondary-background-color) !important; 724 | border-radius: var(--rounded-cards) !important; 725 | padding: 10px 20px !important; 726 | margin-top: 20px !important; 727 | } 728 | 729 | /* Fix for track select dropdowns */ 730 | .trackSelections .selectContainer .detailTrackSelect { 731 | padding: 0 10px; 732 | margin-left: 10px !important; 733 | } 734 | 735 | /* Re-position title */ 736 | .layout-desktop .infoWrapper { 737 | margin-top: 245px !important; 738 | margin-left: 20.9vw !important; 739 | } 740 | .layout-desktop .detailPagePrimaryContainer { 741 | padding-left: 3.3% !important; 742 | } 743 | /* Fix for title position on 10.11.X */ 744 | .layout-desktop [dir="ltr"] .detailPagePrimaryContainer:not(.detailRibbon) .detailRibbon { 745 | padding-left: unset !important; 746 | } 747 | .layout-desktop .nameContainer { 748 | position: absolute !important; 749 | margin-top: -48px !important; 750 | } 751 | .layout-desktop .itemMiscInfo { 752 | position: absolute !important; 753 | margin-left: 12px !important; 754 | margin-top: 16px !important; 755 | } 756 | 757 | 758 | 759 | /* Media detail page */ 760 | /* Change page layout to grid */ 761 | .layout-desktop .detailPageWrapperContainer .detailPagePrimaryContainer { 762 | display: grid; 763 | grid-template-areas: 764 | "ribbon ribbon" 765 | "image scontent" 766 | "image tselection" 767 | "image igroup" 768 | "nextup nextup" 769 | "children children" 770 | "citems citems" 771 | "pguide pguide"; 772 | 773 | grid-template-rows: 774 | auto 775 | max-content 776 | auto 777 | 1fr 778 | auto 779 | auto 780 | auto 781 | auto; 782 | 783 | grid-template-columns: minmax(auto, 18.3vw) 1fr; 784 | } 785 | .layout-desktop .detailPageWrapperContainer .detailPagePrimaryContent, 786 | .layout-desktop .detailPageWrapperContainer .detailSection { 787 | display: contents; 788 | } 789 | .layout-desktop .detailPageWrapperContainer .detailRibbon { 790 | grid-area: ribbon; 791 | margin-bottom: 25px !important; 792 | } 793 | .layout-desktop .detailPageWrapperContainer .detailImageContainer { 794 | grid-area: image; 795 | margin-bottom: 1.3vw !important; 796 | } 797 | .layout-desktop .detailPageWrapperContainer .detailSectionContent { 798 | grid-area: scontent; 799 | margin-right: max(env(safe-area-inset-right),3.3%) !important; 800 | } 801 | .layout-desktop .detailPageWrapperContainer .trackSelections { 802 | grid-area: tselection; 803 | } 804 | .layout-desktop .detailPageWrapperContainer .itemDetailsGroup { 805 | grid-area: igroup; 806 | } 807 | .layout-desktop .detailPageWrapperContainer .detailSectionContent, 808 | .layout-desktop .detailPageWrapperContainer .trackSelections, 809 | .layout-desktop .detailPageWrapperContainer .itemDetailsGroup { 810 | margin-left: 2.1vw !important; 811 | align-self: start; 812 | } 813 | .layout-desktop .detailPageWrapperContainer .nextUpSection { 814 | grid-area: nextup; 815 | } 816 | .layout-desktop .detailPageWrapperContainer #listChildrenCollapsible { 817 | grid-area: children; 818 | } 819 | .layout-desktop .detailPageWrapperContainer .collectionItems { 820 | grid-area: citems; 821 | } 822 | .layout-desktop .detailPageWrapperContainer .programGuideSection { 823 | grid-area: pguide; 824 | } 825 | /* Move episode title */ 826 | .layout-desktop .nameContainer { 827 | display: flex; 828 | flex-direction: row; 829 | } 830 | .layout-desktop .nameContainer .parentName { 831 | order: 1; 832 | } 833 | .layout-desktop .nameContainer .itemName { 834 | order: 2; 835 | } 836 | /* Modify original title / episode name position */ 837 | .layout-desktop .nameContainer .itemName.originalTitle { 838 | margin: .5em 20px !important; 839 | } 840 | .layout-desktop .nameContainer .itemName.infoText.subtitle { 841 | margin: .5em 20px !important; 842 | padding: 0px !important; 843 | } 844 | /* Modify play button */ 845 | .layout-desktop .mainDetailButtons .btnPlay::after { 846 | content: "Play" !important; 847 | } 848 | .layout-desktop .mainDetailButtons .btnPlay { 849 | position: relative !important; 850 | margin-right: -85px !important; 851 | padding-right: 20px !important; 852 | right: 110px !important; 853 | background: var(--primary-accent-color) !important; 854 | border-radius: 100px !important; 855 | color: var(--secondary-background-color) !important; 856 | } 857 | .layout-desktop .mainDetailButtons .detailButton { 858 | -webkit-flex-direction: row !important; 859 | flex-direction: row !important; 860 | } 861 | /* Change crop for list item images */ 862 | .listItemImage { 863 | background-size: contain !important; 864 | border-radius: var(--rounded-cards); 865 | } 866 | /* Move up content if no backdrop image is present */ 867 | @supports selector(:has(*)) { 868 | .layout-desktop:not(:has(.backdropContainer .backdropImage)) #itemBackdrop { 869 | height: 90px !important; 870 | } 871 | .layout-desktop:not(:has(.backdropContainer .backdropImage)) .mainDetailButtons { 872 | margin-top: 200px !important; 873 | } 874 | } 875 | 876 | 877 | 878 | /* Live TV */ 879 | /* Modified background color of active guide cells */ 880 | .programCell-active { 881 | background: var(--secondary-background-color) !important; 882 | } 883 | /* Repositioned record button */ 884 | .recordingFields { 885 | margin: 5px 0 -7px 0 !important; 886 | } 887 | .recordingButton { 888 | height: 40px !important; 889 | } 890 | .recordingIcon { 891 | color: red !important; 892 | } 893 | /* Remove overlapping text */ 894 | .itemMiscInfo.itemMiscInfo-secondary { 895 | margin-left: 65px !important; 896 | } 897 | 898 | 899 | 900 | /* Music Player */ 901 | .layout-desktop .appfooter:has(.nowPlayingBar:not(.hide)) { 902 | border-radius: var(--rounded-cards); 903 | margin: 15px 15px 10px 265px; 904 | padding: 5px; 905 | background: var(--tertiary-background-transparent); 906 | backdrop-filter: blur(var(--blur)); 907 | } 908 | .layout-desktop .appfooter .nowPlayingBarInfoContainer { 909 | margin-left: 10px !important; 910 | } 911 | .layout-desktop .volumeOsd { 912 | border-radius: var(--rounded-cards) !important; 913 | background: var(--secondary-background-transparent) !important; 914 | } 915 | .layout-desktop .nameContainer .musicParentName { 916 | margin-top: 18px !important; 917 | margin-right: 22px !important; 918 | } 919 | .layout-desktop .appfooter .nowPlayingBar { 920 | margin-top: 20px !important; 921 | } 922 | .layout-desktop .appfooter .nowPlayingBar .nowPlayingBarPositionContainer { 923 | top: -15px !important; 924 | } 925 | /* Shift page up so now-playing footer doesn't block anything */ 926 | .layout-desktop:has(.nowPlayingBar:not(.hide)) .content-primary, 927 | .layout-desktop:has(.nowPlayingBar:not(.hide)) .padded-bottom-page, 928 | .layout-desktop:has(.nowPlayingBar:not(.hide)) .page, 929 | .layout-desktop:has(.nowPlayingBar:not(.hide)) .pageWithAbsoluteTabs .pageTabContent { 930 | padding-bottom: calc(env(safe-area-inset-bottom) + 8em) !important; 931 | } 932 | 933 | 934 | 935 | /* Display size scaling */ 936 | @media (width: 1600px) { 937 | .layout-desktop .headerRight { 938 | margin-bottom: 0 !important; 939 | } 940 | .layout-desktop .emby-button-foreground { 941 | top: -4px !important; 942 | } 943 | } 944 | @media (max-width: 1599px) { 945 | .layout-desktop .pageTitleWithLogo { 946 | margin-left: 25px !important; 947 | } 948 | .layout-desktop .headerTabs { 949 | margin-top: -65px !important; 950 | } 951 | .layout-desktop .headerRight { 952 | margin-right: 15px !important; 953 | } 954 | .layout-desktop .sectionTabs { 955 | width: auto !important; 956 | align-self: center !important; 957 | } 958 | .layout-desktop .emby-button-foreground { 959 | top: -2px !important; 960 | } 961 | } 962 | 963 | 964 | 965 | /* Fixes for TV Layout */ 966 | .layout-tv .sectionTabs { 967 | width: auto !important; 968 | } 969 | .layout-tv .headerLeft { 970 | padding: 5px !important; 971 | } 972 | 973 | 974 | 975 | /* Login page */ 976 | .layout-desktop #loginPage { 977 | display: flex; 978 | justify-content: center; 979 | align-items: center; 980 | } 981 | /* Login box */ 982 | .layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y { 983 | background: var(--secondary-background-color) !important; 984 | width: 450px !important; 985 | border-radius: 25px !important; 986 | padding: 3em !important; 987 | } 988 | /* Forgot password button */ 989 | .layout-desktop #loginPage .readOnlyContent { 990 | position: relative !important; 991 | } 992 | .layout-desktop #loginPage .btnForgotPassword { 993 | transition: none !important; 994 | } 995 | .layout-desktop #loginPage .readOnlyContent:has(.btnManual.hide) .btnForgotPassword { 996 | background: none !important; 997 | font-weight: normal !important; 998 | width: 150px !important; 999 | position: absolute !important; 1000 | margin-left: 320px !important; 1001 | top: -200px !important; 1002 | font-size: smaller !important; 1003 | color: rgba(255, 255, 255, 0.5) !important; 1004 | z-index: 1 !important; 1005 | transition: none !important; 1006 | } 1007 | /* User cards */ 1008 | .layout-desktop #loginPage .squareCard { 1009 | width: 25% !important; 1010 | font-size: smaller !important; 1011 | } 1012 | .layout-desktop #loginPage .squareCard .cardBox { 1013 | margin-inline: 0.6em !important; 1014 | } 1015 | /* Scaling */ 1016 | @media (max-width: 100em) { 1017 | .layout-desktop #loginPage .squareCard { 1018 | width: 20% !important; 1019 | } 1020 | .layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y { 1021 | width: 600px !important; 1022 | } 1023 | .layout-desktop #loginPage .readOnlyContent:has(.btnManual.hide) .btnForgotPassword { 1024 | margin-left: 470px !important; 1025 | } 1026 | } 1027 | @media (max-width: 87.5em) { 1028 | .layout-desktop #loginPage .squareCard { 1029 | width: 20% !important; 1030 | } 1031 | } 1032 | @media (max-width: 75em) { 1033 | .layout-desktop #loginPage .squareCard { 1034 | width: 20% !important; 1035 | } 1036 | } 1037 | @media (max-width: 43.75em) { 1038 | .layout-desktop #loginPage .squareCard { 1039 | width: 20% !important; 1040 | } 1041 | } 1042 | 1043 | 1044 | 1045 | /* Dialog box */ 1046 | .dialog { 1047 | background-color: var(--secondary-background-color) !important; 1048 | } 1049 | .actionSheetTitle { 1050 | margin: 10px 20px !important; 1051 | } 1052 | 1053 | 1054 | 1055 | /* Dynamic backdrop support */ 1056 | 1057 | /* Translucent cards */ 1058 | .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailsGroupItem, 1059 | .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailSectionContent, 1060 | .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .trackSelections { 1061 | background: var(--primary-background-transparent) !important; 1062 | backdrop-filter: blur(var(--blur)) !important; 1063 | } 1064 | 1065 | /* Transparent drawer */ 1066 | .layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer { 1067 | background: linear-gradient(to right, #10101090, transparent) !important; 1068 | } 1069 | .layout-desktop:has(#itemDetailPage.noBackdropTransparency) .mainDrawer { 1070 | background: var(--secondary-background-color) !important; 1071 | } 1072 | /* Fix for JMP */ 1073 | @supports not selector(:has(*)) { 1074 | .layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer { 1075 | background: transparent !important; 1076 | } 1077 | .layout-desktop #itemDetailPage.noBackdropTransparency::after { 1078 | position: fixed; 1079 | content: ""; 1080 | top: 0; 1081 | left: 0; 1082 | height: 100%; 1083 | width: 250px; 1084 | background: var(--secondary-background-color); 1085 | } 1086 | } 1087 | 1088 | /* Blur buttons */ 1089 | .layout-desktop:has(.backgroundContainer.withBackdrop) .navMenuOption-selected { 1090 | backdrop-filter: blur(var(--blur)) !important; 1091 | } 1092 | .layout-desktop:has(.backgroundContainer.withBackdrop) .navMenuOption:hover:not(.navMenuOption-selected) { 1093 | background: var(--primary-background-transparent) !important; 1094 | backdrop-filter: blur(var(--blur)) !important; 1095 | } 1096 | 1097 | 1098 | 1099 | /* Plugin support */ 1100 | 1101 | /* Media Bar */ 1102 | .layout-desktop #slides-container { 1103 | margin: 125px 50px 0 300px !important; 1104 | width: auto !important; 1105 | border-radius: var(--rounded-cards) !important; 1106 | height: 58% !important; 1107 | } 1108 | .layout-desktop #slides-container .backdrop-container, 1109 | .layout-desktop #slides-container .backdrop-overlay, 1110 | .layout-desktop #slides-container .backdrop, 1111 | .layout-desktop #slides-container .gradient-overlay { 1112 | mask-image: none !important; 1113 | -webkit-mask-image: none !important; 1114 | } 1115 | .layout-desktop #slides-container .pause-button { 1116 | top: 1rem !important; 1117 | } 1118 | .layout-desktop #slides-container .logo-container { 1119 | top: 8vh !important; 1120 | } 1121 | /* Scaling */ 1122 | @media only screen and (max-height: 767px) and (orientation: landscape) { 1123 | .layout-desktop #slides-container { 1124 | height: 50% !important; 1125 | } 1126 | .layout-desktop #slides-container .logo-container { 1127 | top: 10% !important; 1128 | } 1129 | .layout-desktop #slides-container .info-container { 1130 | top: calc(50% + -4vh) !important; 1131 | } 1132 | .layout-desktop #slides-container .genre { 1133 | top: calc(50% + 1vh) !important; 1134 | } 1135 | .layout-desktop #slides-container .button-container { 1136 | top: calc(50% + 15vh) !important; 1137 | } 1138 | } --------------------------------------------------------------------------------