/* YoutubeTrackingLog.css — 日/夜主題變數化（前綴 --ytl- 避免全域衝突） 使用：預設為 light，於 啟用 dark 覆寫 */ /* ----------------------------- Theme variables ----------------------------- */ :root { /* 以 --ytl- 前綴避免與其他檔案衝突 */ --ytl-text: #111827; --ytl-heading-color: #111827; --ytl-link-color: inherit; /* 區塊 / 卡片 背景 */ --ytl-box-bg: #ffffff; /* 用於 .box3, .box4 等 */ --ytl-card-bg: #ffffff; /* 用於 video-card-body */ --ytl-panel-bg: #ffffff; /* read-more 漸層 */ --ytl-gradient-start: rgba(255,255,255,0); --ytl-gradient-end: #ffffff; /* 其他小元件 */ --ytl-popularity-img-filter: invert(0); --ytl-option-img-color: inherit; /* 邊界/最小值等 */ --ytl-min-width: 300px; } /* 深色覆寫（在 啟用） */ [data-theme="dark"] { --ytl-text: #e5e5e5; --ytl-heading-color: #ffffff; --ytl-link-color: inherit; --ytl-box-bg: #000000; --ytl-card-bg: #0b0b0b; --ytl-panel-bg: #000000; --ytl-gradient-start: rgba(0,0,0,0); --ytl-gradient-end: #0b0b0b; --ytl-popularity-img-filter: invert(1); --ytl-option-img-color: var(--ytl-text); --ytl-min-width: 300px; } /* ----------------------------- Styles (使用變數) ----------------------------- */ body { color: var(--ytl-text); } .table, thead, tbody, tfoot, tr, td, th { padding: 0px !important; display: block; min-width: var(--ytl-min-width); } .box3, .box4 { background-color: var(--ytl-box-bg); } a { text-decoration: unset; color: var(--ytl-link-color); } .illustrate { white-space: pre-line !important; } h1 { color: var(--ytl-heading-color); } .create-icon-div { width: 50px; height: 50px; left: 10px; /* position: fixed; bottom: 10px; right: 10px; */ } .create-icon-img { width: 50px; height: 50px; } .personal-img { width: 50px; height: 50px; } .video-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 25px; grid-auto-rows: 60px; } .video-wrapper .box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: 2; } .video-wrapper .box2 { grid-column-start: 1; grid-row-start: 1; /* grid-row-end: 3; */ font-size: 15px; padding-right: 18px; } .video-wrapper .box2 p { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 3; /*行數*/ -webkit-box-orient: vertical; white-space: normal; } .video-wrapper .box3 { grid-column-start: 1; grid-row-start: 2; } .video-wrapper .box4 { grid-column-start: 1; grid-row-start: 3; } .video-wrapper .box6 { grid-column-start: 1; grid-row-start: 3; } .video-wrapper.box5 img { width: 100%; max-width: 800px; max-height: 800px; } .video-wrapper.box5 .media { display: block !important; max-width: 800px; max-height: 800px; } .video-container iframe { width: 100%; } .stock-news-area { position: relative; max-width: 1280px; margin-left: auto; margin-right: auto; } .popularity-img { width: 20px; height: 20px; margin-bottom: 5px; filter: var(--ytl-popularity-img-filter); } .popularity-img-area { /* position: absolute; right: 10px */ } /* 讀取更多區塊：改用變數控制漸層顏色 */ .read-more-area { left: 0px; z-index: 99; background: linear-gradient(180deg, var(--ytl-gradient-start), var(--ytl-gradient-end)); width: 100%; } .read-more-area:hover { cursor: pointer; } .read-more-text { display: block; font-size: 20px; text-align: center; font-weight: bold; } .option-img { width: 20px; height: 20px; color: var(--ytl-option-img-color); } .option-img-area { position: absolute; right: 0px; } /* bs gutter override 保留 */ #YT-table-tbody { --bs-gutter-x: 0rem !important; } /* 影片卡片：改為變數控制背景 */ .video-card-body { background-color: var(--ytl-card-bg); width: 390px; margin: 5px; position: relative; }