From fd0dde1b0861d5fa403a90697999693be10eb445 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 6 May 2023 13:28:06 -0500
Subject: [PATCH] Accordion styles

---
 src/lib/components/AccordionContainer.svelte | 10 ++-
 src/scss/ux.scss                             | 64 +++++++++++++-------
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/AccordionContainer.svelte b/src/lib/components/AccordionContainer.svelte
index 62b9926..8a0027c 100644
--- a/src/lib/components/AccordionContainer.svelte
+++ b/src/lib/components/AccordionContainer.svelte
@@ -55,7 +55,7 @@
          class:is-executing={container.isNodeExecuting}
          class:edit={edit}>
         {#if edit}
-            <Block>
+            <Block elem_classes={["gradio-accordion"]}>
                 <Accordion label={container.attrs.title} open={true}>
                     <div class="v-pane"
                          class:empty={children.length === 0}
@@ -94,7 +94,7 @@
                 </Accordion>
             </Block>
         {:else}
-            <Block>
+            <Block elem_classes={["gradio-accordion"]}>
                 <Accordion label={container.attrs.title} open={container.attrs.openOnStartup}>
                     {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
                         <WidgetContainer dragItem={item} zIndex={zIndex+1} />
@@ -189,4 +189,10 @@
  .container.selected > :global(.block) {
      background: var(--color-yellow-300);
  }
+
+ .gradio-accordion {
+     .widget, .container {
+         padding: 5px;
+     }
+ }
 </style>
diff --git a/src/scss/ux.scss b/src/scss/ux.scss
index 2d3afc3..b5943b4 100644
--- a/src/scss/ux.scss
+++ b/src/scss/ux.scss
@@ -265,36 +265,58 @@ div.float {
     }
 }
 
- .category-name {
+.category-name {
     background: var(--ae-panel-bg-color) !important;
     border-color: var(--ae-panel-border-color) !important;
 
     .title, .type {
         color: var(--ae-label-color)
     }
- }
+}
 
- .props-entry {
-     border-width: 1px;
-     border-left: 1px var(--ae-panel-border-color) !important;
-     border-right: 1px var(--ae-panel-border-color) !important;
- }
+.props-entry {
+    border-width: 1px;
+    border-left: 1px var(--ae-panel-border-color) !important;
+    border-right: 1px var(--ae-panel-border-color) !important;
+}
 
-// .container > .block {
-//     box-shadow: none !important;
-//     border-color: var(--ae-panel-border-color) !important;
-//     border-radius: 0 !important;
-//     background: var(--ae-input-bg-color) !important;
+/**************/
+/* Accordions */
+/**************/
 
-//     > .v-pane {
-//         box-shadow: none !important;
-//         border-color: var(--ae-panel-border-color) !important;
-//         border-radius: 0 !important;
-//         background: var(--ae-input-bg-color) !important;
-//     }
-// }
+.block.gradio-accordion {
+	background-color: var(--ae-main-bg-color) !important;
+	/*padding-bottom: 0 !important;*/
+}
 
-.block.gradio-accordion:hover .label-wrap {
+.block.gradio-accordion:has(.label-wrap:hover) {
+	border-color: var(--ae-primary-color) !important;
+}
+
+.block.gradio-accordion .label-wrap {
+	margin: calc(-1px + var(--ae-inside-padding-size) * -1);
+    width: auto;
+	padding: var(--ae-accordion-vertical-padding) var(--ae-accordion-horizontal-padding);
+	border-radius: var(--ae-panel-border-radius);
+	line-height: var(--ae-accordion-line-height);
+	color: var(--ae-label-color);
+	/*pointer-events: none !important;*/
+}
+.block.gradio-accordion .hide + .open.label-wrap {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+.block.gradio-accordion .label-wrap.open {
+	margin-bottom: calc(var(--ae-inside-padding-size) / 2);
+}
+.edit > .block.gradio-accordion .label-wrap.open {
+	margin-bottom: var(--ae-inside-padding-size);
+}
+.block.gradio-accordion > .gap.svelte-vt1mxs > div:first-child {
+	margin-top: calc(var(--ae-inside-padding-size) * 2) !important;
+}
+
+.block.gradio-accordion .label-wrap:hover {
 	color: var(--ae-main-bg-color) !important;
 	background-color: var(--ae-primary-color) !important;
 }
@@ -308,9 +330,9 @@ div.float {
 	left: 0 !important;
     top: 0 !important;
     opacity: 0 !important;
-
 }
 
+
 .form>.gradio-row>.form{
 	border:0 !important;
 }