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

drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/theme-toggle.css

@@ -1,42 +1,314 @@
-/* ===== THEME TOGGLE ===== */
+/* Theme Toggle Base */
 .theme-toggle {
     position: fixed;
-    top: 20px;
-    right: 20px;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    padding: 10px 16px;
-    border-radius: 12px;
+    top: var(--try-out-spacing-lg);
+    right: var(--try-out-spacing-lg);
+    background: var(--try-out-glass-bg);
+    backdrop-filter: blur(var(--try-out-backdrop-blur));
+    border: 1px solid var(--try-out-glass-border);
+    padding: var(--try-out-spacing-xs) var(--try-out-spacing);
+    border-radius: var(--try-out-border-radius-lg);
     cursor: pointer;
-    transition: all 0.3s ease;
-    z-index: 1000;
-    font-size: 14px;
-    color: var(--text-primary);
-    box-shadow: var(--shadow);
+    z-index: var(--try-out-z-sticky);
+    font-size: var(--try-out-font-base);
+    color: var(--try-out-text);
+    box-shadow: var(--try-out-shadow-md);
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--try-out-spacing-sm);
+    transition: var(--theme-transition),
+                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* Hover and Focus States */
 .theme-toggle:hover {
     transform: translateY(-2px);
-    box-shadow: var(--shadow-hover);
-    border-color: var(--accent-primary);
+    box-shadow: var(--try-out-shadow-lg);
+    border-color: var(--try-out-primary);
 }
 
