/* HomeIndexStyle.css — 支援日/夜主題變數
使用方式：在 或 document.documentElement 設定 data-theme="dark" 即啟用深色變體
*/
/* ----------------------------- Theme variables ----------------------------- */
:root{
--text-color: #000000;
--link-color: #0366d6;
--accent-color: #004975; /* 原 sub-info 顏色 */
--muted-color: darkslategrey; /* update-message-title */
--img-radius: 5%;
--map-height: 500px;
/* table */
--table-border: #ddd;
--table-row-even: #f2f2f2;
--table-row-hover: #ddd;
--table-header-bg: #4CAF50;
--table-header-text: #ffffff;
/* theme switch */
--switch-bg: #ccc;
--switch-checked-bg: #2196F3;
--switch-knob: #ffffff;
--switch-icon-fill: #ffffff;
}
/* 深色覆寫 (在 啟用) */
[data-theme="dark"]{
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #ffffff;
--accent-color: #66b2ff;
--muted-color: #bdbdbd;
--img-radius: 5%;
--map-height: 500px;
--table-border: #333333;
--table-row-even: #1f1f1f;
--table-row-hover: #2a2a2a;
--table-header-bg: #2e7d32;
--table-header-text: #ffffff;
--switch-bg: #444444;
--switch-checked-bg: #1e88ff;
--switch-knob: #ffffff;
--switch-icon-fill: #ffffff;
}
/* ----------------------------- Base / layout ----------------------------- */
img {
max-width: 100%;
height: auto;
vertical-align: top;
border-radius: var(--img-radius);
}
/* ----------------------------- Home / Index specific ----------------------------- */
.sub-info {
font-weight: 600;
font-family: 'Poppins', sans-serif;
color: var(--accent-color);
}
.display-30 {
font-size: 0.9rem;
}
.map-area {
height: var(--map-height);
/* width: 370px; */
}
/* ----------------------------- Update table ----------------------------- */
#update-table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
color: var(--text-color);
background: transparent;
}
#update-table td, #update-table th {
border: 1px solid var(--table-border);
padding: 8px;
}
#update-table tr:nth-child(even) {
background-color: var(--table-row-even);
}
#update-table tr:hover {
background-color: var(--table-row-hover);
}
#update-table th {
text-align: left;
background-color: var(--table-header-bg);
color: var(--table-header-text);
}
/* ----------------------------- Qrcode / layout tweaks ----------------------------- */
.qrcode-area {
align-self: flex-start;
}
.qrcode-wrapper {
display: grid;
}
.qrcode-wrapper .box2 {
display: contents;
}
/* ----------------------------- Titles / texts ----------------------------- */
.update-message-title {
text-align: center;
font-weight: bold;
font-size: large;
color: var(--muted-color);
}
/* ----------------------------- Theme switch control ----------------------------- */
/* 主容器樣式 */
.theme-switch {
display: flex;
align-items: center;
gap: 8px;
}
/* 隱藏 checkbox */
.theme-switch input[type="checkbox"] {
display: none;
}
/* 滑動開關樣式 */
.theme-slider {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
background-color: var(--switch-bg);
border-radius: 34px;
cursor: pointer;
transition: background-color 0.2s;
}
/* 滑動開關內部圓球樣式 */
.theme-slider:before {
content: "";
position: absolute;
width: 26px;
height: 26px;
left: 4px;
bottom: 4px;
background-color: var(--switch-knob);
border-radius: 50%;
transition: transform 0.2s;
}
/* 滑動開關選中狀態樣式 (限定在 .theme-switch 範圍) */
.theme-switch input[type="checkbox"]:checked + .theme-slider {
background-color: var(--switch-checked-bg);
}
.theme-switch input[type="checkbox"]:checked + .theme-slider:before {
transform: translateX(26px);
}
/* 小太陽和小月亮圖示樣式 */
.sun-icon,
.moon-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
fill: var(--switch-icon-fill);
pointer-events: none;
}
.sun-icon {
left: 8px;
}
.moon-icon {
right: 8px;
}