/* TradeTable.css — 新增日/夜主題變數並以變數替換顏色 使用方式：在 或 document.documentElement 設定 data-theme="dark" 即啟用深色主題 */ /* ----------------------------- Theme variables ----------------------------- */ :root{ --text-color: #000000; --link-color: #0366d6; /* highlights / status */ --selected-bg: #ffeb3b; /* 原 yellow */ --positive-color: #28a745; /* 綠色文字 */ --negative-color: #dc3545; /* 紅色文字 */ --muted-white: #ffffff; /* 用於白色字 */ --warning-color: #e9740f; /* 橙色 */ --positive-bg: #28a745 !important; --negative-bg: #dc3545 !important; /* layout / panels */ --card-bg: #ffffff; --odd-bg: aliceblue; --even-bg: #ffffff; --tbody-hover-bg: #f9ff70; --message-div-bg: #e9e9e9; --response-temp-bg: #b9b9b9; /* borders / accents */ --border-1: #ccc; --border-2: #aaa; --room-area-bg: #f0f0f0; --room-hover-bg: #ddd; --room-list-bg: #d5d5d5; --room-list-border: gray; --room-name-color: blue; --parent-label-color: black; --extend-bg: #b7b7b7; /* small controls */ --delete-btn-bg: #ffffff; --delete-btn-border: #ccc; --down-arrow-bg: #eaef08; /* suggestion / modal / keyword */ --suggestion-border: #ccc; --suggestion-bg: #ffffff; --suggestion-hover: #ddd; --modal-content-bg: #fefefe; --modal-border: #888; --modal-overlay: rgba(0,0,0,0.4); --keyword-item-bg: #e0e0e0; --iframe-header-bg: #f5f5f5; --open-icon-color: #000; --muted-color: #aaa; /* misc */ --last-message-color: gray; --public-span-border: #f9ff00; --public-span-color: #f9ff00; --room-selected-bg: #ffffce; --drag-border: #000; --drag-bg: #f0f0f0; --suggestion-width: 200px; --unread-bg: #ff5a5f; --window-border: #ccc; --window-shadow: rgba(0,0,0,0.3); } /* Dark theme overrides */ [data-theme="dark"]{ --text-color: #e5e5e5; --link-color: #66b2ff; --selected-bg: #b58800; --positive-color: #4caf50; --negative-color: #ff6b6b; --muted-white: #ffffff; --warning-color: #ffb74d; --positive-bg: #2f7a2f !important; --negative-bg: #8f1c1c !important; --card-bg: #232323; --odd-bg: #2b2b2b; --even-bg: #232323; --tbody-hover-bg: rgba(255,255,0,0.12); --message-div-bg: #2c2c2c; --response-temp-bg: #3a3a3a; --border-1: #444; --border-2: #666; --room-area-bg: #232323; --room-hover-bg: #333333; --room-list-bg: #2d2d2d; --room-list-border: #444444; --room-name-color: #9fcfff; --parent-label-color: #f5f5f5; --extend-bg: #3a3a3a; --delete-btn-bg: #1b1b1b; --delete-btn-border: #444444; --down-arrow-bg: #cfae08; --suggestion-border: #444; --suggestion-bg: #2b2b2b; --suggestion-hover: #333; --modal-content-bg: #1f1f1f; --modal-border: #666; --modal-overlay: rgba(0,0,0,0.7); --keyword-item-bg: #3a3a3a; --iframe-header-bg: #2b2b2b; --open-icon-color: #ffffff; --muted-color: #999; --last-message-color: #999; --public-span-border: #ffea00; --public-span-color: #ffea00; --room-selected-bg: #343434; --drag-border: #fff; --drag-bg: #2c2c2c; --suggestion-width: 200px; --unread-bg: #ff5a5f; --window-border: #444; --window-shadow: rgba(0,0,0,0.5); } /* ----------------------------- 原有規則（改為使用變數） ----------------------------- */ body { } .selected { background-color: var(--selected-bg); } .td-fcolor-red { color: var(--negative-color)!important; font-weight: bold; } .td-fcolor-green { color: var(--positive-color) !important; font-weight: bold; } .td-fcolor-white { color: var(--muted-white) !important; font-weight: bold; } .td-bcolor-green { background-color: var(--positive-bg) !important; } .td-bcolor-red { background-color: var(--negative-bg) !important; } .td-fcolor-orange { color: var(--warning-color); 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(--negative-color); } .textGreen { color: var(--positive-color); } .textOrange { color: var(--warning-color); } .textYellow { color: var(--selected-bg); } .textWhite { color: var(--muted-white); } .text-bcolor-green { background-color: var(--positive-bg); } .text-bcolor-red { background-color: var(--negative-bg); } 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(--text-color); } .stockDataChart { max-width: 390px !important; max-height: 390px !important; background:var(--card-bg); } .create-icon-div { } .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 { } .personal-stock-area { position: relative; max-width: 1280px; margin-right: auto; margin-left: auto; } tbody tr:hover { background-color: var(--tbody-hover-bg); } .edit-image-area { position: absolute; right: 10px; font-size: 28px; } .odd { background-color: var(--odd-bg); } .even { background-color: var(--even-bg); } .display-header-text0, .display-header-text1, .display-header-text2, .display-header-text3{ color:var(--text-color); } .display-text { color: inherit !important; text-decoration:unset; } .display-text2 { color: inherit; } .displayUpDown { color: inherit !important; display: block; font-size: 13px; text-decoration: unset; } .displayUpDownPercentage { color: inherit !important; display: block; font-size: 13px; text-decoration: unset; } .tdMessageArea { } .season-span { display: block; width: 20px; height: 15px; font-size: 12px; text-align: center; line-height: 15px; border: 1px solid var(--warning-color); color: var(--warning-color); font-weight: bold; } .ai-chart-window { display: none; width: 300px; height: 300px; border: 1px solid var(--border-1); box-shadow: 0 0 10px var(--border-1); position: absolute; z-index: 99; background-color: var(--card-bg); } .ai-chart-header { background-color: var(--iframe-header-bg); padding: 10px; border-bottom: 1px solid var(--border-1); } .close-ai-chart-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .ai-chart-body { background-color: var(--card-bg); } .chain-window { display: none; width: 360px; height: auto; border: 1px solid var(--border-1); box-shadow: 0 0 10px var(--border-1); position: absolute; z-index: 99; background-color: var(--card-bg); } .chain-header { background-color: var(--iframe-header-bg); padding: 10px; border-bottom: 1px solid var(--border-1); } .close-chain-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .chain-body { background-color: var(--card-bg); overflow: auto; height: 500px; border: solid; border-width: 1px; border-color: gray; } .esg-window { display: none; width: 360px; height: auto; border: 1px solid var(--border-1); box-shadow: 0 0 10px var(--border-1); position: absolute; z-index: 99; background-color: var(--card-bg); } .esg-header { background-color: var(--iframe-header-bg); padding: 10px; border-bottom: 1px solid var(--border-1); } .close-esg-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .esg-body { background-color: var(--card-bg); } .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: coral; } .esg-text { color: var(--text-color); } .news-window { display: none; width: 360px; height: 500px; border: 1px solid var(--border-1); box-shadow: 0 0 10px var(--border-1); position: absolute; z-index: 99; background-color: var(--card-bg); } .news-header { background-color: var(--iframe-header-bg); padding: 10px; border-bottom: 1px solid var(--border-1); } .close-news-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .news-body { background-color: var(--card-bg); overflow-y: auto; height: 500px; border: solid; border-width: 1px; border-color: gray; } .news-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 25px; grid-auto-rows: 60px; } .news-wrapper .box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: 2; } .news-wrapper .box2 { grid-column-start: 1; grid-row-start: 1; font-size: 15px; } .news-wrapper .box2 p { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; } .news-wrapper .box3 { grid-column-start: 1; grid-row-start: 2; } .news-wrapper .box4 { grid-column-start: 1; grid-row-start: 3; } .news-wrapper .box6 { grid-column-start: 1; grid-row-start: 3; } .news-wrapper .box5 img { width: 100%; max-width: 800px; max-height: 800px; } .news-wrapper .box5 .media { display: block !important; max-width: 800px; max-height: 800px; } .video-window { display: none; width: 360px; height: auto; border: 1px solid var(--border-1); box-shadow: 0 0 10px var(--border-1); position: absolute; z-index: 99; background-color: var(--card-bg); } .video-header { background-color: var(--iframe-header-bg); padding: 10px; border-bottom: 1px solid var(--border-1); } .close-video-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .video-body { background-color: var(--card-bg); overflow-y: auto; position: absolute; height: 500px; border: solid; border-width: 1px; border-color: gray; } .FIIs-window { display: none; width: 360px; height: auto; border: 1px solid var(--border-1); box-shadow: 0 0 10px var(--border-1); position: absolute; z-index: 99; background-color: var(--card-bg); } .FIIs-header { background-color: var(--iframe-header-bg); padding: 10px; border-bottom: 1px solid var(--border-1); } .close-FIIs-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .FIIs-body { background-color: var(--card-bg); overflow-y: auto; width: 100%; position: absolute; height: 500px; border: solid; border-width: 1px; border-color: gray; } .display-header-text2 { min-width: 50px; display: block; font-size: 15px; } .video-container iframe { width: 100%; } .delete-td { background-color: #f5c39a !important; color: black; font-weight: bold; align-content: center; width: 25px; display: none; } .delete-th { display: none; } .foreign-area{ text-decoration:unset; } @media screen and (min-width: 575px) { .card { margin: 3px; min-width: 340px; max-width: 366px; overflow-y: hidden; border-color: var(--card-bg); background-color:var(--card-bg); } } @media screen and (max-width: 575px) { .card { margin: 3px; min-width: 340px; max-width: auto !important; width: 100%; overflow-y: hidden; border-color: var(--card-bg); background-color: var(--card-bg); } }