From 8f3993355eba8df19c99ba4f18dde275a4a83fa3 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Mon, 21 Jul 2025 19:30:17 +0800
Subject: [PATCH] style: adjust toastification appearance

---
 open-isle-cli/src/assets/toast.css | 33 ++++++++++++++++++++++++++++++
 open-isle-cli/src/main.js          |  1 +
 2 files changed, 34 insertions(+)
 create mode 100644 open-isle-cli/src/assets/toast.css

diff --git a/open-isle-cli/src/assets/toast.css b/open-isle-cli/src/assets/toast.css
new file mode 100644
index 000000000..4c120af62
--- /dev/null
+++ b/open-isle-cli/src/assets/toast.css
@@ -0,0 +1,33 @@
+/* Custom styles for vue-toastification */
+.Vue-Toastification__toast--info {
+  background-color: #d0e9ff;
+  color: #1b6ec2;
+}
+.Vue-Toastification__toast--success {
+  background-color: #dff6dd;
+  color: #2b7a2b;
+}
+.Vue-Toastification__toast--error {
+  background-color: #ffe4e4;
+  color: #b73737;
+}
+
+@media (max-width: 600px) {
+  .Vue-Toastification__container {
+    width: auto;
+    max-width: 90vw;
+    right: 0.5em;
+    left: auto;
+  }
+  .Vue-Toastification__toast {
+    padding: 12px 14px;
+  }
+  .Vue-Toastification__toast-body {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .Vue-Toastification__close-button {
+    font-size: 20px;
+    line-height: 20px;
+  }
+}
diff --git a/open-isle-cli/src/main.js b/open-isle-cli/src/main.js
index 617a5c1fc..fe2d30eb1 100644
--- a/open-isle-cli/src/main.js
+++ b/open-isle-cli/src/main.js
@@ -7,6 +7,7 @@ import 'vue-toastification/dist/index.css'
 // Use Sugar theme from vue-toast-notification for better toast styling.
 // If you prefer Bootstrap style, replace with theme-bootstrap.css instead.
 import 'vue-toast-notification/dist/theme-sugar.css'
+import './assets/toast.css'
 import { useToast } from 'vue-toastification'
 import { checkToken, clearToken } from './utils/auth'
 import { initTheme } from './utils/theme'