/* ===== ApexChart 樣式覆寫（深色模式 tooltip）===== * * 為何放在 global CSS： * ApexChart 透過 JS 動態插入 .apexcharts-tooltip 等元素， * 不帶 Razor scope attribute（b-xxx），razor.css scoped 規則無法 match。 * 且 [data-bs-theme=dark] ::deep .selector 在 Blazor 編譯後會變成 * [data-bs-theme=dark][b-xyz] .selector， 不帶 scope，永不 match。 * 因此必須走 global stylesheet（見 README_個人化設定_顯示設定.md Rule 5）。 * * 顏色全部使用 colors.css 已定義的 CSS 變數，符合「.razor.css 禁止硬編碼 hex」規則。 * !important 是覆寫 ApexCharts 自身高 specificity inline 樣式所必需， * 與 colors.css 處理 Bootstrap 變數的手法一致。 */ /* === Tooltip 主容器 === */ [data-bs-theme=dark] .apexcharts-tooltip, [data-bs-theme=dark] .apexcharts-tooltip.apexcharts-theme-light { background: var(--bg-primary) !important; color: var(--text-primary); border-color: var(--border-color) !important; box-shadow: var(--shadow-md); } /* === Tooltip 標題列 === */ [data-bs-theme=dark] .apexcharts-tooltip-title, [data-bs-theme=dark] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: var(--bg-tertiary) !important; color: var(--text-primary); border-bottom-color: var(--border-color) !important; } /* === Tooltip 內容文字（series / y-value / z-value / goals）=== */ [data-bs-theme=dark] .apexcharts-tooltip-text-y-label, [data-bs-theme=dark] .apexcharts-tooltip-text-y-value, [data-bs-theme=dark] .apexcharts-tooltip-text-z-label, [data-bs-theme=dark] .apexcharts-tooltip-text-z-value, [data-bs-theme=dark] .apexcharts-tooltip-text-goals-label, [data-bs-theme=dark] .apexcharts-tooltip-text-goals-value, [data-bs-theme=dark] .apexcharts-tooltip-series-group .apexcharts-tooltip-text { color: var(--text-primary); } /* === X 軸 / Y 軸 tooltip === */ [data-bs-theme=dark] .apexcharts-xaxistooltip, [data-bs-theme=dark] .apexcharts-yaxistooltip { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* === X 軸 tooltip 三角箭頭 === */ [data-bs-theme=dark] .apexcharts-xaxistooltip-bottom:after { border-bottom-color: var(--bg-tertiary) !important; } [data-bs-theme=dark] .apexcharts-xaxistooltip-bottom:before { border-bottom-color: var(--border-color) !important; } [data-bs-theme=dark] .apexcharts-xaxistooltip-top:after { border-top-color: var(--bg-tertiary) !important; } [data-bs-theme=dark] .apexcharts-xaxistooltip-top:before { border-top-color: var(--border-color) !important; } /* === Y 軸 tooltip 三角箭頭 === */ [data-bs-theme=dark] .apexcharts-yaxistooltip-left:after { border-left-color: var(--bg-tertiary) !important; } [data-bs-theme=dark] .apexcharts-yaxistooltip-left:before { border-left-color: var(--border-color) !important; } [data-bs-theme=dark] .apexcharts-yaxistooltip-right:after { border-right-color: var(--bg-tertiary) !important; } [data-bs-theme=dark] .apexcharts-yaxistooltip-right:before { border-right-color: var(--border-color) !important; } /* === 隱藏內建匯出漢堡選單（☰ Download SVG / PNG / CSV）=== * 全圖表統一改用元件自製的「圖片(PNG)匯出」+「CSV 簡單/詳細」入口（見 GenericChartModalComponent）。 * 只隱藏漢堡圖示，保留 zoom/pan/reset 圖示（零功能損失）。非 theme-scoped → 淺/深色皆套用。*/ .apexcharts-toolbar .apexcharts-menu-icon { display: none !important; } /* === 工具列匯出選單（Download SVG / PNG / CSV）=== * 圖表右上角漢堡選單，ApexChart 以 JS 注入，預設白底，深色模式下會是一塊白色突兀方塊。 * 同 tooltip 走 global CSS 覆寫。*/ [data-bs-theme=dark] .apexcharts-menu { background: var(--bg-primary) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-md); } [data-bs-theme=dark] .apexcharts-menu-item { color: var(--text-primary); } [data-bs-theme=dark] .apexcharts-menu-item:hover { background: var(--bg-tertiary) !important; } /* === 工具列圖示（縮放 / 平移 / 重設 / 漢堡）=== * 預設 hover fill 為深灰 (#333)，在深色背景上幾乎隱形 → 改用主文字色。*/ [data-bs-theme=dark] .apexcharts-toolbar .apexcharts-menu-icon:hover svg, [data-bs-theme=dark] .apexcharts-toolbar .apexcharts-reset-icon:hover svg, [data-bs-theme=dark] .apexcharts-toolbar .apexcharts-pan-icon:hover svg, [data-bs-theme=dark] .apexcharts-toolbar .apexcharts-zoom-icon:hover svg, [data-bs-theme=dark] .apexcharts-toolbar .apexcharts-zoomin-icon:hover svg, [data-bs-theme=dark] .apexcharts-toolbar .apexcharts-zoomout-icon:hover svg { fill: var(--text-primary) !important; }