/* ClearNule LIFF v2 — design system * 3 themes via data-theme attr on : * "dark" (default) * "bright" * "gold" (black & gold) */ :root, [data-theme="dark"] { --bg: #0b1220; --bg-elev: #1e293b; --bg-sub: #111827; --text: #e2e8f0; --text-muted: #94a3b8; --border: #334155; --accent: #facc15; --accent-text: #1f2937; --danger: #ef4444; --success: #10b981; --warn: #f59e0b; --shadow: 0 4px 14px rgba(0,0,0,.5); } [data-theme="bright"] { --bg: #fdf2f8; --bg-elev: #ffffff; --bg-sub: #fce7f3; --text: #1f2937; --text-muted: #6b7280; --border: #e5e7eb; --accent: #ec4899; --accent-text: #ffffff; --danger: #dc2626; --success: #059669; --warn: #d97706; --shadow: 0 4px 14px rgba(0,0,0,.08); } [data-theme="gold"] { --bg: #0a0a0a; --bg-elev: #18181b; --bg-sub: #1c1917; --text: #fef3c7; --text-muted: #a8a29e; --border: #44403c; --accent: #d4a017; --accent-text: #0a0a0a; --danger: #ef4444; --success: #84cc16; --warn: #f59e0b; --shadow: 0 4px 14px rgba(0,0,0,.7); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--text); font:0.875rem/1.5 -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Noto Sans TC', sans-serif; -webkit-tap-highlight-color: transparent; } /* ── shell layout ─────────────────────────────────────── */ #liff-shell { display: flex; flex-direction: column; min-height: 100vh; } #liff-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border); } #liff-header .brand { font-weight: 700; font-size:0.9375rem; } #liff-header .spacer { flex: 1; } #liff-header .bell { position: relative; cursor: pointer; padding: 6px 8px; font-size:1.125rem; } #liff-header .bell .badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; background: var(--danger); color: #fff; font-size:0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } #liff-header .theme-btn { cursor: pointer; padding: 6px 8px; font-size:1rem; } /* ── user card ──────────────────────────────────────── */ .user-card { margin: 12px 14px; padding: 14px; background: var(--bg-elev); border-radius: 12px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; } .user-card .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size:1.25rem; font-weight: 700; } .user-card .meta .name { font-weight: 700; font-size:1rem; } .user-card .meta .sub { color: var(--text-muted); font-size:0.75rem; margin-top: 2px; } /* ── tab strip ──────────────────────────────────────── */ .tab-strip { display: flex; gap: 4px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; } .tab-strip::-webkit-scrollbar { display: none; } .tab-strip .tab { padding: 8px 14px; border-radius: 16px; background: var(--bg-elev); color: var(--text-muted); font-size:0.8125rem; cursor: pointer; white-space: nowrap; border: 1px solid var(--border); } .tab-strip .tab.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; } /* ── tile grid (launcher) ───────────────────────────── */ .tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; } .tile { background: var(--bg-elev); border-radius: 12px; padding: 16px 8px; text-align: center; cursor: pointer; border: 1px solid var(--border); transition: transform .12s; position: relative; } .tile:active { transform: scale(0.96); } .tile .icon { font-size:1.75rem; margin-bottom: 6px; } .tile .label { font-size:0.8125rem; font-weight: 600; } .tile .sub { font-size:0.6875rem; color: var(--text-muted); margin-top: 2px; } .tile .tile-badge { position: absolute; top: 6px; right: 6px; background: var(--danger); color: #fff; border-radius: 8px; min-width: 16px; height: 16px; font-size:0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* ── home approvals (待簽核 summary, above the tile grid) ─ */ #home-approvals { margin: 0 14px; } .home-approval-skeleton { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 1.125rem 0.875rem; margin-bottom: 0.625rem; color: var(--text-muted); font-size:0.8125rem; text-align: center; } .home-approval-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem 0.875rem; margin-bottom: 0.625rem; box-shadow: var(--shadow); } .home-approval-card.inbox { border-left: 0.25rem solid var(--warn); } .home-approval-card.outbox { opacity: 0.92; } .home-approval-title { font-size:0.875rem; font-weight: 700; margin-bottom: 0.5rem; } .home-approval-card.inbox .home-approval-title { color: var(--warn); } .home-approval-card.outbox .home-approval-title { color: var(--text-muted); } .home-approval-title.toggle { cursor: pointer; user-select: none; } .home-approval-card.collapsed .home-approval-title.toggle { margin-bottom: 0; } .hac-caret { display: inline-block; width: 1rem; font-size: 0.75rem; } .home-approval-rows { display: flex; flex-direction: column; } .home-approval-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 0.625rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size:0.8125rem; } .home-approval-row:last-child { border-bottom: none; } .home-approval-row.clickable { cursor: pointer; } .home-approval-row .haf-type { font-weight: 700; color: var(--accent-text); background: var(--accent); font-size:0.6875rem; padding: 0.125rem 0.375rem; border-radius: 0.375rem; } .home-approval-row .haf-name, .home-approval-row .haf-serial { font-weight: 600; } .home-approval-row .haf-date, .home-approval-row .haf-stage { color: var(--text-muted); font-size:0.75rem; } .home-approval-row .haf-desc { flex-basis: 100%; color: var(--text-muted); font-size:0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-approval-row .haf-waiting { flex-basis: 100%; color: var(--warn); font-size:0.75rem; font-weight: 600; } .home-approval-row .haf-period { flex-basis: 100%; color: var(--text-muted); font-size:0.75rem; } .home-approval-more { text-align: center; margin-top: 0.5rem; padding: 0.5rem; color: var(--accent); font-size:0.8125rem; font-weight: 600; cursor: pointer; } .group-divider { font-size:0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; padding: 8px 14px 4px; } /* ── bottom nav ─────────────────────────────────────── */ #liff-nav { position: sticky; bottom: 0; display: flex; background: var(--bg); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0); } #liff-nav .nav-btn { flex: 1; padding: 8px 0; text-align: center; cursor: pointer; font-size:0.6875rem; color: var(--text-muted); } #liff-nav .nav-btn .ic { font-size:1.125rem; } #liff-nav .nav-btn.active { color: var(--accent); } /* ── content area + module pages ────────────────────── */ #liff-content { flex: 1; padding-bottom: 16px; } .liff-page-header { position: sticky; top: 47px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg); border-bottom: 1px solid var(--border); } .liff-page-header .back { background: none; border: 0; color: var(--text); font-size:1.375rem; padding: 4px 8px; cursor: pointer; } .liff-page-header h1 { margin: 0; font-size:1rem; font-weight: 700; flex: 1; } .liff-page-body { padding: 14px; } /* ── reusable atoms ─────────────────────────────────── */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px; } .btn { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size:0.875rem; font-weight: 600; } .btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .btn.full { width: 100%; padding: 14px; font-size:0.9375rem; } .btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); } .fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .fld label { font-size:0.75rem; color: var(--text-muted); font-weight: 600; } .fld input, .fld select, .fld textarea { background: var(--bg-sub); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size:0.875rem; font-family: inherit; } .fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--accent); border-color: transparent; } .toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); padding: 10px 16px; border-radius: 24px; box-shadow: var(--shadow); font-size:0.8125rem; z-index: 1000; animation: toast-in .2s ease-out; } .toast.error { border-color: var(--danger); color: var(--danger); } .toast.ok { border-color: var(--success); color: var(--success); } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } .loading { text-align: center; color: var(--text-muted); padding: 40px 20px; font-size:0.8125rem; } /* ── session-expired overlay ────────────────────────── */ .session-expired-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 24px; } .session-expired-box { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 24px 20px; max-width: 320px; width: 100%; text-align: center; } .session-expired-box .icon { font-size: 2rem; margin-bottom: 8px; } .session-expired-box h3 { margin: 0 0 8px; font-size: 1rem; } .session-expired-box p { margin: 0 0 18px; font-size:0.8125rem; color: var(--text-muted); line-height: 1.5; } /* ── notification list ──────────────────────────────── */ .notif-section { padding: 0 14px; } .notif-section .section-title { font-size:0.75rem; color: var(--text-muted); padding: 12px 0 8px; text-transform: uppercase; letter-spacing: 1px; } .notif-row { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .notif-row .icon { font-size:1.375rem; } .notif-row .body { flex: 1; min-width: 0; } .notif-row .title { font-weight: 600; font-size:0.875rem; } .notif-row .desc { color: var(--text-muted); font-size:0.75rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif-row .time { color: var(--text-muted); font-size:0.6875rem; margin-top: 4px; } .notif-row.unread .title::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; } /* ── responsive (max-width tablet) ──────────────────── */ @media (min-width: 600px) { body { max-width: 480px; margin: 0 auto; box-shadow: var(--shadow); } .tile-grid { grid-template-columns: repeat(4, 1fr); } }