book/super-example: update styling

* Reduce padding.

* Make corners square.

* Make copy button fully opaque when visible.

Author: nwt

book/copy-button/copy-button.css

@@ -1,19 +1,12 @@
 pre:has(> code),
 .editor {
   position: relative;
-  &:hover,
-  &:focus-within {
-    & .copy-button {
-      opacity: 0.3;
-    }
-  }
 }
 
 .copy-button {
   align-items: center;
-  background: none;
+  background-color: var(--bg);
   border-color: var(--fg);
-  border-radius: 4px;
   border-style: solid;
   border-width: 1px;
   color: var(--fg);
@@ -29,10 +22,10 @@ pre:has(> code),
   padding-inline: 0.3em;
   padding: 0.5em 1em;
   position: absolute;
-  right: clamp(0.875rem, 0.8487rem + 0.1316vi, 0.9375rem);
+  right: 0.5em;
   text-decoration: none;
   text-transform: uppercase;
-  top: clamp(0.5625rem, 0.5362rem + 0.1316vi, 0.625rem);
+  top: 0.5em;
   transition-duration: 300ms;
   white-space: nowrap;
 
@@ -47,9 +40,6 @@ pre:has(> code),
   }
 
   &[aria-pressed='true'] {
-    background-color: var(--bg);
-    border-color: var(--bg);
-    color: var(--fg);
     display: block;
     opacity: 1;
   }

book/super-example/super-example.css

@@ -4,7 +4,6 @@
   --color-text-code: var(--fg);
   --color-text-meta: var(--fg);
   --label-size: 1rem;
-  --radius: 16px;
   --space-2xs: clamp(0.5625rem, 0.5362rem + 0.1316vi, 0.625rem);
   --space-s: clamp(1.125rem, 1.0724rem + 0.2632vi, 1.25rem);
 
@@ -16,7 +15,6 @@
   grid-template-areas:
     'query query'
     'input result';
-  border-radius: var(--radius);
 
   &[data-layout~='no-labels'] {
     label {
@@ -59,7 +57,6 @@
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     grid-template-rows: min-content auto;
-    padding-block-start: 1em;
 
     & header {
       align-items: end;
@@ -93,7 +90,7 @@
     overflow: auto;
     max-height: 40rem;
     scrollbar-color: var(--color-text-meta) var(--color-bg-code);
-    padding-block: 0.75em;
+    padding-block: 0.2em;
   }
 
   & .cm-selectionBackground {