malaknihed commited on
Commit
e6f8720
·
verified ·
1 Parent(s): aa34f1f

Update static/style.css

Browse files
Files changed (1) hide show
  1. static/style.css +30 -43
static/style.css CHANGED
@@ -109,7 +109,7 @@ body::before {
109
  background-clip: padding-box;
110
  }
111
 
112
- /* Dégradé incliné autour du bouton */
113
  .menu-btn::before {
114
  content: '';
115
  position: absolute;
@@ -120,7 +120,7 @@ body::before {
120
  background: linear-gradient(135deg,#419FE899 0%, #A35EED99 100%);
121
  z-index: -1;
122
  border-radius: 10px;
123
- transform: rotate(3deg); /* Inclinaison du dégradé */
124
  }
125
 
126
  .menu-btn:hover {
@@ -153,7 +153,7 @@ body::before {
153
  padding: 30px;
154
  background: transparent;
155
  }
156
- /* Styles complémentaires */
157
  .document-container {
158
  max-width: 800px;
159
  margin: 0 auto;
@@ -165,28 +165,18 @@ body::before {
165
  text-align: left;
166
  margin-left: 0;
167
  margin-bottom: 30px;
168
- /*font-size: 1.8rem;
169
- margin-bottom: 0.5rem;
170
- font-weight: 600;*/
171
  }
172
 
173
  .document-subtitle {
174
- /*
175
- font-size: 1.4rem;
176
- margin-top: 0;
177
- margin-bottom: 2rem;
178
- font-weight: 500;*/
179
  color: black;
180
  text-align: center;
181
  margin-bottom: 50px;
182
  }
183
 
184
  .upload-container {
185
- /* background: transparent;
186
- margin-bottom: 2rem;
187
- display: flex;
188
- flex-direction: column;
189
- align-items: center;*/
190
  display: flex;
191
  flex-direction: column;
192
  align-items: center;
@@ -205,11 +195,11 @@ body::before {
205
  transition: all 0.3s ease;
206
  cursor: pointer;
207
  gap: 10px;
208
- width: 100%; /* Largeur fixe par rapport au parent */
209
- max-width: 600px; /* Empêche qu'elle devienne trop large */
210
- overflow: hidden; /* Coupe le texte qui dépasse */
211
- white-space: nowrap; /* Empêche le texte de passer à la ligne */
212
- text-overflow: ellipsis; /* Ajoute "..." si le texte est trop long */
213
  }
214
 
215
 
@@ -230,7 +220,7 @@ body::before {
230
 
231
 
232
  .file-input {
233
- opacity: 0; /* Rendu invisible mais reste cliquable */
234
  position: absolute;
235
  width: 100%;
236
  height: 100%;
@@ -277,8 +267,7 @@ body::before {
277
  color: black;
278
  }
279
  .scrollable-text {
280
- max-height: 150px; /* adapte selon la hauteur que tu veux */
281
- overflow-y: auto;
282
  padding-right: 10px;
283
  margin-bottom: 20px;
284
  text-align: center;
@@ -312,8 +301,8 @@ grid-template-areas:
312
  grid-template-columns: 1fr 1fr;
313
  gap: 20px;
314
  margin: 20px 10px;
315
- width: 80%; /* Ajustez la largeur du conteneur selon vos besoins */
316
- max-width: 600px; /* Limite la largeur maximale pour les grands écrans */
317
  }
318
 
319
  .operations-images {
@@ -379,14 +368,14 @@ background-clip: padding-box;
379
 
380
 
381
  .button {
382
- background: white; /* Couleur de fond blanche par défaut */
383
  border: none;
384
  padding: 15px 25px;
385
  margin: 10px 0;
386
  border-radius: 10px;
387
  font-size: 16px;
388
  cursor: pointer;
389
- position: relative; /* Nécessaire pour positionner le pseudo-élément ::before */
390
  width: 100%;
391
  background-clip: padding-box;
392
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
@@ -405,7 +394,7 @@ bottom: -4px;
405
  background: linear-gradient(135deg, #419FE899 0%,#A35EED99 100%);
406
  z-index: -1;
407
  border-radius: 10px;
408
- transform: rotate(3deg); /* Inclinaison du dégradé */
409
  }
410
 
411
  .button:hover {
@@ -423,7 +412,7 @@ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
423
  }
424
 
425
  #questionInput {
426
- flex-grow: 1; /* L'input prend tout l'espace disponible */
427
  padding: 5px;
428
  font-size: 1.2rem;
429
 
@@ -468,9 +457,9 @@ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
468
  gap: 0px;
469
  width: 600px;
470
  height:100px ;
471
- overflow: hidden; /* Coupe le texte qui dépasse */
472
- white-space: nowrap; /* Empêche le texte de passer à la ligne */
473
- text-overflow: ellipsis; /* Ajoute "..." si le texte est trop long */
474
  }
475
 
476
  .questionn-container {
@@ -483,7 +472,7 @@ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
483
  }
484
 
485
  #questionnInput {
486
- flex-grow: 1; /* L'input prend tout l'espace disponible */
487
  padding: 5px;
488
  font-size: 1.2rem;
489
 
@@ -528,9 +517,9 @@ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
528
  gap: 0px;
529
  width: 600px;
530
  height:100px ;
531
- overflow: hidden; /* Coupe le texte qui dépasse */
532
- white-space: nowrap; /* Empêche le texte de passer à la ligne */
533
- text-overflow: ellipsis; /* Ajoute "..." si le texte est trop long */
534
  }
535
  .resultss-container {
536
  background: white;
@@ -551,7 +540,7 @@ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
551
  .action-container {
552
  display: flex;
553
  align-items: center;
554
- gap: 200px; /* Espacement entre les éléments */
555
  margin-top: 5px;
556
  }
557
 
@@ -563,7 +552,7 @@ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
563
  padding: 10px ;
564
  border-radius: 5px;
565
  border: 1px solid #ccc;
566
- font-size: 16px; /* Agrandit le texte */
567
  width: 200px;
568
 
569
  }
@@ -645,11 +634,11 @@ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
645
  #fileInput → #graphFileInput
646
  #graphType → #graphTypeSelect
647
 
648
- /* Nouveaux styles avec les IDs modifiés */
649
  #graphResultImage {
650
  max-width: 100%;
651
  max-height: 450px;
652
- display: none; /* Reste caché par défaut */
653
  margin: 0 auto;
654
  border-radius: 8px;
655
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -688,8 +677,6 @@ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
688
  cursor: pointer;
689
  }
690
 
691
- /* Zones de résultats modifiées */
692
- /* Empêche tout rechargement involontaire */
693
  body, html {
694
  overscroll-behavior: contain;
695
  }
 
109
  background-clip: padding-box;
110
  }
111
 
112
+
113
  .menu-btn::before {
114
  content: '';
115
  position: absolute;
 
120
  background: linear-gradient(135deg,#419FE899 0%, #A35EED99 100%);
121
  z-index: -1;
122
  border-radius: 10px;
123
+ transform: rotate(3deg);
124
  }
125
 
126
  .menu-btn:hover {
 
153
  padding: 30px;
154
  background: transparent;
155
  }
156
+
157
  .document-container {
158
  max-width: 800px;
159
  margin: 0 auto;
 
165
  text-align: left;
166
  margin-left: 0;
167
  margin-bottom: 30px;
168
+
 
 
169
  }
170
 
171
  .document-subtitle {
172
+
 
 
 
 
173
  color: black;
174
  text-align: center;
175
  margin-bottom: 50px;
176
  }
177
 
178
  .upload-container {
179
+
 
 
 
 
180
  display: flex;
181
  flex-direction: column;
182
  align-items: center;
 
195
  transition: all 0.3s ease;
196
  cursor: pointer;
197
  gap: 10px;
198
+ width: 100%;
199
+ max-width: 600px;
200
+ overflow: hidden;
201
+ white-space: nowrap;
202
+ text-overflow: ellipsis;
203
  }
204
 
205
 
 
220
 
221
 
222
  .file-input {
223
+ opacity: 0;
224
  position: absolute;
225
  width: 100%;
226
  height: 100%;
 
267
  color: black;
268
  }
269
  .scrollable-text {
270
+ max-height: 150px;
 
271
  padding-right: 10px;
272
  margin-bottom: 20px;
273
  text-align: center;
 
301
  grid-template-columns: 1fr 1fr;
302
  gap: 20px;
303
  margin: 20px 10px;
304
+ width: 80%;
305
+ max-width: 600px;
306
  }
307
 
308
  .operations-images {
 
368
 
369
 
370
  .button {
371
+ background: white;
372
  border: none;
373
  padding: 15px 25px;
374
  margin: 10px 0;
375
  border-radius: 10px;
376
  font-size: 16px;
377
  cursor: pointer;
378
+ position: relative;
379
  width: 100%;
380
  background-clip: padding-box;
381
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 
394
  background: linear-gradient(135deg, #419FE899 0%,#A35EED99 100%);
395
  z-index: -1;
396
  border-radius: 10px;
397
+ transform: rotate(3deg);
398
  }
399
 
400
  .button:hover {
 
412
  }
413
 
414
  #questionInput {
415
+ flex-grow: 1;
416
  padding: 5px;
417
  font-size: 1.2rem;
418
 
 
457
  gap: 0px;
458
  width: 600px;
459
  height:100px ;
460
+ overflow: hidden;
461
+ white-space: nowrap;
462
+ text-overflow: ellipsis;
463
  }
464
 
465
  .questionn-container {
 
472
  }
473
 
474
  #questionnInput {
475
+ flex-grow: 1;
476
  padding: 5px;
477
  font-size: 1.2rem;
478
 
 
517
  gap: 0px;
518
  width: 600px;
519
  height:100px ;
520
+ overflow: hidden;
521
+ white-space: nowrap;
522
+ text-overflow: ellipsis;
523
  }
524
  .resultss-container {
525
  background: white;
 
540
  .action-container {
541
  display: flex;
542
  align-items: center;
543
+ gap: 200px;
544
  margin-top: 5px;
545
  }
546
 
 
552
  padding: 10px ;
553
  border-radius: 5px;
554
  border: 1px solid #ccc;
555
+ font-size: 16px;
556
  width: 200px;
557
 
558
  }
 
634
  #fileInput → #graphFileInput
635
  #graphType → #graphTypeSelect
636
 
637
+
638
  #graphResultImage {
639
  max-width: 100%;
640
  max-height: 450px;
641
+ display: none;
642
  margin: 0 auto;
643
  border-radius: 8px;
644
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
677
  cursor: pointer;
678
  }
679
 
 
 
680
  body, html {
681
  overscroll-behavior: contain;
682
  }