/* ========================================================================== Scrilab Components — 全站共用元件 依賴 tokens.css / base.css / motion.css ========================================================================== */ /* ========================================================================== 1. 按鈕 ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); border-radius: var(--r); font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: var(--lh-snug); letter-spacing: var(--ls-cjk); white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); position: relative; isolation: isolate; } .btn:active { transform: scale(.98); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } .btn .icon { width: 1.05em; height: 1.05em; flex: none; } /* --- 主要 --- 背景用 --accent-solid 而非 --accent：白字在 --accent 上只有 3.20:1， 不到一般文字的 AA 標準 4.5。hover 不改變背景亮度（改亮會再度掉出標準）， 改用加強光暈 + 微微上浮來給回饋。 */ .btn--primary { background: var(--accent-solid); color: #fff; box-shadow: var(--glow-accent); } .btn--primary:hover { background: var(--accent-solid); color: #fff; box-shadow: 0 0 0 1px var(--accent), 0 10px 28px -6px var(--accent-glow); transform: translate3d(0, -1px, 0); } .btn--primary:active { background: var(--accent-solid-a); transform: scale(.98); } /* 光暈掃過 —— hover 才觸發。 常駐循環的高光會被誤認成渲染故障，而且看久了很廉價。 */ .btn--primary { overflow: hidden; } .btn--primary::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; z-index: -1; background: linear-gradient( 100deg, transparent 0%, rgba(255, 255, 255, .22) 50%, transparent 100% ); transform: translate3d(-220%, 0, 0) skewX(-18deg); transition: transform 700ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .btn--primary:hover::before { transform: translate3d(420%, 0, 0) skewX(-18deg); } } /* --- 次要 --- */ .btn--ghost { background: transparent; color: var(--text-hi); border-color: var(--line); } .btn--ghost:hover { background: var(--bg-overlay); border-color: var(--line-strong); color: var(--text-hi); } /* --- 低調 --- */ .btn--quiet { background: transparent; color: var(--text-mid); padding-inline: var(--sp-3); } .btn--quiet:hover { background: var(--bg-overlay); color: var(--text-hi); } /* --- 尺寸 --- */ .btn--lg { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-base); border-radius: var(--r-lg); } .btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); border-radius: var(--r-sm); } .btn--block { width: 100%; } /* --- loading 狀態：寬度鎖定不跳動 --- */ .btn.is-loading { pointer-events: none; color: transparent !important; } .btn.is-loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 1.05em; height: 1.05em; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; } /* ========================================================================== 2. Badge / Chip ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.6; background: var(--bg-overlay); border: 1px solid var(--line); color: var(--text-mid); } .badge--accent { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent-hi); } .badge--ok { background: var(--ok-dim); border-color: rgba(52,211,153,.28); color: var(--ok); } .badge--warn { background: var(--warn-dim); border-color: rgba(251,191,36,.28); color: var(--warn); } .badge--err { background: var(--err-dim); border-color: rgba(248,113,113,.28); color: var(--err); } /* eyebrow：全大寫小標，字距拉開 */ .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-lo); } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); flex: none; } /* 鍵盤按鍵 */ .kbd { display: inline-block; padding: 2px var(--sp-2); border-radius: var(--r-sm); background: var(--bg-overlay); border: 1px solid var(--line); border-bottom-width: 2px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-mid); line-height: 1.5; } /* ========================================================================== 3. 卡片 ========================================================================== */ .card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--elev-1); overflow: hidden; } .card__body { padding: var(--sp-6); } .card__head { padding: var(--sp-6); border-bottom: 1px solid var(--line-subtle); } .card__foot { padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--line-subtle); background: var(--bg-sunken); } /* 可點的卡片必須是 或