/* Separator attached to the top of each control section (except nav bar) */ .ctrl-section::before { content: ""; display: block; border-top: 1px solid var(--sep-color); margin: var(--sep-margin); } #search-wrap::before, #color-control-wrap::before { display: none !important; } /* Separator between module and gene result groups */ .search-result-sep { border-top: 1px solid var(--sep-color); margin: 4px 8px; } /* Unified font sizes across graph controls */ #search-input, #search-input:focus, #search-input:active, #search-input:focus-visible { font-size: 11px !important; min-height: 0 !important; padding-top: 5px !important; padding-bottom: 5px !important; } #search-input::placeholder { font-size: 11px !important; } .search-result-item { font-size: 11px !important; } #my-multi-dropdown .dash-dropdown-trigger, #my-multi-dropdown [class*="singleValue"], #my-multi-dropdown [class*="placeholder"], #my-multi-dropdown span { font-size: 11px !important; } /* .contcb-title is not overridden here any more: size, caps and spacing are the chip-label look, owned in one place by stylesheet.py. An !important font-size here beat it and left the title reading as body text. */ .contcb-txt { font-size: 11px !important; } /* Info card: tighter spacing between metric rows */ #info-essential p, #info-location p, #info-biological-process p, #info-top-cell p, #info-module-category p, #info-module-certainty p, #info-module-support p { margin: 0 0 2px 0; line-height: 1.3; } /* Right-side panels: lift Bootstrap's popover max-width cap */ #info-box, #help-popover, #ud-help-popover { max-width: none !important; } /* ── Scrollbars: single colour token — change --sb-thumb to restyle all ─── */ :root { /* ── Scuba theme tokens — change these two when switching dbc theme ── */ --scuba-text: var(--bs-body-color, #dee2e6); /* primary text; auto-tracks Bootstrap */ --scuba-muted: #999; /* controls, labels, body text */ --hover-bg: #272a42; /* uniform hover background (rgba(255,255,255,0.10) over #141726) */ --ctrl-width: clamp(144px, 12.5vw, 211px); /* control-stack width — used by Python/JS via var(--ctrl-width) */ /* --scuba-font / --scuba-mono are theme tokens too, but they are declared in stylesheet.py's :root rather than here: Python owns the stack (UI_FONT_STACK) because the cytoscape sheet needs the literal — a canvas resolves no CSS variables — and one literal in one language beats two that must agree. */ /* ── Other tokens ─────────────────────────────────────────────────── */ --sb-thumb: rgba(255, 255, 255, 0.40); --sep-color: rgba(255, 255, 255, 0.50); --sep-margin: 4px 12.5% 10px; } /* Every scrolling surface in the app is listed in all four blocks below. A surface missing from them does not fall back to a plainer SCUBA scrollbar — it falls back to the browser's, which is why #panel-pane-help stood out. #function-drawer-body is gone from the list because that element is gone; #help-popover's scroller stays, since the popover still carries the cell-selector page's help topic. */ #search-results, .dash-dropdown-content, #info-card-gene, #info-card-module, #info-cell-card, #panel-pane-help, #panel-table-container, #table-container, #help-popover .panel-drag-header ~ div { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; } #search-results::-webkit-scrollbar, .dash-dropdown-content::-webkit-scrollbar, #info-card-gene::-webkit-scrollbar, #info-card-module::-webkit-scrollbar, #info-cell-card::-webkit-scrollbar, #panel-pane-help::-webkit-scrollbar, #panel-table-container::-webkit-scrollbar, #table-container::-webkit-scrollbar, #help-popover .panel-drag-header ~ div::-webkit-scrollbar { width: 4px; height: 4px; } #search-results::-webkit-scrollbar-track, .dash-dropdown-content::-webkit-scrollbar-track, #info-card-gene::-webkit-scrollbar-track, #info-card-module::-webkit-scrollbar-track, #info-cell-card::-webkit-scrollbar-track, #panel-pane-help::-webkit-scrollbar-track, #panel-table-container::-webkit-scrollbar-track, #table-container::-webkit-scrollbar-track, #help-popover .panel-drag-header ~ div::-webkit-scrollbar-track { background: transparent; } #search-results::-webkit-scrollbar-thumb, .dash-dropdown-content::-webkit-scrollbar-thumb, #info-card-gene::-webkit-scrollbar-thumb, #info-card-module::-webkit-scrollbar-thumb, #info-cell-card::-webkit-scrollbar-thumb, #panel-pane-help::-webkit-scrollbar-thumb, #panel-table-container::-webkit-scrollbar-thumb, #table-container::-webkit-scrollbar-thumb, #help-popover .panel-drag-header ~ div::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 2px; } /* ── Table grouped sub-header row ───────────────────────────────────────── */ /* Sticks just below the group-label row (~37 px tall) */ #table-global thead tr:nth-child(2) th, #table-module thead tr:nth-child(2) th, #table-landing thead tr:nth-child(2) th { position: sticky; top: 33px; background-color: #171725; } /* ── Info-pane: fit inside panel ─────────────────────────────────────────── */ #panel-pane-info #info-box { width: 100%; max-width: 100%; max-height: none; box-sizing: border-box; } /* ── Word-wrap for all info text ─────────────────────────────────────────── */ #info-gene-description, #info-essential, #info-location, #info-biological-process, #info-top-cell, #info-module-title, #info-module-category, #info-module-certainty, #info-module-support { overflow-wrap: break-word; word-break: break-word; white-space: normal; } /* ── Info-action buttons: equal width ────────────────────────────────────── */ .info-actions .ud-flat-btn { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; text-align: center !important; justify-content: center !important; } /* The narrow-panel rescaling that lived here is gone with its container. Both halves of it — the button padding and icon geometry below, and the --info-font steps in stylesheet.py — were @container queries named for #multi-panel, so neither can match now that the card is docked. Re-pointing them at #panel-right would work (it would need container-type: inline-size there), but the case they answered has changed: a floating card had a size the user could only fix by resizing the card, whereas the docked panel has a divider, an expand button and a rail. Widening is the fix now, not shrinking the type. */ /* ── Title-bar chip dropdowns (dbc.DropdownMenu) ────────────────────────── */ .title-chip-dd { pointer-events: auto; z-index: 5000; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; } /* * Override Bootstrap 5 btn CSS custom properties at higher specificity * (.title-chip-dd .btn = 0,2,0 beats .btn-link = 0,1,0). * This is more reliable than !important for properties driven by CSS vars. */ .title-chip-dd .btn { --bs-btn-color: var(--scuba-muted); --bs-btn-bg: #141726; --bs-btn-border-color: rgba(255,255,255,0.15); --bs-btn-hover-color: var(--scuba-text); --bs-btn-hover-bg: var(--hover-bg); --bs-btn-hover-border-color: rgba(255,255,255,0.15); --bs-btn-active-color: var(--scuba-text); --bs-btn-active-bg: #343743; --bs-btn-active-border-color:rgba(255,255,255,0.15); --bs-btn-focus-box-shadow: none; --bs-btn-disabled-color: var(--scuba-muted); /* structural props still need !important for non-var Bootstrap rules */ margin: 0 !important; width: 100% !important; /* The chip around this button owns the border and the corners — see the chip-group section below. inherit is what stops a hover background from squaring off a corner its chip has rounded. */ border: none !important; border-radius: inherit !important; font-size: 15px !important; font-weight: 400 !important; padding: 3px 10px !important; height: 34px !important; box-sizing: border-box !important; box-shadow: none !important; text-align: left !important; line-height: 1.4 !important; outline: none !important; text-decoration: none !important; display: flex !important; align-items: center !important; gap: 6px !important; } /* Module tag: static (non-interactive) chip. Shaped for standalone use — a whole border and four corners, which is what #umap-title-chip needs. Inside a chip group the border and corners are the group's job, and .chip-group > .chip overrides them. It used to be shaped the other way round, carrying the `border-left: none` and `0 4px 4px 0` of a chip sitting last in a group, and the one standalone user had to undo both. */ .title-chip-tag { display: flex; flex-direction: row; align-items: center; gap: 6px; color: var(--scuba-muted); background: #141726; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; font-size: 15px; font-weight: 400; padding: 3px 10px; height: 34px; box-sizing: border-box; white-space: nowrap; cursor: default; user-select: none; -webkit-user-select: none; } /* Module names run long ("Ubiquitin Protein Homeostasis"), and #top-bar-center is absolutely positioned and centred with flex-shrink: 0 — it grows outward in both directions toward the nav buttons with nothing to stop it. Cap the chip and let .chip-val ellipsise inside it; update_graph_title puts the full name in the chip's tooltip. */ #graph-title-module { max-width: 260px; } /* Push caret to right edge on all chips */ .title-chip-dd .btn::after { margin-left: auto; } /* Two-line chip label: category header above value — applies everywhere */ .chip-label { display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; min-width: 0; flex: 1; line-height: 1.2; } .chip-cat { font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--scuba-muted); opacity: 0.6; white-space: nowrap; line-height: 1.2; } .chip-val { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.3; } /* Options panel */ .title-chip-dd .dropdown-menu { background-color: #141726 !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 4px !important; min-width: 0 !important; width: max-content !important; padding: 2px 0 !important; box-shadow: none !important; z-index: 200000 !important; } /* Menu items */ .title-chip-dd .dropdown-item { --bs-dropdown-link-color: var(--scuba-muted); --bs-dropdown-link-hover-color: var(--scuba-text); --bs-dropdown-link-hover-bg: var(--hover-bg); --bs-dropdown-link-active-color: var(--scuba-text); --bs-dropdown-link-active-bg: #343743; font-size: 11px !important; font-weight: 400 !important; padding: 3px 10px !important; } .title-chip-dd .dropdown-item.active { color: var(--scuba-text) !important; background: #343743 !important; font-weight: 600 !important; } /* Divider */ .title-chip-dd .dropdown-divider { border-color: rgba(255,255,255,0.15) !important; margin: 4px 12.5% !important; } /* ── Chip groups ────────────────────────────────────────────────────────── * * One ruleset for every chip group in the app: the landing row, the top bar, * and both panel headers. Each group is a dbc.ButtonGroup carrying * .chip-group, and each direct child is a .chip — a dbc.DropdownMenu with * group=True (so Bootstrap nests it as a button group of its own), a static * tag, or a wrapper that a callback fills in. * * This replaces four near-identical copies of the same idea, one per group. * Each named the chip that happened to be first, to round its left corners, * and the one that happened to be last, to drop its divider and round its * right corners. But every chip in every group is shown and hidden at runtime * by a callback writing style.display, so those ids were only ever a guess * about which chip would be on screen. When the guess was wrong the group drew * a square corner inside its own rounded one; where two of the rules disagreed * about which side of a seam owned the divider, it got drawn twice. * * Bootstrap's own .btn-group geometry has exactly the same blind spot — it * positions by :first-child/:nth-child, and a display:none child still counts * — so it is switched off below and re-expressed against the chips that are * actually visible. * * "Visible" has to be spelled out at every use, since CSS has no way to name a * condition once. :not([style*="display: none"]) is how the visibility * callbacks hide a chip — they return {display: 'none'} to hide and {}, no * display at all, to show — and :not(:empty) covers a wrapper chip that has * nothing in it yet, which is the module tag until there is a module to name. */ .chip-group { display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; background: #141726; flex-shrink: 0; pointer-events: auto; } /* Bootstrap's index-based spacing, off. The chip draws no border and no background of its own — the group draws both, once, so no chip can paint over the group's rounded corners. Its radius still matters, because whatever it wraps inherits it, and that does paint on hover. */ .chip-group > .chip { margin: 0 !important; border: none; border-radius: 4px; background: transparent; } /* An empty chip is a wrapper waiting on a callback: nothing to draw, and nothing that should take up room between the chips either side of it. */ .chip-group > .chip:empty { display: none; } /* The divider is one border, owned by the chip to its right, so no two neighbours can each contribute half of it. This is every chip that follows a visible chip — that is, all but the first. Only the chip being LOOKED AT has to be tested for visibility; the one being styled does not, because a hidden chip paints nothing and occupies nothing. That is why the test appears once per rule rather than on both sides. */ .chip-group > .chip:not([style*="display: none"]):not(:empty) ~ .chip { border-left: 1px solid rgba(255,255,255,0.15); border-top-left-radius: 0; border-bottom-left-radius: 0; } /* And every chip with a visible chip after it — all but the last. :has() is what reads forward; a sibling combinator only reads backwards. */ .chip-group > .chip:has(~ .chip:not([style*="display: none"]):not(:empty)) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* What actually gets painted is whatever the chip wraps: a Bootstrap button for a dropdown, the tag's own box for a static one. Inheriting the radius is what keeps a hover or active background inside the corners the chip rounded — and it is why .title-chip-dd .btn sets border-radius: inherit !important above, since Bootstrap's own .btn-group rules would otherwise square the inner button off by child index. That !important rule already covers every button in a group (each one is inside a .title-chip-dd), so only the wrapper needs naming here. */ .chip-group > .chip .title-chip-dd { border-radius: inherit; display: flex; height: 100%; } /* ── Unified tooltip token ───────────────────────────────────────── */ /* All FOUR tooltip surfaces share this visual style. JS toggles */ /* display: none → block; individual rules below add layout overrides.*/ /* */ /* #ud-tooltip joined this group rather than keeping its own copy in */ /* user_data.css. The copy had drifted in the way copies do: same */ /* background, border, radius, size, weight and shadow, but at 0.95 */ /* alpha instead of 0.9 — and, because its element sits inside */ /* #upload-page, it inherited that page's font while its three twins */ /* inherited the chrome's. Four tooltips meant to be identical cannot */ /* be identical from two files. */ /* */ /* Family is deliberately absent here: these inherit the app's stack */ /* from :root, which is what makes them follow --scuba-font for free. */ #nav-tooltip, #cy-tooltip, #landing-tooltip, #ud-tooltip { position: fixed; display: none; pointer-events: none; background: rgba(74, 70, 90, 0.9); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 5px; color: #c8ccd6; font-size: 11px; font-weight: 400; line-height: 1.45; padding: 6px 10px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6); } /* What the tooltip is ABOUT — the module title or gene symbol — against the readings underneath it, which are all one weight. 600 is the app's title weight (stylesheet.py), real on every platform the stack targets, and it is the whole reason the title is its own element: a tooltip built as one textContent string had no way to weight a single line of itself. Written by _scubaSetTip in cy_direct.js, for all three node-tooltip callers. */ #cy-tooltip .tip-title { font-weight: 600; } #nav-tooltip { z-index: 200000; max-width: 280px; white-space: normal; } /* Paper citations (catalog picker) — longer sentences read better slightly smaller and a bit wider than the default short-tip sizing, so the wrap breaks at more natural points instead of a narrow ragged column. */ #nav-tooltip.nav-tooltip-cite { font-size: 10px; line-height: 1.5; max-width: 340px; } #cy-tooltip { z-index: 200000; white-space: pre; } #landing-tooltip { z-index: 9999; white-space: nowrap; } /* Cell-type selection landing page */ #cell-selector-page { position: fixed; inset: 0; background: #070b1a; flex-direction: column; align-items: center; justify-content: center; z-index: 90; } /* ── Control panel toggle button ────────────────────────────────────────── */ #btn-collapse-controls, #btn-collapse-controls-right { background-color: #141726 !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #999 !important; } #btn-collapse-controls { border-left: none !important; } #btn-collapse-controls-right { border-right: none !important; } #btn-collapse-controls:hover, #btn-collapse-controls-right:hover { background-color: var(--hover-bg) !important; color: var(--scuba-text) !important; } /* ── Unified control stack ───────────────────────────────────────────────── */ #control-stack { background-color: #141726; border: 1px solid rgba(255, 255, 255, 0.15); border-left: none; color: #DDD; border-radius: 0; /* Bottom-anchored, the stack grows upward into the top bar once it is taller than the space it has; style.css caps it, so the overflow has to scroll rather than be hidden outright. */ overflow-x: hidden; overflow-y: auto; } /* Nav-bar hover — defined here so var(--hover-bg) resolves in the same file */ #nav-bar .btn:hover { background-color: var(--hover-bg) !important; } /* Strip glass/card styling from control-stack children */ #control-stack #nav-bar, #control-stack #control-box, #control-stack #color-control-wrap, #color-control-wrap #my-multi-dropdown, #color-control-wrap .contcb-card, #ctrl-stack-right #ctrl-box-right, #ctrl-stack-right #color-control-wrap-right, #color-control-wrap-right #my-multi-dropdown-right, #color-control-wrap-right .contcb-card { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } #control-stack #nav-bar, #control-stack #nav-bar button { pointer-events: auto !important; } #control-stack #nav-bar { overflow: visible; } #control-stack #control-box { display: flex; flex-direction: column; overflow: visible; } #ctrl-stack-right #ctrl-box-right { display: flex; flex-direction: column; overflow: visible; } #control-stack #search-wrap { position: relative; } /* Color control: keep z-index for dropdown */ #color-control-wrap { position: relative; z-index: 4001; overflow: visible; } /* Horizontal continuous colorbar */ .contcb-bar { height: 10px !important; width: auto !important; flex: 1 !important; /* 2px, not the 5px that made this a pill at 10px tall. The ends of this bar are the part being read — they are what the two labels either side name — and a full capsule tapers away exactly the extreme colour they point at. It is also a control, not a badge: it drag-selects a range (assets/colorbar_select.js, see pointer-events below), which wants ends you can aim at. Squared off entirely would read as unstyled next to the 4px everything else in the app is cut to, and 2px on a 10px bar is about the same proportion as 4px on a card. */ border-radius: 2px !important; border: none !important; margin: 0 !important; /* Click-and-drag range selection (assets/colorbar_select.js) needs this specific element interactive even though its floating-legend ancestor is pointer-events:none (so the rest of the overlay doesn't block clicks on the graph behind it) — pointer-events isn't blocked by an ancestor's none once a descendant sets its own value explicitly. */ position: relative !important; pointer-events: auto !important; cursor: crosshair !important; } .contcb-card { padding-left: 10px !important; padding-right: 10px !important; } /* The `.contcb-title { text-align: left; margin: 0 }` that sat here is gone — its margin reset was what removed the gap under every legend title. Both declarations now live in the base rule in stylesheet.py. */ .contcb-txt { white-space: nowrap !important; } /* ── Info pane: transparent, so #panel-right's own background shows ──────── */ #panel-pane-info { background: transparent !important; background-color: transparent !important; } /* UMAP canvas in right panel — transparent background */ #panel-right-body #umap-canvas, #panel-right-body #umap-placeholder { background: transparent !important; } /* ── Control panel legend sections (shared design) ───────────────────────── */ .ctrl-legend { padding: 6px 8px; } /* Same chip-label look as .contcb-title (stylesheet.py) — these are the control panel's legends and there is no reason for their titles to read differently from the floating one's. Change the two together. */ .ctrl-legend-title { color: var(--scuba-muted); font-weight: 400; font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.2; margin-bottom: 8px; opacity: 0.6; white-space: nowrap; } .ctrl-legend-items { display: flex; align-items: center; gap: 14px; } .ctrl-legend-item { display: flex; align-items: center; gap: 5px; /* Hover and the lit state differ only in colour, so the band geometry lives here rather than being repeated in both — duplicated, the two could drift. Negative margins pull the row out through the legend panel's 10px side padding so both run edge to edge like a chip-menu row; the matching padding puts the swatch and label back. !important because the buttons carry width/padding as inline style. */ margin-left: -10px !important; margin-right: -10px !important; padding-left: 10px !important; padding-right: 10px !important; width: calc(100% + 20px) !important; border-radius: 0 !important; } /* Standard app-wide hover highlight (var(--hover-bg), same token #ud-nav-bar/ #nav-bar/.dash-dropdown-option use) — covers every clickable legend item, category and significance, left and right panel alike, since all four share this one class. !important overrides the inline backgroundColor:"transparent" each button sets directly. */ .ctrl-legend-item:hover { background-color: var(--hover-bg) !important; } /* Focus ring, not the lit state: these are