Updates

DreamCanvas/ui/styles.css

@@ -0,0 +1,82 @@
+body {
+    background-color: #1e1e1e;
+    color: #fff;
+}
+
+h1 {
+    color: #f7c04a;
+    font-weight: bold;
+}
+
+.form-label {
+    color: #f7c04a;
+}
+
+.keyword-suggestions {
+    margin-top: 10px;
+}
+
+#generatedImage {
+    border: 2px solid #f7c04a;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+#promptDisplay {
+    background-color: #292929;
+    padding: 20px;
+    border-radius: 10px;
+    border: 1px solid #f7c04a;
+}
+
+#positivePromptDisplay {
+    color: #00ff00;
+    font-weight: bold;
+}
+
+#negativePromptDisplay {
+    color: #ff3333;
+    font-weight: bold;
+}
+
+#prevImage, #nextImage {
+    border-color: #f7c04a; /* Gold border */
+    background-color: transparent; /* Transparent background */
+    color: #f7c04a; /* Gold text color */
+    font-weight: bold;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+#prevImage:hover, #nextImage:hover {
+    background-color: #f7c04a; /* Gold background on hover */
+    color: #1e1e1e; /* Dark text on hover to contrast */
+}
+
+#llmResponse {
+    margin-top: 0; /* Remove any extra margin at the top */
+    padding-top: 0; /* Remove extra padding at the top */
+    line-height: 1.5; /* Adjust line height for better readability */
+    text-align: left; /* Ensure the text aligns to the left */
+}
+
+#llmResponse:focus {
+    outline: none; /* Remove the blue outline when focused */
+    box-shadow: 0 0 5px 2px #f7c04a; /* Optional: Add a gold glow when focused */
+}
+
+/* Center the title on smaller screens */
+@media (max-width: 768px) {
+    h1 {
+        text-align: center;
+    }
+
+    #imageResult {
+        margin-top: 20px;
+    }
+}
+
+/* New styles for responsive layout and sticky image preview */
+.sticky-top {
+    position: sticky;
+    top: 20px;
+}