@opentiny/vue-theme/card/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-card{--tv-Card-bg-color:var(--tv-color-bg-gray-1, #fafafa);--tv-Card-large-width:calc(var(--tv-size-base, 4px) * 144);--tv-Card-medium-width:calc(var(--tv-size-base, 4px) * 96);--tv-Card-small-width:calc(var(--tv-size-base, 4px) * 72);--tv-Card-mini-width:calc(var(--tv-size-base, 4px) * 54);--tv-Card-large-border-radius:var(--tv-border-radius-lg, 8px);--tv-Card-medium-border-radius:var(--tv-border-radius-sm, 4px);--tv-Card-small-border-radius:var(--tv-border-radius-sm, 4px);--tv-Card-mini-border-radius:var(--tv-border-radius-xs, 2px);--tv-Card-success-border-color:var(--tv-color-act-success-border, #5cb300);--tv-Card-warning-border-color:var(--tv-color-act-warning-border, #ff8800);--tv-Card-alerting-border-color:#fac20a;--tv-Card-danger-border-color:var(--tv-color-act-danger-border, #f23030);--tv-Card-default-border-color:var(--tv-color-border-container, #f0f0f0);--tv-Card-checked-border-color:var(--tv-color-border-active-control, #1476ff);--tv-Card-disabled-bg-color:var(--tv-color-bg-disabled, #f0f0f0);--tv-Card-large-body-padding:32px;--tv-Card-medium-body-padding:24px;--tv-Card-small-body-padding:var(--tv-space-xl, 16px);--tv-Card-mini-body-padding:var(--tv-space-lg, 12px);--tv-Card-title-font-size:var(--tv-font-size-lg, 16px);--tv-Card-title-text-color:var(--tv-color-text, #191919);--tv-Card-title-font-weight:var(--tv-font-weight-bold, 600);--tv-Card-main-font-size:var(--tv-font-size-default, 14px);--tv-Card-main-text-color:var(--tv-color-text-weaken, #808080);--tv-Card-option-text-color:var(--tv-color-bg-primary, #191919);--tv-Card-option-font-size:var(--tv-font-size-lg, 16px);--tv-Card-option-top-border-color:var(--tv-color-bg-header, #f5f5f5);--tv-Card-option-disabled-text-color:var(--tv-color-text-disabled, #c2c2c2);--tv-Card-footer-more-text-color:var(--tv-color-act-primary-text, #191919);--tv-Card-title-mg-bottom:var(--tv-space-xl, 16px);background-color:var(--tv-Card-bg-color);border:1px solid;line-height:1.5;overflow:hidden;min-width:auto;border-radius:8px}.tiny-card:hover{-webkit-box-shadow:none;box-shadow:none}.tiny-card.tiny-card--large-width{width:var(--tv-Card-large-width)}.tiny-card.tiny-card--medium-width{width:var(--tv-Card-medium-width)}.tiny-card.tiny-card--small-width{width:var(--tv-Card-small-width)}.tiny-card.tiny-card--mini-width{width:var(--tv-Card-mini-width)}.tiny-card.tiny-card--success{border-color:var(--tv-Card-success-border-color)}.tiny-card.tiny-card--warning{border-color:var(--tv-Card-warning-border-color)}.tiny-card.tiny-card--alerting{border-color:var(--tv-Card-alerting-border-color)}.tiny-card.tiny-card--danger{border-color:var(--tv-Card-danger-border-color)}.tiny-card.tiny-card--default{border-color:var(--tv-Card-default-border-color)}.tiny-card.tiny-card--item-checked{border-color:var(--tv-Card-checked-border-color)}.tiny-card.tiny-card--item-checkbox-checked{position:relative;border-radius:8px}.tiny-card.tiny-card--item-checkbox-checked::after{content:'';position:absolute;width:0;height:0;right:0;top:0;border-bottom:40px solid transparent;border-right:40px solid #1476ff;border-top-right-radius:6px;display:-webkit-box;display:-ms-flexbox;display:flex}.tiny-card.tiny-card--item-checkbox-checked::before{display:-webkit-box;display:-ms-flexbox;display:flex;right:5px;top:1px;-webkit-box-sizing:content-box;box-sizing:content-box;content:'';border:.5px solid #fff;border-width:0 3px 3px 0;border-left:0;border-top:0;height:16px;width:10px;position:absolute;margin-left:4.5px;margin-top:1px;transition:transform .15s ease-in 50ms,-webkit-transform .15s ease-in 50ms;-webkit-transform-origin:center;transform-origin:center;z-index:3;-webkit-transform:rotate(45deg) scale(.7);transform:rotate(45deg) scale(.7)}.tiny-card.tiny-card--disabled{background-color:var(--tv-Card-disabled-bg-color)}.tiny-card .tiny-card__body .tiny-card--checkbox{position:relative;left:4px;padding-left:8px}.tiny-card .tiny-card__body .tiny-card--radio{position:relative;left:12px;padding-top:12px}.tiny-card .tiny-card__body .tiny-card--image img{width:100%;aspect-ratio:16/9;background-size:cover;border-top-left-radius:8px;border-top-right-radius:8px}.tiny-card .tiny-card__body .tiny-card--video video{width:100%;aspect-ratio:16/9}.tiny-card .tiny-card__body .tiny-card--logo{-webkit-box-flex:1;-ms-flex:1 1 0%;flex:1 1 0%}.tiny-card .tiny-card__body .tiny-card--logo.tiny-card--large-padding{padding:var(--tv-Card-large-body-padding)}.tiny-card .tiny-card__body .tiny-card--logo.tiny-card--medium-padding{padding:var(--tv-Card-medium-body-padding)}.tiny-card .tiny-card__body .tiny-card--logo.tiny-card--small-padding{padding:var(--tv-Card-small-body-padding)}.tiny-card .tiny-card__body .tiny-card--logo.tiny-card--mini-padding{padding:var(--tv-Card-mini-body-padding)}.tiny-card .tiny-card__body .tiny-card--logo .tiny-card--logo__head{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:12px;padding-top:8px;padding-bottom:8px;width:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;aspect-ratio:5/2;overflow:hidden}.tiny-card .tiny-card__body .tiny-card--logo .tiny-card--logo__head img{background-size:contain}.tiny-card .tiny-card__body .tiny-card--logo .tiny-card--logo__title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.tiny-card .tiny-card__body .tiny-card--logo .tiny-card--logo__title--type-logo{text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:4px}.tiny-card .tiny-card__body .tiny-card--logo .tiny-card--logo__title--p{font-size:var(--tv-Card-title-font-size);font-weight:var(--tv-Card-title-font-weight);margin-right:8px;margin-bottom:var(--tv-Card-title-mg-bottom);line-height:22px;color:var(--tv-Card-title-text-color)}.tiny-card .tiny-card__body .tiny-card--logo .tiny-card--logo__main{font-size:var(--tv-Card-main-font-size);color:var(--tv-Card-main-text-color)}.tiny-card .tiny-card__body .tiny-card--logo .tiny-card--logo__main-type-logo{text-align:center;padding-bottom:8px}.tiny-card .tiny-card__footer{width:100%}.tiny-card .tiny-card__footer .tiny-card__footer-footer{padding:12px;border-top:1px solid #dfdfdf}.tiny-card .tiny-card__footer .tiny-card__footer-options{width:100%;padding-left:12px;padding-right:12px;height:44px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-top:1px solid var(--tv-Card-option-top-border-color);color:var(--tv-Card-option-text-color);font-size:var(--tv-Card-option-font-size)}.tiny-card .tiny-card__footer .tiny-card__footer-options .tiny-card__footer-options-disabled{color:var(--tv-Card-option-disabled-text-color);cursor:not-allowed}.tiny-card .tiny-card__footer .tiny-card__footer-options .tiny-card__footer-options-div{cursor:pointer}.tiny-card .tiny-card__footer .tiny-card__footer-options .tiny-card__footer-options-icon{width:16px;height:16px}.tiny-card .tiny-card__footer .tiny-card__footer-options .tiny-card__footer-options-icon-disabled{fill:var(--tv-Card-option-disabled-text-color)}.tiny-card .tiny-card__footer .tiny-card__footer-options .tiny-card__footer-options-span{margin-left:4px;vertical-align:middle}.tiny-card .tiny-card__footer .tiny-card__footer-options .tiny-card__footer-options-dropdown .tiny-card__footer-more{margin-left:4px;color:var(--tv-Card-footer-more-text-color)}.tiny-card .tiny-card__footer .tiny-card__footer-options .tiny-card__footer-options-dropdown .tiny-card__footer-dropdown-item{padding-left:8px;padding-right:8px}.tiny-card .tiny-card__footer .tiny-card__footer-options .tiny-card__footer-options-dropdown .tiny-card__footer-dropdown-item-disabled{color:var(--tv-Card-option-disabled-text-color);cursor:not-allowed}