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

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

:where(:host,:root,.theme){--vv-avatar-background-color: var(--color-brand);--vv-avatar-border-radius: var(--rounded);--vv-avatar-color: var(--color-white);--vv-avatar-display: inline-flex;--vv-avatar-position: relative;--vv-avatar-justify-content: center;--vv-avatar-align-items: center;--vv-avatar-font-size: var(--text-12);--vv-avatar-line-height: var(--leading-none);--vv-avatar-width: var(--spacing-28);--vv-avatar-height: var(--spacing-28);--vv-avatar-background-position: center;--vv-avatar-background-size: contain;--vv-avatar-background-repeat: no-repeat;--vv-avatar-object-fit: contain;--vv-avatar-flex-shrink: 0;--vv-avatar-state-focus-outline: var(--spacing-px) solid var(--color-brand);--vv-avatar-state-focus-outline-offset: var(--spacing-0);--vv-avatar-element-badge-position: absolute;--vv-avatar-element-badge-top: 0;--vv-avatar-element-badge-right: 0;--vv-avatar-element-badge-translate: 50% -33.3%;--vv-avatar-element-badge-box-shadow: var(--shadow-sm);--vv-avatar-element-badge-bottom-position: absolute;--vv-avatar-element-badge-bottom-bottom: 0;--vv-avatar-element-badge-bottom-right: 0;--vv-avatar-element-badge-bottom-translate: 50% 33.3%;--vv-avatar-element-badge-bottom-box-shadow: var(--shadow-sm);--vv-avatar-element-image-width: 100%;--vv-avatar-element-image-height: 100%;--vv-avatar-element-image-object-fit: inherit;--vv-avatar-element-image-border-radius: var(--rounded);--vv-avatar-element-image-overflow: hidden;--vv-avatar-modifier-rounded-border-radius: var(--rounded-full);--vv-avatar-modifier-rounded-element-image-border-radius: var(--rounded-full);--vv-avatar-modifier-square-border-radius: var(--rounded-none);--vv-avatar-modifier-square-element-image-border-radius: var(--rounded-none);--vv-avatar-modifier-bordered-border-color: var(--color-brand-lighten-3);--vv-avatar-modifier-bordered-border-width: var(--border);--vv-avatar-modifier-bordered-border-style: solid;--vv-avatar-modifier-md-font-size: var(--text-14);--vv-avatar-modifier-md-width: var(--spacing-34);--vv-avatar-modifier-md-height: var(--spacing-34);--vv-avatar-modifier-lg-font-size: var(--text-16);--vv-avatar-modifier-lg-width: var(--spacing-40);--vv-avatar-modifier-lg-height: var(--spacing-40);--vv-avatar-modifier-transparent-background-color: var(--color-transparent);--vv-avatar-modifier-surface-background-color: var(--color-surface-2);--vv-avatar-modifier-surface-border-color: var(--color-surface-5);--vv-avatar-modifier-surface-color: var(--color-word-2);--vv-avatar-modifier-danger-background-color: var(--color-danger);--vv-avatar-modifier-danger-border-color: var(--color-danger-lighten-3);--vv-avatar-modifier-success-background-color: var(--color-success);--vv-avatar-modifier-success-border-color: var(--color-success-lighten-3);--vv-avatar-modifier-warning-background-color: var(--color-warning-darken-5);--vv-avatar-modifier-warning-border-color: var(--color-warning-darken-2);--vv-avatar-modifier-info-background-color: var(--color-info-darken-5);--vv-avatar-modifier-info-border-color: var(--color-info-darken-2);--vv-avatar-modifier-accent-background-color: var(--color-accent);--vv-avatar-modifier-accent-border-color: var(--color-accent-darken-3);--vv-avatar-modifier-gray-background-color: var(--color-gray-darken-1);--vv-avatar-modifier-gray-border-color: var(--color-gray-lighten-2);--vv-avatar-modifier-ring-color: var(--color-brand-darken-3);--vv-avatar-modifier-ring-background-color: var(--color-surface-brand);--vv-avatar-modifier-ring-border-color: currentcolor;--vv-avatar-modifier-ring-border-width: var(--border);--vv-avatar-modifier-ring-border-style: solid;--vv-avatar-modifier-ring-modifier-surface-background-color: var(--color-surface);--vv-avatar-modifier-ring-modifier-surface-color: var(--color-word-2);--vv-avatar-modifier-ring-modifier-danger-background-color: var(--color-surface-danger);--vv-avatar-modifier-ring-modifier-danger-color: var(--color-danger);--vv-avatar-modifier-ring-modifier-success-background-color: var(--color-surface-success);--vv-avatar-modifier-ring-modifier-success-color: var(--color-success-darken-3);--vv-avatar-modifier-ring-modifier-warning-background-color: var(--color-surface-warning);--vv-avatar-modifier-ring-modifier-warning-color: var(--color-warning-darken-5);--vv-avatar-modifier-ring-modifier-info-background-color: var(--color-surface-info);--vv-avatar-modifier-ring-modifier-info-color: var(--color-info-darken-5);--vv-avatar-modifier-ring-modifier-accent-background-color: var(--color-surface-accent);--vv-avatar-modifier-ring-modifier-accent-color: var(--color-accent);--vv-avatar-modifier-ring-modifier-gray-background-color: var(--color-surface-4);--vv-avatar-modifier-ring-modifier-gray-color: var(--color-word-2)}:where(.vv-avatar){background-color:var(--vv-avatar-background-color);border-radius:var(--vv-avatar-border-radius);color:var(--vv-avatar-color);display:var(--vv-avatar-display);position:var(--vv-avatar-position);justify-content:var(--vv-avatar-justify-content);align-items:var(--vv-avatar-align-items);font-size:var(--vv-avatar-font-size);line-height:var(--vv-avatar-line-height);width:var(--vv-avatar-width);height:var(--vv-avatar-height);background-position:var(--vv-avatar-background-position);background-size:var(--vv-avatar-background-size);background-repeat:var(--vv-avatar-background-repeat);-o-object-fit:var(--vv-avatar-object-fit);object-fit:var(--vv-avatar-object-fit);flex-shrink:var(--vv-avatar-flex-shrink)}:where(.vv-avatar__badge,.vv-avatar>sup){position:var(--vv-avatar-element-badge-position);top:var(--vv-avatar-element-badge-top);right:var(--vv-avatar-element-badge-right);translate:var(--vv-avatar-element-badge-translate);box-shadow:var(--vv-avatar-element-badge-box-shadow)}:where(.vv-avatar__badge-bottom,.vv-avatar>sub){position:var(--vv-avatar-element-badge-bottom-position);bottom:var(--vv-avatar-element-badge-bottom-bottom);right:var(--vv-avatar-element-badge-bottom-right);translate:var(--vv-avatar-element-badge-bottom-translate);box-shadow:var(--vv-avatar-element-badge-bottom-box-shadow)}:where(.vv-avatar__image,.vv-avatar>img){width:var(--vv-avatar-element-image-width);height:var(--vv-avatar-element-image-height);-o-object-fit:var(--vv-avatar-element-image-object-fit);object-fit:var(--vv-avatar-element-image-object-fit);border-radius:var(--vv-avatar-element-image-border-radius);overflow:var(--vv-avatar-element-image-overflow)}:where(.vv-avatar--focus,.vv-avatar.focus,.vv-avatar:not([disabled]):focus){outline:var(--vv-avatar-state-focus-outline);outline-offset:var(--vv-avatar-state-focus-outline-offset)}:where(.vv-avatar--rounded.vv-avatar){--vv-avatar-border-radius: var(--vv-avatar-modifier-rounded-border-radius)}:where(.vv-avatar--rounded>.vv-avatar__image,.vv-avatar--rounded>img){border-radius:var(--vv-avatar-modifier-rounded-element-image-border-radius)}:where(.vv-avatar--square.vv-avatar){--vv-avatar-border-radius: var(--vv-avatar-modifier-square-border-radius)}:where(.vv-avatar--square>.vv-avatar__image,.vv-avatar--square>img){border-radius:var(--vv-avatar-modifier-square-element-image-border-radius)}:where(.vv-avatar--bordered.vv-avatar){border-color:var(--vv-avatar-modifier-bordered-border-color);border-width:var(--vv-avatar-modifier-bordered-border-width);border-style:var(--vv-avatar-modifier-bordered-border-style)}:where(.vv-avatar--md.vv-avatar){--vv-avatar-font-size: var(--vv-avatar-modifier-md-font-size);--vv-avatar-width: var(--vv-avatar-modifier-md-width);--vv-avatar-height: var(--vv-avatar-modifier-md-height)}:where(.vv-avatar--lg.vv-avatar){--vv-avatar-font-size: var(--vv-avatar-modifier-lg-font-size);--vv-avatar-width: var(--vv-avatar-modifier-lg-width);--vv-avatar-height: var(--vv-avatar-modifier-lg-height)}:where(.vv-avatar--transparent.vv-avatar){--vv-avatar-background-color: var(--vv-avatar-modifier-transparent-background-color)}:where(.vv-avatar--surface.vv-avatar){--vv-avatar-background-color: var(--vv-avatar-modifier-surface-background-color);border-color:var(--vv-avatar-modifier-surface-border-color);--vv-avatar-color: var(--vv-avatar-modifier-surface-color)}:where(.vv-avatar--danger.vv-avatar){--vv-avatar-background-color: var(--vv-avatar-modifier-danger-background-color);border-color:var(--vv-avatar-modifier-danger-border-color)}:where(.vv-avatar--success.vv-avatar){--vv-avatar-background-color: var(--vv-avatar-modifier-success-background-color);border-color:var(--vv-avatar-modifier-success-border-color)}:where(.vv-avatar--warning.vv-avatar){--vv-avatar-background-color: var(--vv-avatar-modifier-warning-background-color);border-color:var(--vv-avatar-modifier-warning-border-color)}:where(.vv-avatar--info.vv-avatar){--vv-avatar-background-color: var(--vv-avatar-modifier-info-background-color);border-color:var(--vv-avatar-modifier-info-border-color)}:where(.vv-avatar--accent.vv-avatar){--vv-avatar-background-color: var(--vv-avatar-modifier-accent-background-color);border-color:var(--vv-avatar-modifier-accent-border-color)}:where(.vv-avatar--gray.vv-avatar){--vv-avatar-background-color: var(--vv-avatar-modifier-gray-background-color);border-color:var(--vv-avatar-modifier-gray-border-color)}:where(.vv-avatar--ring.vv-avatar){--vv-avatar-color: var(--vv-avatar-modifier-ring-color);--vv-avatar-background-color: var(--vv-avatar-modifier-ring-background-color);border-color:var(--vv-avatar-modifier-ring-border-color);border-width:var(--vv-avatar-modifier-ring-border-width);border-style:var(--vv-avatar-modifier-ring-border-style)}:where(.vv-avatar--ring.vv-avatar--surface.vv-avatar){--vv-avatar-modifier-ring-background-color: var(--vv-avatar-modifier-ring-modifier-surface-background-color);--vv-avatar-modifier-ring-color: var(--vv-avatar-modifier-ring-modifier-surface-color)}:where(.vv-avatar--ring.vv-avatar--danger.vv-avatar){--vv-avatar-modifier-ring-background-color: var(--vv-avatar-modifier-ring-modifier-danger-background-color);--vv-avatar-modifier-ring-color: var(--vv-avatar-modifier-ring-modifier-danger-color)}:where(.vv-avatar--ring.vv-avatar--success.vv-avatar){--vv-avatar-modifier-ring-background-color: var(--vv-avatar-modifier-ring-modifier-success-background-color);--vv-avatar-modifier-ring-color: var(--vv-avatar-modifier-ring-modifier-success-color)}:where(.vv-avatar--ring.vv-avatar--warning.vv-avatar){--vv-avatar-modifier-ring-background-color: var(--vv-avatar-modifier-ring-modifier-warning-background-color);--vv-avatar-modifier-ring-color: var(--vv-avatar-modifier-ring-modifier-warning-color)}:where(.vv-avatar--ring.vv-avatar--info.vv-avatar){--vv-avatar-modifier-ring-background-color: var(--vv-avatar-modifier-ring-modifier-info-background-color);--vv-avatar-modifier-ring-color: var(--vv-avatar-modifier-ring-modifier-info-color)}:where(.vv-avatar--ring.vv-avatar--accent.vv-avatar){--vv-avatar-modifier-ring-background-color: var(--vv-avatar-modifier-ring-modifier-accent-background-color);--vv-avatar-modifier-ring-color: var(--vv-avatar-modifier-ring-modifier-accent-color)}:where(.vv-avatar--ring.vv-avatar--gray.vv-avatar){--vv-avatar-modifier-ring-background-color: var(--vv-avatar-modifier-ring-modifier-gray-background-color);--vv-avatar-modifier-ring-color: var(--vv-avatar-modifier-ring-modifier-gray-color)}