/* ui2-overlays.css — workstream 2: overlays, modals, popovers, toasts. * * SCOPING IS DIFFERENT HERE AND IT IS THE EASY MISTAKE: * Overlays are appended to , OUTSIDE any view's .ui2 subtree, so * ".ui2 .zsxqReader" (descendant) can NEVER match. They are tagged with the ui2 * class on themselves by the registry in js/26-ui2.js, so their rules are written * ".ui2.zsxqReader" — SAME element, no space. * * Panels that live INSIDE a view partial (srcAiPanel, flowDrawer, mmPanel …) are * the normal case and use ".ui2 .thing" — descendant, with a space. * * Loaded after ui2.css. Spec §11.1. */ /* ============================ 11. reader sub-window ============================ Shared by ZSXQ / Sources / News / KOL / Research — changing it changes all five. The BODY stays serif: it is prose, not data (spec §11.3). Only chrome is restyled. */ .ui2.zsxqReader{background:rgba(12,17,24,.55);} .ui2.zsxqReader .zsxqReaderPanel{ background:var(--u2-panel); border:1px solid var(--u2-line); border-radius:var(--u2-radius); box-shadow:0 18px 48px rgba(10,16,26,.28); } .ui2.zsxqReader .zsxqReaderHead{ padding:10px var(--u2-s4); border-bottom:1px solid var(--u2-line-soft); gap:var(--u2-s2); background:var(--u2-panel); } .ui2.zsxqReader .zsxqReaderTitle{ font-family:"Noto Sans",system-ui,sans-serif; font-size:var(--u2-fs-md);font-weight:600;color:var(--u2-ink); min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .ui2.zsxqReader .zsxqReaderHead button{ box-sizing:border-box;height:30px;padding:0 10px; border:1px solid var(--u2-line);background:var(--u2-panel);color:var(--u2-ink-2); border-radius:var(--u2-radius); font:600 var(--u2-fs-sm)/1 "Noto Sans",system-ui,sans-serif;cursor:pointer; } .ui2.zsxqReader .zsxqReaderHead button:hover{border-color:var(--u2-muted);color:var(--u2-ink);} .ui2.zsxqReader .zsxqReaderClose{width:30px;padding:0;font-size:15px;color:var(--u2-muted);} .ui2.zsxqReader .zsxqReaderMeta{font-size:var(--u2-fs-xs);color:var(--u2-muted);} /* prose surface */ .ui2.zsxqReader .zsxqReaderBody{ background:var(--u2-panel);color:var(--u2-ink); font-family:"Noto Serif","Noto Serif SC","Noto Serif TC",Georgia,serif; font-size:15px;line-height:1.75;padding:var(--u2-s5); } .ui2.zsxqReader .zsxqReaderBody h1, .ui2.zsxqReader .zsxqReaderBody h2, .ui2.zsxqReader .zsxqReaderBody h3{font-family:"Noto Sans",system-ui,sans-serif;} .ui2.zsxqReader .zsxqReaderBody a{color:var(--u2-accent);} .ui2.zsxqReader .zsxqReaderBody code, .ui2.zsxqReader .zsxqReaderBody pre{background:var(--u2-track);border-radius:4px;font-size:12.5px;} html.mobileLayout .ui2.zsxqReader .zsxqReaderHead button{height:var(--u2-ctl);} html.mobileLayout .ui2.zsxqReader .zsxqReaderBody{padding:var(--u2-s4);font-size:16px;} /* ============================ 12. image lightbox ============================ Deliberately dark in BOTH themes: it is a photo viewer, and light chrome around an image is worse. Literal colours, not tokens. */ .ui2.zsxqLightbox{background:rgba(8,11,16,.86);} .ui2.zsxqLightbox .zsxqLightboxImg{border-radius:var(--u2-radius);} .ui2.zsxqLightbox .zsxqLightboxClose, .ui2.zsxqLightbox .zsxqLightboxNav, .ui2.zsxqLightbox .zsxqLightboxZoom{ background:rgba(20,26,34,.72);color:#fff;border:1px solid rgba(255,255,255,.14); border-radius:var(--u2-radius); } .ui2.zsxqLightbox .zsxqLightboxClose:hover, .ui2.zsxqLightbox .zsxqLightboxNav:hover, .ui2.zsxqLightbox .zsxqLightboxZoom:hover{background:rgba(30,38,48,.86);} .ui2.zsxqLightbox .zsxqLightboxCount{ font:600 var(--u2-fs-sm)/1 "Noto Sans",system-ui,sans-serif; color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums; } /* ============================ 13. EODHD ticker panel ============================ */ .ui2.eodOverlay{background:rgba(12,17,24,.55);} .ui2.eodOverlay .eodPanel{ background:var(--u2-panel);border:1px solid var(--u2-line); border-radius:var(--u2-radius);box-shadow:0 18px 48px rgba(10,16,26,.28); } .ui2.eodOverlay .eodPanelHead{ padding:10px var(--u2-s4);border-bottom:1px solid var(--u2-line-soft);background:var(--u2-panel); } .ui2.eodOverlay .eodPanelTitle{font-size:var(--u2-fs-md);font-weight:600;color:var(--u2-ink);} .ui2.eodOverlay .eodPanelSub{font-size:var(--u2-fs-xs);color:var(--u2-muted);} .ui2.eodOverlay .eodPanelBody{padding:var(--u2-s4);font-variant-numeric:tabular-nums;} .ui2.eodOverlay .eodPanelBtn{ box-sizing:border-box;height:30px;padding:0 11px; border:1px solid var(--u2-line);background:var(--u2-panel);color:var(--u2-ink-2); border-radius:var(--u2-radius);font:600 var(--u2-fs-sm)/1 inherit;cursor:pointer; } .ui2.eodOverlay .eodPanelBtn:hover{border-color:var(--u2-muted);color:var(--u2-ink);} .ui2.eodOverlay .eodPanelBtn.active{background:var(--u2-accent);border-color:var(--u2-accent);color:#fff;} .ui2.eodOverlay .eodPanelClose{width:30px;padding:0;color:var(--u2-muted);} html.mobileLayout .ui2.eodOverlay .eodPanelBtn{height:var(--u2-ctl);} /* ============================ 14. copy-as-image modal ============================ */ .ui2.imgCopyModal{background:rgba(12,17,24,.55);} .ui2.imgCopyModal .imgCopyPanel{ background:var(--u2-panel);border:1px solid var(--u2-line); border-radius:var(--u2-radius);box-shadow:0 18px 48px rgba(10,16,26,.28); } /* ============================ 15. Market View enlarge modal ============================ */ .ui2.mvModal{background:rgba(12,17,24,.55);} .ui2.mvModal .mvModalPanel{ background:var(--u2-panel);border:1px solid var(--u2-line); border-radius:var(--u2-radius);box-shadow:0 24px 60px rgba(10,16,26,.34); } .ui2.mvModal .mvModalHead{padding:10px var(--u2-s4);border-bottom:1px solid var(--u2-line-soft);} .ui2.mvModal .mvModalTitle{font-size:var(--u2-fs-md);font-weight:600;color:var(--u2-ink);} .ui2.mvModal .mvModalMeta{font-size:var(--u2-fs-xs);color:var(--u2-muted);} .ui2.mvModal .mvModalClose, .ui2 .mvModalPanel .mvModalClose{ box-sizing:border-box;width:30px;height:30px;padding:0; background:var(--u2-panel);border:1px solid var(--u2-line);border-radius:var(--u2-radius); color:var(--u2-muted);font-size:15px; } .ui2.mvModal .mvModalClose:hover{border-color:var(--u2-muted);color:var(--u2-ink);} .ui2.mvModal .mvModalTable{font-size:var(--u2-fs-sm);font-variant-numeric:tabular-nums;} /* ============================ 16. K-line config popover ============================ */ .ui2.klCfgPop{ background:var(--u2-panel);border:1px solid var(--u2-line); border-radius:var(--u2-radius);box-shadow:0 10px 30px rgba(10,16,26,.20); font-size:var(--u2-fs-sm); } .ui2.klCfgPop .klCfgHd{ font-size:var(--u2-fs-xs);text-transform:uppercase;letter-spacing:.06em; color:var(--u2-muted);font-weight:700; } .ui2.klCfgPop input{ box-sizing:border-box;height:28px;padding:0 8px; border:1px solid var(--u2-line);background:var(--u2-panel);color:var(--u2-ink); border-radius:4px;font:400 var(--u2-fs-sm)/1 inherit;font-variant-numeric:tabular-nums; } .ui2.klCfgPop button{ box-sizing:border-box;height:28px;padding:0 11px; border:1px solid var(--u2-line);background:var(--u2-panel);color:var(--u2-ink-2); border-radius:4px;font:600 var(--u2-fs-sm)/1 inherit;cursor:pointer; } .ui2.klCfgPop button.on{background:var(--u2-accent);border-color:var(--u2-accent);color:#fff;} /* ============================ 17. context menu ============================ */ .ui2.contextMenu{ background:var(--u2-panel);border:1px solid var(--u2-line); border-radius:var(--u2-radius);box-shadow:0 10px 30px rgba(10,16,26,.20); font-size:var(--u2-fs-sm);padding:4px; } .ui2.contextMenu button{ border-radius:4px;color:var(--u2-ink);font:400 var(--u2-fs-sm)/1.5 inherit;padding:7px 11px; } .ui2.contextMenu button:hover{background:var(--u2-line-soft);} .ui2.contextMenu button:disabled{color:var(--u2-muted);} .ui2.contextMenu .contextMenuTitle{ font-size:var(--u2-fs-xs);text-transform:uppercase;letter-spacing:.06em; color:var(--u2-muted);font-weight:700;padding:6px 11px 4px; } .ui2.contextMenu .contextMenuSeparator{background:var(--u2-line);margin:4px;} /* ============================ 18. toasts ============================ Inverted in BOTH themes: a transient message should read as an overlay on the page, not as another panel. */ .ui2.cashToast, .ui2.feedUndoToast{ background:var(--u2-ink);color:var(--u2-panel); border:1px solid transparent;border-radius:var(--u2-radius); box-shadow:0 8px 26px rgba(10,16,26,.28); font:500 var(--u2-fs-sm)/1.4 "Noto Sans",system-ui,sans-serif; padding:10px 14px; } .ui2.feedUndoToast button{ background:transparent;border:0;color:#8ab4ff;font-weight:700;cursor:pointer; font-size:var(--u2-fs-sm); } .ui2.feedUndoToast button:hover{text-decoration:underline;} html.mobileLayout .ui2.feedUndoToast{font-size:var(--u2-fs-md);padding:12px 16px;} /* ============================ 19. in-view panels ============================ These live INSIDE view partials, so descendant selectors are correct here: they inherit the view's .ui2 and need no registry entry. */ .ui2 .srcDropdownPanel, .ui2 .srcAiPanel, .ui2 .newsDailyPanel, .ui2 .bkCardPanel, .ui2 .mmPanel, .ui2 .flowDrawer, .ui2 .bbHelpPanel, .ui2 .jpPop{ background:var(--u2-panel);border:1px solid var(--u2-line); border-radius:var(--u2-radius);box-shadow:0 8px 26px rgba(10,16,26,.14); font-size:var(--u2-fs-sm);color:var(--u2-ink); } .ui2 .flowDrawerHead{ padding:10px var(--u2-s4);border-bottom:1px solid var(--u2-line-soft); font-size:var(--u2-fs-md);font-weight:600; } .ui2 .flowDrawerChart{padding:var(--u2-s3) var(--u2-s4) var(--u2-s4);} .ui2 .bkPanelBtn, .ui2 .eodPanelBtn{ box-sizing:border-box;height:30px;padding:0 11px; border:1px solid var(--u2-line);background:var(--u2-panel);color:var(--u2-ink-2); border-radius:var(--u2-radius);font:600 var(--u2-fs-sm)/1 inherit;cursor:pointer; } .ui2 .bkPanelBtn:hover{border-color:var(--u2-muted);color:var(--u2-ink);} .ui2 .srcTreeRow{font-size:var(--u2-fs-sm);border-radius:4px;} .ui2 .srcTreeRow:hover{background:var(--u2-line-soft);} /* ============================ 20. feed cards ============================ Shared by Sources / ZSXQ / News / KOL / Research (all render .zsxqCard). */ .ui2 .zsxqCard{ background:var(--u2-panel);border:1px solid var(--u2-line); border-radius:var(--u2-radius);box-shadow:none; } .ui2 .zsxqCard:hover{border-color:var(--u2-accent);box-shadow:none;} .ui2 .zsxqFilters{gap:6px;} .ui2 .zsxqFilterBtn{ box-sizing:border-box; border:1px solid var(--u2-line);background:var(--u2-panel);color:var(--u2-ink-2); border-radius:var(--u2-radius);font-size:var(--u2-fs-sm);padding:6px 11px; } .ui2 .zsxqFilterBtn:hover{color:var(--u2-ink);border-color:var(--u2-muted);} .ui2 .zsxqFilterBtn.active{background:var(--u2-accent);border-color:var(--u2-accent);color:#fff;} html.mobileLayout .ui2 .zsxqFilterBtn{padding:9px 13px;font-size:var(--u2-fs-md);} /* ============================ mvModal header ============================ The card sub-window header carried four typographic glyphs from four different fonts, a 34px filled grey close square, and a long hint string competing with the title for the same eye line. It now reads as: title, quiet meta, then one tool cluster on the right where every control is the same 26px height and every icon is the same stroke. The glyphs became inline SVGs in js/04-marketview.js. */ .ui2.mvModal .mvModalHead{gap:8px;align-items:center;} .ui2.mvModal .mvModalTitle{ font-size:var(--u2-fs-md);font-weight:600;color:var(--u2-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%; } .ui2.mvModal .mvModalMeta{ font-size:var(--u2-fs-xs);color:var(--u2-muted);margin-right:auto; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* The hint repeats what each button's tooltip says, so it is the first thing to go when the header runs out of room rather than something that squeezes the title. */ .ui2.mvModal .mvZoomHint{ font-size:10.5px;color:var(--u2-muted);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:min(34vw,400px); } @media (max-width:1180px){ .ui2.mvModal .mvZoomHint{display:none;} } .ui2.mvModal .mvModalTools{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;} .ui2.mvModal .mvZoomBar{display:inline-flex;align-items:center;gap:2px;} .ui2.mvModal .mvZoomBar .mvTfBtn{ box-sizing:border-box;height:26px;min-height:26px;padding:0 8px; display:inline-flex;align-items:center;gap:5px; border:1px solid transparent;background:transparent;color:var(--u2-ink-2); border-radius:var(--u2-radius);font:500 11.5px/1 inherit;letter-spacing:0; } .ui2.mvModal .mvZoomBar .mvTfBtn:hover{ background:var(--u2-line-soft);border-color:var(--u2-line);color:var(--u2-ink); } .ui2.mvModal .mvZoomBar .mvTfBtn.active{ background:var(--u2-accent-soft);border-color:transparent;color:var(--u2-accent);font-weight:600; } .ui2.mvModal .mvZoomBar .mvTfIco{width:26px;padding:0;justify-content:center;} .ui2.mvModal .mvTfBtn svg{flex:0 0 auto;display:block;} /* hairlines group the cluster into range / zoom / reset instead of five loose buttons */ .ui2.mvModal .mvToolSep{ width:1px;height:14px;background:var(--u2-line);flex:0 0 auto;margin:0 3px; } .ui2.mvModal .mvModalClose{ box-sizing:border-box;width:26px;height:26px;min-height:26px;padding:0;margin-left:2px; display:inline-flex;align-items:center;justify-content:center; border:1px solid transparent;background:transparent;color:var(--u2-muted); border-radius:var(--u2-radius); } .ui2.mvModal .mvModalClose:hover, .ui2 .mvModalPanel .mvModalClose:hover{ background:var(--u2-line-soft);border-color:var(--u2-line);color:var(--u2-ink); } .ui2.mvModal .mvModalClose svg, .ui2 .mvModalPanel .mvModalClose svg{width:15px;height:15px;} /* mobile: the head wraps, so the tool cluster takes its own row like the zoom bar did */ html.mobileLayout .ui2.mvModal .mvModalTools{flex:1 1 100%;flex-wrap:wrap;margin-left:0;} /* ============================ reader header buttons ============================ The sub-window toolbar shared by News, KOL, ZSXQ and Sources. It carried six typographic glyphs from as many fonts plus one Tabler , and every label was lowercase, so the row read as a strip of unrelated widgets. The glyphs are now one inline SVG family on currentColor (RD_ICONS in js/05-zsxq.js) and the labels are sentence case. The blue "copy text" pill in styles.css was the only coloured button in the row; it becomes a peer of the others and keeps colour only for its done state, where the colour is the feedback. */ .ui2.zsxqReader .zsxqReaderHead button{ display:inline-flex;align-items:center;gap:6px; height:var(--u2-ctl);padding:0 10px; font:500 var(--u2-fs-sm)/1 "Noto Sans",system-ui,sans-serif !important; letter-spacing:0; white-space:nowrap; } .ui2.zsxqReader .zsxqReaderHead button .rdIco{flex:0 0 auto;display:block;} .ui2.zsxqReader .zsxqReaderCopy, .ui2.zsxqReader .zsxqReaderPopout{ background:var(--u2-panel) !important; color:var(--u2-ink-2) !important; border:1px solid var(--u2-line) !important; } .ui2.zsxqReader .zsxqReaderCopy:hover, .ui2.zsxqReader .zsxqReaderPopout:hover{ background:var(--u2-line-soft) !important;color:var(--u2-ink) !important; } /* the confirmation states earn their colour: it IS the feedback */ .ui2.zsxqReader .zsxqReaderCopy.done{ background:var(--u2-panel) !important; color:var(--u2-up) !important;border-color:var(--u2-up) !important; } .ui2.zsxqReader .zsxqReaderSave[data-on="1"], .ui2.zsxqReader .zsxqReaderSave.on{color:var(--u2-accent);border-color:var(--u2-accent);} /* close is an icon button like every other close in the app */ .ui2.zsxqReader .zsxqReaderHead button.zsxqReaderClose{ width:var(--u2-ctl);height:var(--u2-ctl);padding:0; display:inline-flex;align-items:center;justify-content:center; border:1px solid transparent;background:transparent;color:var(--u2-muted); border-radius:var(--u2-radius); } .ui2.zsxqReader .zsxqReaderHead button.zsxqReaderClose:hover{ background:var(--u2-line-soft);color:var(--u2-ink);border-color:var(--u2-line); } .ui2.zsxqReader .zsxqReaderHead button.zsxqReaderClose .rdIco{width:15px;height:15px;} /* on a phone the labels collapse and the icons carry the row - so keep them square */ html.mobileLayout .ui2.zsxqReader .zsxqReaderHead button{ width:var(--u2-ctl);padding:0 !important;justify-content:center; } html.mobileLayout .ui2.zsxqReader .zsxqReaderHead button .rdIco{width:17px;height:17px;} /* ============================ reader ticker bar ============================ The AI ticker strip, in the in-window reader and carried into the pop-out. It was a green card holding a wall of saturated green blocks plus a purple model badge - three palettes in one strip, and the loudest thing on a page of prose. The chips stay interactive-looking (hairline + accent text) but the strip is a quiet panel and the model name drops to provenance. */ .ui2 .rdTickerBar{ background:var(--u2-panel);border:1px solid var(--u2-line); border-radius:var(--u2-radius);padding:10px 12px;margin:0 0 16px; } .ui2 .rdTickerLbl{ display:inline-flex;align-items:center;flex-wrap:wrap; border:1px solid var(--u2-line);border-radius:var(--u2-radius); background:var(--u2-track);padding:5px 10px; margin-bottom:10px; } .ui2 .rdTickerLbl, .ui2 .rdTickerLbl *{font-family:"Noto Sans",system-ui,sans-serif;} .ui2 .rdTickerLbl .uiIco{margin-right:6px;color:var(--u2-muted);} .ui2 .rdTickerCap{ font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; color:var(--u2-ink-2); } .ui2 .rdTickerSep{ width:1px;height:11px;background:var(--u2-line);margin:0 9px;flex:0 0 auto; } .ui2 .rdTickerLbl .miniNote{ font-size:11px;font-weight:400;color:var(--u2-muted);text-transform:none;letter-spacing:0; } .ui2 .rdTickerLbl .uiIco{flex:0 0 auto;} .ui2 .rdTickerModel{ background:transparent;border:0;padding:0;border-radius:0; font:500 11px/1 "Noto Sans",system-ui,sans-serif;color:var(--u2-muted); text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums; } .ui2 .stkCode{ display:inline-block;padding:1px 6px; border-radius:var(--u2-radius); background:var(--u2-panel);border:1px solid var(--u2-line); color:var(--u2-accent);font:600 12px/1.5 "Noto Sans",system-ui,sans-serif; } .ui2 .stkCode:hover{background:var(--u2-accent-soft);border-color:var(--u2-accent);} .ui2 .stkCode .stkCodeCn{color:var(--u2-muted);font-weight:500;} .ui2 .stkCode.stkCodeLowConf{border-style:dashed;}