Update README.md

README.md

@@ -230,7 +230,7 @@ body, .gradio-container {
     height: auto;
 }
 
-/* TO ADJUST THE FONT SIZE OF USER/ASSISTANT MESSAGESs */
+/* TO ADJUST THE FONT SIZE OF USER/ASSISTANT MESSAGES */
 /* Reduce font size for chatbot messages */
 .message {
     font-size: 1.1rem !important;
@@ -246,14 +246,40 @@ body, .gradio-container {
 
 /* TO CHANGE THE COLOR OF RETRY/UNDO/CLEAR BUTTONS */
 button.sm.secondary.svelte-cmf5ev {
-    background-color: white !important; /* Set background color to white */
-    color: black !important; /* Set text color to black for contrast */
-    border: none !important; /* Remove any border */
-    box-shadow: none !important; /* Remove any shadow if present */
+    background-color: white !important;
+    color: black !important;
+    border: 1.5px solid #F7D9DA !important;
+    box-shadow: none !important;
+    transition: background-color 0.3s ease;
 }
-/* Optional: hover effect */
 button.sm.secondary.svelte-cmf5ev:hover {
-    background-color: rgba(255, 255, 255, 0.8) !important; /* Slightly darker shade for hover */
+    background-color: #FEF2F2 !important;
+}
+
+/* TO ADD A COLORED BORDER ON BUTTONS */
+.gradio-container .styler.svelte-iyf88w {
+    border: 1.5px solid #F7D9DA !important;
+    border-radius: 6px !important;  /* Adjust this value as needed */
+    overflow: hidden !important;  /* This ensures the content doesn't spill out of the rounded corners */
+}
+
+.gradio-container .styler.svelte-iyf88w,
+button.sm.secondary.svelte-cmf5ev > div {
+    border-radius: 8px !important;  /* Slightly smaller than the outer border radius */
+    background-color: white !important;  /* Or whatever background color you prefer */
+    margin: 0 !important;  /* Remove any margin that might be causing gaps */
+}
+
+/* TO ADD A COLORED BORDER ON CHAT BOX */
+.gradio-container .bubble-wrap.svelte-1e1jlin {
+    border: 1.5px solid #F7D9DA !important;
+    border-radius: 8px !important;  /* Adjust this value as needed */
+    overflow: hidden !important;  /* This ensures the content doesn't spill out of the rounded corners */
+}
+.gradio-container .bubble-wrap.svelte-1e1jlin > div {
+    border-radius: 10px !important;  /* Slightly smaller than the outer border radius */
+    background-color: white !important;  /* Or whatever background color you prefer */
+    margin: 0 !important;  /* Remove any margin that might be causing gaps */
 }
 """
 
@@ -366,6 +392,7 @@ demo.launch(server_name="0.0.0.0", share=True)
 
 (The above works in `runpod.io`.) The interface should look like this:
 ![Image description](Gradio-example.png)
+(We roughly followed the appearance of Céline's books published by Denoël, as well as those in the 'Collection Blanche' series by Gallimard, but you are free to modify the template if you wish.)
 
 </details>