Update light_mode_chatter_owl.css

light_mode_chatter_owl.css

@@ -199,6 +199,98 @@ h1, h2 {
   box-shadow: var(--shadow);
 }
 
+:root {
+    --primary-color: #FFA726;
+    --text-color: #333333;
+    --bg-color: #ffffff;
+    --card-bg: #f9f9f9;
+    --border-radius: 12px;
+    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+body, html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+.gradio-container {
+    background-color: var(--bg-color);
+    max-width: 100% !important;
+    font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
+    color: var(--text-color);
+    padding: 1.5em;
+}
+
+#top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  padding: 0 16px;
+  background-color: var(--bg-color);
+  border-bottom: 1px solid #ddd;
+  position: fixed;
+  top: 0;
+  left: 250px; /* sidebar width */
+  right: 0;
+  z-index: 1000;
+}
+
+#collapse-left, #dark-mode-toggle {
+  font-size: 1.2em;
+  cursor: pointer;
+  user-select: none;
+}
+
+#sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 250px;
+  height: 100vh;
+  background-color: #f7f7f7;
+  padding: 16px;
+  overflow-y: auto;
+  border-right: 1px solid #ddd;
+  z-index: 999;
+}
+
+#main-column {
+  overflow-y: auto;
+  max-height: 80vh;
+  padding-right: 8px;
+}
+
+#module-wrapper {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  padding: 16px;
+  background-color: white;
+}
+
+#main-content {
+  margin-left: 250px; /* Sidebar width */
+  padding: 16px;
+}
+
+.gr-box {
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 20px;
+  background-color: white;
+}
+
+body.dark-mode {
+  --bg-color: #1e1e1e;
+  --text-color: #f0f0f0;
+  --card-bg: #2a2a2a;
+  --primary-color: #ffb74d;
+}
+
+
 
 @keyframes float {
     0% { transform: translateY(0px); }