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

update components

This commit is contained in:
Luke Pulverenti 2016-07-29 11:54:43 -04:00
parent c59b4c5a08
commit 1978b2c480
4 changed files with 464 additions and 121 deletions

View file

@ -10,12 +10,23 @@
outline: none !important;
cursor: pointer;
contain: style;
flex-shrink: 0;
}
.verticalItemsContainer .card {
contain: layout style;
.itemsContainer {
display: flex;
}
.verticalItemsContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.verticalItemsContainer .card {
contain: layout style;
}
.card, .card:focus {
font-weight: inherit !important;
}
@ -34,15 +45,11 @@ button.card {
padding-bottom: 56.25%;
}
.squareCard .cardPadder {
.squareCard .cardPadder, .overflowSquareCard .cardPadder {
padding-bottom: 100%;
}
.letterBoxCard .cardPadder {
padding-bottom: 75%;
}
.portraitCard .cardPadder {
.portraitCard .cardPadder, .overflowPortraitCard .cardPadder {
padding-bottom: 150%;
}
@ -61,6 +68,10 @@ button.card {
overflow: hidden;
}
button.cardContent {
display: block;
}
.round .cardBox {
border: .7em solid transparent;
}
@ -146,7 +157,21 @@ button.card {
}
.cardFooter {
padding: .25em .25em;
padding: .5em .3em;
}
.cardFooter .cardText + .cardText {
opacity: .6;
}
.card:not(.round) .cardFooter {
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-ms-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
background-color: #222326;
}
.innerCardFooter {
@ -165,16 +190,12 @@ button.card {
}
.cardText {
padding: .25em .35em;
padding: .35em .35em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cardText + .cardText {
padding-top: .1em;
}
.cardText {
color: inherit;
}
@ -215,6 +236,250 @@ button.card {
align-items: center;
}
.cardOverlayButton {
color: #fff !important;
background-color: rgba(0,0,0,.7) !important;
border-radius: 500px;
position: absolute;
bottom: 0;
right: 0;
margin: 0 .25em .25em 0;
}
.cardOverlayButton:hover {
background-color: rgba(0,0,0,.9) !important;
transition: background-color .5s ease-out;
}
.emptyCardImageContainer {
font-size: 90%;
}
.scalableCard.personCard {
width: 14.285714285714285714285714285714%;
}
.scalableCard.backdropCard {
width: 100%;
}
.scalableCard.squareCard {
width: 50%;
}
.scalableCard.portraitCard {
width: 33.333333333333333333333333333333%;
}
.scalableCard.overflowPortraitCard {
width: 40%;
max-width: 200px;
}
.scalableCard.overflowBackdropCard {
width: 84%;
max-width: 400px;
}
.scalableCard.overflowSquareCard {
width: 42%;
}
@media all and (max-width: 420px) {
.scalableCard.backdropCard {
width: 100% !important;
}
}
@media all and (min-width: 500px) {
.scalableCard.smallBackdropCard {
width: 33.333333333333333333333333333333%;
}
.scalableCard.squareCard {
width: 33.333333333333333333333333333333%;
}
}
@media all and (min-width: 640px) {
.scalableCard.portraitCard {
width: 25%;
}
.scalableCard.overflowPortraitCard {
width: 36%;
}
.scalableCard.overflowBackdropCard {
width: 60%;
}
.scalableCard.overflowSquareCard {
width: 30%;
}
}
@media all and (min-width: 700px) {
.scalableCard.squareCard {
width: 25%;
}
}
@media all and (min-width: 770px) {
.scalableCard.backdropCard {
width: 33.333333333333333333333333333333%;
}
}
@media all and (min-width: 800px) {
.scalableCard.bannerCard {
width: 50%;
}
.scalableCard.portraitCard {
width: 20%;
}
.scalableCard.smallBackdropCard {
width: 25%;
}
}
@media all and (min-width: 900px) {
.scalableCard.squareCard {
width: 20%;
}
}
@media all and (min-width: 1000px) {
.scalableCard.smallBackdropCard {
width: 20%;
}
.scalableCard.overflowPortraitCard {
width: 23%;
}
.scalableCard.overflowBackdropCard {
width: 40%;
}
.scalableCard.overflowSquareCard {
width: 22%;
}
}
@media all and (min-width: 1200px) {
.scalableCard.backdropCard {
width: 25%;
}
.scalableCard.squareCard {
width: 16.666666666666666666666666666667%;
}
.scalableCard.bannerCard {
width: 33.333333333333333333333333333333%;
}
.scalableCard.portraitCard {
width: 16.666666666666666666666666666667%;
}
.scalableCard.smallBackdropCard {
width: 16.666666666666666666666666666667%;
}
}
@media all and (min-width: 1400px) {
.scalableCard.squareCard {
width: 14.285714285714285714285714285714%;
}
.scalableCard.portraitCard {
width: 14.285714285714285714285714285714%;
}
.scalableCard.smallBackdropCard {
width: 14.285714285714285714285714285714%;
}
}
@media all and (min-width: 1600px) {
.scalableCard.scalableCard.portraitCard {
width: 12.5%;
}
.scalableCard.scalableCard.smallBackdropCard {
width: 12.5%;
}
}
@media all and (min-width: 1800px) {
.scalableCard.squareCard {
width: 12.5%;
}
.scalableCard.smallBackdropCard {
width: 10%;
}
}
@media all and (min-width: 2100px) {
.scalableCard.squareCard {
width: 11.111111111111111111111111111111%;
}
.scalableCard.backdropCard {
width: 20%;
}
.scalableCard.portraitCard {
width: 11.111111111111111111111111111111%;
}
}
@media all and (min-width: 2200px) {
.scalableCard.bannerCard {
width: 25%;
}
.scalableCard.portraitCard {
width: 10%;
}
}
@media all and (min-width: 2500px) {
.scalableCard.backdropCard {
width: 16.666666666666666666666666666667%;
}
}
.layout-tv .scalableCard.backdropCard {
width: 25%;
}
.layout-tv .scalableCard.squareCard {
width: 16.66666666666666667%;
}
.layout-tv .scalableCard.portraitCard {
width: 16.66666666666666667%;
}