Spaces:
Running
Running
| /** | |
| * Dystrio HF Space - Styles | |
| * | |
| * Dark theme optimized for GPU/ML infrastructure tools. | |
| * Uses CSS variables for easy theming. | |
| */ | |
| :root { | |
| /* Colors - GitHub Dark inspired */ | |
| --bg: #0d1117; | |
| --bg-secondary: #010409; | |
| --surface: #161b22; | |
| --surface-hover: #1c2128; | |
| --border: #30363d; | |
| --border-accent: #58a6ff; | |
| --text: #e6edf3; | |
| --text-secondary: #8b949e; | |
| --text-muted: #6e7681; | |
| --accent: #58a6ff; | |
| --accent-hover: #79c0ff; | |
| --success: #3fb950; | |
| --success-bg: rgba(63, 185, 80, 0.1); | |
| --error: #f85149; | |
| --error-bg: rgba(248, 81, 73, 0.1); | |
| --warning: #d29922; | |
| --warning-bg: rgba(210, 153, 34, 0.1); | |
| --info: #58a6ff; | |
| --info-bg: rgba(88, 166, 255, 0.1); | |
| /* Typography */ | |
| --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; | |
| --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', monospace; | |
| /* Sizing */ | |
| --radius: 8px; | |
| --radius-sm: 6px; | |
| --container-max: 720px; | |
| } | |
| /* Reset */ | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* Base */ | |
| html { | |
| font-size: 16px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| body { | |
| font-family: var(--font-sans); | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.5; | |
| min-height: 100vh; | |
| padding: 2rem 1rem; | |
| } | |
| /* Container */ | |
| .container { | |
| max-width: var(--container-max); | |
| margin: 0 auto; | |
| } | |
| /* Header */ | |
| .header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .header h1 { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, var(--accent), #a371f7); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 0.25rem; | |
| } | |
| .subtitle { | |
| color: var(--text-secondary); | |
| font-size: 0.9375rem; | |
| } | |
| /* Cards */ | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .card-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.625rem; | |
| } | |
| .step-number { | |
| background: var(--accent); | |
| color: var(--bg); | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| border-radius: 50%; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| } | |
| /* Form Elements */ | |
| label { | |
| display: block; | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.375rem; | |
| font-weight: 500; | |
| } | |
| input[type="text"], | |
| input[type="email"], | |
| select { | |
| width: 100%; | |
| padding: 0.625rem 0.875rem; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text); | |
| font-size: 0.875rem; | |
| font-family: inherit; | |
| margin-bottom: 1rem; | |
| transition: border-color 0.15s ease; | |
| } | |
| input:focus, | |
| select:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| input[type="file"] { | |
| width: 100%; | |
| padding: 0.625rem; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text); | |
| font-size: 0.875rem; | |
| margin-bottom: 1rem; | |
| cursor: pointer; | |
| } | |
| input[type="file"]::file-selector-button { | |
| background: var(--surface-hover); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text); | |
| padding: 0.375rem 0.75rem; | |
| margin-right: 0.75rem; | |
| cursor: pointer; | |
| font-size: 0.8125rem; | |
| } | |
| select { | |
| cursor: pointer; | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 0.75rem center; | |
| padding-right: 2rem; | |
| } | |
| .form-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| } | |
| @media (max-width: 600px) { | |
| .form-row { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Buttons */ | |
| button { | |
| background: var(--accent); | |
| color: var(--bg); | |
| border: none; | |
| padding: 0.75rem 1.25rem; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| font-family: inherit; | |
| cursor: pointer; | |
| width: 100%; | |
| transition: background-color 0.15s ease, opacity 0.15s ease; | |
| } | |
| button:hover { | |
| background: var(--accent-hover); | |
| } | |
| button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| button:disabled:hover { | |
| background: var(--accent); | |
| } | |
| /* Turnstile */ | |
| .turnstile-container { | |
| margin-bottom: 1rem; | |
| min-height: 65px; | |
| } | |
| /* Status Messages */ | |
| .status { | |
| padding: 0.75rem 1rem; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.875rem; | |
| margin-top: 1rem; | |
| display: none; | |
| line-height: 1.4; | |
| } | |
| .status.show { | |
| display: block; | |
| } | |
| .status.success { | |
| background: var(--success-bg); | |
| border: 1px solid var(--success); | |
| color: var(--success); | |
| } | |
| .status.error { | |
| background: var(--error-bg); | |
| border: 1px solid var(--error); | |
| color: var(--error); | |
| } | |
| .status.info { | |
| background: var(--info-bg); | |
| border: 1px solid var(--info); | |
| color: var(--info); | |
| } | |
| .status.warning { | |
| background: var(--warning-bg); | |
| border: 1px solid var(--warning); | |
| color: var(--warning); | |
| } | |
| /* Result Tabs */ | |
| .result-tabs { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| border-bottom: 1px solid var(--border); | |
| padding-bottom: 0.75rem; | |
| } | |
| .tab-btn { | |
| background: transparent; | |
| color: var(--text-secondary); | |
| width: auto; | |
| padding: 0.5rem 1rem; | |
| border-radius: var(--radius-sm); | |
| font-weight: 500; | |
| } | |
| .tab-btn:hover { | |
| background: var(--surface-hover); | |
| color: var(--text); | |
| } | |
| .tab-btn.active { | |
| background: var(--accent); | |
| color: var(--bg); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* Code/Pre */ | |
| pre { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| padding: 1rem; | |
| border-radius: var(--radius-sm); | |
| overflow-x: auto; | |
| font-family: var(--font-mono); | |
| font-size: 0.75rem; | |
| line-height: 1.5; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| color: var(--text-secondary); | |
| } | |
| .copy-btn { | |
| width: auto; | |
| margin-top: 0.75rem; | |
| padding: 0.5rem 1rem; | |
| background: var(--surface-hover); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| } | |
| .copy-btn:hover { | |
| background: var(--border); | |
| } | |
| /* Summary Display */ | |
| #resultSummary { | |
| font-size: 0.9375rem; | |
| } | |
| .summary-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0.625rem 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .summary-item:last-child { | |
| border-bottom: none; | |
| } | |
| .summary-label { | |
| color: var(--text-secondary); | |
| } | |
| .summary-value { | |
| font-weight: 500; | |
| color: var(--text); | |
| } | |
| .summary-value.success { | |
| color: var(--success); | |
| } | |
| .summary-value.warning { | |
| color: var(--warning); | |
| } | |
| /* Advisor Chat */ | |
| .advisor-intro { | |
| font-size: 0.8125rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 1rem; | |
| padding: 0.75rem; | |
| background: var(--bg); | |
| border-radius: var(--radius-sm); | |
| border-left: 3px solid var(--accent); | |
| } | |
| .chat-history { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| margin-bottom: 1rem; | |
| padding: 0.5rem; | |
| background: var(--bg); | |
| border-radius: var(--radius-sm); | |
| min-height: 100px; | |
| } | |
| .chat-message { | |
| margin-bottom: 0.75rem; | |
| padding: 0.75rem; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.875rem; | |
| line-height: 1.5; | |
| } | |
| .chat-message.user { | |
| background: var(--accent); | |
| color: var(--bg); | |
| margin-left: 2rem; | |
| } | |
| .chat-message.advisor { | |
| background: var(--surface-hover); | |
| color: var(--text); | |
| margin-right: 2rem; | |
| white-space: pre-wrap; | |
| font-family: var(--font-sans); | |
| } | |
| .chat-input-row { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .chat-input-row input { | |
| flex: 1; | |
| margin-bottom: 0; | |
| } | |
| .chat-input-row button { | |
| width: auto; | |
| padding: 0.625rem 1.25rem; | |
| } | |
| .quick-questions { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .quick-questions span { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .quick-questions button { | |
| width: auto; | |
| padding: 0.375rem 0.75rem; | |
| font-size: 0.75rem; | |
| background: var(--surface-hover); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| } | |
| .quick-questions button:hover { | |
| background: var(--border); | |
| } | |
| /* Footer */ | |
| .footer { | |
| text-align: center; | |
| margin-top: 2rem; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid var(--border); | |
| font-size: 0.8125rem; | |
| color: var(--text-muted); | |
| } | |
| .footer a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| .footer a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-muted); | |
| } | |
| /* Help Section */ | |
| .help-section { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| margin-bottom: 1rem; | |
| } | |
| .help-toggle { | |
| padding: 1rem 1.5rem; | |
| cursor: pointer; | |
| font-size: 0.9375rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| list-style: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .help-toggle::-webkit-details-marker { | |
| display: none; | |
| } | |
| .help-toggle::after { | |
| content: '▸'; | |
| margin-left: auto; | |
| transition: transform 0.2s ease; | |
| color: var(--text-muted); | |
| } | |
| details[open] .help-toggle::after { | |
| transform: rotate(90deg); | |
| } | |
| .help-content { | |
| padding: 0 1.5rem 1.5rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| .help-block { | |
| margin-top: 1.25rem; | |
| } | |
| .help-block h3 { | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: var(--accent); | |
| margin-bottom: 0.5rem; | |
| } | |
| .help-block p { | |
| font-size: 0.8125rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.5rem; | |
| line-height: 1.6; | |
| } | |
| .help-block ol { | |
| font-size: 0.8125rem; | |
| color: var(--text-secondary); | |
| margin-left: 1.25rem; | |
| line-height: 1.8; | |
| } | |
| .help-block pre { | |
| margin: 0.75rem 0; | |
| padding: 0.875rem; | |
| font-size: 0.6875rem; | |
| } | |
| .help-block code { | |
| background: var(--bg); | |
| padding: 0.125rem 0.375rem; | |
| border-radius: 3px; | |
| font-family: var(--font-mono); | |
| font-size: 0.8em; | |
| color: var(--accent); | |
| } | |
| } |