From dc006f1793f69de1dbc53e8f6adf9a7c87c23953 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Wed, 26 Mar 2025 13:25:01 -0700
Subject: [PATCH 1/3] feat: Add styling to codeblock copy button

---
 assets/css/v2/style.css   | 14 ++++++++------
 assets/js/code-copy-v2.js |  2 ++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 159e8b8..b86aaaa 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -18,6 +18,7 @@
   --color-background: #ffffff;
   --color-foreground: #000000;
   --color-shadow: #d2d2d2;
+  --color-codeblock-shadow: #d2d2d2;
   --color-footer: #1d1d1d;
   --color-footer-text: #e2e2e2;
   --color-product-title: #8d8d8d;
@@ -1144,27 +1145,28 @@ li .code-block {
 }
 
 .code-copy-button {
-  background-color: #f2f2f2;
-  border: none;
+  background-color: white;
+  border: 1px solid black;
   padding: 5px 10px;
   cursor: pointer;
   font-family: "JetBrains Mono", monospace;
   font-size: 12px;
   color: #000;
-  display: none;
+  /* display: none; */
   position: absolute;
   margin-top: 8px;
   right: 1rem;
-  z-index: 2;
+  --color-codeblock-shadow: #d2d2d2;
+  box-shadow: 0px 2px 0px var(--color-codeblock-shadow);
 }
 
 .code-copy-button:hover {
-  background-color: #e0e0e0;
+  --color-codeblock-shadow: #0096394d;
 }
 
 .code-copy-button:focus {
   outline: none;
-  box-shadow: 0 0 2px 2px #a5a5a5;
+  --color-codeblock-shadow: #009639;
 }
 
 .next-prev-icon {
diff --git a/assets/js/code-copy-v2.js b/assets/js/code-copy-v2.js
index 023032a..306a7e7 100644
--- a/assets/js/code-copy-v2.js
+++ b/assets/js/code-copy-v2.js
@@ -26,6 +26,7 @@ const copyToClipBoard = ((clipboard) => async (button, codeBlockId) => {
 
 const updateButtonState = (button, message, revertDelay, disable = false) => {
   button.innerHTML = message;
+  $(button).css('box-shadow', '0px 2px 0px #009639');
 
   if (disable) {
     button.disabled = true;
@@ -34,6 +35,7 @@ const updateButtonState = (button, message, revertDelay, disable = false) => {
   if (revertDelay) {
     setTimeout(() => {
       button.innerHTML = 'Copy';
+      $(button).css('box-shadow', '0px 2px 0px var(--color-codeblock-shadow)');
       button.disabled = false;
     }, revertDelay);
   }

From 2c4525fb4bafd0b0bf93de220e35a95d6b943eef Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Thu, 27 Mar 2025 14:28:00 +0000
Subject: [PATCH 2/3] CodeCopy: Use oklch colors, change font

Tweak active state to pure css
---
 assets/css/v2/style.css   | 13 ++++++-------
 assets/js/code-copy-v2.js |  2 --
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index b86aaaa..1a069df 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1147,26 +1147,25 @@ li .code-block {
 .code-copy-button {
   background-color: white;
   border: 1px solid black;
-  padding: 5px 10px;
+  padding: 4px 6px;
   cursor: pointer;
-  font-family: "JetBrains Mono", monospace;
   font-size: 12px;
   color: #000;
-  /* display: none; */
+  display: none;
   position: absolute;
   margin-top: 8px;
   right: 1rem;
-  --color-codeblock-shadow: #d2d2d2;
-  box-shadow: 0px 2px 0px var(--color-codeblock-shadow);
+  --color-codeblock-shadow: 0% 0 0;
+  box-shadow: 0px 2px 0px oklch(var(--color-codeblock-shadow) / 0.15);
 }
 
 .code-copy-button:hover {
-  --color-codeblock-shadow: #0096394d;
+  box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.3);
 }
 
 .code-copy-button:focus {
   outline: none;
-  --color-codeblock-shadow: #009639;
+  box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.8);
 }
 
 .next-prev-icon {
diff --git a/assets/js/code-copy-v2.js b/assets/js/code-copy-v2.js
index 306a7e7..023032a 100644
--- a/assets/js/code-copy-v2.js
+++ b/assets/js/code-copy-v2.js
@@ -26,7 +26,6 @@ const copyToClipBoard = ((clipboard) => async (button, codeBlockId) => {
 
 const updateButtonState = (button, message, revertDelay, disable = false) => {
   button.innerHTML = message;
-  $(button).css('box-shadow', '0px 2px 0px #009639');
 
   if (disable) {
     button.disabled = true;
@@ -35,7 +34,6 @@ const updateButtonState = (button, message, revertDelay, disable = false) => {
   if (revertDelay) {
     setTimeout(() => {
       button.innerHTML = 'Copy';
-      $(button).css('box-shadow', '0px 2px 0px var(--color-codeblock-shadow)');
       button.disabled = false;
     }, revertDelay);
   }

From 71ce6110cd1486d05376d24bc61cf8c3f62ad397 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Thu, 27 Mar 2025 07:37:54 -0700
Subject: [PATCH 3/3] fix: Added z-index to copy button

---
 assets/css/v2/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 1a069df..1a5c100 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1155,6 +1155,7 @@ li .code-block {
   position: absolute;
   margin-top: 8px;
   right: 1rem;
+  z-index: 1;
   --color-codeblock-shadow: 0% 0 0;
   box-shadow: 0px 2px 0px oklch(var(--color-codeblock-shadow) / 0.15);
 }