/* * Only5245 — 公開頁面（提問、提問列表、盤中監控） * * 風格參考：https://kmuftp-creater.github.io/tw-stock-analyzer/ * Stripe / TradingView 暗色科技儀表板感 */ :root { --p-bg-0: #0b1224; --p-bg-1: #0f1830; --p-surface: rgba(20, 28, 56, 0.55); --p-surface-2: rgba(28, 38, 72, 0.65); --p-surface-3: rgba(15, 24, 48, 0.85); --p-border: rgba(99, 120, 180, 0.18); --p-border-2: rgba(99, 120, 180, 0.32); --p-border-hi: rgba(139, 92, 246, 0.45); --p-text: #e6ecff; --p-text-soft: #b7c1de; --p-text-mute: #7785a8; --p-text-mute2: #94a3b8; --p-primary: #8b5cf6; --p-primary-hi: #a78bfa; --p-primary-soft: rgba(139, 92, 246, 0.14); --p-primary-glow: rgba(139, 92, 246, 0.45); --p-indigo: #6366f1; --p-cyan: #22d3ee; --p-emerald: #10b981; --p-rose: #f43f5e; --p-amber: #f59e0b; --p-success-soft: rgba(16, 185, 129, 0.16); --p-danger-soft: rgba(244, 63, 94, 0.16); --p-warning-soft: rgba(245, 158, 11, 0.16); --p-cyan-soft: rgba(34, 211, 238, 0.14); --p-radius: 12px; --p-radius-lg: 16px; --p-radius-xl: 22px; --p-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.03) inset; --p-shadow-md: 0 20px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.04) inset; --p-ring: 0 0 0 3px var(--p-primary-soft), 0 0 24px var(--p-primary-glow); --p-gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); --p-gradient-bg: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139, 92, 246, 0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(34, 211, 238, 0.06) 0%, transparent 60%), var(--p-bg-0); --p-t-fast: 130ms cubic-bezier(0.4, 0, 0.2, 1); --p-t: 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* ───────────────────────────────────────────────────────────────────── * 亮色主題 — 將同名變數覆寫，整站元件自動適應 * 觸發方式： * ───────────────────────────────────────────────────────────────────── */ :root[data-theme="light"] { --p-bg-0: #f4f6fb; --p-bg-1: #ffffff; --p-surface: rgba(255, 255, 255, 0.85); --p-surface-2: rgba(241, 245, 249, 0.92); --p-surface-3: rgba(255, 255, 255, 0.96); --p-border: rgba(15, 23, 42, 0.10); --p-border-2: rgba(15, 23, 42, 0.18); --p-border-hi: rgba(99, 102, 241, 0.5); --p-text: #0f172a; --p-text-soft: #334155; --p-text-mute: #64748b; --p-text-mute2: #94a3b8; /* 紫色主色保留（亮色底也很好看），稍微調深一點對比 */ --p-primary: #6366f1; --p-primary-hi: #4f46e5; --p-primary-soft: rgba(99, 102, 241, 0.10); --p-primary-glow: rgba(99, 102, 241, 0.30); --p-success-soft: rgba(16, 185, 129, 0.10); --p-danger-soft: rgba(244, 63, 94, 0.10); --p-warning-soft: rgba(245, 158, 11, 0.10); --p-cyan-soft: rgba(34, 211, 238, 0.10); --p-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.02) inset; --p-shadow-md: 0 16px 32px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(15, 23, 42, 0.02) inset; --p-gradient-bg: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99, 102, 241, 0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(14, 165, 233, 0.04) 0%, transparent 60%), var(--p-bg-0); } /* 亮色下 navbar / dropdown 玻璃感換成白底 */ :root[data-theme="light"] .p-navbar { background: rgba(255, 255, 255, 0.82) !important; } :root[data-theme="light"] .p-brand::before { box-shadow: 0 4px 14px rgba(99, 102, 241, 0.32), inset 0 1px 0 rgba(255,255,255,0.4); } /* 亮色下 input 使用實體白底（避免半透明在白頁不清楚） */ :root[data-theme="light"] .p-input, :root[data-theme="light"] .p-textarea, :root[data-theme="light"] .p-select { background: #ffffff; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05); } * { box-sizing: border-box; } html, body { background: var(--p-gradient-bg); background-attachment: fixed; color: var(--p-text); min-height: 100vh; margin: 0; } html { font-size: 15px; -webkit-font-smoothing: antialiased; } @media (min-width: 992px) { html { font-size: 16px; } } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', sans-serif; line-height: 1.55; letter-spacing: -0.005em; } a { color: var(--p-primary-hi); text-decoration: none; transition: color var(--p-t-fast); } a:hover { color: var(--p-primary); } ::selection { background: var(--p-primary-soft); color: var(--p-primary-hi); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--p-border-2); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--p-text-mute); } h1, h2, h3, h4, h5, h6 { color: var(--p-text); margin: 0; font-weight: 600; letter-spacing: -0.02em; } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.1rem; } .label-overline { font-size: 0.7rem; font-weight: 600; color: var(--p-text-mute2); text-transform: uppercase; letter-spacing: 0.08em; } /* ─── Container & Layout ────────────────────────────────────── */ .p-container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; } .p-main { padding-top: 1.75rem; padding-bottom: 4rem; } /* ─── Top Bar / Navbar ──────────────────────────────────────── */ .p-navbar { position: sticky; top: 0; z-index: 50; background: rgba(11, 18, 36, 0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--p-border); } .p-navbar-inner { max-width: 1240px; margin: 0 auto; padding: 0.875rem 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .p-brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--p-text); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.025em; } .p-brand::before { content: 'K'; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--p-gradient-primary); color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: -0.03em; box-shadow: 0 0 16px var(--p-primary-glow), inset 0 1px 0 rgba(255,255,255,0.2); } .p-brand-sub { color: var(--p-text-mute); font-size: 0.75rem; font-weight: 500; } .p-nav { display: inline-flex; gap: 0.25rem; flex: 1; margin-left: 1rem; } .p-nav a { color: var(--p-text-soft); padding: 0.45rem 0.875rem; border-radius: 10px; font-size: 0.875rem; font-weight: 500; transition: background var(--p-t-fast), color var(--p-t-fast); } .p-nav a:hover { color: var(--p-text); background: var(--p-surface-2); } .p-nav a.active { color: var(--p-primary-hi); background: var(--p-primary-soft); } .p-status-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--p-surface-2); border: 1px solid var(--p-border); color: var(--p-text-soft); font-variant-numeric: tabular-nums; } .p-status-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .p-status-chip.ok { color: var(--p-emerald); } .p-status-chip.warn { color: var(--p-amber); } .p-status-chip.alert { color: var(--p-rose); } /* ─── Cards / Surfaces ───────────────────────────────────── */ .p-card { background: var(--p-surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--p-border); border-radius: var(--p-radius-lg); box-shadow: var(--p-shadow); transition: border-color var(--p-t), box-shadow var(--p-t); } .p-card:hover { border-color: var(--p-border-2); } .p-card-head { padding: 1.125rem 1.5rem; border-bottom: 1px solid var(--p-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .p-card-body { padding: 1.5rem; } .p-section-title { display: flex; align-items: center; gap: 0.625rem; font-size: 1.05rem; font-weight: 600; color: var(--p-text); letter-spacing: -0.02em; } .p-section-title .ico { width: 28px; height: 28px; border-radius: 8px; background: var(--p-primary-soft); color: var(--p-primary-hi); display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; } /* ─── Buttons ────────────────────────────────────────────── */ .p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1.1rem; border-radius: 10px; font-size: 0.875rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: transform var(--p-t-fast), background var(--p-t-fast), box-shadow var(--p-t-fast), color var(--p-t-fast); user-select: none; text-decoration: none; } .p-btn:hover { transform: translateY(-1px); } .p-btn:active { transform: translateY(0); } .p-btn:focus-visible { outline: none; box-shadow: var(--p-ring); } .p-btn-primary { background: var(--p-gradient-primary); color: #fff; box-shadow: 0 0 16px var(--p-primary-glow), inset 0 1px 0 rgba(255,255,255,0.18); } .p-btn-primary:hover { box-shadow: 0 0 24px var(--p-primary-glow), inset 0 1px 0 rgba(255,255,255,0.25); color: #fff; } .p-btn-ghost { background: var(--p-surface-2); color: var(--p-text-soft); border-color: var(--p-border-2); } .p-btn-ghost:hover { color: var(--p-text); border-color: var(--p-border-hi); background: var(--p-surface-3); } /* ─── Inputs / Forms ───────────────────────────────────── */ .p-field { display: block; margin-bottom: 1rem; } .p-field-label { display: block; font-size: 0.7rem; font-weight: 600; color: var(--p-text-mute2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.45rem; } .p-input, .p-textarea, .p-select { width: 100%; background: var(--p-bg-1); border: 1px solid var(--p-border); border-radius: 10px; color: var(--p-text); padding: 0.625rem 0.875rem; font-size: 0.95rem; font-family: inherit; box-shadow: inset 0 1px 2px rgba(0,0,0,0.35); transition: border-color var(--p-t-fast), box-shadow var(--p-t-fast); } .p-input:focus, .p-textarea:focus, .p-select:focus { outline: none; border-color: var(--p-primary); box-shadow: inset 0 1px 2px rgba(0,0,0,0.35), var(--p-ring); } .p-input::placeholder, .p-textarea::placeholder { color: var(--p-text-mute); } .p-textarea { min-height: 6rem; resize: vertical; } /* ─── Tag / Chip / Badge ─────────────────────────────────── */ .p-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; background: var(--p-surface-2); border: 1px solid var(--p-border); color: var(--p-text-soft); letter-spacing: 0.02em; line-height: 1.25; } .p-tag.primary { background: var(--p-primary-soft); color: var(--p-primary-hi); border-color: rgba(139,92,246,0.32); } .p-tag.cyan { background: var(--p-cyan-soft); color: var(--p-cyan); border-color: rgba(34,211,238,0.32); } .p-tag.success { background: var(--p-success-soft); color: var(--p-emerald); border-color: rgba(16,185,129,0.32); } .p-tag.danger { background: var(--p-danger-soft); color: var(--p-rose); border-color: rgba(244,63,94,0.32); } .p-tag.warn { background: var(--p-warning-soft); color: var(--p-amber); border-color: rgba(245,158,11,0.32); } /* ─── Grid / List Layouts ──────────────────────────────── */ .p-grid { display: grid; gap: 1rem; } .p-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 992px) { .p-grid-2, .p-grid-3 { grid-template-columns: 1fr; } } /* 提問列表用：股票 + Q 卡 */ .p-stock-block { background: var(--p-surface); backdrop-filter: blur(14px); border: 1px solid var(--p-border); border-radius: var(--p-radius-lg); box-shadow: var(--p-shadow); overflow: hidden; transition: border-color var(--p-t); } .p-stock-block:hover { border-color: var(--p-border-2); } .p-stock-block-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--p-border); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .p-stock-code { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--p-text); letter-spacing: -0.01em; } .p-stock-name { color: var(--p-text-soft); font-size: 0.95rem; } .p-qcount { margin-left: auto; } .p-q-list { padding: 0.5rem; } .p-q-item { padding: 0.85rem 1rem; border-radius: 10px; transition: background var(--p-t-fast); } .p-q-item:hover { background: var(--p-surface-2); } .p-q-item + .p-q-item { border-top: 1px solid var(--p-border); margin-top: 0.25rem; padding-top: 0.95rem; } .p-q-meta { display: flex; gap: 0.5rem; align-items: center; color: var(--p-text-mute2); font-size: 0.75rem; margin-bottom: 0.35rem; } .p-q-text { color: var(--p-text); line-height: 1.55; white-space: pre-wrap; } /* 產業分組 heading */ .p-industry-head { display: flex; align-items: center; gap: 0.625rem; margin: 1.75rem 0 0.875rem; } .p-industry-head .label { font-size: 0.95rem; font-weight: 700; color: var(--p-text); letter-spacing: -0.015em; } .p-industry-head .accent { width: 4px; height: 1.2rem; border-radius: 2px; background: var(--p-gradient-primary); } .p-industry-head .count { color: var(--p-text-mute2); font-size: 0.75rem; } /* ─── Alert / Messages ─────────────────────────────────── */ .p-alert { border-radius: var(--p-radius); padding: 0.875rem 1.125rem; font-size: 0.9rem; background: var(--p-surface); border: 1px solid var(--p-border); border-left-width: 3px; margin-bottom: 1rem; } .p-alert.ok { border-left-color: var(--p-emerald); } .p-alert.err { border-left-color: var(--p-rose); } .p-alert.warn { border-left-color: var(--p-amber); } /* ─── Tables（Live 用） ─────────────────────────────────── */ .p-table { width: 100%; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: var(--p-radius-lg); overflow: hidden; border-collapse: separate; border-spacing: 0; } .p-table th { background: var(--p-surface-2); text-align: left; padding: 0.625rem 1rem; font-size: 0.7rem; font-weight: 600; color: var(--p-text-mute2); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--p-border); } .p-table td { padding: 0.75rem 1rem; border-top: 1px solid var(--p-border); color: var(--p-text-soft); font-size: 0.875rem; vertical-align: middle; } .p-table tbody tr:first-child td { border-top: none; } .p-table tbody tr:hover { background: rgba(139, 92, 246, 0.07); } .p-table .num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--p-text); } .p-table .stock-code { font-weight: 700; color: var(--p-text); } .p-table .stock-name { color: var(--p-text-mute2); font-size: 0.8rem; } /* ─── Alert feed（Live 右側）──────────────────────────── */ .p-feed { max-height: 540px; overflow-y: auto; padding: 0.5rem; } .p-feed-item { padding: 0.65rem 0.875rem; border-radius: 10px; margin-bottom: 0.35rem; border-left: 3px solid transparent; background: var(--p-surface-2); font-size: 0.85rem; color: var(--p-text-soft); animation: pFade 220ms ease-out; } .p-feed-item.hit { border-left-color: var(--p-amber); background: linear-gradient(90deg, var(--p-warning-soft), var(--p-surface-2)); } .p-feed-item.held { border-left-color: var(--p-emerald); background: linear-gradient(90deg, var(--p-success-soft), var(--p-surface-2)); } .p-feed-item.broken { border-left-color: var(--p-rose); background: linear-gradient(90deg, var(--p-danger-soft), var(--p-surface-2)); } .p-feed-time { color: var(--p-text-mute2); font-size: 0.72rem; margin-right: 0.4rem; font-variant-numeric: tabular-nums; } .p-feed-stock { color: var(--p-text); font-weight: 700; } @keyframes pFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ─── footer ───────────────────────────────────────────── */ .p-footer { text-align: center; color: var(--p-text-mute); font-size: 0.75rem; padding: 2rem 1rem 1rem; margin-top: 2rem; border-top: 1px solid var(--p-border); } /* ─── responsive ────────────────────────────────────── */ @media (max-width: 768px) { .p-container { padding: 0 1rem; } .p-main { padding-top: 1.25rem; padding-bottom: 2.5rem; } .p-card-body, .p-card-head { padding: 1.125rem; } .p-nav { order: 3; width: 100%; margin-left: 0; } .p-table th, .p-table td { padding: 0.55rem 0.625rem; font-size: 0.8125rem; } } /* ─── theme toggle button（navbar 右側） ──────────────── */ .p-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--p-surface-2); border: 1px solid var(--p-border); color: var(--p-text-soft); cursor: pointer; transition: background var(--p-t-fast), color var(--p-t-fast), border-color var(--p-t-fast), transform var(--p-t-fast); font-size: 1.05rem; user-select: none; } .p-theme-toggle:hover { background: var(--p-surface-3); border-color: var(--p-border-hi); color: var(--p-text); transform: translateY(-1px); } /* ─── toast（右下角 fly-in 通知） ─────────────────────── */ .p-toast { position: fixed; right: 24px; bottom: 24px; background: var(--p-surface-3); backdrop-filter: blur(14px); border: 1px solid var(--p-border-2); border-radius: var(--p-radius); box-shadow: var(--p-shadow-md); padding: 0.875rem 1.125rem; color: var(--p-text); font-size: 0.875rem; z-index: 9999; max-width: 360px; opacity: 0; transform: translateY(12px); transition: opacity 240ms ease, transform 240ms ease; } .p-toast.show { opacity: 1; transform: translateY(0); } .p-toast.ok { border-left: 3px solid var(--p-emerald); } .p-toast.err { border-left: 3px solid var(--p-rose); } /* ─── 單則提問刪除小按鈕（admin only） ────────────────── */ .p-q-del { background: transparent; border: none; color: var(--p-text-mute); cursor: pointer; padding: 0.05rem 0.5rem; border-radius: 6px; font-size: 1.05rem; line-height: 1; transition: background var(--p-t-fast), color var(--p-t-fast), transform var(--p-t-fast); } .p-q-del:hover { background: var(--p-danger-soft); color: var(--p-rose); transform: scale(1.1); } .p-q-del:disabled { opacity: 0.4; cursor: wait; } .p-q-item { overflow: hidden; } /* 配合刪除動畫 max-height: 0 */ /* ─── 即時底色（Live row）— 每股只有最靠近的 row 上色 ─────── */ .p-table tbody tr.broke-above > td { background: rgba(244, 63, 94, 0.10); } /* 紅 = 突破壓力 */ .p-table tbody tr.broke-below > td { background: rgba(16, 185, 129, 0.10); } /* 綠 = 跌破支撐 */ .p-table tbody tr.near-zone > td { background: rgba(245, 158, 11, 0.18); } /* 黃 = 接近注意 */