├── .github └── images │ ├── Dashboard.jpg │ ├── Dashboard_Libraries.jpg │ ├── Favourites.jpg │ ├── Favourites_old.jpg │ ├── Homescreen.jpg │ ├── Homescreen_alt.jpg │ ├── Homescreen_old.jpg │ ├── Library_Posterview.jpg │ ├── Library_Posterview_old.jpg │ ├── Library_Thumbview.jpg │ ├── Library_Thumbview_old.jpg │ ├── Logo.png │ ├── MovieOverview.jpg │ ├── Season.jpg │ ├── SeriesOverview.jpg │ ├── SettingsPage.jpg │ ├── Sidemenu.jpg │ └── Subtitles.jpg ├── Medusa.css ├── README.md ├── bg.jpg ├── dashboard_etc.css ├── logo.css ├── main.css └── tweaks.css /.github/images/Dashboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Dashboard.jpg -------------------------------------------------------------------------------- /.github/images/Dashboard_Libraries.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Dashboard_Libraries.jpg -------------------------------------------------------------------------------- /.github/images/Favourites.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Favourites.jpg -------------------------------------------------------------------------------- /.github/images/Favourites_old.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Favourites_old.jpg -------------------------------------------------------------------------------- /.github/images/Homescreen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Homescreen.jpg -------------------------------------------------------------------------------- /.github/images/Homescreen_alt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Homescreen_alt.jpg -------------------------------------------------------------------------------- /.github/images/Homescreen_old.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Homescreen_old.jpg -------------------------------------------------------------------------------- /.github/images/Library_Posterview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Library_Posterview.jpg -------------------------------------------------------------------------------- /.github/images/Library_Posterview_old.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Library_Posterview_old.jpg -------------------------------------------------------------------------------- /.github/images/Library_Thumbview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Library_Thumbview.jpg -------------------------------------------------------------------------------- /.github/images/Library_Thumbview_old.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Library_Thumbview_old.jpg -------------------------------------------------------------------------------- /.github/images/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Logo.png -------------------------------------------------------------------------------- /.github/images/MovieOverview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/MovieOverview.jpg -------------------------------------------------------------------------------- /.github/images/Season.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Season.jpg -------------------------------------------------------------------------------- /.github/images/SeriesOverview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/SeriesOverview.jpg -------------------------------------------------------------------------------- /.github/images/SettingsPage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/SettingsPage.jpg -------------------------------------------------------------------------------- /.github/images/Sidemenu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Sidemenu.jpg -------------------------------------------------------------------------------- /.github/images/Subtitles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/.github/images/Subtitles.jpg -------------------------------------------------------------------------------- /Medusa.css: -------------------------------------------------------------------------------- 1 | @import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css"); 2 | 3 | @import "main.css"; 4 | @import "logo.css"; 5 | @import "tweaks.css"; 6 | @import "dashboard_etc.css"; 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Medusa - A modern CSS theme for Jellyfin 2 | 3 | 4 | ### Home 5 | ![](.github/images/Homescreen.jpg) 6 | 7 | ![](.github/images/Favourites.jpg) 8 | 9 | 10 | ## Usage 11 | Dashboard -> General -> Custom CSS code: 12 | ``` 13 | @import url("https://cdn.jsdelivr.net/gh/Arrow420/Medusa@main/Medusa.css"); 14 | ``` 15 | 16 | 17 | ### Library 18 | ![](.github/images/Library_Posterview.jpg) 19 | 20 | 21 | ### Details Page 22 | ![](.github/images/SeriesOverview.jpg) 23 | 24 | ![](.github/images/Season.jpg) 25 | 26 | ![](.github/images/MovieOverview.jpg) 27 | 28 | 29 | ### Dashboard 30 | ![](.github/images/Dashboard.jpg) 31 | 32 | 33 | ------------------------------ 34 | ### Custom Subtitle styling for Jellyfin Media Player 35 | ![](.github/images/Subtitles.jpg) 36 | Paste into "Settings -> Client Settings -> Other - Manual MPV Configuration": 37 | ``` 38 | sub-font="Segoe UI Semibold" 39 | sub-font-size=38 40 | sub-color="#FFFFFF" 41 | sub-border-size=1.2 42 | sub-shadow-offset=0.2 43 | sub-margin-x=180 44 | sub-margin-y=42 45 | sub-color="#FFFFFF" 46 | sub-border-color="#000000" 47 | sub-shadow-color="#000000" 48 | sub-fix-timing=no 49 | stretch-image-subs-to-screen=no 50 | sub-filter-sdh=yes 51 | sub-filter-sdh-harder=yes 52 | sub-filter-regex-enable=yes 53 | sub-filter-jsre=opensubtitles|addic7ed|subscene|(English - US - SDH)|dreaMaker7|(sync.+?corrected by)|(www\.tvsubtitles\.net) 54 | sub-ass-force-margins=yes 55 | sub-use-margins=no 56 | sub-gray=yes 57 | ``` 58 | -------------------------------------------------------------------------------- /bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/bg.jpg -------------------------------------------------------------------------------- /dashboard_etc.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arrow420/Medusa/7cf90152260a1d601e9e1e4e7957658a69320b08/dashboard_etc.css -------------------------------------------------------------------------------- /logo.css: -------------------------------------------------------------------------------- 1 | .layout-mobile #itemDetailPage .itemBackdrop { 2 | display: block !important 3 | } 4 | 5 | .layout-mobile #itemDetailPage .parentName, 6 | .layout-mobile #itemDetailPage .parentNameLast { 7 | display: block !important; 8 | font-size: 1.6em !important 9 | } 10 | 11 | .layout-mobile #itemDetailPage .detailLogo:not(.hide), 12 | body #itemDetailPage .itemBackdrop { 13 | display: none !important 14 | } 15 | 16 | body #itemDetailPage .parentName, 17 | body #itemDetailPage .parentNameLast { 18 | font-size: 0 !important 19 | } 20 | 21 | body #itemDetailPage .nameContainer .parentName a { 22 | border-radius: 0 !important; 23 | display: block; 24 | font-size: 0; 25 | height: 16vh; 26 | left: 32.435vw; 27 | position: absolute; 28 | top: -8vw; 29 | width: 25vw; 30 | } 31 | 32 | body #itemDetailPage .detailRibbon { 33 | height: -moz-fit-content; 34 | height: fit-content; 35 | margin-top: 0 36 | } 37 | 38 | body #itemDetailPage .detailLogo:not(.hide) { 39 | background-position: 0; 40 | display: block !important; 41 | flex-grow: 0; 42 | flex-shrink: 0; 43 | margin-left: 32.425vw; 44 | margin-top: 0 !important; 45 | position: static 46 | } 47 | 48 | body #itemDetailPage .detailLogo.hide+.detailPageWrapperContainer > .detailPagePrimaryContainer { 49 | margin-top: 0vh !important; 50 | } 51 | 52 | body #itemDetailPage .detailLogo.hide+.detailPageWrapperContainer > .detailPagePrimaryContainer > .infoWrapper > .nameContainer > .itemName { 53 | display: block !important; 54 | font-size: 2.5em !important 55 | } 56 | 57 | body #itemDetailPage:has(.detailLogo.hide) { 58 | padding-top: 12em !important; 59 | } -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --accent1-light: #a95bc2; 3 | --accent1-dark: #3f2348; 4 | --accent1-light-opacity1: rgba(169, 91, 194, .4); 5 | --accent2-light: #00a4db; 6 | --accent2-dark: #003d52 7 | } 8 | 9 | .withTabs .content-primary { 10 | padding-top: 1em !important 11 | } 12 | 13 | .scrollY { 14 | mask-image: none; 15 | -webkit-mask-image: none; 16 | padding: 1em 0 17 | } 18 | 19 | .pageTabContent { 20 | padding: 0 1em 21 | } 22 | 23 | .appfooter { 24 | -webkit-backdrop-filter: blur(30px); 25 | backdrop-filter: blur(30px); 26 | background: rgba(0, 0, 0, .65) 27 | } 28 | 29 | ::-moz-selection { 30 | background: var(--accent2-light) 31 | } 32 | 33 | ::selection { 34 | background: var(--accent2-light) 35 | } 36 | /* 37 | .layout-desktop body, 38 | .layout-mobile body { 39 | display: flex; 40 | flex-direction: column; 41 | flex-wrap: nowrap; 42 | overflow-y: scroll; 43 | } 44 | 45 | div#reactRoot { 46 | display: flex; 47 | flex-direction: column; 48 | height: 100vh 49 | } 50 | 51 | div[data-role=page].page { 52 | mask-image: linear-gradient(0deg, #000 1em calc(100% - 2em), transparent); 53 | -webkit-mask-image: linear-gradient(0deg, #000 1em calc(100% - 2em), transparent); 54 | overflow: hidden visible; 55 | padding: 2em 0 !important; 56 | position: absolute 57 | } 58 | 59 | div[data-role=page].page#searchPage { 60 | margin-top: 4.4em 61 | } 62 | 63 | .mainAnimatedPages.skinBody { 64 | height: 100%; 65 | position: relative 66 | } 67 | */ 68 | .selectionCommandsPanel { 69 | -webkit-backdrop-filter: blur(25px); 70 | backdrop-filter: blur(25px); 71 | background: rgba(0, 0, 0, .75); 72 | box-shadow: 0 0 15px #000 73 | } 74 | 75 | .emby-button { 76 | position: relative 77 | } 78 | 79 | .emby-button.raised[is=emby-linkbutton]:not(.emby-tab-button), 80 | .emby-button[is=emby-button]:not(.emby-tab-button) { 81 | /*background: #063660;*/ 82 | border-radius: 100vh; 83 | overflow: hidden 84 | } 85 | 86 | .emby-button.raised[is=emby-linkbutton]:not(.emby-tab-button):after, 87 | .emby-button[is=emby-button]:not(.emby-tab-button):after { 88 | background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light)); 89 | content: ""; 90 | height: 100%; 91 | left: 0; 92 | opacity: 0; 93 | position: absolute; 94 | top: 0; 95 | transition: opacity .1s linear; 96 | width: 100%; 97 | z-index: -1 98 | } 99 | 100 | .emby-button.raised[is=emby-linkbutton]:not(.emby-tab-button):focus:after, 101 | .emby-button.raised[is=emby-linkbutton]:not(.emby-tab-button):hover:after, 102 | .emby-button[is=emby-button]:not(.emby-tab-button):focus:after, 103 | .emby-button[is=emby-button]:not(.emby-tab-button):hover:after { 104 | opacity: 1 105 | } 106 | 107 | .emby-button.emby-collapsible-button { 108 | background: transparent !important; 109 | border: 0 !important; 110 | box-shadow: none 111 | } 112 | 113 | .emby-button.emby-collapsible-button:after { 114 | display: none !important 115 | } 116 | 117 | .paper-icon-button-light { 118 | border-radius: 10px 119 | } 120 | 121 | .skip-button { 122 | background: #063660 !important; 123 | border: none; 124 | border-radius: 100vh; 125 | bottom: 12em; 126 | box-shadow: 0 0 15px #000; 127 | color: #fff !important; 128 | font-size: 1.2em; 129 | overflow: hidden; 130 | padding: .5em; 131 | right: 8em 132 | } 133 | 134 | .skip-button:hover { 135 | box-shadow: 0 0 15px #000 !important 136 | } 137 | 138 | .skip-button:after { 139 | background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light)); 140 | content: ""; 141 | height: 100%; 142 | left: 0; 143 | opacity: 0; 144 | position: absolute; 145 | top: 0; 146 | transition: opacity .1s linear; 147 | width: 100%; 148 | z-index: 0 149 | } 150 | 151 | .skip-button .paper-icon-button-light { 152 | color: #fff !important; 153 | z-index: 1 154 | } 155 | 156 | .skip-button:focus:after, 157 | .skip-button:hover:after { 158 | opacity: 1 159 | } 160 | 161 | .dialog .emby-button:not(.cardImageContainer, .actionSheetMenuItem).button-delete { 162 | background: #f70000 !important 163 | } 164 | 165 | .emby-scroller { 166 | margin-top: .5em; 167 | overflow: hidden !important; 168 | } 169 | 170 | .layout-mobile .emby-scroller { 171 | overflow-x: scroll !important 172 | } 173 | 174 | .card { 175 | contain: none !important 176 | } 177 | 178 | .card.overflowSquareCard .cardScalable { 179 | aspect-ratio: 1 180 | } 181 | 182 | .card.overflowSquareCard .cardImageContainer:after { 183 | background-size: contain !important 184 | } 185 | 186 | .cardOverlayContainer { 187 | background: rgba(0, 0, 0, 0.5) 188 | } 189 | 190 | .cardImageIcon { 191 | background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light)); 192 | background-clip: text; 193 | -webkit-background-clip: text; 194 | color: transparent 195 | } 196 | 197 | .cardScalable { 198 | aspect-ratio: auto; 199 | border-radius: 10px 10px 0 0; 200 | box-shadow: none !important; 201 | overflow: hidden; 202 | position: relative; 203 | width: calc(100% + 1px); 204 | } 205 | 206 | .cardScalable>* { 207 | border-radius: 0 !important; 208 | box-shadow: none !important; 209 | width: 100% 210 | } 211 | 212 | .backdropCard > .cardBox > .cardScalable:not(.imageEditorCard) .cardImageContainer { 213 | /*background-size: cover !important;*/ 214 | background-color: rgba(0, 0, 0, .2); 215 | box-shadow: none !important; 216 | } 217 | 218 | .detailImageContainer > .backdropCard > .cardBox > .cardScalable:not(.imageEditorCard) .cardImageContainer { 219 | background-size: cover!important; 220 | } 221 | /* 222 | .cardScalable:not(.imageEditorCard) .cardImageContainer:before { 223 | filter: blur(5px) brightness(50%); 224 | height: calc(100% + 20px); 225 | left: -10px; 226 | top: -10px; 227 | width: calc(100% + 20px); 228 | z-index: -1 229 | } 230 | 231 | .card:focus-visible .cardImageContainer:after, 232 | .card:hover .cardImageContainer:after { 233 | transform: scale(1) 234 | } 235 | /* 236 | .card.personCard { 237 | height: auto 238 | } 239 | 240 | .card.personCard .cardPadder-overflowPortrait .cardImageIcon { 241 | color: transparent !important 242 | } 243 | 244 | .card.personCard .cardBox { 245 | position: relative 246 | } 247 | 248 | .card.personCard .cardOverlayContainer { 249 | background: transparent !important; 250 | z-index: 3 251 | } 252 | 253 | .card.personCard .cardOverlayButton-br { 254 | bottom: .5em; 255 | right: .5em 256 | } 257 | 258 | .card.personCard .cardContent { 259 | border-radius: 10px !important; 260 | filter: brightness(1); 261 | height: calc(100% - 2em); 262 | margin: 1em !important; 263 | transition: filter .25s ease-in-out; 264 | width: calc(100% - 2em) 265 | } 266 | 267 | .card.personCard .cardScalable { 268 | aspect-ratio: 1; 269 | height: auto; 270 | box-shadow: none!important; 271 | } 272 | 273 | .card.personCard .cardScalable .cardImageContainer:after { 274 | background-size: cover 275 | } 276 | */ 277 | .cardBox { 278 | background: rgba(0, 0, 0, .2); 279 | border-radius: 10px; 280 | /*box-shadow: 0 0 .5em rgba(0, 0, 0, .5);*/ 281 | /*margin: .5em 1.5em 1.5em 0 !important;*/ 282 | overflow: hidden; 283 | transition: background .1s 284 | } 285 | 286 | #itemDetailPage .detailImageContainer > .card > .cardBox { 287 | box-shadow: 0 0 .5em rgba(0, 0, 0, .5); 288 | } 289 | 290 | .card:not([data-type=Person]) .cardText-secondary { 291 | padding-bottom: .5em 292 | } 293 | 294 | .card:focus-visible .cardBox, 295 | .card:hover .cardBox { 296 | background: rgba(0, 0, 0, 0) 297 | } 298 | 299 | 300 | /* Remove ugly bottom overlay from non 'Card' type items in library view*/ 301 | 302 | .cardBox-bottompadded { 303 | background: transparent!important; 304 | box-shadow: none!important; 305 | } 306 | 307 | 308 | .cardBox-bottompadded > .cardScalable { 309 | border-radius: 10px!important; 310 | box-shadow: 0 0 .5em rgba(0, 0, 0, .75)!important; 311 | } 312 | 313 | .cardFooter { 314 | background: rgba(25, 25, 25, 0.33)!important; 315 | } 316 | 317 | /* Remove ugly bottom overlay from non 'Card' type items in library view*/ 318 | 319 | 320 | .card .squareCard .cardScalable { 321 | padding-top: 100%; 322 | width: 100%; 323 | box-shadow: none !important; 324 | } 325 | 326 | .card[data-userid] .cardScalable { 327 | padding-top: 0 !important 328 | } 329 | 330 | .card[data-userid] .cardScalable .cardContent { 331 | padding-top: 100% !important 332 | } 333 | 334 | .cardPadder { 335 | background: transparent !important 336 | } 337 | 338 | .cardPadder-square { 339 | aspect-ratio: 0 !important; 340 | padding-bottom: 100%; 341 | } 342 | 343 | .cardPadder-square+div { 344 | aspect-ratio: 1 345 | } 346 | 347 | .localUsers > .card > .cardBox > .cardScalable > .cardPadder { 348 | padding-bottom: 0 !important; 349 | } 350 | 351 | .cardImageContainer.defaultCardBackground { 352 | background: transparent 353 | } 354 | 355 | .innerCardFooter { 356 | border-radius: 0; 357 | margin-bottom: 0; 358 | margin-left: auto; 359 | margin-right: auto; 360 | width: 100% 361 | } 362 | 363 | .innerCardFooter .itemProgressBar { 364 | background: hsla(0, 0%, 100%, .3); 365 | height: .4em; 366 | } 367 | 368 | .innerCardFooter .itemProgressBar .itemProgressBarForeground { 369 | background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light)); 370 | border-radius: 2em; 371 | } 372 | 373 | .cardOverlayContainer { 374 | align-content: center; 375 | align-items: center; 376 | display: flex; 377 | flex-flow: column; 378 | flex-direction: column; 379 | flex-wrap: nowrap; 380 | justify-content: center 381 | } 382 | /* 383 | .cardOverlayButton { 384 | border-radius: 100px !important 385 | } 386 | 387 | .cardOverlayButton span { 388 | background: linear-gradient(0deg, var(--accent1-light) 10%, var(--accent2-light) 90%) !important; 389 | background-clip: text !important; 390 | -webkit-background-clip: text !important; 391 | transition: .1s 392 | } 393 | 394 | .cardOverlayButton[data-action=resume] { 395 | background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light)) !important; 396 | border-radius: 10px!important; 397 | color: #fff !important; 398 | padding: 1.5em 399 | } 400 | 401 | .cardOverlayButton[data-action=resume]:focus-visible, 402 | .cardOverlayButton[data-action=resume]:hover { 403 | filter: brightness(.5) 404 | } 405 | 406 | .cardOverlayButton:focus-visible, 407 | .cardOverlayButton:hover { 408 | transform: scale(1) !important 409 | } 410 | */ 411 | .cardIndicators,.listItemIndicators { 412 | right: 0!important; 413 | top: 0!important 414 | } 415 | 416 | .cardIndicators .indicator,.listItemIndicators .indicator { 417 | background: linear-gradient(130deg,var(--accent1-light),var(--accent2-light)); 418 | border-radius: 0 10px 0 10px; 419 | box-shadow: 0 0 5px rgba(0,0,0,.7); 420 | } 421 | 422 | /* Make watched icon more transparent */ 423 | .cardIndicators .indicator, .listItemIndicators, .indicator, .playedIndicator { 424 | opacity: 1.0 !important; 425 | } 426 | 427 | [data-isfolder=true]:is([data-type=CollectionFolder], [data-type=UserView]):not([data-type=Series]) .cardText { 428 | padding: .75em !important 429 | } 430 | 431 | [data-collectiontype=livetv] .cardText { 432 | padding: .75em !important 433 | } 434 | 435 | .cardText:nth-child(4) { 436 | display: none 437 | } 438 | 439 | .defaultCardBackground { 440 | background: linear-gradient(130deg, var(--accent1-dark), var(--accent2-dark)) !important 441 | } 442 | 443 | .chapterCard .innerCardFooter { 444 | -webkit-backdrop-filter: blur(5px); 445 | backdrop-filter: blur(5px); 446 | background: rgba(0, 0, 0, .6); 447 | border-radius: 0 1em 1em 0 !important 448 | } 449 | 450 | .layout-mobile .cardOverlayButton { 451 | -webkit-backdrop-filter: blur(5px); 452 | backdrop-filter: blur(5px); 453 | background: rgba(0, 0, 0, .5); 454 | border-radius: 10px !important; 455 | bottom: 10px; 456 | right: 10px; 457 | width: -moz-fit-content; 458 | width: fit-content 459 | } 460 | 461 | .devicesList .cardScalable { 462 | aspect-ratio: 16/9 463 | } 464 | 465 | .devicesList .cardPadder { 466 | display: none 467 | } 468 | 469 | .itemSelectionPanel { 470 | background: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent 21%); 471 | border: 1px solid var(--accent1-light); 472 | border-radius: 10px; 473 | overflow: hidden; 474 | padding: .5em 475 | } 476 | 477 | .dialogContainer .card .cardImageContainer:after, 478 | .dialogContainer .card .cardImageContainer:before { 479 | display: none !important 480 | } 481 | 482 | :not(.dashboardDocument) .mainDrawer { 483 | -webkit-backdrop-filter: blur(0); 484 | backdrop-filter: blur(0); 485 | background: rgba(0, 0, 0, .5) 486 | } 487 | 488 | :not(.dashboardDocument) .mainDrawer.drawer-open { 489 | -webkit-backdrop-filter: blur(35px); 490 | backdrop-filter: blur(35px) 491 | } 492 | 493 | :not(.dashboardDocument) .mainDrawer.drawer-open .scrollContainer { 494 | mask-image: none; 495 | -webkit-mask-image: none; 496 | } 497 | 498 | :not(.dashboardDocument) .mainDrawer .navMenuOption:after { 499 | background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light)); 500 | content: ""; 501 | height: 100%; 502 | left: 0; 503 | opacity: 0; 504 | position: absolute; 505 | top: 0; 506 | transition: opacity .1s linear; 507 | width: 100%; 508 | z-index: -1 509 | } 510 | 511 | :not(.dashboardDocument) .mainDrawer .navMenuOption .navMenuOptionIcon { 512 | transition: margin-right .1s linear 513 | } 514 | 515 | :not(.dashboardDocument) .mainDrawer .navMenuOption-selected { 516 | background: linear-gradient(130deg, var(--accent2-light), var(--accent1-light)) !important 517 | } 518 | 519 | :not(.dashboardDocument) .mainDrawer .navMenuOption:hover .navMenuOptionIcon { 520 | margin-right: 1.46em 521 | } 522 | 523 | :not(.dashboardDocument) .mainDrawer .navMenuOption:hover:after { 524 | opacity: 1 525 | } 526 | 527 | .mainDrawer.drawer-open .scrollContainer::-webkit-scrollbar-track { 528 | box-shadow: none !important 529 | } 530 | 531 | .mainDrawer.drawer-open .scrollContainer::-webkit-scrollbar-track-piece { 532 | background: transparent !important 533 | } 534 | 535 | .inputContainer { 536 | position: relative 537 | } 538 | 539 | .inputContainer .inputLabel { 540 | font-size: .95em; 541 | position: absolute; 542 | top: -1.2em; 543 | transition: top .25s, font-size .25s 544 | } 545 | 546 | .inputContainer .inputLabel-float:not(.inputContainer .inputLabelFocused) { 547 | font-size: 1.2em; 548 | top: 0 549 | } 550 | 551 | .inputContainer .emby-input { 552 | background: transparent; 553 | border: none; 554 | border-bottom: .1em solid hsla(0, 0%, 100%, .7); 555 | border-radius: 0 !important 556 | } 557 | 558 | .inputContainer .emby-input:focus { 559 | border-color: var(--accent2-light) !important 560 | } 561 | 562 | .emby-select { 563 | background: transparent; 564 | border: none !important; 565 | border-bottom: .1em solid hsla(0, 0%, 100%, .7) !important; 566 | border-radius: 0 !important 567 | } 568 | 569 | .emby-select:focus { 570 | border-color: var(--accent2-light) !important 571 | } 572 | 573 | .emby-select:focus~.selectArrowContainer { 574 | transform: rotate(180deg) 575 | } 576 | 577 | .selectArrowContainer { 578 | transition: transform .1s 579 | } 580 | 581 | .checkboxOutline { 582 | background-color: #063660 !important; 583 | border-color: #063660 !important; 584 | border-radius: 5px !important 585 | } 586 | 587 | span.checkboxLabel { 588 | position: relative 589 | } 590 | 591 | span.checkboxLabel:after { 592 | background-color: #fff; 593 | bottom: -.2em; 594 | content: ""; 595 | height: .1em; 596 | left: 0; 597 | position: absolute; 598 | transform: scaleX(0); 599 | transform-origin: left; 600 | transition: transform .25s ease-in-out; 601 | width: 100% 602 | } 603 | 604 | .emby-checkbox:focus-visible+span.checkboxLabel:after { 605 | transform: scaleX(1) 606 | } 607 | 608 | .checkboxIcon-checked, 609 | .emby-checkbox-label .checkboxIcon-checked { 610 | align-items: center; 611 | display: block !important; 612 | justify-content: center; 613 | opacity: 0; 614 | transform: rotate(45deg) scale(0); 615 | transition: transform .1s, opacity .1s 616 | } 617 | 618 | .emby-checkbox:checked+span+.checkboxOutline>.checkboxIcon-checked { 619 | display: flex !important; 620 | opacity: 1; 621 | transform: rotate(0deg) scale(1) 622 | } 623 | 624 | .emby-textarea { 625 | background: transparent; 626 | border: none; 627 | border-bottom: .1em solid hsla(0, 0%, 100%, .7); 628 | border-radius: 0 !important; 629 | width: 100% 630 | } 631 | 632 | .emby-textarea:focus { 633 | border-color: var(--accent2-light) !important 634 | } 635 | 636 | .checkboxList.paperList { 637 | background: rgba(0, 0, 0, .5) !important; 638 | border-radius: 10px !important; 639 | overflow: auto !important 640 | } 641 | 642 | .paperList { 643 | background: transparent !important; 644 | border-radius: 20px; 645 | overflow: hidden 646 | } 647 | 648 | .paperList .listItem { 649 | background: rgba(0, 0, 0, .5); 650 | border: none !important; 651 | border-radius: 8px; 652 | margin-bottom: .3em; 653 | transition: background .25s 654 | } 655 | 656 | .paperList .listItem:last-child { 657 | border: none; 658 | margin-bottom: 0 !important 659 | } 660 | 661 | .paperList .listItem:focus-visible, 662 | .paperList .listItem:hover { 663 | background: rgba(0, 0, 0, .5) 664 | } 665 | 666 | .paperList .listItemIcon { 667 | background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light)); 668 | background-clip: text; 669 | -webkit-background-clip: text; 670 | color: transparent 671 | } 672 | 673 | .inputLabelFocused, 674 | .selectLabelFocused, 675 | .textareaLabelFocused { 676 | color: var(--accent2-light) 677 | } 678 | 679 | #myPreferencesMenuPage .listItem { 680 | border-radius: 10px; 681 | transition: background .25s 682 | } 683 | 684 | #myPreferencesMenuPage .listItem:hover { 685 | background: rgba(0,0,0,.33); 686 | } 687 | 688 | #myPreferencesMenuPage .listItem:hover .listItemIcon { 689 | margin-right: .5em 690 | } 691 | 692 | #myPreferencesMenuPage .listItem-border { 693 | border: none !important 694 | } 695 | 696 | #myPreferencesMenuPage .listItemIcon { 697 | background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light)); 698 | background-clip: text; 699 | -webkit-background-clip: text; 700 | color: transparent; 701 | transition: margin-right .25s 702 | } 703 | 704 | .dialog { 705 | -webkit-backdrop-filter: blur(25px); 706 | backdrop-filter: blur(25px); 707 | background: rgba(0, 0, 0, .4); 708 | border-radius: 15px !important; 709 | overflow: hidden 710 | } 711 | 712 | .dialog .smoothScrollY { 713 | max-height: 100% 714 | } 715 | 716 | .dialog .emby-button:not(.cardImageContainer, .actionSheetMenuItem) { 717 | background: transparent !important 718 | } 719 | 720 | .dialog .emby-button:not(.cardImageContainer, .actionSheetMenuItem):after { 721 | all: unset !important 722 | } 723 | 724 | .dialog .emby-button.actionSheetMenuItem { 725 | background: transparent !important 726 | } 727 | 728 | .dialog .cardText { 729 | display: block !important 730 | } 731 | 732 | .dialog .actionSheetContent { 733 | margin: 10px !important; 734 | padding: 0 !important 735 | } 736 | 737 | .dialog .actionSheetScroller { 738 | mask-image: none !important; 739 | -webkit-mask-image: none !important; 740 | padding: 0 !important 741 | } 742 | 743 | .dialog .actionSheetMenuItem { 744 | border-radius: 5px !important 745 | } 746 | 747 | .filterDialogContent { 748 | height: 100%; 749 | overflow: auto 750 | } 751 | 752 | a[is=emby-linkbutton]:not(.listItem-border, .navMenuOption) { 753 | margin-bottom: .3em; 754 | position: relative; 755 | text-decoration: none !important 756 | } 757 | 758 | a[is=emby-linkbutton]:not(.listItem-border, .navMenuOption).button-link { 759 | color: var(--accent2-light) 760 | } 761 | 762 | a[is=emby-linkbutton]:not(.listItem-border, .navMenuOption):after { 763 | background: currentColor; 764 | bottom: -.1em; 765 | content: "" !important; 766 | height: .1em; 767 | left: 0 !important; 768 | position: absolute; 769 | transform: scale(0); 770 | transform-origin: right; 771 | transition: transform .1s ease-in-out; 772 | width: 100% 773 | } 774 | 775 | a[is=emby-linkbutton]:not(.listItem-border, .navMenuOption):hover:after { 776 | transform: scale(1); 777 | transform-origin: left 778 | } 779 | 780 | 781 | a[is=emby-linkbutton]:not(.listItem-border, .navMenuOption):hover { 782 | color: var(--accent2-light) 783 | } 784 | 785 | .sliderBubble { 786 | background: transparent; 787 | border-radius: 20px; 788 | overflow: hidden 789 | } 790 | 791 | .chapterThumbTextContainer { 792 | background: linear-gradient(0deg, #000 .25em, rgba(0, 0, 0, .25), transparent) !important; 793 | padding: .5em .25em !important 794 | } 795 | 796 | #indexPage .sectionTitle { 797 | align-items: center; 798 | color: #fff; 799 | display: flex; 800 | flex-direction: row; 801 | flex-wrap: nowrap; 802 | font-size: 1.6em; 803 | } 804 | 805 | #indexPage .sectionTitle:before { 806 | background: #fff; 807 | content: ""; 808 | height: 2px; 809 | margin-right: .5em; 810 | width: 1.3em 811 | } 812 | 813 | #indexPage .emby-scroller .emby-button:not(.cardOverlayButton) { 814 | background: rgba(0, 0, 0, .2); 815 | border-radius: 10px; 816 | box-shadow: 0 0 .5em rgba(0, 0, 0, .75); 817 | margin-right: 1.2em; 818 | overflow: hidden 819 | } 820 | 821 | #indexPage .emby-scroller .emby-button:not(.cardOverlayButton):after { 822 | all: unset 823 | } 824 | 825 | #indexPage .emby-scroller .emby-button:not(.cardOverlayButton):hover { 826 | background: rgba(0, 0, 0, .5) 827 | } 828 | 829 | #indexPage .section0 .emby-scrollbuttons { 830 | display: none 831 | } 832 | /* 833 | #indexPage .section0 .itemsContainer { 834 | flex-wrap: wrap 835 | } 836 | 837 | /*From Jellyskin@12.4.1 */ 838 | 839 | .itemDetailPage { 840 | padding-top: 6em !important; 841 | } 842 | /* 843 | #itemDetailPage .mediaInfoItem { 844 | border-radius: 10vh; 845 | white-space: nowrap 846 | } 847 | 848 | #itemDetailPage .detailRibbon { 849 | background: transparent; 850 | font-size: 2.2vh; 851 | height: 7.2em; 852 | margin-top: 10vh!important; 853 | position: static !important 854 | } 855 | 856 | #itemDetailPage .detailRibbon .itemMiscInfo { 857 | margin-bottom: 0 !important 858 | } 859 | 860 | #itemDetailPage .detailImageContainer .card { 861 | border-radius: 10px; 862 | left: 3.3%; 863 | top: calc(50% + 1em); 864 | transform: translateY(-50%); 865 | width: 25vw 866 | } 867 | 868 | #itemDetailPage .detailPageWrapperContainer { 869 | width: 100vw 870 | } 871 | 872 | #itemDetailPage .mainDetailButtons .emby-button:not([data-action=resume], [data-action=play]) { 873 | background: transparent !important 874 | } 875 | */ 876 | 877 | #itemDetailPage .cardScalable:not(:has(.blurhash-canvas)) { 878 | /*aspect-ratio: 2/3;*/ 879 | background: linear-gradient(130deg, var(--accent1-dark), var(--accent2-dark)) !important; 880 | } 881 | 882 | #itemDetailPage .detailLogo { 883 | display: none 884 | } 885 | 886 | #itemDetailPage .emby-button { 887 | align-items: center; 888 | /*background: transparent;*/ 889 | /*border-radius: 10vh;*/ 890 | flex-flow: row; 891 | justify-content: center; 892 | /*margin-right: .5em !important;*/ 893 | /*text-decoration: none*/ 894 | } 895 | 896 | #itemDetailPage .cardOverlayButton-br > button { 897 | align-items: center; 898 | /*background: transparent;*/ 899 | /*border-radius: 10vh;*/ 900 | flex-flow: row; 901 | justify-content: center; 902 | /*margin-right: .5em !important;*/ 903 | /*text-decoration: none*/ 904 | } 905 | 906 | #itemDetailPage .emby-button[is=emby-linkbutton] { 907 | color: unset 908 | } 909 | 910 | #itemDetailPage .mainDetailButtons > .paper-icon-button-light:not(.cardOverlayFab-primary):hover, 911 | #itemDetailPage .mainDetailButtons > .emby-button:not([is=emby-linkbutton], .cardOverlayFab-primary):hover { 912 | background: hsla(0, 0%, 100%, .1) !important; 913 | color: #fff !important; 914 | border-radius: 100em !important; 915 | } 916 | 917 | #itemDetailPage .emby-button:not([is=emby-linkbutton]):after { 918 | display: none 919 | } 920 | 921 | #itemDetailPage .emby-button[title="Play"], 922 | #itemDetailPage .emby-button[title="Resume"] { 923 | background: #fff !important; 924 | color: #000; 925 | gap: 0.6em; 926 | margin-right: 0.5em; 927 | padding: 0.4em 1em !important; 928 | width: 10vw; 929 | } 930 | #itemDetailPage .emby-button[title="Play"]:after, 931 | #itemDetailPage .emby-button[title="Resume"]:after { 932 | background: transparent; 933 | content: attr(title); 934 | display: block; 935 | font-size: 1.5em; 936 | font-weight: 500; 937 | height: -moz-fit-content; 938 | height: fit-content; 939 | opacity: 1; 940 | position: static; 941 | width: -moz-fit-content; 942 | width: fit-content; 943 | } 944 | 945 | .mediaInfoOfficialRating { 946 | border: 0 solid currentColor; 947 | color: #0c0c0c; 948 | background: rgb(225 225 225 / 90%); 949 | border-radius: 1em; 950 | font-size: 95%; 951 | height: 1.4em; 952 | line-height: 1.8em; 953 | padding: 0 .8em; 954 | } 955 | /* 956 | #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list { 957 | display: grid; 958 | gap: 1em; 959 | grid-template-columns: 1fr 1fr 1fr 960 | } 961 | 962 | #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItem .paper-icon-button-light[data-action=menu]:after { 963 | content: ""; 964 | margin-left: 100% 965 | } 966 | */ 967 | 968 | /* Smaller play button */ 969 | #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItem .paper-icon-button-light[data-action=resume] { 970 | border-radius: 10px!important; 971 | font-size: 1.25em; 972 | } 973 | /* NOT rounded thumbnails list */ 974 | #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItemImage-large { 975 | border-radius: 6px!important; 976 | 977 | } 978 | 979 | #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .indicator { 980 | border-radius: 0 6px 0 6px!important; 981 | } 982 | /* 983 | #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItem-overview { 984 | overflow: hidden; 985 | text-align: start; 986 | text-overflow: ellipsis; 987 | white-space: nowrap; 988 | width: 100% 989 | } 990 | 991 | #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItemBody { 992 | width: 95% 993 | } 994 | 995 | #itemDetailPage .listItem { 996 | flex-flow: column !important 997 | } 998 | 999 | #itemDetailPage .listItem[data-mediatype=Audio] { 1000 | flex-flow: row !important; 1001 | grid-column: auto/span 3 1002 | } 1003 | */ 1004 | 1005 | .layout-mobile #itemDetailPage .itemBackdrop { 1006 | background-image: linear-gradient(130deg, var(--accent1-light), var(--accent2-light)); 1007 | filter: blur(10px) brightness(50%); 1008 | height: 80vh !important; 1009 | left: -10px; 1010 | margin-top: 0 !important; 1011 | mask-image: linear-gradient(180deg, #000, transparent); 1012 | -webkit-mask-image: linear-gradient(180deg, #000, transparent); 1013 | position: absolute !important; 1014 | top: 0; 1015 | width: calc(100vw + 20px) 1016 | } 1017 | 1018 | .layout-mobile #itemDetailPage .detailRibbon { 1019 | align-items: flex-start; 1020 | display: flex; 1021 | flex-direction: column; 1022 | height: 70vh; 1023 | justify-content: flex-end; 1024 | margin-top: 0 !important 1025 | } 1026 | 1027 | .layout-mobile #itemDetailPage .detailImageContainer { 1028 | overflow: hidden; 1029 | padding: 0 !important; 1030 | position: static 1031 | } 1032 | 1033 | .layout-mobile #itemDetailPage .detailImageContainer .card { 1034 | filter: none !important; 1035 | margin: 0 !important; 1036 | max-width: 50vw !important; 1037 | min-width: 50vw; 1038 | position: static !important; 1039 | top: 0; 1040 | transform: none 1041 | } 1042 | 1043 | .layout-mobile #itemDetailPage .detailImageContainer .cardBox { 1044 | box-shadow: none; 1045 | margin: 0 !important 1046 | } 1047 | 1048 | .layout-mobile #itemDetailPage .itemMiscInfo { 1049 | justify-content: flex-start 1050 | } 1051 | 1052 | .layout-mobile #itemDetailPage .infoText { 1053 | text-align: start; 1054 | width: -moz-fit-content !important; 1055 | width: fit-content !important 1056 | } 1057 | 1058 | .layout-mobile #itemDetailPage .infoWrapper { 1059 | align-items: flex-start; 1060 | display: flex; 1061 | flex-direction: column; 1062 | flex-wrap: nowrap; 1063 | justify-content: flex-end; 1064 | padding: 0 !important 1065 | } 1066 | 1067 | .layout-mobile #itemDetailPage .mainDetailButtons { 1068 | flex-wrap: nowrap; 1069 | gap: 1em !important; 1070 | justify-content: flex-start; 1071 | overflow: auto; 1072 | width: 100% 1073 | } 1074 | 1075 | .layout-mobile #itemDetailPage .mainDetailButtons .emby-button[title=Play], 1076 | .layout-mobile #itemDetailPage .mainDetailButtons .emby-button[title=Resume] { 1077 | background: transparent !important; 1078 | border: none !important; 1079 | overflow: visible; 1080 | padding: .7em 1081 | } 1082 | 1083 | .layout-mobile #itemDetailPage .mainDetailButtons .emby-button[title=Play]:after, 1084 | .layout-mobile #itemDetailPage .mainDetailButtons .emby-button[title=Resume]:after { 1085 | all: unset !important 1086 | } 1087 | 1088 | .layout-mobile #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list { 1089 | grid-template-columns: 1fr 1090 | } 1091 | 1092 | .layout-mobile #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItemImage { 1093 | flex-basis: 20vh; 1094 | flex-grow: 1; 1095 | flex-shrink: 0; 1096 | margin: 0 !important; 1097 | padding: 0 !important; 1098 | width: 100% 1099 | } 1100 | 1101 | .layout-mobile #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItem-bottomoverview { 1102 | font-size: 88%; 1103 | margin-bottom: 1em; 1104 | margin-top: .2em; 1105 | padding: 0 1em 1em 1106 | } 1107 | 1108 | .layout-mobile #itemDetailPage .emby-button { 1109 | margin: 0 !important 1110 | } 1111 | 1112 | @media (orientation:landscape) { 1113 | .layout-mobile #itemDetailPage .detailRibbon { 1114 | align-items: center; 1115 | flex-direction: row; 1116 | justify-content: center; 1117 | margin-top: 10vh !important 1118 | } 1119 | 1120 | .layout-mobile #itemDetailPage .detailRibbon .infoWrapper { 1121 | align-items: center; 1122 | display: grid; 1123 | flex-basis: 50vw; 1124 | flex-direction: row; 1125 | grid-template-areas: "card name" "card info" 1126 | } 1127 | 1128 | .layout-mobile #itemDetailPage .detailRibbon .infoWrapper .detailImageContainer { 1129 | grid-area: card 1130 | } 1131 | 1132 | .layout-mobile #itemDetailPage .detailRibbon .infoWrapper .nameContainer { 1133 | align-self: self-end; 1134 | grid-area: name; 1135 | justify-self: flex-end; 1136 | text-overflow: ellipsis; 1137 | width: calc(100% - 1.2em) 1138 | } 1139 | 1140 | .layout-mobile #itemDetailPage .detailRibbon .infoWrapper .itemMiscInfo-primary { 1141 | align-self: self-start; 1142 | grid-area: info; 1143 | justify-self: flex-end; 1144 | text-overflow: ellipsis; 1145 | width: calc(100% - 1.2em) 1146 | } 1147 | 1148 | .layout-mobile #itemDetailPage .detailRibbon .infoText { 1149 | -webkit-line-clamp: 2; 1150 | -webkit-box-orient: vertical; 1151 | display: -webkit-box; 1152 | font-size: 3.2em; 1153 | max-width: -moz-fit-content; 1154 | max-width: fit-content; 1155 | overflow: hidden; 1156 | text-align: start; 1157 | width: -moz-fit-content !important; 1158 | width: fit-content !important 1159 | } 1160 | 1161 | .layout-mobile #itemDetailPage .detailImageContainer .card { 1162 | max-width: 40vw !important; 1163 | min-width: 20vw; 1164 | width: 100% 1165 | } 1166 | 1167 | .layout-mobile #itemDetailPage .mainDetailButtons { 1168 | flex-basis: 50vw; 1169 | font-size: 1.5em; 1170 | margin: 0 !important; 1171 | padding: 0 !important; 1172 | width: -moz-fit-content; 1173 | width: fit-content 1174 | } 1175 | 1176 | .layout-mobile #itemDetailPage .parentName a { 1177 | text-align: start 1178 | } 1179 | } 1180 | 1181 | /*From Jellyskin@12.4.1*/ 1182 | 1183 | @media (min-width:40em) { 1184 | .dashboardDocument .skinBody { 1185 | width: calc(100% - 20em) 1186 | } 1187 | } 1188 | 1189 | .dashboardDocument .headerTabs { 1190 | margin-left: 0; 1191 | width: auto 1192 | } 1193 | 1194 | .dashboardColumn:first-child .dashboardSection .paperList { 1195 | background: rgba(0, 0, 0, .5) !important; 1196 | color: hsla(0, 0%, 100%, .7); 1197 | font-size: 1.1em 1198 | } 1199 | 1200 | .layout-mobile .dashboardDocument .headerTabs { 1201 | width: 100% 1202 | } 1203 | 1204 | .MuiBox-root .mainAnimatedPages { 1205 | height: auto; 1206 | overflow: visible; 1207 | width: 100% 1208 | } 1209 | 1210 | body.dashboardDocument { 1211 | overflow: auto !important 1212 | } 1213 | 1214 | body.dashboardDocument div[data-role=page] { 1215 | height: -moz-fit-content; 1216 | height: fit-content; 1217 | left: 0 !important; 1218 | /*mask-image: none !important; 1219 | -webkit-mask-image: none !important;*/ 1220 | overflow: visible; 1221 | position: relative !important; 1222 | width: 100% 1223 | } 1224 | /* 1225 | #loginPage { 1226 | mask-image: none; 1227 | -webkit-mask-image: none 1228 | } 1229 | */ 1230 | #loginPage:after { 1231 | background: url(https://cdn.jsdelivr.net/gh/prayag17/JellySkin/src/assets/background.png); 1232 | background-size: cover; 1233 | content: ""; 1234 | height: 100vh; 1235 | left: 0; 1236 | position: fixed; 1237 | top: 0; 1238 | width: 100vw; 1239 | z-index: -1 1240 | } 1241 | 1242 | #loginPage>div { 1243 | left: 50%; 1244 | max-width: 50vw; 1245 | min-width: 40vw; 1246 | padding: 0 !important; 1247 | position: absolute; 1248 | top: 50%; 1249 | transform: translate(-50%, -50%); 1250 | z-index: 2 1251 | } 1252 | 1253 | #loginPage #divUsers { 1254 | flex-wrap: nowrap; 1255 | justify-content: flex-start; 1256 | overflow: auto 1257 | } 1258 | 1259 | #loginPage #divUsers .card { 1260 | width: 30% 1261 | } 1262 | 1263 | #loginPage #divUsers .card .cardBox { 1264 | box-shadow: none !important 1265 | } 1266 | 1267 | #loginPage .emby-button { 1268 | background: transparent; 1269 | border: .2em solid 1270 | } 1271 | 1272 | #loginPage .emby-button:after { 1273 | all: unset !important 1274 | } 1275 | 1276 | #loginPage .emby-button:focus-visible, 1277 | #loginPage .emby-button:hover { 1278 | background: hsla(0, 0%, 100%, .2) 1279 | } 1280 | 1281 | #loginPage .checkboxOutline { 1282 | background: transparent !important; 1283 | border: .152em solid #fff !important 1284 | } 1285 | 1286 | #loginPage .emby-input:focus, 1287 | #loginPage .inputLabelFocused { 1288 | border-bottom-color: #fff !important; 1289 | color: #fff !important 1290 | } 1291 | 1292 | .layout-mobile #loginPage>div { 1293 | max-width: 85vw; 1294 | width: 85vw 1295 | } 1296 | 1297 | @media (orientation:portrait) and (max-width:43em) { 1298 | .nowPlayingInfoContainer { 1299 | align-items: center; 1300 | justify-content: center 1301 | } 1302 | 1303 | .nowPlayingPageImageContainer { 1304 | flex-grow: 0 1305 | } 1306 | } 1307 | 1308 | .nowPlayingSongName { 1309 | font-size: 1.5em; 1310 | text-overflow: ellipsis; 1311 | white-space: nowrap 1312 | } 1313 | 1314 | .subtitleSync { 1315 | left: 0; 1316 | top: 8em 1317 | } 1318 | 1319 | .subtitleSyncContainer { 1320 | background-color: rgba(0, 0, 0, .75) 1321 | } 1322 | 1323 | .sliderBubble, 1324 | .subtitleSyncContainer { 1325 | -webkit-backdrop-filter: blur(25px); 1326 | backdrop-filter: blur(25px) 1327 | } 1328 | 1329 | .sliderBubble { 1330 | background: rgba(0, 0, 0, .75) 1331 | } 1332 | -------------------------------------------------------------------------------- /tweaks.css: -------------------------------------------------------------------------------- 1 | /* Make Play button smaller */ 2 | #itemDetailPage .childrenItemsContainer.itemsContainer.vertical-list .listItem .paper-icon-button-light[data-action=resume] { 3 | border-radius: 10px!important; 4 | font-size: 1.25em; 5 | } 6 | 7 | .cardOverlayContainer>.cardOverlayFab-primary { 8 | background-color: rgba(0, 0, 0, .5); 9 | } 10 | 11 | /* Make title background more transparent on details page */ 12 | .detailRibbon { 13 | background: rgba(0, 0, 0, 0)!important; 14 | } 15 | 16 | /* Transparent top bar */ 17 | 18 | .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred { 19 | background: none; 20 | background-color: rgba(0, 0, 0, 0); 21 | } 22 | .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader { 23 | background: none; 24 | background-color: rgba(0, 0, 0, 0); 25 | } 26 | 27 | .osdHeader { 28 | background: linear-gradient(180deg, hsla(0, 0%, 6%, .75), hsla(0, 0%, 6%, 0))!important; 29 | } 30 | 31 | .cardContent-button, 32 | .itemDetailImage { 33 | border-radius: 0.25em; 34 | } 35 | 36 | /* Narrow the login form */ 37 | #loginPage .readOnlyContent, 38 | #loginPage form { 39 | max-width: 22em; 40 | } 41 | 42 | /* Hide "please login" text, margin is to prevent login form moving too far up */ 43 | #loginPage h1 { 44 | display: none; 45 | } 46 | #loginPage .padded-left.padded-right.padded-bottom-page { 47 | margin-top: 50px; 48 | } 49 | 50 | /* Hide "manual" and "forgot" buttons */ 51 | #loginPage .raised.cancel.block.btnManual.emby-button { 52 | display: none; 53 | } 54 | #loginPage .raised.cancel.block.btnForgotPassword.emby-button { 55 | display: none; 56 | } 57 | 58 | /* Shrink and square (or round) cast thumnails */ 59 | #guestCastContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata, 60 | #castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata { 61 | width: 4.2cm !important; 62 | font-size: 90% !important; 63 | } 64 | 65 | #guestCastContent .card.overflowPortraitCard.personCard.card-withuserdata, 66 | #castContent .card.overflowPortraitCard.personCard.card-withuserdata { 67 | width: 4.2cm !important; 68 | font-size: 90% !important; 69 | } 70 | 71 | /* Correct image aspect ratio behaviour, set border-radius to zero for square tiles */ 72 | #castContent .cardContent-button.cardImageContainer.coveredImage.cardContent.cardContent-shadow.itemAction.lazy, 73 | #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.cardContent-shadow.itemAction, 74 | #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardContent-shadow.itemAction, 75 | #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itemAction, 76 | #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground4.cardContent.cardContent-shadow.itemAction, 77 | #castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground5.cardContent.cardContent-shadow.itemAction { 78 | background-size: cover !important; 79 | border-radius: 2.5cm; 80 | } 81 | 82 | #guestCastContent .cardContent-button.cardImageContainer.coveredImage.cardContent.cardContent-shadow.itemAction.lazy, 83 | #guestCastContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.cardContent-shadow.itemAction, 84 | #guestCastContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardContent-shadow.itemAction, 85 | #guestCastContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itemAction, 86 | #guestCastContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground4.cardContent.cardContent-shadow.itemAction, 87 | #guestCastContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground5.cardContent.cardContent-shadow.itemAction { 88 | background-size: cover !important; 89 | border-radius: 2.5cm; 90 | } 91 | 92 | #castContent .cardScalable, 93 | #guestCastContent .cardScalable { 94 | width: 3.8cm !important; 95 | height: 3.8cm !important; 96 | border-radius: 2.5cm; 97 | } 98 | 99 | #castContent .cardOverlayContainer.itemAction, 100 | #guestCastContent .cardOverlayContainer.itemAction { 101 | border-radius: 2.5cm; 102 | } 103 | 104 | /* Center the mouseover buttons */ 105 | #castContent .cardOverlayButton-br, 106 | #guestCastContent .cardOverlayButton-br { 107 | bottom: 4%; 108 | right: 15%; 109 | width: 70%; 110 | } 111 | 112 | #castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light, 113 | #guestCastContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light { 114 | margin: auto; 115 | } 116 | 117 | /* Darken background, only works with blue radiance */ 118 | .backgroundContainer { 119 | background-color: #000000; 120 | filter: brightness(50%); 121 | } 122 | 123 | /* .backdropImage {filter: blur(2px)!important;} */ 124 | 125 | /* 126 | @media all and (min-width: 50em) { 127 | .homePage .emby-scroller { 128 | margin-right: 0; 129 | } 130 | .homePage .emby-scrollbuttons { 131 | display: none; 132 | } 133 | .homePage .itemsContainer { 134 | flex-wrap: wrap; 135 | } 136 | } 137 | 138 | /* Make title background more transparent on details page */ 139 | .detailRibbon { 140 | background: rgba(0, 0, 0, 0); 141 | } 142 | 143 | /* Indicators */ 144 | .cardIndicators,.listItemIndicators { 145 | right: 0!important; 146 | top: 0!important 147 | } 148 | 149 | .cardIndicators .indicator,.listItemIndicators .indicator { 150 | background: linear-gradient(130deg,var(--accent1-light),var(--accent2-light)); 151 | border-radius: 0 10px 0 10px; 152 | box-shadow: 0 0 5px rgba(0,0,0,.7); 153 | } 154 | 155 | /* Make watched icon more transparent */ 156 | .cardIndicators .indicator, .listItemIndicators, .indicator, .playedIndicator { 157 | opacity: 0.9 !important; 158 | } 159 | 160 | /* Hide Tags */ 161 | .itemTags {display: none !important;} 162 | 163 | /* Remove big spaces between different tags, links etc. */ 164 | #itemDetailPage .button-link.emby-button { 165 | margin-right: 0 !important; 166 | } 167 | 168 | #itemDetailPage .mainDetailButtons > .emby-button { 169 | margin-right: .4em !important; 170 | } 171 | 172 | /* Fix long episode descriptions */ 173 | .listItem-overview > bdi { 174 | overflow: hidden; 175 | text-overflow: ellipsis; 176 | display: -webkit-box; 177 | -webkit-line-clamp: 7; 178 | -webkit-box-orient: vertical; 179 | } 180 | 181 | /* Add more padding to episode list */ 182 | 183 | @media (min-width: 50em) { 184 | #itemDetailPage .listItem { 185 | margin-bottom: .35em; 186 | margin-top: .35em; 187 | border-radius: 6px !important; 188 | 189 | } 190 | } 191 | 192 | /* Dashboard transparent header */ 193 | .MuiBox-root > header { 194 | background: transparent; 195 | box-shadow: none; 196 | } 197 | 198 | 199 | /* Make card overlay buttons (favourite, watched etc) smaller */ 200 | .cardOverlayButton-br > button { 201 | font-size: 0.8em !important; 202 | } 203 | 204 | /* Horizontal My Media */ 205 | #indexPage .section2 .itemsContainer { 206 | flex-wrap: nowrap !important; 207 | } 208 | 209 | #indexPage .section2 .emby-scrollbuttons { 210 | display: block !important; 211 | } 212 | 213 | * { 214 | mask-image: none !important; 215 | -webkit-mask-image: none !important; 216 | } 217 | 218 | /* Jellyskin Colors */ 219 | 220 | :root { 221 | --accent1-light: #a95bc2; 222 | --accent1-dark: #3f2348; 223 | --accent1-light-opacity1: rgba(169, 91, 194, .4); 224 | --accent2-light: #00a4db; 225 | --accent2-dark: #003d52 226 | } 227 | /* Skip Intro Button */ 228 | 229 | .skip-button { 230 | background: rgba(42, 67, 87, 1)!important; 231 | border: none; 232 | border-radius: 0.5em; 233 | bottom: 6em; 234 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); 235 | color: #fff!important; 236 | font-family: sans-serif !important; 237 | font-size: 1em; 238 | font-weight: normal; 239 | overflow: hidden; 240 | padding: 0.8em 1.2em; 241 | right: 6em; 242 | } 243 | 244 | .skip-button:hover { 245 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 246 | } 247 | 248 | .skip-button:after { 249 | background: linear-gradient(130deg,var(--accent1-light),var(--accent2-light)); 250 | content: ""; 251 | height: 100%; 252 | left: 0; 253 | opacity: 0; 254 | position: absolute; 255 | top: 0; 256 | transition: opacity .1s linear; 257 | width: 100%; 258 | z-index: 0; 259 | } 260 | 261 | .skip-button .paper-icon-button-light { 262 | color: #fff!important; 263 | z-index: 1 264 | } 265 | 266 | .skip-button:focus:after,.skip-button:hover:after { 267 | opacity: 0.85 268 | } 269 | 270 | 271 | /* Progress Bar 272 | 273 | .innerCardFooter { 274 | border-radius: 0; 275 | margin-bottom: 0; 276 | margin-left: auto; 277 | margin-right: auto; 278 | width: 100% 279 | } 280 | 281 | .innerCardFooter .itemProgressBar { 282 | background: hsla(0, 0%, 100%, .3); 283 | height: .4em; 284 | } 285 | 286 | .innerCardFooter .itemProgressBar .itemProgressBarForeground { 287 | background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light)); 288 | border-radius: 2em; 289 | } 290 | 291 | /* Don't push down 'Home' and 'Favourites' tabs on smaller screens*/ 292 | @media (max-width: 100em) { 293 | .sectionTabs { 294 | -webkit-align-items: center; 295 | align-items: center; 296 | -webkit-align-self: center; 297 | align-self: center; 298 | -webkit-justify-content: center; 299 | justify-content: center; 300 | margin-top: -4.3em; 301 | position: relative; 302 | width: auto; 303 | } 304 | } 305 | 306 | /* Add margins to 'Play all' and three dots buttons */ 307 | 308 | .itemsViewSettingsContainer>.button-flat { 309 | margin-left: .75em!important; 310 | } 311 | 312 | 313 | /* Change heart and watched button colors from red to blue 314 | .ratingbutton-icon-withrating, 315 | .playstatebutton-icon-played { 316 | color: var(--accent2-light) !important; 317 | } 318 | */ 319 | 320 | /* Fix hover button stuff */ 321 | @media (hover: hover) and (pointer: fine) { 322 | .cardOverlayButton:not(.cardOverlayFab-primary):hover:not(:disabled), 323 | .detailButton:hover:not(:disabled) { 324 | color: #00a4dc; 325 | background-color: rgba(0, 164, 220, 0.2) !important; 326 | border-radius: 10px; 327 | } 328 | } 329 | 330 | /*Modify subtitle settings page*/ 331 | .subtitleappearance-preview { 332 | background: linear-gradient(140deg,#444,#111) !important; 333 | } 334 | 335 | /* Shrink fullscreen dialog to a windows */ 336 | @media (max-width: 80em), (max-height: 45em) { 337 | .dialog-fixedSize { 338 | height: 80% !important; 339 | width: 60% !important; 340 | position: relative !important; 341 | } 342 | .dialog-fullscreen-lowres { 343 | position: relative !important; 344 | } 345 | } 346 | 347 | /* Display logos correctly */ 348 | 349 | .cardScalable > a[style*="Logo"] { 350 | background-size: contain !important; 351 | background-color: transparent !important; 352 | } 353 | 354 | /* Display disc art correctly */ 355 | .cardBox:has(.cardScalable > a[style*="Disc"]) { 356 | background: rgba(0, 0, 0, 0) !important; 357 | } 358 | 359 | .cardScalable:has(a[style*="Disc"]), .cardScalable:has(a[style*="Logo"]) { 360 | box-shadow: none !important; 361 | } 362 | 363 | /* Dont underline 'Next Up' title on hover 364 | .sectionTitleTextButton > .sectionTitle { 365 | text-decoration: none !important; 366 | } 367 | 368 | /* Item detail page play button tweaks */ 369 | #itemDetailPage .emby-button[title=Play]:hover, #itemDetailPage .emby-button[title=Resume]:hover { 370 | /*background: #adc6ff !important;*/ 371 | box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3); 372 | } 373 | 374 | /* TV rating symbol */ 375 | #itemDetailPage .mediaInfoItem.mediaInfoOfficialRating { 376 | background: hsla(0, 0%, 100%, 0.8); 377 | border: none; 378 | border-radius: 10px; 379 | color: #000; 380 | font-weight: 600; 381 | white-space: nowrap; 382 | } 383 | 384 | /* Change Header LOGO 385 | .pageTitleWithDefaultLogo { 386 | background-image: url(../../assets/img/banner-light.png) !important; 387 | } 388 | 389 | /* Subtitle dropdown menu styling */ 390 | .trackSelections > .selectContainer > .detailTrackSelect:not(:disabled) { 391 | border: none !important; 392 | box-shadow: 0 0 .1em rgba(0, 0, 0, .25); 393 | border-bottom: .01em solid rgba(0, 0, 0, 0.25) !important; 394 | background-color: rgba(32, 49, 75, 0.75); 395 | border-radius: .5em!important; 396 | /*backdrop-filter: blur(5px);*/ 397 | padding: .5em .5em; 398 | } 399 | .trackSelections > .selectContainer > .detailTrackSelect:disabled {padding: 0!important;} 400 | 401 | /*Glow accent on hover 402 | .raised.homeLibraryButton { 403 | border: solid 1px var(--accent2-light) !important; 404 | } 405 | 406 | 407 | .cardOverlayContainer { 408 | outline: 4px solid var(--accent2-light)!important; 409 | box-shadow: 0 0 5px rgb(var(--accent2-light))!important; 410 | } 411 | 412 | .cardOverlayContainer { 413 | background: rgba(0, 0, 0, 0)!important; 414 | } 415 | 416 | /* Hide Card Buttons 417 | .libraryPage .cardOverlayButton, 418 | .cardOverlayButton-br { 419 | display: none!important; 420 | } 421 | */ 422 | 423 | /* Dashboard top right user menu thing */ 424 | .css-jg702w { 425 | border-radius: 10px; 426 | } 427 | 428 | /* Declutter Media Player UI */ 429 | 430 | /* Hide Skip Chapter buttons */ 431 | .btnPreviousChapter, .btnNextChapter { 432 | display: none !important; 433 | } 434 | 435 | /* Thumbnail for seekbar */ 436 | .chapterThumbText { 437 | margin: 0; 438 | opacity: 1; 439 | padding-bottom: 0 !important; 440 | text-align: center !important; 441 | } 442 | /* 443 | .chapterThumbWrapper { 444 | width: 204px !important; 445 | height: 153px !important; 446 | } 447 | */ 448 | 449 | /* Make person pages without images look better 450 | 451 | #itemDetailPage .cardScalable:not(:has(.blurhash-canvas))::before { 452 | content: "\e7fd"; 453 | font-family: 'Material Icons Round' !important; 454 | font-size: 20rem; 455 | background: linear-gradient(130deg, var(--accent1-light), var(--accent2-light)); 456 | background-clip: text; 457 | color: transparent; 458 | opacity: 75%; 459 | position: absolute; 460 | right: 0; 461 | margin-right: 2rem; 462 | margin-top: 2rem; 463 | } 464 | /* 465 | 466 | 467 | /* Collections */ 468 | 469 | /*.squareCard:not(:has(a[style*="Disc"]))*/ 470 | 471 | @media (min-width: 87.5em) { 472 | .collectionItemsContainer > .portraitCard, .smallBackdropCard { 473 | width: 22%; 474 | } 475 | } 476 | @media (min-width: 75em) { 477 | .collectionItemsContainer > .portraitCard, .smallBackdropCard { 478 | width: 22%; 479 | } 480 | } 481 | @media (min-width: 50em) { 482 | .collectionItemsContainer > .portraitCard, .smallBackdropCard { 483 | width: 22%; 484 | } 485 | } 486 | 487 | .sectionTitleContainer > .sectionTitle { 488 | padding-bottom: .33em; 489 | } 490 | 491 | /* Episode Collections force 16:9 thumbnails */ 492 | 493 | #itemDetailPage .collectionItemsContainer > .card[data-type*="Episode"] > div > .cardScalable { 494 | aspect-ratio: 16/9 !important; 495 | } 496 | 497 | @media (min-width: 87.5em) { 498 | .collectionItemsContainer > .card[data-type*="Episode"] { 499 | width: 30%; 500 | } 501 | } 502 | @media (min-width: 75em) { 503 | .collectionItemsContainer > .card[data-type*="Episode"] { 504 | width: 30%; 505 | } 506 | } 507 | @media (min-width: 50em) { 508 | .collectionItemsContainer > .card[data-type*="Episode"] { 509 | width: 30%; 510 | } 511 | } 512 | 513 | /* Disc images in favourties tab etc edgecase sceneario */ 514 | 515 | 516 | /* Better library page */ 517 | @media (min-height: 31.25em) { 518 | [dir=ltr] .padded-right-withalphapicker { 519 | padding-right: 3.3% !important; 520 | padding-right: max(env(safe-area-inset-right), 3.3%) !important; 521 | } 522 | } 523 | --------------------------------------------------------------------------------