/* bfm-ui.css — shared BFM UI design system. * * Include this from every app's after the app's own CSS so that any * app-specific styles can override these defaults when they need to. * * * * Contains: * 1. Styled tooltip system (.bfm-tip, .bfm-tip-backdrop, .tile-act) * 2. Time-window selector pills (.bfm-tw-bar, .bfm-tw-pill, .bfm-tw-input) * 3. Save-as-PNG button (.bfm-png-btn) * * All components opt-in — apps add the markup classes where they want them. * No styles "leak" without an app explicitly using these classnames. */ /* ===== Tooltip system ===== */ /* Elements opt-in with data-tip="...". A single tooltip DOM lives at body. White-space:pre-wrap preserves \n in tip text so multi-line explainers work without rewriting any strings. */ .bfm-tip{ position:fixed;z-index:9999; max-width:340px; padding:9px 12px; background:rgba(18,22,29,0.97); color:#e7ecf3; border:1px solid #1d242d; border-radius:6px; font-family:'SF Mono','Consolas','Monaco',monospace; font-size:11.5px;line-height:1.45; letter-spacing:0.15px; white-space:pre-wrap; box-shadow:0 8px 26px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); pointer-events:none; opacity:0;transform:translateY(-4px); transition:opacity 110ms ease, transform 110ms ease; } .bfm-tip.show{opacity:1;transform:translateY(0)} .bfm-tip strong, .bfm-tip b{color:#fff;font-weight:700} .bfm-tip-content{display:block} .bfm-tip-dismiss{display:none} /* Mobile: centered card with backdrop, explicit dismiss */ @media (hover: none) and (pointer: coarse) { .bfm-tip{ pointer-events:auto; max-width:90vw;left:5vw !important;right:5vw; bottom:12vh !important;top:auto !important; font-size:13px;padding:14px 16px; } .bfm-tip-dismiss{ display:block;margin-top:10px;padding:7px 12px;border-radius:4px; background:#161b24;border:1px solid #1d242d;color:#e7ecf3; font-size:12px;cursor:pointer;font-family:inherit;width:100%; } } .bfm-tip-backdrop{ position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:9998; display:none; } .bfm-tip-backdrop.show{display:block} /* Mobile tile action buttons (?) and (TV) */ .tile-act{ position:absolute;z-index:5; width:24px;height:24px; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,0.62); border:1px solid rgba(255,255,255,0.14); border-radius:50%; color:rgba(255,255,255,0.85); font-family:'SF Mono','Consolas','Monaco',monospace; font-size:10.5px;font-weight:800; cursor:pointer;backdrop-filter:blur(4px); text-decoration:none; transition:background 120ms ease, color 120ms ease, border-color 120ms ease; -webkit-tap-highlight-color:transparent; } .tile-act:hover{ background:rgba(0,0,0,0.85);color:#fff;border-color:rgba(255,255,255,0.32); } .tile-act.help{bottom:6px;left:6px} .tile-act.tv{bottom:6px;right:6px;font-size:9px;letter-spacing:0.4px} .tile-act.tv:hover{color:#4caf50;border-color:rgba(76,175,80,0.55)} @media (hover: hover) and (pointer: fine) { .tile-act.help{opacity:0.55} .tile-act.help:hover{opacity:1} } /* ===== Time-window selector pills ===== */ .bfm-tw-bar{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; padding:12px 16px;background:#161b24;border-bottom:1px solid #1d242d; } .bfm-tw-group{display:flex;align-items:center;gap:6px} .bfm-tw-label{ font-size:10px;font-family:'SF Mono','Consolas','Monaco',monospace; color:#8a96a8;letter-spacing:0.5px;text-transform:uppercase; } .bfm-tw-input{ font-family:'SF Mono','Consolas','Monaco',monospace;font-size:12px; background:#1c2330;border:1px solid #1d242d;color:#e7ecf3; padding:5px 9px;border-radius:4px; } .bfm-tw-input:focus{outline:none;border-color:#4ea1ff} .bfm-tw-pills{display:flex;gap:4px;flex-wrap:wrap} .bfm-tw-pill{ padding:4px 10px;border-radius:4px;border:1px solid #1d242d; background:#1c2330;color:#c2cad6; font-size:11px;font-family:'SF Mono','Consolas','Monaco',monospace; cursor:pointer;letter-spacing:0.3px; transition:border-color 100ms, color 100ms, background 100ms; } .bfm-tw-pill:hover{border-color:#2d4a6d;color:#e7ecf3} .bfm-tw-pill.active{background:#2d4a6d;border-color:#4ea1ff;color:#fff} /* ===== Save-as-PNG buttons ===== */ .bfm-png-btn{ display:inline-flex;align-items:center;gap:5px; font-size:11px;font-family:'SF Mono','Consolas','Monaco',monospace; padding:4px 9px;border-radius:4px; background:#161b24;border:1px solid #1d242d;color:#c2cad6; cursor:pointer;letter-spacing:0.2px; transition:border-color 100ms, color 100ms; } .bfm-png-btn:hover{border-color:#4ea1ff;color:#e7ecf3} .bfm-png-btn[disabled]{opacity:0.5;cursor:wait} .bfm-png-btn::before{content:"📥";margin-right:2px}