Refine UI (#14)

- Refine UI (956cc828365c83ba99adaca104558eda8b954081)


Co-authored-by: Kai <kai-aizip@users.noreply.huggingface.co>

static/styles.css

@@ -85,12 +85,10 @@ body, .gradio-container {
 
 .tabitem {
     border: none !important;
-    padding: 20px 10px !important;
 }
 
 #query-title-row {
     margin: 0 !important;
-    padding: 0 10px !important;
     display: flex !important;
     align-items: center !important;
     overflow: visible !important;
@@ -117,7 +115,6 @@ body, .gradio-container {
     display: flex !important;
     align-items: stretch !important;
     gap: 10px !important;
-    margin: 0 10px 8px 10px !important;
     overflow: visible !important;
 }
 
@@ -165,8 +162,6 @@ body, .gradio-container {
 
 .context-description {
     background-color: transparent !important;
-    padding: 0 15px !important;
-    margin: 0 0 15px 0 !important;
     font-style: normal !important;
     color: var(--text-medium) !important;
     font-size: 1.05em !important;
@@ -215,8 +210,6 @@ body, .gradio-container {
     display: flex !important;
     justify-content: space-between !important;
     align-items: center !important;
-    margin-bottom: 8px !important;
-    padding: 0 10px !important;
 }
 
 .context-title {
@@ -394,7 +387,7 @@ body, .gradio-container {
     background-color: transparent !important;
     border: none !important;
     color: var(--text-dark) !important;
-    font-size: 1em !important;
+    font-size: 1.1em !important;
     line-height: 1.4 !important;
     height: auto !important;
     min-height: 150px !important;
@@ -475,7 +468,7 @@ body, .gradio-container {
     margin-top: 3px !important;
     margin-bottom: 3px !important;
     font-size: 1em;
-    border: none !important;
+border: none !important;
     box-shadow: none !important;
 }
 
@@ -665,12 +658,12 @@ hr {
     padding-bottom: 0 !important;
 }
 
-.gradio-container {
-    padding: 0 !important;
+.gradio-markdown p {
+    margin-bottom: 0.5em !important;
 }
 
-#main-interface-area > div {
-    margin-bottom: 4px !important;
+.gradio-container {
+    padding: 0 !important;
 }
 
 @media screen and (max-width: 768px) {
@@ -851,4 +844,12 @@ hr {
     color: var(--text-medium, #666666);
     font-size: 0.9em;
     font-weight: normal;
-}
+}
+
+.html-container.svelte-phx28p.padding {
+    padding: 0 !important; /* Remove the padding completely */
+}
+
+span.svelte-7ddecg p:not(:first-child) {
+    margin-top: 0 !important;
+  }