Spaces:
Sleeping
Sleeping
| /** | |
| * Shared styles for test/analysis pages | |
| * | |
| * Provides consistent styling for: | |
| * - MCTSAnalysisView | |
| * - TrigoTreeTestView | |
| * - TrigoAgentTestView | |
| * - OnnxTestView | |
| * - SocketTestView | |
| */ | |
| // ============================================================================ | |
| // Theme Variables | |
| // ============================================================================ | |
| // Light theme colors | |
| $light-bg-primary: #f5f5f5; | |
| $light-bg-secondary: white; | |
| $light-bg-tertiary: #f8f9fa; | |
| $light-text-primary: #333; | |
| $light-text-secondary: #666; | |
| $light-border: #e1e4e8; | |
| $light-shadow: rgba(0, 0, 0, 0.1); | |
| // Dark theme colors | |
| $dark-bg-primary: #1a1a1a; | |
| $dark-bg-secondary: #2a2a2a; | |
| $dark-bg-tertiary: #3a3a3a; | |
| $dark-text-primary: #e0e0e0; | |
| $dark-text-secondary: #a0a0a0; | |
| $dark-border: #404040; | |
| $dark-shadow: rgba(0, 0, 0, 0.3); | |
| // Status colors (shared) | |
| $color-success: #28a745; | |
| $color-warning: #ffc107; | |
| $color-error: #dc3545; | |
| $color-info: #007bff; | |
| $color-primary: #4a90e2; | |
| $color-accent: #e94560; | |
| // ============================================================================ | |
| // Custom Scrollbar Mixin | |
| // ============================================================================ | |
| @mixin custom-scrollbar($theme: 'dark') { | |
| @if $theme == 'dark' { | |
| &::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| &::-webkit-scrollbar-track { | |
| background: $dark-bg-primary; | |
| border-radius: 4px; | |
| } | |
| &::-webkit-scrollbar-thumb { | |
| background: #4a4a4a; | |
| border-radius: 4px; | |
| &:hover { | |
| background: #5a5a5a; | |
| } | |
| } | |
| } @else { | |
| &::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| &::-webkit-scrollbar-track { | |
| background: $light-bg-tertiary; | |
| border-radius: 4px; | |
| } | |
| &::-webkit-scrollbar-thumb { | |
| background: #c0c0c0; | |
| border-radius: 4px; | |
| &:hover { | |
| background: #a0a0a0; | |
| } | |
| } | |
| } | |
| } | |
| // ============================================================================ | |
| // Base Container Styles | |
| // ============================================================================ | |
| @mixin test-page-container($theme: 'light') { | |
| width: 100%; | |
| height: 100vh; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| @if $theme == 'dark' { | |
| background-color: $dark-bg-primary; | |
| color: $dark-text-primary; | |
| } @else { | |
| background-color: $light-bg-primary; | |
| color: $light-text-primary; | |
| } | |
| @include custom-scrollbar($theme); | |
| } | |
| // ============================================================================ | |
| // Header Styles | |
| // ============================================================================ | |
| @mixin test-page-header() { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 2rem; | |
| text-align: center; | |
| h1 { | |
| margin: 0 0 0.5rem 0; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| } | |
| .subtitle { | |
| margin: 0; | |
| opacity: 0.9; | |
| font-size: 1.1rem; | |
| } | |
| } | |
| // ============================================================================ | |
| // Section Styles | |
| // ============================================================================ | |
| @mixin test-section($theme: 'light') { | |
| border-radius: 8px; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| @if $theme == 'dark' { | |
| background-color: $dark-bg-secondary; | |
| border: 1px solid $dark-border; | |
| } @else { | |
| background-color: $light-bg-secondary; | |
| border: 1px solid $light-border; | |
| box-shadow: 0 2px 8px $light-shadow; | |
| } | |
| h2, h3 { | |
| margin-top: 0; | |
| margin-bottom: 15px; | |
| font-weight: 600; | |
| @if $theme == 'dark' { | |
| color: $color-primary; | |
| } @else { | |
| color: $light-text-primary; | |
| } | |
| } | |
| h2 { | |
| font-size: 20px; | |
| } | |
| h3 { | |
| font-size: 16px; | |
| } | |
| p { | |
| margin: 0 0 1rem 0; | |
| @if $theme == 'dark' { | |
| color: $dark-text-secondary; | |
| } @else { | |
| color: $light-text-secondary; | |
| } | |
| } | |
| } | |
| // ============================================================================ | |
| // Panel Styles (for sidebars/control panels) | |
| // ============================================================================ | |
| @mixin control-panel($theme: 'dark') { | |
| border-radius: 8px; | |
| padding: 20px; | |
| overflow-y: auto; | |
| max-height: calc(100vh - 80px); | |
| @if $theme == 'dark' { | |
| background-color: $dark-bg-secondary; | |
| } @else { | |
| background-color: $light-bg-secondary; | |
| border: 1px solid $light-border; | |
| } | |
| @include custom-scrollbar($theme); | |
| h2 { | |
| margin: 0 0 20px 0; | |
| font-size: 20px; | |
| padding-bottom: 10px; | |
| @if $theme == 'dark' { | |
| color: $color-accent; | |
| border-bottom: 1px solid $dark-border; | |
| } @else { | |
| color: $light-text-primary; | |
| border-bottom: 1px solid $light-border; | |
| } | |
| } | |
| h3 { | |
| margin: 0 0 15px 0; | |
| font-size: 16px; | |
| color: $color-primary; | |
| } | |
| } | |
| // ============================================================================ | |
| // Button Styles | |
| // ============================================================================ | |
| @mixin test-button($variant: 'primary') { | |
| padding: 0.75rem 1.5rem; | |
| border: none; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| &:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| @if $variant == 'primary' { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| &:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); | |
| } | |
| } @else if $variant == 'secondary' { | |
| background: #6c757d; | |
| color: white; | |
| &:hover:not(:disabled) { | |
| background: #5a6268; | |
| } | |
| } @else if $variant == 'success' { | |
| background: $color-success; | |
| color: white; | |
| &:hover:not(:disabled) { | |
| background: darken($color-success, 10%); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba($color-success, 0.4); | |
| } | |
| } @else if $variant == 'test' { | |
| background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| color: white; | |
| &:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4); | |
| } | |
| } | |
| } | |
| // ============================================================================ | |
| // Status Display | |
| // ============================================================================ | |
| @mixin status-display($theme: 'light') { | |
| border-radius: 8px; | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| @if $theme == 'dark' { | |
| background-color: $dark-bg-primary; | |
| } @else { | |
| background-color: $light-bg-tertiary; | |
| } | |
| .status-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0.5rem 0; | |
| @if $theme == 'dark' { | |
| border-bottom: 1px solid $dark-border; | |
| } @else { | |
| border-bottom: 1px solid #e9ecef; | |
| } | |
| &:last-child { | |
| border-bottom: none; | |
| } | |
| .status-label { | |
| font-weight: 600; | |
| @if $theme == 'dark' { | |
| color: $dark-text-secondary; | |
| } @else { | |
| color: $light-text-secondary; | |
| } | |
| } | |
| .status-value { | |
| @if $theme == 'dark' { | |
| color: $dark-text-primary; | |
| } @else { | |
| color: $light-text-primary; | |
| } | |
| } | |
| &.ready .status-value { | |
| color: $color-success; | |
| font-weight: 600; | |
| } | |
| &.loading .status-value { | |
| color: $color-warning; | |
| font-weight: 600; | |
| } | |
| &.error .status-value { | |
| color: $color-error; | |
| font-weight: 600; | |
| } | |
| } | |
| } | |
| // ============================================================================ | |
| // Error/Success Messages | |
| // ============================================================================ | |
| @mixin error-message() { | |
| background: #fff3cd; | |
| border: 1px solid #ffeaa7; | |
| border-radius: 6px; | |
| padding: 0.75rem; | |
| color: #856404; | |
| margin-top: 1rem; | |
| } | |
| @mixin success-message() { | |
| background: #d4edda; | |
| border: 1px solid #c3e6cb; | |
| border-radius: 6px; | |
| padding: 0.75rem; | |
| color: #155724; | |
| font-weight: 600; | |
| margin-top: 1rem; | |
| } | |
| // ============================================================================ | |
| // Table Styles | |
| // ============================================================================ | |
| @mixin data-table($theme: 'light') { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 12px; | |
| thead { | |
| position: sticky; | |
| top: 0; | |
| z-index: 1; | |
| @if $theme == 'dark' { | |
| background-color: $dark-bg-secondary; | |
| } @else { | |
| background-color: $light-bg-tertiary; | |
| } | |
| th { | |
| padding: 8px 6px; | |
| text-align: left; | |
| font-weight: 600; | |
| @if $theme == 'dark' { | |
| color: $color-primary; | |
| border-bottom: 1px solid $dark-border; | |
| } @else { | |
| color: $light-text-secondary; | |
| border-bottom: 2px solid #dee2e6; | |
| } | |
| } | |
| } | |
| tbody { | |
| tr { | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| @if $theme == 'dark' { | |
| &:hover { | |
| background-color: $dark-bg-tertiary; | |
| } | |
| &.selected { | |
| background-color: #4a3030; | |
| td { | |
| color: $color-accent; | |
| font-weight: 500; | |
| } | |
| } | |
| } @else { | |
| &:hover { | |
| background-color: $light-bg-tertiary; | |
| } | |
| &.selected { | |
| background-color: #e7f5ff; | |
| td { | |
| color: $color-info; | |
| font-weight: 500; | |
| } | |
| } | |
| } | |
| } | |
| td { | |
| padding: 8px 6px; | |
| @if $theme == 'dark' { | |
| color: #c0c0c0; | |
| border-bottom: 1px solid #303030; | |
| } @else { | |
| color: $light-text-primary; | |
| border-bottom: 1px solid #dee2e6; | |
| } | |
| } | |
| } | |
| } | |
| // ============================================================================ | |
| // Input Styles | |
| // ============================================================================ | |
| @mixin input-field($theme: 'light') { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| transition: border-color 0.3s ease; | |
| @if $theme == 'dark' { | |
| background-color: $dark-bg-primary; | |
| border: 2px solid $dark-border; | |
| color: $dark-text-primary; | |
| &:focus { | |
| outline: none; | |
| border-color: $color-primary; | |
| } | |
| &:disabled { | |
| background-color: $dark-bg-tertiary; | |
| cursor: not-allowed; | |
| } | |
| } @else { | |
| background-color: white; | |
| border: 2px solid #e9ecef; | |
| color: $light-text-primary; | |
| &:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| } | |
| &:disabled { | |
| background-color: $light-bg-tertiary; | |
| cursor: not-allowed; | |
| } | |
| } | |
| } | |
| // ============================================================================ | |
| // Code/Debug Display | |
| // ============================================================================ | |
| @mixin code-display($theme: 'light') { | |
| border-radius: 8px; | |
| padding: 1rem; | |
| font-family: "Courier New", monospace; | |
| font-size: 0.9rem; | |
| overflow-x: auto; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| margin: 0; | |
| @if $theme == 'dark' { | |
| background-color: $dark-bg-primary; | |
| color: $dark-text-primary; | |
| border: 1px solid $dark-border; | |
| } @else { | |
| background-color: white; | |
| color: $light-text-primary; | |
| border: 1px solid $light-border; | |
| } | |
| } | |
| // ============================================================================ | |
| // Utility Classes | |
| // ============================================================================ | |
| .no-data-message { | |
| text-align: center; | |
| padding: 2rem; | |
| font-size: 14px; | |
| font-style: italic; | |
| } | |
| .panel-section { | |
| margin-bottom: 30px; | |
| &:last-child { | |
| margin-bottom: 0; | |
| } | |
| } | |
| .button-group { | |
| display: flex; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .info-text { | |
| font-size: 13px; | |
| line-height: 1.5; | |
| margin: 0 0 15px 0; | |
| } | |