Koha9/PlexPlaylistSync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tint toast glass effect with message color

Browse Source
This commit is contained in:
Koha9 2025-07-13 07:18:14 +09:00
parent bf67d702dc
commit 43a9c01f13
2 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/static/styles.css
View File

@ -5,5 +5,16 @@
/* Toast with frosted glass effect */
.glass-toast {
backdrop-filter: blur(8px);
background-color: rgba(var(--bs-body-bg-rgb), 0.75) !important;
}
.glass-toast-success {
background-color: rgba(var(--bs-success-rgb), 0.75) !important;
}
.glass-toast-danger {
background-color: rgba(var(--bs-danger-rgb), 0.75) !important;
}
.glass-toast-info {
background-color: rgba(var(--bs-info-rgb), 0.75) !important;
}

2
app/templates/base.html
View File

@ -89,7 +89,7 @@
</main>
{% if message %}
<div class="position-fixed top-0 start-50 translate-middle-x p-3 w-75" style="z-index: 1055; margin-top: 20px;">
<div id="messageToast" class="toast text-bg-{{ message_type | default('info') }} border-0 glass-toast w-100" role="alert" aria-live="assertive" aria-atomic="true">
<div id="messageToast" class="toast text-bg-{{ message_type | default('info') }} border-0 glass-toast glass-toast-{{ message_type | default('info') }} w-100" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
{{ message }}