/* Benchmark Labs Settings panel - shared component - v1.4.1 (2026-09-18), spec brand/settings-standard.md (Larry, 9/12/26). Apps copy this file verbatim next to settings.js and do not restyle .lbs-* locally. Visual style is PDF Workspace's settings dialog: #0F1830 panel, #0A1220 inputs, #2a3550 borders, #F56800 accent. */ /* Every var() below carries its literal as a fallback (1.3.5): a host stylesheet, a CSS pipeline that drops custom-property declarations, or a stale copy can no longer leave a surface transparent. The tokens are declared on every root the component appends to the page: the panel, and the menus, popover and pick overlay, which live on (position:fixed) and cannot inherit from .lbs. Declared on .lbs alone they resolved to nothing there (shop 01). */ .lbs,.lbs-menu,.lbs-pop,.lbs-pickbox,.lbs-pickhint{--lbs-g:#0A1220;--lbs-panel:#0F1830;--lbs-line:#2a3550;--lbs-line2:#223052;--lbs-ink:#dfe3f0;--lbs-muted:#8a93ad;--lbs-orange:#F56800;--lbs-hover:#111c33} .lbs{ position:fixed;z-index:2147483000;isolation:isolate;left:60%;top:64px;width:660px;height:600px;min-width:640px;min-height:300px; background:var(--lbs-panel,#0F1830);border:1px solid var(--lbs-line,#2a3550);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.5); display:flex;flex-direction:column;overflow:hidden;color:var(--lbs-ink,#dfe3f0); font:13px/1.3 -apple-system,"SF Pro Text",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box} .lbs *{box-sizing:border-box} .lbs[hidden]{display:none} .lbs button,.lbs input,.lbs select{font:inherit;color:inherit} .lbs button{cursor:pointer} /* header */ .lbs-ph{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--lbs-line2,#223052);cursor:move;user-select:none;flex:0 0 auto} .lbs-ph b{font-size:13.5px;flex:1;font-weight:600;white-space:nowrap} .lbs-ph .lbs-dd{flex:0 1 160px;min-width:96px;width:auto;overflow:hidden;text-overflow:ellipsis} .lbs-ph button,.lbs-ph .lbs-dd{background:var(--lbs-g,#0A1220);border:1px solid var(--lbs-line,#2a3550);color:var(--lbs-ink,#dfe3f0);border-radius:5px;padding:2px 7px;font-size:11.5px;height:24px;cursor:pointer;white-space:nowrap} .lbs-ph button:hover{border-color:#3d4a75} .lbs-ph .lbs-pick{border-color:rgba(245,104,0,.6);color:var(--lbs-orange,#F56800);background:rgba(245,104,0,.12)} .lbs-ph .lbs-pick.on{background:var(--lbs-orange,#F56800);color:#fff} .lbs-ph .lbs-x{width:26px;padding:0;font-size:16px;line-height:1} .lbs-scope{display:flex;border:1px solid var(--lbs-line,#2a3550);border-radius:5px;overflow:hidden;background:var(--lbs-g,#0A1220);height:24px} .lbs-scope span{padding:3px 8px;font-size:11px;cursor:pointer;color:#cfd5e8;line-height:16px;white-space:nowrap} .lbs-scope span.on{background:#37406a;color:#fff} /* body */ .lbs-pb{overflow:auto;padding:2px 10px 10px;flex:1;min-height:0} /* Classic (non-overlay) scrollbars on macOS eat 15px of the grid; keep them thin so the 501px item grid fits at the default width. */ .lbs-pb::-webkit-scrollbar{width:7px;height:7px} .lbs-pb::-webkit-scrollbar-thumb{background:#2a3550;border-radius:4px} .lbs-sec{border-bottom:1px solid var(--lbs-line2,#223052)} .lbs-sh{display:flex;align-items:center;gap:8px;padding:6px 2px;cursor:pointer;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--lbs-muted,#8a93ad);user-select:none} .lbs-sh .lbs-tri{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--lbs-muted,#8a93ad);transition:transform .15s} .lbs-sec.closed .lbs-tri{transform:rotate(-90deg)} .lbs-sec.closed .lbs-items{display:none} .lbs-sh .lbs-cnt{flex:1;text-align:right;font-size:10px;letter-spacing:0;text-transform:none} .lbs-sh .lbs-rs{font-size:10px;text-transform:none;letter-spacing:0;color:#6f7a99} .lbs-sh .lbs-rs:hover{color:var(--lbs-orange,#F56800)} .lbs-hdrrow{display:grid;grid-template-columns:18px 190px 24px 24px 118px 60px 92px minmax(18px,1fr);gap:5px;padding:2px 2px 1px 0;font-size:9px;color:#6f7a99;text-transform:uppercase;letter-spacing:.4px} .lbs-hdrrow span:nth-child(3),.lbs-hdrrow span:nth-child(4){text-align:center} /* rows: dot | name | text swatch | bg swatch | font | size | weight | reset */ .lbs-it{display:grid;grid-template-columns:18px 190px 24px 24px 118px 60px 92px minmax(18px,1fr);gap:5px;align-items:center;padding:1px 2px 1px 0;font-size:11.5px;line-height:1.1;border-radius:3px} .lbs-it:hover{background:var(--lbs-hover,#111c33)} .lbs-it.lbs-flash{outline:2px solid var(--lbs-orange,#F56800);outline-offset:-1px} .lbs-dot{width:6px;height:6px;border-radius:50%;background:transparent;justify-self:center} .lbs-it.changed .lbs-dot{background:var(--lbs-orange,#F56800)} /* 1.3.8: a long label wraps to a second line instead of being cut off (Larry 9/17: "the descriptions are cut off") */ .lbs-lab{color:var(--lbs-ink,#dfe3f0);white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15;overflow-wrap:anywhere;cursor:default} .lbs-lab .lbs-more{display:inline-block;margin-left:5px;font-size:9px;color:#6f7a99;cursor:pointer;transition:transform .15s} .lbs-lab .lbs-more:hover{color:var(--lbs-orange,#F56800)} .lbs-it.open .lbs-more{transform:rotate(90deg)} .lbs-sub{display:none;grid-column:1/-1;padding:2px 0 4px 18px} .lbs-it.open+.lbs-sub{display:block} .lbs-sub .lbs-it{grid-template-columns:18px 172px 24px 24px 118px 60px 92px minmax(18px,1fr);font-size:11px;color:var(--lbs-muted,#8a93ad)} .lbs-sub .lbs-it .lbs-lab{color:#aab3cc} .lbs-dd{position:relative;background:var(--lbs-g,#0A1220);border:1px solid var(--lbs-line,#2a3550);border-radius:4px;padding:1px 18px 1px 5px;font-size:11px;width:100%;height:21px;line-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:#fff;text-align:left} .lbs-dd::after{content:"";position:absolute;right:6px;top:8px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #8a93ad} .lbs-dd.blank,.lbs-blank{visibility:hidden} .lbs-step{display:flex;align-items:center;border:1px solid var(--lbs-line,#2a3550);border-radius:4px;background:var(--lbs-g,#0A1220);height:21px} .lbs-step input{width:30px;min-width:0;background:transparent;border:none;color:#fff;font-size:11.5px;text-align:center;outline:none;padding:0} .lbs-step .lbs-b{display:flex;flex-direction:column;border-left:1px solid var(--lbs-line,#2a3550)} .lbs-step .lbs-b span{font-size:7px;line-height:8px;padding:1px 4px;cursor:pointer;color:#cfd5e8;user-select:none} .lbs-step .lbs-b span:hover{color:var(--lbs-orange,#F56800)} .lbs-step .lbs-unit{font-size:9.5px;color:#6f7a99;padding:0 3px 0 0} .lbs-sw{width:19px;height:19px;border-radius:4px;border:1px solid rgba(255,255,255,.22);cursor:pointer;justify-self:center;background:transparent} .lbs-sw.bg{background-image:linear-gradient(45deg,#333 25%,transparent 25%,transparent 75%,#333 75%),linear-gradient(45deg,#333 25%,transparent 25%,transparent 75%,#333 75%);background-size:8px 8px;background-position:0 0,4px 4px} .lbs-sw.set{background-image:none} .lbs-rst{color:#6f7a99;cursor:pointer;font-size:13px;text-align:center;background:none;border:0;padding:0;line-height:1;justify-self:end;width:18px} .lbs-rst:hover{color:var(--lbs-orange,#F56800)} .lbs-seg{display:flex;border:1px solid var(--lbs-line,#2a3550);border-radius:5px;overflow:hidden;background:var(--lbs-g,#0A1220);height:21px} .lbs-seg span{padding:2px 8px;font-size:11px;cursor:pointer;color:#cfd5e8;line-height:15px} .lbs-seg span.on{background:#37406a;color:#fff} .lbs-it.layout{grid-template-columns:18px 190px 1fr 18px} /* out of play: shared row at This app scope, disabled, or nothing wired yet (spec 2, 11, 12) */ .lbs-it.lbs-dim{opacity:.6} .lbs-note{font-size:10px;font-style:normal;color:var(--lbs-muted,#8a93ad);text-align:right;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15;align-self:center;padding-right:2px} .lbs-off{opacity:.35;pointer-events:none} .lbs-seg.lbs-var span{padding:2px 6px;font-size:10.5px} .lbs-sh .lbs-cnt i{font-style:normal;color:#6f7a99} .lbs-it.layout .lbs-ctl{display:flex;align-items:center;gap:6px} .lbs-custom{min-height:21px;font-size:11px} .lbs-custom input[type=text],.lbs-custom input[type=password],.lbs-custom input[type=number]{background:var(--lbs-g,#0A1220);border:1px solid var(--lbs-line,#2a3550);border-radius:4px;color:var(--lbs-ink,#dfe3f0);font:inherit;height:21px;padding:0 6px;min-width:120px} .lbs-custom button{background:var(--lbs-g,#0A1220);border:1px solid var(--lbs-line,#2a3550);border-radius:4px;color:var(--lbs-ink,#dfe3f0);font-size:11px;height:21px;padding:0 8px;cursor:pointer} .lbs-custom button:hover{border-color:var(--lbs-orange,#F56800);color:var(--lbs-orange,#F56800)} /* footer */ .lbs-pf{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-top:1px solid var(--lbs-line2,#223052);font-size:11px;color:var(--lbs-muted,#8a93ad);flex:0 0 auto;gap:8px} .lbs-pf .lbs-hint{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lbs-pf button{background:var(--lbs-g,#0A1220);border:1px solid var(--lbs-line,#2a3550);color:var(--lbs-ink,#dfe3f0);border-radius:5px;padding:3px 9px;font-size:11.5px;cursor:pointer;white-space:nowrap} .lbs-pf button:hover{border-color:#3d4a75} /* resize grip (CSS resize on a fixed flex panel) */ .lbs{resize:both} /* dropdown menu (fonts, weights, themes) - custom so options can hover-preview */ .lbs-menu{position:fixed;z-index:2147483001;isolation:isolate;opacity:1;background:var(--lbs-panel,#0F1830);border:1px solid var(--lbs-line,#2a3550);border-radius:8px;padding:4px;min-width:150px;max-height:300px;overflow:auto;box-shadow:0 14px 34px rgba(0,0,0,.5);font-size:11.5px;color:var(--lbs-ink,#dfe3f0)} .lbs-menu div{padding:4px 8px;border-radius:4px;cursor:pointer;white-space:nowrap;display:flex;justify-content:space-between;gap:10px} .lbs-menu div:hover,.lbs-menu div.hi{background:#1b2440} .lbs-menu div.on{color:var(--lbs-orange,#F56800)} .lbs-menu div small{color:#6f7a99;font-size:10.5px} .lbs-menu .lbs-del{color:#6f7a99;font-size:11px} .lbs-menu .lbs-del:hover{color:#E5484D} .lbs-menu .lbs-sep{height:1px;background:var(--lbs-line2,#223052);margin:4px 2px;padding:0;cursor:default} /* color popover */ .lbs-pop{position:fixed;z-index:2147483001;isolation:isolate;opacity:1;background:var(--lbs-panel,#0F1830);border:1px solid var(--lbs-line,#2a3550);border-radius:10px;padding:10px;width:250px;box-shadow:0 14px 34px rgba(0,0,0,.5);color:var(--lbs-ink,#dfe3f0)} .lbs-pop .lbs-lbl{font-size:10px;color:var(--lbs-muted,#8a93ad);text-transform:uppercase;letter-spacing:.5px;margin:4px 0 6px} .lbs-pop .lbs-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-bottom:8px;justify-items:center} .lbs-pop .lbs-c{width:18px;height:18px;border-radius:3px;border:1px solid rgba(255,255,255,.22);cursor:pointer} .lbs-pop .lbs-c:hover{outline:2px solid #fff} .lbs-pop .lbs-c.none{background:linear-gradient(135deg,transparent 45%,#E5484D 45%,#E5484D 55%,transparent 55%)} .lbs-pop .lbs-cust{display:flex;gap:6px;align-items:center;border-top:1px solid var(--lbs-line2,#223052);padding-top:8px;margin-top:2px} .lbs-pop .lbs-cust input[type=text]{flex:1;background:var(--lbs-g,#0A1220);border:1px solid var(--lbs-line,#2a3550);color:#fff;border-radius:5px;padding:4px 6px;font-size:12px;font-family:ui-monospace,Menlo,monospace;min-width:0} .lbs-pop .lbs-cust input[type=color]{width:30px;height:26px;border:1px solid var(--lbs-line,#2a3550);border-radius:5px;background:var(--lbs-g,#0A1220);padding:0} .lbs-pop .lbs-cust span{font-size:11px;color:var(--lbs-muted,#8a93ad)} /* pick mode */ .lbs-picking,.lbs-picking *{cursor:crosshair!important} .lbs-pickbox{position:fixed;z-index:2147482999;pointer-events:none;border:2px solid var(--lbs-orange,#F56800);border-radius:3px;box-shadow:0 0 0 2000px rgba(10,18,32,.18)} .lbs-pickhint{position:fixed;z-index:2147483002;top:50px;right:16px;font-size:11px;color:#F56800;background:rgba(15,24,48,.95);border:1px solid rgba(245,104,0,.5);border-radius:6px;padding:5px 9px;pointer-events:none;font-family:-apple-system,"SF Pro Text",Helvetica,Arial,sans-serif} /* gear button apps can drop in their band; same spot everywhere */ .lbs-gear{width:28px;height:28px;border:1px solid #2a3550;border-radius:6px;background:#0A1220;color:#F5E9C8;display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;padding:0} .lbs-gear:hover{border-color:#F56800;color:#F56800} /* Print behaviour for the panel and gear lives here, in the shared file, not in the apps (B-534 item 11): an open panel is position:fixed and would land on client-facing output. */ @media print{ .lbs,.lbs-gear,.lbs-menu,.lbs-pop,.lbs-pickbox,.lbs-pickhint{display:none !important;} } /* inline theme-name field (Save / Save as) and the footer confirmation */ .lbs-pop.lbs-name{width:260px} .lbs-name input[type=text]{width:100%;box-sizing:border-box;background:var(--lbs-g,#0A1220);border:1px solid var(--lbs-line,#2a3550);color:#fff;border-radius:5px;padding:5px 7px;font-size:12px;font:inherit} .lbs-name .lbs-row{display:flex;gap:6px;justify-content:flex-end;margin-top:8px} .lbs-name button{background:var(--lbs-g,#0A1220);border:1px solid var(--lbs-line,#2a3550);border-radius:5px;color:var(--lbs-ink,#dfe3f0);font-size:11.5px;height:24px;padding:0 10px;cursor:pointer} .lbs-name button.lbs-ok{border-color:var(--lbs-orange,#F56800);color:var(--lbs-orange,#F56800)} .lbs-name button:hover{border-color:var(--lbs-orange,#F56800);color:var(--lbs-orange,#F56800)} .lbs-pf .lbs-hint.flash{color:var(--lbs-orange,#F56800)} /* Inside an Electron window with a -webkit-app-region:drag strip, the panel and its menus must opt out or a title bar that lands in the strip drags the window instead of the panel. */ .lbs,.lbs-menu,.lbs-pop,.lbs-pickhint{-webkit-app-region:no-drag}