Hugging Face's logo

Spaces:
MicroHealth
/
proposal-writer
Paused

App Files Community
bluenevus commited on
Commit
54d50c8
·
1 Parent(s): 67360ee

Update assets/custom.css via AI Editor

Browse files
Files changed (1) hide show
  1. assets/custom.css +176 -108
assets/custom.css CHANGED
@@ -1,152 +1,220 @@
1
- body {
2
- background-color: #ffffff;
3
- color: #454545;
4
- }
5
-
6
- .container-fluid {
7
- padding-left: 0;
8
- padding-right: 0;
9
  }
10
 
11
- .row {
12
- margin-left: 0;
13
- margin-right: 0;
 
 
 
 
14
  }
15
 
16
- /* Left pane styles */
17
- .col-3 {
18
- background-color: #eeeeee;
 
19
  padding: 15px;
20
- border-radius: 5px;
 
 
21
  }
22
 
23
- /* Right pane styles */
24
- .col-9 {
25
- background-color: white;
26
- padding: 15px;
27
- border-radius: 5px;
 
 
28
  }
29
 
30
- /* Remove underlines from all text */
31
- a, a:hover, a:focus, button, .btn-link {
32
- text-decoration: none !important;
 
33
  }
34
 
35
- .btn-primary {
36
- background-color: #1C304A;
37
- border-color: #1C304A;
 
 
 
 
 
38
  }
39
 
40
- .btn-primary:hover {
41
- background-color: #116F70;
42
- border-color: #116F70;
43
  }
44
 
45
- .btn-secondary {
46
- background-color: #116F70;
47
- border-color: #116F70;
48
  }
49
 
50
- .btn-secondary:hover {
51
- background-color: #00AEAF;
52
- border-color: #00AEAF;
 
 
53
  }
54
-
55
- .btn-success {
56
- background-color: #28a745;
57
- border-color: #28a745;
58
  }
59
-
60
- .btn-success:hover {
61
- background-color: #218838;
62
- border-color: #1e7e34;
63
  }
64
-
65
- /* Custom button styles */
66
- .custom-button {
67
- text-align: left;
68
- padding: 10px;
69
- margin-bottom: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
  border-radius: 5px;
71
- transition: background-color 0.3s;
72
- color: #1C304A;
 
 
 
73
  }
74
-
75
- .custom-button:hover {
76
- background-color: #DEF4F4;
77
  }
78
 
79
- /* File upload area */
80
- #upload-document {
81
- border: 1px dashed #E0E0E0;
82
- border-radius: 5px;
83
- padding: 10px;
84
- text-align: center;
85
  margin-bottom: 15px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  }
87
-
88
- /* File list styles */
89
- #file-list > div {
90
- background-color: #FFFFFF;
91
- padding: 5px;
92
- margin-bottom: 5px;
93
- border-radius: 3px;
94
- display: flex;
95
- align-items: center;
96
- }
97
-
98
  #file-list button {
99
- background-color: #E0E0E0;
100
  border: none;
101
- border-radius: 50%;
102
- width: 20px;
103
- height: 20px;
104
- display: flex;
105
- align-items: center;
106
- justify-content: center;
107
- margin-right: 10px;
108
  cursor: pointer;
 
 
109
  }
110
 
111
- #file-list button:hover {
112
- background-color: #1C304A;
113
- color: white;
 
114
  }
115
 
116
- /* Document preview area */
117
- #document-preview {
118
- background-color: #FFFFFF;
119
- border: 1px solid #E0E0E0;
120
- border-radius: 5px;
121
- padding: 15px;
122
- margin-bottom: 15px;
123
  }
124
 
125
- /* Chat input and button */
126
- #chat-input {
127
- border-color: #E0E0E0;
 
 
 
 
128
  }
129
 
130
- #btn-send-chat {
131
- margin-left: 10px;
 
 
132
  }
133
 
134
- /* Loading indicator */
135
- .dash-spinner {
136
- margin: 0 auto;
 
137
  }
138
 
