Spaces:
Running
Running
| .export-button-container { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| /* Main Export Button */ | |
| .export-button { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-secondary); | |
| border-radius: 8px; | |
| padding: 8px 16px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| height: 36px; | |
| } | |
| .export-button:hover:not(.disabled) { | |
| background: var(--bg-tertiary); | |
| border-color: var(--border-primary); | |
| color: var(--text-primary); | |
| transform: translateY(-1px); | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |
| } | |
| .export-button.active { | |
| background: var(--accent-primary); | |
| border-color: var(--accent-primary); | |
| color: white; | |
| } | |
| .export-button.disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .export-button.success { | |
| background: #10B981; | |
| border-color: #10B981; | |
| color: white; | |
| } | |
| .export-button.error { | |
| background: #EF4444; | |
| border-color: #EF4444; | |
| color: white; | |
| } | |
| .export-text { | |
| font-weight: 500; | |
| } | |
| /* Spinning animation for loading state */ | |
| .spinning { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Export Dropdown */ | |
| .export-dropdown { | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| margin-top: 8px; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-secondary); | |
| border-radius: 12px; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); | |
| min-width: 280px; | |
| z-index: 1000; | |
| overflow: hidden; | |
| animation: dropdownSlideIn 0.2s ease-out; | |
| } | |
| @keyframes dropdownSlideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-8px) scale(0.98); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| /* Dark theme shadow */ | |
| [data-theme="dark"] .export-dropdown { | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); | |
| } | |
| /* Dropdown Header */ | |
| .export-dropdown-header { | |
| padding: 16px 20px 12px 20px; | |
| border-bottom: 1px solid var(--border-tertiary); | |
| } | |
| .export-dropdown-header h4 { | |
| margin: 0 0 4px 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .export-dropdown-header p { | |
| margin: 0; | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| line-height: 1.4; | |
| } | |
| /* Format List */ | |
| .export-format-list { | |
| padding: 0; | |
| } | |
| .export-format-button { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 20px; | |
| border: none; | |
| background: none; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| text-align: left; | |
| } | |
| .export-format-button:hover:not(:disabled) { | |
| background: var(--bg-secondary); | |
| } | |
| .export-format-button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .format-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--bg-secondary); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--text-secondary); | |
| flex-shrink: 0; | |
| } | |
| .export-format-button:hover:not(:disabled) .format-icon { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .format-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .format-name { | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| margin-bottom: 2px; | |
| } | |
| .format-description { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| line-height: 1.3; | |
| } | |
| .export-format-section { | |
| padding: 16px 20px 8px 20px; | |
| } | |
| .export-format-section h5 { | |
| margin: 0 0 12px 0; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .format-extension { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-tertiary); | |
| background: var(--bg-tertiary); | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| flex-shrink: 0; | |
| } | |
| .export-format-button:hover:not(:disabled) .format-extension { | |
| background: var(--accent-primary); | |
| color: white; | |
| } | |
| /* Export Type Selection Section */ | |
| .export-type-section { | |
| padding: 16px 20px 8px 20px; | |
| border-bottom: 1px solid var(--border-tertiary); | |
| } | |
| .export-type-section h5 { | |
| margin: 0 0 12px 0; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .export-type-buttons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .export-type-button { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| padding: 12px 16px; | |
| border: 2px solid var(--border-secondary); | |
| border-radius: 8px; | |
| background: var(--bg-secondary); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| text-align: left; | |
| color: var(--text-primary); /* ADD THIS */ | |
| } | |
| .export-type-button:hover:not(:disabled) { | |
| border-color: var(--accent-primary); | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); /* ADD THIS */ | |
| } | |
| .export-type-button.active { | |
| border-color: var(--accent-primary); | |
| background: var(--accent-primary); | |
| color: white ; /* MAKE THIS IMPORTANT */ | |
| } | |
| .export-type-button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .type-info { | |
| flex: 1; | |
| } | |
| .type-name { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-bottom: 2px; | |
| color: inherit; /* ADD THIS */ | |
| } | |
| .type-description { | |
| font-size: 12px; | |
| opacity: 0.8; | |
| line-height: 1.3; | |
| color: inherit; /* ADD THIS */ | |
| } | |
| /* Remove the separate active state color rules since we use inherit now */ | |
| .export-type-button.active .type-name, | |
| .export-type-button.active .type-description { | |
| color: inherit; /* CHANGE THIS TO INHERIT */ | |
| } | |
| /* Format Section Updates */ | |
| .export-format-section { | |
| padding: 16px 20px 8px 20px; | |
| } | |
| .export-format-section h5 { | |
| margin: 0 0 12px 0; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .export-format-list { | |
| padding: 0; | |
| } | |
| /* Focus states for accessibility */ | |
| .export-type-button:focus-visible { | |
| outline: 2px solid var(--accent-primary); | |
| outline-offset: 2px; | |
| } | |
| /* Dropdown Footer */ | |
| .export-dropdown-footer { | |
| padding: 8px 20px 16px 20px; | |
| border-top: 1px solid var(--border-tertiary); | |
| } | |
| .export-dropdown-footer span { | |
| font-size: 11px; | |
| color: var(--text-tertiary); | |
| font-style: italic; | |
| } | |
| /* Export Status */ | |
| .export-status { | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| margin-top: 4px; | |
| padding: 8px 12px; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| z-index: 1001; | |
| animation: statusSlideIn 0.2s ease-out; | |
| } | |
| .export-status.success { | |
| background: #10B981; | |
| color: white; | |
| } | |
| .export-status.error { | |
| background: #EF4444; | |
| color: white; | |
| } | |
| @keyframes statusSlideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-4px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .export-dropdown { | |
| right: -40px; | |
| left: -40px; | |
| width: auto; | |
| min-width: unset; | |
| } | |
| .export-format-button { | |
| padding: 16px 20px; | |
| } | |
| .format-icon { | |
| width: 36px; | |
| height: 36px; | |
| } | |
| .export-button { | |
| padding: 6px 12px; | |
| font-size: 13px; | |
| } | |
| /* .export-text { | |
| display: none; | |
| } */ | |
| } | |
| /* Focus states for accessibility */ | |
| .export-button:focus-visible { | |
| outline: 2px solid var(--accent-primary); | |
| outline-offset: 2px; | |
| } | |
| .export-format-button:focus-visible { | |
| outline: 2px solid var(--accent-primary); | |
| outline-offset: -2px; | |
| } |