/* StockIndustryChainStyleSheet.css — 日/夜主題變數化 使用：預設為淺色（:root），在需要深色時在 加上 data-theme="dark" */ /* ----------------------------- Theme variables ----------------------------- */ :root { --sic-white: #ffffff; --sic-black: #000000; --sic-text: #000000; --sic-muted: #999999; --sic-panel-bg: #ffffff; --sic-panel-alt-bg: #ffffff; --sic-honeydew: honeydew; --grayishBlue: rgba(158,192,253,0.15); --sic-highlight: #f9ff70; --sic-card-hover: #fff4b0; --sic-light-blue: #9ec0fd; --sic-teal: #006071; --sic-border-1: #ccc; --sic-border-2: rgba(0,0,0,0.125); --sic-shadow: 0 2px 5px rgba(0,0,0,0.3); --sic-chart-bg: #f8f9fa; --chain-card-bg: #ffffff; --sic-success: green; --sic-danger: red; --sic-warning: orange; --chart-message-color: gray; --parent-name-color: var(--sic-teal); --jstree-hover-bg: gray; --jstree-clicked-bg: #354245; --loading-color: #999; --cyan: #00bcd4; --red: #ff0000; --blue: #3cbce1; --orange: #e77e22; --gradient-start: rgba(255,255,255,0); --gradient-end: #ffffff; } [data-theme="dark"] { --sic-text: #e5e5e5; --sic-muted: #d9d8d8; --sic-panel-bg: #000000; --sic-panel-alt-bg: #000000; --sic-honeydew: honeydew; --grayishBlue: rgba(158,192,253,0.05); --sic-highlight: #34352a; /* 原 dark 檔 hover 色 */ --sic-card-hover: #fff4b0; --sic-light-blue: #9ec0fd; --sic-teal: #79d0f3; --sic-border-1: #444444; --sic-border-2: rgba(255,255,255,0.06); --sic-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); --sic-chart-bg: #121212; --chain-card-bg: #000000; --sic-success: green; --sic-danger: red; --sic-warning: orange; --chart-message-color: gray; --parent-name-color: #79d0f3; --jstree-hover-bg: gray; --jstree-clicked-bg: #354245; --loading-color: #999; --cyan: #00bcd4; --red: #ff6b6b; --blue: #66b2ff; --orange: #ffb74d; --gradient-start: rgba(255,255,255,0); --gradient-end: #ffffff; } /* ----------------------------- Styles (已替換顏色為變數) ----------------------------- */ body { } h1 { margin-bottom: 0px !important; } .row { margin-right: 0px !important; margin-left: 0px !important; } .box-stock-list { display: grid; grid-template-columns: 50px 45px 45px 45px; } .box-stock-list:hover { background-color: var(--sic-highlight); cursor: pointer; } .stock-chain-header { background-color: var(--sic-panel-bg); } .stock-chain-header2 { background-color: var(--sic-panel-alt-bg); margin-bottom: 5px; } .stock-chain-area { padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); } a { text-decoration: unset; } /* 保留原有命名，但用變數 */ .cyan { border-top: 3px solid var(--cyan); } .red { border-top: 3px solid var(--red); } .blue { border-top: 3px solid var(--blue); } .orange { border-top: 3px solid var(--orange); } .box { border-radius: 5px; box-shadow: 0px 30px 40px -20px var(--grayishBlue); padding: 5px; margin: 5px; } div.upstream, div.midstream, div.downstream { height: 100%; min-height: 200px; } div.content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .create-icon-div { width: 50px; height: 50px; left: 10px; } .create-icon-div2 { width: 25px; height: 25px; } .create-icon-img { width: 40px; height: 40px; } .create-icon-img2 { width: 30px; height: 30px; } .personal-img { width: 50px; height: 50px; } .chainArticle-table td { padding-left: 0px; padding-right: 0px; } .chainArticle-table .wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: 25px auto 75px 75px 25px 25px; background-color: var(--sic-panel-bg); margin-bottom: 5px; position: relative; } .chainArticle-table .box1-1 { grid-column-start: 2; grid-column-end: 2; grid-row-start: 1; grid-row-end: 3; font-size: 15px; } .chainArticle-table .box1 { grid-column-start: 1; grid-row-start: 1; font-size: 15px; background: linear-gradient(150deg, var(--sic-panel-bg) 15%, var(--sic-light-blue) 70%, var(--sic-panel-bg) 94%); margin-right: -10px; margin-left: -10px; color: var(--sic-teal); background-clip: border-box; border: 1px solid var(--sic-border-2); border-radius: 0.5rem 0.5rem 0 0; } .chainArticle-table .box2 { grid-column-start: 1; grid-row-start: 2; font-size: 15px; } .chainArticle-table .box3 { grid-column-start: 1; grid-row-start: 3; font-size: 10px; display: grid; grid-template-columns: 150px; } .chainArticle-table .box3-1 { grid-column-start: 1; grid-column-end: 2; } .chainArticle-table .box3-2 { display: flow; grid-column-start: 2; } .chainArticle-table .box3-2-1 { text-align: left; } .chainArticle-table .box3-2-2, .chainArticle-table .box3-2-3, .chainArticle-table .box3-2-4 { text-align: right; } .chainArticle-table .box3-2-5 { grid-row-start: 2; } .chainArticle-table .box3-3 { grid-column-start: 1; grid-column-end: 3; } .chainArticle-table .box3-4 { grid-column-start: 2; display: grid; grid-template-rows: 25px 25px 25px; } .chainArticle-table .box3-4-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chainArticle-table .box3-4-1:hover { background-color: var(--sic-highlight); cursor: pointer; } .chainArticle-table .box4 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 4; } .chainArticle-table .box5 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; } .chainArticle-table .box6 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 6; border-top: groove; border-color: var(--sic-honeydew); grid-template-columns: auto auto auto; display: grid; } .chainArticle-table .box6-1 { grid-column-start: 1; } .chainArticle-table .box6-2 { grid-column-start: 2; } .chainArticle-table .box6-3 { grid-column-start: 3; text-align: right; } .close-img { width: 20px; height: 20px; filter: invert(1); } .close-img-area { position: absolute; right: 5px; } .star-img { width: 15px; height: 15px; filter: invert(1); } .follow-img { width: 15px; height: 15px; } .star-img-area { position: absolute; right: 35px; } .edit-img { width: 20px; height: 20px; } .edit-img-area { position: absolute; right: 30px; } .stock-chain-area { position: relative; max-width: 1280px; margin-left: auto; margin-right: auto; } .up-img { width: 15px; height: 15px; padding-bottom: 2px; } .up-img-area { color: var(--sic-danger) !important; } .down-img { width: 20px; height: 15px; } .down-img-area { color: var(--sic-success) !important; } .popularity-img { width: 15px; height: 15px; margin-bottom: 5px; } .chart-area { width: 140px; background-color: var(--sic-chart-bg); } .chart-message { position: absolute; } .chart-message-text { -webkit-transform: scale(0.75); font-size: 9px; display: inline-block; color: var(--chart-message-color); } .read-more-area { left: 0px; z-index: 99; background: linear-gradient(180deg, var(--gradient-start), var(--gradient-end)); width: 100%; } .read-more-area:hover { cursor: pointer; } .read-more-text { display: block; font-size: 20px; text-align: center; font-weight: bold; } .chain-card { max-width: 370px; min-width: 370px; margin: 5px; border-radius: 0.5rem 0.5rem 0.25rem 0.25rem; background-color: var(--chain-card-bg)!important; } .chain-card:hover { background-color: var(--sic-card-hover) !important; } .popularity-text { font-size: 12px; color: var(--sic-text); } .good-text { font-size: 12px; color: var(--sic-white); } .updown-text { color: var(--sic-text); } .text-black { color: var(--sic-text); } .td-fcolor-red { color: var(--sic-danger); font-weight: bold; } .td-fcolor-green { color: var(--sic-success); font-weight: bold; } .td-fcolor-white { color: var(--sic-white); font-weight: bold; } .td-bcolor-green { background-color: var(--sic-success) !important; } .td-bcolor-red { background-color: var(--sic-danger) !important; } .td-fcolor-orange { color: var(--sic-warning); font-weight: bold; } .parent-name { color: var(--parent-name-color) !important; padding-left: 5px; } .chain-tree-window { position: fixed; top: 135px; left: 6px; background-color: var(--sic-panel-bg); border: 1px solid var(--sic-border-1); box-shadow: 2px 2px 5px var(--sic-shadow); width: 300px; height: 700px; z-index: 9999; } .chain-tree-header { background-color: var(--sic-panel-bg); padding: 10px; border-bottom: 1px solid var(--sic-border-1); } .chain-tree-title { margin: 0; color: var(--sic-text); } .close-chain-tree-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .close-chain-tree-btn:hover { color: var(--sic-danger); } .close-chain-img { width: 15px; height: 15px; filter: var(--filter); } .chain-tree-body { overflow: auto; height: 650px; } @media screen and (max-width: 390px) { .chainArticle-table .box1 { margin-right: -10px; margin-left: -10px; } } .reply-text { color: var(--sic-text); font-size: 12px; } .loading { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; color: var(--loading-color); } #TreeMapArea { position: relative; } .jstree-hovered { background: var(--jstree-hover-bg) !important; } .jstree-clicked { background: var(--jstree-clicked-bg) !important; } .chainLoading, .newsLoding, .tradeTableLoding, .chainCardChartLoading { filter: invert(1); width: 150px; height: 150px; } .chainLoading { width: 150px; height: 150px; } .newsLoding, .tradeTableLoding, .chainCardChartLoading { width: 30px; height: 30px; } .text-orange-500 { --tw-text-opacity: 1; color: rgb(249 115 22 / var(--tw-text-opacity)); width: 1rem; height: 1rem; margin-right: .25rem; }