Update assets/custom.css via AI Editor

assets/custom.css

@@ -1,220 +1,83 @@
-/* Left column styling */
-#left-column {
-    background-color: #E0E0E0; /* Light gray background */
-    padding: 20px;
-    height: calc(100vh - 120px); /* Adjust based on title and dot height */
-    overflow-y: auto;
+/* Left column navbar light gray, right column white background */
+.dash-bootstrap .dbc-row > .dbc-col:first-child {
+    background-color: #F5F5F5 !important;
+    min-height: 100vh;
+    word-break: break-word;
     word-wrap: break-word;
 }
-
-/* Right column styling */
-#right-column {
-    background-color: #FFFFFF; /* White background */
-    padding: 20px;
-    height: calc(100vh - 120px); /* Adjust based on title and dot height */
-    overflow-y: auto;
+.dash-bootstrap .dbc-row > .dbc-col:last-child {
+    background-color: #FFFFFF !important;
+    min-height: 100vh;
+    word-break: break-word;
     word-wrap: break-word;
 }
 
-/* Title styling */
-#app-title {
-    background-color: #1C304A; /* Dark blue background */
-    color: white;
-    padding: 15px;
-    text-align: center;
-    margin-bottom: 0; /* Remove bottom margin */
-    width: 100%;
-}
-
-/* Progress Indicator Styling */
-.dot-container {
-    text-align: center;
-    padding: 10px 0;
-    width: 100%;
-    background-color: #F8F9FA; /* Light background for the dot area */
-    height: 40px; /* Fixed height for dot container */
-}
-
-@keyframes blink {
-    0% { opacity: 1; }
-    50% { opacity: 0.2; }
-    100% { opacity: 1; }
-}
-
-.dot {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    background-color: #1C304A; /* Match primary button color */
-    border-radius: 50%;
-    margin: 0 5px;
-    animation: blink 1.4s infinite both;
-}
-
-.dot:nth-child(2) {
-    animation-delay: 0.2s;
-}
-
-.dot:nth-child(3) {
-    animation-delay: 0.4s;
-}
-
-/* Button Styling */
+/* Button colors */
 .btn-primary {
-    background-color: #1C304A !important;
-    border-color: #1C304A !important;
-    color: white !important;
+    background-color: #1C304A;
+    border-color: #1C304A;
 }
 .btn-primary:hover {
-    background-color: #116F70 !important;
-    border-color: #116F70 !important;
-    color: white !important;
+    background-color: #116F70;
+    border-color: #116F70;
 }
 .btn-secondary {
-    background-color: #116F70 !important;
-    border-color: #116F70 !important;
-    color: white !important;
+    background-color: #116F70;
+    border-color: #116F70;
 }
 .btn-secondary:hover {
-    background-color: #00AEAF !important;
-    border-color: #00AEAF !important;
-    color: white !important;
+    background-color: #00AEAF;
+    border-color: #00AEAF;
 }
 .btn-tertiary {
-    background-color: #E0E0E0 !important;
-    border-color: #E0E0E0 !important;
-    color: #1C304A !important;
+    background-color: #E0E0E0;
+    border-color: #E0E0E0;
+    color: #1C304A;
 }
 .btn-tertiary:hover {
-    background-color: #DEF4F4 !important;
-    border-color: #DEF4F4 !important;
-    color: #1C304A !important;
-}
-
-/* Style for the document type buttons (using btn-link class in code) */
-.custom-button.btn.btn-link {
-  background-color: #FFFFFF; /* White background */
-  border: 1px solid #CCCCCC; /* Light grey border */
-  color: #1C304A !important; /* Dark blue text, important to override link default */
-  text-align: left !important;
-  padding: 10px 15px !important;
-  margin-bottom: 8px !important;
-  border-radius: 4px !important;
-  width: 100% !important;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-  white-space: normal !important; /* Allow text wrapping */
-  word-wrap: break-word !important; /* Break long words */
-  text-decoration: none !important; /* Remove underline from link */
-  display: block; /* Ensure it takes full width */
-}
-
-.custom-button.btn.btn-link:hover {
-  background-color: #DEF4F4 !important; /* Light teal background on hover */
-  border-color: #DEF4F4 !important;
-  color: #1C304A !important;
-  text-decoration: none !important;
+    background-color: #DEF4F4;
+    border-color: #DEF4F4;
+    color: #1C304A;
 }
 
