/* StockNewDbStyleSheet.css 已加入日/夜主題變數（前綴 --sndb- 避免全域衝突） 使用：在 設定 data-theme="dark" 啟用深色 */ /* ----------------------------- Theme variables (light defaults) ----------------------------- */ :root { --sndb-heading-color: #111827; --sndb-dl-color: #475569; --sndb-table-text-color: #111827; --sndb-gradient-start: rgba(255,255,255,0); --sndb-gradient-end: #ffffff; --sndb-news-source-color: #2563eb; /* light default */ --sndb-stock-news-title-color: #111827; --sndb-chart-message-color: gray; --sndb-details-window-bg: #ffffff; --sndb-details-header-bg: #f5f5f5; --sndb-details-body-bg: #ffffff; --sndb-details-text-color: #111827; --sndb-market-header-bg: #f5f5f5; --sndb-market-body-bg: #ffffff; --sndb-chain-list-bg: #f8f9fa; --sndb-chain-list-border-color: #ffffff; --sndb-chain-title-color: #b45309; --sndb-update-message-color: #f59e0b; --sndb-discuss-header-title-color: #f59e0b; --sndb-odd-bg: #f8fafc; --sndb-even-bg: #ffffff; --sndb-table-row-hover: #ffeb3b; --sndb-loading-color: #999; --sndb-border: #ccc; --sndb-grayishBlue: rgba(158,192,253,0.15); } /* ----------------------------- Dark theme overrides ----------------------------- */ [data-theme="dark"] { --sndb-heading-color: #ffffff; --sndb-dl-color: wheat; /* #f5deb3 */ --sndb-table-text-color: #ffffff; --sndb-gradient-start: rgba(255,255,255,0); --sndb-gradient-end: #ffffff; --sndb-news-source-color: #badfff; --sndb-stock-news-title-color: wheat; --sndb-chart-message-color: gray; --sndb-details-window-bg: #ffffff; --sndb-details-header-bg: #2f2f2f; --sndb-details-body-bg: #2f2f2f; --sndb-details-text-color: wheat; --sndb-market-header-bg: #000000; --sndb-market-body-bg: #000000; --sndb-chain-list-bg: #4b4b4b; --sndb-chain-list-border-color: #ffffff; --sndb-chain-title-color: #ffed8d; --sndb-update-message-color: #ffe69b; --sndb-discuss-header-title-color: #ffe69b; --sndb-odd-bg: #000000; --sndb-even-bg: #161616; --sndb-table-row-hover: #ffff00; --sndb-loading-color: #999; --sndb-border: #ccc; --sndb-grayishBlue: rgba(158,192,253,0.05); } /* ----------------------------- Styles (使用變數替換顏色) ----------------------------- */ h1 { color: var(--sndb-heading-color); } dl { color: var(--sndb-dl-color); } .table, thead, tbody, tfoot, tr, td, th { padding: 0px !important; display: block; min-width: 300px; color: var(--sndb-table-text-color); } .illustrate { white-space: pre-line !important; } .create-icon-div { width: 50px; height: 50px; left: 10px; /* position: fixed; bottom: 10px; right: 10px; */ } .create-icon-img { width: 50px; height: 50px; } .personal-img { width: 50px; height: 50px; } .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; /* grid-row-end: 3; */ 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; } .stock-news-area { position: relative; max-width: 1280px; margin-left: auto; margin-right: auto; } .popularity-img { width: 20px; height: 20px; margin-bottom: 5px; } .popularity-img-area { /* position: absolute; right: 10px */ } .good-img { width: 20px; height: 20px; margin-bottom: 10px; filter: invert(1); } .read-more-area { left: 0px; z-index: 99; background: linear-gradient(180deg, var(--sndb-gradient-start), var(--sndb-gradient-end)); width: 100%; } .read-more-area:hover { cursor: pointer; } .read-more-text { display: block; font-size: 20px; text-align: center; font-weight: bold; } .newsSource { color: var(--sndb-news-source-color) !important; } .stock-news-title { color: var(--sndb-stock-news-title-color) !important; } /* chart / misc */ .chart-area { width: 100px; background-color: var(--sndb-chart-bg, #141414); } .chart-message { position: absolute; } .chart-message-text { -webkit-transform: scale(0.75); font-size: 9px; display: inline-block; color: var(--sndb-chart-message-color); } /* details / market windows (顏色使用變數) */ .details-window { display: none; width: 360px; height: auto; border: 1px solid var(--sndb-border); box-shadow: 0 0 10px var(--sndb-border); position: absolute; z-index: 99999; background-color: var(--sndb-details-window-bg); } .details-header { background-color: var(--sndb-details-header-bg); padding: 10px; border-bottom: 1px solid var(--sndb-border); } .close-details-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .details-body { background-color: var(--sndb-details-body-bg); overflow: auto; position: absolute; width: 100%; height: 500px; padding: 10px; border: solid; border-width: 1px; border-color: var(--sndb-border); color: var(--sndb-details-text-color); } .trade-table-area { padding-bottom: 5px; } .market-window { display: none; width: 360px; height: auto; border: 1px solid var(--sndb-border); box-shadow: 0 0 10px var(--sndb-border); position: absolute; z-index: 99999; background-color: var(--sndb-market-window-bg); } .market-header { background-color: var(--sndb-market-header-bg); padding: 10px; border-bottom: 1px solid var(--sndb-border); } .close-market-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .market-body { background-color: var(--sndb-market-body-bg); overflow: auto; position: absolute; width: 100%; height: 500px; border: solid; border-width: 1px; border-color: var(--sndb-border); min-height: 500px; scrollbar-width: thin; } .chain-list-area { background: var(--sndb-chain-list-bg); padding: 10px; border-color: var(--sndb-chain-list-border-color); border: solid; } .chain-title-text { display: inline-block; color: var(--sndb-chain-title-color) !important; font-weight: bold; width: calc(100% - 40px); cursor: pointer; } .percent-text { font-size: 12px; color: inherit; } .update-message-text, .news-message-text { color: var(--sndb-update-message-color) !important; font-weight: bold; font-size: large; } .discuss-header-title { color: var(--sndb-discuss-header-title-color) !important; } /* table row hover / odd/even */ #table_body tr:hover { background-color: var(--sndb-table-row-hover); } .odd { background-color: var(--sndb-odd-bg); } .even { background-color: var(--sndb-even-bg); } /* loading */ .loading { display: inline; margin-left: 10px; z-index: 9999; color: var(--sndb-loading-color); } .loading img { width: 30px; height: 30px; } /* jstree helpers */ .jstree-hovered { background: var(--sndb-jstree-hover-bg, #f3f4f6) !important; } .jstree-clicked { background: var(--sndb-jstree-clicked-bg, #354245) !important; }