.notification{ background-color: var(--text-background-color); border-radius: 10px; padding: 10px; /* width: 10vw;*/ margin-bottom: 0.3vh; /* height: ;*/ } .notification_info{ border: 2px solid var(--accent-600); } .notification_error{ border: 2px solid red; } .notification_error .notification_title{ color: red; } .notification_title{ text-decoration: underline; margin-bottom: 5%; } .notification_expired{ -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards; animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards; } /*@keyframes notification_expired_animation { from { display: block; } to { right: 0px; } }*/ /* ---------------------------------------------- * Generated by Animista on 2024-7-6 9:56:55 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation slide-right * ---------------------------------------- */ @keyframes slide-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(100vw); transform: translateX(100vw); } } .notification_block{ text-align: left; color: var(--text-500); /* display: flex;*/ position: fixed; bottom: 1vh; right: 1vw; margin: 10px; }