Xolkin commited on
Commit
ae3b14a
·
verified ·
1 Parent(s): 210f8fc

Create styles.css

Browse files
Files changed (1) hide show
  1. styles.css +87 -0
styles.css ADDED
@@ -0,0 +1,87 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* styles.css */
2
+
3
+ /* Reset all margins and paddings */
4
+ * {
5
+ margin: 0;
6
+ padding: 0;
7
+ box-sizing: border-box;
8
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
+ }
10
+
11
+ /* Container styles */
12
+ .gradio-container {
13
+ background-color: #ffffff; /* White background */
14
+ padding: 20px;
15
+ border-radius: 8px;
16
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
17
+ }
18
+
19
+ /* Button styles */
20
+ .gradio-button {
21
+ background-color: #D32F2F; /* Metro red color */
22
+ color: white;
23
+ border: none;
24
+ border-radius: 5px;
25
+ padding: 12px 25px;
26
+ font-size: 16px;
27
+ cursor: pointer;
28
+ transition: background-color 0.3s ease;
29
+ }
30
+
31
+ .gradio-button:hover {
32
+ background-color: #C62828; /* Darker red */
33
+ }
34
+
35
+ /* Slider styles */
36
+ .gradio-slider {
37
+ background-color: #f1f1f1;
38
+ border-radius: 8px;
39
+ border: 1px solid #ddd;
40
+ padding: 10px;
41
+ }
42
+
43
+ /* Textbox styles */
44
+ .gradio-textbox {
45
+ background-color: #ffffff;
46
+ border: 1px solid #ddd;
47
+ border-radius: 8px;
48
+ padding: 10px;
49
+ font-size: 14px;
50
+ width: 100%;
51
+ transition: border-color 0.3s ease;
52
+ }
53
+
54
+ .gradio-textbox:focus {
55
+ border-color: #D32F2F; /* Red color */
56
+ }
57
+
58
+ /* Label styles */
59
+ .gradio-label {
60
+ font-size: 14px;
61
+ font-weight: bold;
62
+ color: #333;
63
+ }
64
+
65
+ /* Chat styles */
66
+ .gradio-chat {
67
+ background-color: #ffffff; /* White background for chat messages */
68
+ border: 1px solid #ddd;
69
+ border-radius: 8px;
70
+ padding: 15px;
71
+ }
72
+
73
+ .gradio-chat .gradio-message {
74
+ background-color: #f1f1f1; /* Light gray for chat messages */
75
+ border-radius: 8px;
76
+ padding: 10px;
77
+ margin-bottom: 10px;
78
+ }
79
+
80
+ .gradio-chat .gradio-user-message {
81
+ background-color: #D32F2F; /* Red color for user messages */
82
+ color: white;
83
+ }
84
+
85
+ .gradio-chat .gradio-assistant-message {
86
+ background-color: #eeeeee; /* Lighter color for assistant's messages */
87
+ }