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

.card,.card:focus{font-weight:inherit!important}.card,.cardBox,.cardContent,.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;-webkit-tap-highlight-color:transparent;cursor:pointer;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-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:.7103em;-webkit-transition:none;-o-transition:none;transition:none;border:0 solid transparent;-webkit-tap-highlight-color:transparent}.cardBox:not(.visualCardBox){background-color:transparent}@media all and (max-width:1280px),(max-height:720px){.layout-mobile .cardBox{margin:.28em}}.card-focuscontent{border:.12em solid transparent;-webkit-border-radius:.2em;border-radius:.2em}.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)}.cardBox-bottompadded{margin-bottom:1em!important}.card:focus{position:relative!important;z-index:10!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:1.6em;height:1.6em;-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}.forceRelative{position:relative}.cardContent,.cardImage{position:absolute;top:0;right:0;left:0;bottom:0}.cardContent{overflow:hidden;display:block;margin:0!important;height:100%;-webkit-border-radius:.2em;border-radius:.2em;-webkit-tap-highlight-color:transparent}.visualCardBox .cardContent{-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;border-bottom-right-radius:0}.cardContent-shadow{-webkit-box-shadow:0 .0725em .29em 0 rgba(0,0,0,.37);box-shadow:0 .0725em .29em 0 rgba(0,0,0,.37)}.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 .0725em .29em 0 rgba(0,0,0,.37);box-shadow:0 .0725em .29em 0 rgba(0,0,0,.37);-webkit-border-radius:.145em;border-radius:.145em}.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}.cardDefaultText,.cardTextCentered{text-align:center}.layout-tv .cardText{padding:0 .5em;font-size:92%}.innerCardFooter>.cardText{padding:.3em .5em}.card:focus .cardText{color:inherit}.cardText-rightmargin{margin-right:2em}.cardDefaultText{white-space:normal}.textActionButton{background:0 0;border:0!important;padding:0!important;cursor:pointer;-webkit-tap-highlight-color:transparent;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:1.25%;top:1.25%;position:absolute;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.portraitCardIndicators{right:1.5%;top:1%}.backdropCardIndicators{right:.75%;top:1.4%}.cardProgramAttributeIndicators{top:0;left:0;position:absolute;display:-webkit-box;display:-webkit-flex;display:flex;text-transform:uppercase;font-size:92%}.programAttributeIndicator{padding:.18em .5em;color:#fff;font-weight:500}.cardOverlayButton{color:rgba(255,255,255,.76)!important;-webkit-border-radius:100em;border-radius:100em;position:absolute;bottom:0;right:0;margin:0 .35em .65em 0;z-index:1;padding:.5em;background-color:rgba(0,0,0,.7)!important;font-size:80%}.cardOverlayButton-centered{bottom:initial;right:initial;position:static;position:absolute;display:-webkit-box;display:-webkit-flex;display:flex;font-size:112%;margin:-1.3em 0 0 -1.3em;width:2.6em;height:2.6em;top:50%;left:50%;background-color:rgba(0,0,0,.5)!important;border:2.4px solid rgba(255,255,255,.6);padding:.38em!important;color:rgba(255,255,255,.76);-webkit-transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out}.cardOverlayButton-centered:hover{-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}.cardOverlayButton-texticon{line-height:1;background-color:rgba(0,0,0,.4)!important}.cardOverlayButton-texticon-icon{font-style:normal}.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%}@media all and (min-width:400px){.backdropCard-scalable{width:50%}}@media all and (min-width:500px){.portraitCard-scalable,.smallBackdropCard-scalable,.squareCard-scalable{width:33.333333333333333333333333333333%}}@media all and (min-width:700px){.portraitCard-scalable,.squareCard-scalable{width:25%}}@media all and (min-width:770px){.backdropCard-scalable{width:33.333333333333333333333333333333%}}@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%}}@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%}}@media all and (min-width:1400px){.portraitCard-scalable,.smallBackdropCard-scalable,.squareCard-scalable{width:14.285714285714285714285714285714%}}@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:1920px){.squareCard-scalable{width:11.111111111111111111111111111111%}}@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%}@media all and (orientation:portrait){.overflowPortraitCard{width:42vw}.overflowBackdropCard{width:72vw}.overflowSquareCard{width:42vw}}@media all and (orientation:landscape){.overflowBackdropCard{width:23.3vw}.overflowPortraitCard,.overflowSquareCard{width:15.5vw}}@media all and (orientation:landscape) and (min-width:1700px){.overflowBackdropCard{width:18.5vw}.overflowPortraitCard,.overflowSquareCard{width:11.6vw}}@media all and (orientation:portrait) and (min-width:400px){.overflowPortraitCard{width:31.5vw}}@media all and (orientation:portrait) and (min-width:540px){.overflowBackdropCard{width:64vw}.overflowSquareCard{width:31.5vw}}@media all and (orientation:portrait) and (min-width:640px){.overflowBackdropCard{width:56vw}}@media all and (orientation:portrait) and (min-width:760px){.overflowPortraitCard{width:23vw}.overflowBackdropCard{width:40vw}.overflowSquareCard{width:23vw}}@media all and (orientation:portrait) and (min-width:1200px){.overflowPortraitCard,.overflowSquareCard{width:18vw}}@media all and (orientation:portrait) and (min-width:1400px){.overflowPortraitCard,.overflowSquareCard{width:15vw}.overflowBackdropCard{width:30vw}}@media all and (orientation:portrait) and (min-width:1800px){.overflowBackdropCard{width:23.5vw}}.itemsContainer-tv>.overflowBackdropCard{width:23.3vw}.overflowBackdropCard-textCard{width:15.5vw!important}.overflowBackdropCard-textCardPadder{padding-bottom:87.75%}.itemsContainer-tv>.overflowPortraitCard,.itemsContainer-tv>.overflowSquareCard{width:15.5vw}