Hugging Face's logo

Spaces:
gui-sparim
/
MODELOS_DAI_DAVID_V2
Sleeping

App Files Community
gui-sparim commited on
Commit
2bd70c7
·
verified ·
1 Parent(s): ab2cf3f

Upload styles.css

Browse files
Files changed (1) hide show
  1. styles.css +254 -0
styles.css ADDED
@@ -0,0 +1,254 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* ============================================================
2
+ STYLES.CSS - CSS Centralizado para app_v4.py
3
+ ============================================================ */
4
+
5
+ /* ============================================================
6
+ CLASSES REUTILIZÁVEIS (para HTML gerado pelo Python)
7
+ ============================================================ */
8
+
9
+ /* ----- Título de Seção com Borda Laranja ----- */
10
+ .section-title-orange {
11
+ font-weight: 600;
12
+ color: #4a5568;
13
+ margin-bottom: 12px;
14
+ padding: 8px 12px;
15
+ border-left: 4px solid #FF8C00;
16
+ background: linear-gradient(90deg, #fff8f0 0%, white 100%);
17
+ font-size: 14px;
18
+ text-transform: uppercase;
19
+ letter-spacing: 0.3px;
20
+ border-radius: 0 6px 6px 0;
21
+ }
22
+
23
+ .section-title-orange-solid {
24
+ font-weight: 600;
25
+ color: #4a5568;
26
+ margin: 16px 0 8px 0;
27
+ padding: 8px 12px;
28
+ border-left: 4px solid #FF8C00;
29
+ background: #fff8f0;
30
+ font-size: 14px;
31
+ text-transform: uppercase;
32
+ letter-spacing: 0.3px;
33
+ }
34
+
35
+ /* ----- Card / Container Padrão ----- */
36
+ .dai-card {
37
+ font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
38
+ background: white;
39
+ border-radius: 12px;
40
+ padding: 20px;
41
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
42
+ line-height: 1.4;
43
+ }
44
+
45
+ .dai-card-light {
46
+ display: inline-flex;
47
+ align-items: center;
48
+ padding: 10px 14px;
49
+ background: linear-gradient(135deg, white 0%, #f8f9fa 100%);
50
+ border-radius: 8px;
51
+ border: 1px solid #e9ecef;
52
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
53
+ white-space: nowrap;
54
+ box-sizing: border-box;
55
+ }
56
+
57
+ /* ----- Linha Campo-Valor (Flexbox) ----- */
58
+ .field-row {
59
+ display: flex;
60
+ justify-content: space-between;
61
+ align-items: flex-start;
62
+ padding: 8px 12px;
63
+ margin: 2px 0;
64
+ font-size: 13px;
65
+ gap: 16px;
66
+ }
67
+
68
+ .field-row-label {
69
+ font-weight: 500;
70
+ flex-shrink: 0;
71
+ }
72
+
73
+ .field-row-value {
74
+ font-weight: 500;
75
+ font-family: 'Consolas', monospace;
76
+ }
77
+
78
+ .field-row-value-italic {
79
+ font-style: italic;
80
+ }
81
+
82
+ /* ----- Equação do Modelo ----- */
83
+ .equation-box {
84
+ padding: 12px;
85
+ margin: 4px 0;
86
+ font-size: 12px;
87
+ font-family: 'Consolas', monospace;
88
+ word-break: break-word;
89
+ background: #f8f9fa;
90
+ border-radius: 6px;
91
+ border-left: 3px solid #FF8C00;
92
+ }
93
+
94
+ /* ----- Interpretação (lista) ----- */
95
+ .interpretation-label {
96
+ padding: 8px 12px;
97
+ margin: 2px 0;
98
+ font-size: 13px;
99
+ font-weight: 500;
100
+ }
101
+
102
+ .interpretation-item {
103
+ padding: 4px 12px 4px 24px;
104
+ margin: 1px 0;
105
+ font-size: 13px;
106
+ font-style: italic;
107
+ }
108
+
109
+ /* ----- Placeholder / Em Desenvolvimento ----- */
110
+ .placeholder-alert {
111
+ padding: 20px;
112
+ background: linear-gradient(135deg, #f8f9fa 0%, white 100%);
113
+ border-radius: 10px;
114
+ border: 1px dashed #dee2e6;
115
+ text-align: center;
116
+ color: #6c757d;
117
+ }
118
+
119
+ .placeholder-alert-title {
120
+ font-weight: 600;
121
+ margin-bottom: 8px;
122
+ }
123
+
124
+ .placeholder-alert-text {
125
+ font-size: 13px;
126
+ margin: 0;
127
+ }
128
+
129
+ /* ----- Grid de Cards ----- */
130
+ .dai-cards-grid {
131
+ display: grid;
132
+ gap: 8px;
133
+ padding: 16px;
134
+ background: linear-gradient(180deg, #fafbfc 0%, #f5f6f7 100%);
135
+ border-radius: 10px;
136
+ max-height: 360px;
137
+ overflow-y: auto;
138
+ }
139
+
140
+ /* ----- Container com Scroll ----- */
141
+ .scrollable-container {
142
+ max-height: 700px;
143
+ overflow-y: auto;
144
+ }
145
+
146
+ /* ============================================================
147
+ GRADIO - ESTILOS ESPECÍFICOS (IDÊNTICO AO APP_V3.PY)
148
+ ============================================================ */
149
+
150
+ .gradio-container {
151
+ max-width: 100% !important;
152
+ padding: 15px !important;
153
+ background: #f5f5f5 !important;
154
+ }
155
+
156
+ /* ===== ÁREA DE UPLOAD ===== */
157
+ .upload-area {
158
+ background: white !important;
159
+ border-radius: 12px !important;
160
+ padding: 20px !important;
161
+ margin-bottom: 15px !important;
162
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
163
+ border: 1px solid #e0e0e0 !important;
164
+ }
165
+
166
+ .upload-area .row {
167
+ margin-top: 15px !important;
168
+ padding: 15px !important;
169
+ background: #fafafa !important;
170
+ border-radius: 8px !important;
171
+ }
172
+
173
+ /* ===== LAYOUT PRINCIPAL ===== */
174
+ .main-row {
175
+ gap: 15px !important;
176
+ }
177
+
178
+ /* ===== PAINEL DE ABAS (ESQUERDA) ===== */
179
+ .left-panel {
180
+ background: white !important;
181
+ border-radius: 12px !important;
182
+ padding: 15px !important;
183
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
184
+ border: 1px solid #e0e0e0 !important;
185
+ }
186
+
187
+ .tabs-container .tab-nav {
188
+ font-size: 13px !important;
189
+ }
190
+
191
+ /* ===== PAINEL DO MAPA (DIREITA) ===== */
192
+ .map-panel {
193
+ background: white !important;
194
+ border-radius: 12px !important;
195
+ padding: 15px !important;
196
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
197
+ border: 1px solid #e0e0e0 !important;
198
+ }
199
+
200
+ .map-panel iframe {
201
+ border-radius: 8px !important;
202
+ }
203
+
204
+ #map-frame {
205
+ border-radius: 8px;
206
+ }
207
+
208
+ /* ===== TÍTULOS DE SEÇÃO ===== */
209
+ .section-title {
210
+ color: #4a5568 !important;
211
+ font-weight: 600 !important;
212
+ font-size: 14px !important;
213
+ letter-spacing: 0.3px !important;
214
+ margin-bottom: 10px !important;
215
+ }
216
+
217
+ /* ===== LABELS DOS COMPONENTES COM ESTILO LARANJA ===== */
218
+ .left-panel .label-wrap span,
219
+ .left-panel label > span:first-child,
220
+ .left-panel .wrap > label > span {
221
+ font-weight: 600 !important;
222
+ color: #4a5568 !important;
223
+ font-size: 13px !important;
224
+ letter-spacing: 0.3px !important;
225
+ text-transform: uppercase !important;
226
+ padding: 6px 10px !important;
227
+ border-left: 3px solid #FF8C00 !important;
228
+ background: linear-gradient(90deg, #fff8f0 0%, transparent 100%) !important;
229
+ border-radius: 0 4px 4px 0 !important;
230
+ display: inline-block !important;
231
+ margin-bottom: 8px !important;
232
+ }
233
+
234
+ /* Estilo para o título do mapa */
235
+ .map-panel .section-title h3,
236
+ .map-panel .section-title {
237
+ font-weight: 600 !important;
238
+ color: #4a5568 !important;
239
+ font-size: 14px !important;
240
+ letter-spacing: 0.3px !important;
241
+ text-transform: uppercase !important;
242
+ padding: 8px 12px !important;
243
+ border-left: 4px solid #FF8C00 !important;
244
+ background: linear-gradient(90deg, #fff8f0 0%, transparent 100%) !important;
245
+ border-radius: 0 6px 6px 0 !important;
246
+ margin-bottom: 12px !important;
247
+ }
248
+
249
+ .map-panel .section-title h3 {
250
+ margin: 0 !important;
251
+ padding: 0 !important;
252
+ border: none !important;
253
+ background: none !important;
254
+ }