vue-html-dialog/dist/vue-html-dialog.css

A native HTML Dialog written in Vue.

[data-v-16e8dd23]:root{--transition-duration: .3s}.backdrop[data-v-16e8dd23]{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:999;transition:background-color var(--transition-duration) ease}.dialog[data-v-16e8dd23]{position:relative;background:#fff;border:none;border-radius:8px;padding:1.5rem;width:400px;max-width:90%;box-shadow:0 2px 12px #0000004d;transition:transform var(--transition-duration) ease,opacity var(--transition-duration) ease;opacity:1}.dialog div[data-v-16e8dd23]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.close-button[data-v-16e8dd23]{position:absolute;top:8px;right:12px;background:transparent;border:none;font-size:1.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-16e8dd23]{animation:fadeIn-16e8dd23 var(--transition-duration) ease forwards}.fade-leave-active[data-v-16e8dd23]{animation:fadeOut-16e8dd23 var(--transition-duration) ease forwards}@keyframes fadeIn-16e8dd23{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut-16e8dd23{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}dialog[data-v-6c2d8e9f]{border:none;border-radius:8px;padding:1.5rem;width:400px;max-width:90%;box-shadow:0 2px 12px #0000004d;background:#fff;opacity:1;transition:opacity var(--transition-duration, .3s) ease,transform var(--transition-duration, .3s) ease}.fade-enter-active[data-v-6c2d8e9f]{animation:fadeIn-6c2d8e9f var(--transition-duration, .3s) ease forwards}.fade-leave-active[data-v-6c2d8e9f]{animation:fadeOut-6c2d8e9f var(--transition-duration, .3s) ease forwards}@keyframes fadeIn-6c2d8e9f{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut-6c2d8e9f{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.close-button[data-v-6c2d8e9f]{position:absolute;top:8px;right:12px;background:transparent;border:none;font-size:1.5rem;cursor:pointer;line-height:1;-webkit-user-select:none;user-select:none}