Spaces:
Configuration error
Configuration error
| /* Controls Styles */ | |
| /* Top controls container - now in sidebar */ | |
| .top-controls { | |
| position: absolute; | |
| top: 16px; | |
| right: 16px; | |
| z-index: 200; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| } | |
| /* Dark mode toggle */ | |
| .dark-mode-toggle { | |
| flex-shrink: 0; | |
| } | |
| .toggle-btn { | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| border: 1px solid var(--color-border-primary); | |
| border-radius: var(--border-radius-md); | |
| background: var(--color-bg-primary); | |
| color: var(--color-text-primary); | |
| font-size: 12px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | |
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | |
| sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| box-shadow: var(--shadow-sm); | |
| outline: none; | |
| user-select: none; | |
| } | |
| .toggle-btn:hover { | |
| background: var(--color-bg-secondary); | |
| border-color: var(--color-border-secondary); | |
| box-shadow: var(--shadow-md); | |
| transform: translateY(-1px); | |
| } | |
| .toggle-btn:active { | |
| transform: translateY(0); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .toggle-btn:focus { | |
| border-color: var(--color-accent); | |
| box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2); | |
| } | |
| .dark-mode .toggle-btn { | |
| border-color: var(--color-border-primary-dark); | |
| background: var(--color-bg-primary-dark); | |
| color: var(--color-text-primary-dark); | |
| box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); | |
| } | |
| .dark-mode .toggle-btn:hover { | |
| background: var(--color-bg-tertiary-dark); | |
| border-color: var(--color-border-secondary-dark); | |
| box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1); | |
| } | |
| .dark-mode .toggle-btn:focus { | |
| border-color: var(--color-accent-dark); | |
| box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2); | |
| } | |
| /* Dataset selector */ | |
| .dataset-selector { | |
| flex-shrink: 0; | |
| } | |
| .dataset-select { | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| border: 1px solid var(--color-border-primary); | |
| border-radius: var(--border-radius-md); | |
| background: var(--color-bg-primary); | |
| color: var(--color-text-primary); | |
| font-size: 12px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | |
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | |
| sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| min-width: 200px; | |
| box-shadow: var(--shadow-sm); | |
| outline: none; | |
| } | |
| .dataset-select:hover { | |
| background: var(--color-bg-secondary); | |
| border-color: var(--color-border-secondary); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .dataset-select:focus { | |
| border-color: var(--color-accent); | |
| box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2); | |
| } | |
| .dark-mode .dataset-select { | |
| border-color: var(--color-border-primary-dark); | |
| background: var(--color-bg-primary-dark); | |
| color: var(--color-text-primary-dark); | |
| box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); | |
| } | |
| .dark-mode .dataset-select:hover { | |
| background: var(--color-bg-tertiary-dark); | |
| border-color: var(--color-border-secondary-dark); | |
| box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1); | |
| } | |
| .dark-mode .dataset-select:focus { | |
| border-color: var(--color-accent-dark); | |
| box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2); | |
| } | |
| /* Search Section */ | |
| .search-section { | |
| margin-bottom: 0; | |
| } | |
| /* Search Bar Big Mode */ | |
| .search-bar-big .search-input { | |
| font-size: 16px; | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| border-radius: var(--border-radius-lg); | |
| } | |
| /* Filters Container */ | |
| .filters-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-xs); | |
| align-items: flex-start; | |
| margin: var(--spacing-sm) 0 0 0; | |
| width: 100%; | |
| padding: var(--spacing-sm); | |
| background: transparent; | |
| border: none; | |
| border-radius: 0; | |
| box-shadow: none; | |
| } | |
| .filters-label { | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: var(--color-text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 2px; | |
| } | |
| .dark-mode .filters-label { | |
| color: var(--color-text-tertiary-dark); | |
| } | |
| /* Filters Inline */ | |
| .filters-inline { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: var(--spacing-xs); | |
| font-size: 11px; | |
| color: var(--color-text-secondary); | |
| width: 100%; | |
| } | |
| .dark-mode .filters-inline { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| .filter-link { | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| font-weight: 500; | |
| padding: var(--spacing-xs) var(--spacing-sm); | |
| border-radius: var(--border-radius-sm); | |
| background: var(--color-bg-secondary); | |
| border: 1px solid var(--color-border-primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 3px; | |
| text-align: left; | |
| min-height: 28px; | |
| } | |
| .filter-link:hover { | |
| color: var(--color-text-primary); | |
| background: var(--color-bg-tertiary); | |
| border-color: var(--color-border-secondary); | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .dark-mode .filter-link { | |
| background: var(--color-bg-secondary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| } | |
| .dark-mode .filter-link:hover { | |
| color: var(--color-text-primary-dark); | |
| background: var(--color-bg-tertiary-dark); | |
| border-color: var(--color-border-secondary-dark); | |
| box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); | |
| } | |
| .filter-link.active { | |
| font-weight: 600; | |
| color: var(--color-text-primary); | |
| background: var(--color-bg-primary); | |
| border-color: var(--color-text-primary); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .dark-mode .filter-link.active { | |
| color: var(--color-text-primary-dark); | |
| background: var(--color-bg-primary-dark); | |
| border-color: var(--color-text-primary-dark); | |
| box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); | |
| } | |
| .filter-count { | |
| font-weight: 500; | |
| opacity: 0.7; | |
| color: var(--color-text-secondary); | |
| font-size: 10px; | |
| background: var(--color-bg-tertiary); | |
| padding: 2px 6px; | |
| border-radius: var(--border-radius-sm); | |
| transition: all var(--transition-fast); | |
| min-width: 20px; | |
| text-align: center; | |
| } | |
| .dark-mode .filter-count { | |
| color: var(--color-text-secondary-dark); | |
| background: var(--color-bg-tertiary-dark); | |
| opacity: 0.8; | |
| } | |
| .filter-link.active .filter-count { | |
| opacity: 1; | |
| color: var(--color-text-primary); | |
| background: var(--color-text-primary); | |
| color: var(--color-bg-primary); | |
| } | |
| .dark-mode .filter-link.active .filter-count { | |
| color: var(--color-text-primary-dark); | |
| background: var(--color-text-primary-dark); | |
| color: var(--color-bg-primary-dark); | |
| } | |
| /* Search bar styles */ | |
| .search-bar { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| min-width: 200px; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| padding-right: 10px; | |
| border: 1px solid var(--color-border-primary); | |
| border-radius: var(--border-radius-md); | |
| background: var(--color-bg-primary); | |
| color: var(--color-text-primary); | |
| font-size: 12px; | |
| font-weight: 500; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | |
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | |
| sans-serif; | |
| transition: all var(--transition-normal); | |
| box-shadow: var(--shadow-sm); | |
| outline: none; | |
| } | |
| .search-input:focus { | |
| border-color: var(--color-accent); | |
| box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2); | |
| } | |
| .search-input::placeholder { | |
| color: var(--color-text-tertiary); | |
| } | |
| .search-input.dark { | |
| background: var(--color-bg-secondary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| color: var(--color-text-primary-dark); | |
| } | |
| .search-input.dark:focus { | |
| border-color: var(--color-accent-dark); | |
| box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2); | |
| } | |
| .search-input.dark::placeholder { | |
| color: var(--color-text-tertiary-dark); | |
| } | |
| /* Conteneur pour les contrôles de recherche */ | |
| .search-controls { | |
| position: absolute; | |
| right: var(--spacing-sm); | |
| top: 50%; | |
| transform: translateY(-50%); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| z-index: 1; | |
| } | |
| .search-counter { | |
| background: var(--color-bg-tertiary); | |
| color: var(--color-text-secondary); | |
| font-size: 10px; | |
| font-weight: 500; | |
| padding: 2px 6px; | |
| border-radius: var(--border-radius-sm); | |
| transition: all var(--transition-normal); | |
| pointer-events: none; | |
| } | |
| .search-counter.filtered { | |
| background: var(--color-bg-secondary); | |
| color: var(--color-text-primary); | |
| border: 1px solid var(--color-text-secondary); | |
| } | |
| .search-counter.dark { | |
| background: var(--color-bg-tertiary-dark); | |
| color: var(--color-text-secondary-dark); | |
| } | |
| .search-counter.dark.filtered { | |
| background: var(--color-bg-secondary-dark); | |
| color: var(--color-text-primary-dark); | |
| border: 1px solid var(--color-text-secondary-dark); | |
| } | |
| .search-clear { | |
| background: none; | |
| border: none; | |
| color: var(--color-text-tertiary); | |
| cursor: pointer; | |
| padding: var(--spacing-xs); | |
| border-radius: var(--border-radius-sm); | |
| transition: all var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .search-clear:hover { | |
| color: var(--color-text-secondary); | |
| background: var(--color-bg-tertiary); | |
| } | |
| .dark-mode .search-clear:hover { | |
| color: var(--color-text-secondary-dark); | |
| background: var(--color-bg-tertiary-dark); | |
| } | |
| /* Bottom controls container */ | |
| .bottom-controls { | |
| position: absolute; | |
| bottom: 16px; | |
| right: 16px; | |
| z-index: 200; | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 8px; | |
| } | |
| /* Zoom Controls */ | |
| .zoom-controls { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-xs); | |
| } | |
| .zoom-btn { | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| border: 1px solid var(--color-border-primary); | |
| border-radius: var(--border-radius-md); | |
| background: var(--color-bg-primary); | |
| color: var(--color-text-primary); | |
| font-size: 10px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | |
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | |
| sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| min-width: 24px; | |
| text-align: center; | |
| box-shadow: var(--shadow-sm); | |
| outline: none; | |
| } | |
| .dark-mode .zoom-btn { | |
| border-color: var(--color-border-primary-dark); | |
| background: var(--color-bg-primary-dark); | |
| color: var(--color-text-primary-dark); | |
| box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); | |
| } | |
| .zoom-btn:hover { | |
| background: var(--color-bg-secondary); | |
| border-color: var(--color-border-secondary); | |
| box-shadow: var(--shadow-md); | |
| transform: translateY(-1px); | |
| } | |
| .dark-mode .zoom-btn:hover { | |
| background: var(--color-bg-tertiary-dark); | |
| border-color: var(--color-border-secondary-dark); | |
| box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1); | |
| transform: translateY(-1px); | |
| } | |
| .zoom-btn.zoom-reset { | |
| background: var(--color-text-primary); | |
| color: var(--color-bg-primary); | |
| border-color: var(--color-text-primary); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .dark-mode .zoom-btn.zoom-reset { | |
| background: var(--color-text-primary-dark); | |
| color: var(--color-bg-primary-dark); | |
| border-color: var(--color-text-primary-dark); | |
| box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1); | |
| } | |
| .zoom-btn.zoom-reset:hover { | |
| background: var(--color-text-secondary); | |
| color: var(--color-bg-primary); | |
| box-shadow: var(--shadow-lg); | |
| transform: translateY(-1px); | |
| } | |
| .dark-mode .zoom-btn.zoom-reset:hover { | |
| background: var(--color-text-secondary-dark); | |
| color: var(--color-bg-primary-dark); | |
| box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); | |
| transform: translateY(-1px); | |
| } | |
| /* Dilation Control Styles */ | |
| .dilation-control { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-sm); | |
| min-width: 200px; | |
| padding: var(--spacing-md); | |
| background: var(--color-bg-primary); | |
| border: 1px solid var(--color-border-primary); | |
| border-radius: var(--border-radius-md); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .dark-mode .dilation-control { | |
| background: var(--color-bg-primary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); | |
| } | |
| .dilation-label { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 12px; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| } | |
| /* Cache indicator styles */ | |
| .cache-indicator { | |
| font-size: 14px; | |
| margin-left: var(--spacing-sm); | |
| opacity: 0.7; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .cache-indicator.ready { | |
| opacity: 1; | |
| color: #22c55e; | |
| } | |
| .cache-indicator.loading { | |
| opacity: 0.8; | |
| color: #f59e0b; | |
| animation: pulse 1.5s ease-in-out infinite; | |
| } | |
| .cache-indicator.not-ready { | |
| opacity: 0.5; | |
| color: var(--color-text-tertiary); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.8; } | |
| 50% { opacity: 0.4; } | |
| } | |
| .dark-mode .cache-indicator.ready { | |
| color: #4ade80; | |
| } | |
| .dark-mode .cache-indicator.loading { | |
| color: #fbbf24; | |
| } | |
| .dark-mode .cache-indicator.not-ready { | |
| color: var(--color-text-tertiary-dark); | |
| } | |
| .label-text { | |
| color: var(--color-text-primary); | |
| } | |
| .dark-mode .label-text { | |
| color: var(--color-text-primary-dark); | |
| } | |
| .label-value { | |
| color: var(--color-text-secondary); | |
| font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; | |
| font-weight: 600; | |
| } | |
| .dark-mode .label-value { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| .dilation-slider-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-xs); | |
| } | |
| .dilation-slider { | |
| width: 100%; | |
| height: 4px; | |
| border-radius: 2px; | |
| background: var(--color-border-primary); | |
| outline: none; | |
| cursor: pointer; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| transition: all var(--transition-normal); | |
| } | |
| .dilation-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--color-text-primary); | |
| cursor: pointer; | |
| border: 2px solid var(--color-bg-primary); | |
| box-shadow: var(--shadow-sm); | |
| transition: all var(--transition-normal); | |
| } | |
| .dilation-slider::-webkit-slider-thumb:hover { | |
| transform: scale(1.1); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .dilation-slider::-moz-range-thumb { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--color-text-primary); | |
| cursor: pointer; | |
| border: 2px solid var(--color-bg-primary); | |
| box-shadow: var(--shadow-sm); | |
| transition: all var(--transition-normal); | |
| } | |
| .dilation-slider::-moz-range-thumb:hover { | |
| transform: scale(1.1); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .dilation-slider.dark { | |
| background: var(--color-border-primary-dark); | |
| } | |
| .dilation-slider.dark::-webkit-slider-thumb { | |
| background: var(--color-text-primary-dark); | |
| border-color: var(--color-bg-primary-dark); | |
| box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); | |
| } | |
| .dilation-slider.dark::-moz-range-thumb { | |
| background: var(--color-text-primary-dark); | |
| border-color: var(--color-bg-primary-dark); | |
| box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); | |
| } | |
| .slider-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 10px; | |
| color: var(--color-text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| font-weight: 500; | |
| } | |
| .dark-mode .slider-labels { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| .slider-label { | |
| font-size: 10px; | |
| } | |
| /* Size Control Styles */ | |
| .size-control { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-sm); | |
| min-width: 200px; | |
| padding: var(--spacing-md); | |
| background: var(--color-bg-primary); | |
| border: 1px solid var(--color-border-primary); | |
| border-radius: var(--border-radius-md); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .dark-mode .size-control { | |
| background: var(--color-bg-primary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); | |
| } | |
| .size-label { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 12px; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| } | |
| .size-slider-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-xs); | |
| } | |
| .size-slider { | |
| width: 100%; | |
| height: 4px; | |
| border-radius: 2px; | |
| background: var(--color-border-primary); | |
| outline: none; | |
| cursor: pointer; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| transition: all var(--transition-normal); | |
| } | |
| .size-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--color-text-primary); | |
| cursor: pointer; | |
| border: 2px solid var(--color-bg-primary); | |
| box-shadow: var(--shadow-sm); | |
| transition: all var(--transition-normal); | |
| } | |
| .size-slider::-webkit-slider-thumb:hover { | |
| transform: scale(1.1); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .size-slider::-moz-range-thumb { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--color-text-primary); | |
| cursor: pointer; | |
| border: 2px solid var(--color-bg-primary); | |
| box-shadow: var(--shadow-sm); | |
| transition: all var(--transition-normal); | |
| } | |
| .size-slider::-moz-range-thumb:hover { | |
| transform: scale(1.1); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .size-slider.dark { | |
| background: var(--color-border-primary-dark); | |
| } | |
| .size-slider.dark::-webkit-slider-thumb { | |
| background: var(--color-text-primary-dark); | |
| border-color: var(--color-bg-primary-dark); | |
| box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); | |
| } | |
| .size-slider.dark::-moz-range-thumb { | |
| background: var(--color-text-primary-dark); | |
| border-color: var(--color-bg-primary-dark); | |
| box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); | |
| } | |