/* ============================================================================ Jason Tools — 共用設計系統風格與 jt-doc-tools 對齊：紫色漸層側欄、淺灰底、白卡片、藍色主色、8px 圓角。兩個站看起來要像同一套系統，所以設計 token 與元件尺寸都刻意逐字沿用。舊版每個工具頁各自帶一整份 CSS，同一顆「清除」按鈕在 26 個頁面有 26 種長相。這份檔案是唯一的視覺來源，工具頁只該補「這個工具獨有」的樣式。 ========================================================================== */ :root { --bg: #f5f6f8; --card: #ffffff; --border: #d9dde3; --text: #23272e; --muted: #6b7380; --primary: #2563eb; --primary-dark: #1d4ed8; --danger: #dc2626; --warning: #d97706; --success: #16a34a; --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04); --sidebar-w: 300px; --sidebar-from: #6366f1; --sidebar-to: #4f46e5; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono CJK TC", monospace; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } /** * 🔴 **日文介面要換字型堆疊，這不是美觀問題。** * * 中文與日文有一批**字形不同的漢字**（直・今・骨・者・海・類…）。 * 用 `Noto Sans TC` / `PingFang TC` / `Microsoft JhengHei` 渲染日文， * 那些字會長成中文的樣子 —— 日文使用者一眼就看得出「這頁不是給我看的」。 * * ⚠️ 只靠 `` 讓瀏覽器自己挑是不夠的：上面那三套**都宣稱支援** * 那些漢字，瀏覽器不會因為 lang 就跳過它們去找日文字型。要明確換掉。 * ⚠️ 不載任何網路字型 —— 站台零外部資源（見 tests/check-network.js）。 * 列的都是各平台本來就有的：macOS/iOS 的 Hiragino、Windows 的 Yu Gothic、 * Linux 的 Noto Sans JP / IPA。 */ :root[lang="ja"] body, html[lang="ja"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", "IPAexGothic", sans-serif; } /* 圖示：一律走 currentColor，按鈕改色時圖示自動跟著改 */ .ic { flex: none; vertical-align: -0.15em; } /** * `hidden` 屬性一律當作隱藏。 * * 瀏覽器預設的 `[hidden]{display:none}` 只是一條**元素選擇器**規則，任何 * class 寫的 `display:` 都比它強 —— `.sb-item{display:flex}` 讓搜尋的過濾完全失效、 * `.lang-menu{display:flex}` 讓語言選單一載入就開著、`.note{display:flex}` 讓 * 「節點數不足」的空警示常駐在畫面上。與其每次踩到再補一條，不如在這裡一次講清楚。 */ [hidden] { display: none !important; } /* ── 側邊欄 ───────────────────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: linear-gradient(180deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%); color: #f4f3ff; display: flex; flex-direction: column; z-index: 50; overflow: hidden; /* 捲動交給 .sidebar-scroll */ box-shadow: 4px 0 16px rgba(15, 23, 42, 0.18), 1px 0 0 rgba(0,0,0,0.08); } .sidebar-header { flex: 0 0 auto; padding: 18px 16px 14px; } /* 品牌列：logo 放在白色圓角磚上（設計圖），版本號在站名下方 */ .brand-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .brand-block { display: inline-flex; flex-direction: column; align-items: stretch; line-height: 1.15; } .sidebar-collapse { flex-shrink: 0; width: 30px; height: 30px; padding: 0; border: none; border-radius: 9px; background: rgba(255,255,255,0.16); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .sidebar-collapse:hover { background: rgba(255,255,255,0.22); } /* 收起後留在左緣的展開頁籤 */ .sidebar-expand { display: none; position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 60; width: 22px; height: 84px; padding: 0; border: none; border-radius: 0 8px 8px 0; background: var(--primary); color: #fff; font-size: 15px; cursor: pointer; box-shadow: 2px 0 8px rgba(0,0,0,0.18); } .sidebar-expand:hover { filter: brightness(1.12); width: 26px; } /* 收起狀態：側欄滑出畫面，內容占滿整個寬度 */ body.sidebar-collapsed .sidebar { transform: translateX(-100%); } body.sidebar-collapsed .content { margin-left: 0; } body.sidebar-collapsed .sidebar-expand { display: inline-flex; align-items: center; justify-content: center; } /** * 全螢幕模式（工具自己的「假全螢幕」，不是 Fullscreen API）。 * * 收掉外框，把整個視窗讓給工具。**規則放在共用層**，因為每支工具原本各寫一套， * 而且是對著舊 SPA 的 `.main-content` / `.content-body` 寫的：改成 MPA 之後 * 側欄雖然藏起來了，`.content` 的 `margin-left: var(--sidebar-w)` 還在， * 工具整塊被推出畫面右邊；`.container` 又留著舊主視覺的底色， * 結果是整片藍底加上被切掉的右半邊（2026-09-06 使用者回報）。 */ body.fullscreen-active .sidebar, body.fullscreen-active .sidebar-toggle, body.fullscreen-active .sidebar-expand, body.fullscreen-active .page-head { display: none !important; } body.fullscreen-active .content { margin-left: 0 !important; } /* 全螢幕的退出鈕：頁首被藏起來，全螢幕按鈕跟著不見，畫面上就沒有出口了。這顆固定在右上角，z-index 要壓過工具自己的固定列（weathermap 的分頁列是 10001）。 */ .jt-fs-exit { display: none; } body.fullscreen-active .jt-fs-exit { display: inline-flex; align-items: center; gap: 6px; position: fixed; top: 10px; right: 12px; z-index: 100001; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(15, 23, 42, .18); } body.fullscreen-active .jt-fs-exit:hover { background: #f1f5f9; border-color: #c7cdd6; } body.fullscreen-active .jt-fs-exit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (max-width: 900px) { body.fullscreen-active .jt-fs-exit { top: 8px; right: 8px; min-height: 34px; } } body.fullscreen-active .container { max-width: none !important; width: auto !important; margin: 0 !important; padding: 14px 16px 18px !important; background: var(--bg) !important; } .sidebar { transition: transform 0.18s ease; } .content { transition: margin-left 0.18s ease; } .brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; min-width: 0; } /* logo 放在白色圓角磚裡：深色側欄上直接放彩色 logo 會糊掉 */ .brand-logo { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; background: #fff; border-radius: 11px; padding: 5px; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18); } .brand-text { font-weight: 700; font-size: 16px; line-height: 1.2; word-break: keep-all; } .brand-version { display: block; font-size: 11.5px; line-height: 1; color: rgba(255,255,255,0.72); margin-top: 5px; } /* 特異性要壓過下面的 input[type=...] 通用規則（屬性選擇器 0,1,1 比單一 class 高），否則側欄搜尋框會被畫成白底白字，placeholder 直接消失。 */ /* 搜尋框：圖示以 background 方式放進左側，不必為它多包一層元素 */ .sidebar-search-wrap { position: relative; } .sidebar-search-wrap > .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.75); pointer-events: none; } .sidebar input.sidebar-search { width: 100%; padding: 7px 12px 7px 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.16); color: #fff; font-size: 13.5px; outline: none; font-family: inherit; } .sidebar input.sidebar-search::placeholder { color: rgba(255,255,255,0.7); } .sidebar input.sidebar-search:focus { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.6); } .sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: 12px 0 8px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; } .sidebar-scroll::-webkit-scrollbar { width: 6px; } .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 3px; } .sb-group { margin: 0 12px 8px 0; } /** * 分類標題**要比工具項目更深**，才看得出層級。 * 改版時一度把它調成淺色（rgba(255,255,255,0.12)），結果標題跟底下的項目 * 明度差不多，整條側欄變成一片同色的方塊，分不出哪裡是一組的開頭。 */ .sb-group > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 9px; padding: 11px 13px; font-size: 14.5px; font-weight: 600; color: #fff; border-radius: 11px; background: rgba(17, 17, 45, 0.38); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .sb-group > summary::-webkit-details-marker { display: none; } .sb-group > summary:hover { background: rgba(17, 17, 45, 0.52); } .sb-group > summary::after { content: ''; margin-left: auto; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.9; transition: transform 0.15s; } .sb-group:not([open]) > summary::after { transform: rotate(-90deg); } /* 字級 12px 是下限，不是美感選擇：check-mobile 以 12px 為界。這顆徽章原本 11px，一直沒被抓到 —— 掃描只看「超過一個字」的文字節點，而分類數量在系統工具長到 12 個之前都是個位數。 */ .sb-count { background: rgba(255,255,255,0.22); color: #fff; font-size: 12px; padding: 1px 8px; border-radius: 10px; font-weight: 600; line-height: 1.45; } .sb-items { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 8px; } .sb-item { display: flex; align-items: flex-start; gap: 11px; padding: 10px 11px; border-radius: 11px; background: rgba(255,255,255,0.10); color: #fff; text-decoration: none; transition: background 0.12s, transform 0.05s; border: 1px solid transparent; } /* 搜尋時用 `hidden` 屬性藏項目，但 `.sb-item` 自己宣告了 display:flex， class 選擇器比瀏覽器預設的 [hidden] 規則強 —— 不補這一條，搜尋等於沒有過濾（搜「ceph」整組系統工具 6 支全都留在畫面上，使用者 2026-09-06 回報）。 */ .sb-item[hidden], .sb-group[hidden] { display: none !important; } .sb-item:hover { background: rgba(255,255,255,0.20); } .sb-item:active { transform: translateY(1px); } .sb-item .tile { margin-top: 1px; } .sb-item-body { display: block; min-width: 0; } /* min-width:0 才截得斷長名稱 */ .sb-item-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; } .sb-item-desc { display: block; font-size: 12px; line-height: 1.4; margin-top: 3px; color: rgba(255,255,255,0.80); } /** * 語言切換：頁首右上角一顆鈕，緊鄰收折鈕。 * * 原本是搜尋框下面一個整行寬的的選單是作業系統畫的，Windows／macOS／Linux 各長一個樣， * 字級與圓角都跟不上這一套設計，深色底的頁面上尤其突兀。 * * 做法（實作在 js/layout.js 的 enhanceSelects）：