Hugging Face's logo

Spaces:
OpenRAG128
/
ImageIQ
Running

App Files Community
OpenRAG128 commited on
Commit
9f740cb
·
verified ·
1 Parent(s): 5fbdffc

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +113 -18
style.css CHANGED
@@ -1,28 +1,123 @@
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
  body {
2
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3
+ background-color: #000000;
4
+ margin: 0;
5
+ padding: 0;
6
+ display: flex;
7
+ justify-content: center;
8
+ align-items: center;
9
+ height: 100vh;
10
+ background-size: cover;
11
+ background-position: center;
12
+ color: #f3eded;
13
  }
14
 
15
+ .chat-container {
16
+ width: 400px;
17
+ background-color: #000000;
18
+ box-shadow: 0 4px 20px rgba(198, 118, 255, 0.5);
19
+ border-radius: 15px;
20
+ overflow: hidden;
21
+ display: flex;
22
+ flex-direction: column;
23
  }
24
 
25
+ #chatbox {
26
+ padding: 20px;
27
+ max-height: 400px;
28
+ overflow-y: auto;
29
+ border-bottom: 1px solid #b582eb;
30
+ background-color: #140d1d;
31
  }
32
 
33
+ .bot-message, .user-message {
34
+ margin: 10px 0;
35
+ padding: 15px;
36
+ border-radius: 10px;
37
+ display: flex;
38
+ align-items: center;
39
  }
40
 
41
+ .bot-message {
42
+ background-color: #461d5f;
43
+ color: #f0def9;
44
+ text-align: left;
45
+ }
46
+
47
+ .user-message {
48
+ background-color: #b586ec;
49
+ color: rgb(255, 255, 255);
50
+ text-align: right;
51
+ align-self: flex-end;
52
+ }
53
+
54
+ .bot-message img, .user-message img {
55
+ width: 30px;
56
+ height: 30px;
57
+ margin-right: 10px;
58
+ }
59
+
60
+ .input-container {
61
+ display: flex;
62
+ align-items: center;
63
+ background-color: #000000;
64
+ padding: 10px;
65
+ border-top: 1px solid #000000;
66
+ }
67
+
68
+ input[type="text"] {
69
+ width: 70%; /* Increased width for question input */
70
+ padding: 10px;
71
+ background-color: #000000;
72
+ color: #ffffff;
73
+ border: none;
74
+ border-radius: 5px;
75
+ font-size: 16px;
76
+ margin-right: 10px;
77
+ }
78
+
79
+ input[type="file"] {
80
+ width: 20%; /* Adjust the width of the file input */
81
+ padding: 5px;
82
+ background-color: #000000;
83
+ color: #ffffff;
84
+ border: none;
85
+ font-size: 14px;
86
+ cursor: pointer;
87
+ margin-right: 10px;
88
+ }
89
+
90
+ select#model {
91
+ width: 20%; /* Decreased width for model dropdown */
92
+ padding: 10px;
93
+ background-color: #000000;
94
+ color: #ffffff;
95
+ border: none;
96
+ font-size: 14px;
97
+ margin-right: 10px;
98
+ }
99
+
100
+ select#complexity {
101
+ width: 10%; /* Adjusted width for complexity dropdown */
102
+ padding: 10px;
103
+ background-color: #000000;
104
+ color: #ffffff;
105
+ border: none;
106
+ font-size: 14px;
107
+ margin-right: 10px;
108
+ }
109
+
110
+ button {
111
+ width: 20%;
112
+ padding: 10px;
113
+ background-color: #000105;
114
+ color: white;
115
+ border: none;
116
+ cursor: pointer;
117
+ font-size: 16px;
118
+ border-radius: 5px;
119
+ }
120
+
121
+ button:hover {
122
+ background-color: #45265e;
123
  }