vexip-ui/css/modal.css

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

.vxp-modal-vars{--vxp-modal-z-index:var(--vxp-masker-z-index);--vxp-modal-bg-color:var(--vxp-bg-color-base);--vxp-modal-radius:var(--vxp-radius-base);--vxp-modal-s-color:var(--vxp-shadow-color-base);--vxp-modal-shadow:var(--vxp-shadow-shape) var(--vxp-modal-s-color);--vxp-modal-d-color:var(--vxp-border-color-light-2);--vxp-modal-title-font-size:var(--vxp-font-size-primary);--vxp-modal-title-weight:500;--vxp-modal-title-color:var(--vxp-content-color-primary);--vxp-modal-header-v-padding:8px;--vxp-modal-header-h-padding:14px;--vxp-modal-body-v-padding:14px;--vxp-modal-body-h-padding:14px;--vxp-modal-body-line-height:var(--vxp-line-height-base);--vxp-modal-footer-v-padding:10px;--vxp-modal-footer-h-padding:16px;--vxp-modal-close-color:var(--vxp-content-color-placeholder);--vxp-modal-close-color-hover:var(--vxp-content-color-base);--vxp-modal-resizer-color:var(--vxp-border-color-light-1)}.vxp-modal{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);z-index:var(--vxp-modal-z-index)}.vxp-modal,.vxp-modal *,.vxp-modal ::after,.vxp-modal ::before{box-sizing:border-box}.vxp-modal--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-modal{position:fixed;inset:0}.vxp-modal--inherit{color:inherit}.vxp-modal--inner{position:absolute;overflow:hidden}.vxp-modal__transform{position:absolute;inset:0;pointer-events:none}.vxp-modal__wrapper{position:absolute;top:100px;display:flex;flex-direction:column;max-width:calc(100vw - 28px);pointer-events:auto;background-color:var(--vxp-modal-bg-color);border:0;border-radius:var(--vxp-modal-radius);box-shadow:var(--vxp-modal-shadow);transform:translateZ(0)}.vxp-modal__wrapper--dragging,.vxp-modal__wrapper--resizing{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-modal__wrapper--dragging{will-change:top,left}.vxp-modal--inner .vxp-modal__wrapper{position:absolute}.vxp-modal__header{position:relative;display:flex;flex-shrink:0;align-items:center;padding:var(--vxp-modal-header-v-padding) var(--vxp-modal-header-h-padding);border-bottom:var(--vxp-border-shape) var(--vxp-modal-d-color)}.vxp-modal--draggable .vxp-modal__header{cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-modal--undivided .vxp-modal__header{border-bottom:0}.vxp-modal__title{flex:1 0 0;font-size:var(--vxp-modal-title-font-size);font-weight:var(--vxp-modal-title-weight);color:var(--vxp-modal-title-color)}.vxp-modal__content{position:relative;flex:auto;min-width:0;min-height:0;padding:var(--vxp-modal-body-v-padding) var(--vxp-modal-body-h-padding);line-height:var(--vxp-modal-body-line-height)}.vxp-modal__footer{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding:var(--vxp-modal-footer-v-padding) var(--vxp-modal-footer-h-padding);border-top:var(--vxp-border-shape) var(--vxp-modal-d-color)}.vxp-modal--undivided .vxp-modal__footer{border-top:0}.vxp-modal__close{display:flex;align-items:center;height:24px;padding:0;margin-inline-start:6px;color:var(--vxp-modal-close-color);cursor:pointer;background-color:transparent;border:0;outline:0;transition:var(--vxp-transition-color)}.vxp-modal__close:focus,.vxp-modal__close:hover{color:var(--vxp-modal-close-color-hover)}.vxp-modal__resizer{position:absolute;right:0;bottom:0;width:10px;height:10px;cursor:nw-resize;background-image:linear-gradient(-45deg,transparent calc(30% - 1px),var(--vxp-modal-resizer-color) 30%,transparent calc(30% + 1px),transparent calc(50% - 1px),var(--vxp-modal-resizer-color) 50%,transparent calc(50% + 1px));border-radius:0 0 var(--vxp-modal-radius)}