drf-to-mkdoc 0.1.9__py3-none-any.whl → 0.2.1__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 (35) hide show
  1. drf_to_mkdoc/conf/defaults.py +5 -0
  2. drf_to_mkdoc/conf/settings.py +123 -9
  3. drf_to_mkdoc/management/commands/build_docs.py +8 -7
  4. drf_to_mkdoc/management/commands/build_endpoint_docs.py +69 -0
  5. drf_to_mkdoc/management/commands/build_model_docs.py +50 -0
  6. drf_to_mkdoc/management/commands/{generate_model_docs.py → extract_model_data.py} +18 -24
  7. drf_to_mkdoc/static/drf-to-mkdoc/javascripts/try-out-sidebar.js +879 -0
  8. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/try-out-sidebar.css +728 -0
  9. drf_to_mkdoc/utils/ai_tools/__init__.py +0 -0
  10. drf_to_mkdoc/utils/ai_tools/enums.py +13 -0
  11. drf_to_mkdoc/utils/ai_tools/exceptions.py +19 -0
  12. drf_to_mkdoc/utils/ai_tools/providers/__init__.py +0 -0
  13. drf_to_mkdoc/utils/ai_tools/providers/base_provider.py +123 -0
  14. drf_to_mkdoc/utils/ai_tools/providers/gemini_provider.py +80 -0
  15. drf_to_mkdoc/utils/ai_tools/types.py +81 -0
  16. drf_to_mkdoc/utils/commons/__init__.py +0 -0
  17. drf_to_mkdoc/utils/commons/code_extractor.py +22 -0
  18. drf_to_mkdoc/utils/commons/file_utils.py +35 -0
  19. drf_to_mkdoc/utils/commons/model_utils.py +83 -0
  20. drf_to_mkdoc/utils/commons/operation_utils.py +83 -0
  21. drf_to_mkdoc/utils/commons/path_utils.py +78 -0
  22. drf_to_mkdoc/utils/commons/schema_utils.py +230 -0
  23. drf_to_mkdoc/utils/endpoint_detail_generator.py +16 -35
  24. drf_to_mkdoc/utils/endpoint_list_generator.py +1 -1
  25. drf_to_mkdoc/utils/extractors/query_parameter_extractors.py +33 -30
  26. drf_to_mkdoc/utils/model_detail_generator.py +44 -40
  27. drf_to_mkdoc/utils/model_list_generator.py +25 -15
  28. drf_to_mkdoc/utils/schema.py +259 -0
  29. {drf_to_mkdoc-0.1.9.dist-info → drf_to_mkdoc-0.2.1.dist-info}/METADATA +16 -5
  30. {drf_to_mkdoc-0.1.9.dist-info → drf_to_mkdoc-0.2.1.dist-info}/RECORD +33 -16
  31. drf_to_mkdoc/management/commands/generate_docs.py +0 -138
  32. drf_to_mkdoc/utils/common.py +0 -353
  33. {drf_to_mkdoc-0.1.9.dist-info → drf_to_mkdoc-0.2.1.dist-info}/WHEEL +0 -0
  34. {drf_to_mkdoc-0.1.9.dist-info → drf_to_mkdoc-0.2.1.dist-info}/licenses/LICENSE +0 -0
  35. {drf_to_mkdoc-0.1.9.dist-info → drf_to_mkdoc-0.2.1.dist-info}/top_level.txt +0 -0
@@ -0,0 +1,728 @@
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