Spaces:
Sleeping
Sleeping
| .playground-layout { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .tab-content { | |
| display: none; | |
| flex: 1; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| flex-direction: column; | |
| } | |
| .tab-content.active { display: flex; } | |
| #tab-analytics, #tab-docs { | |
| padding: 32px; | |
| overflow-y: auto; | |
| } | |
| .lab-grid { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: 1fr 320px; | |
| padding: 16px; | |
| gap: 16px; | |
| overflow: hidden; | |
| } | |
| .lab-main { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| grid-template-rows: auto 1fr; | |
| gap: 16px; | |
| overflow-y: auto; | |
| padding-right: 4px; /* For scrollbar */ | |
| } | |
| /* Scrollbar styling */ | |
| .lab-main::-webkit-scrollbar { width: 6px; } | |
| .lab-main::-webkit-scrollbar-track { background: transparent; } | |
| .lab-main::-webkit-scrollbar-thumb { background: var(--bg-border); border-radius: 10px; } | |
| .canvas-card { | |
| grid-column: span 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg-panel); | |
| } | |
| #lattice-canvas { | |
| background: #000; | |
| border-radius: var(--radius-md); | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.5); | |
| border: 4px solid var(--bg-border); | |
| cursor: crosshair; | |
| } | |
| .metrics-card { | |
| grid-column: span 1; | |
| } | |
| .chart-card-full { | |
| grid-column: span 2; | |
| min-height: 240px; | |
| } | |
| /* Sidebar */ | |
| .lab-sidebar { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| height: 100%; | |
| overflow-y: auto; | |
| } | |
| .control-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .control-label { | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| select, input { | |
| background: var(--bg-input); | |
| border: 1px solid var(--bg-border); | |
| color: var(--text-primary); | |
| padding: 12px; | |
| border-radius: var(--radius-md); | |
| font-size: 14px; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| select:focus, input:focus { border-color: var(--accent); } | |
| /* Atom Selector */ | |
| .atom-selector { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| } | |
| .atom-option { | |
| background: var(--bg-input); | |
| border: 1px solid var(--bg-border); | |
| border-radius: var(--radius-md); | |
| padding: 16px; | |
| cursor: pointer; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| transition: all 0.2s; | |
| } | |
| .atom-option:hover { border-color: var(--text-muted); } | |
| .atom-option.selected { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| } | |
| .atom-symbol { | |
| font-size: 20px; | |
| font-weight: 800; | |
| font-family: var(--mono); | |
| } | |
| .atom-name { | |
| font-size: 10px; | |
| font-weight: 700; | |
| color: var(--text-secondary); | |
| } | |
| /* Property Rows */ | |
| .prop-list { display: flex; flex-direction: column; gap: 16px; } | |
| .prop-row { display: flex; flex-direction: column; gap: 8px; } | |
| .prop-header { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; font-family: var(--mono); } | |
| .prop-bar-container { height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; position: relative; overflow: hidden; } | |
| .prop-bar-fill { position: absolute; height: 100%; border-radius: 4px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } | |
| .prop-bar-target { position: absolute; width: 2px; height: 100%; background: #fff; z-index: 5; box-shadow: 0 0 8px #fff; } | |
| /* Log Box */ | |
| .log-box { | |
| flex: 1; | |
| background: #000; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--bg-border); | |
| padding: 12px; | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| overflow-y: auto; | |
| color: var(--text-secondary); | |
| } | |
| .log-line { margin-bottom: 4px; display: flex; gap: 8px; } | |
| .log-line.error { color: var(--accent-err); } | |
| .log-line.success { color: var(--accent2); } | |