@f3ve/vue-notify-components/dist/style.css

Vue Notify components

:root{--vue-notification-color-success: #90ee90;--vue-notification-color-default: #d3d3d3;--vue-notification-color-error: #ff6b6b;--vue-notification-color-info: #6fffff;--vue-notification-color-warning: #ffa500;--vue-notification-color-success-dark: #017901;--vue-notification-color-default-dark: #333333;--vue-notification-color-error-dark: #9b0000;--vue-notification-color-info-dark: #007a8a;--vue-notification-color-warning-dark: #b85300}.vue-notification{padding:.5rem 1rem;border-radius:.5rem;box-shadow:0 .1rem .2rem #868686;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:.5rem;max-width:700px}.vue-notification-close{display:inline-block;width:1.2rem;height:1.2rem;--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E");background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.vue-notification button{border:none;background:none;display:flex;align-items:center;justify-content:center;padding:.4rem;color:currentColor;cursor:pointer;border-radius:100%;height:fit-content;width:fit-content;transition:box-shadow .15s ease-in-out}.vue-notification button:hover{-moz-box-shadow:inset 0 0 100px 100px rgba(128,128,128,.404);-webkit-box-shadow:inset 0 0 100px 100px rgba(128,128,128,.404);box-shadow:inset 0 0 100px 100px #80808067}.dark .vue-notification{box-shadow:none}.vue-notification.color-success{background-color:var(--vue-notification-color-success)}.vue-notification.color-error{background-color:var(--vue-notification-color-error)}.vue-notification.color-default{background-color:var(--vue-notification-color-default)}.vue-notification.color-warning{background-color:var(--vue-notification-color-warning)}.vue-notification.color-info{background-color:var(--vue-notification-color-info)}.dark .vue-notification.color-success{background-color:var(--vue-notification-color-success-dark)}.dark .vue-notification.color-error{background-color:var(--vue-notification-color-error-dark)}.dark .vue-notification.color-default{background-color:var(--vue-notification-color-default-dark)}.dark .vue-notification.color-warning{background-color:var(--vue-notification-color-warning-dark)}.dark .vue-notification.color-info{background-color:var(--vue-notification-color-info-dark)}.notifications{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:1rem;bottom:0;width:100%;height:100vh!important;pointer-events:none;z-index:1000;overflow:hidden;padding:1rem}.notifications>*{pointer-events:initial}.notifications-move,.notifications-enter-active,.notifications-leave-active{transition:all .15s ease-in-out}.notifications-enter-from,.notifications-leave-to{opacity:0;transform:translateY(30px)}.notifications-leave-active{position:absolute}