├── CSS ├── disable-static-drawer.css ├── scyfin-theme.css ├── theme-coral.css ├── theme-oled.css ├── theme-seafoam.css └── theme-snow.css ├── LICENSE ├── README.md └── images ├── coral.png ├── dashboard.png ├── details-backdrops.png ├── details-oled.png ├── details.png ├── homepage-backdrops.png ├── homepage-oled.png ├── homepage.png ├── install-client-base.png ├── install-client-options.png ├── install-server-base.png ├── install-server-options.png ├── login.png ├── movies.png ├── scyfin-full.png ├── scyfin-full.svg ├── scyfin.png ├── scyfin.svg ├── seafoam.png └── snow.png /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:not(.dashboardDocument) { 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:not(.dashboardDocument) { 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:not(#editItemMetadataPage) { 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:not(.dashboardDocument) { 56 | display: inline-flex !important; 57 | } 58 | 59 | /* Fix for dashboard */ 60 | .layout-desktop .dashboardDocument .mainDrawer { 61 | top: 0px !important; 62 | left: 0px !important; 63 | width: 300px !important; 64 | z-index: 998 !important; 65 | } 66 | .layout-desktop .dashboardDocument .mainDrawer-scrollContainer { 67 | padding-top: 75px !important; 68 | } 69 | 70 | /* Re-center header buttons */ 71 | .layout-desktop .headerTabs { 72 | margin-left: 0px !important; 73 | } 74 | 75 | /* Re-enable home button */ 76 | .layout-desktop body:not(.hideMainDrawer) .headerHomeButton { 77 | display: block !important; 78 | } 79 | .layout-desktop body:not(.hideMainDrawer) .dashboardDocument .headerHomeButton { 80 | display: block !important; 81 | } 82 | 83 | /* Fix for scroll menus on home page */ 84 | .emby-scroller { 85 | margin-right: 3.3% !important; 86 | } 87 | 88 | /* Background for top left buttons */ 89 | .layout-desktop body:not(.hideMainDrawer) .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) { 90 | padding: 2px !important; 91 | top: -3px !important; 92 | background-color: var(--primary-background-transparent) !important; 93 | border-radius: 50px !important; 94 | backdrop-filter: blur(var(--blur)) !important; 95 | } 96 | /* Fix for JMP */ 97 | @supports not selector(:has(*)) { 98 | .layout-desktop body:not(.hideMainDrawer) .headerLeft { 99 | padding: 2px !important; 100 | top: -3px !important; 101 | background-color: var(--primary-background-transparent) !important; 102 | border-radius: 50px !important; 103 | backdrop-filter: blur(var(--blur)) !important; 104 | } 105 | } 106 | .headerLeft { 107 | flex-grow: 0 !important; 108 | -webkit-flex-grow: 0 !important; 109 | } 110 | .headerRight { 111 | position: absolute !important; 112 | right: 12px !important; 113 | } 114 | 115 | /* Music Player */ 116 | .layout-desktop .appfooter { 117 | margin-left: 0px !important; 118 | } -------------------------------------------------------------------------------- /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 | --rounded-cards: 15px; 13 | --blur: 10px; 14 | 15 | /* Alternate accents*/ 16 | --primary-alt1: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 1); 17 | --primary-alt2: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.85); 18 | --primary-alt3: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.7); 19 | --primary-alt4: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.55); 20 | --primary-alt5: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.4); 21 | } 22 | 23 | /* Setting accent color variable */ 24 | .emby-checkbox:checked + span + .checkboxOutline, 25 | .selectionCommandsPanel, 26 | .countIndicator, 27 | .MuiButton-root.MuiButton-containedSizeMedium, 28 | .MuiChip-root.MuiChip-colorInfo:not(.MuiChip-colorError), 29 | progress[aria-valuenow]:before { 30 | background: var(--primary-accent-color) !important; 31 | } 32 | progress::-moz-progress-bar { 33 | background: var(--primary-accent-color) !important; 34 | } 35 | progress::-webkit-progress-value { 36 | background: var(--primary-accent-color) !important; 37 | } 38 | .MuiAlert-root.MuiAlert-standardInfo { 39 | background: var(--secondary-accent-color) !important; 40 | } 41 | .emby-checkbox:checked + span + .checkboxOutline, 42 | .emby-checkbox:focus:not(:checked) + span + .checkboxOutline, 43 | .emby-input:focus, 44 | .emby-textarea:focus, 45 | .emby-select-withcolor:focus, 46 | .mdl-spinner__layer-1, 47 | .mdl-spinner__layer-2, 48 | .mdl-spinner__layer-3, 49 | .mdl-spinner__layer-4, 50 | .progressring-spiner { 51 | border-color: var(--primary-accent-color) !important; 52 | } 53 | .page:not(.itemDetailPage) .button-link, 54 | .selectLabelFocused, 55 | .textareaLabelFocused, 56 | .inputLabelFocused, 57 | .emby-tab-button:hover, 58 | .metadataSidebarIcon, 59 | .upNextDialog-countdownText, 60 | .MuiSvgIcon-root.MuiSvgIcon-fontSizeInherit, 61 | .listItemImageButton:hover, 62 | .button-flat:hover, 63 | #divRunningTasks span { 64 | color: var(--primary-accent-color) !important; 65 | } 66 | @media (hover: hover) and (pointer: fine) { 67 | .paper-icon-button-light:hover:not(:disabled) { 68 | color: var(--primary-accent-color) !important; 69 | background-color: var(--secondary-accent-color) !important; 70 | } 71 | } 72 | 73 | /* Increase size of Jellyfin logo */ 74 | .layout-desktop .pageTitleWithLogo { 75 | margin-left: 25px !important; 76 | height: 40px !important; 77 | } 78 | 79 | /* Fix for empty header with padding */ 80 | [dir="ltr"] .pageTitle:not(.pageTitleWithLogo):empty { 81 | margin: 0 !important; 82 | } 83 | 84 | /* Static left drawer */ 85 | .layout-desktop .mainDrawer { 86 | left: 0 !important; 87 | top: 0 !important; 88 | width: 250px !important; 89 | /* Modified background color */ 90 | background: var(--secondary-background-color) !important; 91 | /* Move drawer behind header */ 92 | z-index: 998 !important; 93 | } 94 | /* Lower drawer buttons */ 95 | .layout-desktop .mainDrawer-scrollContainer { 96 | margin-top: 95px !important; 97 | margin-left: 10px !important; 98 | } 99 | .layout-mobile .mainDrawer-scrollContainer { 100 | margin-top: 15px !important; 101 | } 102 | /* Shift content to the right */ 103 | .layout-desktop .libraryPage:not(#editItemMetadataPage) { 104 | margin-left: 250px !important; 105 | } 106 | /* Fix for Jellyfin Media Player */ 107 | .quickConnectSettingsContainer { 108 | margin-left: 250px !important; 109 | } 110 | /* Hide transition on page load */ 111 | .layout-desktop .touch-menu-la.transition { 112 | transition: none !important; 113 | } 114 | /* Hide hamburger button */ 115 | .layout-desktop .mainDrawerButton { 116 | display: none !important; 117 | } 118 | /* Fix for dashboard leaking out of the sections */ 119 | .dashboardColumn { 120 | flex-shrink: inherit; 121 | } 122 | /* Fix for dashboard drawer button height */ 123 | .layout-desktop .dashboardDocument .mainDrawer-scrollContainer { 124 | padding-top: 0 !important; 125 | } 126 | /* Hide home button */ 127 | .layout-desktop .headerHomeButton { 128 | display: none !important; 129 | } 130 | .layout-desktop .dashboardDocument .headerHomeButton { 131 | display: block !important; 132 | } 133 | /* Fix for video player and login page */ 134 | .layout-desktop .hide-scroll .mainDrawer, 135 | .layout-desktop .hideMainDrawer .mainDrawer { 136 | left: -320px !important; 137 | } 138 | /* Fix for scroll menus on home page */ 139 | .emby-scroller { 140 | margin-right: -2% !important; 141 | } 142 | /* Fix for collection items misalignment */ 143 | .layout-desktop .collectionItems .collectionItemsContainer { 144 | padding-left: 0% !important; 145 | } 146 | .layout-desktop .collectionItems .sectionTitleContainer { 147 | padding-left: 0% !important; 148 | } 149 | /* Dynamic buttons */ 150 | .layout-desktop .navMenuOption:hover:not(.navMenuOption-selected) { 151 | transform: scale(1.05) !important; 152 | } 153 | .layout-desktop .listItem { 154 | transition: .2s !important; 155 | border-radius: var(--rounded-cards) !important; 156 | } 157 | .layout-desktop #myPreferencesMenuPage .listItem:hover { 158 | transform: scale(1.015); 159 | } 160 | 161 | 162 | 163 | /* Rounded cards */ 164 | .cardContent, 165 | .cardPadder, 166 | .cardOverlayContainer, 167 | .blurhash-canvas, 168 | .dialog, 169 | .itemSelectionPanel, 170 | .nowPlayingPageImage { 171 | border-radius: var(--rounded-cards) !important; 172 | } 173 | /* Rounded selection menu */ 174 | .itemSelectionPanel { 175 | border: 2px solid var(--primary-accent-color) !important; 176 | } 177 | .itemSelectionPanel .checkboxOutline { 178 | margin: 7px !important; 179 | } 180 | 181 | 182 | 183 | /* Floating progress bar */ 184 | .innerCardFooter { 185 | border-radius: var(--rounded-cards) !important; 186 | margin-left: 5px !important; 187 | margin-bottom: 5px !important; 188 | padding: 5px 15px 5px 5px !important; 189 | bottom: 0% !important; 190 | background: rgba(0,0,0,0.5) !important; 191 | backdrop-filter: blur(var(--blur)) !important; 192 | } 193 | .fullInnerCardFooter { 194 | bottom: 5% !important; 195 | width: 90% !important; 196 | margin: auto !important; 197 | border-radius: 100px !important; 198 | padding: 0px !important; 199 | backdrop-filter: none !important; 200 | } 201 | .itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) { 202 | height: 10px !important; 203 | background: var(--primary-background-transparent) !important; 204 | backdrop-filter: blur(2px) !important; 205 | border-radius: 100px !important; 206 | } 207 | .innerCardFooterClear { 208 | background-color: none !important; 209 | } 210 | .innerCardFooter .cardText { 211 | padding: 0 0 0 10px !important 212 | } 213 | .cardImageContainer .innerCardFooter .itemProgressBar .itemProgressBarForeground { 214 | background: var(--primary-accent-color) !important; 215 | } 216 | .itemProgressBarForeground { 217 | border-radius: 100px !important; 218 | } 219 | .transcodingProgress > div { 220 | background-color: hsla(0,0%,100%,.2) !important; 221 | } 222 | .activeSession .backgroundProgress, 223 | .activeSession .playbackProgress, 224 | .activeSession .transcodingProgress { 225 | bottom: 10px !important; 226 | border-radius: 100px !important; 227 | width: 90% !important; 228 | left: 5% !important; 229 | } 230 | .sessionNowPlayingInnerContent { 231 | padding-bottom: 12px !important; 232 | padding-inline: 17px !important; 233 | } 234 | .sessionAppInfo { 235 | padding: .5em 0em !important; 236 | } 237 | .sessionNowPlayingInfo { 238 | padding: .8em 0em !important; 239 | } 240 | 241 | 242 | 243 | /* Green watched indicator */ 244 | .playedIndicator { 245 | background: #409843 !important; 246 | } 247 | 248 | 249 | 250 | /* Rounded left drawer buttons */ 251 | .navMenuOption, 252 | .navMenuOption:hover, 253 | .navMenuOption-selected { 254 | border-radius: 100px !important; 255 | width: 85% !important; 256 | margin: auto !important; 257 | text-align: center !important; 258 | height: 45px !important; 259 | margin-top: 3px !important; 260 | margin-bottom: 3px !important; 261 | } 262 | .navMenuOption:hover:not(.navMenuOption-selected) { 263 | background-color: rgba(44, 44, 44, 0.7); 264 | } 265 | /* Center icons and text and shift to the left */ 266 | .navMenuOptionIcon, 267 | .navMenuOptionText { 268 | position: inherit !important; 269 | left: -10% !important; 270 | margin-top: 0 !important; 271 | } 272 | /* Fix for header buttons */ 273 | .layout-desktop .emby-button-foreground { 274 | top: -9px !important; 275 | } 276 | .layout-tv .emby-button-foreground { 277 | top: -14px !important; 278 | } 279 | 280 | 281 | 282 | /* Custom button color */ 283 | .navMenuOption-selected { 284 | background: var(--secondary-accent-color) !important; 285 | color: var(--primary-accent-color) !important; 286 | } 287 | 288 | /* Modified background color */ 289 | html, 290 | .backgroundContainer:not(.withBackdrop):not(.backgroundContainer-transparent), 291 | .noBackdropTransparency .detailPageSecondaryContainer { 292 | background-color: var(--primary-background-color) !important; 293 | } 294 | 295 | 296 | /* Transparent header bar */ 297 | .skinHeader { 298 | background-color: transparent !important; 299 | } 300 | .layout-desktop .skinHeader, 301 | .layout-tv .skinHeader { 302 | padding-top: 1.5em !important; 303 | } 304 | .layout-tv .skinHeader { 305 | padding-bottom: 10px !important; 306 | } 307 | /* Rounded header buttons */ 308 | .headerTabs, 309 | .headerRight { 310 | background-color: var(--primary-background-transparent) !important; 311 | border-radius: 50px !important; 312 | backdrop-filter: blur(var(--blur)) !important; 313 | } 314 | .layout-desktop .headerTabs, 315 | .layout-tv .headerTabs { 316 | margin-bottom: 10px !important; 317 | } 318 | .layout-desktop .headerTabs { 319 | margin-left: 160px !important; 320 | margin-top: -58px !important; 321 | } 322 | /* Button height */ 323 | .headerRight, 324 | .emby-tab-button { 325 | height: 45px !important; 326 | } 327 | /* Lower header and add padding to right buttons */ 328 | .layout-desktop .headerRight { 329 | padding: 0px 5px !important; 330 | } 331 | .layout-tv .headerRight { 332 | padding: 20px 10px !important; 333 | } 334 | /* Move left header back up */ 335 | .layout-desktop .headerLeft 336 | .layout-tv .headerLeft { 337 | position: relative !important; 338 | top: -17px !important; 339 | } 340 | /* Mobile fixes */ 341 | .layout-mobile .headroom--unpinned { 342 | transform: translateY(-50%); 343 | } 344 | .layout-mobile .sectionTabs { 345 | margin-left: auto !important; 346 | margin-right: auto !important; 347 | width: auto !important; 348 | max-width: 100% !important; 349 | } 350 | .layout-mobile .emby-button-foreground { 351 | top: -2px !important; 352 | } 353 | .layout-mobile .skinHeader { 354 | transition: .1s !important; 355 | } 356 | .layout-mobile .mainDrawer { 357 | background: var(--secondary-background-color) !important; 358 | } 359 | .layout-mobile .headroom--unpinned { 360 | transform: none; 361 | } 362 | .layout-mobile .headroom--unpinned:has(.headerTabs.sectionTabs:not(.hide)) { 363 | transform: translateY(-50%); 364 | } 365 | .layout-mobile .headroom--not-top { 366 | background: var(--primary-background-transparent) !important; 367 | backdrop-filter: blur(var(--blur)) !important; 368 | } 369 | .layout-mobile .headroom--not-top .headerRight { 370 | background: none !important; 371 | } 372 | .layout-mobile .headroom--top, 373 | .layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) { 374 | background: transparent !important; 375 | backdrop-filter: none !important; 376 | } 377 | .layout-mobile .headroom--top .headerRight , 378 | .layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) .headerRight { 379 | background: var(--primary-background-transparent) !important; 380 | } 381 | @media (max-width: 380px) { 382 | .layout-mobile .pageTitle:not(.pageTitleWithLogo):not(:empty) { 383 | position: absolute !important; 384 | margin-left: 50% !important; 385 | transform: translate(-50%, 0) !important; 386 | top: 60px !important; 387 | } 388 | .layout-mobile .headerTop:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) { 389 | -webkit-align-items: start !important; 390 | align-items: start !important; 391 | } 392 | .layout-mobile .skinHeader:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) { 393 | height: 110px !important; 394 | } 395 | .layout-mobile .skinHeader:has(.pageTitle:not(.pageTitleWithLogo):not(:empty)):has(.sectionTabs:not(.hide)) { 396 | height: 140px !important; 397 | } 398 | .layout-mobile .libraryPage:not(.noSecondaryNavPage) { 399 | padding-top: 9.5em !important; 400 | } 401 | .layout-mobile .headroom--unpinned:has(.headerTabs.sectionTabs:not(.hide)):has(.pageTitle:not(.pageTitleWithLogo):not(:empty)) { 402 | transform: translateY(-60%); 403 | } 404 | } 405 | 406 | 407 | 408 | /* Player modifications */ 409 | .upNextContainer:not(#skipIntro), .toastVisible { 410 | backdrop-filter: blur(var(--blur)) !important; 411 | } 412 | .upNextContainer:not(#skipIntro) { 413 | border-radius: var(--rounded-cards) !important; 414 | background-color: rgba(0, 0, 0, 0.6) !important; 415 | } 416 | .upNextContainer { 417 | margin: 4% !important; 418 | } 419 | .toastVisible { 420 | border-radius: 30px !important; 421 | background-color: var(--primary-background-transparent) !important; 422 | } 423 | .sliderBubble { 424 | border-radius: var(--rounded-cards) !important; 425 | background-color: var(--secondary-background-transparent) !important; 426 | backdrop-filter: blur(var(--blur)) !important; 427 | } 428 | .sliderBubble:not(.osdVolumeSliderContainer .sliderBubble):has(.chapterThumbContainer) { 429 | background-color: #ffffff00 !important; 430 | top: 25px !important; 431 | backdrop-filter: unset !important; 432 | } 433 | @supports selector(div:not(.parent .child)) { 434 | .mdl-slider-background-flex:not(.layout-mobile .nowPlayingBar .mdl-slider-background-flex) { 435 | height: 10px !important; 436 | margin-top: -5px !important; 437 | border-radius: 100px !important; 438 | background: hsla(0,0%,100%,.2) !important; 439 | } 440 | } 441 | @supports not selector(div:not(.parent .child)) { 442 | .mdl-slider-background-flex { 443 | height: 10px !important; 444 | margin-top: -5px !important; 445 | border-radius: 100px !important; 446 | background: hsla(0,0%,100%,.2) !important; 447 | } 448 | } 449 | .mdl-slider-background-lower { 450 | border-radius: 100px !important; 451 | background-color: var(--primary-accent-color) !important; 452 | } 453 | /* Moz */ 454 | .mdl-slider::-moz-range-thumb { 455 | background: #ffffff00 !important; 456 | height: 10px !important; 457 | width: 8px !important; 458 | border-radius: 2px !important; 459 | } 460 | .mdl-slider-hoverthumb:hover::-moz-range-thumb { 461 | transform: scaleY(2); 462 | background: #fff !important; 463 | } 464 | /* Webkit */ 465 | .mdl-slider::-webkit-slider-thumb { 466 | background: #ffffff00 !important; 467 | height: 10px !important; 468 | width: 8px !important; 469 | border-radius: 2px !important; 470 | } 471 | .mdl-slider-hoverthumb:hover::-webkit-slider-thumb { 472 | transform: scaleY(2); 473 | background: #fff !important; 474 | } 475 | 476 | .mdl-slider-background-upper { 477 | border-top-right-radius: 100px !important; 478 | border-bottom-right-radius: 100px !important; 479 | background: hsla(0,0%,100%,.2) !important; 480 | transform: translateX(-3px) !important; 481 | } 482 | .iconOsdProgressInner { 483 | background: var(--primary-accent-color) !important; 484 | } 485 | 486 | /* Up next card */ 487 | .upNextDialog-buttons .upNextDialog-button { 488 | transition: .2s !important; 489 | } 490 | .upNextDialog-buttons .upNextDialog-button:hover { 491 | transform: scale(1.1); 492 | } 493 | 494 | /* Support for Jellyscrub plugin */ 495 | .chapterThumbContainer { 496 | background: none !important; 497 | border-radius: var(--rounded-cards) !important; 498 | box-shadow: unset !important; 499 | } 500 | .chapterThumb { 501 | border-radius: var(--rounded-cards) !important; 502 | margin-bottom: 47px !important; 503 | box-shadow: 0 0 1.9vh #000 !important; 504 | } 505 | .chapterThumbTextContainer { 506 | background: none !important; 507 | } 508 | .chapterThumbText { 509 | text-align: center !important; 510 | } 511 | .chapterThumbText-dim { 512 | display: none !important; 513 | } 514 | 515 | /* Support for IntroSkipper plugin */ 516 | #skipIntro .btnSkipIntro { 517 | transition: 0.2s; 518 | border-radius: 100px !important; 519 | backdrop-filter: blur(var(--blur)) !important; 520 | } 521 | #skipIntro .btnSkipIntro:hover { 522 | transition: .2s; 523 | transform: scale(1.05); 524 | background: var(--primary-accent-color) !important; 525 | } 526 | #skipIntro .paper-icon-button-light:hover:not(:disabled) { 527 | color: #FFF !important; 528 | } 529 | .sliderContainer:has(.mdl-slider-hoverthumb:not(:hover)) .sliderMarker { 530 | opacity: 0 !important; 531 | transition: 0.2s !important; 532 | } 533 | .sliderContainer:has(.mdl-slider-hoverthumb:hover) .sliderMarker { 534 | opacity: 1 !important; 535 | transition: 0.2s !important; 536 | height: 10px !important; 537 | transform: translate3d(0,40%,0) !important; 538 | -webkit-transform: translate3d(0,40%,0) !important; 539 | } 540 | .sliderMarker.watched { 541 | background-color: #FFFFFF90 !important; 542 | z-index: 10 !important; 543 | } 544 | #skipIntro .upNextContainer { 545 | padding: 0px !important; 546 | } 547 | #skipIntro .emby-button { 548 | background: rgba(30, 30, 30, 0.7) !important; 549 | } 550 | #skipIntro .emby-button:hover { 551 | box-shadow: 0 0 8px rgba(var(--primary-accent-color), 0.6) !important; 552 | } 553 | #skipIntro .emby-button:focus { 554 | background: rgba(30, 30, 30, 0.7) !important; 555 | box-shadow: unset !important; 556 | } 557 | /* Support for InPlayerEpisodePreview plugin */ 558 | .layout-desktop #popupFocusContainer { 559 | padding: 10px !important; 560 | } 561 | .layout-desktop #popupTitleContainer { 562 | margin: 0px !important; 563 | padding: 10px 0px 10px 0px !important; 564 | } 565 | .layout-desktop #popupContentContainer .previewEpisodeDetails { 566 | position: unset !important; 567 | margin: 0px 0px 6px 10px !important; 568 | font-size: 13.5px !important; 569 | } 570 | .layout-desktop #popupContentContainer .previewEpisodeTitle { 571 | font-size: 16.5px !important; 572 | } 573 | .layout-desktop #popupContentContainer .listItem { 574 | padding: .25em .25em .25em .5em !important; 575 | } 576 | 577 | /* Modify player buttons */ 578 | .material-icons.fast_rewind::before { 579 | content: "\e059"; 580 | } 581 | .material-icons.fast_forward::before { 582 | content: "\e057"; 583 | } 584 | .material-icons.audiotrack::before { 585 | content: "\e91f"; 586 | } 587 | 588 | 589 | 590 | /* Settings and dashboard modifications */ 591 | .emby-input, 592 | .emby-textarea, 593 | .paperList, 594 | .listItem:hover, 595 | .subtitleappearance-preview { 596 | border-radius: var(--rounded-cards) !important; 597 | } 598 | .button-submit, 599 | .emby-select, 600 | .checkboxOutline, 601 | .btnRefresh, 602 | #btnShutdown, 603 | .raised { 604 | border-radius: 100px !important; 605 | } 606 | .button-submit { 607 | background: var(--primary-accent-color) !important; 608 | } 609 | /* Modify username placement on profile page */ 610 | .layout-desktop #userProfilePage .readOnlyContent div:not([class]), div[class=""]{ 611 | align-items: initial !important; 612 | } 613 | .layout-desktop .username { 614 | margin: 0px 0px 10px 10px !important; 615 | } 616 | /* Red shutdown button */ 617 | #btnShutdown { 618 | background: #AE3739 !important; 619 | } 620 | /* Remove border under certain dashboard items */ 621 | .listItem-border { 622 | border: 0 !important; 623 | } 624 | /* Add padding to list items */ 625 | .layout-desktop .listItem, 626 | .layout-tv .listItem { 627 | padding-inline: 15px !important; 628 | } 629 | /* Rounded dashboard cards */ 630 | .cardBox { 631 | border-radius: var(--rounded-cards) !important; 632 | } 633 | /* Removed ugliness of border-card styling */ 634 | .layout-desktop fieldset.verticalSection-extrabottompadding, 635 | .layout-tv fieldset.verticalSection-extrabottompadding { 636 | border-radius: var(--rounded-cards) !important; 637 | border-color: #3B3B3B !important; 638 | padding: 10px 35px !important; 639 | } 640 | /* Rounded tab selections in dashboard */ 641 | .layout-desktop .localnav { 642 | border-radius: 100px !important; 643 | background: #202020 !important; 644 | width: fit-content !important; 645 | } 646 | .layout-desktop a[data-role="button"] { 647 | background: none !important; 648 | } 649 | .layout-desktop div[data-role="controlgroup"] a.ui-btn-active { 650 | background: var(--primary-accent-color) !important; 651 | border-radius: 100px !important; 652 | } 653 | .layout-desktop .dashboardDocument .mainAnimatedPage { 654 | left: 260px !important; 655 | } 656 | #libraryDisplayPage, 657 | #metadataImagesConfigurationPage, 658 | #metadataNfoPage { 659 | margin-top: 40px !important; 660 | } 661 | #mediaLibraryPage { 662 | margin-top: 10px !important; 663 | } 664 | /* Re-align active devices in dashboard */ 665 | .activeDevices.itemsContainer { 666 | margin: 0px !important; 667 | } 668 | .playbackProgress > div { 669 | background: var(--primary-accent-color) !important; 670 | } 671 | /* IntroSkipper settings */ 672 | .layout-desktop summary { 673 | border-radius: 100px !important; 674 | } 675 | .layout-desktop fieldset.verticalSection-extrabottompadding, 676 | .layout-tv fieldset.verticalSection-extrabottompadding { 677 | padding: 10px 35px 20px 35px !important; 678 | } 679 | #intro_reqs, 680 | #edl, 681 | #silence, 682 | #support { 683 | padding-bottom: 10px !important; 684 | } 685 | /* Dashboard fixes for 10.9.x */ 686 | .layout-desktop #userProfilesPage { 687 | left: 260px !important; 688 | } 689 | .MuiAlert-message { 690 | color: #fff !important; 691 | } 692 | .MuiDataGrid-root.MuiDataGrid-withBorderColor { 693 | border-radius: var(--rounded-cards) !important; 694 | } 695 | .infoBanner { 696 | border-radius: var(--rounded-cards) !important; 697 | } 698 | .MuiToggleButton-root.MuiToggleButtonGroup-groupedHorizontal { 699 | border-radius: var(--rounded-cards); 700 | padding-inline: 15px !important; 701 | } 702 | .MuiAppBar-root.MuiAppBar-positionFixed { 703 | padding: 10px !important; 704 | } 705 | .MuiAppBar-root.MuiAppBar-positionFixed.MuiAppBar-colorPrimary { 706 | background: var(--primary-background-transparent) !important; 707 | backdrop-filter: blur(var(--blur)) !important; 708 | } 709 | .MuiList-root.MuiList-subheader { 710 | padding-left: 10px !important; 711 | } 712 | .MuiList-subheader .MuiListItem-root.MuiListItem-gutters { 713 | width: 85% !important; 714 | margin-inline: auto !important; 715 | } 716 | /* Fix for plugins section of dashboard */ 717 | [aria-labelledby="plugins-subheader"].MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters { 718 | width: 85% !important; 719 | margin-inline: auto !important; 720 | } 721 | .MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters { 722 | border-radius: 100px !important; 723 | margin: 2px 0px !important; 724 | transition: .2s !important; 725 | height: 45px !important 726 | } 727 | .MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:not(.Mui-selected) .MuiListItemIcon-root, 728 | .MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:not(.Mui-selected) { 729 | color: #D1D1D1 730 | } 731 | .MuiList-subheader .MuiListItemButton-root.MuiListItemButton-gutters:hover:not(.Mui-selected) { 732 | transform: scale(1.05) !important; 733 | background: rgba(44, 44, 44, 0.7) !important; 734 | } 735 | .MuiListItemButton-root.Mui-selected { 736 | background: var(--secondary-accent-color) !important; 737 | } 738 | .MuiListItemButton-root.Mui-selected .MuiListItemIcon-root, 739 | .MuiListItemButton-root.Mui-selected { 740 | color: var(--primary-accent-color) !important; 741 | } 742 | .MuiPaper-root.MuiDrawer-paperAnchorDockedLeft { 743 | border-right: none !important; 744 | background: var(--secondary-background-color) !important; 745 | width: 250px !important; 746 | } 747 | .MuiListItemIcon-root.MuiSvgIcon-fontSizeMedium { 748 | color: inherit !important; 749 | } 750 | .MuiPaper-root.MuiPopover-paper { 751 | background: #252525 !important; 752 | color: #D1D1D1 !important; 753 | border-radius: var(--rounded-cards) !important; 754 | } 755 | .listItemIcon:not(.listItemIcon-transparent):not(.notification_important) { 756 | background: var(--secondary-accent-color) !important; 757 | color: var(--primary-accent-color) !important; 758 | } 759 | .MuiList-root:not(.MuiList-subheader) .MuiListItemButton-root.MuiListItemButton-gutters { 760 | padding: 20px 38px 10px 38px !important; 761 | } 762 | .MuiCollapse-root.MuiCollapse-vertical .MuiListItemButton-root.MuiListItemButton-gutters { 763 | width: 85% !important; 764 | margin-inline: auto !important; 765 | padding: 8px 16px !important; 766 | } 767 | /* Dynamic colors for "Active Devices" section to respect theme */ 768 | .defaultCardBackground1 { 769 | background-color: var(--primary-alt1) !important; 770 | } 771 | .defaultCardBackground2 { 772 | background-color: var(--primary-alt2) !important; 773 | } 774 | .defaultCardBackground3 { 775 | background-color: var(--primary-alt3) !important; 776 | } 777 | .defaultCardBackground4 { 778 | background-color: var(--primary-alt4) !important; 779 | } 780 | .defaultCardBackground5 { 781 | background-color: var(--primary-alt5) !important; 782 | } 783 | 784 | 785 | 786 | /* Metadata editor fixes */ 787 | .layout-desktop .editPageSidebar { 788 | width: 25vw !important; 789 | } 790 | .layout-desktop .editPageInnerContent { 791 | width: 74vw !important; 792 | } 793 | .jstree-default-large .jstree-node { 794 | line-height: 35px !important; 795 | } 796 | .jstree-default .jstree-wholerow-clicked { 797 | background: var(--secondary-accent-color) !important; 798 | } 799 | .jstree-wholerow-hovered { 800 | background: var(--primary-background-transparent) !important; 801 | } 802 | .jstree-children { 803 | margin-left: -10px !important; 804 | } 805 | #editItemMetadataPage .btnHeaderSave { 806 | background: var(--primary-accent-color) !important; 807 | border-radius: 100px !important; 808 | height: 40px !important; 809 | color: white !important; 810 | } 811 | 812 | 813 | 814 | /* Resize show/movie image on details page */ 815 | .layout-desktop .detailImageContainer .card { 816 | top: 9em !important; 817 | width: 18.3vw !important; 818 | } 819 | 820 | /* Re-position content on details page */ 821 | .layout-desktop .detailSection { 822 | margin-right: 0 !important; 823 | } 824 | .layout-desktop .detailPageContent { 825 | padding-left: 3.3% !important; 826 | } 827 | 828 | /* Re-position logo */ 829 | .layout-desktop .detailLogo, 830 | .layout-tv .detailLogo { 831 | right: 0 !important; 832 | left: 4% !important; 833 | top: 10% !important; 834 | } 835 | 836 | /* Transparent ribbon bar */ 837 | .detailRibbon { 838 | background: transparent !important; 839 | } 840 | 841 | /* Add card around top-right buttons */ 842 | .mainDetailButtons { 843 | background: var(--primary-background-transparent) !important; 844 | border-radius: 100px !important; 845 | backdrop-filter: blur(var(--blur)) !important; 846 | } 847 | 848 | /* Add card around groups section */ 849 | .layout-desktop .detailsGroupItem { 850 | background: var(--secondary-background-color) !important; 851 | padding: 10px 20px !important; 852 | border-radius: 20px !important; 853 | width: fit-content !important; 854 | max-width: max-content !important; 855 | display: flex; 856 | gap: 1em; 857 | } 858 | 859 | /* Fix for group section labels */ 860 | .detailsGroupItem .label, .trackSelections .selectContainer .selectLabel { 861 | min-width: 75px; 862 | flex-basis: unset; 863 | margin: unset; 864 | } 865 | 866 | /* Alternative mobile group section card */ 867 | .layout-mobile .itemDetailsGroup { 868 | background: var(--secondary-background-color) !important; 869 | padding: 15px 20px 5px 20px !important; 870 | border-radius: var(--rounded-cards) !important; 871 | } 872 | .layout-mobile .detailPageContent { 873 | padding-right: 0 !important; 874 | } 875 | 876 | /* Add card around description */ 877 | .layout-desktop .detailSectionContent { 878 | background: var(--secondary-background-color) !important; 879 | border-radius: var(--rounded-cards) !important; 880 | padding: 40px 20px 10px 20px !important; 881 | margin-top: 50px !important; 882 | } 883 | .layout-mobile .detailSectionContent { 884 | background: var(--secondary-background-color) !important; 885 | border-radius: var(--rounded-cards) !important; 886 | padding: 10px 20px !important; 887 | } 888 | 889 | /* Add card around track selection */ 890 | .trackSelections { 891 | background: var(--secondary-background-color) !important; 892 | border-radius: var(--rounded-cards) !important; 893 | padding: 10px 20px !important; 894 | margin-top: 20px !important; 895 | } 896 | 897 | /* Fix for track select dropdowns */ 898 | .trackSelections .selectContainer .detailTrackSelect { 899 | padding: 0 10px; 900 | margin-left: 10px !important; 901 | } 902 | 903 | /* Re-position title */ 904 | .layout-desktop .infoWrapper { 905 | margin-top: 245px !important; 906 | margin-left: 20.8vw !important; 907 | } 908 | .layout-desktop .detailPagePrimaryContainer { 909 | padding-left: 3.3% !important; 910 | } 911 | .layout-desktop .nameContainer { 912 | position: absolute !important; 913 | margin-top: -48px !important; 914 | } 915 | .layout-desktop .itemMiscInfo { 916 | position: absolute !important; 917 | margin-left: 12px !important; 918 | margin-top: 16px !important; 919 | } 920 | 921 | /* Move description box */ 922 | .layout-desktop .detailPagePrimaryContent { 923 | padding-left: 20.4vw !important; 924 | } 925 | .layout-mobile .detailPagePrimaryContent { 926 | padding-right: 5% !important; 927 | } 928 | /* Padding for 2:3 posters */ 929 | .layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .portraitCard) .detailPagePrimaryContent { 930 | min-height: 29vw !important; 931 | } 932 | /* Padding for 1:1 posters */ 933 | .layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .squareCard) .detailPagePrimaryContent { 934 | min-height: 20vw !important; 935 | } 936 | /* Padding for 16:9 posters */ 937 | .layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .backdropCard) .detailPagePrimaryContent { 938 | min-height: 12vw !important; 939 | } 940 | /* Fix for JMP */ 941 | @supports not selector(:has(*)) { 942 | .layout-desktop .detailPageWrapperContainer .detailPagePrimaryContent { 943 | min-height: 29vw !important; 944 | } 945 | } 946 | 947 | /* Move track selection box */ 948 | .detailSection { 949 | display: -webkit-box; 950 | display: -moz-box; 951 | display: box; 952 | -webkit-box-orient: vertical; 953 | -moz-box-orient: vertical; 954 | box-orient: vertical; 955 | } 956 | .detailSection .detailSectionContent { 957 | -webkit-box-ordinal-group: 1; 958 | -moz-box-ordinal-group: 1; 959 | box-ordinal-group: 1; 960 | } 961 | .detailSection .recordingFields { 962 | -webkit-box-ordinal-group: 2; 963 | -moz-box-ordinal-group: 2; 964 | box-ordinal-group: 2; 965 | } 966 | .detailSection .trackSelections { 967 | -webkit-box-ordinal-group: 3; 968 | -moz-box-ordinal-group: 3; 969 | box-ordinal-group: 3; 970 | } 971 | .detailSection .itemDetailsGroup { 972 | -webkit-box-ordinal-group: 4; 973 | -moz-box-ordinal-group: 4; 974 | box-ordinal-group: 4; 975 | } 976 | /* Move episode title */ 977 | .layout-desktop .nameContainer { 978 | display: -webkit-box; 979 | display: -moz-box; 980 | display: box; 981 | -webkit-box-orient: horizontal; 982 | -moz-box-orient: horizontal; 983 | box-orient: horizontal; 984 | } 985 | .layout-desktop .nameContainer .parentName { 986 | -webkit-box-ordinal-group: 1; 987 | -moz-box-ordinal-group: 1; 988 | box-ordinal-group: 1; 989 | } 990 | .layout-desktop .nameContainer .itemName { 991 | -webkit-box-ordinal-group: 2; 992 | -moz-box-ordinal-group: 2; 993 | box-ordinal-group: 2; 994 | } 995 | /* Modify original title / episode name position */ 996 | .layout-desktop .nameContainer .itemName.originalTitle { 997 | margin: .5em 20px !important; 998 | } 999 | .layout-desktop .nameContainer .itemName.infoText.subtitle { 1000 | margin: .5em 20px !important; 1001 | padding: 0px !important; 1002 | } 1003 | /* Modify play button */ 1004 | .layout-desktop .mainDetailButtons .btnPlay::after { 1005 | content: "Play" !important; 1006 | } 1007 | .layout-desktop .mainDetailButtons .btnPlay { 1008 | position: relative !important; 1009 | margin-right: -85px !important; 1010 | padding-right: 20px !important; 1011 | right: 110px !important; 1012 | background: var(--primary-accent-color) !important; 1013 | border-radius: 100px !important; 1014 | color: var(--secondary-background-color) !important; 1015 | } 1016 | .layout-desktop .mainDetailButtons .detailButton { 1017 | -webkit-flex-direction: row !important; 1018 | flex-direction: row !important; 1019 | } 1020 | /* Change crop for list item images */ 1021 | .listItemImage { 1022 | background-size: contain !important; 1023 | border-radius: var(--rounded-cards); 1024 | } 1025 | /* Move up content if no backdrop image is present 1026 | @supports selector(:has(*)) { 1027 | .layout-desktop:not(:has(.backdropContainer .backdropImage)) #itemBackdrop { 1028 | height: 20vh !important; 1029 | } 1030 | } 1031 | */ 1032 | 1033 | 1034 | /* Live TV */ 1035 | /* Modified background color of active guide cells */ 1036 | .programCell-active { 1037 | background: var(--secondary-background-color) !important; 1038 | } 1039 | /* Repositioned record button */ 1040 | .recordingFields { 1041 | margin: 5px 0 -7px 0 !important; 1042 | } 1043 | .recordingButton { 1044 | height: 40px !important; 1045 | } 1046 | .recordingIcon { 1047 | color: red !important; 1048 | } 1049 | /* Remove overlapping text */ 1050 | .itemMiscInfo.itemMiscInfo-secondary { 1051 | margin-left: 65px !important; 1052 | } 1053 | 1054 | 1055 | 1056 | /* Music Player */ 1057 | .layout-desktop .appfooter { 1058 | margin-left: 250px !important; 1059 | } 1060 | .layout-desktop .appfooter .nowPlayingBarInfoContainer { 1061 | margin-left: 10px !important; 1062 | } 1063 | .layout-desktop .volumeOsd { 1064 | border-radius: var(--rounded-cards) !important; 1065 | background: var(--secondary-background-transparent) !important; 1066 | } 1067 | .layout-desktop .nameContainer .musicParentName { 1068 | margin-top: 18px !important; 1069 | margin-right: 22px !important; 1070 | } 1071 | .layout-desktop .appfooter .nowPlayingBar { 1072 | margin-top: 20px !important; 1073 | } 1074 | .layout-desktop .appfooter .nowPlayingBar .nowPlayingBarPositionContainer { 1075 | top: -15px !important; 1076 | } 1077 | 1078 | 1079 | 1080 | /* Fix for scaling issues */ 1081 | @media (width: 1600px) { 1082 | .layout-desktop .headerRight { 1083 | margin-bottom: 0 !important; 1084 | } 1085 | .layout-desktop .emby-button-foreground { 1086 | top: -4px !important; 1087 | } 1088 | } 1089 | @media (max-width: 1599px) { 1090 | .layout-desktop .pageTitleWithLogo { 1091 | margin-left: 25px !important; 1092 | } 1093 | .layout-desktop .headerTabs { 1094 | margin-top: -65px !important; 1095 | } 1096 | .layout-desktop .headerRight { 1097 | margin-right: 15px !important; 1098 | } 1099 | .layout-desktop .sectionTabs { 1100 | width: auto !important; 1101 | align-self: center !important; 1102 | } 1103 | .layout-desktop .emby-button-foreground { 1104 | top: -2px !important; 1105 | } 1106 | } 1107 | 1108 | 1109 | 1110 | /* Fixes for TV Layout */ 1111 | .layout-tv .sectionTabs { 1112 | width: auto !important; 1113 | } 1114 | .layout-tv .headerLeft { 1115 | padding: 5px !important; 1116 | } 1117 | 1118 | 1119 | 1120 | /* Login page */ 1121 | .layout-desktop #loginPage { 1122 | display: flex; 1123 | justify-content: center; 1124 | align-items: center; 1125 | } 1126 | .layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y { 1127 | background: var(--secondary-background-color) !important; 1128 | width: 400px !important; 1129 | border-radius: 25px !important; 1130 | padding: 50px !important; 1131 | } 1132 | /* Fix padding if login disclaimer is not present */ 1133 | .layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y:not(:has(.loginDisclaimer p)) { 1134 | padding-bottom: 100px !important; 1135 | } 1136 | 1137 | .layout-desktop #loginPage .manualLoginForm .btnCancel { 1138 | position: absolute !important; 1139 | background: none !important; 1140 | width: 100px !important; 1141 | margin-left: -10px !important; 1142 | margin-top: 70px !important; 1143 | text-align: left !important; 1144 | } 1145 | .layout-desktop #loginPage .visualLoginForm { 1146 | position: relative !important; 1147 | background: var(--secondary-background-color) !important; 1148 | z-index: 1000 !important; 1149 | } 1150 | .layout-desktop #loginPage .btnForgotPassword { 1151 | background: none !important; 1152 | font-weight: normal !important; 1153 | width: 150px !important; 1154 | text-align: right !important; 1155 | position: absolute !important; 1156 | margin-left: 255px !important; 1157 | margin-top: -195px !important; 1158 | font-size: smaller !important; 1159 | color: rgba(255, 255, 255, 0.5) !important; 1160 | z-index: 1 !important; 1161 | } 1162 | .layout-desktop #loginPage .loginDisclaimerContainer { 1163 | top: 130px !important; 1164 | position: relative !important; 1165 | left: -50px !important; 1166 | width: 500px !important; 1167 | margin-top: -35px !important; 1168 | } 1169 | .layout-desktop #loginPage .squareCard { 1170 | width: 25% !important; 1171 | font-size: smaller !important; 1172 | } 1173 | @media (max-width: 100em) { 1174 | .layout-desktop #loginPage .squareCard { 1175 | width: 20% !important; 1176 | } 1177 | .layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y { 1178 | width: 600px !important; 1179 | } 1180 | .layout-desktop #loginPage .btnForgotPassword { 1181 | margin-left: 450px !important; 1182 | } 1183 | .layout-desktop #loginPage .disclaimerContainer { 1184 | width: 700px !important; 1185 | } 1186 | } 1187 | @media (max-width: 87.5em) { 1188 | .layout-desktop #loginPage .squareCard { 1189 | width: 20% !important; 1190 | } 1191 | } 1192 | @media (max-width: 75em) { 1193 | .layout-desktop #loginPage .squareCard { 1194 | width: 20% !important; 1195 | } 1196 | } 1197 | @media (max-width: 43.75em) { 1198 | .layout-desktop #loginPage .squareCard { 1199 | width: 20% !important; 1200 | } 1201 | } 1202 | 1203 | 1204 | 1205 | /* Dialog box */ 1206 | .dialog { 1207 | background-color: var(--secondary-background-color) !important; 1208 | } 1209 | .actionSheetTitle { 1210 | margin: 10px 20px !important; 1211 | } 1212 | 1213 | 1214 | 1215 | /* Dynamic backdrop support */ 1216 | 1217 | /* Translucent cards */ 1218 | .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailsGroupItem, 1219 | .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailSectionContent, 1220 | .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .trackSelections { 1221 | background: var(--primary-background-transparent) !important; 1222 | backdrop-filter: blur(var(--blur)) !important; 1223 | } 1224 | 1225 | /* Transparent drawer */ 1226 | .layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer { 1227 | background: linear-gradient(to right, #10101090, transparent) !important; 1228 | } 1229 | .layout-desktop:has(#itemDetailPage.noBackdropTransparency) .mainDrawer { 1230 | background: var(--secondary-background-color) !important; 1231 | } 1232 | /* Fix for JMP */ 1233 | @supports not selector(:has(*)) { 1234 | .layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer { 1235 | background: transparent !important; 1236 | } 1237 | .layout-desktop #itemDetailPage.noBackdropTransparency::after { 1238 | position: fixed; 1239 | content: ""; 1240 | top: 0; 1241 | left: 0; 1242 | height: 100%; 1243 | width: 250px; 1244 | background: var(--secondary-background-color); 1245 | } 1246 | } 1247 | 1248 | /* Blur buttons */ 1249 | .layout-desktop:has(.backgroundContainer.withBackdrop) .navMenuOption-selected { 1250 | backdrop-filter: blur(var(--blur)) !important; 1251 | } 1252 | .layout-desktop:has(.backgroundContainer.withBackdrop) .navMenuOption:hover:not(.navMenuOption-selected) { 1253 | background: var(--primary-background-transparent) !important; 1254 | backdrop-filter: blur(var(--blur)) !important; 1255 | } -------------------------------------------------------------------------------- /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-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 | } -------------------------------------------------------------------------------- /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-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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | 11 | homepage 12 | homepage-backdrops 13 | details 14 | details-backdrops 15 | movies 16 | dashboard 17 | login 18 | 19 | ### Base Theme 20 | `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');` 21 | 22 | ### Options (Add these below the base theme) 23 | - Disable static left drawer 24 | - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');` 25 | - Themes: 26 | - Seafoam 27 | - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-seafoam.css');` 28 | - seafoam-theme 29 | - Coral 30 | - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css');` 31 | - coral-theme 32 | - Snow 33 | - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');` 34 | - snow-theme 35 | - OLED 36 | - `@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-oled.css');` 37 | - homepage-oled 38 | - details-oled 39 | 40 | --- 41 | 42 | ### **Installation:** 43 | 44 | --- 45 | 46 | **Server-wide install:** 47 | * Click the hamburger icon (Top left) 48 | * Navigate to "Dashboard" (If you don't see this, make sure you are signed in to your admin account) 49 | * Navigate to "General" 50 | * Near the bottom, under "Custom CSS code", paste the `@import url` for the base Scyfin theme 51 | * Example: 52 | * install-server-base 53 | * Optional - Paste the `@import url` for any options / themes you may want 54 | * Example: 55 | * install-server-options 56 | * Click "Save" 57 | 58 | --- 59 | 60 | **Single client install:** 61 | * Click the hamburger icon (Top left) 62 | * Navigate to "Settings" 63 | * Navigate to "Display" 64 | * Near the middle, under "Custom CSS code", paste the `@import url` for the base Scyfin theme 65 | * Note - 66 | * 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 67 | * Example: 68 | * install-client-base 69 | * Optional - Paste the `@import url` for any options / themes you may want 70 | * Example: 71 | * install-client-options 72 | * Click "Save" 73 | -------------------------------------------------------------------------------- /images/coral.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/coral.png -------------------------------------------------------------------------------- /images/dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/dashboard.png -------------------------------------------------------------------------------- /images/details-backdrops.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/details-backdrops.png -------------------------------------------------------------------------------- /images/details-oled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/details-oled.png -------------------------------------------------------------------------------- /images/details.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/details.png -------------------------------------------------------------------------------- /images/homepage-backdrops.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/homepage-backdrops.png -------------------------------------------------------------------------------- /images/homepage-oled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/homepage-oled.png -------------------------------------------------------------------------------- /images/homepage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/homepage.png -------------------------------------------------------------------------------- /images/install-client-base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/install-client-base.png -------------------------------------------------------------------------------- /images/install-client-options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/install-client-options.png -------------------------------------------------------------------------------- /images/install-server-base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/install-server-base.png -------------------------------------------------------------------------------- /images/install-server-options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/install-server-options.png -------------------------------------------------------------------------------- /images/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/login.png -------------------------------------------------------------------------------- /images/movies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/movies.png -------------------------------------------------------------------------------- /images/scyfin-full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/scyfin-full.png -------------------------------------------------------------------------------- /images/scyfin-full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 29 | 34 | 35 | 37 | 41 | 47 | σ 59 | scyfin 70 | 71 | 72 | -------------------------------------------------------------------------------- /images/scyfin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/scyfin.png -------------------------------------------------------------------------------- /images/scyfin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 28 | 31 | 32 | 34 | 38 | 44 | σ 56 | 57 | 58 | -------------------------------------------------------------------------------- /images/seafoam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/seafoam.png -------------------------------------------------------------------------------- /images/snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loof2736/scyfin/abe98d6d59e378540ef45b5d33fe853f275323c2/images/snow.png --------------------------------------------------------------------------------