Variable WATCHLIST_PANEL_CSSConst
WATCHLIST_PANEL_CSS: "\n.oac-widget .oac-watchlist { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; padding: 8px 10px 0; box-sizing: border-box; font-size: 12px; }\n.oac-widget .oac-watchlist__bar, .oac-widget .oac-watchlist__add, .oac-widget .oac-watchlist__name, .oac-widget .oac-watchlist__confirm { display: flex; align-items: center; gap: 4px; flex: none; min-width: 0; }\n.oac-widget .oac-watchlist__bar .oac-select { flex: 1 1 auto; min-width: 0; }\n.oac-widget .oac-watchlist__bar .oac-select select { width: 100%; min-width: 0; }\n.oac-widget .oac-watchlist .oac-btn { height: 26px; padding: 0 7px; font-size: 11px; flex: none; }\n.oac-widget .oac-watchlist__name[hidden], .oac-widget .oac-watchlist__confirm[hidden], .oac-widget .oac-watchlist__scroll[hidden] { display: none; }\n.oac-widget .oac-watchlist__name input, .oac-widget .oac-watchlist__add input { flex: 1 1 auto; min-width: 0; height: 26px; }\n.oac-widget .oac-watchlist__confirm { flex-wrap: wrap; }\n.oac-widget .oac-watchlist__confirm-text { flex: 1 1 100%; color: var(--oac-tx); overflow-wrap: anywhere; }\n.oac-widget .oac-watchlist__add-current { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.oac-widget .oac-watchlist__status { flex: none; font-size: 11px; color: var(--oac-mut); }\n.oac-widget .oac-watchlist__status[data-state=\"live\"] { color: var(--oac-tx); }\n.oac-widget .oac-watchlist__status[data-state=\"reconnecting\"], .oac-widget .oac-watchlist__status[data-state=\"disconnected\"], .oac-widget .oac-watchlist__status[data-state=\"error\"] { color: var(--oac-danger); }\n.oac-widget .oac-watchlist__message { flex: none; font-size: 11px; color: var(--oac-danger); overflow-wrap: anywhere; }\n.oac-widget .oac-watchlist__empty { margin: 6px 0; font-size: 11px; color: var(--oac-mut); }\n.oac-widget .oac-watchlist__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0 -10px; }\n/* Numbers take the width they need and the symbol the rest, so a price is never the part cut short. */\n.oac-widget .oac-watchlist__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }\n.oac-widget .oac-watchlist__table thead th { position: sticky; top: 0; z-index: 1; background: var(--oac-panel); border-bottom: 1px solid var(--oac-bd-soft); padding: 0; }\n.oac-widget .oac-watchlist__sort { width: 100%; height: 24px; padding: 0 6px; border: 0; background: none; color: var(--oac-mut); font: 600 10px/1 var(--oac-font); text-transform: uppercase; letter-spacing: .04em; text-align: right; white-space: nowrap; cursor: pointer; }\n.oac-widget .oac-watchlist__col--symbol .oac-watchlist__sort { text-align: left; padding-left: 10px; }\n.oac-widget .oac-watchlist__sort:hover, .oac-widget th[aria-sort=\"ascending\"] .oac-watchlist__sort, .oac-widget th[aria-sort=\"descending\"] .oac-watchlist__sort { color: var(--oac-tx); }\n.oac-widget th[aria-sort=\"ascending\"] .oac-watchlist__sort::after { content: \" \\2191\"; }\n.oac-widget th[aria-sort=\"descending\"] .oac-watchlist__sort::after { content: \" \\2193\"; }\n.oac-widget .oac-watchlist__col--symbol { width: 100%; }\n.oac-widget .oac-watchlist__col--actions { width: 26px; min-width: 26px; }\n.oac-widget .oac-watchlist__row { height: 28px; border-bottom: 1px solid var(--oac-bd-soft); }\n.oac-widget .oac-watchlist__row:hover, .oac-widget .oac-watchlist__row:focus-within { background: var(--oac-elev); }\n/* On the cell: some engines paint no shadow on a table row. */\n.oac-widget .oac-watchlist__row[aria-current=\"true\"] > th { box-shadow: inset 2px 0 0 var(--oac-acc); }\n.oac-widget .oac-watchlist__row td, .oac-widget .oac-watchlist__row th { padding: 0 6px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }\n.oac-widget .oac-watchlist__row .oac-watchlist__instrument { padding: 0; max-width: 0; text-align: left; }\n.oac-widget .oac-watchlist__open { display: block; width: 100%; height: 28px; line-height: 28px; padding: 0 6px 0 10px; border: 0; background: none; color: var(--oac-tx); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.oac-widget .oac-watchlist__symbol { font-weight: 600; }\n.oac-widget .oac-watchlist__exchange { margin-left: 5px; font-size: 10px; color: var(--oac-mut); }\n.oac-widget .oac-watchlist__last { color: var(--oac-tx); }\n/* The theme's own pair, lifted to read as text. A fallback colour here would pin one palette. */\n.oac-widget .oac-watchlist .is-up { color: var(--oac-up); }\n.oac-widget .oac-watchlist .is-down { color: var(--oac-down); }\n.oac-widget .oac-watchlist__row[data-state=\"stale\"] td, .oac-widget .oac-watchlist__row[data-state=\"unavailable\"] td, .oac-widget .oac-watchlist__row[data-state=\"error\"] td, .oac-widget .oac-watchlist__row[data-state=\"loading\"] td { color: var(--oac-mut); }\n.oac-widget .oac-watchlist__row[data-state=\"stale\"] .oac-watchlist__last { text-decoration: underline dotted; text-underline-offset: 3px; }\n.oac-widget .oac-watchlist__actions { padding: 0 4px 0 0 !important; }\n.oac-widget .oac-watchlist__actions .oac-btn { width: 22px; height: 22px; padding: 0; border-color: transparent; background: transparent; color: var(--oac-mut); opacity: 0; }\n.oac-widget .oac-watchlist__row:hover .oac-watchlist__actions .oac-btn, .oac-widget .oac-watchlist__row:focus-within .oac-watchlist__actions .oac-btn { opacity: 1; }\n.oac-widget .oac-panel-dock[data-sheet=\"true\"] .oac-watchlist__actions .oac-btn { opacity: 1; width: 32px; height: 32px; }\n.oac-widget .oac-panel-dock[data-sheet=\"true\"] .oac-watchlist__row, .oac-widget .oac-panel-dock[data-sheet=\"true\"] .oac-watchlist__open { height: 40px; line-height: 40px; }\n@media (hover: none) { .oac-widget .oac-watchlist__actions .oac-btn { opacity: 1; } }\n" = ...
Rules to add to the widget's shared stylesheet or a custom host stylesheet.