From 03b3120756dcbd38024614f87e3c2561db62bff3 Mon Sep 17 00:00:00 2001
From: sneakers-the-rat <sneakers-the-rat@protonmail.com>
Date: Thu, 30 Jan 2025 22:32:34 -0800
Subject: [PATCH 1/2] Use admonitions to style collapsible cells :)

---
 myst_nb/sphinx_.py        |  6 +--
 myst_nb/static/mystnb.css | 88 +++++++++++++++++++++++----------------
 2 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/myst_nb/sphinx_.py b/myst_nb/sphinx_.py
index 136977ee..67ae7c0c 100644
--- a/myst_nb/sphinx_.py
+++ b/myst_nb/sphinx_.py
@@ -491,10 +491,10 @@ def add_to_app(cls, app: Sphinx):
 
 def visit_HideCellInput(self: SphinxTranslator, node: HideCodeCellNode):
     classes = " ".join(node["classes"])
-    self.body.append(f'<details class="hide {classes}">\n')
+    self.body.append(f'<details class="admonition hide {classes}">\n')
     self.body.append('<summary aria-label="Toggle hidden content">\n')
-    self.body.append(f'<span class="collapsed">{escape(node["prompt_show"])}</span>\n')
-    self.body.append(f'<span class="expanded">{escape(node["prompt_hide"])}</span>\n')
+    self.body.append(f'<p class="collapsed admonition-title">{escape(node["prompt_show"])}</p>\n')
+    self.body.append(f'<p class="expanded admonition-title">{escape(node["prompt_hide"])}</p>\n')
     self.body.append("</summary>\n")
 
 
diff --git a/myst_nb/static/mystnb.css b/myst_nb/static/mystnb.css
index 33566310..d9aa4509 100644
--- a/myst_nb/static/mystnb.css
+++ b/myst_nb/static/mystnb.css
@@ -35,8 +35,7 @@ div.container.cell {
 }
 
 /* Input cells */
-div.cell div.cell_input,
-div.cell details.above-input>summary {
+div.cell > div.cell_input {
   padding-left: 0em;
   padding-right: 0em;
   border: var(--mystnb-source-border-width) var(--mystnb-source-border-color) solid;
@@ -85,57 +84,69 @@ div.cell_output div.output>div.highlight {
   border: 1px solid var(--mystnb-traceback-border-color);
 }
 
-/* Collapsible cell content */
-div.cell details.above-input div.cell_input {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-top: var(--mystnb-source-border-width) var(--mystnb-source-border-color) dashed;
+/* --- Collapsible cell content --- */
+
+/*
+encourage summary container to blend in with its parent.
+p.admonition-title should hold the title styles.
+*/
+div.cell details.hide summary {
+  border-left: unset;
+  padding: inherit;
+  margin: inherit;
+  background-color: inherit;
 }
 
-div.cell div.cell_input.above-output-prompt {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+/* Neighboring input/output elements - spacing, borders */
+div.cell details.hide.above-input + details.below-input,
+div.cell div.cell_input + details.below-input
+{
+  margin-top: 0;
+}
+
+div.cell details.hide.above-input:has(+ details.below-input),
+div.cell div.cell_input:has(+ details.below-input)
+{
+  margin-bottom: 0;
 }
 
-div.cell details.above-input>summary {
+div.cell:has(> *:nth-child(2)) div.cell_input:first-child,
+div.cell:has(> *:nth-child(2)) details:first-child
+{
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  border-bottom: var(--mystnb-source-border-width) var(--mystnb-source-border-color) dashed;
-  padding-left: 1em;
-  margin-bottom: 0;
 }
 
-div.cell details.above-output>summary {
-  background-color: var(--mystnb-source-bg-color);
-  padding-left: 1em;
-  padding-right: 0em;
-  border: var(--mystnb-source-border-width) var(--mystnb-source-border-color) solid;
-  border-radius: var(--mystnb-source-border-radius);
-  border-left-color: var(--mystnb-source-margin-color);
-  border-left-width: medium;
+div.cell:has(> *:nth-child(2)) div.cell_input:last-child,
+div.cell:has(> *:nth-child(2)) details:last-child
+{
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
-div.cell details.below-input>summary {
-  background-color: var(--mystnb-source-bg-color);
-  padding-left: 1em;
-  padding-right: 0em;
-  border: var(--mystnb-source-border-width) var(--mystnb-source-border-color) solid;
-  border-top: none;
-  border-bottom-left-radius: var(--mystnb-source-border-radius);
-  border-bottom-right-radius: var(--mystnb-source-border-radius);
-  border-left-color: var(--mystnb-source-margin-color);
-  border-left-width: medium;
+/* intra-label styles for collapsibles */
+div.cell.container details.hide.above-input>summary,
+div.cell.container details.hide.below-input>summary,
+div.cell.container details.hide.above-output>summary
+{
+  display: block;
+  border-left: none;
 }
 
-div.cell details.hide>summary>span {
-  opacity: var(--mystnb-hide-prompt-opacity);
+div.cell details.hide>summary>p.admonition-title {
+  display: list-item;
+  margin-bottom: 0;
 }
 
-div.cell details.hide[open]>summary>span.collapsed {
+div.cell details.hide:not([open]) {
+  padding-bottom: 0;
+}
+
+div.cell details.hide[open]>summary>p.collapsed {
   display: none;
 }
 
-div.cell details.hide:not([open])>summary>span.expanded {
+div.cell details.hide:not([open])>summary>p.expanded {
   display: none;
 }
 
@@ -154,6 +165,11 @@ div.cell details.hide[open]>summary~* {
   animation: collapsed-fade-in 0.3s ease-in-out;
 }
 
+/* Clear conflicting styles for details and admonitions set by some themes */
+div.cell details.admonition summary::before {
+  content: unset;
+}
+
 /* Math align to the left */
 .cell_output .MathJax_Display {
   text-align: left !important;

From 3f5ee686c9e0fd1a2bd6604598d3e89d705822c7 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Fri, 31 Jan 2025 07:18:46 +0000
Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 myst_nb/sphinx_.py | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/myst_nb/sphinx_.py b/myst_nb/sphinx_.py
index 67ae7c0c..96376916 100644
--- a/myst_nb/sphinx_.py
+++ b/myst_nb/sphinx_.py
@@ -493,8 +493,12 @@ def visit_HideCellInput(self: SphinxTranslator, node: HideCodeCellNode):
     classes = " ".join(node["classes"])
     self.body.append(f'<details class="admonition hide {classes}">\n')
     self.body.append('<summary aria-label="Toggle hidden content">\n')
-    self.body.append(f'<p class="collapsed admonition-title">{escape(node["prompt_show"])}</p>\n')
-    self.body.append(f'<p class="expanded admonition-title">{escape(node["prompt_hide"])}</p>\n')
+    self.body.append(
+        f'<p class="collapsed admonition-title">{escape(node["prompt_show"])}</p>\n'
+    )
+    self.body.append(
+        f'<p class="expanded admonition-title">{escape(node["prompt_hide"])}</p>\n'
+    )
     self.body.append("</summary>\n")