website_next: part 5

website_next/wallets/wallet/receive/style.css

@@ -1,40 +1,76 @@
 main[data-page="wallets"] {
   dialog[data-wallet="receive"] {
-    width: min(100% - 2rem, 32rem);
+    --dialog-space: 1rem;
+
+    width: min(100% - 2rem, 10rem);
+    border-radius: 0.125rem;
 
     > article {
+      position: relative;
       display: grid;
-      gap: 1rem;
+      gap: 0.375rem;
+      cursor: pointer;
 
-      > h2 {
-        margin: 0;
-        font-size: var(--font-size-lg);
-        font-weight: var(--font-weight-regular);
-        line-height: var(--line-height-lg);
+      &:focus-visible {
+        outline: 2px solid var(--orange);
+        outline-offset: 0.25rem;
+      }
+
+      &::after {
+        content: "Copied";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        color: var(--black);
+        font-size: var(--font-size-sm);
+        opacity: 0;
+        pointer-events: none;
+        translate: -50% calc(-50% + 0.25rem);
+        transition:
+          opacity 150ms ease,
+          translate 150ms ease;
+        text-transform: uppercase;
+      }
+
+      &[data-copied]::after {
+        opacity: 1;
+        translate: -50% -50%;
+      }
+
+      &[data-copied] > * {
+        opacity: 0.1;
       }
 
       > img {
         justify-self: center;
-        width: min(100%, 18rem);
+        width: 100%;
         aspect-ratio: 1;
-        padding: 1rem;
         background: var(--white);
         image-rendering: pixelated;
       }
 
+      > img,
       > p {
-        margin: 0;
-        font-size: var(--font-size-sm);
-        line-height: var(--line-height-sm);
+        transition: opacity 150ms ease;
       }
 
-      > footer {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-        justify-content: end;
-        > form {
-          margin: 0;
+      > p {
+        margin: 0;
+        font-size: var(--font-size-xs);
+        font-style: italic;
+        line-height: var(--line-height-xs);
+
+        [data-wallet="address"] {
+          max-width: 100%;
+          gap: 0 0.25rem;
+
+          > span {
+            color: var(--black);
+
+            > var {
+              color: color-mix(in oklch, var(--black) 75%, var(--gray));
+            }
+          }
         }
       }
     }