/* Shared components — Are.na-style primitives used by every tool. Paired with tokens.css. Import both in order: tokens, then components. */ /* Topbar — horizontal tool bar that sits at the top of a tool page */ .topbar { padding: 6px 10px; display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; z-index: 10; /* Visibility is driven by `.bar-open` on (toggled by the cog button). */ max-height: 240px; overflow-x: auto; overflow-y: hidden; transition: max-height 220ms ease, padding 220ms ease, border-bottom-color 220ms ease; } .topbar::-webkit-scrollbar { height: 0; } .topbar > * { flex-shrink: 0; } body:not(.bar-open) .topbar { max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; } /* Floating action stack — fixed top-right column. Each tool can append more buttons (export, randomize, etc.). Each button shares the same chip shape. Buttons are dimmed until the corner is hovered (or the bar is open). */ .settings-toggle, .export-btn, .randomize-btn, .source-btn { position: fixed; right: 8px; z-index: 100; width: var(--ctrl-h); height: var(--ctrl-h); padding: 0; border: 1px solid var(--border); background: var(--panel); color: var(--fg); cursor: pointer; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; opacity: 0.25; transition: opacity 220ms ease, background 200ms ease; text-decoration: none; } .settings-toggle:hover, .export-btn:hover, .randomize-btn:hover, .source-btn:hover { background: var(--hover); opacity: 1; } /* Hovering any chip in the stack lights up all of them. */ body:has(.settings-toggle:hover, .export-btn:hover, .randomize-btn:hover, .source-btn:hover) .settings-toggle, body:has(.settings-toggle:hover, .export-btn:hover, .randomize-btn:hover, .source-btn:hover) .export-btn, body:has(.settings-toggle:hover, .export-btn:hover, .randomize-btn:hover, .source-btn:hover) .randomize-btn, body:has(.settings-toggle:hover, .export-btn:hover, .randomize-btn:hover, .source-btn:hover) .source-btn, body.bar-open .settings-toggle, body.bar-open .export-btn, body.bar-open .randomize-btn, body.bar-open .source-btn { opacity: 1; } .settings-toggle { top: 8px; } .export-btn { top: 44px; } .source-btn { top: 80px; } .randomize-btn { top: 80px; } body.bar-open .settings-toggle { background: var(--fg); color: var(--panel); border-color: var(--fg); } /* Uppercase + letter-spacing on UI controls site-wide. Text inputs keep the user's typed case — they target what the user actually wrote. */ .topbar button, .topbar select, .topbar .file-label, .controls button, .controls select, .controls .file-label, .colorize-btn { text-transform: uppercase; letter-spacing: 0.04em; } .topbar .back { font-size: 13px; color: var(--muted); } .topbar .back:hover { color: var(--fg); } .topbar .sep { width: 1px; height: 16px; background: var(--border); } .topbar .spacer { flex: 1; } /* Inline label: uppercase mono prefix + control */ .topbar label { font-size: 11px; color: var(--muted); display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; } /* Form controls — shared by .topbar and .view .controls (apparel). */ .topbar input[type="text"], .topbar input[type="number"], .topbar select, .view .controls input[type="text"], .view .controls input[type="number"], .view .controls select { font: inherit; font-size: 12px; height: var(--ctrl-h); padding: 0 8px; border: 1px solid var(--border); background: var(--panel); color: var(--fg); border-radius: var(--radius); text-transform: none; letter-spacing: 0; } .topbar input[type="range"], .view .controls input[type="range"] { accent-color: var(--fg); width: 120px; height: var(--ctrl-h); } .topbar input[type="color"], .view .controls input[type="color"] { width: var(--ctrl-h); height: var(--ctrl-h); padding: 0; border: 1px solid var(--border); cursor: pointer; background: var(--panel); border-radius: 50%; overflow: hidden; } .topbar input[type="color"]::-webkit-color-swatch-wrapper, .view .controls input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .topbar input[type="color"]::-webkit-color-swatch, .view .controls input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; } .topbar input[type="color"]::-moz-color-swatch, .view .controls input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; } .topbar button, .topbar .file-label, .view .controls button, .view .controls .file-label { font: inherit; font-size: 12px; height: var(--ctrl-h); padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid var(--border); background: var(--panel); color: var(--fg); cursor: pointer; border-radius: var(--radius); } .topbar button:hover, .topbar .file-label:hover, .view .controls button:hover, .view .controls .file-label:hover { background: var(--hover); } .view .controls button.active { background: var(--fg); color: var(--panel); border-color: var(--fg); } .view .controls button.active:hover { background: var(--fg); } .topbar label { height: var(--ctrl-h); } /* Mono caption — tiny uppercase label used above panels, on overlays, etc. */ .caption { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } /* Swatches — color grid buttons */ .swatches { display: flex; gap: 4px; flex-wrap: wrap; } .swatch { width: var(--ctrl-s); height: var(--ctrl-s); padding: 0; border: 1px solid var(--border); cursor: pointer; border-radius: 50%; background: transparent; } .swatch.active { outline: 2px solid var(--fg); outline-offset: 1px; } /* Panel — bordered container with panel bg */ .panel { background: var(--panel); border: 1px solid var(--border); }