body {
background: radial-gradient(ellipse at top, #1a1a1d, #0d0d0f);
color: #e5e5e5;
}
.glass {
background: rgba(30, 30, 30, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.gif {
position: relative;
overflow: hidden;
border-radius: 0.5rem;
background-color: transparent;
}
.gif img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: inherit;
display: block;
transition: opacity 0.5s;
}
.gif a {
display: block;
padding: 0;
margin: 0;
border: none;
outline: none;
box-shadow: none;
}
.gif.show {
opacity: 1;
transform: translateY(0);
}
.toasts {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 0.75rem;
pointer-events: none;
}
.toast {
pointer-events: auto;
transform: translateY(8px);
opacity: 0;
transition: transform 180ms ease, opacity 180ms ease;
}
.toast.show {
transform: translateY(0);
opacity: 1;
}
.toast.hide {
transform: translateY(8px);
opacity: 0;
}
.glass.disabled {
opacity: 0.5;
pointer-events: none;
position: relative;
}
.glass.disabled::after {
content: "Uploading...";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.1rem;
background: rgba(0, 0, 0, 0.4);
color: #fff;
border-radius: inherit;
}