style: show copy btn only on code block hover

prettier · Jan 11, 2023 · 92229e7 · 92229e7
1 parent a2f3b01
commit 92229e7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/website/static/css/code-block-buttons.css b/website/static/css/code-block-buttons.css
@@ -5,23 +5,31 @@ pre {
 
 pre .btnIcon {
   position: absolute;
-  top: 4px;
+  top: -5px;
+  right: 16px;
   z-index: 2;
   cursor: pointer;
   border: 1px solid transparent;
   padding: 0;
   background-color: transparent;
   height: 30px;
   transition: all 0.25s ease-out;
+  display: none;
 }
 
 pre .btnIcon:hover {
   text-decoration: none;
+  display: block;
+}
+
+pre code[class*="language-"]:hover + .btnIcon {
+  display: block;
 }
 
 .btnIcon__body {
   align-items: center;
   display: flex;
+  color: #535b64;
 }
 
 .btnIcon svg {

diff --git a/website/static/overrides.css b/website/static/overrides.css
@@ -523,7 +523,7 @@ a {
 }
 
 .hljs {
-  padding: 1.5em;
+  padding: 16px;
   overflow: auto;
   font-size: 13.6px;
   line-height: 1.45;