/* PersonalStockStyleSheet.css — 加入日/夜主題變數（前綴 --pss-） 使用：在 加上 data-theme="dark" 啟用深色覆寫 */ /* ----------------------------- Theme variables (light defaults) ----------------------------- */ :root { --pss-white: #ffffff; --pss-black: #000000; --pss-text: #111827; --pss-heading: #111827; --pss-link: #0366d6; /* semantic */ --pss-success: green; --pss-danger: red; --pss-warning: orange; --pss-yellow: yellow; --pss-wheat: wheat; --pss-crimson: crimson; /* accents / highlights */ --pss-accent-strong: #ff1500; --pss-income-href: #f17100; --pss-text-header: #80acff; --pss-season-color: #e9740f; /* panels / charts */ --pss-chart-bg: #f8f9fa; --pss-chart-message-color: gray; --pss-investee-bg: #ffffff; /* borders / shadows */ --pss-border: #ccc; --pss-shadow: 0 0 10px rgba(0,0,0,0.1); /* image/icon filters */ --pss-option-img-filter: none; /* buttons */ --pss-styled-button-bg: #4CAF50; --pss-styled-button-hover: #45a049; /* small helpers */ --pss-label-muted: #afabaf; --pss-quarterly-eps-color: #ff8e15; } /* ----------------------------- Dark theme overrides ----------------------------- */ [data-theme="dark"] { --pss-white: #ffffff; --pss-black: #000000; --pss-text: #ffffff; --pss-heading: #ffffff; --pss-link: #42c9ff; --pss-success: green; --pss-danger: red; --pss-warning: orange; --pss-yellow: yellow; --pss-wheat: wheat; --pss-crimson: crimson; --pss-accent-strong: #ff1500; --pss-income-href: #f17100; --pss-text-header: #80acff; --pss-season-color: #e9740f; --pss-chart-bg: #000000; --pss-chart-message-color: gray; --pss-investee-bg: #000000; --pss-border: #ccc; /* 保持原 dark 檔使用的淺色邊線以不破壞視覺 */ --pss-shadow: 0 0 10px #ccc; --pss-option-img-filter: invert(1); --pss-styled-button-bg: #4CAF50; --pss-styled-button-hover: #45a049; --pss-label-muted: #afabaf; --pss-quarterly-eps-color: #ff8e15; } /* ----------------------------- Styles (使用變數替換顏色) ----------------------------- */ h1 { color: var(--pss-heading); } .create-icon-img { width: 50px; height: 50px; } .personalStockTable td { min-width: 170px; } .labelA { min-width: 70px; } .labelB { min-width: 70px; } .textRed { color: var(--pss-danger); } .textGreen { color: var(--pss-success); } .textOrange { color: var(--pss-warning); } .textYellow { color: var(--pss-yellow); } .textWhite { color: var(--pss-white); } .text-bcolor-green { background-color: var(--pss-success); } .text-bcolor-red { background-color: var(--pss-danger); } a.monthly-revenue { /* padding: 5px !important;*/ padding-left: 5px; text-align: right; display: block; max-width: 80px; min-width: 85px; } a.monthly-revenue2 { /* padding: 5px !important;*/ padding-left: 5px; text-align: right; display: block; max-width: 80px; font-size: 8px; color: var(--pss-text); } .stockDataChart { max-width: 390px !important; max-height: 800px !important; } .create-icon-div { /* position: fixed; bottom: 10px;*/ } .header-div2.active { text-decoration: underline; color: var(--pss-crimson); font-weight: bold; } .ask-price { max-width: 390px; margin: 3px; min-width: 340px; } .ask-price a { font-size: 25px; } .card-body { padding: 3px !important; } .popularity-img { width: 20px; height: 20px; margin-bottom: 5px } .popularity-img-area { /* position: absolute; right: 10px*/ } .personal-stock-area { position: relative; max-width: 1280px; margin-right: auto; margin-left: auto; } .edit-image-area { position: absolute; right: 10px; font-size: 28px; } .display-text { color: inherit !important; } .display-text2 { color: inherit !important; } .tdMessageArea { } .option-img { width: 20px; height: 20px; filter: var(--pss-option-img-filter); } .option-img-area { position: absolute; right: 0px } .img_stock { width: 150px; height: 150px; object-fit: contain; } .imageArea { overflow-y: auto; max-height: 360px; } .imageTile { font-size: 12px; } .chart-area { width: 100px; background-color: var(--pss-chart-bg); } .chart-message { position: absolute; } .chart-message-text { -webkit-transform: scale(0.75); font-size: 9px; display: inline-block; color: var(--pss-chart-message-color); } .investee-chart-area { height: 250px; } .investee-chart-img { width: 15px; height: 15px; } .investee-chart-window { display: none; width: 340px; height: 350px; /* margin: 20px auto;*/ border: 1px solid var(--pss-border); box-shadow: var(--pss-shadow); position: absolute; z-index: 999; background-color: var(--pss-investee-bg); } .chat-title { color: var(--pss-heading); } .investee-chart-header { background-color: var(--pss-investee-bg); padding: 10px; border-bottom: 1px solid var(--pss-border); } .close-investee-chart-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .investee-chart-body { background-color: var(--pss-investee-bg); } .investee-chart { height: 400px; } .name-detail-window { display: none; width: 340px; height: 350px; /* margin: 20px auto;*/ border: 1px solid var(--pss-accent-strong); box-shadow: var(--pss-shadow); position: absolute; z-index: 1021; background-color: var(--pss-investee-bg); } .name-detail-header { background-color: var(--pss-investee-bg); padding: 10px; border-bottom: 1px solid var(--pss-border); } .close-name-detail-btn { float: right; border: none; background-color: transparent; cursor: pointer; } #name-detail-href { color: var(--pss-link) !important; text-decoration: underline !important; } .name-detail-body { background-color: var(--pss-investee-bg); padding: 5px; } .name-detail-body label { color: var(--pss-text); } .name-detail-chart { height: 400px; } .edit-ifrs-describe { height: 400px; width: 100%; } .name-detail-edit { position: absolute; right: 10px; } #name-detail-read-more { color: var(--pss-link) !important; padding: 5px; } #name-detail-describe { color: var(--pss-text); } .text-container { overflow-y: auto; background-color: var(--pss-investee-bg); color: var(--pss-text); } .ifrs-describe-area { background-color: var(--pss-investee-bg); } .ifrs-describe-reply { background-color: var(--pss-investee-bg); } .name-detail-title { color: var(--pss-text); } .income-statement-href { color: var(--pss-income-href) !important; } .percent-text { font-size: 12px; color: inherit; } .text-header-color { color: var(--pss-text-header); } .season-span { display: block; width: 20px; height: 15px; font-size: 12px; text-align: center; line-height: 15px; border: 1px solid var(--pss-season-color); color: var(--pss-season-color); font-weight: bold; } .institutionalInvestors-text { font-size: 12px; color: inherit; display: block; text-align: right; } .stock-card-loading-img { width: 200px; height: 200px; } @media screen and (min-width: 575px) { .card { margin: 3px; min-width: 340px; max-width: 366px; } } @media screen and (max-width: 575px) { .card { margin: 3px; min-width: 340px; width: 100%; border: 0px solid rgba(0, 0, 0, 0.125); } } /* 定義 .styled-button 類別的基本樣式 */ .styled-button { background-color: var(--pss-styled-button-bg); /* 背景顏色 */ border: none; /* 無邊框 */ color: var(--pss-white); /* 文字顏色 */ text-align: center; /* 文字置中 */ text-decoration: none; /* 無文字裝飾 */ display: inherit; /* 行內區塊元素 */ font-size: 16px; /* 字型大小 */ margin: 4px 2px; /* 外邊距 */ cursor: pointer; /* 滑鼠移上去顯示手型 */ border-radius: 8px; /* 圓角邊框 */ transition: background-color 0.3s ease; /* 背景顏色過渡效果 */ } .styled-button:hover { background-color: var(--pss-styled-button-hover); /* 懸停時的背景顏色 */ } /* EPS 計算器視窗的樣式 */ .eps-calculator-window { display: none; width: 340px; height: 400px; /* margin: 20px auto;*/ border: 1px solid var(--pss-accent-strong); box-shadow: var(--pss-shadow); position: absolute; z-index: 1021; background-color: var(--pss-investee-bg); } .eps-calculator-header { background-color: var(--pss-investee-bg); padding: 10px; border-bottom: 1px solid var(--pss-border); } .close-eps-calculator-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .eps-input-area, .eps-result-area { margin-top: 10px; /* 上外邊距 */ } #eps-result, #quarterly-revenue-result { font-weight: bold; /* 加粗字體 */ color: var(--pss-quarterly-eps-color); } /* 新增樣式讓每個輸入項目換行 */ .eps-input-area label, .eps-input-area input { display: block; /* 每個標籤和輸入框各自占一行 */ margin-top: 5px; /* 上外邊距 */ } .ps-lable { display: block; font-size: small; color: var(--pss-label-muted); }