-.theme-toggle:focus {
-    outline: 2px solid var(--accent-primary);
+.theme-toggle:focus-visible {
+    outline: 2px solid var(--try-out-primary);
     outline-offset: 2px;
 }
 
-/* Dark mode adjustments */
-[data-md-color-scheme="slate"] .field-item,
-[data-md-color-scheme="slate"] .method-item {
-    background-color: var(--md-code-bg-color);
-    border-color: var(--md-default-fg-color--lightest);
+/* Dark Mode Adjustments */
+[data-md-color-scheme="slate"] {
+    /* Form Elements */
+    --input-bg: var(--try-out-surface);
+    --input-border: var(--try-out-border);
+    --input-text: var(--try-out-text);
+    --input-placeholder: var(--try-out-text-lighter);
+    
+    /* Code and Pre Elements */
+    --code-bg: var(--try-out-surface-raised);
+    --code-text: var(--try-out-text-light);
+    --code-border: var(--try-out-border);
+    
+    /* Interactive Elements */
+    --button-hover-bg: var(--try-out-surface-raised);
+    --button-active-bg: var(--try-out-surface);
 }
 
-[data-md-color-scheme="slate"] table th {
-    background-color: var(--md-primary-fg-color);
-    color: var(--md-primary-bg-color);
+/* Dark Mode Component Overrides */
+[data-md-color-scheme="slate"] {
+    /* Input Fields */
+    .modern-input,
+    .floating-input,
+    .name-input,
+    .value-input,
+    textarea {
+        background-color: var(--try-out-surface);
+        border-color: var(--try-out-border);
+        color: var(--try-out-text);
+    }
+
+    .modern-input::placeholder,
+    .floating-input::placeholder {
+        color: var(--try-out-text-lighter);
+    }
+
+    /* Floating Labels */
+    .floating-label {
+        background-color: var(--try-out-surface);
+        color: var(--try-out-text-light);
+    }
+
+    .floating-input:focus + .floating-label,
+    .floating-input:not(:placeholder-shown) + .floating-label {
+        color: var(--try-out-primary);
+    }
+
+    /* Code Blocks and Monospace */
+    pre, code, .path-display, .response-content {
+        background-color: var(--try-out-surface);
+        color: var(--try-out-text);
+        border-color: var(--try-out-border);
+    }
+
+    /* Cards and Containers */
+    .parameter-card,
+    .parameter-container,
+    .response-viewer,
+    .modal-content,
+    .url-preview {
+        background-color: var(--try-out-surface);
+        border-color: var(--try-out-border);
+    }
+
+    /* Buttons */
+    .secondary-btn,
+    .secondary-button,
+    .copy-btn,
+    .remove-btn,
+    .tool-btn {
+        background-color: transparent;
+        border-color: var(--try-out-border);
+        color: var(--try-out-text);
+    }
+
+    .secondary-btn:hover,
+    .secondary-button:hover,
+    .copy-btn:hover,
+    .tool-btn:hover {
+        background-color: var(--try-out-surface-raised);
+        border-color: var(--try-out-primary);
+        color: var(--try-out-primary);
+    }
+
+    .remove-btn:hover {
+        background-color: var(--try-out-danger);
+        border-color: var(--try-out-danger);
+        color: white;
+    }
+
+    /* Modal Overlays */
+    .modal-overlay {
+        background-color: rgba(0, 0, 0, 0.8);
+    }
+
+    .try-out-modal .modal-overlay,
+    .response-modal .modal-overlay {
+        background-color: rgba(0, 0, 0, 0.8);
+    }
+
+    /* Status Badges */
+    .status-badge {
+        border: 1px solid var(--try-out-border);
+    }
+
+    /* Search and Filter Elements */
+    .filter-input {
+        background-color: var(--try-out-surface);
+        border-color: var(--try-out-border);
+        color: var(--try-out-text);
+    }
+
+    /* Tabs */
+    .tab:not(.active) {
+        color: var(--try-out-text-light);
+    }
+
+    .tab:hover:not(.active) {
+        background-color: var(--try-out-surface-raised);
+        color: var(--try-out-text);
+    }
+
+    .tab.active {
+        background-color: var(--try-out-primary);
+        color: white;
+    }
+
+    /* Badges in tabs */
+    .tab:not(.active) .badge {
+        background-color: var(--try-out-primary-light);
+        color: var(--try-out-primary);
+    }
+
+    /* Tooltips */
+    .tooltip::after,
+    .action-btn::after,
+    .tool-btn::after {
+        background-color: var(--try-out-text);
+        color: var(--try-out-bg);
+        border: 1px solid var(--try-out-border);
+    }
+
+    /* Required badges */
+    .required-badge {
+        background-color: var(--try-out-primary-light);
+        color: var(--try-out-primary);
+    }
+
+    /* Parameter toolbar */
+    .parameter-toolbar {
+        background-color: var(--try-out-surface-raised);
+        border-color: var(--try-out-border);
+    }
+
+    /* Header toolbar */
+    .header-toolbar {
+        background-color: var(--try-out-surface-raised);
+        border-color: var(--try-out-border);
+    }
+
+    /* Headers list */
+    .header-item {
+        border-color: var(--try-out-border);
+    }
+
+    .header-name {
+        color: var(--try-out-text);
+    }
+
+    .header-value {
+        color: var(--try-out-text-light);
+    }
+
+    /* Detail values */
+    .detail-value {
+        background-color: var(--try-out-surface);
+        border-color: var(--try-out-border);
+        color: var(--try-out-text-light);
+    }
+
+    /* Response stats */
+    .response-stats {
+        background-color: var(--try-out-surface);
+        border-color: var(--try-out-border);
+    }
+
+    .stat-value {
+        color: var(--try-out-text);
+    }
+
+    /* Response toolbar */
+    .response-toolbar {
+        background-color: var(--try-out-surface);
+        border-color: var(--try-out-border);
+    }
+
+    /* Modal sections */
+    .request-section {
+        background-color: var(--try-out-bg);
+        border-color: var(--try-out-border);
+    }
+
+    .response-section {
+        background-color: var(--try-out-surface);
+        border-color: var(--try-out-border);
+    }
+
+    .modal-footer {
+        background-color: var(--try-out-surface);
+        border-color: var(--try-out-border);
+    }
+
+    /* Action bar */
+    .action-bar {
+        border-color: var(--try-out-border);
+    }
+
+    /* Format/validate buttons */
+    .format-btn,
+    .validate-btn {
+        background-color: transparent;
+        border-color: var(--try-out-border);
+        color: var(--try-out-text-light);
+    }
+
+    .format-btn:hover,
+    .validate-btn:hover {
+        background-color: var(--try-out-primary);
+        border-color: var(--try-out-primary);
+        color: white;
+    }
+
+    /* Code editor */
+    .code-editor {
+        background-color: var(--try-out-surface);
+        border-color: var(--try-out-border);
+        color: var(--try-out-text);
+    }
+
+    .code-editor:focus {
+        border-color: var(--try-out-primary);
+    }
+
+    /* Validation status */
+    .validation-status.valid {
+        color: var(--try-out-success);
+    }
+
+    .validation-status.invalid {
+        color: var(--try-out-danger);
+    }
+
+    /* Toast notifications */
+    .toast.toast-error {
+        background-color: var(--try-out-danger);
+    }
+
+    .toast.toast-warning {
+        background-color: var(--try-out-warning);
+    }
+
+    .toast.toast-info {
+        background-color: var(--try-out-info);
+    }
 }
+
+/* Smooth Theme Transition */
+body {
+    transition: var(--theme-transition);
+}
+
+/* Mobile Adjustments */
+@media screen and (max-width: 768px) {
+    .theme-toggle {
+        top: var(--try-out-spacing);
+        right: var(--try-out-spacing);
+        padding: var(--try-out-spacing-2xs) var(--try-out-spacing-xs);
+        font-size: var(--try-out-font-sm);
+    }
+}

drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/try-out/fab.css

@@ -0,0 +1,204 @@
+/* Try Out Floating Action Button Container */
+.try-out-fab-container {
+    position: fixed;
+    bottom: var(--try-out-spacing-xl);
+    right: var(--try-out-spacing-xl);
+    z-index: var(--try-out-z-fab);
+}
+
+/* Main FAB Button */
+.try-out-fab {
+    position: relative;
+    min-width: 3rem;
+    height: 3rem;
+    border-radius: 1.5rem;
+    background: var(--try-out-gradient-primary);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+    padding: 0 var(--try-out-spacing);
+    overflow: hidden;
+    
+    /* Modern Shadow */
+    box-shadow: var(--try-out-shadow-lg),
+                0 0 0 0 rgba(var(--try-out-primary-rgb), 0.2);
+                
+    /* Smooth Transitions */
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* FAB Content Layout */
+.fab-content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--try-out-spacing-sm);
+    white-space: nowrap;
+}
+
+.fab-icon {
+    font-size: 1.2rem;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.fab-text {
+    font-size: var(--try-out-font-base);
+    font-weight: 500;
+    opacity: 0;
+    transform: translateX(-10px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Hover State */
+.try-out-fab:hover {
+    width: auto;
+    padding-right: var(--try-out-spacing-lg);
+    transform: translateY(-2px);
+    box-shadow: var(--try-out-shadow-xl),
+                0 0 0 0 rgba(var(--try-out-primary-rgb), 0);
+}
+
+.try-out-fab:hover .fab-text {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.try-out-fab:hover .fab-icon {
+    transform: rotate(360deg);
+}
+
+/* Active State */
+.try-out-fab:active {
+    transform: translateY(1px);
+    box-shadow: var(--try-out-shadow-md);
+}
+
+/* Keyboard Trigger Animation */
+.try-out-fab.keyboard-triggered {
+    animation: pulse 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Ripple Effect */
+.ripple-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    border-radius: inherit;
+}
+
+.ripple {
+    position: absolute;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple 0.6s linear;
+    pointer-events: none;
+}
+
+/* Pulse Animation */
+.pulse-ring {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+}
+
+/* Keyboard Shortcut Hint */
+.shortcut-hint {
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    margin-bottom: var(--try-out-spacing-sm);
+    padding: var(--try-out-spacing-xs) var(--try-out-spacing-sm);
+    background: var(--try-out-glass-bg);
+    backdrop-filter: blur(var(--try-out-backdrop-blur));
+    border: 1px solid var(--try-out-glass-border);
+    border-radius: var(--try-out-border-radius);
+    font-size: var(--try-out-font-sm);
+    color: var(--try-out-text);
+    white-space: nowrap;
+    opacity: 0;
+    transform: translateY(10px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+}
+
+.shortcut-hint.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+kbd {
+    display: inline-block;
+    padding: 2px 4px;
+    background: var(--try-out-surface);
+    border: 1px solid var(--try-out-border);
+    border-radius: 3px;
+    font-family: monospace;
+    font-size: 0.9em;
+    line-height: 1;
+}
+
+/* Animations */
+@keyframes ripple {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
+
+@keyframes pulse-ring {
+    0% {
+        box-shadow: 0 0 0 0 rgba(var(--try-out-primary-rgb), 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(var(--try-out-primary-rgb), 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(var(--try-out-primary-rgb), 0);
+    }
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(0.95); }
+    100% { transform: scale(1); }
+}
+
+/* Mobile Adjustments */
+@media screen and (max-width: 768px) {
+    .try-out-fab-container {
+        bottom: var(--try-out-spacing-lg);
+        right: var(--try-out-spacing-lg);
+    }
+
+    .try-out-fab {
+        min-width: 3.5rem;
+        height: 3.5rem;
+        padding: 0;
+    }
+
+    .try-out-fab:hover {
+        width: 3.5rem;
+        padding: 0;
+    }
+
+    .fab-text {
+        display: none;
+    }
+
+    .shortcut-hint {
+        display: none;
+    }
+}