@volverjs/style/dist/components/vv-card.css

@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.

:where(:host,:root,.theme){--vv-card-position:relative;--vv-card-display:flex;--vv-card-flex-direction:column;--vv-card-overflow:hidden;--vv-card-border-color:var(--color-surface-4);--vv-card-border-width:var(--border);--vv-card-border-style:solid;--vv-card-border-radius:var(--rounded-lg);--vv-card-margin:var(--spacing-0);--vv-card-background-color:var(--color-surface);--vv-card-box-shadow:var(--shadow-md);--vv-card-color:var(--color-word-2);--vv-card-backdrop-filter:none;--vv-card-element-header-overflow:hidden;--vv-card-element-header-padding:var(--spacing-md);--vv-card-element-header-background-color:var(--color-surface-1);--vv-card-element-header-border-bottom:var(--border) solid var(--color-surface-4);--vv-card-element-picture-display:block;--vv-card-element-picture-width:100%;--vv-card-element-picture-height:auto;--vv-card-element-picture-object-fit:cover;--vv-card-element-picture-object-position:center;--vv-card-element-content-padding:var(--spacing-md);--vv-card-element-content-line-height:var(--leading-normal);--vv-card-element-content-flex-grow:1;--vv-card-element-content-min-height:0;--vv-card-element-content-overflow:auto;--vv-card-element-footer-border-top:var(--border) solid var(--color-surface-4);--vv-card-element-footer-padding:var(--spacing-md);--vv-card-modifier-glass-background-color:color-mix(in srgb, var(--color-surface), transparent 40%);--vv-card-modifier-glass-backdrop-filter:var(--blur-md);--vv-card-modifier-glass-element-header-background-color:color-mix(in srgb, var(--color-surface), transparent 70%);--vv-card-modifier-glass-element-footer-background-color:color-mix(in srgb, var(--color-surface), transparent 70%)}:where(.vv-card){position:var(--vv-card-position);display:var(--vv-card-display);flex-direction:var(--vv-card-flex-direction);overflow:var(--vv-card-overflow);border-color:var(--vv-card-border-color);border-width:var(--vv-card-border-width);border-style:var(--vv-card-border-style);border-radius:var(--vv-card-border-radius);margin:var(--vv-card-margin);background-color:var(--vv-card-background-color);box-shadow:var(--vv-card-box-shadow);color:var(--vv-card-color);-webkit-backdrop-filter:var(--vv-card-backdrop-filter);backdrop-filter:var(--vv-card-backdrop-filter)}:where(.vv-card__header,.vv-card>header){overflow:var(--vv-card-element-header-overflow);padding:var(--vv-card-element-header-padding);background-color:var(--vv-card-element-header-background-color);border-bottom:var(--vv-card-element-header-border-bottom)}:where(.vv-card__picture,.vv-card>picture>img){display:var(--vv-card-element-picture-display);width:var(--vv-card-element-picture-width);height:var(--vv-card-element-picture-height);-o-object-fit:var(--vv-card-element-picture-object-fit);object-fit:var(--vv-card-element-picture-object-fit);-o-object-position:var(--vv-card-element-picture-object-position);object-position:var(--vv-card-element-picture-object-position)}:where(.vv-card__content){padding:var(--vv-card-element-content-padding);line-height:var(--vv-card-element-content-line-height);flex-grow:var(--vv-card-element-content-flex-grow);min-height:var(--vv-card-element-content-min-height);overflow:var(--vv-card-element-content-overflow)}:where(.vv-card__footer,.vv-card>footer){border-top:var(--vv-card-element-footer-border-top);padding:var(--vv-card-element-footer-padding)}:where(.vv-card--glass.vv-card){--vv-card-background-color:var(--vv-card-modifier-glass-background-color);--vv-card-backdrop-filter:var(--vv-card-modifier-glass-backdrop-filter)}:where(.vv-card--glass>.vv-card__header,.vv-card--glass>header){background-color:var(--vv-card-modifier-glass-element-header-background-color)}:where(.vv-card--glass>.vv-card__footer,.vv-card--glass>footer){background-color:var(--vv-card-modifier-glass-element-footer-background-color)}