From 21d4c174444a27da4f2efd76fff3e27a886775bc Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Wed, 15 Apr 2026 20:01:42 -0700
Subject: [PATCH] UI: Fix code block copy button centering and light/dark mode
colors
---
css/highlightjs/highlightjs-copy.min.css | 74 +++++++++++++++++++++++-
1 file changed, 73 insertions(+), 1 deletion(-)
diff --git a/css/highlightjs/highlightjs-copy.min.css b/css/highlightjs/highlightjs-copy.min.css
index 5a94fece..473ba4e5 100644
--- a/css/highlightjs/highlightjs-copy.min.css
+++ b/css/highlightjs/highlightjs-copy.min.css
@@ -1 +1,73 @@
-.hljs-copy-wrapper{position:relative;overflow:hidden}.hljs-copy-wrapper:hover .hljs-copy-button,.hljs-copy-button:focus{transform:translateX(0)}.hljs-copy-button{position:absolute;transform:translateX(calc(100% + 1.125em));top:1em;right:1em;width:2rem;height:2rem;text-indent:-9999px;color:#fff;border-radius:.25rem;border:1px solid #ffffff22;background-color:#2d2b57;background-color:var(--hljs-theme-background);background-image:url('data:image/svg+xml;utf-8,');background-repeat:no-repeat;background-position:center;transition:background-color 200ms ease,transform 200ms ease-out}.hljs-copy-button:hover{border-color:#ffffff44}.hljs-copy-button:active{border-color:#ffffff66}.hljs-copy-button[data-copied="true"]{text-indent:0;width:auto;background-image:none}@media(prefers-reduced-motion){.hljs-copy-button{transition:none}}.hljs-copy-alert{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
+.hljs-copy-wrapper {
+ position: relative;
+ overflow: hidden;
+ min-height: 3em;
+}
+
+.hljs-copy-wrapper:hover .hljs-copy-button,
+.hljs-copy-button:focus {
+ transform: translateX(0);
+}
+
+.hljs-copy-button {
+ position: absolute;
+ transform: translateX(calc(100% + 1.125em));
+ top: min(1em, calc(50% - 1rem));
+ right: 1em;
+ width: 2rem;
+ height: 2rem;
+ text-indent: -9999px;
+ color: #1f2328;
+ border-radius: .25rem;
+ border: 1px solid #1f232822;
+ background-color: #2d2b57;
+ background-color: var(--hljs-theme-background);
+ background-image: url('data:image/svg+xml;utf-8,');
+ background-repeat: no-repeat;
+ background-position: center;
+ transition: background-color 200ms ease, transform 200ms ease-out;
+}
+
+.hljs-copy-button:hover {
+ border-color: #1f232844;
+}
+
+.hljs-copy-button:active {
+ border-color: #1f232866;
+}
+
+.dark .hljs-copy-button {
+ color: #fff;
+ border-color: #ffffff22;
+ background-image: url('data:image/svg+xml;utf-8,');
+}
+
+.dark .hljs-copy-button:hover {
+ border-color: #ffffff44;
+}
+
+.dark .hljs-copy-button:active {
+ border-color: #ffffff66;
+}
+
+.hljs-copy-button[data-copied="true"] {
+ text-indent: 0;
+ width: auto;
+ background-image: none;
+}
+
+@media(prefers-reduced-motion) {
+ .hljs-copy-button {
+ transition: none;
+ }
+}
+
+.hljs-copy-alert {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}