1325 lines
28 KiB
CSS
1325 lines
28 KiB
CSS
.card {
|
|
border: 0;
|
|
font-size: inherit!important;
|
|
font-family: inherit!important;
|
|
text-transform: none;
|
|
background-color: transparent!important;
|
|
background: 0 0!important;
|
|
transition: -webkit-transform 100ms ease-out,opacity 100ms ease-out;
|
|
transition: transform 100ms ease-out,opacity 100ms ease-out;
|
|
margin: 1em 0em 1em 0em;
|
|
padding: 0;
|
|
display: block;
|
|
color: inherit!important;
|
|
-webkit-tap-highlight-color: transparent;
|
|
outline: 0!important;
|
|
contain: layout style paint;
|
|
-webkit-flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
font-weight: inherit!important;
|
|
line-height: inherit;
|
|
text-shadow: 2px 2px 5px #0000007a;
|
|
}
|
|
.card:hover {
|
|
transform: scale(1.03);
|
|
webkit-transform: scale(1.03);
|
|
text-shadow: 2px 2px 5px black;
|
|
}
|
|
.card.itemAction {
|
|
cursor: pointer;
|
|
}
|
|
.card-focustransform {
|
|
contain: layout style;
|
|
}
|
|
.cardPadder-backdrop {
|
|
padding-bottom: 56.25%;
|
|
contain: strict;
|
|
}
|
|
.cardPadder-margin.cardPadder-backdrop {
|
|
margin-bottom: 56.25%;
|
|
}
|
|
.cardPadder-square {
|
|
padding-bottom: 100%;
|
|
contain: strict;
|
|
}
|
|
.cardPadder-margin.cardPadder-square {
|
|
margin-bottom: 100%;
|
|
}
|
|
.cardPadder-portrait {
|
|
padding-bottom: 150%;
|
|
contain: strict;
|
|
}
|
|
.cardPadder-margin.cardPadder-portrait {
|
|
margin-bottom: 150%;
|
|
}
|
|
.cardPadder-fourThree {
|
|
padding-bottom: 75%;
|
|
contain: strict;
|
|
}
|
|
.cardPadder-margin.cardPadder-fourThree {
|
|
margin-bottom: 75%;
|
|
}
|
|
.cardPadder-banner {
|
|
padding-bottom: 18.5%;
|
|
contain: strict;
|
|
}
|
|
.cardPadder-margin.cardPadder-banner {
|
|
margin-bottom: 18.5%;
|
|
}
|
|
@supports (aspect-ratio: 16 / 9) {
|
|
.cardPadder-backdrop {
|
|
padding-bottom: 0 !important;
|
|
aspect-ratio: 16/9;
|
|
}
|
|
.cardPadder-square {
|
|
padding-bottom: 0 !important;
|
|
aspect-ratio: 1;
|
|
}
|
|
.cardPadder-portrait {
|
|
padding-bottom: 0 !important;
|
|
aspect-ratio: 2/3;
|
|
}
|
|
.cardPadder-fourThree {
|
|
padding-bottom: 0 !important;
|
|
aspect-ratio: 4/3;
|
|
}
|
|
.cardPadder-banner {
|
|
padding-bottom: 0 !important;
|
|
aspect-ratio: 1000/185;
|
|
}
|
|
.cardPadder-margin {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
.cardBox {
|
|
padding: 0 !important;
|
|
margin: 0.72em;
|
|
margin: min(0.72em, max(0.38em, 1.06vw));
|
|
transition: none;
|
|
border: 0 solid transparent;
|
|
-webkit-tap-highlight-color: transparent;
|
|
outline: 0 !important;
|
|
contain: layout style;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.card-padded {
|
|
padding: 0.72em;
|
|
padding: min(0.72em, max(0.38em, 1.06vw));
|
|
}
|
|
.card-bottompadded {
|
|
padding-bottom: 1.8em !important;
|
|
}
|
|
.cardBox-focustransform {
|
|
transition: -webkit-transform 0.2s ease-out;
|
|
transition: transform 0.2s ease-out;
|
|
}
|
|
.card:focus > .cardBox-focustransform {
|
|
-webkit-transform: scale(1.18, 1.18);
|
|
transform: scale(1.18, 1.18);
|
|
}
|
|
.card:focus > .cardBox-focustransform-titleadjust {
|
|
-webkit-transform: scale(1.18, 1.18) translateY(0.5em);
|
|
transform: scale(1.18, 1.18) translateY(0.5em);
|
|
}
|
|
.card-focustransform:focus .cardText {
|
|
--theme-text-color-alpha: 1 !important;
|
|
}
|
|
.cardBox-bottompadded {
|
|
margin-bottom: 1.8em !important;
|
|
}
|
|
.card:focus {
|
|
z-index: 10 !important;
|
|
}
|
|
@media not all and (pointer: fine) {
|
|
.cardBox-touchzoom {
|
|
transition: -webkit-transform 0.3s ease-out;
|
|
transition: transform 0.3s ease-out;
|
|
transition-delay: 0.1s;
|
|
}
|
|
.card:active > .cardBox-touchzoom {
|
|
-webkit-transform: scale(1.08);
|
|
transform: scale(1.08);
|
|
}
|
|
}
|
|
.cardBox-sideFooter {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-flex-direction: row;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.cardSideFooter-bottomsections {
|
|
-webkit-flex-basis: 100%;
|
|
flex-basis: 100%;
|
|
}
|
|
.cardFooterContent {
|
|
-webkit-flex-grow: 1;
|
|
flex-grow: 1;
|
|
padding: 0 1.25em;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
font-weight: 600;
|
|
min-height: 3em;
|
|
box-sizing: border-box;
|
|
}
|
|
.cardFooterContent-start {
|
|
text-align: start;
|
|
padding: 0 0.5em;
|
|
}
|
|
.cardFooterContent > .cardText {
|
|
padding-top: 0;
|
|
-webkit-padding-start: 0.25em;
|
|
padding-inline-start: 0.25em;
|
|
-webkit-padding-end: 0.25em;
|
|
padding-inline-end: 0.25em;
|
|
}
|
|
.mediaSourceIndicator {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
position: absolute;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
top: 0.3em;
|
|
left: 0.3em;
|
|
inset-inline-start: 0.3em;
|
|
inset-inline-end: initial;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: 1.6em;
|
|
height: 1.6em;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
background: #38c;
|
|
}
|
|
.cardContent {
|
|
overflow: hidden;
|
|
display: block;
|
|
margin: 0 !important;
|
|
height: 100%;
|
|
-webkit-tap-highlight-color: transparent;
|
|
contain: strict;
|
|
content-visibility: auto;
|
|
position: relative;
|
|
}
|
|
.cardImageContainer {
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
color: inherit;
|
|
height: 100%;
|
|
border-radius: 0.3em;
|
|
contain: strict;
|
|
content-visibility: auto;
|
|
}
|
|
@supports (aspect-ratio: 16 / 9) {
|
|
.cardImageContainer {
|
|
background-clip: content-box !important;
|
|
}
|
|
}
|
|
.chapterCardImageContainer {
|
|
background-color: #000;
|
|
border-radius: 0;
|
|
}
|
|
.cardContent-button {
|
|
border: 0 !important;
|
|
-webkit-padding-start: 0 !important;
|
|
padding-inline-start: 0 !important;
|
|
-webkit-padding-end: 0 !important;
|
|
padding-inline-end: 0 !important;
|
|
padding-top: 0 !important;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
width: 100%;
|
|
vertical-align: middle;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
outline: 0;
|
|
}
|
|
.cardContent-bg-black {
|
|
background-color: #000 !important;
|
|
}
|
|
.paddedImage {
|
|
background-size: auto 70%;
|
|
}
|
|
.grayscaleImage {
|
|
-webkit-filter: grayscale(100%);
|
|
filter: grayscale(100%);
|
|
}
|
|
.visualCardBox .cardContent {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-end-start-radius: 0;
|
|
border-end-end-radius: 0;
|
|
}
|
|
.cardImageContainer-sideFooter {
|
|
position: relative;
|
|
width: 5.4em;
|
|
height: 5.4em;
|
|
border-radius: 0;
|
|
-webkit-flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
padding: 0 !important;
|
|
}
|
|
.cardImageContainer-smallSideFooter {
|
|
height: 3.6em;
|
|
width: 3.6em;
|
|
padding: 0 !important;
|
|
}
|
|
.cardImage {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center bottom;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-position: center center;
|
|
object-fit: contain;
|
|
border: 0 !important;
|
|
contain: layout style paint;
|
|
content-visibility: auto;
|
|
}
|
|
.cardImage-padded {
|
|
height: 70%;
|
|
top: 15%;
|
|
bottom: 15%;
|
|
}
|
|
.cardContent-round {
|
|
border-radius: 100em;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
object-fit: cover;
|
|
}
|
|
.coveredImage {
|
|
background-size: 100% 100%;
|
|
background-position: center center;
|
|
object-fit: fill;
|
|
}
|
|
.coveredImage-noScale {
|
|
background-size: cover;
|
|
object-fit: cover;
|
|
}
|
|
.coveredImage-contain {
|
|
background-size: contain;
|
|
object-fit: contain;
|
|
}
|
|
.cardFooter {
|
|
padding: 0.4em 0.5em 0.85em 0.5em;
|
|
position: relative;
|
|
}
|
|
.cardFooter-side {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.cardFooter-vibrant::before {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
content: " ";
|
|
}
|
|
.cardFooter-vibrant {
|
|
padding: 0.5em 0.5em 0.85em 0.5em;
|
|
font-weight: 600;
|
|
position: relative;
|
|
}
|
|
.visualCardBox {
|
|
box-shadow:
|
|
0 0.06933em 0.06933em 0 rgba(0, 0, 0, 0.14),
|
|
0 0.13866em 0.06933em -0.06933em rgba(0, 0, 0, 0.12),
|
|
0 0.06933em 0.208em 0 rgba(0, 0, 0, 0.2);
|
|
border-radius: 0.42em;
|
|
}
|
|
.visualCardBox-vibrant {
|
|
overflow: hidden;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.innerCardFooter {
|
|
background-color: transparent;
|
|
position: absolute;
|
|
bottom: 0;
|
|
text-align: start;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
color: #fff;
|
|
left: 0;
|
|
right: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
text-shadow: 0.14em 0.14em 0.28em rgba(0, 0, 0, 0.45);
|
|
}
|
|
.cardText {
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.cardText-overview {
|
|
white-space: normal;
|
|
height: 3.8rem;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
text-align: left;
|
|
}
|
|
.cardText-secondary {
|
|
font-size: 92%;
|
|
}
|
|
.cardText-first-padded {
|
|
padding-top: 0.22em;
|
|
}
|
|
.innerCardFooter > .cardText {
|
|
padding: 0.1em 0.35em;
|
|
}
|
|
.cardFooter-withlogo {
|
|
-webkit-padding-start: 4em;
|
|
padding-inline-start: 4em;
|
|
position: relative;
|
|
}
|
|
.cardFooterLogo {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: initial;
|
|
width: 4.5em;
|
|
background-size: 70% auto;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
.cardDefaultText {
|
|
white-space: normal;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 10%;
|
|
inset-inline-start: 10%;
|
|
inset-inline-end: initial;
|
|
width: 80%;
|
|
}
|
|
@supports (aspect-ratio: 16 / 9) {
|
|
.cardDefaultText {
|
|
position: static;
|
|
top: initial;
|
|
left: initial;
|
|
right: initial;
|
|
inset-inline-start: initial;
|
|
inset-inline-end: initial;
|
|
width: auto;
|
|
}
|
|
}
|
|
.textActionButton {
|
|
border: 0 !important;
|
|
background: 0 0;
|
|
border: 0 !important;
|
|
padding: 0 !important;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
color: inherit !important;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
outline: 0 !important;
|
|
font-weight: inherit;
|
|
line-height: normal !important;
|
|
}
|
|
.cardTextActionButton {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: inherit;
|
|
line-height: 2 !important;
|
|
}
|
|
.cardTextLinksLine > .cardTextActionButton {
|
|
width: auto;
|
|
}
|
|
.cardImageIcon {
|
|
font-size: 4em !important;
|
|
color: inherit;
|
|
}
|
|
.cardImageIcon-sideFooter {
|
|
font-size: 3em !important;
|
|
}
|
|
.cardImageIcon-smallSideFooter {
|
|
font-size: 1.64em !important;
|
|
}
|
|
.cardImageIcon-center {
|
|
width: 1em;
|
|
height: 1em;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
inset-inline-start: 50%;
|
|
inset-inline-end: initial;
|
|
-webkit-margin-start: -0.5em;
|
|
margin-inline-start: -0.5em;
|
|
margin-top: -0.5em;
|
|
}
|
|
@supports (aspect-ratio: 16 / 9) {
|
|
.cardImageIcon-center {
|
|
width: auto;
|
|
height: auto;
|
|
position: initial;
|
|
margin-top: 0;
|
|
-webkit-margin-start: 0;
|
|
margin-inline-start: 0;
|
|
}
|
|
}
|
|
.cardRefreshIndicator-sideFooter {
|
|
position: absolute !important;
|
|
}
|
|
.cardOverlayButton {
|
|
color: rgba(255, 255, 255, 0.76);
|
|
margin: 0;
|
|
z-index: 1;
|
|
}
|
|
.cardOverlayButton-br {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
inset-inline-start: initial;
|
|
inset-inline-end: 0;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
}
|
|
.cardOverlayButtonIcon {
|
|
border-radius: 100em;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
:root {
|
|
--backdrop-cards: 1;
|
|
--small-sidefooter-cards: 1.3;
|
|
--sidefooter-cards: 1;
|
|
--banner-cards: 1;
|
|
--four-three-cards: 2;
|
|
--square-cards: 2;
|
|
--portrait-cards: 3;
|
|
--user-cards-size-adjust: 0;
|
|
--app-cards-size-adjust: 0;
|
|
}
|
|
.itemsContainer-defaultCardSize {
|
|
--user-cards-size-adjust: 0;
|
|
}
|
|
.cardSizeSmaller {
|
|
--app-cards-size-adjust: 1;
|
|
}
|
|
@media all and (min-width: 60em) and (max-width: 99em) {
|
|
.skinBody-withFullDrawer {
|
|
--app-cards-size-adjust: -1;
|
|
}
|
|
.skinBody-withFullDrawer .cardSizeSmaller {
|
|
--app-cards-size-adjust: -1;
|
|
}
|
|
}
|
|
.squareCard {
|
|
width: 16.6666667%;
|
|
width: calc(100% / (var(--square-cards) + var(--app-cards-size-adjust)));
|
|
}
|
|
.squareCard-horiz {
|
|
width: 15.3333333vw;
|
|
width: calc(92vw / var(--square-cards));
|
|
}
|
|
.portraitCard {
|
|
width: 16.6666667%;
|
|
width: calc(100% / (var(--portrait-cards) + var(--app-cards-size-adjust)));
|
|
}
|
|
.portraitCard-horiz {
|
|
width: 15.3333333vw;
|
|
width: calc(92vw / var(--portrait-cards));
|
|
}
|
|
.bannerCard {
|
|
width: 33.333333%;
|
|
width: calc(100% / (var(--banner-cards) + var(--app-cards-size-adjust)));
|
|
}
|
|
.bannerCard-horiz {
|
|
width: 30.66667vw;
|
|
width: calc(92vw / var(--banner-cards));
|
|
}
|
|
.sideFooterCard {
|
|
width: 25%;
|
|
width: calc(100% / (var(--sidefooter-cards) + var(--app-cards-size-adjust)));
|
|
}
|
|
.sideFooterCard-horiz {
|
|
width: 23vw;
|
|
width: calc(92vw / var(--sidefooter-cards));
|
|
}
|
|
.smallSideFooterCard {
|
|
width: 16.6666667%;
|
|
width: calc(
|
|
100% / (var(--small-sidefooter-cards) + var(--app-cards-size-adjust))
|
|
);
|
|
}
|
|
.smallSideFooterCard-horiz {
|
|
width: 15.3333333vw;
|
|
width: calc(
|
|
92vw / (var(--small-sidefooter-cards) + var(--app-cards-size-adjust))
|
|
);
|
|
}
|
|
.fourThreeCard {
|
|
width: 25%;
|
|
width: calc(100% / (var(--four-three-cards) + var(--app-cards-size-adjust)));
|
|
}
|
|
.fourThreeCard-horiz {
|
|
width: 23vw;
|
|
width: calc(92vw / var(--four-three-cards));
|
|
}
|
|
.backdropCard {
|
|
width: 25%;
|
|
width: calc(100% / (var(--backdrop-cards) + var(--app-cards-size-adjust)));
|
|
}
|
|
.backdropCard-horiz {
|
|
width: 23vw;
|
|
width: calc(92vw / var(--backdrop-cards));
|
|
}
|
|
@supports (width: max(10em, 5vw)) {
|
|
.squareCard {
|
|
width: calc(
|
|
100% /
|
|
max(
|
|
(
|
|
var(--square-cards) + var(--user-cards-size-adjust) +
|
|
var(--app-cards-size-adjust)
|
|
),
|
|
2
|
|
)
|
|
);
|
|
}
|
|
.squareCard-horiz {
|
|
width: calc(
|
|
92vw / max((var(--square-cards) + var(--user-cards-size-adjust)), 2)
|
|
);
|
|
}
|
|
.portraitCard {
|
|
width: calc(
|
|
100% /
|
|
max(
|
|
(
|
|
var(--portrait-cards) + var(--user-cards-size-adjust) +
|
|
var(--app-cards-size-adjust)
|
|
),
|
|
3
|
|
)
|
|
);
|
|
}
|
|
.portraitCard-horiz {
|
|
width: calc(
|
|
92vw / max((var(--portrait-cards) + var(--user-cards-size-adjust)), 3)
|
|
);
|
|
}
|
|
.bannerCard {
|
|
width: calc(
|
|
100% /
|
|
max(
|
|
(
|
|
var(--banner-cards) + var(--user-cards-size-adjust) +
|
|
var(--app-cards-size-adjust)
|
|
),
|
|
1
|
|
)
|
|
);
|
|
}
|
|
.bannerCard-horiz {
|
|
width: calc(
|
|
92vw / max((var(--banner-cards) + var(--user-cards-size-adjust)), 1)
|
|
);
|
|
}
|
|
.sideFooterCard {
|
|
width: calc(
|
|
100% /
|
|
max(
|
|
(
|
|
var(--sidefooter-cards) + var(--user-cards-size-adjust) +
|
|
var(--app-cards-size-adjust)
|
|
),
|
|
1
|
|
)
|
|
);
|
|
}
|
|
.sideFooterCard-horiz {
|
|
width: calc(
|
|
92vw / max((var(--sidefooter-cards) + var(--user-cards-size-adjust)), 1)
|
|
);
|
|
}
|
|
.smallSideFooterCard {
|
|
width: calc(
|
|
100% /
|
|
max(
|
|
(
|
|
var(--small-sidefooter-cards) + var(--user-cards-size-adjust) +
|
|
var(--app-cards-size-adjust)
|
|
),
|
|
1.3
|
|
)
|
|
);
|
|
}
|
|
.smallSideFooterCard-horiz {
|
|
width: calc(
|
|
92vw /
|
|
max(
|
|
(var(--small-sidefooter-cards) + var(--user-cards-size-adjust)),
|
|
1.3
|
|
)
|
|
);
|
|
}
|
|
.fourThreeCard {
|
|
width: calc(
|
|
100% /
|
|
max(
|
|
(
|
|
var(--four-three-cards) + var(--user-cards-size-adjust) +
|
|
var(--app-cards-size-adjust)
|
|
),
|
|
2
|
|
)
|
|
);
|
|
}
|
|
.fourThreeCard-horiz {
|
|
width: calc(
|
|
92vw / max((var(--four-three-cards) + var(--user-cards-size-adjust)), 2)
|
|
);
|
|
}
|
|
.backdropCard {
|
|
width: calc(
|
|
100% /
|
|
max(
|
|
(
|
|
var(--backdrop-cards) + var(--user-cards-size-adjust) +
|
|
var(--app-cards-size-adjust)
|
|
),
|
|
1
|
|
)
|
|
);
|
|
}
|
|
.backdropCard-horiz {
|
|
width: calc(
|
|
92vw / max((var(--backdrop-cards) + var(--user-cards-size-adjust)), 1)
|
|
);
|
|
}
|
|
}
|
|
@media all and (orientation: landscape) {
|
|
:root {
|
|
--backdrop-cards: 2;
|
|
}
|
|
}
|
|
@media all and (orientation: portrait) and (min-width: 24em) {
|
|
:root {
|
|
--backdrop-cards: 2;
|
|
}
|
|
}
|
|
@media all and (orientation: portrait) and (min-width: 31.25em) {
|
|
:root {
|
|
--square-cards: 3;
|
|
}
|
|
}
|
|
@media all and (min-width: 31.25em) {
|
|
:root {
|
|
--four-three-cards: 3;
|
|
}
|
|
}
|
|
@media all and (min-width: 36em) {
|
|
:root {
|
|
--square-cards: 3;
|
|
--portrait-cards: 4;
|
|
}
|
|
}
|
|
@media all and (min-width: 40em) {
|
|
:root {
|
|
--square-cards: 4;
|
|
--small-sidefooter-cards: 2;
|
|
}
|
|
}
|
|
@media all and (orientation: landscape) and (min-width: 40em) {
|
|
:root {
|
|
--portrait-cards: 5;
|
|
}
|
|
}
|
|
@media all and (orientation: landscape) and (min-width: 50em) {
|
|
:root {
|
|
--square-cards: 5;
|
|
}
|
|
}
|
|
@media all and (min-width: 45em) {
|
|
:root {
|
|
--four-three-cards: 4;
|
|
--sidefooter-cards: 2;
|
|
}
|
|
}
|
|
@media all and (min-width: 50em) {
|
|
:root {
|
|
--small-sidefooter-cards: 3;
|
|
}
|
|
}
|
|
@media (min-width: 50em) {
|
|
:root {
|
|
--backdrop-cards: 3;
|
|
}
|
|
}
|
|
@media all and (min-width: 55em) {
|
|
:root {
|
|
--banner-cards: 2;
|
|
--square-cards: 5;
|
|
--portrait-cards: 5;
|
|
}
|
|
}
|
|
@media (min-width: 62.5em) {
|
|
:root {
|
|
--backdrop-cards: 4;
|
|
}
|
|
}
|
|
@media all and (min-width: 66em) {
|
|
:root {
|
|
--small-sidefooter-cards: 4;
|
|
}
|
|
}
|
|
@media all and (min-width: 70em) {
|
|
:root {
|
|
--four-three-cards: 5;
|
|
--square-cards: 6;
|
|
--portrait-cards: 6;
|
|
}
|
|
}
|
|
@media all and (min-width: 76em) {
|
|
:root {
|
|
--sidefooter-cards: 3;
|
|
}
|
|
}
|
|
@media all and (min-width: 82.5em) {
|
|
:root {
|
|
--backdrop-cards: 5;
|
|
}
|
|
}
|
|
@media all and (min-width: 85em) {
|
|
:root {
|
|
--square-cards: 7;
|
|
--portrait-cards: 7;
|
|
}
|
|
}
|
|
@media all and (min-width: 100em) {
|
|
:root {
|
|
--banner-cards: 3;
|
|
--small-sidefooter-cards: 5;
|
|
--four-three-cards: 6;
|
|
--square-cards: 8;
|
|
--portrait-cards: 8;
|
|
}
|
|
}
|
|
@media all and (min-width: 115em) {
|
|
:root {
|
|
--small-sidefooter-cards: 6;
|
|
--portrait-cards: 9;
|
|
--square-cards: 9;
|
|
}
|
|
}
|
|
@media all and (min-width: 120em) {
|
|
:root {
|
|
--small-sidefooter-cards: 6;
|
|
}
|
|
}
|
|
@media all and (min-width: 130em) {
|
|
:root {
|
|
--square-cards: 10;
|
|
--portrait-cards: 10;
|
|
}
|
|
}
|
|
@media all and (min-width: 131.25em) {
|
|
:root {
|
|
--backdrop-cards: 6;
|
|
--four-three-cards: 7;
|
|
--sidefooter-cards: 4;
|
|
}
|
|
}
|
|
@media all and (min-width: 145em) {
|
|
:root {
|
|
--square-cards: 11;
|
|
--portrait-cards: 11;
|
|
}
|
|
}
|
|
@media all and (min-width: 150em) {
|
|
:root {
|
|
--banner-cards: 4;
|
|
}
|
|
}
|
|
@media all and (min-width: 160em) {
|
|
:root {
|
|
--backdrop-cards: 7;
|
|
--small-sidefooter-cards: 7;
|
|
--four-three-cards: 8;
|
|
--square-cards: 12;
|
|
--portrait-cards: 12;
|
|
}
|
|
}
|
|
@media all and (min-width: 175em) {
|
|
:root {
|
|
--square-cards: 13;
|
|
--portrait-cards: 13;
|
|
}
|
|
}
|
|
@media all and (min-width: 180em) {
|
|
:root {
|
|
--small-sidefooter-cards: 8;
|
|
--four-three-cards: 9;
|
|
}
|
|
}
|
|
@media all and (min-width: 190em) {
|
|
:root {
|
|
--square-cards: 14;
|
|
--portrait-cards: 14;
|
|
}
|
|
}
|
|
@media all and (min-width: 200em) {
|
|
:root {
|
|
--banner-cards: 5;
|
|
--sidefooter-cards: 5;
|
|
--backdrop-cards: 8;
|
|
--small-sidefooter-cards: 9;
|
|
--four-three-cards: 10;
|
|
}
|
|
}
|
|
@media all and (min-width: 205em) {
|
|
:root {
|
|
--square-cards: 15;
|
|
--portrait-cards: 15;
|
|
}
|
|
}
|
|
@media all and (min-width: 220em) {
|
|
:root {
|
|
--sidefooter-cards: 6;
|
|
--backdrop-cards: 9;
|
|
--small-sidefooter-cards: 10;
|
|
--four-three-cards: 11;
|
|
--square-cards: 16;
|
|
--portrait-cards: 16;
|
|
}
|
|
}
|
|
@media all and (min-width: 240em) {
|
|
:root {
|
|
--banner-cards: 6;
|
|
--sidefooter-cards: 7;
|
|
--small-sidefooter-cards: 11;
|
|
--four-three-cards: 12;
|
|
--square-cards: 17;
|
|
--portrait-cards: 17;
|
|
}
|
|
}
|
|
@media all and (orientation: portrait) and (max-width: 35em) {
|
|
.scrollX {
|
|
--backdrop-cards: 1.2;
|
|
}
|
|
}
|
|
.layout-tv:root {
|
|
--square-cards: 5;
|
|
--banner-cards: 3;
|
|
--sidefooter-cards: 3;
|
|
--small-sidefooter-cards: 4;
|
|
--portrait-cards: 6;
|
|
--backdrop-cards: 4;
|
|
--four-three-cards: 5;
|
|
}
|
|
.cardOverlayContainer {
|
|
background: rgba(51, 51, 51, 0.5);
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease-out;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
display: none;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
border-radius: 0.3em;
|
|
z-index: 2;
|
|
contain: layout style;
|
|
}
|
|
.cardContent-button + .cardOverlayContainer {
|
|
cursor: pointer;
|
|
}
|
|
.chkCardSelectContainer {
|
|
font-size: 76%;
|
|
width: auto !important;
|
|
margin: 0 !important;
|
|
display: -webkit-inline-flex !important;
|
|
display: inline-flex !important;
|
|
-webkit-padding-start: 0.7em !important;
|
|
padding-inline-start: 0.7em !important;
|
|
-webkit-align-items: flex-start !important;
|
|
align-items: flex-start !important;
|
|
padding-top: 0.8em !important;
|
|
position: absolute !important;
|
|
top: 0;
|
|
left: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: initial;
|
|
padding: 0.8em 0.7em !important;
|
|
}
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.cardOverlayContainer {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
.card-hoverable:hover .cardOverlayContainer {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.detailImageContainerCard:hover {
|
|
transform: none;
|
|
}
|
|
.chkCardSelect {
|
|
top: 0;
|
|
left: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: initial;
|
|
}
|
|
.chkCardSelect + .checkboxLabel,
|
|
.chkCardSelect + .checkboxLabel::before {
|
|
border-radius: 100em !important;
|
|
}
|
|
.chkCardSelect-checkboxLabel::after {
|
|
border-width: 0.2em !important;
|
|
}
|
|
.cardOverlayButton-hover {
|
|
background: 0 0;
|
|
color: #fff;
|
|
}
|
|
.cardOverlayButtonIcon-hover {
|
|
background: 0 0 !important;
|
|
line-height: initial !important;
|
|
padding: 0.4em !important;
|
|
}
|
|
.cardOverlayFab-primary {
|
|
font-size: 180% !important;
|
|
padding: 0 !important;
|
|
transition:
|
|
-webkit-transform 240ms ease-out,
|
|
opacity 180ms ease-out;
|
|
transition:
|
|
transform 240ms ease-out,
|
|
opacity 180ms ease-out;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
inset-inline-start: 50%;
|
|
inset-inline-end: initial;
|
|
margin-top: -0.83em !important;
|
|
margin-bottom: 0 !important;
|
|
-webkit-margin-start: -0.83em !important;
|
|
margin-inline-start: -0.83em !important;
|
|
-webkit-margin-end: 0 !important;
|
|
margin-inline-end: 0 !important;
|
|
width: 1.66em;
|
|
height: 1.66em;
|
|
display: none;
|
|
}
|
|
.cardOverlayFab-primary:hover {
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
[dir="rtl"] .cardOverlayFab-primary:hover {
|
|
-webkit-transform: scaleX(-1) scale(1.1);
|
|
transform: scaleX(-1) scale(1.1);
|
|
}
|
|
.multi-select-active .cardIndicator {
|
|
display: none;
|
|
}
|
|
.multi-select-active .cardOverlayContainer {
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.multi-select-active .cardImageContainer {
|
|
transition: -webkit-transform 0.135s cubic-bezier(0, 0, 0.2, 1);
|
|
transition: transform 0.135s cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
.multi-select-active .cardOverlayButton:not(.chkCardSelectContainer) {
|
|
opacity: 0 !important;
|
|
display: none !important;
|
|
}
|
|
.multi-select-active .chkCardSelectContainer {
|
|
opacity: 1 !important;
|
|
}
|
|
.item-multiselected .cardImageContainer {
|
|
-webkit-transform: translateZ(0) scale3d(0.79, 0.84, 1);
|
|
transform: translateZ(0) scale3d(0.79, 0.84, 1);
|
|
}
|
|
.item-multiselected .cardOverlayContainer {
|
|
background: 0 0 !important;
|
|
}
|
|
.cardMissingIndicator {
|
|
position: absolute;
|
|
top: 0.35em;
|
|
left: 0.225em;
|
|
inset-inline-start: 0.225em;
|
|
inset-inline-end: initial;
|
|
margin: 0 !important;
|
|
contain: layout style;
|
|
}
|
|
.cardSyncIndicator {
|
|
position: absolute;
|
|
bottom: 0.35em;
|
|
right: 0.18em;
|
|
inset-inline-start: initial;
|
|
inset-inline-end: 0.18em;
|
|
contain: layout style;
|
|
}
|
|
.cardPlayedIndicator,
|
|
.cardTimerIndicator {
|
|
border-radius: 100em;
|
|
font-size: 1.28em;
|
|
height: 1.25em;
|
|
width: 1.25em;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
top: 0.18em;
|
|
position: absolute;
|
|
right: 0.18em;
|
|
inset-inline-start: initial;
|
|
inset-inline-end: 0.18em;
|
|
contain: layout style;
|
|
}
|
|
.cardPlayedIndicator + .cardTimerIndicator {
|
|
right: 1.5em;
|
|
inset-inline-start: initial;
|
|
inset-inline-end: 1.5em;
|
|
}
|
|
.cardCountIndicator {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
top: 0.225em;
|
|
position: absolute;
|
|
right: 0.225em;
|
|
inset-inline-start: initial;
|
|
inset-inline-end: 0.225em;
|
|
contain: layout style;
|
|
}
|
|
.cardProgramIndicator {
|
|
contain: layout style;
|
|
display: -webkit-inline-flex;
|
|
display: inline-flex;
|
|
margin-top: 0;
|
|
margin-bottom: 0.2em;
|
|
-webkit-margin-start: 0.35em;
|
|
margin-inline-start: 0.35em;
|
|
-webkit-margin-end: 0;
|
|
margin-inline-end: 0;
|
|
padding: 0.08em 0.5em;
|
|
border-radius: 0.42em;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
text-transform: uppercase;
|
|
font-size: 84%;
|
|
font-weight: 600;
|
|
}
|
|
.drag-reorder-y-active .skinHeader {
|
|
z-index: 0 !important;
|
|
}
|
|
.drag-reorder-y-active .appfooter {
|
|
display: none !important;
|
|
}
|
|
.dragging .cardOverlayContainer,
|
|
.dragging .cardIndicator:not(.cardIndicatorIcon-dragHandle) {
|
|
display: none !important;
|
|
}
|
|
.cardIndicatorIcon {
|
|
font-size: 1.6em;
|
|
top: 0.225em;
|
|
left: 0.225em;
|
|
inset-inline-start: 0.225em;
|
|
inset-inline-end: initial;
|
|
position: absolute;
|
|
color: #fff;
|
|
}
|
|
.cardIndicatorIcon-dragHandle {
|
|
right: 0.225em;
|
|
inset-inline-start: initial;
|
|
inset-inline-end: 0.225em;
|
|
text-shadow: 0.14em 0.14em 0.28em rgba(0, 0, 0, 0.45);
|
|
cursor: pointer;
|
|
}
|
|
.cardMediaInfoItems {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
-webkit-column-gap: initial !important;
|
|
column-gap: initial !important;
|
|
-webkit-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.cardMediaInfoItem {
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
}
|
|
.cardMediaInfoItem + .cardMediaInfoItem {
|
|
-webkit-margin-start: 0.5em !important;
|
|
margin-inline-start: 0.5em !important;
|
|
}
|
|
.cardMediaInfoItem .starIcon {
|
|
line-height: 0.96;
|
|
}
|
|
.card.dragging-over {
|
|
position: relative;
|
|
contain: none !important;
|
|
z-index: 1;
|
|
}
|
|
.dragging-over-left::before {
|
|
content: " ";
|
|
width: 0.24em;
|
|
position: absolute;
|
|
top: 0.8em;
|
|
bottom: 0.8em;
|
|
left: -0.14em;
|
|
inset-inline-start: -0.14em;
|
|
inset-inline-end: initial;
|
|
z-index: 99999;
|
|
border-radius: 100em;
|
|
}
|
|
.dragging-over-right::after {
|
|
content: " ";
|
|
width: 0.24em;
|
|
position: absolute;
|
|
right: -0.14em;
|
|
top: 0.8em;
|
|
bottom: 0.8em;
|
|
inset-inline-start: initial;
|
|
inset-inline-end: -0.14em;
|
|
z-index: 99999;
|
|
border-radius: 100em;
|
|
}
|
|
.cardProgressBarContainer {
|
|
background: 0 0 !important;
|
|
}
|
|
.visualCardBox-vibrant-lg::before {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
z-index: -1;
|
|
}
|
|
.autoWidthCard {
|
|
width: auto;
|
|
}
|
|
.card:focus .cardContent-bxsborder {
|
|
contain: initial;
|
|
content-visibility: initial;
|
|
overflow: visible;
|
|
}
|
|
.card:focus-visible .cardContent-bxsborder-fv {
|
|
contain: initial;
|
|
content-visibility: initial;
|
|
overflow: visible;
|
|
}
|
|
.sideFooterCard:focus .cardBox-sideFooter-f {
|
|
overflow: visible;
|
|
}
|
|
.sideFooterCard:focus .cardBox-sideFooter-f .cardContent {
|
|
border-start-start-radius: inherit;
|
|
border-end-start-radius: inherit;
|
|
}
|
|
.card:focus .cardContent-bxsborder::before,
|
|
.sideFooterCard:focus .cardBox-sideFooter-f::before {
|
|
content: " ";
|
|
position: absolute;
|
|
top: -0.34em;
|
|
left: -0.34em;
|
|
right: -0.34em;
|
|
bottom: -0.34em;
|
|
border-width: 0.22em;
|
|
border-style: solid;
|
|
border-radius: 0.6em;
|
|
}
|
|
.sideFooterCard:focus .cardBox-sideFooter-f::before {
|
|
border-radius: 0.72em;
|
|
}
|
|
.card:focus-visible .cardContent-bxsborder-fv::before {
|
|
content: " ";
|
|
position: absolute;
|
|
top: -0.34em;
|
|
left: -0.34em;
|
|
right: -0.34em;
|
|
bottom: -0.34em;
|
|
border-width: 0.22em;
|
|
border-style: solid;
|
|
border-radius: 0.6em;
|
|
}
|
|
.card:focus .cardContent-bxsborder.cardContent-round::before {
|
|
border-radius: 100em;
|
|
}
|
|
.card:focus .cardContent-bxsborder .cardImage {
|
|
border-radius: inherit;
|
|
}
|
|
.card:focus-visible .cardContent-bxsborder-fv.cardContent-round::before {
|
|
border-radius: 100em;
|
|
}
|
|
.card:focus-visible .cardContent-bxsborder-fv .cardImage {
|
|
border-radius: inherit;
|
|
}
|
|
.buttonCardBox {
|
|
border-radius: 0.6em;
|
|
margin: 0.4em;
|
|
}
|
|
.buttonCardBox::before,
|
|
.cardBox-sideFooter::before {
|
|
display: none !important;
|
|
}
|