/* 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: #000000; --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); --discuss-text-container-bg: #ffffff; } /* ----------------------------- 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); --discuss-text-container-bg: #1a1a1a; } /* ----------------------------- Styles (使用變數替換顏色) ----------------------------- */ h1 { margin-bottom: 0 !important; } .box3 p { color: var(--discuss-muted); } .box2 p { color: var(--discuss-strong-text); font-weight: 700; font-size: medium; } /* ========== Header Styles ========== */ .discuss-header { background-color: var(--discuss-header-bg); padding: 1rem 0; border-bottom: 1px solid var(--border-1, #d9d9d9); } .discuss-header__title { max-width: 1280px; margin: 0 auto; padding: 0 var(--bs-gutter-x, 0.75rem); } .discuss-header__heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0; } .discuss-header__create-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0.25rem; border-radius: 50%; transition: transform 0.2s ease, background-color 0.2s ease; } .discuss-header__create-link:hover { transform: scale(1.1); background-color: rgba(0, 0, 0, 0.05); } [data-theme="dark"] .discuss-header__create-link:hover { background-color: rgba(255, 255, 255, 0.1); } .discuss-header__create-icon { width: 40px; height: 40px; display: block; } .discuss-header__text { font-size: 1.5rem; font-weight: 600; color: var(--discuss-title-color); } /* ========== Sort Toolbar Styles ========== */ .discuss-sort-toolbar { background-color: var(--discuss-header-bg); padding: 0.75rem var(--bs-gutter-x, 0.75rem); border-bottom: 1px solid var(--border-1, #d9d9d9); margin-bottom: 1rem; } .discuss-sort-buttons { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .discuss-sort-btn { padding: 0.5rem 1rem; border: 1px solid var(--border-1, #d9d9d9); background-color: var(--discuss-bg); color: var(--discuss-text); font-weight: 500; border-radius: 0.375rem; transition: all 0.2s ease; white-space: nowrap; cursor: pointer; } .discuss-sort-btn:hover { background-color: var(--btn-info-bg, #3cbce1); color: white; border-color: var(--btn-info-bg, #3cbce1); transform: translateY(-2px); } .discuss-sort-btn:active, .discuss-sort-btn[aria-pressed="true"], .discuss-sort-btn.active { background-color: var(--btn-info-shadow, #1fa4cb); color: white; border-color: var(--btn-info-shadow, #1fa4cb); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); } /* 移除舊的重複樣式 */ /* ========== Main Container ========== */ #discuss-area { position: relative; max-width: 1280px; margin-left: auto; margin-right: auto; background-color: var(--discuss-bg); padding: 0 var(--bs-gutter-x, 0.75rem); } .discuss-list-wrapper { max-width: 1280px; margin: 0 auto; padding: 0 var(--bs-gutter-x, 0.75rem); } /* ========== Table Layout Styles ========== */ .personal-img { width: 40px; height: 40px; border-radius: 50%; background-size: cover; padding: 2px; border: outset 1px; margin: 5px 0; transition: transform 0.2s ease; } .personal-img:hover { transform: scale(1.05); } /* ========== Discussion Table Grid Layouts ========== */ .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: 10px; border-radius: 14px; gap: 8px; } .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); } /* ========== Image and Media Styles ========== */ .close-img { width: 15px; height: 15px; } [data-theme="dark"] .close-img { filter: invert(1); } .close-img-area { position: absolute; right: 5px; } .popularity-img { width: 20px; height: 20px; margin-bottom: 5px; display: block; } /* ========== Text Styles ========== */ ckeditor { -webkit-user-select: text; user-select: text; } .text-container { display: inline-block; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; position: relative; background: var(--discuss-text-container-bg); border-radius: 10px; margin: 2px; padding: 0.5rem; } .hidden-text { display: none; word-wrap: break-word; color: var(--discuss-strong-text); margin: 0 10px; } .text { height: auto; color: var(--discuss-strong-text); margin: 0 10px; } /* ========== Read More Styles ========== */ .read-more-area { left: 0; z-index: 99; background: linear-gradient(180deg, var(--gradient-start), var(--gradient-end)); width: 100%; cursor: pointer; transition: opacity 0.2s ease; } .read-more-area:hover { opacity: 0.8; } .read-more-text { display: block; font-size: 20px; text-align: center; font-weight: bold; color: var(--readmore-color) !important; padding: 1rem; } .read-more { font-size: 16px; cursor: pointer; color: var(--hyperlink-color) !important; transition: color 0.2s ease; } .read-more:hover { color: var(--readmore-color) !important; } /* ========== Discussion Video/Image Grids ========== */ .discuss-video-area { display: flex; height: 150px; gap: 5px; } .ck-image { width: 100%; height: auto; object-fit: cover; border-radius: 8px; cursor: pointer; transition: transform 0.2s ease; } .ck-image:hover { transform: scale(1.02); } .discuss-video-area2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 150px; gap: 8px; } .discuss-video-area2-1, .discuss-video-area2-2 { display: inline-block; width: 100%; height: 150px; } .discuss-video-area3 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 150px 150px; gap: 8px; } .discuss-video-area .ck-image, .discuss-video-area2 .ck-image, .discuss-video-area3 .ck-image { width: 100%; height: 100%; } /* ========== Video Container and Figure ========== */ .video-container { display: inline-block; width: 100%; } .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: 0.5rem 0; border-radius: 8px; } /* ========== Discussion Article Title ========== */ .discussArticleTitle { display: inline-block; color: var(--discuss-title-color) !important; font-size: large; font-weight: bold; transition: transform 0.2s ease; cursor: pointer; } .discussArticleTitle:hover { transform: scale(1.05); } /* ========== Zoomed Image Modal ========== */ .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 ease; 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 ease; position: absolute; user-drag: none; user-select: none; border-radius: 4px; } .zoomed-image img:active { cursor: grabbing; } /* 關閉按鈕樣式 */ .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); transition: all 0.2s ease; z-index: 100; } .close-btn:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); } /* 左右切換按鈕樣式 */ .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); transition: all 0.2s ease; z-index: 100; } .nav-btn:hover { transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); } .nav-btn--left { left: 20px; } .nav-btn--right { right: 20px; } .hyper-link { color: var(--hyperlink-color) !important; } /* ========== Modal Enhancements ========== */ .modal-content { border: none; border-radius: 0.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); background-color: var(--card-bg); } .modal-header { background-color: var(--discuss-header-bg); border-bottom: 1px solid var(--border-1, #d9d9d9); padding: 1rem 1.5rem; } .modal-title { font-weight: 600; color: var(--discuss-title-color); margin-bottom: 0; } .modal-body { padding: 1.5rem; color: var(--discuss-text); } .modal-footer { background-color: var(--discuss-header-bg); border-top: 1px solid var(--border-1, #d9d9d9); padding: 1rem 1.5rem; display: flex; gap: 0.5rem; justify-content: flex-end; } .modal-action-group { display: flex; flex-direction: column; gap: 0.75rem; } .modal-action-group .btn { padding: 0.75rem 1rem; font-weight: 500; border-radius: 0.375rem; transition: all 0.2s ease; } .modal-action-group .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-close { opacity: 0.5; transition: opacity 0.2s ease; } .btn-close:hover, .btn-close:focus { opacity: 1; } /* ========== Responsive Design ========== */ @media (max-width: 768px) { .discuss-header__text { font-size: 1.25rem; } .discuss-sort-buttons { gap: 0.25rem; } .discuss-sort-btn { flex: 1; min-width: 80px; padding: 0.4rem 0.6rem; font-size: 0.875rem; } .nav-btn { width: 36px; height: 36px; font-size: 18px; } .nav-btn--left { left: 10px; } .nav-btn--right { right: 10px; } .close-btn { width: 28px; height: 28px; font-size: 18px; top: 15px; right: 15px; } } @media (max-width: 576px) { .discuss-sort-buttons { flex-direction: column; } .discuss-sort-btn { width: 100%; } .modal-header, .modal-body, .modal-footer { padding: 0.75rem 1rem; } .modal-title { font-size: 1rem; } } /* ========== Icon Wrapper Styles ========== */ .discuss-stat-icon-wrapper { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.25rem; border-radius: 0.375rem; transition: all 0.2s ease; text-decoration: none; outline: none; } .discuss-stat-icon-wrapper:hover, .discuss-stat-icon-wrapper:focus { background-color: rgba(0, 0, 0, 0.05); transform: scale(1.1); } [data-theme="dark"] .discuss-stat-icon-wrapper:hover, [data-theme="dark"] .discuss-stat-icon-wrapper:focus { background-color: rgba(255, 255, 255, 0.1); } .discuss-stat-icon { width: 18px; height: 18px; display: block; transition: all 0.2s ease; } .stat-icon-fire { color: #ff6b6b; } .stat-icon-thumbsup { color: #ff6b6b; } .stat-icon-thumbsup[style*="currentColor"] { color: #ff6b6b; } .discuss-stat-icon-wrapper[data-liked="false"] .stat-icon-thumbsup { color: var(--muted); }