承接， * 這裡把原本 body.kl-tools 的樣式補到該 div 上，視覺與舊站一致。 * 需在 tools.css 之後載入。 * ===================================================================== */ /* 沒有 body.kl-tools 就吃不到 margin:0，會在頁首四周露出瀏覽器預設的 8px 空白 */ body { margin: 0; padding: 0; } /* 原 body.kl-tools 的樣式，改掛在 ToolShell / 清單頁的外層 div */ .kl-tools { font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; color: var(--kl-ink); background-image: url('/legacy/images/default_bg_1920x1080.jpg'); background-size: cover; background-attachment: fixed; background-position: center; min-height: 100vh; } /* ---------- 年度資料標示（勞健保等逐年公告的工具用） ---------- */ .kl-year-note { background: #fdf6ec; border: 1px solid #efdcc2; border-left: 4px solid var(--kl-accent); border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; font-size: 14px; color: var(--kl-ink); letter-spacing: .5px; } .kl-year-note b { color: var(--kl-accent); } .kl-year-note .kl-year-sub { margin-top: 6px; font-size: 13px; color: var(--kl-muted); line-height: 1.7; letter-spacing: 0; } /* ---------- 色票（圖片取色器） ---------- */ .kl-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 8px; } .kl-swatch { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--kl-line); border-radius: 12px; background: #fff; cursor: pointer; font-family: inherit; transition: transform .15s ease, box-shadow .15s ease; } .kl-swatch:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(32, 21, 14, .12); } .kl-swatch-chip { display: block; height: 46px; border-radius: 8px; border: 1px solid rgba(32, 21, 14, .08); } .kl-swatch-hex { font-family: 'Courier New', Consolas, monospace; font-size: 13px; color: var(--kl-ink); letter-spacing: .5px; } /* ---------- 頁首漢堡選單 ---------- */ /* 漢堡鈕預設隱藏，桌機用不到 */ .kl-nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1.5px solid #e6ddce; border-radius: 12px; background: #fff; color: var(--kl-accent); cursor: pointer; flex: 0 0 auto; } .kl-nav-toggle svg { width: 22px; height: 22px; } @media (max-width: 640px) { /* 舊站 .kl-topnav 是 flex-wrap:wrap，品牌區＋導覽塞不進窄螢幕會擠成多行。改成標準的漢堡選單：品牌靠左、漢堡靠右，選單點開後從頁首下方展開。 */ .kl-topbar { position: sticky; top: 0; z-index: 100; padding: 12px 16px; } .kl-topbar .kl-brand { flex: 1 1 auto; min-width: 0; } /* logo 與字體縮小，頁首不再過高 */ .kl-topbar .kl-brand img { height: 36px; } .kl-topbar .kl-brand .kl-brand-text { font-size: 16px; } .kl-topbar .kl-brand .kl-brand-text small { font-size: 10px; } .kl-nav-toggle { display: inline-flex; } /* 導覽收成下拉：預設隱藏，.open 才展開 */ .kl-topnav { position: absolute; top: 100%; margin-top: 6px; /* 讓開頁首下緣的 4px 白邊，選單不與頁首相黏 */ right: 12px; left: 12px; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; background: #fff; border: 1px solid #ece4d8; border-radius: 14px; box-shadow: 0 12px 30px rgba(32, 21, 14, 0.16); display: none; } .kl-topnav.open { display: flex; } .kl-topnav a { display: block; text-align: left; padding: 11px 14px; font-size: 15px; border-radius: 10px; } } @media (max-width: 360px) { .kl-topbar .kl-brand .kl-brand-text { font-size: 15px; } .kl-topbar .kl-brand img { height: 32px; } } /* ---------- 手機版頁尾 ---------- */ /* 原本在 375px 上高達 231px、佔掉 28% 的畫面。縮小留白與字級，免責聲明是法律用文字、不是主要內容，字級再降一級並收窄行距。 */ @media (max-width: 640px) { .kl-footer { padding: 20px 16px; font-size: 12px; letter-spacing: .5px; line-height: 1.7; } .kl-disclaimer { margin-top: 10px; padding: 10px 4px 0; font-size: 11px; line-height: 1.65; text-align: left; } } /* ---------- 關於鄺聯：聯絡列 ---------- */ /* 舊站這行沒有任何樣式規則，emoji 加全形分隔線在窄螢幕會折得很難看（「｜」孤零零留在行尾、電話被擠到下一行）。改用 flex 排版，手機直接分成兩行並隱藏分隔線。 */ .kl-contact-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; font-size: 14px; color: var(--kl-muted); } .kl-contact-item { display: inline-flex; align-items: center; gap: 6px; color: var(--kl-muted); text-decoration: none; } a.kl-contact-item:hover { color: var(--kl-accent); } .kl-contact-icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--kl-accent); } .kl-contact-sep { color: rgba(139, 123, 112, .45); } @media (max-width: 560px) { /* 窄螢幕改成一行一項，分隔線就沒有意義了 */ .kl-contact-line { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13px; } .kl-contact-sep { display: none; } /* 圖示配合縮小的字級，否則看起來比文字還搶眼 */ .kl-contact-icon { width: 14px; height: 14px; } } /* ---------- 頁尾兩行 ---------- */ .kl-footer-line { line-height: 1.9; } .kl-footer-sub { color: var(--kl-muted); } /* ---------- Regex 測試器 ---------- */ .kl-regex-preview { margin-top: 12px; padding: 14px 16px; background: #fbf8f4; border: 1px solid var(--kl-line); border-radius: 12px; font-family: 'Courier New', Consolas, monospace; font-size: 14px; line-height: 1.9; white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; } .kl-regex-hit { background: #ffe9c2; color: #7a4109; border-radius: 3px; padding: 1px 2px; } /* ---------- 電子簽名板 ---------- */ .kl-sign-wrap { margin-top: 10px; border: 2px dashed #d9cdbf; border-radius: 14px; background: repeating-linear-gradient(45deg, #fbf8f4 0 10px, #f5efe7 10px 20px); overflow: hidden; } .kl-sign-canvas { display: block; width: 100%; touch-action: none; /* 手機書寫時不要觸發頁面捲動 */ cursor: crosshair; } /* ---------- Favicon 產生器 ---------- */ .kl-fav-preview { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 8px; } .kl-fav-sizes { display: flex; align-items: flex-end; gap: 18px; } .kl-fav-sizes > div { text-align: center; } .kl-fav-sizes small { display: block; margin-top: 6px; font-size: 11px; color: var(--kl-muted); } /* ---------- CSS 漸層產生器 ---------- */ .kl-gradient-preview { height: 200px; border-radius: 16px; border: 1px solid var(--kl-line); } .kl-grad-stop { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .kl-grad-stop .kl-range { flex: 1 1 auto; } .kl-grad-pos { flex: 0 0 46px; text-align: right; font-size: 13px; color: var(--kl-muted); font-family: 'Courier New', Consolas, monospace; } /* ---------- 圖片取色器：縮放檢視 ---------- */ .kl-zoom-bar { display: inline-flex; align-items: center; gap: 8px; } .kl-zoom-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1.5px solid #e6ddce; border-radius: 9px; background: #fff; color: var(--kl-accent); cursor: pointer; transition: background .15s ease, border-color .15s ease; } .kl-zoom-btn:hover:not(:disabled) { background: #f7f1e8; border-color: #e0d3c0; } .kl-zoom-btn:disabled { opacity: .4; cursor: not-allowed; } .kl-zoom-btn svg { width: 16px; height: 16px; } .kl-zoom-val { min-width: 52px; text-align: center; font-size: 13px; font-family: 'Courier New', Consolas, monospace; color: var(--kl-muted); } /* 放大後靠原生捲軸平移；棋盤底色讓透明圖也看得清楚 */ .kl-zoom-wrap { margin-top: 10px; max-height: 460px; overflow: auto; border: 1px solid var(--kl-line); border-radius: 12px; background: linear-gradient(45deg, #f0ece6 25%, transparent 25%, transparent 75%, #f0ece6 75%), linear-gradient(45deg, #f0ece6 25%, #fbf8f4 25%, #fbf8f4 75%, #f0ece6 75%); background-size: 18px 18px; background-position: 0 0, 9px 9px; overscroll-behavior: contain; } .kl-zoom-img { display: block; max-width: none; /* 覆寫全站的 max-width:100%，放大才撐得開 */ height: auto; cursor: crosshair; image-rendering: pixelated; /* 放大時看得到像素邊界，取色更準 */ -webkit-user-select: none; user-select: none; } @media (max-width: 560px) { .kl-zoom-wrap { max-height: 320px; } .kl-zoom-bar { gap: 6px; } .kl-zoom-val { min-width: 44px; font-size: 12px; } } /* ---------- 取色器：拖曳游標 ---------- */ /* 只有放大到需要平移時才顯示可抓取的手勢，否則維持十字準心 */ .kl-zoom-img.pannable { cursor: grab; } .kl-zoom-img.panning { cursor: grabbing; } /* ---------- 取色器：取色紀錄 ---------- */ .kl-history { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .kl-history-item { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border: 1.5px solid var(--kl-line); border-radius: 999px; background: #fff; cursor: pointer; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; } .kl-history-item:hover { border-color: var(--kl-accent-soft); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(32, 21, 14, .1); } .kl-history-item.current { border-color: var(--kl-accent); box-shadow: 0 0 0 2px rgba(138, 76, 14, .16); } .kl-history-chip { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(32, 21, 14, .12); flex: 0 0 auto; } .kl-history-hex { font-family: 'Courier New', Consolas, monospace; font-size: 12.5px; color: var(--kl-ink); letter-spacing: .3px; }