/* ComponentStyleSheet.css — 加入日/夜主題變數並以變數替換顏色 啟用深色： 或 document.documentElement.setAttribute('data-theme','dark') */ /* ----------------------------- Theme variables ----------------------------- */ :root{ --color-text: #000000; --color-link: #0366d6; --color-white: #ffffff; --color-black: #000000; /* buttons */ --btn-text: #ffffff; --btn-success-bg: #10bc98; --btn-success-shadow: #0c8d72; --btn-success-hover: #13d7ae; --btn-success-active: #0fae8d; --btn-lightgreen-bg: #87bc58; --btn-lightgreen-shadow: #6ea140; --btn-lightgreen-hover: #c0da82; --btn-lightgreen-active: #7fb84d; --btn-warning-bg: #e77e22; --btn-warning-shadow: #c16515; --btn-warning-hover: #f6b417; --btn-warning-active: #dd7418; --btn-info-bg: #3cbce1; --btn-info-shadow: #1fa4cb; --btn-info-hover: #56d7ed; --btn-info-active: #2fb7df; --btn-purple-bg: #9a59b5; --btn-purple-shadow: #7f4497; --btn-purple-hover: #c472e6; --btn-purple-active: #944fb0; --btn-yellow-bg: #fac75a; --btn-yellow-shadow: #f9b629; --btn-yellow-hover: #fce17a; --btn-yellow-active: #fac24b; --btn-grey-bg: #4c4c4c; --btn-grey-shadow: #333333; --btn-grey-hover: #747373; --btn-grey-active: #444444; --btn-danger-bg: #e84c3d; --btn-danger-shadow: #d82a1a; --btn-danger-hover: #f57b8a; --btn-danger-active: #e63b2b; --btn-darkblue-bg: #34495e; --btn-darkblue-hover: #425c77; --btn-darkblue-active: #2f4154; /* tags */ --tag-bg: #fafafa; --tag-border: #d9d9d9; --tag-text: rgba(0,0,0,0.85); /* main panels / misc */ --card-bg: #ffffff; --border-1: #d9d9d9; --border-2: #ccc; --muted: #999999; /* tooltip / popper */ --tooltip-bg: #FFC107; --tooltip-text: #000000; --tooltip-style5-bg: #1E252B; --tooltip-style5-text: #FFFFFF; /* calendar / badges / small chips */ --calendar-bg: #ff0034; --calendar-text: #ffff00; --calendar-meeting-bg: #000000; --calendar-meeting-text: #ffff00; --calendar-dividend-bg: #008000; --calendar-dividend-text: #ffff00; --calendar-diff-bg: antiquewhite; --calendar-diff-text: brown; --chain-span-bg: #ff0034; --chain-span-text: #ffffff; --stocknews-bg: #000; --stocknews-color: #ff0000; --stocknews2-bg: #ff0000; --stocknews2-color: #ffffff; --video-span-bg: #ff0034; --video-span-text: #ffffff; --recommand-border: #ffa500; --recommand-color: #ff0000; --recommand-bg: #feff00; --top-span-border: #ffa500; --top-span-bg: #feff00; --top-span-color: #ff0000; --transparent-opacity: 0.5; --time-span-color: gray; --consecutive-red-border: red; --consecutive-red-color: red; --consecutive-green-border: green; --consecutive-green-color: green; --consecutive-orange-border: orange; --consecutive-orange-color: orange; /* suggestion / modal */ --suggestion-border: #ccc; --suggestion-bg: #ffffff; --suggestion-hover: #ddd; --modal-content-bg: #fefefe; --modal-border: #888; --modal-overlay: rgba(0,0,0,0.4); --last-message-color: gray; --unread-bg: #ff5a5f; --window-border: #ccc; --window-shadow: rgba(0,0,0,0.3); } /* Dark theme overrides */ [data-theme="dark"]{ --color-text: #e5e5e5; --color-link: #66b2ff; --color-white: #ffffff; --color-black: #000000; --btn-text: #ffffff; --btn-success-bg: #0f8f6f; --btn-success-shadow: #0c6b56; --btn-success-hover: #13d7ae; --btn-success-active: #0a7f62; --btn-lightgreen-bg: #7aa544; --btn-lightgreen-shadow: #5c8533; --btn-lightgreen-hover: #a7c76a; --btn-lightgreen-active: #68943f; --btn-warning-bg: #d46a14; --btn-warning-shadow: #a64f0f; --btn-warning-hover: #f6b417; --btn-warning-active: #c85a09; --btn-info-bg: #2f9fbf; --btn-info-shadow: #1b8fb0; --btn-info-hover: #56d7ed; --btn-info-active: #237f99; --btn-purple-bg: #7a3f8b; --btn-purple-shadow: #5f2f6d; --btn-purple-hover: #a05bbf; --btn-purple-active: #6b398d; --btn-yellow-bg: #d6a84a; --btn-yellow-shadow: #c08f32; --btn-yellow-hover: #efd27a; --btn-yellow-active: #c79939; --btn-grey-bg: #333333; --btn-grey-shadow: #222222; --btn-grey-hover: #555555; --btn-grey-active: #444444; --btn-danger-bg: #b83b36; --btn-danger-shadow: #8f251e; --btn-danger-hover: #f57b8a; --btn-danger-active: #b02a25; --btn-darkblue-bg: #223044; --btn-darkblue-hover: #2f4154; --btn-darkblue-active: #1b2a34; --tag-bg: #2a2a2a; --tag-border: #3b3b3b; --tag-text: #e6e6e6; --card-bg: #232323; --border-1: #444; --border-2: #666; --muted: #999; --tooltip-bg: #9f7b00; --tooltip-text: #000; --tooltip-style5-bg: #121619; --tooltip-style5-text: #fff; --calendar-bg: #ff6b6b; --calendar-text: #fff; --calendar-meeting-bg: #000; --calendar-meeting-text: #fff; --calendar-dividend-bg: #2e7a2e; --calendar-dividend-text: #fff; --calendar-diff-bg: #3a3a3a; --calendar-diff-text: #ddd; --chain-span-bg: #ff4464; --chain-span-text: #fff; --stocknews-bg: #000; --stocknews-color: #ff6b6b; --stocknews2-bg: #ff6b6b; --stocknews2-color: #fff; --video-span-bg: #ff4464; --video-span-text: #fff; --recommand-border: #aa7a00; --recommand-color: #ff6b6b; --recommand-bg: #ffe066; --top-span-border: #aa7a00; --top-span-bg: #ffe066; --top-span-color: #ff6b6b; --transparent-opacity: 0.5; --time-span-color: #bbb; --suggestion-border: #444; --suggestion-bg: #2b2b2b; --suggestion-hover: #333; --modal-content-bg: #1f1f1f; --modal-border: #666; --last-message-color: #999; --unread-bg: #ff5a5f; --window-border: #444; --window-shadow: rgba(0,0,0,0.5); } /* ----------------------------- Original rules (colors replaced with variables) ----------------------------- */ .btn { border: 2px solid transparent; box-sizing: border-box; cursor: pointer; font-size: 1rem; font-weight: 700; line-height: 1; margin: 3px; text-align: center; text-decoration: none; display: inline-block; outline: none; position: relative; top: 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); transition: all 0.2s ease-in-out 0s; color: var(--color-text); } /* green button */ .green { background: var(--btn-success-bg); color: var(--btn-text); box-shadow: 0 3px 0 var(--btn-success-shadow); } .green:hover { background: var(--btn-success-hover); } .green:active, .green:focus { background: var(--btn-success-active); } /* light green */ .light-green { background: var(--btn-lightgreen-bg) !important; color: var(--btn-text) !important; box-shadow: 0 3px 0 var(--btn-lightgreen-shadow); } .light-green:hover { background: var(--btn-lightgreen-hover) !important; } .light-green:active, .light-green:focus { background: var(--btn-lightgreen-active) !important; } /* orange / warning */ .orange { background: var(--btn-warning-bg); color: var(--btn-text); box-shadow: 0 3px 0 var(--btn-warning-shadow); } .orange:hover { background: var(--btn-warning-hover); } .orange:active, .orange:focus { background: var(--btn-warning-active); } /* blue */ .blue { background: var(--btn-info-bg); color: var(--btn-text); box-shadow: 0 3px 0 var(--btn-info-shadow); } .blue:hover { background: var(--btn-info-hover); } .blue:active, .blue:focus { background: var(--btn-info-active); } /* purple */ .purple { background: var(--btn-purple-bg); color: var(--btn-text); box-shadow: 0 3px 0 var(--btn-purple-shadow); } .purple:hover { background: var(--btn-purple-hover); } .purple:active, .purple:focus { background: var(--btn-purple-active); } /* yellow */ .yellow { background: var(--btn-yellow-bg); color: var(--btn-text); box-shadow: 0 3px 0 var(--btn-yellow-shadow); } .yellow:hover { background: var(--btn-yellow-hover); } .yellow:active, .yellow:focus { background: var(--btn-yellow-active); } /* grey */ .grey { background: var(--btn-grey-bg); color: var(--btn-text); box-shadow: 0 3px 0 var(--btn-grey-shadow); } .grey:hover { background: var(--btn-grey-hover); } .grey:active, .grey:focus { background: var(--btn-grey-active); } /* red */ .red { background: var(--btn-danger-bg); color: var(--btn-text); box-shadow: 0 3px 0 var(--btn-danger-shadow); } .red:hover { background: var(--btn-danger-hover); } .red:active, .red:focus { background: var(--btn-danger-active); } /* dark-blue */ .dark-blue { background: var(--btn-darkblue-bg); color: var(--btn-text); } .dark-blue:hover { background: var(--btn-darkblue-hover); } .dark-blue:active, .dark-blue:focus { background: var(--btn-darkblue-active); } /* ash-grey */ .ash-grey { background: var(--ash-grey-bg, #bec3c7); color: var(--btn-text); box-shadow: 0 3px 0 var(--ash-grey-shadow, #a3aaaf); } .ash-grey:hover { background: var(--ash-grey-hover, #d0d5d9); } .ash-grey:active, .ash-grey:focus { background: var(--ash-grey-active, #b0b6bb); } .rounded { border-radius: 5px; } .full-rounded { border-radius: 20em; } /* tags */ .el-tag { box-sizing: border-box; color: var(--tag-text); font-variant: tabular-nums; list-style: none; font-feature-settings: "tnum"; display: inline-block; height: auto; padding: 0 7px; font-size: 14px; line-height: 20px; white-space: nowrap; background: var(--tag-bg); border: 1px solid var(--tag-border); border-radius: 2px; opacity: 1; transition: all .3s; transform: scale(0.75); } .el-tag-2 { box-sizing: border-box; color: var(--tag-text); display: inline-block; height: auto; padding: 0 7px; font-size: 9px; line-height: 20px; background: var(--tag-bg); border: 1px solid var(--tag-border); border-radius: 2px; opacity: 1; transition: all .3s; } .el-tag-green { color: #389e0d; background: #f6ffed; border-color: #b7eb8f; } .el-tag-volcano { color: #d4380d; background: #fff2e8; border-color: #ffbb96; } .el-tag-black { color: black; background: var(--color-white); border-color: rgba(0,0,0,0.5); } /* basic button (legacy) */ .button { display: inline-block; padding: 15px 25px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: var(--btn-text); background-color: var(--btn-success-bg); border: none; border-radius: 15px; box-shadow: 0 9px #999; } .button:hover { background-color: var(--btn-success-active); } .button:active { background-color: var(--btn-success-active); box-shadow: 0 5px #666; transform: translateY(4px); } .fc-scrollgrid-sync-table { min-height: 500px; } .fc-view-harness { min-height: 550px; } /* popper / tooltip */ .popper, .tooltip { position: absolute !important; z-index: 9999; background: var(--tooltip-bg); color: var(--tooltip-text); width: 150px; border-radius: 3px; box-shadow: 0 0 2px rgba(0,0,0,0.5); padding: 10px; text-align: center; opacity: 1 !important; white-space: break-spaces; } .style5 .tooltip { background: var(--tooltip-style5-bg); color: var(--tooltip-style5-text); max-width: 200px; width: auto; font-size: .8rem; padding: .5em 1em; } .popper .popper__arrow, .tooltip .tooltip-arrow { width: 0; height: 0; border-style: solid; position: absolute !important; margin: 5px; } .tooltip .tooltip-arrow, .popper .popper__arrow { border-color: var(--tooltip-bg); } .style5 .tooltip .tooltip-arrow { border-color: var(--tooltip-style5-bg); } /* BlueButton / gradient values (kept as-is but colors via variables) */ .BlueButton { border-top: 1px solid #96d1f8; background: linear-gradient(to bottom, #3e5e9c, #65a9d7); padding: 5.5px 10px; border-radius: 9px; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: var(--color-white); font-size: 14px; font-family: Georgia, Serif; text-decoration: none; vertical-align: middle; margin: 5px !important; } .BlueButton:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } .BlueButton:active { border-top-color: #1b435e; background: #1b435e; } /* chartButton same as BlueButton but smaller padding/font */ .chartButton { border-top: 1px solid #96d1f8; background: linear-gradient(to bottom, #3e5e9c, #65a9d7); padding: 3.5px 5px; border-radius: 9px; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: var(--color-white); font-size: 10px; font-family: Georgia, Serif; margin: 3px; cursor: pointer; } .chartButton:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } .chartButton:active { border-top-color: #1b435e; background: #1b435e; } /* calendar / badges */ .calendar-span { font-size: 9px; transform: scale(0.75); display: inline-block; position: relative; text-align: center; background-color: var(--calendar-bg); color: var(--calendar-text); border-radius: 10%; } .meeting-calendar-span { font-size: 9px; transform: scale(0.75); display: inline-block; position: relative; text-align: center; background-color: var(--calendar-meeting-bg); color: var(--calendar-meeting-text); border-radius: 10%; } .dividend-calendar-span { font-size: 9px; transform: scale(0.75); display: inline-block; text-align: center; background-color: var(--calendar-dividend-bg); color: var(--calendar-dividend-text); border-radius: 10%; } .calendar-diffday-span { font-size: 9px; transform: scale(0.75); display: inline-block; text-align: center; background-color: var(--calendar-diff-bg); color: var(--calendar-diff-text); border-radius: 10%; width: 32px; } /* contraction / chain / news indicators */ .contraction-area { position: relative; min-width: 60px; display: block; text-decoration: unset; } .contraction-span { min-width: 50px; max-width: 80px; color: var(--color-text); padding-top: 8px; display: block; } .chain-span { font-size: 9px; transform: scale(0.75); display: inline-block; width: 25px; text-align: center; background-color: var(--chain-span-bg); color: var(--chain-span-text); border-radius: 10%; } .stockNewsSpan { font-size: 9px; transform: scale(0.75); display: inline-block; text-align: center; background-color: var(--stocknews-bg); color: var(--stocknews-color); border-radius: 10%; font-weight: bold; min-width: 32px; } .stockNewsSpan2 { font-size: 9px; transform: scale(0.75); display: inline-block; width: 25px; text-align: center; background-color: var(--stocknews2-bg); color: var(--stocknews2-color); border-radius: 10%; } /* other layout */ .time-span { transform: scale(0.75); font-size: 9px; display: inline-block; color: var(--time-span-color); } .replay-area { text-decoration: none; color: lightseagreen; font-size: 25px; font-weight: bold; } .replay-img { width: 40px;filter:var(--filter); } .consecutive-red { border: 1px solid var(--consecutive-red-border); color: var(--consecutive-red-color); } .consecutive-green { border: 1px solid var(--consecutive-green-border); color: var(--consecutive-green-color); } .consecutive-orange { border: 1px solid var(--consecutive-orange-border); color: var(--consecutive-orange-color); } .video-span { font-size: 9px; transform: scale(0.75); display: inline-block; width: 25px; text-align: center; background-color: var(--video-span-bg); color: var(--video-span-text); border-radius: 10%; } /* recommand / top spans */ .recommand-span { display: inline-block; width: 15px; height: 15px; font-size: 12px; text-align: center; line-height: 15px; border: 1px solid var(--recommand-border); color: var(--recommand-color); font-weight: bold; background-color: var(--recommand-bg); } .top1-span, .top2-span, .top3-span { display: inline-block; width: 35px; height: 15px; font-size: 12px; text-align: center; line-height: 15px; border: 1px solid var(--top-span-border); color: var(--top-span-color); font-weight: bold; background-color: var(--top-span-bg); } .transparent-area { opacity: var(--transparent-opacity); } /* zoom */ .zoom { width: 100%; } .zoom img { width: auto; } /* small fixes retained from original file */ .el-tag-green, .el-tag-volcano { /* keep original color details if needed */ } .chain-area { height: 15px; position: relative; display: block; /* margin-bottom: 5px;*/ min-width: 65px; /* top:-8px;*/ } .chain-img-area { position: relative; display: inline-block; width: 32px; } .chain-img { width: 10px; height: 10px; left: 16px; position: relative; /* bottom: 2px;*/ } .video-area { height: 15px; position: relative; display: block; margin-bottom: 5px; min-width: 65px; /* top:-8px;*/ } .video-img-area { position: relative; display: inline-block; width: 32px; } .video-img { width: 10px; height: 10px; left: 16px; position: relative; /* bottom: 2px;*/ } .video-span { font-size: 9px; -webkit-transform: scale(0.75); display: inline-block; /*position: absolute;*/ left: 0px; /* top: -10px; */ width: 25px; text-align: center; background-color: #ff0034; color: white; border-radius: 10%; }