vexip-ui/css/message.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-message-vars{--vxp-message-color:inherit;--vxp-message-bg-color:var(--vxp-bg-color-base);--vxp-message-b-color:var(--vxp-border-color-light-2);--vxp-message-radius:var(--vxp-radius-base);--vxp-message-s-color:var(--vxp-shadow-color-base);--vxp-message-shadow:var(--vxp-shadow-shape) var(--vxp-message-s-color);--vxp-message-v-padding:8px;--vxp-message-h-padding:10px;--vxp-message-mask-bg-color:transparent;--vxp-message-icon-color:var(--vxp-message-color);--vxp-message-close-color:var(--vxp-content-color-placeholder);--vxp-message-close-color-hover:var(--vxp-content-color-base)}.vxp-message{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:flex;flex-direction:column;align-items:center}.vxp-message,.vxp-message *,.vxp-message ::after,.vxp-message ::before{box-sizing:border-box}.vxp-message--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-message__wrapper{display:flex}.vxp-message__icon{display:flex;align-items:center;margin-inline-end:8px;color:var(--vxp-message-icon-color)}.vxp-message__close{display:flex;align-items:center;padding:0;margin-inline-start:14px;color:var(--vxp-message-close-color);cursor:pointer;background-color:transparent;border:0;outline:0;transition:var(--vxp-transition-color)}.vxp-message__close:focus,.vxp-message__close:hover{color:var(--vxp-message-close-color-hover)}.vxp-message__item{display:flex;padding:var(--vxp-message-v-padding) var(--vxp-message-h-padding);color:var(--vxp-message-color);background-color:var(--vxp-message-bg-color);border:var(--vxp-border-shape) var(--vxp-message-b-color);border-radius:var(--vxp-message-radius);box-shadow:var(--vxp-message-shadow)}.vxp-message__item::before{position:absolute;inset:0;pointer-events:none;background-color:var(--vxp-message-mask-bg-color);border-radius:var(--vxp-message-radius);opacity:80%}.vxp-message__item--background::before{content:""}.vxp-message__item--color-only.vxp-message__item--primary{--vxp-message-color:var(--vxp-color-primary-base);--vxp-message-close-color:var(--vxp-color-primary-opacity-5);--vxp-message-close-color-hover:var(--vxp-color-primary-base)}.vxp-message__item--background.vxp-message__item--primary{--vxp-message-b-color:var(--vxp-color-primary-opacity-5);--vxp-message-mask-bg-color:var(--vxp-color-primary-opacity-9);--vxp-message-shadow:var(--vxp-unset);--vxp-message-close-color:var(--vxp-color-primary-opacity-7);--vxp-message-close-color-hover:var(--vxp-color-primary-opacity-2)}.vxp-message__item--background.vxp-message__item--color.vxp-message__item--primary{--vxp-message-color:var(--vxp-color-primary-dark-2);--vxp-message-icon-color:var(--vxp-color-primary-dark-1)}.vxp-message__item--primary{--vxp-message-icon-color:var(--vxp-color-primary-base)}.vxp-message__item--color-only.vxp-message__item--info{--vxp-message-color:var(--vxp-color-info-base);--vxp-message-close-color:var(--vxp-color-info-opacity-5);--vxp-message-close-color-hover:var(--vxp-color-info-base)}.vxp-message__item--background.vxp-message__item--info{--vxp-message-b-color:var(--vxp-color-info-opacity-5);--vxp-message-mask-bg-color:var(--vxp-color-info-opacity-9);--vxp-message-shadow:var(--vxp-unset);--vxp-message-close-color:var(--vxp-color-info-opacity-7);--vxp-message-close-color-hover:var(--vxp-color-info-opacity-2)}.vxp-message__item--background.vxp-message__item--color.vxp-message__item--info{--vxp-message-color:var(--vxp-color-info-dark-2);--vxp-message-icon-color:var(--vxp-color-info-dark-1)}.vxp-message__item--info{--vxp-message-icon-color:var(--vxp-color-info-base)}.vxp-message__item--color-only.vxp-message__item--success{--vxp-message-color:var(--vxp-color-success-base);--vxp-message-close-color:var(--vxp-color-success-opacity-5);--vxp-message-close-color-hover:var(--vxp-color-success-base)}.vxp-message__item--background.vxp-message__item--success{--vxp-message-b-color:var(--vxp-color-success-opacity-5);--vxp-message-mask-bg-color:var(--vxp-color-success-opacity-9);--vxp-message-shadow:var(--vxp-unset);--vxp-message-close-color:var(--vxp-color-success-opacity-7);--vxp-message-close-color-hover:var(--vxp-color-success-opacity-2)}.vxp-message__item--background.vxp-message__item--color.vxp-message__item--success{--vxp-message-color:var(--vxp-color-success-dark-2);--vxp-message-icon-color:var(--vxp-color-success-dark-1)}.vxp-message__item--success{--vxp-message-icon-color:var(--vxp-color-success-base)}.vxp-message__item--color-only.vxp-message__item--warning{--vxp-message-color:var(--vxp-color-warning-base);--vxp-message-close-color:var(--vxp-color-warning-opacity-5);--vxp-message-close-color-hover:var(--vxp-color-warning-base)}.vxp-message__item--background.vxp-message__item--warning{--vxp-message-b-color:var(--vxp-color-warning-opacity-5);--vxp-message-mask-bg-color:var(--vxp-color-warning-opacity-9);--vxp-message-shadow:var(--vxp-unset);--vxp-message-close-color:var(--vxp-color-warning-opacity-7);--vxp-message-close-color-hover:var(--vxp-color-warning-opacity-2)}.vxp-message__item--background.vxp-message__item--color.vxp-message__item--warning{--vxp-message-color:var(--vxp-color-warning-dark-2);--vxp-message-icon-color:var(--vxp-color-warning-dark-1)}.vxp-message__item--warning{--vxp-message-icon-color:var(--vxp-color-warning-base)}.vxp-message__item--color-only.vxp-message__item--error{--vxp-message-color:var(--vxp-color-error-base);--vxp-message-close-color:var(--vxp-color-error-opacity-5);--vxp-message-close-color-hover:var(--vxp-color-error-base)}.vxp-message__item--background.vxp-message__item--error{--vxp-message-b-color:var(--vxp-color-error-opacity-5);--vxp-message-mask-bg-color:var(--vxp-color-error-opacity-9);--vxp-message-shadow:var(--vxp-unset);--vxp-message-close-color:var(--vxp-color-error-opacity-7);--vxp-message-close-color-hover:var(--vxp-color-error-opacity-2)}.vxp-message__item--background.vxp-message__item--color.vxp-message__item--error{--vxp-message-color:var(--vxp-color-error-dark-2);--vxp-message-icon-color:var(--vxp-color-error-dark-1)}.vxp-message__item--error{--vxp-message-icon-color:var(--vxp-color-error-base)}