root
87f245d3fc
- Sunset Glitch color palette applied to all templates - Font Awesome icons throughout UI - Download manager with parallel queue and progress tracking - Settings page with dynamic configuration - Recommendations router enhanced with scoring - Local vendor libs (Alpine.js, HTMX) for offline support - Auto test suite with screenshots - Series releases list component - New download model
60 lines
2.0 KiB
HTML
60 lines
2.0 KiB
HTML
<div id="toast-container"
|
|
class="toast-container"
|
|
style="pointer-events: none;"
|
|
x-data="{ toasts: [] }"
|
|
@show-toast.window="toasts.push({ id: Date.now(), message: $event.detail.message, type: $event.detail.type || 'info' }); setTimeout(() => { toasts = toasts.filter(t => t.id !== toasts[0].id) }, 5000)">
|
|
|
|
<template x-for="toast in toasts" :key="toast.id">
|
|
<div class="toast"
|
|
style="pointer-events: auto;"
|
|
:class="'toast-' + toast.type"
|
|
x-show="true"
|
|
x-transition:enter="toast-enter"
|
|
x-transition:leave="toast-leave">
|
|
<div class="toast-content">
|
|
<i class="fas" :class="{
|
|
'fa-check-circle': toast.type === 'success',
|
|
'fa-exclamation-circle': toast.type === 'error',
|
|
'fa-info-circle': toast.type === 'info'
|
|
}"></i>
|
|
<span x-text="toast.message"></span>
|
|
</div>
|
|
<button class="toast-close" @click="toasts = toasts.filter(t => t.id !== toast.id)">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<style>
|
|
.toast-container {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
pointer-events: none;
|
|
max-height: 80vh;
|
|
overflow: hidden;
|
|
}
|
|
.toast {
|
|
min-width: 250px;
|
|
padding: 12px 16px;
|
|
border-radius: 4px;
|
|
background: var(--bg-card);
|
|
color: var(--text-main);
|
|
border: 1px solid var(--secondary);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-left: 4px solid var(--secondary);
|
|
}
|
|
.toast-success { border-left-color: #2d936c; }
|
|
.toast-error { border-left-color: #e63946; }
|
|
.toast-info { border-left-color: #FFBF69; }
|
|
.toast-content { display: flex; align-items: center; gap: 10px; }
|
|
.toast-close { background: none; border: none; color: #aaa; cursor: pointer; }
|
|
</style>
|