/* ───────────────────────────────────────────────────────────────────────── 後台共用設計系統。 原本叫 product-admin.css，但它裝的是全後台共用的東西（色票變數、按鈕、 輸入框、卡片、表格、頂端標題列、手機卡片式版面），不是商品頁專屬， 所以正名成 admin-ui.css。每個後台頁面載入這一份，再各自載入自己的 <頁名>-admin.css 放該頁特有的樣式。 ───────────────────────────────────────────────────────────────────────── */ /* 新版產品管理樣式，從設計稿抽出來獨立成檔（設計稿原本整包內嵌在 .cshtml 裡）。 相對設計稿修掉四個 Mike 實測抓到的問題： 1. #productTable 改 table-layout:fixed + 明確欄寬（不再讓瀏覽器依內容自動決定寬度，短字串就不會被擠壓換行） 2. 拿掉塞進「口味」欄的「已下架」badge——狀態本來就有自己的「上架狀態」欄（桌機是獨立欄位，手機版也排在系列/口味後面第三順位），沒必要在口味欄再擠一次 3. .actions-cell 加 align-items:center，讓編輯／複製按鈕跟著列高垂直置中 4. .table-wrap 拿掉會撐開容器的 min-width，1440px 下 14 欄改用固定百分比欄寬，不需要橫向捲動 */ :root{ /* 中性灰階為主體，全站只有一個彩色（赤陶橘）：它出現在哪裡就代表「這裡要注意」。 綠色只在存檔成功、紅色只在刪除與錯誤，畫面上不存在第三種彩色。 */ --primary:#b4530e; --primary-dark:#8c3f0a; --primary-light:#f6ede4; --danger:#a3231b; --danger-light:#f7eae9; /* 進行中／處理中屬於中性狀態，不配色，避免變成第三種彩色 */ --warn:#6e6e67; --warn-light:#efefeb; --success:#2e6a41; --success-light:#e9f1eb; /* --bg 是頁面底、--surface 是卡片與表格面。這一版兩者同為白色，靠線與留白分層而不是靠底色深淺； 它們仍然是兩個 token，因為改配色時「頁面底」與「內容面」是各自獨立的決定。 */ --bg:#ffffff; --surface:#ffffff; --surface-2:#f7f7f5; --surface-3:#efefeb; --border:#e0e0da; --border-strong:#c7c7c0; --text:#141413; --text-muted:#6e6e67; --text-faint:#9a9a92; /* 分區改用線與留白，不用浮起來的圓角卡片，所以圓角一律收到近乎方角 */ --radius:2px; --rule-heavy:2px solid var(--text); --fs-base:16px; --fs-md:18px; --fs-lg:20px; --fs-xl:24px; --fs-2xl:28px; } .pa-scope,.pa-scope *,.pa-scope *::before,.pa-scope *::after{box-sizing:border-box;} .pa-scope{ color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif; /* 這個站的 wwwroot/Content/bootstrap.css 把 html 的 font-size 定成 10px（不是瀏覽器預設的 16px）， 這個頁面只是額外連結它、不會去改它，所以整份樣式表一律不用 rem（rem 永遠對齊 html 根字級，會變成 10px 為底、跌破 16px 下限），改用 px／em——em 是對齊「元素自己算出來的字級」，只要這裡先給一個 px base，子層的 em 就會照正常的 cascade 往下算，不會被 html 的 10px 綁架。 */ font-size:var(--fs-base); line-height:1.55; } .pa-scope h1,.pa-scope h2,.pa-scope h3,.pa-scope h4{margin:0 0 .5em;font-weight:700;} .pa-scope h3{font-size:var(--fs-lg);} .pa-scope button,.pa-scope input,.pa-scope select,.pa-scope textarea{font-family:inherit;font-size:16px;color:inherit;} .pa-scope button{cursor:pointer;} .pa-scope p{margin:0 0 .5em;} .pa-scope input:focus-visible,.pa-scope select:focus-visible,.pa-scope textarea:focus-visible,.pa-scope button:focus-visible{ outline:2px solid var(--primary);outline-offset:1px;box-shadow:none; } /* ---------- layout ---------- */ .pa-topbar{ position:sticky;top:0;z-index:60; background:var(--surface);color:var(--text); padding:14px 24px; display:flex;align-items:center;gap:16px;flex-wrap:wrap; border-bottom:var(--rule-heavy); margin:-16px -16px 20px; } .pa-brand{font-size:var(--fs-lg);font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:8px;white-space:nowrap;} .pa-brand .paw{font-size:var(--fs-xl);} .pa-brand small{display:block;font-weight:400;font-size:16px;color:var(--text-muted);letter-spacing:normal;} .pa-topbar-meta{color:var(--text-muted);margin-left:auto;white-space:nowrap;} .pa-main{padding:0 4px 32px;max-width:1520px;margin:0 auto;width:100%;} /* _Layout 共用的 wwwroot/css/menu/demo.css 有一條全站套用的 .content{margin:0 0 0 300px}。 那 300px 不是裝飾：這個後台的選單是「常駐」的固定側邊欄（position:fixed;left:0;width:300px）， 不是點了才滑出來的抽屜。把這個 margin 拿掉，內容就會整個被選單蓋住（舊版商品頁保留 300px 就是證明）。 原本會橫向捲動是因為 bootstrap.css 把 .container 寫死 width:1170px， 300px + 1170px = 1470px 超過 1440px 版面。正解是放掉那個寫死的寬度讓內容自適應， 而不是把側邊欄的留白拿掉。表格本身寬度不夠時由 .table-wrap 自己橫向捲動， 頁面層級不會出現橫向捲軸。 demo.css 在 max-width:40em 會把 margin 收回 0（手機沒有側邊欄）， 但這裡的選擇器權重比它高，所以要自己再寫一次那個斷點。 */ .container.body-content.content{ margin-left:300px;margin-right:0; width:auto;max-width:none; padding-left:16px;padding-right:16px; } @media screen and (max-width:40em){ .container.body-content.content{margin-left:0;padding-left:8px;padding-right:8px;} } /* ---------- icons ---------- */ /* emoji 當圖示會隨作業系統與瀏覽器長得不一樣、列印也印不出來，而且是全彩的——在這套灰階配色裡 它會變成畫面上唯一的異物。一律換成線性 SVG，用 currentColor 跟著所在文字的顏色走。 */ .pa-scope .icn{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;} .pa-scope .pa-brand .paw{display:inline-flex;align-items:center;} .pa-scope .pa-brand .paw .icn{width:26px;height:26px;} .pa-scope .big-icon .icn,.pa-scope .dz-icon .icn{width:32px;height:32px;} .pa-scope .drag-handle .icn{width:20px;height:20px;} /* ---------- buttons ---------- */ .pa-scope .btn{ display:inline-flex;align-items:center;gap:6px; background:var(--surface);color:var(--text);border:1px solid var(--border-strong); border-radius:var(--radius);padding:10px 16px;font-weight:700;white-space:nowrap; transition:background .12s,border-color .12s,transform .06s; /* 驗這次改動時量到「編輯」連結只有 12px：.btn 是 不是