2 lines
10 KiB
CSS
2 lines
10 KiB
CSS
@import"https://fonts.googleapis.com/css2?family=Iceland&family=JetBrains+Mono:wght@400;600&family=Russo+One&display=swap";@import"https://fonts.googleapis.com/css2?family=Iceland&family=Russo+One&family=VT323&display=swap";:root{--font-headline: "Russo One", sans-serif;--font-ui: "VT323", "Iceland", sans-serif;--terminal-green: #7dff9b;--terminal-green-soft: #b9ffca;--terminal-green-dim: #5fd67b;--terminal-green-muted: #4f7b59;--terminal-panel-border: rgba(125, 255, 155, .22);font-family:var(--font-ui)}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden;background:radial-gradient(circle at top left,rgba(125,255,155,.12),transparent 26%),radial-gradient(circle at top right,rgba(255,184,77,.08),transparent 22%),linear-gradient(180deg,#040605,#070b08 46%,#050505);color:var(--terminal-green-soft);font-family:var(--font-ui);letter-spacing:.04em;text-shadow:0 0 10px rgba(125,255,155,.08)}#root{width:100%;height:100vh}html,body{width:100%;height:100%;min-height:100%}button,input,select,textarea{font:inherit}code{font-family:SFMono-Regular,Menlo,monospace}.gallery-shell{display:grid;grid-template-columns:280px minmax(0,1fr);width:100%;height:100%}.gallery-sidebar{display:flex;flex-direction:column;gap:22px;padding:24px 18px;border-right:1px solid rgba(125,255,155,.14);background:#060a08eb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:auto}.gallery-sidebar-header h1,.gallery-toolbar h2,.gallery-section-header h2,.gallery-section-header h3{margin:0;font-family:var(--font-headline);font-weight:400;letter-spacing:.08em;text-transform:uppercase}.gallery-sidebar-header h1{font-size:1.7rem}.gallery-sidebar-header p,.gallery-toolbar-subtitle,.gallery-muted,.gallery-list-subtitle,.gallery-list-note,.gallery-control-help,.gallery-log-time,.gallery-metadata dt{color:var(--terminal-green-muted)}.gallery-sidebar-header p,.gallery-toolbar-subtitle,.gallery-muted,.gallery-list-note,.gallery-control-help{font-size:.95rem}.gallery-eyebrow{display:inline-flex;margin-bottom:6px;color:var(--terminal-green-dim);font-size:.95rem;text-transform:uppercase;letter-spacing:.18em}.gallery-section{display:flex;flex-direction:column;gap:10px}.gallery-section-header,.gallery-panel-header,.gallery-log-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.gallery-list{display:flex;flex-direction:column;gap:10px}.gallery-list-item{display:flex;align-items:stretch;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;border:1px solid rgba(125,255,155,.14);border-radius:16px;background:#0d1510e0;color:inherit;text-align:left}button.gallery-list-item{cursor:pointer;transition:border-color .18s ease,transform .18s ease,background .18s ease}button.gallery-list-item:hover{transform:translateY(-1px);border-color:#7dff9b57;background:#121d16f0}.gallery-list-item.is-active{border-color:#7dff9b80;box-shadow:0 0 0 1px #7dff9b2e,inset 0 0 0 1px #7dff9b1f}.gallery-list-item.is-disabled{opacity:.7}.gallery-list-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.gallery-list-title{color:var(--terminal-green-soft);font-size:1.08rem}.gallery-list-subtitle{font-family:SFMono-Regular,Menlo,monospace;font-size:.72rem;word-break:break-word}.gallery-list-note{line-height:1.2}.gallery-list-thumb{--gallery-card-accent: hsl(var(--gallery-card-hue, 120) 80% 70%);width:84px;min-width:84px;border-radius:14px;padding:1px;background:linear-gradient(145deg,color-mix(in srgb,var(--gallery-card-accent) 72%,transparent),transparent 62%),#7dff9b1f}.gallery-list-thumb-frame{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:84px;padding:10px;border-radius:13px;background:radial-gradient(circle at top left,color-mix(in srgb,var(--gallery-card-accent) 26%,transparent),transparent 58%),linear-gradient(180deg,#080d0af5,#060907fa)}.gallery-list-thumb-type,.gallery-list-thumb-id{font-size:.64rem;line-height:1;text-transform:uppercase;letter-spacing:.12em}.gallery-list-thumb-type{color:color-mix(in srgb,var(--gallery-card-accent) 72%,white)}.gallery-list-thumb-frame strong{color:#f6fff8;font-family:var(--font-headline);font-size:1.65rem;font-weight:400;line-height:.9}.gallery-list-thumb-id{color:#ffffffad}.gallery-list-status{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.gallery-selected-card{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid rgba(125,255,155,.14);border-radius:20px;background:#0a100de0}.gallery-selected-title{margin:0;font-family:var(--font-headline);font-size:1.5rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase}.gallery-selected-subtitle{margin:0;color:var(--terminal-green-muted);font-size:.95rem}.gallery-sidebar-viewport-switcher{margin-top:14px}.gallery-main{display:flex;flex-direction:column;min-width:0;height:100%;padding:20px}.gallery-toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.gallery-viewport-switcher{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px}.gallery-sidebar-actions{justify-content:flex-start}.gallery-viewport-button{min-width:94px;padding:10px 12px;border:1px solid rgba(125,255,155,.14);border-radius:14px;background:#080e0ae0;color:var(--terminal-green-soft);cursor:pointer;text-align:left;transition:border-color .18s ease,transform .18s ease,background .18s ease}.gallery-viewport-button-compact{min-width:0;padding:6px 10px;border-radius:999px;font-size:.78rem;line-height:1.1;white-space:nowrap}.gallery-viewport-button:hover{transform:translateY(-1px);border-color:#7dff9b52}.gallery-viewport-button.is-active{border-color:#7dff9b6b;background:linear-gradient(180deg,#142018f5,#0a100deb);box-shadow:inset 0 0 0 1px #7dff9b1f}.gallery-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;height:100%;min-height:0;flex:1}.gallery-preview-panel,.gallery-panel{display:flex;flex-direction:column;gap:14px;min-height:0;padding:18px;border:1px solid rgba(125,255,155,.14);border-radius:20px;background:#0a100de0}.gallery-panel-scroll{flex:1 1 0;overflow:hidden}.gallery-inspector{display:flex;flex-direction:column;gap:18px;max-height:100%;min-height:0;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain}.gallery-stage{position:relative;align-items:center;justify-content:center;min-height:0;flex:1;border:1px solid rgba(125,255,155,.14);border-radius:18px;background:linear-gradient(180deg,#060b08e0,#040705fa),repeating-linear-gradient(0deg,rgba(125,255,155,.02),rgba(125,255,155,.02) 1px,transparent 1px,transparent 30px);overflow:auto}.gallery-stage-badges{display:flex;align-items:center;gap:8px}.gallery-stage-viewport{width:min(100%,var(--gallery-preview-width));height:min(100%,var(--gallery-preview-height));min-height:0;min-width:0;display:flex;flex:0 0 auto;overflow:hidden;border-radius:14px;box-shadow:0 0 0 1px #7dff9b24,0 18px 38px #00000042}.gallery-stage-viewport.is-fluid{width:100%;height:100%;flex:1 1 auto;border-radius:0;box-shadow:none}.gallery-canvas-shell,.gallery-standard-shell,.gallery-state{width:100%;height:100%;flex:1 1 auto;min-width:100%;min-height:100%}.gallery-preview-frame{display:block;flex:1 1 auto;width:100%;height:100%;border:0;background:transparent}.gallery-runtime-root{display:flex;width:100%;height:100%;min-height:100%}.gallery-canvas-shell{display:flex;height:100%}.gallery-state{display:grid;place-items:center;padding:32px;text-align:center}.gallery-state h3{margin:8px 0 0;font-family:var(--font-headline);font-weight:400}.gallery-state p{max-width:360px}.gallery-state-error{place-items:start;text-align:left}.gallery-controls{display:flex;flex-direction:column;gap:14px}.gallery-controls-scroll{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}.gallery-control{display:flex;flex-direction:column;gap:7px}.gallery-checkbox{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}.gallery-control-copy{display:flex;flex-direction:column;gap:4px}.gallery-control-label{color:var(--terminal-green-soft);font-size:1rem}.gallery-range-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:10px}.gallery-input,.gallery-number,.gallery-range,.gallery-button,.gallery-checkbox input{accent-color:var(--terminal-green)}.gallery-input,.gallery-number{width:100%;padding:10px 12px;border:1px solid rgba(125,255,155,.18);border-radius:12px;background:#070c09eb;color:var(--terminal-green-soft)}.gallery-range{width:100%}.gallery-button{padding:10px 14px;border:1px solid rgba(125,255,155,.18);border-radius:999px;background:#0c1610eb;color:var(--terminal-green-soft);cursor:pointer;transition:border-color .18s ease,background .18s ease}.gallery-button:hover:not(:disabled){border-color:#7dff9b57;background:#101c15f5}.gallery-button:disabled{opacity:.45;cursor:not-allowed}.gallery-button-quiet{padding:6px 10px}.gallery-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border-radius:999px;border:1px solid rgba(125,255,155,.18);background:#0c1610eb;color:var(--terminal-green-soft);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.gallery-badge-muted{border-color:#7dff9b14;color:var(--terminal-green-muted)}.gallery-badge-accent{border-color:#ffb84d4d;color:#ffcd82}.gallery-badge-danger{border-color:#ff6b6b4d;color:#ff9b9b}.gallery-badge-progress{border-color:#7dff9b4d}.gallery-badge-complete{border-color:#4db8ff57;color:#98dbff}.gallery-badge-sound{border-color:#ffb84d4d;color:#ffcd82}.gallery-badge-host{border-color:#b57dff4d;color:#d8b8ff}.gallery-badge-system{border-color:#7dff9b24;color:var(--terminal-green-muted)}.gallery-metadata{display:grid;gap:12px;margin:0}.gallery-metadata div{display:grid;gap:4px}.gallery-metadata dt{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.gallery-metadata dd{margin:0;color:var(--terminal-green-soft)}.gallery-log-list{display:flex;flex-direction:column;gap:12px;max-height:360px;overflow:auto}.gallery-log-item{padding:12px;border-radius:14px;background:#070c09eb;border:1px solid rgba(125,255,155,.1)}.gallery-pre{margin:0;white-space:pre-wrap;word-break:break-word;color:#d8f9df;font-family:SFMono-Regular,Menlo,monospace;font-size:.78rem;line-height:1.45}@media(max-width:1200px){.gallery-grid{grid-template-columns:minmax(0,1fr) 320px}}@media(max-width:960px){body{overflow:auto}body[data-gallery-mode=shell] #root{height:auto;min-height:100%}.gallery-shell{grid-template-columns:1fr;height:auto}.gallery-sidebar{border-right:0;border-bottom:1px solid rgba(125,255,155,.14)}.gallery-grid{grid-template-columns:1fr}.gallery-viewport-switcher,.gallery-toolbar-actions{justify-content:flex-start}.gallery-stage{min-height:70vh}}
|