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

708 lines
12 KiB
CSS
Raw Normal View History

2014-07-26 13:30:15 -04:00
.card {
display: inline-block;
text-align: left;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
position: relative;
}
2014-08-01 22:34:45 -04:00
.card, .card a {
text-decoration: none;
font-weight: 400 !important;
}
.cardOverlayTarget {
position: absolute;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .85);
2015-02-19 19:34:05 -05:00
z-index: 998;
2014-08-01 22:34:45 -04:00
display: none;
2015-04-19 11:54:20 -04:00
line-height: initial;
2014-08-01 22:34:45 -04:00
}
.cardOverlayInner {
padding: 11px 12px 10px;
}
.cardOverlayInner button:last-child {
margin-right: 0 !important;
}
.cardOverlayInner p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2015-05-07 00:14:35 -04:00
.buttonCard:hover .cardBox {
opacity: .6;
2014-08-01 22:34:45 -04:00
}
2014-07-26 13:30:15 -04:00
.cardBox {
2015-12-23 12:46:01 -05:00
margin: 1px;
2014-08-01 22:34:45 -04:00
}
2015-07-06 22:25:23 -04:00
@media all and (max-width: 800px) {
.cardBox {
margin: 1px;
}
}
2015-06-19 00:23:55 -04:00
.defaultBackground .cardImage {
background-color: #333;
}
2015-08-28 11:02:22 -04:00
.homeTopViews .defaultBackground .cardImage {
background-color: #181818;
}
2015-08-28 00:19:08 -04:00
.homeTopViews .cardImage {
2015-12-14 10:43:03 -05:00
border-radius: 2px;
2015-07-06 03:06:09 -04:00
}
2015-12-29 21:32:54 -05:00
.cardOverlayButtonContainer {
2015-07-06 03:06:09 -04:00
position: absolute;
bottom: 0;
right: 0;
2015-12-29 21:32:54 -05:00
padding: 1em .5em .5em 1em;
}
.cardOverlayMoreButton, .cardOverlayPlayButton {
2015-07-06 03:06:09 -04:00
color: #333;
2015-10-08 12:22:14 -04:00
background-color: rgba(210,210,210,.9);
border-radius: 500px;
2015-12-14 10:43:03 -05:00
padding: 5px;
width: 36px;
height: 36px;
2015-07-06 03:06:09 -04:00
}
2014-09-14 11:10:51 -04:00
.grayscale {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
.bottomPaddedCard .cardBox {
2015-07-06 03:06:09 -04:00
margin-bottom: 24px;
}
2015-07-12 15:33:00 -04:00
.hiddenScrollX .bottomPaddedCard .cardBox {
margin-bottom: 0;
}
2014-07-26 13:30:15 -04:00
.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;
2015-05-17 15:50:37 -04:00
margin: 7px;
2014-07-26 13:30:15 -04:00
}
2015-09-16 22:33:45 -04:00
.ui-body-b .visualCardBox {
2015-06-07 17:21:30 -04:00
background: rgba(40,40,40,.85);
2014-11-10 22:41:19 -05:00
border-radius: 3px;
2014-11-04 07:41:12 -05:00
}
2014-07-26 13:30:15 -04:00
.cardScalable {
position: relative;
}
2015-05-16 15:09:02 -04:00
.backdropCard .cardPadder, .smallBackdropCard .cardPadder, .overflowBackdropCard .cardPadder {
2014-07-26 13:30:15 -04:00
padding-bottom: 56.25%;
}
2015-05-16 15:09:02 -04:00
.squareCard .cardPadder, .overflowSquareCard .cardPadder {
2015-05-07 01:12:13 -04:00
padding-bottom: 100%;
}
2014-08-01 22:34:45 -04:00
.letterBoxCard .cardPadder {
2014-07-26 13:30:15 -04:00
padding-bottom: 75%;
}
2015-05-16 15:09:02 -04:00
.portraitCard .cardPadder, .overflowPortraitCard .cardPadder {
2015-05-07 01:12:13 -04:00
padding-bottom: 150%;
}
2014-08-01 22:34:45 -04:00
.bannerCard .cardPadder {
padding-bottom: 18.5%;
2014-07-26 13:30:15 -04:00
}
.cardContent {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
2015-06-28 21:10:45 -04:00
/* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
overflow: hidden;
2014-07-26 13:30:15 -04:00
}
2015-01-31 21:41:35 -05:00
.cardContent:not(.noHoverEffect):hover .cardImage {
2014-11-10 22:41:19 -05:00
opacity: .5;
}
2014-07-26 13:30:15 -04:00
2015-01-25 14:13:04 -05:00
/*.preview-overlay-container {
2014-07-26 13:30:15 -04:00
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
background: rgba(0,0,0,0.4);
cursor: pointer;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}*/
2015-01-25 14:13:04 -05:00
.cardContent .cardFooter {
position: absolute;
bottom: 0;
left: 0;
2015-05-10 09:06:12 -04:00
color: #eee;
2015-05-10 17:56:13 -04:00
padding: 6px 0 2px 0;
2015-05-10 09:06:12 -04:00
max-width: 100%;
2015-05-23 16:44:15 -04:00
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 */
2015-01-25 14:13:04 -05:00
}
2014-07-26 13:30:15 -04:00
2015-10-26 01:29:32 -04:00
.cardContent .cardFooter:not(.fullCardFooter) {
2015-10-26 12:21:00 -04:00
background: rgba(0, 0, 0, .6) !important;
2015-10-26 01:29:32 -04:00
}
2015-05-11 15:59:59 -04:00
.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 */
}
2015-05-11 12:32:15 -04:00
.fullCardFooter {
right: 0;
}
2015-05-13 00:55:19 -04:00
.visualCardBox .outerCardFooter {
2015-06-07 17:21:30 -04:00
padding: 3px;
2015-05-13 00:55:19 -04:00
position: relative;
}
.btnCardOptions {
padding: 10px !important;
margin: 0 !important;
color: inherit;
font-size: 20px;
}
2014-07-26 13:30:15 -04:00
.cardText {
text-overflow: ellipsis;
overflow: hidden;
text-wrap: none;
white-space: nowrap;
2015-05-10 09:06:12 -04:00
padding: 5px 5px 2px;
2014-07-26 13:30:15 -04:00
font-weight: 400;
2015-04-20 14:04:02 -04:00
line-height: 1.4;
2014-07-26 13:30:15 -04:00
}
2015-08-28 11:02:22 -04:00
.homeTopViews .cardText {
font-size: 15px;
}
2015-06-07 17:21:30 -04:00
.cardButtonContainer {
text-align: right;
float: right;
padding: 5px 0 2px;
}
2015-05-10 09:06:12 -04:00
.cardContent .cardFooter .cardText {
2015-10-26 01:29:32 -04:00
font-size: 16px;
2015-05-10 09:06:12 -04:00
}
2014-08-01 22:34:45 -04:00
.cardOverlayInner {
2015-01-16 15:54:37 -05:00
color: #fff;
2014-08-01 22:34:45 -04:00
}
.cardTextCentered {
text-align: center;
}
.cardDefaultText {
position: absolute;
top: 30%;
left: 0;
right: 0;
text-align: center;
2015-08-19 00:08:03 -04:00
line-height: initial;
2014-08-01 22:34:45 -04:00
}
2014-07-26 13:30:15 -04:00
.cardContent .cardText {
2015-05-10 09:06:12 -04:00
padding: 0 6px 4px 5px;
2014-07-26 13:30:15 -04:00
}
2015-07-06 03:06:09 -04:00
.outerCardFooter .cardText + .cardText {
opacity: .8;
}
.outerCardFooter .cardText:first-child {
padding-top: 7px;
2015-05-04 10:35:38 -04:00
}
2014-07-26 13:30:15 -04:00
@media all and (max-width: 600px) {
.packageReviewText {
display: none;
}
}
.cardImage {
background-size: contain;
background-repeat: no-repeat;
background-position: center bottom;
width: 100%;
height: 100%;
}
2015-05-13 00:55:19 -04:00
.cardImage canvas {
width: 100%;
height: 100%;
}
2014-07-27 18:01:29 -04:00
.coveredCardImage {
2016-01-27 00:54:18 -05:00
background-size: 100% 100%;
2015-08-21 23:30:19 -04:00
background-position: center center;
2014-07-27 18:01:29 -04:00
}
2016-01-27 00:54:18 -05:00
.coveredCardImage.noScale {
background-size: cover;
}
2015-01-27 01:50:40 -05:00
.centeredCardImage {
background-position: center center;
}
2015-10-15 14:48:43 -04:00
.ui-body-b .iconCardImage {
color: #fff;
}
2015-05-08 15:10:53 -04:00
.iconCardImage {
2015-10-15 13:21:18 -04:00
display: flex;
align-items: center;
2015-05-08 15:10:53 -04:00
text-align: center;
2015-10-15 13:21:18 -04:00
justify-content: center;
2015-05-08 15:10:53 -04:00
}
2015-08-15 17:58:52 -04:00
.iconCardImage iron-icon {
2015-10-15 13:21:18 -04:00
width: 30%;
height: 30%;
2015-06-19 00:23:55 -04:00
}
2015-05-08 15:10:53 -04:00
2014-08-01 22:34:45 -04:00
.bannerCard {
width: 100%;
}
.squareCard {
2014-07-26 13:30:15 -04:00
width: 50%;
}
2014-08-01 22:34:45 -04:00
.backdropCard {
2014-07-26 13:30:15 -04:00
width: 50%;
}
2014-08-04 23:41:56 -04:00
.smallBackdropCard {
width: 50%;
}
2014-08-01 22:34:45 -04:00
.portraitCard {
2016-01-23 13:45:39 -05:00
width: 33.333%;
2014-08-01 22:34:45 -04:00
}
2015-05-16 15:09:02 -04:00
.overflowPortraitCard {
width: 40%;
2015-07-29 22:35:11 -04:00
max-width: 200px;
2015-05-16 15:09:02 -04:00
}
.overflowBackdropCard {
2015-12-14 10:43:03 -05:00
width: 84%;
2015-07-29 22:35:11 -04:00
max-width: 400px;
2015-05-07 01:12:13 -04:00
}
2014-08-01 22:34:45 -04:00
.cardProgress {
line-height: 7px;
}
.cardProgress .itemProgressBar {
2015-01-02 00:36:27 -05:00
height: 7px;
2014-08-01 22:34:45 -04:00
width: 100%;
opacity: .8;
}
2015-05-16 15:09:02 -04:00
.overflowSquareCard {
width: 42%;
}
2015-07-20 14:32:55 -04:00
@media all and (max-width: 420px) {
2015-07-17 18:32:00 -04:00
2015-07-19 23:43:13 -04:00
.backdropCard {
2015-07-17 18:32:00 -04:00
width: 100% !important;
}
}
2014-08-01 22:34:45 -04:00
@media all and (max-width: 1200px) {
.portraitCard .cardOverlayInner {
padding-left: 7px;
padding-right: 7px;
}
}
2015-05-16 23:17:23 -04:00
@media all and (min-width: 500px) {
2014-07-26 13:30:15 -04:00
2015-05-13 00:55:19 -04:00
.smallBackdropCard {
2016-01-23 13:45:39 -05:00
width: 33.333%;
2014-07-26 13:30:15 -04:00
}
2015-05-07 01:12:13 -04:00
2015-05-13 00:55:19 -04:00
.squareCard {
2016-01-23 13:45:39 -05:00
width: 33.333%;
2015-05-07 01:12:13 -04:00
}
2014-07-26 13:30:15 -04:00
}
2015-05-13 00:55:19 -04:00
@media all and (min-width: 640px) {
2014-07-26 13:30:15 -04:00
2015-05-16 15:09:02 -04:00
.portraitCard {
2015-05-07 01:12:13 -04:00
width: 25%;
2014-08-04 23:41:56 -04:00
}
2015-04-29 13:39:23 -04:00
2015-05-16 15:09:02 -04:00
.overflowPortraitCard {
width: 36%;
2015-04-29 13:39:23 -04:00
}
2015-05-07 01:12:13 -04:00
2015-05-16 15:09:02 -04:00
.overflowBackdropCard {
width: 60%;
}
.overflowSquareCard {
width: 30%;
2015-05-07 01:12:13 -04:00
}
2015-04-29 13:39:23 -04:00
}
2015-04-25 23:25:07 -04:00
@media all and (min-width: 700px) {
2015-07-06 03:06:09 -04:00
.squareCard {
width: 25%;
}
2014-07-26 13:30:15 -04:00
}
2015-05-22 11:59:17 -04:00
@media all and (min-width: 770px) {
.backdropCard {
2016-01-23 13:45:39 -05:00
width: 33.333%;
2015-05-22 11:59:17 -04:00
}
}
2014-07-26 13:30:15 -04:00
@media all and (min-width: 800px) {
2015-09-25 08:53:38 -04:00
.bannerCard {
width: 50%;
}
2014-08-01 22:34:45 -04:00
.portraitCard {
width: 20%;
}
2014-08-04 23:41:56 -04:00
2015-05-13 00:55:19 -04:00
.smallBackdropCard {
width: 25%;
}
2014-07-26 13:30:15 -04:00
}
2015-07-06 03:06:09 -04:00
@media all and (min-width: 900px) {
2014-07-26 13:30:15 -04:00
2014-08-01 22:34:45 -04:00
.squareCard {
2014-07-26 13:30:15 -04:00
width: 20%;
}
2015-07-06 03:06:09 -04:00
}
@media all and (min-width: 1000px) {
2014-07-26 13:30:15 -04:00
2014-08-04 23:41:56 -04:00
.smallBackdropCard {
width: 20%;
}
2015-05-07 01:12:13 -04:00
2015-05-16 15:09:02 -04:00
.overflowPortraitCard {
width: 23%;
}
.overflowBackdropCard {
width: 40%;
}
.overflowSquareCard {
width: 22%;
2015-05-07 01:12:13 -04:00
}
2014-07-26 13:30:15 -04:00
}
@media all and (min-width: 1200px) {
2015-04-25 23:25:07 -04:00
.backdropCard {
width: 25%;
}
2014-08-01 22:34:45 -04:00
.squareCard {
width: 16.666666666666666666666666666667%;
}
.bannerCard {
2016-01-23 13:45:39 -05:00
width: 33.333%;
2014-08-01 22:34:45 -04:00
}
.portraitCard {
2014-07-26 13:30:15 -04:00
width: 16.666666666666666666666666666667%;
}
2014-08-04 23:41:56 -04:00
.smallBackdropCard {
width: 16.666666666666666666666666666667%;
}
2014-07-26 13:30:15 -04:00
}
@media all and (min-width: 1400px) {
2014-08-01 22:34:45 -04:00
.squareCard {
2014-07-26 13:30:15 -04:00
width: 14.285714285714285714285714285714%;
}
2014-08-01 22:34:45 -04:00
.portraitCard {
width: 14.285714285714285714285714285714%;
}
2014-08-04 23:41:56 -04:00
.smallBackdropCard {
width: 14.285714285714285714285714285714%;
}
2014-07-26 13:30:15 -04:00
}
@media all and (min-width: 1600px) {
2014-08-01 22:34:45 -04:00
.portraitCard {
2015-01-31 15:28:18 -05:00
width: 12.5%;
2014-08-01 22:34:45 -04:00
}
2014-08-04 23:41:56 -04:00
.smallBackdropCard {
width: 12.5%;
}
2014-08-01 22:34:45 -04:00
}
@media all and (min-width: 1800px) {
.squareCard {
2015-04-11 21:38:38 -04:00
width: 12.5%;
}
2014-08-04 23:41:56 -04:00
.smallBackdropCard {
width: 10%;
}
}
2015-12-14 10:43:03 -05:00
@media all and (min-width: 2100px) {
2015-04-11 21:38:38 -04:00
.squareCard {
width: 11.111111111111111111111111111111%;
}
2015-04-14 23:41:29 -04:00
.backdropCard {
width: 20%;
}
.portraitCard {
width: 11.111111111111111111111111111111%;
}
2015-04-11 21:38:38 -04:00
}
2015-01-23 01:15:15 -05:00
@media all and (min-width: 2200px) {
2015-01-25 14:13:04 -05:00
.bannerCard {
width: 25%;
}
2015-04-14 23:41:29 -04:00
.portraitCard {
width: 10%;
}
}
@media all and (min-width: 2500px) {
.backdropCard {
width: 16.666666666666666666666666666667%;
}
2014-07-26 13:30:15 -04:00
}
2014-08-01 22:34:45 -04:00
/** detailPage169 */
.detailPage169Card .cardPadder {
padding-bottom: 56.25%;
}
2014-07-26 13:30:15 -04:00
.detailPage169Card {
width: 50%;
}
2015-07-29 16:31:15 -04:00
@media all and (min-width: 800px) {
2014-07-26 13:30:15 -04:00
.detailPage169Card {
2016-01-23 13:45:39 -05:00
width: 33.333%;
2014-07-26 13:30:15 -04:00
}
2014-08-01 22:34:45 -04:00
}
2015-07-20 14:32:55 -04:00
@media all and (max-width: 420px) {
2015-07-18 14:07:03 -04:00
2015-07-19 23:43:13 -04:00
.detailPage169Card {
2015-07-18 14:07:03 -04:00
width: 100% !important;
}
}
2014-08-01 22:34:45 -04:00
/** detailPagePortrait */
.detailPagePortraitCard .cardPadder {
padding-bottom: 150%;
}
.detailPagePortraitCard {
2016-01-23 13:45:39 -05:00
width: 33.333%;
2014-08-01 22:34:45 -04:00
}
@media all and (min-width: 540px) {
.detailPagePortraitCard {
width: 25%;
}
}
@media all and (min-width: 800px) {
.detailPagePortraitCard {
width: 20%;
}
}
/** detailPageSquare */
.detailPageSquareCard .cardPadder {
padding-bottom: 100%;
}
.detailPageSquareCard {
2016-01-23 13:45:39 -05:00
width: 33.333%;
2014-08-01 22:34:45 -04:00
}
@media all and (min-width: 540px) {
.detailPageSquareCard {
2014-08-15 12:35:41 -04:00
width: 25%;
2014-08-01 22:34:45 -04:00
}
}
/** homePageSmallBackdropCard */
.homePageSmallBackdropCard .cardPadder {
padding-bottom: 56.25%;
}
.homePageSmallBackdropCard {
width: 50%;
}
@media all and (min-width: 540px) {
.homePageSmallBackdropCard {
2016-01-23 13:45:39 -05:00
width: 33.333%;
2014-08-01 22:34:45 -04:00
}
}
@media all and (min-width: 600px) {
.homePageSmallBackdropCard {
width: 25%;
}
}
2015-08-28 20:50:39 -04:00
@media all and (min-width: 800px) {
2014-08-01 22:34:45 -04:00
.homePageSmallBackdropCard {
2015-04-15 11:41:42 -04:00
width: 20%;
2014-08-01 22:34:45 -04:00
}
}
2014-12-15 00:16:23 -05:00
2015-08-28 20:50:39 -04:00
@media all and (min-width: 1100px) {
.homePageSmallBackdropCard {
width: 16.66666666666667%;
}
}
2015-05-07 01:12:13 -04:00
@media all and (min-width: 1440px) {
2014-12-15 00:16:23 -05:00
.homePageSmallBackdropCard {
2015-08-28 20:50:39 -04:00
width: 12.5%;
2014-12-15 00:16:23 -05:00
}
}
2015-03-02 00:16:29 -05:00
/** 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;
}