Hugging Face's logo

Spaces:
DHEIVER
/
MetrologyRAGPipeline
Running

App Files Community
DHEIVER commited on
Commit
b3b78f8
·
verified ·
1 Parent(s): 2213648

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +175 -18
style.css CHANGED
@@ -1,28 +1,185 @@
 
 
 
 
 
 
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
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
  body {
8
+ font-family: 'Roboto', sans-serif;
9
+ background-color: #f4f7fa;
10
+ color: #333;
11
+ line-height: 1.6;
12
+ }
13
+
14
+ .container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 20px;
18
+ }
19
+
20
+ /* Header */
21
+ header {
22
+ text-align: center;
23
+ padding: 40px 0;
24
+ background: linear-gradient(135deg, #007bff, #00ddeb);
25
+ color: white;
26
+ border-radius: 10px;
27
+ margin-bottom: 30px;
28
+ }
29
+
30
+ header h1 {
31
+ font-size: 2.5em;
32
+ margin-bottom: 10px;
33
+ }
34
+
35
+ header p {
36
+ font-size: 1.2em;
37
+ }
38
+
39
+ /* Main Layout */
40
+ main {
41
+ display: grid;
42
+ grid-template-columns: 3fr 1fr;
43
+ gap: 30px;
44
+ }
45
+
46
+ /* Query Section */
47
+ .query-section {
48
+ grid-column: 1 / 2;
49
+ background: white;
50
+ padding: 20px;
51
+ border-radius: 10px;
52
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
53
+ }
54
+
55
+ .query-section h2 {
56
+ font-size: 1.5em;
57
+ margin-bottom: 15px;
58
+ }
59
+
60
+ #query-input {
61
+ width: 100%;
62
+ padding: 15px;
63
+ font-size: 1em;
64
+ border: 1px solid #ddd;
65
+ border-radius: 5px;
66
+ resize: vertical;
67
+ margin-bottom: 15px;
68
+ }
69
+
70
+ #submit-query {
71
+ background-color: #007bff;
72
+ color: white;
73
+ padding: 12px 20px;
74
+ border: none;
75
+ border-radius: 5px;
76
+ font-size: 1em;
77
+ cursor: pointer;
78
+ transition: background-color 0.3s;
79
  }
80
 
81
+ #submit-query:hover {
82
+ background-color: #0056b3;
 
83
  }
84
 
85
+ /* Response and Context Sections */
86
+ .response-section, .context-section {
87
+ grid-column: 1 / 2;
88
+ background: white;
89
+ padding: 20px;
90
+ border-radius: 10px;
91
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
92
+ margin-top: 20px;
93
  }
94
 
95
+ .response-section h2, .context-section h2 {
96
+ font-size: 1.5em;
97
+ margin-bottom: 15px;
 
 
 
98
  }
99
 
100
+ .output-box {
101
+ background: #f8f9fa;
102
+ padding: 15px;
103
+ border-radius: 5px;
104
+ min-height: 100px;
105
+ border: 1px solid #ddd;
106
  }
107
+
108
+ /* Settings Panel */
109
+ .settings-panel {
110
+ grid-column: 2 / 3;
111
+ grid-row: 1 / 3;
112
+ background: white;
113
+ padding: 20px;
114
+ border-radius: 10px;
115
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
116
+ }
117
+
118
+ .settings-panel h2 {
119
+ font-size: 1.5em;
120
+ margin-bottom: 20px;
121
+ }
122
+
123
+ .setting {
124
+ margin-bottom: 15px;
125
+ }
126
+
127
+ .setting label {
128
+ display: block;
129
+ font-weight: 500;
130
+ margin-bottom: 5px;
131
+ }
132
+
133
+ .setting input, .setting select {
134
+ width: 100%;
135
+ padding: 10px;
136
+ font-size: 1em;
137
+ border: 1px solid #ddd;
138
+ border-radius: 5px;
139
+ }
140
+
141
+ #apply-settings {
142
+ background-color: #28a745;
143
+ color: white;
144
+ padding: 12px 20px;
145
+ border: none;
146
+ border-radius: 5px;
147
+ font-size: 1em;
148
+ cursor: pointer;
149
+ width: 100%;
150
+ margin-top: 10px;
151
+ transition: background-color 0.3s;
152
+ }
153
+
154
+ #apply-settings:hover {
155
+ background-color: #218838;
156
+ }
157
+
158
+ /* Footer */
159
+ footer {
160
+ text-align: center;
161
+ padding: 20px 0;
162
+ margin-top: 30px;
163
+ border-top: 1px solid #ddd;
164
+ color: #666;
165
+ }
166
+
167
+ /* Responsive Design */
168
+ @media (max-width: 768px) {
169
+ main {
170
+ grid-template-columns: 1fr;
171
+ }
172
+
173
+ .settings-panel {
174
+ grid-column: 1 / 2;
175
+ grid-row: auto;
176
+ }
177
+
178
+ header h1 {
179
+ font-size: 2em;
180
+ }
181
+
182
+ header p {
183
+ font-size: 1em;
184
+ }
185
+ }