KenanZhu/GiteaMailTemplates
1
1 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

style(preview): ultra-thin immersive scrollbars

Browse Source 
- 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>
This commit is contained in:
KenanZhuandClaude Opus 4.8 committed 2026-06-04 14:34:08 +08:00
1 parent 39af7f7729
commit dc2d9de2a4
1 file changed
+12 -5
Download Patch File Download Diff File Expand all files Collapse all files
preview/index.html
+12 -5
View File
@@ -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-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} .message code{background:rgba(0,0,0,0.12);padding:1px 6px;border-radius:3px}
#panel::-webkit-scrollbar{width:4px} /* Scrollbar — ultra-thin, barely visible, immersive */
#panel::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar{width:3px;height:3px}
#panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px} ::-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}} @media(max-width:850px){#panel{display:none}#topbar .hint{display:none}}
</style> </style>
@@ -183,8 +188,10 @@ function render() {
frame.style.display = 'none'; frame.style.display = 'none';
loading.style.display = 'flex'; loading.style.display = 'flex';
const html = rendered[state.theme]?.[state.template]; const raw = 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>'; 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() { frame.onload = function() {
loading.style.display = 'none'; loading.style.display = 'none';