/* ============================================================ osh-ui.css — shadcn/ui 設計語言層（純 CSS，無 React、無 build） ------------------------------------------------------------ 來源：把 shadcn/ui 的設計系統（語意化 token + 元件視覺規範） 翻譯成靜態 HTML + Tailwind CDN 專案可用的純 CSS。 特性： 1. 全部 token 以 --ui- 前綴、元件 class 以 .ui- 前綴 → 不覆寫任何既有 class，可安全引入既有頁面、漸進採用 2. 配色採「混合策略」：navy(#1D3A5F) 當 primary，中性灰當骨架， amber(#D97706) 保留為品牌 CTA（.ui-btn-brand） 3. shadcn 招牌 focus ring（鍵盤可及性 a11y）內建在所有互動元件 可重用：本檔可直接複製到其他靜態 HTML 專案（firstrade / 房貸APP 等） ============================================================ */ :root { /* ── 表面 / 文字（語意化 background + foreground 配對）── */ --ui-background: #ffffff; --ui-foreground: #1a1a2e; --ui-card: #ffffff; --ui-card-foreground: #1a1a2e; --ui-popover: #ffffff; --ui-popover-foreground:#1a1a2e; /* ── 主色 / 次色 / 弱化 / 強調 ── */ --ui-primary: #1d3a5f; /* 深海軍藍：主按鈕 / 選中 / 重點 */ --ui-primary-foreground: #ffffff; --ui-primary-hover: #162c4a; --ui-secondary: #eef1f6; /* 次按鈕 / 次 badge / 支援性 UI */ --ui-secondary-foreground:#1d3a5f; --ui-secondary-hover: #e2e8f2; --ui-muted: #f1f4f8; /* 弱化表面 / 表頭 / hover 列底 */ --ui-muted-foreground: #5a6478; /* 說明 / placeholder / 空狀態 */ --ui-accent: #eef1f6; /* ghost / 選單高亮 / hover 互動底 */ --ui-accent-foreground: #1d3a5f; /* ── 品牌 CTA（landing 用，shadcn 沒有、保留 facemeeting 個性）── */ --ui-brand: #d97706; /* 琥珀橙 */ --ui-brand-foreground: #ffffff; --ui-brand-hover: #b45309; /* ── 狀態 ── */ --ui-destructive: #dc2626; --ui-destructive-foreground: #ffffff; --ui-destructive-hover: #b91c1c; --ui-success: #059669; --ui-success-foreground: #ffffff; --ui-success-hover: #047857; /* ── 邊框 / 輸入框 / focus ring ── */ --ui-border: #dde3ed; --ui-input: #dde3ed; --ui-ring: 29 58 95; /* navy RGB（給 ring 的 rgba 用）*/ /* ── 圓角（shadcn 預設 0.625rem = 10px，由此推導其餘）── */ --ui-radius: 0.625rem; --ui-radius-sm: calc(var(--ui-radius) - 4px); --ui-radius-md: calc(var(--ui-radius) - 2px); --ui-radius-lg: var(--ui-radius); --ui-radius-xl: calc(var(--ui-radius) + 4px); /* ── 陰影（shadcn subtle shadow）── */ --ui-shadow-sm: 0 1px 2px 0 rgba(29,58,95,.06); --ui-shadow: 0 1px 3px 0 rgba(29,58,95,.08), 0 1px 2px -1px rgba(29,58,95,.08); --ui-shadow-md: 0 4px 12px -2px rgba(29,58,95,.12), 0 2px 6px -2px rgba(29,58,95,.08); --ui-shadow-lg: 0 12px 32px -8px rgba(29,58,95,.18); } /* focus-visible ring helper（shadcn 招牌） */ .ui-ring:focus-visible, .ui-btn:focus-visible, .ui-input:focus-visible, .ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px rgba(var(--ui-ring), .55); } /* ============================ Button ============================ */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.5rem; padding: 0 1rem; border: 1px solid transparent; border-radius: var(--ui-radius-md); font-family: inherit; font-size: .875rem; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; text-decoration: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease; } .ui-btn:disabled, .ui-btn[disabled], .ui-btn.is-disabled { opacity: .5; pointer-events: none; } .ui-btn svg { width: 1rem; height: 1rem; } /* variants */ .ui-btn-primary { background: var(--ui-primary); color: var(--ui-primary-foreground); } .ui-btn-primary:hover{ background: var(--ui-primary-hover); } .ui-btn-secondary { background: var(--ui-secondary); color: var(--ui-secondary-foreground); } .ui-btn-secondary:hover{ background: var(--ui-secondary-hover); } .ui-btn-outline { background: var(--ui-background); color: var(--ui-foreground); border-color: var(--ui-input); } .ui-btn-outline:hover{ background: var(--ui-accent); color: var(--ui-accent-foreground); } .ui-btn-ghost { background: transparent; color: var(--ui-foreground); } .ui-btn-ghost:hover{ background: var(--ui-accent); color: var(--ui-accent-foreground); } .ui-btn-brand { background: var(--ui-brand); color: var(--ui-brand-foreground); } .ui-btn-brand:hover{ background: var(--ui-brand-hover); } .ui-btn-destructive { background: var(--ui-destructive); color: var(--ui-destructive-foreground); } .ui-btn-destructive:hover{ background: var(--ui-destructive-hover); } .ui-btn-success { background: var(--ui-success); color: var(--ui-success-foreground); } .ui-btn-success:hover{ background: var(--ui-success-hover); } .ui-btn-link { background: transparent; color: var(--ui-primary); height: auto; padding: 0; text-underline-offset: 4px; } .ui-btn-link:hover{ text-decoration: underline; } /* sizes */ .ui-btn-sm { height: 2rem; padding: 0 .75rem; font-size: .8125rem; border-radius: var(--ui-radius-sm); } .ui-btn-lg { height: 2.75rem; padding: 0 2rem; font-size: .9375rem; } .ui-btn-icon { height: 2.5rem; width: 2.5rem; padding: 0; } .ui-btn-block{ display: flex; width: 100%; } /* ============================ Card ============================ */ .ui-card { background: var(--ui-card); color: var(--ui-card-foreground); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-sm); } .ui-card-header { padding: 1.5rem 1.5rem 0; } .ui-card-title { font-weight: 700; font-size: 1.125rem; line-height: 1.4; margin: 0; } .ui-card-desc { color: var(--ui-muted-foreground); font-size: .875rem; margin: .35rem 0 0; } .ui-card-content { padding: 1.5rem; } .ui-card-footer { padding: 0 1.5rem 1.5rem; display: flex; align-items: center; gap: .5rem; } /* ====================== Input / Select / Textarea ====================== */ .ui-input, .ui-select, .ui-textarea { display: block; width: 100%; height: 2.5rem; padding: 0 .75rem; background: var(--ui-background); color: var(--ui-foreground); border: 1px solid var(--ui-input); border-radius: var(--ui-radius-md); font-family: inherit; font-size: .875rem; line-height: 1.5; transition: border-color .18s ease, box-shadow .18s ease; } .ui-textarea { height: auto; min-height: 5rem; padding: .55rem .75rem; resize: vertical; } .ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-muted-foreground); } .ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { opacity: .5; cursor: not-allowed; background: var(--ui-muted); } .ui-select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .65rem center; padding-right: 2rem; } .ui-label { display: block; font-size: .8125rem; font-weight: 500; line-height: 1.4; color: var(--ui-foreground); margin-bottom: .4rem; } .ui-help { font-size: .8125rem; color: var(--ui-muted-foreground); margin-top: .35rem; } .ui-error { font-size: .8125rem; color: var(--ui-destructive); margin-top: .35rem; min-height: 1rem; } /* ============================ Badge ============================ */ .ui-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border: 1px solid transparent; border-radius: 9999px; font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; } .ui-badge-primary { background: var(--ui-primary); color: var(--ui-primary-foreground); } .ui-badge-secondary { background: var(--ui-secondary); color: var(--ui-secondary-foreground); } .ui-badge-outline { background: transparent; color: var(--ui-foreground); border-color: var(--ui-border); } .ui-badge-success { background: #dcfce7; color: #166534; } .ui-badge-destructive{ background: #fee2e2; color: #991b1b; } .ui-badge-warning { background: #fef3c7; color: #92400e; } /* ============================ Dialog / Modal ============================ */ .ui-dialog-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(15,25,45,.55); display: none; align-items: center; justify-content: center; padding: 1rem; animation: ui-fade-in .15s ease; } .ui-dialog-overlay.open { display: flex; } .ui-dialog { background: var(--ui-popover); color: var(--ui-popover-foreground); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-lg); width: 100%; max-width: 440px; padding: 1.5rem; animation: ui-pop-in .15s ease; } .ui-dialog-title { font-weight: 700; font-size: 1.125rem; margin: 0 0 .25rem; } .ui-dialog-desc { color: var(--ui-muted-foreground); font-size: .875rem; margin: 0 0 1rem; } .ui-dialog-footer{ display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.25rem; } @keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ui-pop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } } /* ============================ Table ============================ */ .ui-table { width: 100%; border-collapse: collapse; font-size: .875rem; } .ui-table thead th { text-align: left; font-weight: 600; color: var(--ui-muted-foreground); font-size: .8125rem; padding: .6rem .65rem; border-bottom: 1px solid var(--ui-border); background: var(--ui-muted); } .ui-table tbody td { padding: .6rem .65rem; border-bottom: 1px solid var(--ui-border); } .ui-table tbody tr:hover { background: var(--ui-muted); } .ui-table tbody tr:last-child td { border-bottom: none; } /* ============================ Misc ============================ */ .ui-separator { height: 1px; background: var(--ui-border); border: none; margin: 1rem 0; } .ui-muted { color: var(--ui-muted-foreground); }