Skip to content

Commit 2d8f5c4

Browse files
leejh08claude
andcommitted
fix: use :global() for copy button CSS to fix Astro scoping
Dynamically created elements don't receive Astro scope attributes, so copy button styles were not applied. Wrapping in :global() fixes this. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 3837324 commit 2d8f5c4

1 file changed

Lines changed: 9 additions & 9 deletions

File tree

site/src/pages/index.astro

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -319,9 +319,9 @@ const keywords = [
319319
.c-key { color: var(--accent2); }
320320
.c-str { color: var(--green); }
321321

322-
/* ── Copy button ── */
323-
.code-block { position: relative; }
324-
.copy-btn {
322+
/* ── Copy button (global: JS-created elements don't get Astro scope attr) ── */
323+
:global(.code-block) { position: relative; }
324+
:global(.copy-btn) {
325325
position: absolute;
326326
top: 10px;
327327
right: 10px;
@@ -335,14 +335,14 @@ const keywords = [
335335
border-radius: 7px;
336336
color: var(--muted);
337337
cursor: pointer;
338-
transition: background 0.15s, color 0.15s, border-color 0.15s;
338+
transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
339339
padding: 0;
340+
opacity: 0;
340341
}
341-
.copy-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
342-
.copy-btn { opacity: 0; }
343-
.code-block:hover .copy-btn { opacity: 1; }
344-
.copy-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); border-color: #2a2a3a; }
345-
.copy-btn.copied { opacity: 1; color: var(--green); border-color: var(--green); background: rgba(74,222,128,0.08); }
342+
:global(.copy-btn svg) { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
343+
:global(.code-block:hover .copy-btn) { opacity: 1; }
344+
:global(.copy-btn:hover) { background: rgba(255,255,255,0.08); color: var(--text); border-color: #2a2a3a; }
345+
:global(.copy-btn.copied) { opacity: 1; color: var(--green); border-color: var(--green); background: rgba(74,222,128,0.08); }
346346

347347
/* ── Footer ── */
348348
footer {

0 commit comments

Comments
 (0)