/* DiscussStyleSheet.css — 加入日/夜主題變數並以變數替換顏色 使用方式：在 加上 data-theme="dark" 啟用深色（本檔已將深色值放在 [data-theme="dark"]）， 或用 JS 切換： document.documentElement.setAttribute('data-theme','dark'); */ /* ----------------------------- Theme variables (light defaults) ----------------------------- */ :root { --discuss-bg: #ffffff; --discuss-wrapper-bg: var(--discuss-bg); --discuss-header-bg: #f8f9fa; --discuss-text: #000000; --discuss-strong-text: #000000; --discuss-muted: #6c757d; --discuss-title-color: #f5d391; --readmore-color: #97c8f1; --hyperlink-color: #a9d7ff; --gradient-start: rgba(255,255,255,0); --gradient-end: #ffffff; --zoom-overlay: rgba(0, 0, 0, 0.8); --close-btn-bg: #ffffff; --close-btn-color: #000000; --nav-btn-bg: rgba(255, 255, 255, 0.8); --nav-btn-color: #000000; --muted: gray; --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } /* ----------------------------- Dark theme overrides ----------------------------- */ [data-theme="dark"] { --discuss-bg: #000000; --discuss-wrapper-bg: #000000; --discuss-header-bg: #000000; --discuss-text: #e5e5e5; --discuss-strong-text: #ffffff; --discuss-muted: #d9d8d8; --discuss-title-color: #f5d391; --readmore-color: #97c8f1; --hyperlink-color: #a9d7ff; --gradient-start: rgba(255,255,255,0); --gradient-end: #ffffff; --zoom-overlay: rgba(0, 0, 0, 0.8); --close-btn-bg: #ffffff; --close-btn-color: #000000; --nav-btn-bg: rgba(255, 255, 255, 0.8); --nav-btn-color: #000000; --muted: #999; --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } /* ----------------------------- Styles (使用變數替換顏色) ----------------------------- */ h1 { margin-bottom: 0px !important; } .box3 p { color: var(--discuss-muted); } .box2 p { color: var(--discuss-strong-text); font-weight: 700; font-size: medium; } .discuss-header { background-color: var(--discuss-header-bg); } .discuss-header2 { background-color: var(--discuss-header-bg); margin-bottom: 8px; } .discuss-table thead, tbody, tfoot, tr, td, th { padding: 0px !important; } .create-icon-div { width: 50px; height: 50px; left: 10px; } .create-icon-img { width: 40px; height: 40px; } .personal-img { width: 40px; height: 40px; border-radius: 50%; background-size: cover; padding: 2px; border: outset 1px; margin: 5px 0px 5px 0px; } .discuss-table .wrapper { display: grid; grid-template-columns: 100%; grid-template-rows: auto auto auto auto 25px 25px; grid-auto-rows: 100px; margin-bottom: 5px; background-color: var(--discuss-wrapper-bg); padding-right: 10px; padding-left: 10px; } .discuss-table .wrapper .box1 { grid-column-start: 1; grid-row-start: 2; } .discuss-table .wrapper .box2 { grid-column-start: 1; grid-row-start: 3; } .discuss-table .wrapper .box3 { grid-column-start: 1; grid-row-start: 4; font-size: 15px; flex-wrap: wrap; word-wrap: break-word; position: relative; } .discuss-table .wrapper .box3 .media { display: block !important; } .discuss-table .wrapper .box4 { grid-column-start: 1; grid-row-start: 5; } .discuss-table .wrapper .box5 { grid-column-start: 1; grid-row-start: 6; } .discuss-table .wrapper2 { display: grid; grid-template-columns: 50px calc(100% - 75px) 25px; grid-template-rows: auto; grid-auto-rows: 100px; } .discuss-table .wrapper2 .box1 { grid-column-start: 1; grid-row-start: 1; } .discuss-table .wrapper2 .box2 { grid-column-start: 2; grid-row-start: 1; } .discuss-table .wrapper2 .box3 { grid-column-start: 3; grid-row-start: 1; font-size: 15px; background-color: var(--discuss-bg) } .discuss-table .wrapper3 { display: grid; grid-template-rows: auto; } .discuss-table .wrapper3 .box1 { grid-row-start: 1; grid-column-start: 1; } .discuss-table .wrapper3 .box2 { grid-row-start: 2; grid-column-start: 1; font-size: smaller; color: var(--muted); } .close-img { width: 15px; height: 15px; filter: invert(1); } .close-img-area { position: absolute; right: 5px; } ckeditor { -webkit-user-select: text; user-select: text; } .popularity-img { width: 20px; height: 20px; margin-bottom: 5px; } .popularity-img-area { } #discuss-area { position: relative; max-width: 1280px; margin-left: auto; margin-right: auto; background-color: var(--discuss-bg); padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); } .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; } .read-more { font-size: 16px; cursor: pointer; color: var(--readmore-color) !important; } .text-container { overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; position: relative; margin-left: -10px; margin-right: -10px; } .hidden-text { display: none; word-wrap: break-word; color: var(--discuss-strong-text); margin: 0 10px 0 10px; } .text { height: auto; color: var(--discuss-strong-text); margin: 0 10px 0 10px; } /* 放大圖片 CSS */ .zoom { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--zoom-overlay); display: flex; justify-content: center; align-items: center; z-index: 9999; } .zoom img { max-width: 90%; max-height: 90%; } .discuss-video-area { display: flex; height: 150px; } .ck-image { width: 100%; height: auto; } .discuss-video-area2 { display: grid; grid-template-columns: 150px 150px; grid-template-rows: 150px; grid-gap: 2px; } .discuss-video-area2-1, .discuss-video-area2-2 { display: inline-block; width: 150px; height: 150px; margin: 5px; } .discuss-video-area3 { display: grid; grid-template-columns: 150px 150px; grid-template-rows: 150px 150px; grid-gap: 2px; } .discuss-video-area .ck-image, .discuss-video-area2 .ck-image, .discuss-video-area3 .ck-image { width: 100%; height: 100%; } .video-container { display: inline; } .discuss-video-area3-1, .discuss-video-area3-2, .discuss-video-area3-3, .discuss-video-area3-4 { display: inline-flex; width: 100%; height: 100%; } figure { display: flex; justify-content: center; align-items: center; overflow: hidden; margin-left: -10px; margin-right: -10px; } .discussArticleTitle { color: var(--discuss-title-color) !important; font-size: large; font-weight: bold; } /* 放大的圖片樣式 */ .zoomed-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--zoom-overlay); display: flex; justify-content: center; align-items: center; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s; overflow: hidden; z-index: 99999; } .zoomed-image.show { visibility: visible; opacity: 1; } .zoomed-image img { max-width: 90%; max-height: 90%; cursor: grab; transition: transform 0.3s; position: absolute; user-drag: none; user-select: none; } /* 關閉按鈕樣式 */ .close-btn { position: absolute; top: 20px; right: 20px; background: var(--close-btn-bg); border: none; border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 20px; font-weight: bold; color: var(--close-btn-color); box-shadow: var(--box-shadow); } /* 左右切換按鈕樣式 */ .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: var(--nav-btn-bg); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 20px; font-weight: bold; color: var(--nav-btn-color); box-shadow: var(--box-shadow); } .nav-btn.left { left: 20px; } .nav-btn.right { right: 20px; } .hyper-link { color: var(--hyperlink-color) !important; }