feat: 调整tooxbox样式

GaiZhenbiao · Dec 14, 2023 · 13a85fd · 13a85fd
1 parent 8246d1e
commit 13a85fd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/web_assets/stylesheet/ChuanhuChat.css b/web_assets/stylesheet/ChuanhuChat.css
@@ -112,7 +112,7 @@ body.popup-open {
 .insert-block {
     position: relative;
     margin: 0;
-    padding: 8px 12px;
+    padding: 8px 0;
     box-shadow: var(--block-shadow);
     border-width: var(--block-border-width);
     border-color: var(--block-border-color);
@@ -892,9 +892,10 @@ input:checked + .chatbot-input-more-span {
         height: calc(100% - 35px);
         overflow-y: auto;
         border-style: none;
-        padding: 0;
+        padding-block: 0;
+        padding-left: 4px;
         /* 理论上不该是0，但这里考虑内部gradio有好多container有padding了 */
-        padding-right: env(safe-area-inset-right);
+        padding-right: max(4px, env(safe-area-inset-right));
     }
     #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav {
         display: flex;
@@ -946,17 +947,26 @@ input:checked + .chatbot-input-more-span {
     理论上不该是0，但这里考虑内部gradio有好多container有padding了 
 } 
 */
-#toolbox-area .tabitem > div > .gradio-markdown {
+#toolbox-area .tabitem > div > .gradio-markdown:not(.hr-line) {
     padding: 12px;
 }
 
+/* #toolbox-area .tabitem > div > .gradio-accordion > .label-wrap {
+    padding-inline: 12px;
+} */
 #toolbox-area .tabitem > div > .gradio-accordion > .label-wrap > span {
     font-weight: bold;
 }
 #toolbox-area .tabitem > div {
     gap: 0 !important;
 }
 
+#toolbox-area .tabitem > div > .gradio-accordion > div div.block.padded {
+    padding-inline: 0 !important;
+}
+#toolbox-area .tabitem > div > .gradio-accordion > div > div.gap{
+    gap: 0 !important;
+}
 /* #chuanhu-popup ul.options {
     transform: translate(-50%, -50%);
 } */

diff --git a/web_assets/stylesheet/custom-components.css b/web_assets/stylesheet/custom-components.css
@@ -266,10 +266,16 @@ input:checked + .apSlider::before {
     z-index: 1;
 } */
 
-
+.hr-line .hr-line {
+    padding: 4px 12px 8px 12px !important;
+    /* opacity: 40%; */
+}
 .hr-line hr{
     margin: 0 !important;
 }
+.dark .hr-line hr {
+    opacity: 40%;
+}
 
 .tooltip-toggle {
     cursor: help;