1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

improve cd and poster views

This commit is contained in:
Luke Pulverenti 2013-04-23 22:50:43 -04:00
parent afbda20cad
commit 0595f24311
6 changed files with 209 additions and 23 deletions

View file

@ -20,7 +20,7 @@
}
.libraryPage, .itemListContent {
background: #262626!important;
background: #494949 url(images/bgflip.png) repeat-x!important;
background-attachment: fixed!important;
}
@ -211,8 +211,6 @@
}
.tileImage {
height: 90px;
width: 45%;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
@ -234,7 +232,6 @@
.tileContent {
display: inline-block;
width: 50%;
padding-left: 10px;
color: #fff;
text-align: left;
@ -242,6 +239,33 @@
overflow: hidden;
}
.backdropTileItem .tileImage {
height: 90px;
width: 45%;
}
.backdropTileItem .tileContent {
width: 50%;
}
.posterTileItem .tileImage {
height: 120px;
width: 30%;
}
.posterTileItem .tileContent {
width: 65%;
}
.cdTileItem .tileImage {
height: 100px;
width: 35%;
}
.cdTileItem .tileContent {
width: 60%;
}
.tileName {
font-weight: bold;
white-space: nowrap;
@ -281,17 +305,33 @@
margin-right: 3px;
}
.tileImage {
.backdropTileItem .tileImage {
height: 88px;
}
.posterTileItem .tileImage {
height: 120px;
}
.cdTileItem .tileImage {
height: 115px;
}
}
@media all and (min-width: 850px) {
.tileImage {
.backdropTileItem .tileImage {
height: 105px;
}
.posterTileItem .tileImage {
height: 120px;
}
.posterTileItem {
width: 31%;
}
.tileItem .userDataIcons img {
height: 18px;
width: 18px;
@ -311,18 +351,42 @@
width: 47.5%;
}
.tileImage {
.posterTileItem {
width: 31%;
}
.backdropTileItem .tileImage {
height: 110px;
}
.posterTileItem .tileImage {
height: 136px;
}
.cdTileItem {
width: 31%;
}
.cdTileItem .tileImage {
height: 105px;
}
}
@media all and (min-width: 1200px) {
.tileImage {
.backdropTileItem .tileImage {
height: 100px;
}
.posterTileItem .tileImage {
height: 160px;
}
.tileItem {
width: 31%;
width: 31.5%;
}
.cdTileItem .tileImage {
height: 130px;
}
.scenePosterViewItem img {
@ -331,24 +395,52 @@
}
@media all and (min-width: 1440px) {
.tileImage {
.backdropTileItem .tileImage {
height: 110px;
}
.posterTileItem .tileImage {
height: 150px;
}
.tileItem {
width: 31.5%;
}
.cdTileItem .tileImage {
height: 155px;
}
.posterTileItem {
width: 23.5%;
}
}
@media all and (min-width: 1700px) {
.tileImage {
.backdropTileItem .tileImage {
height: 132px;
}
.posterTileItem .tileImage {
height: 170px;
}
.tileItem {
width: 32%;
}
.posterTileItem {
width: 23.5%;
}
.cdTileItem {
width: 23.5%;
}
.cdTileItem .tileImage {
height: 140px;
}
}
@ -360,6 +452,22 @@
.tileImage {
height: 155px;
}
.posterTileItem {
width: 18.8%;
}
.posterTileItem .tileImage {
height: 160px;
}
.cdTileItem {
width: 18.8%;
}
.cdTileItem .tileImage {
height: 120px;
}
}
@media all and (min-width: 2000px) {
@ -370,6 +478,22 @@
.tileImage {
height: 117px;
}
.posterTileItem {
width: 18.8%;
}
.posterTileItem .tileImage {
height: 160px;
}
.cdTileItem {
width: 18.8%;
}
.cdTileItem .tileImage {
height: 130px;
}
}
@media all and (min-width: 2200px) {
@ -380,6 +504,22 @@
.tileImage {
height: 145px;
}
.posterTileItem {
width: 18.8%;
}
.posterTileItem .tileImage {
height: 185px;
}
.cdTileItem {
width: 18.8%;
}
.cdTileItem .tileImage {
height: 140px;
}
}
@media all and (min-width: 2540px) {
@ -390,6 +530,22 @@
.tileImage {
height: 120px;
}
.posterTileItem {
width: 15.9%;
}
.posterTileItem .tileImage {
height: 180px;
}
.cdTileItem {
width: 15.8%;
}
.cdTileItem .tileImage {
height: 140px;
}
}
.itemsContainer {