jellyfin-web/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css

.card,.cardImageContainer-button,.textActionButton{cursor:pointer;outline:0!important}.card,.card:focus{font-weight:inherit!important}.card,.cardBox,.textActionButton{outline:0!important}button::-moz-focus-inner{padding:0;border:0}button{-webkit-border-fit:border!important}.card{border:0;font-size:inherit!important;font-family:inherit!important;text-transform:none;background:0 0!important;margin:0;padding:0;display:block;color:inherit!important;contain:style;-webkit-flex-shrink:0;flex-shrink:0}.itemsContainer,.vertical-list{display:-webkit-box;display:-webkit-flex}.itemsContainer{display:flex}.vertical-list{display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;flex-wrap:nowrap}.mediaSourceIndicator,.vertical-wrap{display:-webkit-box;display:-webkit-flex}.vertical-wrap{display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap}.vertical-wrap.centered{-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.vertical-wrap>.card{contain:layout style}.cardScalable{position:relative}.cardPadder-backdrop,.cardPadder-overflowBackdrop,.cardPadder-overflowSmallBackdrop,.cardPadder-smallBackdrop{padding-bottom:56.25%}.cardPadder-overflowSquare,.cardPadder-square{padding-bottom:100%}.cardPadder-overflowPortrait,.cardPadder-portrait,.overflowPortraitCard-textCardPadder{padding-bottom:150%}.cardPadder-banner{padding-bottom:18.5%}.cardBox{padding:0!important;margin:.427em;-webkit-transition:none;-o-transition:none;transition:none;border:0 solid transparent;background-color:transparent}.layout-tv .cardBox{margin:.5em}.layout-mobile .cardBox{margin:.3em}.card-focuscontent{border:.12em solid transparent}.cardBox-focustransform{will-change:transform;-webkit-transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out}.card:focus>.cardBox-focustransform{-webkit-transform:scale(1.16,1.16);transform:scale(1.16,1.16)}.card:focus{position:relative!important;z-index:10!important}.cardBox-bottompadded{margin-bottom:1.2em!important}.btnCardOptions{position:absolute;bottom:.25em;right:0;margin:0!important;z-index:1}.mediaSourceIndicator{display:flex;position:absolute;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;top:.3em;left:.3em;text-align:center;vertical-align:middle;width:24px;height:24px;-webkit-border-radius:50%;border-radius:50%;color:#fff;background:#38c}.cardText,.innerCardFooter{overflow:hidden;text-align:left}.cardImageContainer{-webkit-background-size:contain;background-size:contain;background-repeat:no-repeat;background-position:center center;display:-webkit-flex;display:-webkit-box;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;-webkit-background-clip:content-box!important;background-clip:content-box!important;color:inherit;height:100%}.chapterCardImageContainer{background-color:#000;-webkit-border-radius:0;border-radius:0}.textCardImageContainer{background-color:#444}.cardImageContainer-button{border:0;padding:0;background-color:transparent;-webkit-box-sizing:content-box;box-sizing:content-box}.forceRelative{position:relative}.cardContent,.cardImage{position:absolute;top:0;left:0;right:0;bottom:0}.cardContent{overflow:hidden;display:block;height:100%}.cardContent-shadow{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)}.cardImage{-webkit-background-size:contain;background-size:contain;background-repeat:no-repeat;background-position:center bottom}.cardImage-img{max-height:100%;max-width:100%;min-height:70%;min-width:70%;margin:auto}.coveredImage-img{width:100%;height:100%}.coveredImage-noscale-img{max-height:none;max-width:none}.coveredImage{-webkit-background-size:100% 100%;background-size:100% 100%;background-position:center center}.coveredImage-noScale{-webkit-background-size:cover;background-size:cover}.cardFooter{padding:.5em .3em;position:relative}.cardFooter-transparent{padding-top:.16em}.layout-tv .cardFooter-transparent{padding-top:0}.visualCardBox{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);background-color:#222326;-webkit-border-radius:2px;border-radius:2px}.innerCardFooter{background:rgba(0,0,0,.7);position:absolute;bottom:0;left:0;z-index:1;max-width:100%;color:#fff}.innerCardFooterClear{background-color:transparent}.fullInnerCardFooter{right:0}.cardText{padding:.1em .5em;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;color:inherit}.cardDefaultText,.cardTextCentered{text-align:center}.layout-tv .cardText{padding:0 .5em;font-size:92%}.innerCardFooter>.cardText{padding:.3em .5em}.cardFooter-transparent>.cardText{color:#ccc}.cardText-secondary{color:#888!important}.visualCardBox .cardText-secondary{color:inherit!important;opacity:.5}.card:focus .cardText{color:#fff!important}.cardText-rightmargin{margin-right:2em}.cardDefaultText{white-space:normal}.textActionButton{background:0 0;border:0!important;padding:0!important;color:inherit;vertical-align:middle;font-family:inherit;font-size:inherit}.textActionButton:hover{text-decoration:underline}.cardFooterLogo{margin-right:1em}.cardImageIcon{width:auto;height:auto;font-size:5em;color:inherit}.cardIndicators{right:2.5%;top:2.5%;position:absolute;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.portraitCardIndicators{right:3%;top:2%}.backdropCardIndicators{right:1.5%;top:2.8%}.cardOverlayButton{color:#fff!important;background-color:rgba(0,0,0,.8)!important;-webkit-border-radius:500px;border-radius:500px;position:absolute;bottom:0;right:0;margin:0 .35em .5em 0;z-index:1;padding:6px}.cardOverlayButton:hover{background-color:rgba(0,0,0,.9)!important;-webkit-transition:background-color .5s ease-out;-o-transition:background-color .5s ease-out;transition:background-color .5s ease-out}.defaultCardColor1{background-color:#009688}.defaultCardColor2{background-color:#D32F2F}.defaultCardColor3{background-color:#0288D1}.defaultCardColor4{background-color:#388E3C}.defaultCardColor5{background-color:#F57F17}.backdropCard-scalable,.bannerCard-scalable{width:100%}.smallBackdropCard-scalable,.squareCard-scalable{width:50%}.portraitCard-scalable{width:33.333333333333333333333333333333%}.overflowPortraitCard-scalable{width:42vw}.overflowBackdropCard-scalable{width:72vw}.overflowSmallBackdropCard-scalable{width:60%}.overflowSquareCard-scalable{width:42vw}@media all and (min-width:400px){.backdropCard-scalable{width:50%}}@media all and (min-width:500px){.smallBackdropCard-scalable,.squareCard-scalable{width:33.333333333333333333333333333333%}}@media all and (min-width:540px){.overflowPortraitCard-scalable{width:30vw}.overflowBackdropCard-scalable{width:64vw}.overflowSquareCard-scalable{width:30vw}.overflowSmallBackdropCard-scalable{width:40%}}@media all and (min-width:640px){.portraitCard-scalable{width:25%}.overflowBackdropCard-scalable{width:56vw}.overflowSmallBackdropCard-scalable{width:40%}}@media all and (min-width:700px){.squareCard-scalable{width:25%}}@media all and (min-width:770px){.backdropCard-scalable{width:33.333333333333333333333333333333%}.overflowSmallBackdropCard-scalable{width:30%}}@media all and (min-width:800px){.bannerCard-scalable{width:50%}.portraitCard-scalable{width:20%}.smallBackdropCard-scalable{width:25%}}@media all and (min-width:900px){.squareCard-scalable{width:20%}}@media all and (min-width:1000px){.smallBackdropCard-scalable{width:20%}.overflowPortraitCard-scalable{width:22vw}.overflowBackdropCard-scalable{width:40vw}.overflowSmallBackdropCard-scalable{width:24%}.overflowSquareCard-scalable{width:22vw}}@media all and (min-width:1200px){.backdropCard-scalable{width:25%}.squareCard-scalable{width:16.666666666666666666666666666667%}.bannerCard-scalable{width:33.333333333333333333333333333333%}.portraitCard-scalable,.smallBackdropCard-scalable{width:16.666666666666666666666666666667%}.overflowSmallBackdropCard-scalable{width:18%}.overflowPortraitCard-scalable,.overflowSquareCard-scalable{width:18vw}}@media all and (min-width:1400px){.portraitCard-scalable,.smallBackdropCard-scalable,.squareCard-scalable{width:14.285714285714285714285714285714%}.overflowPortraitCard-scalable,.overflowSquareCard-scalable{width:15vw}.overflowBackdropCard-scalable{width:30vw}}@media all and (min-width:1600px){.portraitCard-scalable,.smallBackdropCard-scalable{width:12.5%}.backdropCard-scalable{width:20%}.squareCard-scalable{width:12.5%}}@media all and (min-width:1800px){.overflowBackdropCard-scalable{width:23.5vw}}@media all and (min-width:1920px){.squareCard-scalable{width:11.111111111111111111111111111111%}.smallBackdropCard-scalable{width:10%}}@media all and (min-width:2100px){.backdropCard-scalable{width:20%}.portraitCard-scalable{width:11.111111111111111111111111111111%}}@media all and (min-width:2200px){.bannerCard-scalable{width:25%}.portraitCard-scalable{width:10%}}@media all and (min-width:2500px){.backdropCard-scalable{width:16.666666666666666666666666666667%}}.itemsContainer-tv>.backdropCard-scalable{width:25%}.itemsContainer-tv>.portraitCard-scalable,.itemsContainer-tv>.squareCard-scalable{width:16.666666666666666666666666666667%}.itemsContainer-tv>.overflowSmallBackdropCard-scalable{width:18vw}.itemsContainer-tv>.overflowBackdropCard-scalable{width:23.3vw}.overflowBackdropCard-textCard{width:15.5vw!important}.overflowBackdropCard-textCardPadder{padding-bottom:87.75%}.itemsContainer-tv>.overflowPortraitCard-scalable,.itemsContainer-tv>.overflowSquareCard-scalable{width:15.5vw}