/* =========================================================================== StreamerPlatform — 全站共用設計系統 (site.css) Slice 1 地基:設計變數(token) + 共用版型外殼(頂部欄/側邊欄) + 基礎元件。 配色目前=頻道黃/白/藍;之後依繪師草圖換皮只需改下方 :root 變數值。 深色版已預留:在 即整站套深色(頂部欄切換鈕會切)。 =========================================================================== */ :root { /* —— 色彩(CoolSwagMale 品牌:亮藍/粉紅/黑墨/黃橘,亮色系) —— */ --bg: #f1fbff; --bg-soft: #e4f4fc; --card: #ffffff; --card-edge: #d3e9f4; --card-hover: #ecf8fd; --ink: #17141d; /* 品牌黑墨:主要文字 + 主按鈕 */ --text: #17141d; --muted: #5d6b78; --dim: #98a7b3; --blue: #0a86c6; /* 可存取的互動藍(連結/次要按鈕,白字達標) */ --blue-hi: #00a1e9; /* 品牌亮藍 #00a1e9(裝飾/hero/hover) */ --blue-soft: rgba(0, 161, 233, .12); --pink: #eb4f9b; --pink-deep: #b3236e; --pink-soft: rgba(235, 79, 155, .12); --yellow: #ffc42e; --yellow-deep: #9a6a00; --yellow-soft: rgba(255, 196, 46, .18); --orange: #ff8a3d; --green: #0e9b4a; --green-soft: rgba(14, 155, 74, .12); --red: #e8385f; --red-soft: rgba(232, 56, 95, .12); /* —— 外殼尺寸 —— */ --topbar-h: 56px; --side-w: 232px; --radius: 14px; --radius-sm: 9px; --shadow: 0 2px 12px rgba(26, 37, 64, .05); --shadow-pop: 0 8px 30px rgba(26, 37, 64, .12); --font: system-ui, "Noto Sans TC", "Segoe UI", sans-serif; --btn-bg: var(--ink); --btn-fg: #fff; --btn-bg-hover: #322c3d; } html[data-theme="dark"] { --bg: #0c0e14; --bg-soft: #14171f; --card: #151922; --card-edge: rgba(255, 255, 255, .09); --card-hover: #1b2029; --ink: #f2f5f8; --text: #f2f5f8; --muted: #9aa6b2; --dim: #5f6b78; --blue: #35b6f2; --blue-hi: #5fcdff; --blue-soft: rgba(53, 182, 242, .16); --pink: #ff5cb4; --pink-deep: #ff8fcd; --pink-soft: rgba(255, 92, 180, .16); --yellow: #ffce4d; --yellow-deep: #ffe08a; --yellow-soft: rgba(255, 206, 77, .16); --orange: #ff9d5c; --green: #37d07a; --green-soft: rgba(55, 208, 122, .14); --red: #ff5d86; --red-soft: rgba(255, 93, 134, .16); --btn-bg: #2c333f; --btn-fg: #f2f5f8; --btn-bg-hover: #3a4252; --shadow: 0 2px 12px rgba(0, 0, 0, .35); --shadow-pop: 0 10px 34px rgba(0, 0, 0, .5); } * { box-sizing: border-box; } /* 內嵌 SVG 圖示:用 引用,顏色隨字色 */ .ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; } body.app-shell { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; } a { color: var(--blue); } /* ───────── 頂部欄 ───────── */ .app-top { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--card); border-bottom: 1px solid var(--card-edge); } .app-top .burger { display: flex; align-items: center; border: 0; background: transparent; cursor: pointer; color: var(--text); padding: 6px; border-radius: 8px; } .app-top .burger:hover { background: var(--bg-soft); } .app-top .brand { font-weight: 800; font-size: 1.02rem; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 7px; white-space: nowrap; } .app-top .brand .spark { color: var(--yellow); } .app-top .brand { letter-spacing: .2px; } .brand .w-cool { color: var(--blue-hi); } .brand .w-swag { color: var(--ink); } .brand .w-male { color: var(--pink); } /* 圖片 logo：白色字必須深色底,故包一塊深色膠囊(三主題皆適用) */ .app-top .brand .brand-logo { display: inline-flex; align-items: center; background: #0b1020; border-radius: 9px; padding: 5px 12px; } .app-top .brand .brand-logo img { height: 22px; width: auto; display: block; } @media (max-width: 480px) { .app-top .brand .brand-logo img { height: 19px; } .app-top .brand .brand-logo { padding: 4px 9px; } } .app-top .live { font-size: .72rem; font-weight: 700; color: #fff; background: var(--red); border-radius: 6px; padding: 3px 8px; display: flex; align-items: center; gap: 5px; } .app-top .live .pp { width: 6px; height: 6px; border-radius: 50%; background: #fff; } /* 開台計時器:離線=灰底「上次開台 X 前」;直播中=紅底「開台 H:MM:SS」 */ .app-top .live-since { font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--card-edge); border-radius: 6px; padding: 3px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; } .app-top .live-since.is-live { color: #fff; background: var(--red); border-color: transparent; } @media (max-width: 560px) { .app-top .live-since { display: none !important; } } .app-top .search { flex: 1; max-width: 360px; display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--card-edge); border-radius: 10px; padding: 7px 11px; color: var(--muted); font-size: .85rem; } .app-top .search input { border: 0; background: transparent; outline: none; color: var(--text); width: 100%; font-size: .85rem; } .app-top .spacer { flex: 1; } .app-top .iconbtn { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 7px; border-radius: 8px; display: flex; } .app-top .iconbtn:hover { background: var(--bg-soft); color: var(--text); } .app-top .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; text-decoration: none; } /* ───────── 版面:側邊欄 + 主內容 ───────── */ .app-wrap { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: calc(100vh - var(--topbar-h)); } .app-side { border-right: 1px solid var(--card-edge); background: var(--card); padding: 14px 10px 28px; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; } .app-side .grp { font-size: .66rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--dim); margin: 16px 10px 6px; } .app-side .grp:first-child { margin-top: 2px; } .app-side .nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: .88rem; color: var(--muted); text-decoration: none; margin-bottom: 1px; } .app-side .nav:hover { background: var(--bg-soft); color: var(--text); } .app-side .nav.active { background: var(--blue-soft); color: var(--blue); font-weight: 700; } .app-side .nav .ic { width: 18px; height: 18px; flex: 0 0 auto; } .app-side .nav .badge-n { margin-left: auto; font-size: .68rem; font-weight: 700; background: var(--red); color: #fff; border-radius: 999px; padding: 1px 7px; } .app-main { padding: 22px 32px 60px; max-width: 1240px; margin: 0 auto; width: 100%; zoom: 1.1; } .app-main > h1 { font-size: 1.4rem; margin: 0 0 4px; display: flex; align-items: center; gap: 9px; } .app-main .lead { color: var(--muted); margin: 0 0 18px; } /* 行動裝置遮罩(抽屜開啟時) */ .app-scrim { display: none; position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(10, 16, 30, .42); z-index: 30; } @media (max-width: 900px) { .app-top .burger { display: flex; } .app-wrap { grid-template-columns: 1fr; } .app-side { position: fixed; top: var(--topbar-h); left: 0; z-index: 35; width: var(--side-w); transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow-pop); } body.nav-open .app-side { transform: translateX(0); } body.nav-open .app-scrim { display: block; } .app-main { padding: 18px 16px 60px; } .app-top .search { display: none; } } /* 桌機:側欄收合(頂部 burger 切換,狀態記憶於 localStorage)。手機沿用上方抽屜行為,故限定大畫面。 */ @media (min-width: 901px) { body.nav-collapsed .app-wrap { grid-template-columns: 1fr; } body.nav-collapsed .app-side { display: none; } } /* ───────── 頂部欄搜尋下拉 ───────── */ .app-top .search { position: relative; } .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; background: var(--card); border: 1px solid var(--card-edge); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 5px; max-height: 60vh; overflow-y: auto; } .search-results .sr-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; color: var(--text); font-size: .86rem; font-family: inherit; padding: 8px 10px; border-radius: 8px; } .search-results .sr-item .ic { color: var(--dim); flex: 0 0 auto; } .search-results .sr-item:hover, .search-results .sr-item.active { background: var(--blue-soft); color: var(--blue); } .search-results .sr-item.active .ic { color: var(--blue); } .search-results .sr-empty { padding: 10px 12px; color: var(--muted); font-size: .84rem; } /* ───────── 基礎元件 ───────── */ .card { background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); padding: 16px 18px; margin-top: 14px; box-shadow: var(--shadow); } .ribbon { height: 4px; width: 72px; border-radius: 2px; background: linear-gradient(90deg, var(--blue-hi) 0 38%, var(--pink) 38% 70%, var(--yellow) 70% 100%); margin: 6px 0 14px; } /* 語意變體(全站共用,取代各頁自帶定義) */ .badge { display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 10px; padding: 2px 9px; background: var(--blue-soft); color: var(--blue); } .badge.set { background: var(--green-soft); color: var(--green); } .badge.unset { background: var(--bg-soft); color: var(--dim); } .badge.bad { background: var(--red-soft); color: var(--red); } .badge.vip { background: #e005b9; color: #fff; } .badge.sub { background: var(--yellow-soft); color: var(--yellow-deep); } .badge.mod { background: var(--green); color: #fff; } .badge.bc { background: var(--blue); color: #fff; } .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 20px; } .metric { background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); } .metric .k { font-size: .76rem; color: var(--muted); display: flex; align-items: center; gap: 6px; } .metric .v { font-size: 1.55rem; font-weight: 800; margin-top: 6px; } .metric .v small { font-size: .82rem; font-weight: 700; color: var(--blue); } .tabbar { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--card-edge); margin-bottom: 16px; } .tabbar .tab { font-size: .86rem; color: var(--muted); padding: 9px 14px; border-radius: 9px 9px 0 0; cursor: pointer; border: 1px solid transparent; border-bottom: 0; background: transparent; } .tabbar .tab:hover { color: var(--text); background: var(--bg-soft); } .tabbar .tab.active { color: var(--blue); background: var(--blue-soft); font-weight: 700; box-shadow: inset 0 3px 0 var(--yellow); } .tabpanel { display: none; } .tabpanel.active { display: block; } .quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .quick { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 13px 15px; text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: border-color .12s, transform .12s; } .quick:hover { border-color: var(--blue); transform: translateY(-2px); } .quick .ic { width: 22px; height: 22px; color: var(--blue); flex: 0 0 auto; } .quick .t { font-weight: 700; font-size: .9rem; } .quick .s { font-size: .76rem; color: var(--muted); } /* 開關 toggle */ .switch { position: relative; display: inline-block; width: 44px; height: 24px; vertical-align: middle; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--card-edge); border-radius: 999px; transition: background .15s; } .switch .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .switch input:checked + .slider { background: var(--blue); } .switch input:checked + .slider::before { transform: translateX(20px); } .switch input:focus-visible + .slider { box-shadow: 0 0 0 3px var(--blue-soft); } /* 側邊欄第二層樹:chevron 收合 */ .app-side .navrow { display: flex; align-items: center; gap: 2px; } .app-side .navrow .nav { flex: 1; } .app-side .caret { border: 0; background: transparent; cursor: pointer; color: var(--dim); padding: 7px 6px; border-radius: 7px; display: flex; align-items: center; } .app-side .caret:hover { background: var(--bg-soft); color: var(--text); } .app-side .caret .ic { width: 16px; height: 16px; transition: transform .15s; } .app-side .caret.open .ic { transform: rotate(180deg); } .app-side .subnav { display: none; margin: 0 0 4px 18px; border-left: 1px solid var(--card-edge); padding-left: 4px; } .app-side .subnav.open { display: block; } .app-side .subnav a { display: block; font-size: .8rem; color: var(--muted); text-decoration: none; padding: 5px 10px; border-radius: 7px; } .app-side .subnav a:hover { background: var(--bg-soft); color: var(--text); } .app-side .subnav a.active { color: var(--blue); font-weight: 700; background: var(--blue-soft); } /* 連字號命名的動作按鈕(各互動頁原本自帶,集中到 site.css 統一) */ /* 原生檔案選擇鈕統一品牌外觀(選擇檔案) */ input[type=file] { font-size: .85rem; color: var(--muted); } input[type=file]::file-selector-button { background: var(--blue); color: #fff; border: 0; border-radius: 9px; padding: 7px 14px; font-weight: 700; font-size: .85rem; cursor: pointer; margin-right: 10px; transition: background .12s; } input[type=file]::file-selector-button:hover { background: var(--blue-hi); } /* ───────── 按鈕(全站統一:實心品牌色、白字、一致 hover,無黑/灰/透明) ───────── */ .btn, .btn-buy, .btn-send, .btn-sm, .btn-ghost, .btn-insert-img, .btn-add, .btn-warn, .btn-ok { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 11px; padding: 9px 16px; font-size: .88rem; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; color: #fff; background: var(--blue); transition: filter .12s, transform .08s; } .btn:hover, .btn-buy:hover, .btn-send:hover, .btn-sm:hover, .btn-ghost:hover, .btn-insert-img:hover, .btn-add:hover, .btn-warn:hover, .btn-ok:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn:active, .btn-buy:active, .btn-send:active, .btn-sm:active, .btn-ghost:active, .btn-insert-img:active, .btn-add:active, .btn-warn:active, .btn-ok:active { transform: translateY(0) scale(.99); } .btn:disabled, .btn-buy:disabled, .btn-send:disabled, .btn-sm:disabled { opacity: .45; cursor: default; filter: none; transform: none; } /* 語意色(覆蓋預設藍) */ .btn.blue, .btn.secondary, .btn.sec, .btn.pay { background: var(--blue); color: #fff; } .btn.ok, .btn.approve, .btn-ok, .btn-buy.btn-free, .btn-free { background: var(--green); color: #fff; } .btn.no, .btn.reject, .btn.danger, .btn.panic, .btn-warn { background: var(--red); color: #fff; } .btn.warn, .btn-add { background: var(--orange); color: #3a2400; } .btn.pink { background: var(--pink); color: #fff; } .btn.yellow { background: var(--yellow); color: #4a3500; } .btn.panic { font-weight: 800; } /* 尺寸 */ .btn.sm, .btn.small, .btn-sm, .btn-insert-img, .btn-ghost, .btn-ok, .btn-warn { padding: 7px 13px; font-size: .82rem; border-radius: 9px; } .btn-buy, .btn-send { padding: 11px 24px; font-size: .95rem; border-radius: 12px; } /* ───────── 表單輸入框(全站統一;範圍/勾選/取色等特殊型別仍由各頁自訂) ───────── */ .app-main input[type=text], .app-main input[type=number], .app-main input[type=password], .app-main input[type=url], .app-main textarea, .app-main select { width: 100%; padding: 7px 9px; border: 1px solid var(--card-edge); border-radius: 8px; box-sizing: border-box; background: var(--card); color: var(--text); outline: none; font-family: inherit; font-size: .9rem; } .app-main input[type=text]:focus, .app-main input[type=number]:focus, .app-main input[type=password]:focus, .app-main input[type=url]:focus, .app-main textarea:focus, .app-main select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); } /* 深色主題輸入框防呆(全站總攔):部分頁面自帶寫死淺色底(#fff…),深色下會變「淺底＋淺字」看不到輸入文字。 這裡以高優先序統一壓回「深底＋淺字」,涵蓋各種文字型 input(含 search/email/date/無 type)、textarea、select; 用 :not() 排除 color/range/checkbox/radio/file/button/submit/reset/image 等有自身外觀者。僅深色主題生效,淺色不受影響。 */ html[data-theme="dark"] .app-main input:not([type=color]):not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]), html[data-theme="dark"] .app-main textarea, html[data-theme="dark"] .app-main select { background: var(--card); color: var(--text); } html[data-theme="dark"] .app-main input::placeholder, html[data-theme="dark"] .app-main textarea::placeholder { color: var(--dim); } /* ───────── 共用 toast(全站 window.spToast;伺服器端 .flash 沿用同外觀) ───────── */ @keyframes sp-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .sp-toast-wrap { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .sp-toast { pointer-events: auto; display: flex; align-items: center; gap: 9px; background: var(--green); color: #fff; padding: 11px 20px; border-radius: 12px; box-shadow: var(--shadow-pop); font-weight: 700; font-size: .9rem; max-width: min(92vw, 480px); animation: sp-toast-in .2s ease; } .sp-toast .ic { width: 18px; height: 18px; flex: 0 0 auto; } .sp-toast.leaving { transition: opacity .4s, transform .4s; opacity: 0; transform: translateY(-10px); } .sp-toast.err { background: var(--red); color: #fff; } .sp-toast.info { background: var(--blue); color: #fff; } .sp-toast.warn { background: var(--orange); color: #3a2400; } .flash { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 95; background: var(--green); color: #fff; padding: 11px 22px; border-radius: 12px; box-shadow: var(--shadow-pop); font-weight: 700; font-size: .9rem; animation: sp-toast-in .2s ease; } .flash.leaving { transition: opacity .4s, transform .4s; opacity: 0; transform: translateY(-10px); } /* ───────── 品牌確認彈窗(window.spConfirm) ───────── */ .sp-scrim { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 16, 30, .5); opacity: 0; transition: opacity .15s ease; } .sp-scrim.show { opacity: 1; } .sp-dialog { width: min(440px, 100%); background: var(--card); color: var(--text); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 22px 22px 18px; transform: translateY(10px) scale(.98); transition: transform .15s ease; } .sp-scrim.show .sp-dialog { transform: none; } .sp-dialog h3 { margin: 0 0 9px; font-size: 1.05rem; display: flex; align-items: center; gap: 9px; } .sp-dialog h3 .ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--blue); } .sp-dialog.danger h3 .ic { color: var(--red); } .sp-dialog p { margin: 0 0 18px; color: var(--muted); font-size: .9rem; white-space: pre-line; line-height: 1.55; } .sp-dialog .sp-actions { display: flex; gap: 10px; justify-content: flex-end; } /* ───────── 空狀態 / skeleton 載入占位 ───────── */ .sp-empty { text-align: center; color: var(--muted); padding: 38px 20px; } .sp-empty .ic { width: 44px; height: 44px; color: var(--dim); margin-bottom: 10px; } .sp-empty .t { font-weight: 700; color: var(--text); margin-bottom: 4px; } .sp-empty .s { font-size: .85rem; } @keyframes sp-shimmer { 0% { background-position: -340px 0; } 100% { background-position: 340px 0; } } .sp-skeleton { border-radius: 8px; background: var(--bg-soft); background-image: linear-gradient(90deg, transparent 0, rgba(255,255,255,.45) 50%, transparent 100%); background-size: 340px 100%; background-repeat: no-repeat; animation: sp-shimmer 1.1s infinite linear; min-height: 14px; } html[data-theme="dark"] .sp-skeleton { background-image: linear-gradient(90deg, transparent 0, rgba(255,255,255,.08) 50%, transparent 100%); } .sp-skel-row td { padding: 12px 8px; } .sp-skel-row .sp-skeleton { display: block; height: 16px; } .sp-skel-card { background: var(--card); border: 1px solid var(--card-edge); border-radius: 14px; padding: 16px; margin-top: 12px; display: grid; gap: 10px; } .sp-skel-card .sp-skeleton { display: block; } /* ───────── 共用頁首 .page-head ───────── */ .page-head { margin: 0 0 18px; } .page-head .ph-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .page-head h1 { font-size: 1.4rem; margin: 0; display: flex; align-items: center; gap: 9px; } .page-head h1 .ic { width: 24px; height: 24px; color: var(--blue); flex: 0 0 auto; } .page-head .ph-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .page-head .lead { color: var(--muted); margin: 6px 0 0; } /* ───────── 提示框拆分:.note(灰字小提示) / .callout(黃框強調) ───────── */ .callout { background: var(--yellow-soft); border: 1px solid var(--yellow); border-left-width: 4px; border-radius: 9px; padding: 10px 14px; color: var(--text); font-size: .86rem; margin: 10px 0; } .callout strong { color: var(--yellow-deep); } /* ───────── 降低動態效果(無障礙) ───────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* 空狀態文字(集中版,取代 16 頁各自定義;grid 子層自動跨欄) */ .empty { color: var(--dim); text-align: center; padding: 32px 18px; font-size: .9rem; grid-column: 1 / -1; } /* 灰字小提示(集中版;黃框強調改用 .callout) */ .note { color: var(--muted); font-size: .82rem; line-height: 1.6; } /* responsive-safety:寬內容不撐破版面;極窄螢幕取消放大、寬表格可橫向捲動 */ .app-main img, .app-main video, .app-main canvas { max-width: 100%; height: auto; } @media (max-width: 640px) { .app-main { zoom: 1; } .app-main table { display: block; overflow-x: auto; } } /* 直播中徽章脈動(prefers-reduced-motion 時由全域規則自動停用) */ @keyframes sp-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .app-top .live .pp { animation: sp-live-pulse 1.4s ease-in-out infinite; } /* 確認彈窗內的單選(付款方式選擇等) */ .sp-choices { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; } .sp-choices .sp-choice { display: flex; align-items: center; gap: 10px; border: 1px solid var(--card-edge); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: .9rem; font-weight: 600; } .sp-choices .sp-choice:hover { border-color: var(--blue); background: var(--bg-soft); } .sp-choices .sp-choice input { accent-color: var(--blue); width: 16px; height: 16px; flex: 0 0 auto; } .sp-choices .sp-choice:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); } /* 功能#5 全站拖曳上傳:檔案拖到上傳控制所在容器時的高亮(見 _Layout 的 SP drag-drop) */ .sp-dropping { outline: 2px dashed var(--blue); outline-offset: 3px; border-radius: 8px; background: rgba(56, 132, 255, .08); } /* 拖曳上傳提示(每個可拖放區自動標註;flex 容器內會自成一行) */ .sp-drop-hint { flex: 0 0 100%; width: 100%; margin-top: 6px; font-size: .74rem; color: var(--dim); display: flex; align-items: center; gap: 5px; pointer-events: none; } /* 觀眾「使用前需閱讀事項」共用區塊(Welcome / MyDashboard,partial _BeforeYouStart) */ .before-start { background: var(--card); border: 1px solid var(--card-edge); border-radius: 16px; padding: 18px 20px; margin-top: 24px; box-shadow: var(--shadow); } .before-start h2 { display: flex; align-items: center; gap: 9px; font-size: 1.08rem; margin: 0 0 6px; } .before-start h2 .ic { width: 20px; height: 20px; color: var(--blue); flex: 0 0 auto; } .before-start .bs-lead { color: var(--muted); font-size: .9rem; margin: 0 0 10px; } .before-start .bs-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: .9rem; line-height: 1.65; } .before-start .bs-list li strong { color: var(--text); } .before-start .bs-foot { color: var(--dim); font-size: .82rem; margin: 12px 0 0; }