/* ========================================================================== BridgeBI — BBDrop: the card-style option list, everywhere -------------------------------------------------------------------------- Reference: "stat mini card component" by @uAghazadae, Collect UI (/designs/card-ui-design-inspiration/9ad36656-…). It is a VIDEO, not a still — the design IS the menu: a light stat card whose header label opens a DARK popover of options (Referrers / Campaigns / UTM sources / UTM medium), and the card's rows morph to the new dataset on pick. Measured off the source frames (the capture is zoomed, so the ratios are the truth and the pixel sizes are derived from them at a 13.5px row label): panel #252529 hover chip #3A3A3C label ink #EAEAEC radius 8.9% of panel width → 20px here row pitch / label size = 2.7 → 36-38px rows no borders, no dividers, no icons: fill and radius do all the work The status colours (up/down) and the check are BridgeBI's own — the reference has no selected state because its menu never shows one. Two halves: 1. THE OPTION LIST (`.bbd*`) — a floating card that replaces the OS popup of every native : point at a thing, pick one of N. Leaving them white would mean two different-looking answers to the same question on the same screen. Each one's INTERNALS are re-inked below, individually, because every one of them hard-codes navy or --text on its own rows — a dark panel with those untouched is unreadable, not merely off-palette. */ .bb-menu, .bp-menu, .bb-user-menu, .cmp-pin-dropdown, .init-move-menu, .byprogram-ctx-menu { background: var(--bbd-glass); -webkit-backdrop-filter: var(--bbd-blur); backdrop-filter: var(--bbd-blur); border: 0; border-radius: var(--bbd-r-panel); box-shadow: inset 0 1px 0 var(--bbd-sheen), inset 0 -1px 0 var(--bbd-sheen-lo), inset 0 0 0 1px var(--bbd-edge), var(--bbd-shadow); color: var(--bbd-ink); padding: 6px; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bb-menu, .bp-menu, .bb-user-menu, .cmp-pin-dropdown, .init-move-menu, .byprogram-ctx-menu { background: var(--bbd-panel); } } @media (prefers-reduced-transparency: reduce) { .bb-menu, .bp-menu, .bb-user-menu, .cmp-pin-dropdown, .init-move-menu, .byprogram-ctx-menu { background: var(--bbd-panel); -webkit-backdrop-filter: none; backdrop-filter: none; } } .bb-menu button, .bp-menu button, .bb-user-menu-item, .init-move-item, .cmp-pin-init-item, .byprogram-ctx-menu .ctx-item { border-radius: var(--bbd-r-row); color: var(--bbd-body); background: none; } .bb-menu button:hover, .bp-menu button:hover, .bb-user-menu-item:hover, .init-move-item:hover, .cmp-pin-init-item:hover, .byprogram-ctx-menu .ctx-item:hover { background: rgba(255, 255, 255, .10); color: var(--bbd-ink); } /* "this is the current one" — brighter ink, never a fill, so it cannot be confused with the hover chip. */ .bb-menu button.is-selected, .bp-menu button.bp-on, .init-move-item.current { background: none; color: var(--bbd-ink); font-weight: 650; } .bb-menu-check, .init-move-item .mm-check { color: var(--bbd-pill-ink); } /* Section labels and the little header lines each menu carries. */ .bb-menu-label, .init-move-menu-title, .bp-menu-h i, .bb-user-menu-mail, .cmp-pin-empty { color: var(--bbd-muted); } .bp-menu-h, .bb-user-menu-name { color: var(--bbd-ink); } .bp-menu-h, .bb-user-menu-head { border-bottom-color: var(--bbd-line); } .init-move-sep { background: var(--bbd-line); } /* A destructive row keeps being destructive — but --red (#B23B3B) has no contrast on #252529, so it moves to the tint that does. */ .bb-user-menu-item.danger { color: var(--bbd-down); } .bb-user-menu-item.danger:hover { background: rgba(255, 123, 133, .14); color: var(--bbd-down); } .bb-user-menu-item svg { opacity: .8; } /* 3b · CONTENT PANELS — an alert list, a checkbox grid, a funnel readout, the highlight palette. They are not lists of options, so they stay LIGHT cards and take only the geometry: same radius, same layered shadow, no border. A dark panel here would make a 520px-tall wall of alerts read as a modal. */ .notification-dropdown, .kpi-picker, .funnel-popover, .bb-hl-pop { border-radius: var(--bbd-r-panel); box-shadow: 0 0 0 1px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .05), 0 12px 28px -8px rgba(16, 24, 40, .16), 0 32px 60px -26px rgba(16, 24, 40, .20); border-color: transparent; } /* The notification panel's arrow is drawn from two 1px borders in a rotated square; leaving them on a transparent-bordered panel leaves a floating chevron with nothing behind it. */ .notification-dropdown::before { border-color: rgba(16, 24, 40, .08); } .notification-dropdown-header { border-radius: var(--bbd-r-panel) var(--bbd-r-panel) 0 0; } .kpi-picker-item { border-radius: var(--bbd-r-row); } @media (max-width: 560px) { .notification-dropdown, .kpi-picker { border-radius: 22px; } }