/* StockIndustryChainRelpyStyleSheet.css 新增日/夜主題變數（前綴 --sirc- 避免全域衝突） 使用：在 設定 data-theme="dark" 啟用深色 */ /* ----------------------------- Theme variables ----------------------------- */ /* 預設（淺色）*/ :root { --sirc-text: #111827; --sirc-heading-color: #111827; --sirc-table-text: #111827; --sirc-cyan: #00bcd4; --sirc-grayishBlue: rgba(158,192,253,0.15); --sirc-displayA-color: rgb(202,107,42); --sirc-hover-yellow: #ffeb3b; --sirc-displayC-text: #000000; --sirc-displayC-bg: #f3f4f6; --sirc-displayC-border: #000000; --sirc-displayT-color: #005097; --sirc-table-row-hover: #ffeb3b; --sirc-odd-bg: #f8fafc; --sirc-even-bg: #ffffff; --sirc-chart-bg: #f8fafc; --sirc-chart-message-color: gray; --sirc-details-window-bg: #ffffff; --sirc-details-header-bg: #f5f5f5; --sirc-details-body-bg: #ffffff; --sirc-details-text: #111827; --sirc-market-window-bg: #ffffff; --sirc-market-header-bg: #f8f9fa; --sirc-market-body-bg: #ffffff; --sirc-chain-list-bg: #f8f9fa; --sirc-chain-list-border-color: #ffffff; --sirc-chain-title-color: #000000; --sirc-update-message-color: #51482d; --sirc-discuss-header-title-color: #ffe69b; --sirc-loading-color: #999; --sirc-jstree-hover-bg: #f3f4f6; --sirc-jstree-clicked-bg: #354245; --sirc-border: #ccc; } /* 深色覆寫 */ [data-theme="dark"] { --sirc-text: #ffffff; --sirc-heading-color: #ffffff; --sirc-table-text: #ffffff; --sirc-cyan: #00bcd4; --sirc-grayishBlue: rgba(158,192,253,0.05); --sirc-displayA-color: rgb(202,107,42); --sirc-hover-yellow: #ffff00; --sirc-displayC-text: #000000; --sirc-displayC-bg: dimgrey; --sirc-displayC-border: #000000; --sirc-displayT-color: rgb(241,203,143); --sirc-table-row-hover: #ffff00; --sirc-odd-bg: #000000; --sirc-even-bg: #161616; --sirc-chart-bg: #141414; --sirc-chart-message-color: gray; --sirc-details-window-bg: #ffffff; --sirc-details-header-bg: #2f2f2f; --sirc-details-body-bg: #2f2f2f; --sirc-details-text: wheat; --sirc-market-window-bg: #ffffff; --sirc-market-header-bg: #000000; --sirc-market-body-bg: #000000; --sirc-chain-list-bg: #4b4b4b; --sirc-chain-list-border-color: #ffffff; --sirc-chain-title-color: #ffed8d; --sirc-update-message-color: #ffe69b; --sirc-discuss-header-title-color: #ffe69b; --sirc-loading-color: #999; --sirc-jstree-hover-bg: gray; --sirc-jstree-clicked-bg: #354245; --sirc-border: #ccc; } /* ----------------------------- Styles（使用變數） ----------------------------- */ .row { margin-right: 0px !important; } p { margin-bottom: 5px !important; } .table { padding-left: 0px !important; padding-right: 0px !important; color: var(--sirc-table-text); } th, td { /* padding:0px!important;*/ } h1 { color: var(--sirc-heading-color); } .cyan { border-top: 3px solid var(--sirc-cyan); } .box { border-radius: 5px; box-shadow: 0px 30px 40px -20px var(--sirc-grayishBlue); padding: 5px; margin: 5px; } div.upstream { height: 100%; min-height: 200px; } div.midstream { height: 100%; min-height: 200px; } div.downstream { height: 100%; min-height: 200px; } div.content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .create-icon-div { width: 50px; height: 50px; /* position: fixed; bottom: 10px; right: 10px;*/ } .create-icon-div2 { width: 25px; height: 25px; /* position: fixed; bottom: 10px; right: 10px;*/ } .create-icon-img { width: 30px; height: 30px; } .create-icon-img2 { width: 30px; height: 30px; } .personal-img { width: 50px; height: 50px; } .chain-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: 25px 25px 60px; grid-auto-rows: 100px; } .wrapper2 { display: grid; grid-template-columns: 50px 1fr; grid-template-rows: 25px 25px; grid-auto-rows: 75px; } .wrapper3 { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 25px; } .boxA1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: 2; } .boxA2 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 3; } /**/ .wrapper3 .box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: 3; } .wrapper3 .box2 { grid-column-start: 1; grid-row-start: 1; } .chain-wrapper .box2 { grid-column-start: 1; grid-row-start: 1; } .chain-wrapper .box2 p { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 3; /*行數*/ -webkit-box-orient: vertical; white-space: normal; } .chain-wrapper .box3 { grid-column-start: 1; grid-row-start: 2; } .chain-wrapper .box4 { grid-column-start: 1; grid-row-start: 3; } .wrapper4 .box2 { grid-column-start: 1; grid-row-start: 1; } .wrapper4 .box2 p { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 3; /*行數*/ -webkit-box-orient: vertical; white-space: normal; } .wrapper4 .box3 { grid-column-start: 1; grid-row-start: 2; } .wrapper4 .box4 { grid-column-start: 1; grid-row-start: 3; } .displayA { font-size: x-large; color: var(--sirc-displayA-color) !important; } .displayA:hover { background-color: var(--sirc-hover-yellow); } .displayB { } .displayB:hover { background-color: var(--sirc-hover-yellow); } .displayC { font-size: larger; color: var(--sirc-displayC-text) !important; margin-top: 1rem; position: relative; border: solid; background: var(--sirc-displayC-bg); border-color: var(--sirc-displayC-border); border-width: 1px; text-align: center; } .displayT { font-size: xx-large; color: var(--sirc-displayT-color) !important; } .delete-icon-img { width: 25px; height: 25px; } .group-list-box { max-width: 360px; } .text-big { font-size: 18px; } .close-img { width: 20px; height: 20px; } .close-img-area { position: absolute; right: 10px; } .option-img { width: 20px; height: 20px; } .option-img-area { position: absolute; right: 0px; } .stock-chain-area { position: relative; max-width: 1280px; margin-left: auto; margin-right: auto; } .popularity-img { width: 20px; height: 20px; /* margin-bottom: 10px*/ } .popularity-img-area { /* position: absolute; right: 10px*/ } #table_body tr:hover { background-color: var(--sirc-table-row-hover); } .income-summary { margin: 5px; max-width: 210px; } .changelog { overflow-y: auto; max-height: 200px; } .summary-chart { width: 360px; } .news-area { height: 500px; overflow: auto; } .display-text { color: inherit !important; } .display-text2 { color: inherit; } .display-header-text0 { width: 80px; display: inline; padding-left: 0px !important; padding-right: 0px !important; } .display-header-text1 { width: 45px; display: inline; padding-left: 0px !important; padding-right: 0px !important; } .display-header-text2 { width: 50px; display: inline; padding-left: 0px !important; padding-right: 0px !important; } .display-header-text3 { width: 50px; display: inline; padding-left: 0px !important; padding-right: 0px !important; } .display-header-text4 { width: 60px; display: inline; padding-left: 0px !important; padding-right: 0px !important; } .odd { background-color: var(--sirc-odd-bg); } .even { background-color: var(--sirc-even-bg); } .option-img { width: 20px; height: 20px; } .option-img-area { position: absolute; right: 0px; } .loading { display: inline; margin-left: 10px; z-index: 9999; } .loading img { width: 30px; height: 30px; } .chart-area { width: 100px; background-color: var(--sirc-chart-bg); } .chart-message { position: absolute; } .chart-message-text { -webkit-transform: scale(0.75); font-size: 9px; display: inline-block; color: var(--sirc-chart-message-color); } .info-img { width: 20px; height: 20px; padding: 1px; margin-bottom: 3px; } .details-window { display: none; width: 360px; height: auto; border: 1px solid var(--sirc-border); box-shadow: 0 0 10px var(--sirc-border); position: absolute; z-index: 99999; background-color: var(--sirc-details-window-bg); } .details-header { background-color: var(--sirc-details-header-bg); padding: 10px; border-bottom: 1px solid var(--sirc-border); } .close-details-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .details-body { background-color: var(--sirc-details-body-bg); overflow: auto; position: absolute; width: 100%; height: 500px; padding: 10px; border: solid; border-width: 1px; border-color: var(--sirc-border); color: var(--sirc-details-text); } .trade-table-area { padding-bottom: 5px; } .market-window { display: none; width: 360px; height: auto; border: 1px solid var(--sirc-border); box-shadow: 0 0 10px var(--sirc-border); position: absolute; z-index: 99999; background-color: var(--sirc-market-window-bg); } .market-header { background-color: var(--sirc-market-header-bg); padding: 10px; border-bottom: 1px solid var(--sirc-border); } .close-market-btn { float: right; border: none; background-color: transparent; cursor: pointer; } .market-body { background-color: var(--sirc-market-body-bg); overflow: auto; position: absolute; width: 100%; height: 500px; border: solid; border-width: 1px; border-color: var(--sirc-border); min-height: 500px; scrollbar-width: thin; } .chain-list-area { background: var(--sirc-chain-list-bg); padding: 10px; border-color: var(--sirc-chain-list-border-color); border: solid; } .chain-title-text { display: inline-block; color: var(--sirc-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(--sirc-update-message-color) !important; font-weight: bold; font-size: large; } .discuss-header-title { color: var(--sirc-discuss-header-title-color) !important; } .jstree-hovered { background: var(--sirc-jstree-hover-bg) !important; } .jstree-clicked { background: var(--sirc-jstree-clicked-bg) !important; }