-/* Style for upload area */
-.upload-style {
-    width: 100%;
-    height: 60px;
-    line-height: 60px;
-    border-width: 1px;
-    border-style: dashed;
-    border-radius: 5px;
-    text-align: center;
-    margin: 10px 0;
-    border-color: #CCCCCC; /* Neutral border color */
-    background-color: #FAFAFA; /* Slightly off-white background */
+/* Word wrap for text boxes */
+input[type="text"], textarea, .dash-textarea, .dash-input {
+    word-break: break-word;
     word-wrap: break-word;
-}
-.upload-style:hover {
-    border-color: #116F70; /* Match secondary hover */
-}
-
-/* Style for document preview area */
-#document-preview {
-    border: 1px solid #E0E0E0;
-    padding: 15px;
-    margin-bottom: 15px;
-    min-height: 250px; /* Adjusted minimum height */
-    max-height: 55vh; /* Limit height and allow scrolling */
-    overflow-y: auto;
-    background-color: #FFFFFF; /* Ensure white background */
-    word-wrap: break-word; /* Ensure text wraps */
-    white-space: pre-wrap; /* Preserve whitespace and wrap */
+    white-space: pre-wrap;
 }
 
-/* Style for file list items */
-#file-list div {
-   word-wrap: break-word;
-   white-space: normal;
-   padding: 5px;
-   border: 1px solid #ccc;
-   margin-bottom: 5px;
-   background-color: #fff;
-   border-radius: 3px;
-   display: flex;
-   justify-content: space-between;
-   align-items: center;
-}
-#file-list button {
-    background: none;
-    border: none;
-    color: red;
-    cursor: pointer;
-    font-weight: bold;
-    padding: 0 5px;
-}
-
-/* Ensure chat input and output have word wrap */
-#chat-input, #chat-output, #status-bar {
-    word-wrap: break-word;
-    white-space: normal; /* Ensure text wraps normally */
-}
-
-/* Ensure body and html take full height */
-html, body, #react-entry-point, .dash-template {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden; /* Prevent horizontal scroll */
+/* Blinking triple dot progress indicator */
+.blinking-dot {
+    width: 16px;
+    height: 16px;
+    position: relative;
+    display: inline-block;
 }
-
-/* General container adjustments */
-.dbc-container-fluid, .container-fluid {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+.blinking-dot::before, .blinking-dot::after, .blinking-dot {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #1C304A;
+    position: absolute;
+    top: 5px;
+    animation: blink 1.4s infinite both;
 }
-
-/* Row adjustments */
-.dbc-row, .row {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
+.blinking-dot::before {
+    left: 0;
+    animation-delay: 0s;
 }
-
-/* Full height row for content */
-.content-row {
-    flex-grow: 1; /* Allow content row to fill remaining space */
-    min-height: 0; /* Override potential min-height issues */
+.blinking-dot {
+    left: 5px;
+    animation-delay: 0.2s;
 }
-
-/* Ensure columns take full height within their row */
-#left-column, #right-column {
-   height: 100%; /* Make columns fill the content-row height */
+.blinking-dot::after {
+    left: 10px;
+    animation-delay: 0.4s;
 }
-
-/* Responsive adjustments if needed */
-@media (max-width: 768px) {
-    #left-column, #right-column {
-        height: auto; /* Allow height to adjust on smaller screens */
-        min-height: 300px; /* Set a minimum height */
-    }
-    .content-row {
-        flex-direction: column;
-    }
+@keyframes blink {
+    0%, 80%, 100% { opacity: 0.2; }
+    40% { opacity: 1; }
 }