mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
begin unifying card layouts
This commit is contained in:
Luke Pulverenti
parent
6503c7c6f8
commit
07d49e2573
34 changed files with 216 additions and 2228 deletions
|
|
@ -1,571 +0,0 @@
|
|||
.card {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
contain: style;
|
||||
}
|
||||
.card, .card a {
|
||||
text-decoration: none;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.buttonCard:hover .cardBox {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.cardBox {
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 500px) {
|
||||
|
||||
.cardBox {
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.cardOverlayButtonContainer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 1em .25em .5em 1em;
|
||||
}
|
||||
|
||||
.cardOverlayMoreButton, .cardOverlayPlayButton {
|
||||
color: #fff !important;
|
||||
background-color: rgba(0,0,0,.7) !important;
|
||||
border-radius: 500px;
|
||||
}
|
||||
|
||||
.cardOverlayMoreButton:hover, .cardOverlayPlayButton:hover {
|
||||
background-color: rgba(0,0,0,.9) !important;
|
||||
transition: background-color .5s ease-out;
|
||||
}
|
||||
|
||||
.grayscale {
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.bottomPaddedCard .cardBox:not(.visualCardBox) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hiddenScrollX .bottomPaddedCard .cardBox {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.visualCardBox {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
-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);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.ui-body-b .visualCardBox {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.defaultBackground .cardImage, .ui-body-b .visualCardBox {
|
||||
background-color: #222326;
|
||||
}
|
||||
|
||||
.cardScalable {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.backdropCard .cardPadder, .smallBackdropCard .cardPadder, .overflowBackdropCard .cardPadder {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
.squareCard .cardPadder, .overflowSquareCard .cardPadder {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.letterBoxCard .cardPadder {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.portraitCard .cardPadder, .overflowPortraitCard .cardPadder {
|
||||
padding-bottom: 150%;
|
||||
}
|
||||
|
||||
.bannerCard .cardPadder {
|
||||
padding-bottom: 18.5%;
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cardContent:not(.noHoverEffect):hover .cardImage {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.cardContent .cardFooter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #eee;
|
||||
padding: 6px 0 2px 0;
|
||||
max-width: 100%;
|
||||
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%) !important; /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.7))) !important; /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%) !important; /* W3C */
|
||||
}
|
||||
|
||||
.cardContent .cardFooter:not(.fullCardFooter) {
|
||||
background: rgba(0, 0, 0, .6) !important;
|
||||
}
|
||||
|
||||
.lightCardFooter {
|
||||
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%) !important; /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.7))) !important; /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* W3C */
|
||||
}
|
||||
|
||||
.fullCardFooter {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.visualCardBox .outerCardFooter {
|
||||
padding: .5em .3em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btnCardOptions {
|
||||
padding: 10px !important;
|
||||
margin: 0 !important;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.cardText {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-wrap: none;
|
||||
white-space: nowrap;
|
||||
padding: 5px 5px 2px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.cardButtonContainer {
|
||||
text-align: right;
|
||||
float: right;
|
||||
padding: 5px 0 2px;
|
||||
}
|
||||
|
||||
.cardContent .cardFooter .cardText {
|
||||
font-size: 115%;
|
||||
}
|
||||
|
||||
.cardTextCentered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cardDefaultText {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.cardContent .cardText {
|
||||
padding: 0 6px 4px 5px;
|
||||
}
|
||||
|
||||
.outerCardFooter .cardText + .cardText {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.outerCardFooter .cardText:first-child {
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
.cardImage {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.cardImage canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.coveredCardImage {
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.coveredCardImage.noScale {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.centeredCardImage {
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.ui-body-b .iconCardImage {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.iconCardImage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.iconCardImage iron-icon {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.bannerCard {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.squareCard {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.backdropCard {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
.overflowPortraitCard {
|
||||
width: 40%;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.overflowBackdropCard {
|
||||
width: 84%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.cardProgress {
|
||||
line-height: 7px;
|
||||
}
|
||||
|
||||
.cardProgress .itemProgressBar {
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.overflowSquareCard {
|
||||
width: 42%;
|
||||
}
|
||||
|
||||
@media all and (max-width: 420px) {
|
||||
|
||||
.backdropCard {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 500px) {
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
.squareCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 640px) {
|
||||
|
||||
.portraitCard {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.overflowPortraitCard {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.overflowBackdropCard {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.overflowSquareCard {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 700px) {
|
||||
.squareCard {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 770px) {
|
||||
.backdropCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.bannerCard {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 900px) {
|
||||
|
||||
.squareCard {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1000px) {
|
||||
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.overflowPortraitCard {
|
||||
width: 23%;
|
||||
}
|
||||
|
||||
.overflowBackdropCard {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.overflowSquareCard {
|
||||
width: 22%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
.backdropCard {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.squareCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
|
||||
.bannerCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1400px) {
|
||||
|
||||
.squareCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1600px) {
|
||||
|
||||
.portraitCard {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 12.5%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1800px) {
|
||||
|
||||
.squareCard {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2100px) {
|
||||
|
||||
.squareCard {
|
||||
width: 11.111111111111111111111111111111%;
|
||||
}
|
||||
|
||||
.backdropCard {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
width: 11.111111111111111111111111111111%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2200px) {
|
||||
|
||||
.bannerCard {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2500px) {
|
||||
|
||||
.backdropCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** detailPage169 */
|
||||
.detailPage169Card .cardPadder {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
|
||||
.detailPage169Card {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.detailPage169Card {
|
||||
width: 33.333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 420px) {
|
||||
|
||||
.detailPage169Card {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** detailPagePortrait */
|
||||
.detailPagePortraitCard .cardPadder {
|
||||
padding-bottom: 150%;
|
||||
}
|
||||
|
||||
|
||||
.detailPagePortraitCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
@media all and (min-width: 540px) {
|
||||
|
||||
.detailPagePortraitCard {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** detailPageSquare */
|
||||
.detailPageSquareCard .cardPadder {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
|
||||
.detailPageSquareCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
@media all and (min-width: 540px) {
|
||||
|
||||
.detailPageSquareCard {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
/** horizontalBackdropCard */
|
||||
.horizontalBackdropCard .cardPadder {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
|
||||
.horizontalBackdropCard {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
@media all and (min-width: 500px) {
|
||||
|
||||
.horizontalBackdropCard {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.horizontalBackdropCard {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontalBackdropCard .cardImage {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.horizontalBackdropCard .cardBox {
|
||||
margin: 2px !important;
|
||||
}
|
||||
|
|
@ -907,80 +907,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.itemProgress {
|
||||
vertical-align: top;
|
||||
font-size: 19px;
|
||||
margin-right: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* All HTML5 progress enabled browsers */
|
||||
.itemProgressBar {
|
||||
/* Turns off styling - not usually needed, but good to know. */
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
/* gets rid of default border in Firefox and Opera. */
|
||||
border: 0;
|
||||
margin: 0;
|
||||
height: 14px;
|
||||
border: 0 solid #222;
|
||||
border-radius: 0;
|
||||
width: 50px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Undo these to original */
|
||||
.listItem .itemProgressBar {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
height: .56vh;
|
||||
}
|
||||
|
||||
/* Polyfill */
|
||||
.itemProgressBar[role]:after {
|
||||
background-image: none; /* removes default background from polyfill */
|
||||
}
|
||||
|
||||
/*
|
||||
* Background of the progress bar background
|
||||
*/
|
||||
|
||||
/* Firefox and Polyfill */
|
||||
.itemProgressBar {
|
||||
background: #000 !important; /* !important only needed in polyfill */
|
||||
}
|
||||
|
||||
/* Chrome */
|
||||
.itemProgressBar::-webkit-progress-bar {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.pare
|
||||
/*
|
||||
* Background of the progress bar value
|
||||
*/
|
||||
/* Firefox */
|
||||
.itemProgressBar::-moz-progress-bar {
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
background-color: #52B54B;
|
||||
}
|
||||
|
||||
/* Chrome */
|
||||
.itemProgressBar::-webkit-progress-value {
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
background-color: #52B54B;
|
||||
}
|
||||
|
||||
/* Polyfill */
|
||||
.itemProgressBar[aria-valuenow]:before {
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
background-color: #52B54B;
|
||||
}
|
||||
|
||||
.recordingProgressBar::-moz-progress-bar {
|
||||
background-color: #cc3333;
|
||||
}
|
||||
|
|
@ -993,12 +919,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
background-color: #cc3333;
|
||||
}
|
||||
|
||||
.tileItem .itemProgressBar {
|
||||
top: 2px;
|
||||
width: 40px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.timelineHeader {
|
||||
margin-bottom: .25em;
|
||||
line-height: 1.25em;
|
||||
|
|
@ -1007,7 +927,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
|
||||
.itemsContainer {
|
||||
margin: 0 auto;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.alphabetPicker {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue