From dc2d9de2a442ebea1e10ab28e55b1a2c9794dc70 Mon Sep 17 00:00:00 2001
From: KenanZhu <3471685733@qq.com>
Date: Thu, 4 Jun 2026 14:34:08 +0800
Subject: [PATCH] style(preview): ultra-thin immersive scrollbars

- Global scrollbar: 3px wide, transparent track, 6% white thumb
  that brightens to 15% on hover. Firefox thin scrollbar via
  scrollbar-width:thin. Practically invisible unless needed.
- Iframe content: inject matching scrollbar CSS into every
  rendered email template so the email preview itself has
  the same subtle scrollbar treatment.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 preview/index.html | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/preview/index.html b/preview/index.html
index ddd4c65..014bd13 100644
--- a/preview/index.html
+++ b/preview/index.html
@@ -74,9 +74,14 @@ body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:v
 .message-error{background:rgba(248,113,113,0.08);color:rgba(248,113,113,0.75);border-color:rgba(248,113,113,0.15)}
 .message code{background:rgba(0,0,0,0.12);padding:1px 6px;border-radius:3px}
 
-#panel::-webkit-scrollbar{width:4px}
-#panel::-webkit-scrollbar-track{background:transparent}
-#panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
+/* Scrollbar — ultra-thin, barely visible, immersive */
+::-webkit-scrollbar{width:3px;height:3px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:3px}
+::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.15)}
+::-webkit-scrollbar-corner{background:transparent}
+/* Firefox */
+*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent}
 
 @media(max-width:850px){#panel{display:none}#topbar .hint{display:none}}
 </style>
@@ -183,8 +188,10 @@ function render() {
   frame.style.display = 'none';
   loading.style.display = 'flex';
 
-  const html = rendered[state.theme]?.[state.template];
-  const content = html ? transform(html, state.client) : '<p style="color:red;padding:20px">Not found: '+state.theme+'/'+state.template+'</p>';
+  const raw = rendered[state.theme]?.[state.template];
+  let content = raw ? transform(raw, state.client) : '<p style=\"color:red;padding:20px\">Not found: '+state.theme+'/'+state.template+'</p>';
+  // Inject invisible scrollbar into iframe content for immersive preview
+  content = content.replace('</head>', '<style>html{scrollbar-width:thin;scrollbar-color:#fff1 transparent}html::-webkit-scrollbar{width:3px;height:3px}html::-webkit-scrollbar-track{background:transparent}html::-webkit-scrollbar-thumb{background:rgba(0,0,0,.08);border-radius:3px}html::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.2)}</style></head>');
 
   frame.onload = function() {
     loading.style.display = 'none';