139
- /* Markdown content */
140
- .markdown-body {
141
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
142
- font-size: 16px;
143
- line-height: 1.5;
144
- word-wrap: break-word;
145
  }
146
 
147
- /* Ensure buttons don't wrap text */
148
- .btn {
149
- white-space: nowrap;
150
- overflow: hidden;
151
- text-overflow: ellipsis;
 
 
 
 
152
  }
 
1
+ /* Left column styling */
2
+ #left-column {
3
+ background-color: #E0E0E0; /* Light gray background */
4
+ padding: 20px;
5
+ height: calc(100vh - 120px); /* Adjust based on title and dot height */
6
+ overflow-y: auto;
7
+ word-wrap: break-word;
 
8
  }
9
 
10
+ /* Right column styling */
11
+ #right-column {
12
+ background-color: #FFFFFF; /* White background */
13
+ padding: 20px;
14
+ height: calc(100vh - 120px); /* Adjust based on title and dot height */
15
+ overflow-y: auto;
16
+ word-wrap: break-word;
17
  }
18
 
19
+ /* Title styling */
20
+ #app-title {
21
+ background-color: #1C304A; /* Dark blue background */
22
+ color: white;
23
  padding: 15px;
24
+ text-align: center;
25
+ margin-bottom: 0; /* Remove bottom margin */
26
+ width: 100%;
27
  }
28
 
29
+ /* Progress Indicator Styling */
30
+ .dot-container {
31
+ text-align: center;
32
+ padding: 10px 0;
33
+ width: 100%;
34
+ background-color: #F8F9FA; /* Light background for the dot area */
35
+ height: 40px; /* Fixed height for dot container */
36
  }
37
 
38
+ @keyframes blink {
39
+ 0% { opacity: 1; }
40
+ 50% { opacity: 0.2; }
41
+ 100% { opacity: 1; }
42
  }
43
 
44
+ .dot {
45
+ display: inline-block;
46
+ width: 10px;
47
+ height: 10px;
48
+ background-color: #1C304A; /* Match primary button color */
49
+ border-radius: 50%;
50
+ margin: 0 5px;
51
+ animation: blink 1.4s infinite both;
52
  }
53
 
54
+ .dot:nth-child(2) {
55
+ animation-delay: 0.2s;
 
56
  }
57
 
58
+ .dot:nth-child(3) {
59
+ animation-delay: 0.4s;
 
60
  }
61
 
62
+ /* Button Styling */
63
+ .btn-primary {
64
+ background-color: #1C304A !important;
65
+ border-color: #1C304A !important;
66
+ color: white !important;
67
  }
68
+ .btn-primary:hover {
69
+ background-color: #116F70 !important;
70
+ border-color: #116F70 !important;
71
+ color: white !important;
72
  }
73
+ .btn-secondary {
74
+ background-color: #116F70 !important;
75
+ border-color: #116F70 !important;
76
+ color: white !important;
77
  }
78
+ .btn-secondary:hover {
79
+ background-color: #00AEAF !important;
80
+ border-color: #00AEAF !important;
81
+ color: white !important;
82
+ }
83
+ .btn-tertiary {
84
+ background-color: #E0E0E0 !important;
85
+ border-color: #E0E0E0 !important;
86
+ color: #1C304A !important;
87
+ }
88
+ .btn-tertiary:hover {
89
+ background-color: #DEF4F4 !important;
90
+ border-color: #DEF4F4 !important;
91
+ color: #1C304A !important;
92
+ }
93
+
94
+ /* Style for the document type buttons (using btn-link class in code) */
95
+ .custom-button.btn.btn-link {
96
+ background-color: #FFFFFF; /* White background */
97
+ border: 1px solid #CCCCCC; /* Light grey border */
98
+ color: #1C304A !important; /* Dark blue text, important to override link default */
99
+ text-align: left !important;
100
+ padding: 10px 15px !important;
101
+ margin-bottom: 8px !important;
102
+ border-radius: 4px !important;
103
+ width: 100% !important;
104
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
105
+ white-space: normal !important; /* Allow text wrapping */
106
+ word-wrap: break-word !important; /* Break long words */
107
+ text-decoration: none !important; /* Remove underline from link */
108
+ display: block; /* Ensure it takes full width */
109
+ }
110
+
111
+ .custom-button.btn.btn-link:hover {
112
+ background-color: #DEF4F4 !important; /* Light teal background on hover */
113
+ border-color: #DEF4F4 !important;
114
+ color: #1C304A !important;
115
+ text-decoration: none !important;
116
+ }
117
+
118
+ /* Style for upload area */
119
+ .upload-style {
120
+ width: 100%;
121
+ height: 60px;
122
+ line-height: 60px;
123
+ border-width: 1px;
124
+ border-style: dashed;
125
  border-radius: 5px;
126
+ text-align: center;
127
+ margin: 10px 0;
128
+ border-color: #CCCCCC; /* Neutral border color */
129
+ background-color: #FAFAFA; /* Slightly off-white background */
130
+ word-wrap: break-word;
131
  }
