drf-to-mkdoc 0.2.1__py3-none-any.whl → 0.2.3__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of drf-to-mkdoc might be problematic. Click here for more details.

Files changed (59) hide show
  1. drf_to_mkdoc/conf/defaults.py +1 -0
  2. drf_to_mkdoc/conf/settings.py +0 -2
  3. drf_to_mkdoc/static/drf-to-mkdoc/javascripts/try-out/form-manager.js +172 -0
  4. drf_to_mkdoc/static/drf-to-mkdoc/javascripts/try-out/main.js +22 -0
  5. drf_to_mkdoc/static/drf-to-mkdoc/javascripts/try-out/modal.js +79 -0
  6. drf_to_mkdoc/static/drf-to-mkdoc/javascripts/try-out/request-executor.js +111 -0
  7. drf_to_mkdoc/static/drf-to-mkdoc/javascripts/try-out/suggestions.js +216 -0
  8. drf_to_mkdoc/static/drf-to-mkdoc/javascripts/try-out/tabs.js +34 -0
  9. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/buttons.css +71 -0
  10. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/fab.css +47 -0
  11. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/form.css +124 -0
  12. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/key-value.css +161 -0
  13. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/main.css +57 -0
  14. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/modal.css +112 -0
  15. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/response.css +158 -0
  16. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/tabs.css +62 -0
  17. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/variables.css +38 -0
  18. drf_to_mkdoc/templates/endpoints/detail/base.html +35 -0
  19. drf_to_mkdoc/templates/endpoints/detail/path_parameters.html +8 -0
  20. drf_to_mkdoc/templates/endpoints/detail/query_parameters.html +36 -0
  21. drf_to_mkdoc/templates/endpoints/detail/request_body.html +10 -0
  22. drf_to_mkdoc/templates/endpoints/detail/responses.html +18 -0
  23. drf_to_mkdoc/templates/endpoints/list/base.html +23 -0
  24. drf_to_mkdoc/templates/endpoints/list/endpoint_card.html +18 -0
  25. drf_to_mkdoc/templates/endpoints/list/filter_section.html +16 -0
  26. drf_to_mkdoc/templates/endpoints/list/filters/app.html +8 -0
  27. drf_to_mkdoc/templates/endpoints/list/filters/method.html +12 -0
  28. drf_to_mkdoc/templates/endpoints/list/filters/path.html +5 -0
  29. drf_to_mkdoc/templates/endpoints/list/filters/search.html +9 -0
  30. drf_to_mkdoc/templates/model_detail/base.html +34 -0
  31. drf_to_mkdoc/templates/model_detail/choices.html +12 -0
  32. drf_to_mkdoc/templates/model_detail/fields.html +11 -0
  33. drf_to_mkdoc/templates/model_detail/meta.html +6 -0
  34. drf_to_mkdoc/templates/model_detail/methods.html +9 -0
  35. drf_to_mkdoc/templates/model_detail/relationships.html +8 -0
  36. drf_to_mkdoc/templates/models_index.html +24 -0
  37. drf_to_mkdoc/templates/try-out/fab.html +4 -0
  38. drf_to_mkdoc/templates/try-out/form.html +113 -0
  39. drf_to_mkdoc/templates/try-out/main.html +4 -0
  40. drf_to_mkdoc/templates/try-out/modal.html +14 -0
  41. drf_to_mkdoc/templates/try-out/response-modal.html +20 -0
  42. drf_to_mkdoc/templatetags/custom_filters.py +148 -0
  43. drf_to_mkdoc/utils/commons/schema_utils.py +5 -14
  44. drf_to_mkdoc/utils/endpoint_detail_generator.py +201 -171
  45. drf_to_mkdoc/utils/endpoint_list_generator.py +58 -193
  46. drf_to_mkdoc/utils/extractors/query_parameter_extractors.py +0 -15
  47. drf_to_mkdoc/utils/model_detail_generator.py +22 -202
  48. drf_to_mkdoc/utils/model_list_generator.py +26 -44
  49. drf_to_mkdoc/utils/schema.py +1 -1
  50. {drf_to_mkdoc-0.2.1.dist-info → drf_to_mkdoc-0.2.3.dist-info}/METADATA +1 -1
  51. drf_to_mkdoc-0.2.3.dist-info/RECORD +103 -0
  52. drf_to_mkdoc/static/drf-to-mkdoc/javascripts/try-out-sidebar.js +0 -879
  53. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/try-out-sidebar.css +0 -728
  54. drf_to_mkdoc/utils/md_generators/__init__.py +0 -0
  55. drf_to_mkdoc/utils/md_generators/query_parameters_generators.py +0 -72
  56. drf_to_mkdoc-0.2.1.dist-info/RECORD +0 -67
  57. {drf_to_mkdoc-0.2.1.dist-info → drf_to_mkdoc-0.2.3.dist-info}/WHEEL +0 -0
  58. {drf_to_mkdoc-0.2.1.dist-info → drf_to_mkdoc-0.2.3.dist-info}/licenses/LICENSE +0 -0
  59. {drf_to_mkdoc-0.2.1.dist-info → drf_to_mkdoc-0.2.3.dist-info}/top_level.txt +0 -0
