Spaces:
Sleeping
Sleeping
| /* GPU Memory Calculator Styles */ | |
| :root { | |
| --primary-color: #2563eb; | |
| --primary-hover: #1d4ed8; | |
| --success-color: #10b981; | |
| --warning-color: #f59e0b; | |
| --danger-color: #ef4444; | |
| --bg-color: #f8fafc; | |
| --card-bg: #ffffff; | |
| --border-color: #e2e8f0; | |
| --text-primary: #1e293b; | |
| --text-secondary: #64748b; | |
| --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| } | |
| header h1 { | |
| font-size: 2.5rem; | |
| color: var(--text-primary); | |
| margin-bottom: 5px; | |
| } | |
| .subtitle { | |
| color: var(--text-secondary); | |
| font-size: 1.1rem; | |
| } | |
| /* Tab Navigation */ | |
| .tab-navigation { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 30px; | |
| justify-content: center; | |
| background: var(--card-bg); | |
| padding: 10px; | |
| border-radius: 8px; | |
| box-shadow: var(--shadow); | |
| } | |
| .tab-btn { | |
| padding: 12px 24px; | |
| border: 2px solid var(--border-color); | |
| background: var(--card-bg); | |
| color: var(--text-secondary); | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| transition: all 0.2s ease; | |
| flex: 1; | |
| max-width: 200px; | |
| } | |
| .tab-btn:hover { | |
| background: var(--bg-color); | |
| border-color: var(--primary-color); | |
| color: var(--primary-color); | |
| } | |
| .tab-btn.active { | |
| background: var(--primary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: grid; | |
| grid-template-columns: 1fr 400px; | |
| gap: 20px; | |
| align-items: start; | |
| } | |
| .main-content { | |
| display: contents; | |
| } | |
| @media (max-width: 1024px) { | |
| .tab-content.active { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Config Panel */ | |
| .config-panel { | |
| background: var(--card-bg); | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| } | |
| .config-section { | |
| margin-bottom: 25px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .config-section:last-of-type { | |
| border-bottom: none; | |
| } | |
| .config-section h3 { | |
| font-size: 1.2rem; | |
| margin-bottom: 15px; | |
| color: var(--text-primary); | |
| } | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 15px; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| } | |
| .form-group label { | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| margin-bottom: 5px; | |
| color: var(--text-primary); | |
| } | |
| .form-group input[type="text"], | |
| .form-group input[type="number"], | |
| .form-group select { | |
| padding: 8px 12px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| font-size: 0.95rem; | |
| transition: border-color 0.2s; | |
| } | |
| .form-group input[type="text"]:focus, | |
| .form-group input[type="number"]:focus, | |
| .form-group select:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| .form-group input[type="range"] { | |
| margin-top: 5px; | |
| width: 100%; | |
| } | |
| .form-group input[type="checkbox"] { | |
| margin-right: 8px; | |
| } | |
| .info-text { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| margin-top: 10px; | |
| } | |
| /* Buttons */ | |
| .button-group { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| padding: 12px 24px; | |
| border-radius: 6px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--primary-hover); | |
| } | |
| .btn-secondary { | |
| background-color: white; | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-color); | |
| padding: 12px 24px; | |
| border-radius: 6px; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--bg-color); | |
| border-color: var(--text-secondary); | |
| } | |
| /* Results Panel */ | |
| .results-panel { | |
| background: var(--card-bg); | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| position: sticky; | |
| top: 20px; | |
| } | |
| .result-card { | |
| margin-bottom: 20px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .result-card:last-child { | |
| border-bottom: none; | |
| } | |
| .result-card h3 { | |
| font-size: 1.1rem; | |
| margin-bottom: 12px; | |
| color: var(--text-primary); | |
| } | |
| .metric { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .metric-label { | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| } | |
| .metric-value { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| } | |
| .breakdown-item { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 6px; | |
| font-size: 0.9rem; | |
| } | |
| .breakdown-label { | |
| color: var(--text-secondary); | |
| } | |
| .breakdown-value { | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| } | |
| /* Bar Chart */ | |
| .bar-chart { | |
| display: flex; | |
| height: 24px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-top: 15px; | |
| background-color: var(--border-color); | |
| } | |
| .bar { | |
| height: 100%; | |
| transition: width 0.3s ease; | |
| position: relative; | |
| } | |
| /* Add patterns to bars for colorblind accessibility */ | |
| #bar-params { | |
| background-color: #3b82f6; | |
| background-image: repeating-linear-gradient( | |
| 45deg, | |
| transparent, | |
| transparent 5px, | |
| rgba(255, 255, 255, 0.1) 5px, | |
| rgba(255, 255, 255, 0.1) 10px | |
| ); | |
| } | |
| #bar-grads { | |
| background-color: #8b5cf6; | |
| background-image: repeating-linear-gradient( | |
| 45deg, | |
| transparent, | |
| transparent 5px, | |
| rgba(255, 255, 255, 0.1) 5px, | |
| rgba(255, 255, 255, 0.1) 10px | |
| ); | |
| /* Different pattern: dots */ | |
| background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px); | |
| background-size: 8px 8px; | |
| } | |
| #bar-optimizer { | |
| background-color: #ec4899; | |
| background-image: repeating-linear-gradient( | |
| -45deg, | |
| transparent, | |
| transparent 5px, | |
| rgba(255, 255, 255, 0.15) 5px, | |
| rgba(255, 255, 255, 0.15) 10px | |
| ); | |
| } | |
| #bar-activations { | |
| background-color: #10b981; | |
| background-image: repeating-linear-gradient( | |
| 90deg, | |
| transparent, | |
| transparent 5px, | |
| rgba(255, 255, 255, 0.1) 5px, | |
| rgba(255, 255, 255, 0.1) 10px | |
| ); | |
| } | |
| .bar:first-child { | |
| border-top-left-radius: 4px; | |
| border-bottom-left-radius: 4px; | |
| } | |
| .bar:last-child { | |
| border-top-right-radius: 4px; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .chart-legend { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 10px; | |
| font-size: 0.8rem; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .legend-color { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 2px; | |
| } | |
| .legend-color.params { background-color: #3b82f6; } | |
| .legend-color.grads { background-color: #8b5cf6; } | |
| .legend-color.optimizer { background-color: #ec4899; } | |
| .legend-color.activations { background-color: #10b981; } | |
| #bar-params { background-color: #3b82f6; } | |
| #bar-grads { background-color: #8b5cf6; } | |
| #bar-optimizer { background-color: #ec4899; } | |
| #bar-activations { background-color: #10b981; } | |
| /* Screen reader only class */ | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border-width: 0; | |
| } | |
| /* Status colors */ | |
| .status-success { color: var(--success-color); } | |
| .status-warning { color: var(--warning-color); } | |
| .status-danger { color: var(--danger-color); } | |
| /* Group Label */ | |
| .group-label { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 5px; | |
| display: block; | |
| } | |
| /* Error Message */ | |
| .error-message { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background-color: var(--danger-color); | |
| color: white; | |
| padding: 15px 20px; | |
| border-radius: 6px; | |
| box-shadow: var(--shadow); | |
| z-index: 1000; | |
| } | |
| /* Tooltip */ | |
| [data-tooltip] { | |
| position: relative; | |
| } | |
| [data-tooltip]:hover::after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 5px 10px; | |
| background-color: var(--text-primary); | |
| color: white; | |
| font-size: 0.8rem; | |
| border-radius: 4px; | |
| white-space: nowrap; | |
| z-index: 100; | |
| margin-bottom: 5px; | |
| } | |
| /* Formula Explanation Section */ | |
| .formula-description { | |
| margin-bottom: 15px; | |
| line-height: 1.6; | |
| } | |
| .formula-description p { | |
| margin-bottom: 8px; | |
| } | |
| .formula-components-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 15px 0; | |
| } | |
| .formula-components-list li { | |
| background-color: var(--bg-color); | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| padding: 12px; | |
| margin-bottom: 12px; | |
| } | |
| .component-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 6px; | |
| font-size: 1rem; | |
| } | |
| .component-formula { | |
| font-family: 'Courier New', Courier, monospace; | |
| background-color: var(--border-color); | |
| padding: 8px; | |
| border-radius: 4px; | |
| margin: 8px 0; | |
| font-size: 0.9rem; | |
| overflow-x: auto; | |
| } | |
| .component-calculation { | |
| margin: 6px 0; | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| .component-result { | |
| margin-top: 6px; | |
| font-size: 0.95rem; | |
| color: var(--primary-color); | |
| font-weight: 500; | |
| } | |
| .formula-references { | |
| margin-top: 20px; | |
| padding-top: 15px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .formula-references h4 { | |
| font-size: 1rem; | |
| color: var(--text-primary); | |
| margin-bottom: 10px; | |
| } | |
| .formula-references ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .formula-references li { | |
| margin-bottom: 8px; | |
| } | |
| .formula-references a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| } | |
| .formula-references a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Hugging Face Integration */ | |
| .preset-row { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .preset-row select { | |
| flex: 1; | |
| } | |
| .btn-tertiary { | |
| background-color: #ffd700; | |
| color: #1e293b; | |
| border: none; | |
| padding: 10px 16px; | |
| border-radius: 6px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| } | |
| .btn-tertiary:hover { | |
| background-color: #f0c000; | |
| } | |
| .btn-tertiary:active { | |
| transform: scale(0.98); | |
| } | |
| .hf-fetch-panel { | |
| background: #f0f9ff; | |
| border: 1px solid #2563eb; | |
| border-radius: 8px; | |
| padding: 20px; | |
| margin-top: 15px; | |
| } | |
| .hf-fetch-panel .form-group { | |
| margin-bottom: 15px; | |
| } | |
| .hf-fetch-panel .help-text { | |
| display: block; | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| margin-top: 5px; | |
| } | |
| .loading-message { | |
| color: var(--primary-color); | |
| font-style: italic; | |
| padding: 10px; | |
| text-align: center; | |
| } | |
| .error-message { | |
| background-color: #fee; | |
| color: #c00; | |
| padding: 12px; | |
| border-radius: 6px; | |
| border: 1px solid #fcc; | |
| margin-top: 10px; | |
| } | |
| .success-message { | |
| background-color: #efe; | |
| color: #0a0; | |
| padding: 12px; | |
| border-radius: 6px; | |
| border: 1px solid #cfc; | |
| margin-top: 10px; | |
| } | |