Hugging Face's logo

Spaces:
ayush200399391001
/
medical_chat_summary
Sleeping

App Files Community
1
ayush200399391001 commited on
Commit
c1fc50a
·
verified ·
1 Parent(s): c0101ec

Create style.css

Browse files
Files changed (1) hide show
  1. style.css +197 -0
style.css ADDED
@@ -0,0 +1,197 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Color Variables */
2
+ :root {
3
+ --primary: #3498db; /* Blue */
4
+ --secondary: #2c3e50; /* Dark accent */
5
+ --accent: #f1c40f; /* Yellow */
6
+ --success: #2ecc71; /* Positive actions */
7
+ --light: #ffffff; /* White backgrounds */
8
+ --dark: #000000; /* Black text/elements */
9
+ }
10
+ /* Add to existing CSS */
11
+ .priority-banner {
12
+ padding: 1.5rem;
13
+ margin: 1rem 0;
14
+ border-radius: 10px;
15
+ background: linear-gradient(45deg, #ff4444, #ff914d);
16
+ color: white;
17
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
18
+ }
19
+
20
+ .priority-banner strong {
21
+ font-size: 1.2em;
22
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
23
+ }
24
+
25
+ .doctor-card {
26
+ padding: 1.5rem;
27
+ margin: 1rem 0;
28
+ border-radius: 10px;
29
+ background: white;
30
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
31
+ transition: transform 0.2s;
32
+ }
33
+
34
+ .doctor-card:hover {
35
+ transform: translateY(-3px);
36
+ }
37
+ /* Main container styling */
38
+ .stApp {
39
+ background: linear-gradient(135deg, #3498db 0%, #e0e0e0 100%);
40
+ font-family: 'Arial', sans-serif;
41
+ }
42
+
43
+ /* Headers styling */
44
+ h1, h2, h3 {
45
+ color: var(--dark) !important;
46
+ border-bottom: 3px solid var(--primary);
47
+ padding-bottom: 0.3em;
48
+ }
49
+
50
+ /* Form containers */
51
+ .stForm {
52
+ background: #000000;
53
+ border: 1px solid rgba(44, 62, 80, 0.2);
54
+ border-radius: 15px;
55
+ padding: 2rem;
56
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
57
+ margin: 1rem 0;
58
+ }
59
+
60
+ /* Input fields */
61
+ .stTextInput input, .stNumberInput input,
62
+ .stSelectbox select, .stTextArea textarea {
63
+ border: 2px solid #00FFFF !important;
64
+ border-radius: 10px !important;
65
+ padding: 1rem !important;
66
+ background: #00FFFF !important;
67
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
68
+ color: var(--dark) !important;
69
+ }
70
+
71
+ .stTextInput input:focus, .stNumberInput input:focus,
72
+ .stSelectbox select:focus, .stTextArea textarea:focus {
73
+ border-color: var(--primary) !important;
74
+ box-shadow: 0 0 12px rgba(52, 152, 219, 0.2) !important;
75
+ background: white !important;
76
+ color: var(--dark) !important;
77
+ }
78
+
79
+ /* Buttons styling */
80
+ .stButton>button {
81
+ background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;
82
+ color: var(--dark) !important;
83
+ border: none !important;
84
+ border-radius: 10px !important;
85
+ padding: 1rem 2rem !important;
86
+ font-size: 1rem !important;
87
+ transition: all 0.3s ease;
88
+ position: relative;
89
+ overflow: hidden;
90
+ }
91
+
92
+ .stButton>button:hover {
93
+ transform: translateY(-2px);
94
+ box-shadow: 0 8px 15px rgba(52, 152, 219, 0.3);
95
+ opacity: 0.95;
96
+ }
97
+
98
+ .stButton>button:active {
99
+ transform: translateY(0);
100
+ opacity: 1;
101
+ }
102
+
103
+ /* Progress indicator */
104
+
105
+ .progress-bar {
106
+ display: flex;
107
+ justify-content: space-between;
108
+ margin: 2rem 0;
109
+ padding: 1rem;
110
+ background: #f0f2f6;
111
+ border-radius: 10px;
112
+ }
113
+
114
+ .step {
115
+ flex: 1;
116
+ text-align: center;
117
+ padding: 0.5rem;
118
+ color: #666;
119
+ font-weight: bold;
120
+ }
121
+
122
+ .step.active {
123
+ color: #000;
124
+ border-bottom: 3px solid #4CAF50;
125
+ }
126
+
127
+
128
+ /* Chat bubbles */
129
+ .dr-message {
130
+ background: linear-gradient(135deg, var(--primary) 0%, #2980b9 100%);
131
+ color: white;
132
+ border-radius: 20px 20px 20px 4px;
133
+ padding: 1.2rem 1.5rem;
134
+ margin: 1rem 0;
135
+ max-width: 80%;
136
+ width: fit-content;
137
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
138
+ }
139
+
140
+ .user-message {
141
+ background: linear-gradient(135deg, #f1c40f 0%, #e1b800 100%);
142
+ margin-left: auto;
143
+ border-radius: 20px 20px 4px 20px;
144
+ color: var(--dark) !important;
145
+ }
146
+
147
+ /* Emergency alert */
148
+ .emergency-alert {
149
+ background: linear-gradient(135deg, var(--accent) 0%, #c0392b 100%);
150
+ color: white;
151
+ padding: 2rem;
152
+ border-radius: 15px;
153
+ animation: pulse 1.5s infinite;
154
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
155
+ }
156
+
157
+ @keyframes pulse {
158
+ 0% { transform: scale(1); }
159
+ 50% { transform: scale(1.02); }
160
+ 100% { transform: scale(1); }
161
+ }
162
+
163
+ /* Download button */
164
+ .download-btn {
165
+ background: linear-gradient(135deg, var(--success) 0%, #27ae60 100%) !important;
166
+ }
167
+
168
+ /* Enhanced Data Visualization Contrast */
169
+ .stDataFrame {
170
+ border: 1px solid rgba(0, 0, 0, 0.1);
171
+ border-radius: 12px;
172
+ overflow: hidden;
173
+ background: #f0f0f0;
174
+ color: var(--dark) !important;
175
+ }
176
+
177
+ /* Tabbed Interface Styling */
178
+ .stTabs [role="tablist"] {
179
+ gap: 10px;
180
+ padding: 8px;
181
+ background: rgba(240, 240, 240, 0.9);
182
+ border-radius: 12px;
183
+ color: var(--dark) !important;
184
+ }
185
+
186
+ .stTabs [role="tab"] {
187
+ background: #ffffff !important;
188
+ border-radius: 8px !important;
189
+ transition: all 0.3s ease;
190
+ color: var(--dark) !important;
191
+ }
192
+
193
+ .stTabs [role="tab"][aria-selected="true"] {
194
+ background: var(--primary) !important;
195
+ color: white !important;
196
+ transform: scale(1.05);
197
+ }