jellyfin-web/dashboard-ui/css/posteritem.css
2013-04-28 13:39:16 -04:00

197 lines
3.2 KiB
CSS

.posterItem {
margin: 3px;
text-shadow: none;
font-weight: normal!important;
display: inline-block;
font-size: 14px;
position: relative;
color: #fff!important;
text-decoration: none;
text-align: left;
overflow: hidden;
}
.posterItem:hover {
-moz-box-shadow: 0 0 20px 3px #2572EB;
-webkit-box-shadow: 0 0 20px 3px #2572EB;
box-shadow: 0 0 20px 3px #2572EB;
}
.posterItemImage {
background-size: contain;
background-repeat: no-repeat;
background-position: center bottom;
background-color: #000;
}
.transparentPosterItem .posterItemImage {
background-color: transparent;
}
.defaultPosterItemImage {
background-color: #999;
}
.posterItemText {
text-overflow: ellipsis;
overflow: hidden;
text-wrap: none;
white-space: nowrap;
padding: 4px 5px 4px;
background: #181818;
text-shadow: none;
}
.posterItemTextCentered {
text-align: center;
}
.posterItemText + .posterItemText {
padding-top: 2px;
}
.posterItemDefaultText {
position: absolute;
top: 30%;
left: 0;
right: 0;
text-align: center;
}
.squarePosterItem {
width: 160px;
}
.squarePosterItem .posterItemImage {
height: 160px;
}
.backdropPosterItem {
width: 160px;
}
.backdropPosterItem .posterItemImage {
height: 90px;
}
.portraitPosterItem {
width: 100px;
}
.portraitPosterItem .posterItemImage {
height: 150px;
}
@media all and (min-width: 650px) {
.backdropPosterItem {
width: 192px;
}
.backdropPosterItem .posterItemImage {
height: 108px;
}
}
@media all and (min-width: 750px) {
.squarePosterItem {
width: 160px;
}
.squarePosterItem .posterItemImage {
height: 160px;
}
.portraitPosterItem {
width: 100px;
}
.portraitPosterItem .posterItemImage {
height: 150px;
}
}
@media all and (min-width: 1200px) {
.backdropPosterItem {
width: 272px;
}
.backdropPosterItem .posterItemImage {
height: 153px;
}
.squarePosterItem {
width: 160px;
}
.squarePosterItem .posterItemImage {
height: 160px;
}
.portraitPosterItem {
width: 108px;
}
.portraitPosterItem .posterItemImage {
height: 162px;
}
.posterItem {
font-size: 15px;
}
}
@media all and (min-width: 1440px) {
.squarePosterItem {
width: 170px;
}
.squarePosterItem .posterItemImage {
height: 170px;
}
.portraitPosterItem {
width: 120px;
}
.portraitPosterItem .posterItemImage {
height: 180px;
}
}
@media all and (min-width: 1920px) {
.backdropPosterItem {
width: 320px;
}
.backdropPosterItem .posterItemImage {
height: 180px;
}
.squarePosterItem {
width: 185px;
}
.squarePosterItem .posterItemImage {
height: 185px;
}
.portraitPosterItem {
width: 136px;
}
.portraitPosterItem .posterItemImage {
height: 204px;
}
.posterItem {
font-size: 16px;
}
}