Docs: Adjustments to code editing

- When entering edit mode, scroll element to center.
- Hide swatches in edit mode and round editor top.
- Scroll results to center on run/cancel.

Author: facelessuser

docs/src/js/extra-notebook.js

@@ -412,6 +412,7 @@ ${content}
         buttonShare.classList.toggle("hidden")
         editor.setValue(editor.getValue())
         editor.focus()
+        pg.scrollIntoView({behavior: "smooth", block: 'center', inline: 'nearest'})
       })
 
       buttonShare.addEventListener("click", async() => {
@@ -473,6 +474,7 @@ ${content}
         buttonCancel.classList.toggle("hidden")
         delete editTemp[currentID]
         busy = false
+        pg.scrollIntoView({behavior: "smooth", block: 'center', inline: 'nearest'})
       })
 
       buttonCancel.addEventListener("click", () => {
@@ -486,6 +488,7 @@ ${content}
         buttonShare.classList.toggle("hidden")
         buttonRun.classList.toggle("hidden")
         buttonCancel.classList.toggle("hidden")
+        pg.scrollIntoView({behavior: "smooth", block: 'center', inline: 'nearest'})
       })
     })
   }

docs/src/scss/_playground.scss

@@ -181,6 +181,8 @@ div.playground {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  border-top-left-radius: convert.px2rem(9.6px);
+  border-top-right-radius: convert.px2rem(9.6px);
 }
 
 .playground-code .highlight code {
@@ -223,6 +225,8 @@ div.playground {
 
 .playground-code:not(.hidden) div.highlight ,
 .hidden .highlight,
+.hidden .swatch-bar,
+.hidden .color-wheel,
 .hidden .playground-inputs {
   display: none;
 }

…ts/coloraide-extras/extra-ebf3a98f4d.css …ts/coloraide-extras/extra-76e8091b4a.cssdocs/theme/assets/coloraide-extras/extra-ebf3a98f4d.css renamed to docs/theme/assets/coloraide-extras/extra-76e8091b4a.css docs/theme/assets/coloraide-extras/extra-ebf3a98f4d.css renamed to docs/theme/assets/coloraide-extras/extra-76e8091b4a.css

@@ -341,15 +341,15 @@ markdown_extensions:
 
 extra_css:
   - assets/pymdownx-extras/extra-0a1087787d.css
-  - assets/coloraide-extras/extra-ebf3a98f4d.css
+  - assets/coloraide-extras/extra-76e8091b4a.css
   - https://cdn.jsdelivr.net/npm/[email protected]/css/ace.css
 extra_javascript:
   - assets/pymdownx-extras/extra-loader-Ccztcqfq.js
   - https://cdn.jsdelivr.net/npm/[email protected]/src-min-noconflict/ace.js
   - https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js
   - playground-config-21defe50.js
   - https://cdn.jsdelivr.net/pyodide/v0.29.0/full/pyodide.js
-  - assets/coloraide-extras/extra-notebook-CKvB0eua.js
+  - assets/coloraide-extras/extra-notebook-qvRCIPPc.js
   - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
 
 extra: