@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: hsl(var(--color-surface-hue), var(--color-surface-saturation), var(--color-surface-lightness), 60%);--vv-card-modifier-glass-backdrop-filter: var(--blur-md);--vv-card-modifier-glass-element-header-background-color: hsl(var(--color-surface-hue), var(--color-surface-saturation), var(--color-surface-lightness), 30%);--vv-card-modifier-glass-element-footer-background-color: hsl(var(--color-surface-hue), var(--color-surface-saturation), var(--color-surface-lightness), 30%)}: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)}