132
+ .upload-style:hover {
133
+ border-color: #116F70; /* Match secondary hover */
 
134
  }
135
 
136
+ /* Style for document preview area */
137
+ #document-preview {
138
+ border: 1px solid #E0E0E0;
139
+ padding: 15px;
 
 
140
  margin-bottom: 15px;
141
+ min-height: 250px; /* Adjusted minimum height */
142
+ max-height: 55vh; /* Limit height and allow scrolling */
143
+ overflow-y: auto;
144
+ background-color: #FFFFFF; /* Ensure white background */
145
+ word-wrap: break-word; /* Ensure text wraps */
146
+ white-space: pre-wrap; /* Preserve whitespace and wrap */
147
+ }
148
+
149
+ /* Style for file list items */
150
+ #file-list div {
151
+ word-wrap: break-word;
152
+ white-space: normal;
153
+ padding: 5px;
154
+ border: 1px solid #ccc;
155
+ margin-bottom: 5px;
156
+ background-color: #fff;
157
+ border-radius: 3px;
158
+ display: flex;
159
+ justify-content: space-between;
160
+ align-items: center;
161
  }
 
 
 
 
 
 
 
 
 
 
 
162
  #file-list button {
163
+ background: none;
164
  border: none;
165
+ color: red;
 
 
 
 
 
 
166
  cursor: pointer;
167
+ font-weight: bold;
168
+ padding: 0 5px;
169
  }
170
 
171
+ /* Ensure chat input and output have word wrap */
172
+ #chat-input, #chat-output, #status-bar {
173
+ word-wrap: break-word;
174
+ white-space: normal; /* Ensure text wraps normally */
175
  }
176
 
177
+ /* Ensure body and html take full height */
178
+ html, body, #react-entry-point, .dash-template {
179
+ height: 100%;
180
+ margin: 0;
181
+ padding: 0;
182
+ overflow-x: hidden; /* Prevent horizontal scroll */
 
183
  }
184
 
185
+ /* General container adjustments */
186
+ .dbc-container-fluid, .container-fluid {
187
+ padding-left: 0 !important;
188
+ padding-right: 0 !important;
189
+ height: 100%;
190
+ display: flex;
191
+ flex-direction: column;
192
  }
193
 
194
+ /* Row adjustments */
195
+ .dbc-row, .row {
196
+ margin-left: 0 !important;
197
+ margin-right: 0 !important;
198
  }
199
 
200
+ /* Full height row for content */
201
+ .content-row {
202
+ flex-grow: 1; /* Allow content row to fill remaining space */
203
+ min-height: 0; /* Override potential min-height issues */
204
  }
205
 
206
+ /* Ensure columns take full height within their row */
207
+ #left-column, #right-column {
208
+ height: 100%; /* Make columns fill the content-row height */
 
 
 
209
  }
210
 
211
+ /* Responsive adjustments if needed */
212
+ @media (max-width: 768px) {
213
+ #left-column, #right-column {
214
+ height: auto; /* Allow height to adjust on smaller screens */
215
+ min-height: 300px; /* Set a minimum height */
216
+ }
217
+ .content-row {
218
+ flex-direction: column;
219
+ }
220
  }