:root { --code-border: color-mix(in srgb, var(--foreground) 10%, transparent); } pre:not(.chroma) { margin: 20px 0; padding: 10px; } pre.chroma { margin: 0; padding: 10px 0; color: var(--foreground); } pre code { color: var(--foreground); border: none; } code { color: var(--accent); } .highlight { position: relative; padding-top: 30px; margin: 20px 0; border: 1px solid var(--code-border); } .highlight pre { border: none; } .chroma code[data-lang]:before { content: attr(data-lang); position: absolute; top: 0; left: 0; right: 0; bottom: auto; height: 30px; display: flex; align-items: center; background: color-mix(in srgb, var(--foreground) 5%, transparent); border-bottom: 1px solid var(--code-border); color: var(--comment); text-transform:uppercase; font-size: .8em; padding: 0 10px; line-height: 1; } .collapsable-code { position: relative; width: 100%; margin: 20px 0; border: 1px solid var(--accent); .highlight { margin: 0; } } .collapsable-code__title { display: inline-flex; align-items: center; flex: 1; color: var(--accent); padding: 3px 10px; font-size: .9em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .collapsable-code__language { color: var(--accent); border: 1px solid var(--accent); border-bottom: none; text-transform: uppercase; padding: 3px 10px; } .collapsable-code summary { color: var(--accent); padding: 0 10px; cursor: pointer; } .collapsable-code summary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .collapsable-code summary::marker { /* content: "+"; */ font-weight: bold; } .collapsable-code[open] summary::marker { /* content: "-"; */ } .collapsable-code pre { margin-top: 0; } .collapsable-code pre::first-line { line-height: 0; } .chroma .copy-button { display: none; position: absolute; right: 0; bottom: 0; margin: .5em; z-index: 1; background: color-mix(in srgb, var(--foreground) 5%, var(--background)); } .chroma:hover .copy-button { display: inline-block; } .chroma .copy-button:hover { background: color-mix(in srgb, var(--accent) 10%, var(--background)); }