├── README.md ├── landscape.jpg └── landscape_theme.css /README.md: -------------------------------------------------------------------------------- 1 | # jellyfin 2 | Landscape Theme 3 | U must use theme Dark from Jellyfin 4 | Activate Backdrops checkbox (Setting -> Display). 5 | Thats all. 6 | -------------------------------------------------------------------------------- /landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krlsantcard/jellyfin-themes/e1d9230188371e6e74ed98e52938f9fc499a5606/landscape.jpg -------------------------------------------------------------------------------- /landscape_theme.css: -------------------------------------------------------------------------------- 1 | /* Color de fondo general */ 2 | /* definicion de variables */ 3 | :root { 4 | --margin-page: 7%; 5 | } 6 | 7 | /* LOGIN Section */ 8 | /* Narrow the login form */ 9 | #loginPage .readOnlyContent, 10 | #loginPage form { 11 | max-width: 22em; 12 | } 13 | 14 | /* Hide "please login" text, margin is to prevent login form moving too far up */ 15 | #loginPage h1 { 16 | display: none; 17 | } 18 | 19 | #loginPage .padded-left.padded-right.padded-bottom-page { 20 | margin-top: 50px; 21 | } 22 | 23 | /* Hide "manual" and "forgot" buttons */ 24 | #loginPage .raised.cancel.block.btnManual.emby-button { 25 | display: none; 26 | } 27 | #loginPage .raised.cancel.block.btnForgotPassword.emby-button { 28 | display: none; 29 | } 30 | 31 | .dialog, 32 | html { 33 | background-color: #181818; 34 | } 35 | 36 | /**************************************************************** 37 | LAYOUT DESKTOP 38 | ****************************************************************/ 39 | /* header section */ 40 | .skinHeader.semiTransparent { 41 | background-color: rgba(0, 0, 0, 0.0); 42 | } 43 | 44 | .skinHeader-withBackground { 45 | background-color: transparent; 46 | } 47 | 48 | /* removemos info innecesaria */ 49 | .layout-desktop .detailImageContainer .card, 50 | .layout-desktop .itemTags, 51 | .layout-desktop .itemExternalLinks, 52 | .layout-desktop form.trackSelections, 53 | .layout-desktop .itemName.originalTitle { 54 | display: none; 55 | } 56 | 57 | /* reposicionando elementos */ 58 | .layout-desktop .detailLogo { 59 | left: var(--margin-page); 60 | background-position: top left; 61 | top: 38vh; 62 | } 63 | 64 | .layout-desktop .itemBackdrop { 65 | height: 70vh; 66 | } 67 | 68 | .layout-desktop .detailRibbon { 69 | background: none; 70 | } 71 | 72 | .layout-desktop .detailPagePrimaryContainer, 73 | .layout-desktop .detailPageContent { 74 | padding-left: var(--margin-page); 75 | } 76 | 77 | .detailPageSecondaryContainer { 78 | margin: 0; 79 | } 80 | 81 | .backgroundContainer.withBackdrop { 82 | background-color: rgba(0, 0, 0, 0.62); 83 | } 84 | 85 | .withSectionTabs .backgroundContainer.withBackdrop { 86 | background-color: #181818!important; 87 | } 88 | 89 | .layout-desktop .detailPageWrapperContainer { 90 | background: linear-gradient(0deg, black, transparent); 91 | } 92 | 93 | .layout-desktop .detailPagePrimaryContent { 94 | width: 60%; 95 | } 96 | 97 | .layout-desktop .detailButton { 98 | /*border: 2px solid #cecece;*/ 99 | border-radius: 2em; 100 | font-weight: bold; 101 | /*width: 7vw;*/ 102 | background-color: rgba(255, 255, 255, 0.20); 103 | padding: 1em 2em!important; 104 | margin-right: 3%!important; 105 | color: rgb(255, 255, 255); 106 | } 107 | 108 | .layout-desktop .detailButton:hover { 109 | background-color: #ffffff; 110 | color: #181818; 111 | } 112 | 113 | /* btns remove icons */ 114 | .layout-desktop .material-icons.detailButton-icon.play_arrow, 115 | .layout-desktop .material-icons.detailButton-icon.replay { 116 | display: none; 117 | } 118 | 119 | /* btns adding text */ 120 | .layout-desktop .btnPlay::after { 121 | content : attr(title); 122 | /*margin: 0 10px 0 2px;*/ 123 | } 124 | 125 | /*material-icons detailButton-icon replay*/ 126 | .layout-desktop .btnReplay::after { 127 | content : attr(title); 128 | /*margin: 0 10px 0 2px;*/ 129 | } 130 | 131 | .layout-desktop .btntheaters::after { 132 | content : attr(title); 133 | /*margin: 0 10px 0 2px;*/ 134 | } 135 | 136 | .layout-desktop .detailButton { 137 | flex-direction: row; 138 | } 139 | 140 | .layout-desktop .detailRibbon { 141 | height: unset!important; 142 | } 143 | 144 | .layout-desktop .detailPagePrimaryContainer { 145 | /*-webkit-align-content: center;*/ 146 | align-content: flex-start; 147 | /*-webkit-align-items: center;*/ 148 | /*display: -webkit-flex;*/ 149 | display: flex; 150 | z-index: 2; 151 | flex-direction: column; 152 | justify-content: flex-start; 153 | flex-wrap: wrap; 154 | align-items: flex-start; 155 | } 156 | 157 | .layout-desktop h3.itemName { 158 | font-size: 2em; 159 | font-weight: normal; 160 | } 161 | 162 | .layout-desktop .itemMiscInfo, .nameContainer { 163 | margin-bottom: 0.5em; 164 | } 165 | 166 | .layout-desktop .tagline, 167 | .layout-desktop #seriesAirTime { 168 | display: none; 169 | } 170 | 171 | .layout-desktop .detail-clamp-text { 172 | -webkit-line-clamp: 4; 173 | } 174 | 175 | /* season section */ 176 | .layout-desktop .vertical-list { 177 | flex-direction: row; 178 | flex-wrap: wrap; 179 | } 180 | 181 | .layout-desktop .listItem-withContentWrapper { 182 | align-items: flex-start; 183 | flex-direction: column; 184 | width: 32%; 185 | } 186 | 187 | .layout-desktop .listItem-content { 188 | display: flex; 189 | width: 100%; 190 | flex-direction: column; 191 | align-items: flex-start; 192 | } 193 | 194 | .layout-desktop .listItemImage-large { 195 | height: 16vw; 196 | width: 100%; 197 | } 198 | 199 | .layout-desktop .listItem-withContentWrapper:hover { 200 | background-color: rgba(255, 255, 255, 0.10); 201 | } 202 | 203 | /**************************************************************** 204 | LAYOUT MOBILE 205 | ****************************************************************/ 206 | .layout-mobile .headerHomeButton, 207 | .layout-mobile .headerCastButton, 208 | .layout-mobile .headerSyncButton { 209 | display: none; 210 | } 211 | 212 | .layout-mobile .mainDrawerButton { 213 | display: block!important; 214 | } 215 | 216 | .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred { 217 | background: none; 218 | background-color: rgba(0, 0, 0, 0); 219 | } 220 | .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader { 221 | background: none; 222 | background-color: rgba(0, 0, 0, 0); 223 | } 224 | 225 | .headerTabs.sectionTabs { 226 | text-size-adjust: 110%; 227 | font-size: 110%; 228 | } 229 | .pageTitle { 230 | margin-top: auto; 231 | margin-bottom: auto; 232 | } 233 | .emby-tab-button { 234 | padding: 1.75em 1.7em; 235 | } 236 | 237 | /* Seccion Peliculas/Series */ 238 | 239 | .layout-mobile .itemTags, 240 | .layout-mobile .itemExternalLinks, 241 | .layout-mobile .trackSelections, 242 | .layout-mobile .itemName.originalTitle, 243 | .layout-mobile .directorsGroup, 244 | .layout-mobile .writersGroup, 245 | #seriesAirTime { 246 | display: none; 247 | } 248 | 249 | /* Quitamos imagen de poster */ 250 | .layout-mobile .detailImageContainer .card, 251 | .layout-mobile .detailImageContainer .card.backdropCard, 252 | .layout-mobile .detailImageContainer .card.squareCard { 253 | top: auto; 254 | display: none; 255 | } 256 | 257 | /* Mostrando Logo y posicionandolo */ 258 | .layout-mobile .detailLogo { 259 | display: block; 260 | width: 15em; 261 | left: 5%; 262 | top: 17vh; 263 | } 264 | 265 | /* Mismo color de fondo a franja gris */ 266 | .detailRibbon { 267 | background: rgba(32, 32, 32, 0); 268 | } 269 | 270 | /* Sipnosis tamano de 5 lineas */ 271 | .detail-clamp-text { 272 | -webkit-line-clamp: 4; 273 | } 274 | 275 | 276 | .layout-mobile .infoWrapper { 277 | padding-left: 0; 278 | margin-top: 6em; 279 | } 280 | 281 | .layout-mobile .itemMiscInfo, 282 | .layout-mobile .itemName, 283 | .layout-mobile .mainDetailButtons, 284 | .layout-mobile .parentName { 285 | text-align: left; 286 | } 287 | 288 | .layout-mobile .itemMiscInfo, 289 | .layout-mobile .itemName, 290 | .layout-mobile .mainDetailButtons, 291 | .layout-mobile .parentName { 292 | justify-content: left; 293 | text-align: left; 294 | } 295 | 296 | /* Titulo Original y removiendo el titulo actual */ 297 | .layout-mobile .itemName.parentNameLast.withOriginalTitle { 298 | margin: 0.6em 0; 299 | } 300 | 301 | /* moviendo a la Izq Contenedor de botones de pelicula*/ 302 | .layout-mobile .mainDetailButtons { 303 | padding-left: 0; 304 | } 305 | 306 | /* arregalndo padding y margin y aumentando tamano de fanart y agregando degradado */ 307 | .layout-mobile .itemBackdrop { 308 | height: 40vh;/*30*/ 309 | margin-top: 0; 310 | } 311 | 312 | .layout-mobile .itemBackdrop::before { 313 | content: ''; 314 | right: 0; 315 | left: 0; 316 | /*top: 0;*/ 317 | bottom: 0; 318 | height: 25vh; 319 | position: absolute; 320 | z-index: -1; 321 | /*background: linear-gradient(0deg, #181818 15%, #18181800 65%);*/ 322 | background: linear-gradient(0deg, #181818 10%, #18181800 65%); 323 | } 324 | 325 | .layout-mobile .detailPageWrapperContainer { 326 | top: -5em; 327 | } 328 | 329 | .layout-mobile .infoWrapper { 330 | margin-top: 0; 331 | } 332 | 333 | .layout-mobile .itemName.parentNameLast.withOriginalTitle { 334 | margin: 0 0 0.6em 0; 335 | } 336 | 337 | .layout-mobile .detailPageSecondaryContainer { 338 | margin: 0 0 1em 0; 339 | } 340 | 341 | .layout-mobile .overview-expand { 342 | padding: 0 1em 0.3em 1em; 343 | } 344 | 345 | /* play boton */ 346 | .layout-mobile .mainDetailButtons { 347 | margin-top: 1.5em; 348 | } 349 | 350 | .layout-mobile .btnPlay { 351 | border-radius: 2em; 352 | /*width: 7vw;*/ 353 | background-color: white; 354 | /*padding: 0.4em!important;*/ 355 | /*margin-right: 30%!important;*/ 356 | } 357 | 358 | .layout-mobile .btnPlay::after { 359 | content : attr(title); 360 | margin: 0 10px 0 2px; 361 | color: black; 362 | } 363 | 364 | .layout-mobile .btnPlay.detailButton { 365 | flex-direction: row; 366 | } 367 | 368 | .layout-mobile .btnShuffle, 369 | .layout-desktop .btnShuffle { 370 | display: none; 371 | } 372 | 373 | .layout-mobile .material-icons.detailButton-icon.play_arrow { 374 | color: black; 375 | } 376 | 377 | .layout-mobile .listViewUserDataButtons { 378 | display: none; 379 | } 380 | 381 | .layout-mobile .listItem-content { 382 | display: block; 383 | } 384 | 385 | .layout-mobile .listItem-content .listItemBody { 386 | padding: 0.85em 0; 387 | } 388 | 389 | .layout-mobile .listItem-content .listItemImage-large { 390 | height: 30vw; 391 | width: 86vw; 392 | } 393 | 394 | .layout-mobile .listItem-content .listItemImage-large .listItemImageButton, .listItemIndicators { 395 | font-size: 1em!important; 396 | } 397 | 398 | .layout-mobile .listItem-bottomoverview { 399 | font-size: 100%; 400 | } 401 | 402 | .layout-mobile .detailPagePrimaryContent { 403 | position: relative; 404 | margin-top: 1em; 405 | } 406 | 407 | /**************************************************************** 408 | LAYOUT general 409 | ****************************************************************/ 410 | /* cast & crew circular */ 411 | #castContent .cardImageContainer.coveredImage.cardContent.itemAction.lazy.non-blurhashable, 412 | #castContent .cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.itemAction { 413 | border-radius: 50%; 414 | } 415 | 416 | #castContent .cardPadder.cardPadder-overflowPortrait, 417 | #castContent .cardPadder-mixedPortrait, 418 | #castContent .cardPadder-overflowPortrait, 419 | #castContent .cardPadder-portrait, 420 | #castContent .overflowPortraitCard-textCardPadder { 421 | border-radius: 50%; 422 | padding-bottom: 100%; 423 | } 424 | 425 | #castContent .cardOverlayContainer { 426 | border-radius: 50%; 427 | } 428 | 429 | #castContent .cardOverlayButton-br { 430 | bottom: 0; 431 | position: absolute; 432 | left: 38%; 433 | } --------------------------------------------------------------------------------