1@use "../theme" as *;
2@use "../vars" as v;
3
4.highlight, pre:not(.chroma) { @include terminal-panel; box-sizing: border-box; max-width: 100%; overflow-x: auto; overflow-y: hidden; white-space: pre; color: theme(code); padding: 1rem 1.25rem; font-size: 0.875rem; line-height: 1.6; font-family: v.$font-mono; scrollbar-width: none; transition: border-color 0.15s ease; }
5.highlight::-webkit-scrollbar, pre:not(.chroma)::-webkit-scrollbar { display: none; }
6@media (hover: hover) {
7 .highlight:hover, pre:not(.chroma):hover { border-color: color-mix(in srgb, theme(accent) 55%, theme(border)); }
8}
9.highlight { padding: 0; }
10.highlight pre { box-sizing: border-box; margin: 0; padding: 1rem 1.25rem; }
11.code-wrap { position: relative; }
12.copy-btn {
13 @include terminal-panel;
14 position: absolute; top: 0.5rem; right: 0.5rem;
15 padding: 0.2rem 0.5rem; font-size: 0.7rem; font-family: "Silkscreen", monospace;
16 color: theme(muted); cursor: pointer;
17 transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
18}
19.copy-btn:hover, .copy-btn:focus-visible { color: theme(accent); border-color: color-mix(in srgb, theme(accent) 55%, theme(border)); }
20
21@media (hover: hover) {
22 .copy-btn { opacity: 0; }
23 .code-wrap:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
24}
25@media (hover: none) {
26 .copy-btn { display: none; }
27}
28
29// Small "Copied!" popup for RSS feed links (see copy.js initFeedCopy).
30.copy-tooltip {
31 @include terminal-panel;
32 position: absolute; bottom: 100%; left: 50%;
33 margin-bottom: 0.35rem;
34 padding: 0.2rem 0.5rem;
35 font-size: 0.7rem; font-family: "Silkscreen", monospace; white-space: nowrap;
36 color: theme(text);
37 opacity: 0;
38 transform: translate(-50%, 4px);
39 transition: opacity 0.15s ease, transform 0.15s ease;
40 pointer-events: none;
41}
42.copy-tooltip.is-visible { opacity: 1; transform: translate(-50%, 0); }
43
44:not(pre) > code { font-size: 0.85em; background: theme(border); color: theme(code); padding: 0.2em 0.4em; border-radius: 0.25rem; font-family: v.$font-mono; }
45
46.highlight code, pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: inherit; line-height: inherit; }