@@ -1,728 +0,0 @@
1
- /* Panel Container */
2
- .try-out-sidebar {
3
- background: linear-gradient(135deg, #e0f2ff, #ffffff);
4
- border: 1px solid #e1e5e9;
5
- border-radius: 16px;
6
- padding: 24px;
7
- margin-bottom: 32px;
8
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
9
- transition: all 0.3s ease;
10
- width: 100%;
11
- box-sizing: border-box;
12
- position: sticky;
13
- top: 20px;
14
- max-height: calc(100vh - 40px);
15
- overflow-y: auto;
16
- }
17
-
18
- /* Dark mode support */
19
- [data-md-color-scheme="slate"] .try-out-sidebar {
20
- background: linear-gradient(135deg, #1e293b, #334155);
21
- border-color: #475569;
22
- color: #e2e8f0;
23
- }
24
-
25
- [data-md-color-scheme="slate"] .try-out-sidebar h3 {
26
- color: #e2e8f0;
27
- }
28
-
29
- .try-out-sidebar h3 {
30
- font-size: 20px;
31
- font-weight: 700;
32
- color: var(--text-primary);
33
- margin-bottom: 20px;
34
- display: flex;
35
- align-items: center;
36
- gap: 8px;
37
- }
38
-
39
- /* Method Badge */
40
- .try-out-sidebar .method-badge {
41
- display: inline-block;
42
- padding: 3px 8px;
43
- border-radius: 4px;
44
- font-size: 12px;
45
- font-weight: 600;
46
- text-transform: uppercase;
47
- margin-bottom: 15px;
48
- }
49
-
50
- .try-out-sidebar .method-get { background: #e8f5e8; color: #2d5a2d; }
51
- .try-out-sidebar .method-post { background: #e3f2fd; color: #1565c0; }
52
- .try-out-sidebar .method-put { background: #fff3e0; color: #ef6c00; }
53
- .try-out-sidebar .method-patch { background: #f3e5f5; color: #7b1fa2; }
54
- .try-out-sidebar .method-delete { background: #ffebee; color: #c62828; }
55
-
56
- /* Form Elements */
57
- .try-out-sidebar .form-group {
58
- margin-bottom: 16px;
59
- }
60
-
61
- .try-out-sidebar .form-label {
62
- display: block;
63
- font-size: 13px;
64
- font-weight: 600;
65
- color: #495057;
66
- margin-bottom: 4px;
67
- }
68
-
69
- [data-md-color-scheme="slate"] .try-out-sidebar .form-label {
70
- color: #cbd5e1;
71
- }
72
-
73
- .try-out-sidebar .form-input {
74
- width: 100%;
75
- padding: 8px 10px;
76
- border: 1px solid #dee2e6;
77
- border-radius: 6px;
78
- font-size: 13px;
79
- background: #ffffff;
80
- color: #495057;
81
- transition: border 0.2s ease, box-shadow 0.2s ease;
82
- box-sizing: border-box;
83
- }
84
-
85
- [data-md-color-scheme="slate"] .try-out-sidebar .form-input {
86
- background: #475569;
87
- border-color: #64748b;
88
- color: #e2e8f0;
89
- }
90
-
91
- .try-out-sidebar .form-input:focus {
92
- outline: none;
93
- border-color: #3b82f6;
94
- box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
95
- }
96
-
97
- [data-md-color-scheme="slate"] .try-out-sidebar .form-input:focus {
98
- border-color: #60a5fa;
99
- box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
100
- }
101
-
102
- .try-out-sidebar .textarea {
103
- min-height: 100px;
104
- resize: vertical;
105
- font-family: monospace;
106
- font-size: 13px;
107
- }
108
-
109
- /* Tabs */
110
- .try-out-sidebar .tabs {
111
- display: flex;
112
- border-bottom: 2px solid #e9ecef;
113
- margin-bottom: 16px;
114
- background: #f8f9fa;
115
- border-radius: 6px 6px 0 0;
116
- overflow: hidden;
117
- }
118
-
119
- [data-md-color-scheme="slate"] .try-out-sidebar .tabs {
120
- background: #374151;
121
- border-bottom-color: #4b5563;
122
- }
123
-
124
- .try-out-sidebar .tab {
125
- flex: 1;
126
- padding: 10px 12px;
127
- background: transparent;
128
- border: none;
129
- cursor: pointer;
130
- font-weight: 500;
131
- color: #6c757d;
132
- transition: all 0.2s ease;
133
- position: relative;
134
- font-size: 13px;
135
- text-align: center;
136
- }
137
-
138
- [data-md-color-scheme="slate"] .try-out-sidebar .tab {
139
- color: #9ca3af;
140
- }
141
-
142
- .try-out-sidebar .tab:hover {
143
- color: #495057;
144
- background: rgba(59, 130, 246, 0.1);
145
- }
146
-
147
- [data-md-color-scheme="slate"] .try-out-sidebar .tab:hover {
148
- color: #e5e7eb;
149
- background: rgba(96, 165, 250, 0.1);
150
- }
151
-
152
- .try-out-sidebar .tab.active {
153
- color: #3b82f6;
154
- background: #ffffff;
155
- font-weight: 600;
156
- }
157
-
158
- [data-md-color-scheme="slate"] .try-out-sidebar .tab.active {
159
- color: #60a5fa;
160
- background: #475569;
161
- }
162
-
163
- .try-out-sidebar .tab.active::after {
164
- content: '';
165
- position: absolute;
166
- bottom: -2px;
167
- left: 0;
168
- right: 0;
169
- height: 2px;
170
- background: #3b82f6;
171
- }
172
-
173
- [data-md-color-scheme="slate"] .try-out-sidebar .tab.active::after {
174
- background: #60a5fa;
175
- }
176
-
177
- .try-out-sidebar .tab-content {
178
- display: none;
179
- }
180
-
181
- .try-out-sidebar .tab-content.active {
182
- display: block;
183
- }
184
-
185
- /* Key-Value Pairs */
186
- .try-out-sidebar .kv-container {
187
- margin-bottom: 12px;
188
- }
189
-
190
- .try-out-sidebar .kv-item {
191
- display: flex;
192
- flex-direction: column;
193
- gap: 6px;
194
- margin-bottom: 12px;
195
- padding: 12px;
196
- background: #f8f9fa;
197
- border-radius: 6px;
198
- border: 1px solid #e9ecef;
199
- }
200
-
201
- [data-md-color-scheme="slate"] .try-out-sidebar .kv-item {
202
- background: #374151;
203
- border-color: #4b5563;
204
- }
205
-
206
- .try-out-sidebar .kv-item input {
207
- width: 100%;
208
- padding: 8px 10px;
209
- border: 1px solid #dee2e6;
210
- border-radius: 4px;
211
- font-size: 13px;
212
- background: #ffffff;
213
- color: #495057;
214
- box-sizing: border-box;
215
- }
216
-
217
- [data-md-color-scheme="slate"] .try-out-sidebar .kv-item input {
218
- background: #475569;
219
- border-color: #64748b;
220
- color: #e2e8f0;
221
- }
222
-
223
- [data-md-color-scheme="slate"] .try-out-sidebar .kv-item input[readonly] {
224
- background: #374151;
225
- color: #9ca3af;
226
- }
227
-
228
- .try-out-sidebar .kv-item input:focus {
229
- outline: none;
230
- border-color: #3b82f6;
231
- box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
232
- }
233
-
234
- .try-out-sidebar .kv-item input.error {
235
- border-color: #dc3545;
236
- box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1);
237
- animation: shake 0.3s ease-in-out;
238
- }
239
-
240
- @keyframes shake {
241
- 0%, 100% { transform: translateX(0); }
242
- 25% { transform: translateX(-2px); }
243
- 75% { transform: translateX(2px); }
244
- }
245
-
246
- /* Parameter labels */
247
- .try-out-sidebar .param-label {
248
- font-size: 13px;
249
- font-weight: 600;
250
- color: #495057;
251
- margin-bottom: 4px;
252
- display: block;
253
- background: #f8f9fa;
254
- padding: 6px 10px;
255
- border-radius: 4px;
256
- border: 1px solid #e9ecef;
257
- }
258
-
259
- [data-md-color-scheme="slate"] .try-out-sidebar .param-label {
260
- color: #cbd5e1;
261
- background: #374151;
262
- border-color: #4b5563;
263
- }
264
-
265
- .try-out-sidebar .kv-item .remove-btn {
266
- background: #dc3545;
267
- color: white;
268
- border: none;
269
- border-radius: 4px;
270
- width: 32px;
271
- height: 32px;
272
- cursor: pointer;
273
- display: flex;
274
- align-items: center;
275
- justify-content: center;
276
- align-self: flex-end;
277
- margin-top: 4px;
278
- }
279
-
280
- .try-out-sidebar .add-btn {
281
- background: #28a745;
282
- color: white;
283
- border: none;
284
- padding: 6px 12px;
285
- border-radius: 6px;
286
- font-size: 13px;
287
- cursor: pointer;
288
- display: flex;
289
- align-items: center;
290
- gap: 5px;
291
- transition: background 0.2s ease;
292
- }
293
-
294
- .try-out-sidebar .add-btn:hover {
295
- background: #218838;
296
- }
297
-
298
- /* Execute Button */
299
- .try-out-sidebar .execute-btn {
300
- width: 100%;
301
- background: #007bff;
302
- color: white;
303
- border: none;
304
- padding: 10px;
305
- border-radius: 8px;
306
- font-size: 14px;
307
- font-weight: 600;
308
- cursor: pointer;
309
- margin-top: 16px;
310
- display: flex;
311
- align-items: center;
312
- justify-content: center;
313
- gap: 8px;
314
- transition: background 0.2s ease;
315
- }
316
-
317
- .try-out-sidebar .execute-btn:hover:not(:disabled) {
318
- background: #0056b3;
319
- }
320
-
321
- .try-out-sidebar .execute-btn:disabled {
322
- background: #6c757d;
323
- cursor: not-allowed;
324
- }
325
-
326
- /* Response Section */
327
- .try-out-sidebar .response-section {
328
- margin-top: 20px;
329
- padding-top: 16px;
330
- border-top: 1px solid var(--border-color);
331
- }
332
-
333
- .try-out-sidebar .response-header {
334
- display: flex;
335
- align-items: center;
336
- justify-content: space-between;
337
- margin-bottom: 12px;
338
- }
339
-
340
- .try-out-sidebar .response-header h4 {
341
- font-size: 15px;
342
- margin: 0;
343
- }
344
-
345
- .try-out-sidebar .status-badge {
346
- padding: 3px 6px;
347
- border-radius: 4px;
348
- font-size: 12px;
349
- font-weight: 600;
350
- }
351
-
352
- .try-out-sidebar .status-200 { background: #d4edda; color: #155724; }
353
- .try-out-sidebar .status-201 { background: #d4edda; color: #155724; }
354
- .try-out-sidebar .status-400 { background: #f8d7da; color: #721c24; }
355
- .try-out-sidebar .status-401 { background: #f8d7da; color: #721c24; }
356
- .try-out-sidebar .status-404 { background: #f8d7da; color: #721c24; }
357
- .try-out-sidebar .status-500 { background: #f5c6cb; color: #721c24; }
358
-
359
- .try-out-sidebar .response-body {
360
- background: #f8f9fa;
361
- border: 1px solid #e9ecef;
362
- border-radius: 6px;
363
- padding: 12px;
364
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
365
- font-size: 12px;
366
- white-space: pre-wrap;
367
- max-height: 200px;
368
- overflow-y: auto;
369
- word-break: break-word;
370
- color: #495057;
371
- }
372
-
373
- /* Loading Spinner */
374
- .try-out-sidebar .spinner {
375
- width: 16px;
376
- height: 16px;
377
- border: 2px solid #ffffff;
378
- border-top: 2px solid transparent;
379
- border-radius: 50%;
380
- animation: spin 1s linear infinite;
381
- }
382
-
383
- @keyframes spin {
384
- 0% { transform: rotate(0deg); }
385
- 100% { transform: rotate(360deg); }
386
- }
387
-
388
- /* Focus-visible styles for better keyboard navigation */
389
- .try-out-sidebar .execute-btn:focus-visible,
390
- .try-out-sidebar .add-btn:focus-visible,
391
- .try-out-sidebar .remove-btn:focus-visible,
392
- .modal-close:focus-visible,
393
- .mobile-modal-close:focus-visible,
394
- .mobile-try-out-fab:focus-visible {
395
- outline: 2px solid #3b82f6;
396
- outline-offset: 2px;
397
- }
398
-
399
- [data-md-color-scheme="slate"] .try-out-sidebar .execute-btn:focus-visible,
400
- [data-md-color-scheme="slate"] .try-out-sidebar .add-btn:focus-visible,
401
- [data-md-color-scheme="slate"] .try-out-sidebar .remove-btn:focus-visible,
402
- [data-md-color-scheme="slate"] .modal-close:focus-visible,
403
- [data-md-color-scheme="slate"] .mobile-modal-close:focus-visible,
404
- [data-md-color-scheme="slate"] .mobile-try-out-fab:focus-visible {
405
- outline-color: #60a5fa;
406
- }
407
-
408
- /* Fix for MkDocs integration */
409
- @media (min-width: 1220px) {
410
- /* Keep navigation; panel will coexist with it */
411
- }
412
-
413
- /* Ensure sidebar extends to bottom and document has enough space */
414
- .md-sidebar--primary {
415
- min-height: calc(100vh - 40px);
416
- }
417
-
418
- /* Add minimum height to main content to ensure white space at bottom if needed */
419
- .md-main__inner {
420
- min-height: calc(100vh - 40px);
421
- }
422
-
423
- /* Ensure the try-out sidebar fills available space */
424
- .try-out-sidebar {
425
- min-height: calc(100vh - 120px);
426
- }
427
-
428
- /* Response Modal Styles */
429
- #responseModal {
430
- position: fixed;
431
- top: 0;
432
- left: 0;
433
- width: 100vw;
434
- height: 100vh;
435
- z-index: 10000;
436
- display: flex;
437
- align-items: center;
438
- justify-content: center;
439
- padding: 20px;
440
- box-sizing: border-box;
441
- }
442
-
443
- .modal-overlay {
444
- position: fixed;
445
- top: 0;
446
- left: 0;
447
- width: 100vw;
448
- height: 100vh;
449
- background: rgba(0, 0, 0, 0.5);
450
- cursor: pointer;
451
- z-index: 10000;
452
- }
453
-
454
- .modal-content {
455
- position: fixed;
456
- top: 50%;
457
- left: 50%;
458
- transform: translate(-50%, -50%);
459
- background: white;
460
- border-radius: 12px;
461
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
462
- max-width: 800px;
463
- width: 90%;
464
- max-height: 80vh;
465
- overflow: hidden;
466
- z-index: 10001;
467
- }
468
-
469
- [data-md-color-scheme="slate"] .modal-content {
470
- background: #1e293b;
471
- color: #e2e8f0;
472
- }
473
-
474
- .modal-header {
475
- display: flex;
476
- justify-content: space-between;
477
- align-items: center;
478
- padding: 20px;
479
- border-bottom: 1px solid #e9ecef;
480
- background: #f8f9fa;
481
- }
482
-
483
- [data-md-color-scheme="slate"] .modal-header {
484
- background: #374151;
485
- border-bottom-color: #4b5563;
486
- }
487
-
488
- .modal-header h3 {
489
- margin: 0;
490
- font-size: 18px;
491
- font-weight: 600;
492
- }
493
-
494
- .modal-close {
495
- background: none;
496
- border: none;
497
- font-size: 24px;
498
- cursor: pointer;
499
- color: #6c757d;
500
- padding: 0;
501
- width: 30px;
502
- height: 30px;
503
- display: flex;
504
- align-items: center;
505
- justify-content: center;
506
- border-radius: 4px;
507
- }
508
-
509
- [data-md-color-scheme="slate"] .modal-close {
510
- color: #9ca3af;
511
- }
512
-
513
- .modal-close:hover {
514
- background: rgba(0, 0, 0, 0.1);
515
- }
516
-
517
- [data-md-color-scheme="slate"] .modal-close:hover {
518
- background: rgba(255, 255, 255, 0.1);
519
- }
520
-
521
- .modal-body {
522
- padding: 20px;
523
- max-height: calc(70vh - 80px);
524
- overflow-y: auto;
525
- -webkit-overflow-scrolling: touch;
526
- }
527
-
528
- .modal-body .response-header {
529
- display: flex;
530
- align-items: center;
531
- gap: 10px;
532
- margin-bottom: 15px;
533
- font-weight: 600;
534
- }
535
-
536
- .modal-body .response-body {
537
- background: #f8f9fa;
538
- border: 1px solid #e9ecef;
539
- border-radius: 8px;
540
- padding: 15px;
541
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
542
- font-size: 13px;
543
- white-space: pre-wrap;
544
- overflow-x: auto;
545
- color: #495057;
546
- max-height: 400px;
547
- overflow-y: auto;
548
- }
549
-
550
- [data-md-color-scheme="slate"] .modal-body .response-body {
551
- background: #374151;
552
- border-color: #4b5563;
553
- color: #e2e8f0;
554
- }
555
-
556
- /* Mobile Try-Out Floating Action Button */
557
- .mobile-try-out-fab {
558
- position: fixed;
559
- bottom: 20px;
560
- right: 20px;
561
- width: 60px;
562
- height: 60px;
563
- background: linear-gradient(135deg, #007bff, #0056b3);
564
- border-radius: 50%;
565
- display: flex;
566
- align-items: center;
567
- justify-content: center;
568
- cursor: pointer;
569
- box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
570
- z-index: 1000;
571
- transition: all 0.3s ease;
572
- }
573
-
574
- .mobile-try-out-fab:hover {
575
- transform: scale(1.1);
576
- box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
577
- }
578
-
579
- .mobile-try-out-fab span {
580
- font-size: 24px;
581
- }
582
-
583
- /* Mobile Try-Out Modal */
584
- .mobile-try-out-modal {
585
- position: fixed;
586
- top: 0;
587
- left: 0;
588
- width: 100vw;
589
- height: 100vh;
590
- z-index: 10000;
591
- display: flex;
592
- align-items: flex-end;
593
- }
594
-
595
- .mobile-modal-overlay {
596
- position: fixed;
597
- top: 0;
598
- left: 0;
599
- width: 100vw;
600
- height: 100vh;
601
- background: rgba(0, 0, 0, 0.5);
602
- cursor: pointer;
603
- z-index: 10000;
604
- }
605
-
606
- .mobile-modal-content {
607
- position: relative;
608
- background: white;
609
- border-radius: 20px;
610
- width: calc(100% - 32px);
611
- max-height: 90vh;
612
- overflow: hidden;
613
- z-index: 10001;
614
- animation: slideUp 0.3s ease-out;
615
- margin: 16px;
616
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
617
- }
618
-
619
- [data-md-color-scheme="slate"] .mobile-modal-content {
620
- background: #1e293b;
621
- color: #e2e8f0;
622
- }
623
-
624
- @keyframes slideUp {
625
- from {
626
- transform: translateY(100%);
627
- }
628
- to {
629
- transform: translateY(0);
630
- }
631
- }
632
-
633
- .mobile-modal-header {
634
- display: flex;
635
- justify-content: space-between;
636
- align-items: center;
637
- padding: 20px;
638
- border-bottom: 1px solid #e9ecef;
639
- background: #f8f9fa;
640
- }
641
-
642
- [data-md-color-scheme="slate"] .mobile-modal-header {
643
- background: #374151;
644
- border-bottom-color: #4b5563;
645
- }
646
-
647
- .mobile-modal-header h3 {
648
- margin: 0;
649
- font-size: 18px;
650
- font-weight: 600;
651
- }
652
-
653
- .mobile-modal-close {
654
- background: none;
655
- border: none;
656
- font-size: 24px;
657
- cursor: pointer;
658
- color: #6c757d;
659
- padding: 0;
660
- width: 30px;
661
- height: 30px;
662
- display: flex;
663
- align-items: center;
664
- justify-content: center;
665
- border-radius: 4px;
666
- }
667
-
668
- [data-md-color-scheme="slate"] .mobile-modal-close {
669
- color: #9ca3af;
670
- }
671
-
672
- .mobile-modal-close:hover {
673
- background: rgba(0, 0, 0, 0.1);
674
- }
675
-
676
- [data-md-color-scheme="slate"] .mobile-modal-close:hover {
677
- background: rgba(255, 255, 255, 0.1);
678
- }
679
-
680
- .mobile-modal-body {
681
- padding: 20px;
682
- max-height: calc(90vh - 80px);
683
- overflow-y: auto;
684
- }
685
-
686
- /* Mobile Try-Out Panel Adjustments */
687
- .mobile-try-out {
688
- position: static !important;
689
- max-height: none !important;
690
- margin: 0 !important;
691
- padding: 0 !important;
692
- background: transparent !important;
693
- border: none !important;
694
- box-shadow: none !important;
695
- }
696
-
697
- /* Hide desktop sidebar on mobile and tablet when FAB is present */
698
- @media (max-width: 768px) {
699
- .md-sidebar--primary .try-out-sidebar {
700
- display: none;
701
- }
702
- }
703
-
704
- /* Mobile responsive modal */
705
- @media (max-width: 768px) {
706
- .modal-content {
707
- width: 95%;
708
- max-height: 90vh;
709
- }
710
-
711
- .modal-header {
712
- padding: 15px;
713
- }
714
-
715
- .modal-body {
716
- padding: 15px;
717
- }
718
-
719
- .modal-body .response-body {
720
- font-size: 12px;
721
- padding: 12px;
722
- }
723
-
724
- /* Ensure mobile FAB doesn't interfere with hamburger menu */
725
- .mobile-try-out-fab {
726
- bottom: 80px; /* Move up to avoid bottom navigation */
727
- }
728
- }
File without changes