From 9c78415a1fe07a97235cf6e07d299b025ebd818d Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 12 Mar 2025 12:55:55 +0200
Subject: [PATCH] style(next): restyle toasts

---
 src/public/stylesheets/theme-next/base.css  | 48 +++++++++++++++++++++
 src/public/stylesheets/theme-next/shell.css | 23 ++++++----
 2 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/src/public/stylesheets/theme-next/base.css b/src/public/stylesheets/theme-next/base.css
index 65b2a0ff4..becb4aad4 100644
--- a/src/public/stylesheets/theme-next/base.css
+++ b/src/public/stylesheets/theme-next/base.css
@@ -102,3 +102,51 @@ div.tn-tool-dialog {
     background: var(--hover-item-background-color);
     color: var(--hover-item-text-color);
 }
+
+/*
+ * Toasts
+ */
+
+:root {
+    --toast-background: #00000099;
+    --toast-text-color: white;
+    --toast-close-button-background: #ffffff33;
+}
+
+#toast-container {
+    /* The vertical gap between toasts */
+    gap: 10px;
+}
+
+#toast-container .toast {
+    --bs-toast-padding-x: 12px;
+    --bs-border-radius: 8px;
+    --bs-toast-bg: var(--toast-background);
+    --bs-toast-color: var(--toast-text-color);
+    --modal-control-button-background: var(--toast-close-button-background);
+    --modal-control-button-color: var(--bs-toast-color);
+
+    display: flex;
+    flex-direction: row-reverse;
+    backdrop-filter: blur(6px);
+}
+
+#toast-container .toast .toast-header {
+    padding: 0 !important;
+    background: transparent !important;
+    border-bottom: none;
+}
+
+#toast-container .toast .toast-header strong {
+    /* The title of the toast is no longer displayed */
+    display: none;
+}
+
+#toast-container .toast .toast-header .btn-close {
+    margin: 0 var(--bs-toast-padding-x) 0 12px;
+
+}
+
+#toast-container .toast .toast-body {
+    flex-grow: 1;
+}
\ No newline at end of file
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index 0710bf28c..d271e411e 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -2087,10 +2087,11 @@ div.promoted-attribute-cell .multiplicity:has(span) {
     color: var(--modal-title-color);
 }
 
-/* Modal control buttons (close and help) */
+/* Modal and toast control buttons (close and help) */
 
 .modal .modal-header .btn-close,
-.modal .modal-header .help-button {
+.modal .modal-header .help-button,
+#toast-container .toast .toast-header .btn-close {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -2109,11 +2110,13 @@ div.promoted-attribute-cell .multiplicity:has(span) {
     cursor: default;
 }
 
-.modal .modal-header .btn-close {
+.modal .modal-header .btn-close,
+#toast-container .toast .toast-header .btn-close {
     --modal-control-button-hover-background: var(--modal-close-button-hover-background);
 }
 
-.modal .modal-header .btn-close::after {
+.modal .modal-header .btn-close::after,
+#toast-container .toast .toast-header .btn-close::after {
     content: "\ec8d";
     font-family: boxicons;
 }
@@ -2126,23 +2129,27 @@ div.promoted-attribute-cell .multiplicity:has(span) {
 }
 
 .modal .modal-header .btn-close:hover,
-.modal .modal-header .help-button:hover {
+.modal .modal-header .help-button:hover,
+#toast-container .toast .toast-header .btn-close:hover {
     background: var(--modal-control-button-hover-background);
     color: var(--modal-control-button-hover-color);
 }
 
 .modal .modal-header .btn-close:active,
-.modal .modal-header .help-button:active {
+.modal .modal-header .help-button:active,
+#toast-container .toast .toast-header .btn-close:active {
     transform: scale(.85);
 }
 
 .modal .modal-header .btn-close:focus,
-.modal .modal-header .help-button:focus {
+.modal .modal-header .help-button:focus,
+#toast-container .toast .toast-header .btn-close:focus {
     box-shadow: none !important;
 }
 
 .modal .modal-header .btn-close:focus-visible,
-.modal .modal-header .help-button:focus-visible {
+.modal .modal-header .help-button:focus-visible,
+#toast-container .toast .toast-header .btn-close:focus-visible {
     outline: 2px solid var(--input-focus-outline-color);
     outline-offset: 2px;
 }