vue-devui/card/style.css

DevUI components based on Vite and Vue3

.devui-card{position:relative;display:block;padding:16px 20px;border-radius:var(--devui-border-radius-card, 8px);box-shadow:var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));transition:box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-card__title{display:block;font-size:var(--devui-font-size-card-title, 14px);font-weight:600;color:var(--devui-text, #252b3a)}.devui-card__subtitle{display:block;font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text-stress, #575d6c)}.devui-card__header{display:flex;flex-direction:row;align-items:center;margin-bottom:var(--card-block-space, 16px)}.devui-card__avatar{margin-right:var(--card-block-space, 16px)}.devui-card__content{font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f)}.devui-card__actions{margin-top:var(--card-block-space, 16px);display:flex;justify-content:flex-start;align-items:center}.devui-card__title+.devui-card__subtitle{margin-top:var(--card-ele-space, 8px)}.devui-card__actions--align-end{justify-content:flex-end}.devui-card__actions--align-spaceBetween{justify-content:space-between}.devui-card__meta{width:calc(100% + 40px);margin:0 -20px var(--card-block-space, 16px) -20px;height:auto}.devui-card__meta:first-child{margin-top:-var(--card-block-space,16px)}.devui-card__shadow--hover:hover,.devui-card__shadow--always{box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));transform:translateY(-5px)}