/** StockCard.css — 日/夜主題變數化（變數前綴 --scd- 避免衝突） 使用：:root 為淺色預設；在 下套用深色覆寫 */ /* ----------------------------- Theme variables ----------------------------- */ :root { --scd-text: #111827; --scd-heading: #111827; --scd-link: #00aaff; --scd-table-text: #111827; --scd-card-bg: #ffffff; --scd-panel-bg: #ffffff; --scd-chart-bg: #f8f9fa; --scd-border: #ccc; --scd-muted: #666; --scd-selected-bg: #ffeb3b; --scd-danger: red; --scd-success: green; --scd-warning: orange; --scd-white: #ffffff; --scd-yellow: yellow; --scd-crimson: crimson; --scd-option-img-filter: none; --scd-chart-message: gray; --scd-cardtitle: #00aaff; --scd-cardcontent: #000000; --scd-cardcontent-bg: #FFFFFF; --scd-collapse-bg: #f0f0f0; --scd-font-bold-color: #0072b6; --scd-income-href: #f17100; --scd-season-color: #e9740f; --scd-esg-label: coral; --scd-odd-bg: #ffffff; } /* Dark theme overrides */ [data-theme="dark"] { --scd-text: #ffffff; --scd-heading: #ffffff; --scd-link: #42c9ff; --scd-table-text: #ffffff; --scd-card-bg: #000000; --scd-panel-bg: #000000; --scd-chart-bg: #000000; --scd-border: #444; --scd-muted: #999; --scd-selected-bg: #ffff00; --scd-danger: #ff6b6b; --scd-success: #4caf50; --scd-warning: #ffb74d; --scd-white: #ffffff; --scd-yellow: #ffff00; --scd-crimson: crimson; --scd-option-img-filter: invert(1); --scd-chart-message: gray; --scd-cardtitle: #00aaff; --scd-cardcontent: #bdbdbd; --scd-cardcontent-bg: #333333; --scd-collapse-bg: #2b2b2b; --scd-font-bold-color: #d4efff; --scd-income-href: #f17100; --scd-season-color: #e9740f; --scd-esg-label: coral; --scd-odd-bg: #333333; } /* ----------------------------- Styles (使用變數) ----------------------------- */ body { } a { text-decoration: unset; color: var(--scd-link); } .table { color: var(--scd-table-text); } td { padding: 0px !important; } th { padding: 0px !important; } .selected { background-color: var(--scd-selected-bg); } .td-fcolor-red { color: var(--scd-danger) !important; font-weight: bold; } .td-fcolor-green { color: var(--scd-success) !important; font-weight: bold; } .td-fcolor-white { color: var(--scd-white) !important; font-weight: bold; } .td-bcolor-green { background-color: var(--scd-success) !important; } .td-bcolor-red { background-color: var(--scd-danger) !important; } .td-fcolor-orange { color: var(--scd-warning); font-weight: bold; } .create-icon-img { width: 50px; height: 50px; } .personalStockTable td { min-width: 170px; } .labelA { min-width: 70px; } .labelB { min-width: 70px; } .textRed { color: var(--scd-danger); } .textGreen { color: var(--scd-success); } .textOrange { color: var(--scd-warning); } .textYellow { color: var(--scd-yellow); } .textWhite { color: var(--scd-white); } .text-bcolor-green { background-color: var(--scd-success); } .text-bcolor-red { background-color: var(--scd-danger); } a.monthly-revenue { padding-left: 5px; text-align: right; display: block; max-width: 80px; min-width: 85px; } a.monthly-revenue2 { padding-left: 5px; text-align: right; display: block; max-width: 80px; font-size: 8px; color: var(--scd-text); } a.tradeProportion-text { padding-left: 5px; text-align: right; display: block; max-width: 80px; font-size: 8px; color: var(--scd-text); } a.monthly-revenue-header { max-width: 85px; display: block; color: var(--scd-text); padding-left: 5px; padding-bottom: 5px; text-align: right; } a.monthly-revenue-header2 { color: var(--scd-text); display: block; text-align: right; max-width: 80px; } a.ifrs-header2 { color: var(--scd-text); display: block; max-width: 200px; } a.income-statement { margin: 0px !important; padding-left: 3px; text-align: right; display: block; min-width: 50px; font-size: 15px; } a.income-statement-header { max-width: 90px; display: block; color: var(--scd-text); padding-left: 5px; padding-bottom: 5px; text-align: right; } a.income-statement-header2 { max-width: 85px; display: flex; color: var(--scd-text); } .statementOfFinancialChart, .ProfitabilityChart, .solvencyChart, .stockBorrowingChart, .equityDispersionChart, .incomeStatementChart, .institutionalInvestorsChart { height: 250px; } .create-icon-div { } .header-div2.active { text-decoration: underline; color: var(--scd-crimson); font-weight: bold; } a.borrowings { padding-left: 5px; text-align: right; display: block; min-width: 50px; } a.borrowings-header { max-width: 85px; display: block; color: var(--scd-text); padding-left: 5px; padding-bottom: 5px; text-align: right; } a.borrowings-header2 { max-width: 85px; display: flex; color: var(--scd-text); padding-right: 5px; padding-bottom: 5px; } .ask-price { max-width: 390px; margin: 3px; min-width: 340px; } .ask-price a { font-size: 25px; } .card { margin: 3px; min-width: 340px; min-height: 200px; background-color: var(--scd-card-bg); } .card-body { padding: 3px !important; } .card-text { color: var(--scd-text); } .popularity-img { width: 20px; height: 20px; margin-bottom: 5px; } .popularity-img-area { } .personal-stock-area { position: relative; max-width: 1280px; margin-right: auto; margin-left: auto; display: flex; justify-content: center; } .display-text { color: inherit; display: block; text-align: right; } .display-text2 { color: var(--scd-text); text-align: right; font-size: 12px; } .display-text3 { color: inherit; min-width: 80px; display: block; text-align: right; } .display-text4 { font-size: 12px; } .display-text5 { text-align: right; font-size: 12px; } .display-header-text { color: inherit; display: block; text-align: center; } .display-header-text2 { color: inherit; display: block; text-align: right; } .display-header-text3 { color: inherit; display: block; width: 80px; } .display-header-text4 { color: inherit; display: block; width: 80px; } .display-header-text5 { font-size: 12px; } .display-header-text6 { font-size: 12px; } .display-investee-text { color: inherit; display: inline; width: 80px; font-size: 12px; } .display-investor-text { display: block; text-align: center; font-size: 15px; color: orangered; font-weight: bold; } .display-investor-text2 { display: block; text-align: center; font-size: 15px; color: #a000ff; font-weight: bold; } .display-investee-hreText { font-size: 12px; color: var(--scd-link); display: inline; } .flex-row-center { justify-content: center; } .border-success { border-color: #48ace9 !important; } .text-success { color: black !important; } .odd { background-color: var(--scd-odd-bg); } .even { background-color: var(--scd-card-bg); } thead, tbody, tfoot, tr, td, th { } .borrowings { width: 100%; } .tdColspan { text-align: center; } .investeeLabel { font-size: 12px; color: blueviolet; } .display-investee-header1, .display-investee-header2, .display-investee-header3, .display-investee-header4 { width: 80px; color: inherit; } #table_body16 td { width: 90px; } .rankingType { font-weight: bold; margin-right: 10px; } .rankingType2 { color: var(--scd-muted); } .rankingValue { font-weight: bold; margin-right: 10px; } .rankingValue2 { color: var(--scd-danger); font-size: 20px; } .rankingValue3 { color: var(--scd-muted); margin-left: 10px; } @media (max-width: 768px) { .ranking-item { display: block; margin-bottom: 20px; } .ranking-type { margin-bottom: 5px; } .ranking-value { display: block; } .value { margin-bottom: 5px; } .ranking-value2 { font-size: 16px; } .unit { margin-left: 5px; } } h5 { font-size: 1.2rem; font-weight: bold; margin-bottom: 5px; color: var(--scd-text); } p { margin-bottom: 10px; } .font-weight-bold { font-weight: bold; margin-right: 5px; color: var(--scd-font-bold-color); } #collapse40 { margin-top: 10px; padding: 10px; background-color: var(--scd-collapse-bg); border-radius: 5px; } .equity-dispersion-p { margin-bottom: 1px; } .info-img { width: 15px; height: 15px; } .esg-wrapper { display: grid; grid-template-rows: 30px auto auto auto auto; grid-template-columns: auto auto; } .esg-row1 { grid-row-start: 1; } .esg-row2 { grid-row-start: 2; } .esg-row3 { grid-row-start: 3; } .esg-row4 { grid-row-start: 4; } .esg-row5 { grid-row-start: 5; } .esg-label { color: var(--scd-esg-label); } .esg-text { color: var(--scd-text); } .institutionalInvestors-text { font-size: 12px; color: inherit !important; display: block; text-align: right; } /* 標題樣式 */ .card-title { color: var(--scd-cardtitle); font-weight: bold; width: 30%; display: inline-block; vertical-align: top; } /* 內容樣式 */ .card-content { color: var(--scd-cardcontent); width: 65%; display: inline-block; vertical-align: top; } .card-content.odd { background-color: var(--scd-cardcontent-bg); /* 保留較深的底色 */ } /* 財務電子檔和股東會電子檔連結樣式 */ .income-statement-href { color: var(--scd-link); text-decoration: none; } .income-statement-href:hover { text-decoration: underline; } /* 圖片區域樣式 */ .imageArea { margin-top: 20px; } /* 圖片區塊樣式 */ .imageTile { display: block; color: var(--scd-cardcontent); text-decoration: none; text-align: center; } .imageTile:hover { text-decoration: underline; } /* 圖片樣式 */ .img_stock { max-width: 100px; max-height: 100px; } .stock-label { font-size: 16px; font-weight: bold; color: var(--scd-text); margin-bottom: 5px; display: block; } @media screen and (min-width: 575px) { .stock-card-area { display: flex; width: 360px; justify-content: center; } .stockDataChart { max-width: 390px !important; max-height: 390px !important; } } @media screen and (max-width: 575px) { .stock-card-area { display: flex; width: 100%; justify-content: center; } .stockDataChart { max-height: 390px !important; } }