fix toast styles

5 files changed, 80 insertions, 14 deletions

diff --git a/.env.production b/.env.production
index 1576a33b..6d3417d5 100644
--- a/.env.production
+++ b/.env.production
@@ -8,4 +8,5 @@ PUBLIC_COINOS_PUBKEY=ba80990666ef0b6f4ba5059347beb13242921e54669e680064ca755256a
 PUBLIC_COINOS_RELAY=wss://relay.coinos.io
 PUBLIC_COINOS_NETWORK=bitcoin
 PUBLIC_VAPID_PUBKEY=BFCcO7u4fpgDjWK-Py2qL7rGeueaijf97zxyBKcld25Hya9psuB9pVPeWKpUTdZI0wEWWzTOUK0LVO9uUfbaMhI
+PUBLIC_EXTRA_HOSTS=6un2jrlcumn5vduhbq6i3i2wrwiydamwjwop472obg6cy2bfo6ua3oad.onion,vm7h454g5hiy2nt3u5o7evtz3vigtypo2mkyausakvdkbmd7wpyhx5qd.onion
 PUBLIC_RECAPTCHA_SITE_KEY=6LfCd8YkAAAAANmVJgzN3SQY3n3fv1RhiS5PgMYM
diff --git a/.env.sample b/.env.sample
index d4c24f77..05270a15 100644
--- a/.env.sample
+++ b/.env.sample
@@ -8,6 +8,7 @@ PUBLIC_DOMAIN=localhost:5173
 PUBLIC_COINOS_PUBKEY=ba80990666ef0b6f4ba5059347beb13242921e54669e680064ca755256a1e3a6
 PUBLIC_COINOS_RELAY=wss://relay.coinos.io
 PUBLIC_COINOS_NETWORK=regtest
+PUBLIC_EXTRA_HOSTS=
 PUBLIC_RECAPTCHA_SITE_KEY=
 
 # Test-only endpoints (never enable in production)
diff --git a/src/app.css b/src/app.css
index 901893b9..0f713d72 100644
--- a/src/app.css
+++ b/src/app.css
@@ -39,6 +39,76 @@
   src: url("/fonts/Public_Sans/static/PublicSans-Regular.ttf") format("truetype");
 }
 
+:root {
+  --toastContainerTop: auto;
+  --toastContainerRight: auto;
+  --toastContainerBottom: 8rem;
+  --toastContainerLeft: calc(50vw - 8rem);
+  --toastBackground: #292929;
+}
+
+/* svelte-toast styles - component scoped CSS doesn't survive Svelte 5 compilation */
+._toastContainer {
+  top: var(--toastContainerTop, 1.5rem);
+  right: var(--toastContainerRight, 2rem);
+  bottom: var(--toastContainerBottom, auto);
+  left: var(--toastContainerLeft, auto);
+  position: fixed;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  pointer-events: none;
+  z-index: var(--toastContainerZIndex, 9999);
+}
+._toastItem {
+  width: var(--toastWidth, 16rem);
+  height: var(--toastHeight, auto);
+  min-height: var(--toastMinHeight, 3.5rem);
+  margin: var(--toastMargin, 0 0 0.5rem 0);
+  padding: var(--toastPadding, 0);
+  background: var(--toastBackground, rgba(66, 66, 66, 0.9));
+  color: var(--toastColor, #fff);
+  box-shadow: var(--toastBoxShadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
+  border: var(--toastBorder, none);
+  border-radius: var(--toastBorderRadius, 0.125rem);
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+  will-change: transform, opacity;
+  -webkit-tap-highlight-color: transparent;
+}
+._toastMsg {
+  padding: var(--toastMsgPadding, 0.75rem 0.5rem);
+  flex: 1 1 0%;
+}
+._toastBar {
+  top: var(--toastBarTop, auto);
+  right: var(--toastBarRight, auto);
+  bottom: var(--toastBarBottom, 0);
+  left: var(--toastBarLeft, 0);
+  height: var(--toastBarHeight, 6px);
+  width: var(--toastBarWidth, 100%);
+  position: absolute;
+  display: block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  background: transparent;
+  pointer-events: none;
+}
+._toastBar::-webkit-progress-bar {
+  background: transparent;
+}
+._toastBar::-webkit-progress-value {
+  background: var(--toastProgressBackground, var(--toastBarBackground, rgba(33, 150, 243, 0.75)));
+}
+._toastBar::-moz-progress-bar {
+  background: var(--toastProgressBackground, var(--toastBarBackground, rgba(33, 150, 243, 0.75)));
+}
+
 html { font-family: PublicSans, sans-serif; }
 
 ::selection { color: black; background: #eaf2ff; }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 704278b6..74bb7ed7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -101,19 +101,13 @@ $effect(() => {
   </main>
 {/if}
 
-<style global>
-  :root {
-    --toastContainerTop: auto;
-    --toastContainerRight: auto;
-    --toastContainerBottom: 8rem;
-    --toastContainerLeft: calc(50vw - 8rem);
-    --toastBackground: #292929;
-
+<style>
+  :global(:root) {
     --safe-area-inset-top: 0px;
     --safe-area-inset-bottom: 0px;
   }
 
-  main {
+  :global(main) {
     padding-top: var(--safe-area-inset-top);
     padding-bottom: var(--safe-area-inset-bottom);
   }
diff --git a/vite.config.js b/vite.config.js
index e54ff9b1..e5cb9a03 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,10 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import tailwindcss from "@tailwindcss/vite";
 import { visualizer } from "rollup-plugin-visualizer";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 
-export default defineConfig(() => {
+export default defineConfig(({ mode }) => {
+	const env = loadEnv(mode, process.cwd(), "");
 	const analyze = process.env.ANALYZE === "true";
 
 	return {
@@ -23,9 +24,8 @@ export default defineConfig(() => {
 	},
 	preview: {
 		allowedHosts: [
-			"coinos.io",
-			"6un2jrlcumn5vduhbq6i3i2wrwiydamwjwop472obg6cy2bfo6ua3oad.onion",
-			"vm7h454g5hiy2nt3u5o7evtz3vigtypo2mkyausakvdkbmd7wpyhx5qd.onion",
+			process.env.PUBLIC_DOMAIN || env.PUBLIC_DOMAIN || "coinos.io",
+			...((process.env.PUBLIC_EXTRA_HOSTS || env.PUBLIC_EXTRA_HOSTS || "").split(",").filter(Boolean)),
 		],
 	},
 	server: {