/* ============================================================================ * common/widget/ — 跨主題共用 Widget 基底（baseline = default 完整內容） * 本檔為模組目錄的第一支，兼作目錄索引；載入序 01 / 20 * ============================================================================ * * 用途： * 提供前台各主題共用的 Widget 基底樣式。內容為原 widgets.css 全部 + * default.css 中所有 widget 相關規則（含對 widget 容器寬度的限制、swiper * 擴充、default 獨有的 widget-categories/-product 側欄等；原一併搬入的 * widget-search 一組已於 #862 B-1 判死移除，markup 全站零引用）。 * * 設計意圖（重要）： * - default 主題是「未來所有網站的基礎標準」，本目錄即為該標準的完整呈現 * - themes/default/widget.css 故意保持空殼（default 不需要對自己的 baseline 覆寫） * - 其他主題（3ffood / kgtwbeef / dgfactor / shopLinerp）透過各自的 * themes/{theme}/widget.css 覆寫本目錄，達成主題差異化 * * 目錄結構（issue #694）： * 原單檔 common/widget.css（3,334 行）依 widget 模組拆為 19 支（phase 1）。 * 拆檔為「純行範圍搬移」，19 支依載入序 concat 後與拆檔前的原檔 byte-identical， * cascade 結果與拆檔前完全等價（原檔已搬 docs/oldData/ 供比對）。 * phase 2 逐模組整理後，19-layout-hooks.css 內容全數回收至各模組本體而移除 * （已歸檔 docs/oldData/public/web/css/common/widget/）。其後再做三件收尾： * - 抽出 20-swiper.css，承接原本寄居在 11／16 的 Swiper 套件全域覆寫 * - 抽出 21-user-side-menu.css，承接原本寄居在 17 的會員中心側選單基底 * - 18-sidebar-post.css 與 17 定義的是同一組側欄選擇器，逐字併入 17 後歸檔 * 現為 19 支。18／19 兩個編號刻意留空不重複使用，避免與已移除的同號檔在歷史紀錄上混淆。 * * ┌ 檔名 模組 原 widget.css 行範圍 * │ 01-shell.css 容器外殼（本檔） 1~88 * │ 02-banner.css 輪播 A~E ＋ 圖片顯隱 89~463 * │ 03-container.css 容器寬度與外距 464~632 * │ 04-title.css 標題 widget 633~752 * │ 05-text.css 內文 widget 753~874 * │ 06-img-text-a.css 圖文 A（A1~A4） 875~1251 * │ 07-img-text-b.css 圖文 B（含 B2） 1252~1336 * │ 08-img-text-c.css 圖文 C 1337~1471 * │ 09-img-text-d.css 圖文 D 1472~1817 * │ 10-video.css 影片 widget 1818~1878 * │ 11-image.css 純圖片 widget 1879~2068（swiper 段已移出） * │ 12-product-a.css 商品 A 2069~2182 * │ 13-product-b.css 商品 B 2183~2403 * │ 14-product-c.css 商品 C 2404~2534 * │ 15-one-image.css 單圖 ＋ 圖文B靜態置中 2535~2606 * │ 16-baseline-override.css default baseline 覆寫 2607~2678 * │ 17-sidebar-product.css 側欄 widget（商品＋貼文） 2679~2969 ＋ 2970~3100 * │ 20-swiper.css Swiper 套件全域覆寫 （自 11 尾段 ＋ 16 區段 3 彙整） * └ 21-user-side-menu.css 會員中心側選單基底 （自 17 抽出） * 已移除並歸檔 docs/oldData/： * 18-sidebar-post.css 貼文側欄 widget 2970~3100（併入 17） * 19-layout-hooks.css 骨架語意化佈局 hook 3101~3334（phase 2 回收至各模組） * * 檔名數字前綴的意義（重要）： * 前綴 = 載入順序。phase 2 完成後，**跨模組的「後段壓前段」覆寫關係已全數解除**： * 各檔選擇器互不重疊，載入序對調不改變生效值（已逐組實測），前綴僅表達閱讀順序。 * 解除過程（phase 2 六組）： * - 03-container.css ↔ 16-baseline-override.css 原本的順序相依已消除， * 改以複合選擇器分流「文字 widget 容器」與「版面容器」兩套用途； * 實測對調兩者載入序，24 個視口 × 6 種容器用法生效值完全不變。 * - 06-img-text-a.css ↔ 19-layout-hooks.css：imgTextA 的三條 hook（按鈕列置中／ * 按鈕內部 flex／內文下外距）已併回 06 本體，19 不再含 imgTextA 規則。 * - 07-img-text-b.css ↔ 15-one-image.css／19-layout-hooks.css：imgTextB 的靜態排列 * （原在 15 尾段）與輪播項外殼 .imgTextB-cell（原在 19）已收攏至 07。 * - 08-img-text-c.css ↔ 19-layout-hooks.css：imgTextC 的兩欄格線、欄寬、文字盒與 * 按鈕規則（共 6 條）已收攏至 08。 * - 10-video.css ↔ 19-layout-hooks.css：圖片／影片共用的 .widget-media-grid 系列 * 已收攏至 10（影片與圖片兩個 widget 共用，置於較早載入者）。 * - 09-img-text-d.css ↔ 19-layout-hooks.css：imgTextD 的標題列 flex、卡片標題與內文 * 靠左、內文下外距（共 3 條，含 3ffood 專屬 markup）已收攏至 09。 * - 12／13／14 ↔ 19-layout-hooks.css：商品 A 格線（.productA-grid 系列）、商品 B * 卡片文字、商品 C 圖文列（.productC-Row／-cell 系列）已分別收攏至 12／13／14； * 19 至此清空，已自 common.layout 移除並歸檔 docs/oldData/。 * 新增／調整順序一律改 config/webThemeCss.php 的 common.layout，勿依賴檔名排序。 * * 使用頁面： * - 首頁所有 widget * - 商品列表 / 詳情頁 / 新聞貼文頁的側邊欄 widget * - 後台 CKEditor 預覽（透過 ViewServiceProvider 注入 getWebThemeCssUrlsForEditor） * ↑ 前台與後台預覽共用同一份 common.layout 陣列，順序改錯兩邊會一起錯 * * 相依 vendor：owl-carousel / swiper * * 載入順序（最先到最後，後者覆寫前者）： * common/tokens.css -> common/base.css -> common/header.css -> common/sidebar.css -> * common/footer.css -> common/widget/（本目錄 19 支）-> common/announcement.css -> * common/pages/*.css -> themes/{theme}/*.css（default 為空殼）-> * themes/{theme}/pages/*.css -> custom.css * * 抽取來源（原 widget.css 的來源，拆檔後仍成立）： * - widgets.css line 30~end（line 1~28 為 FROZEN 警示） * - default.css line 4048~4062 + 4167~4175 + 4332~4336（.container max-width 覆寫） * - default.css line 6351~6356 + 6762~6775（.swiper-slide 擴充） * - default.css line 2791~3070（cluster A：商品列表側欄 widget） * - default.css line 5342~5462（cluster B：新聞貼文側欄 widget） * * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8） * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 5.5 重規劃版 v2） * issue #694（本次拆檔） * ============================================================================ */ /* ============================================================================ * widget 容器外殼（issue #706 骨架語意化） * MUST 置於本檔最前：外殼 padding 僅為 Bootstrap container 等價底線， * 後續的 .imgTextC-padding 等區塊級 padding 規則需能以 cascade 順序覆寫。 * * [好覆蓋，issue #874] 外殼的左右內距改由自訂屬性承載，主題覆寫 * .widget-shell-fluid（0,1,0）內的 --widget-shell-pad 即可調整，毋須複製規則。 * ==========================================================================*/ /* 取代 .container-fluid.p-0（滿版無留白外殼；banner A/C/E、imgTextA） */ .widget-shell-flush { width: 100%; margin-right: auto; margin-left: auto; padding: 0; } /* 取代 .container-fluid（imgTextC；padding 交由後載的 imgTextC-padding 覆寫） */ .widget-shell-fluid { --widget-shell-pad: 0.75rem; /* 外殼左右內距 */ width: 100%; margin-right: auto; margin-left: auto; padding-right: var(--widget-shell-pad, 0.75rem); padding-left: var(--widget-shell-pad, 0.75rem); } /* 取代 .container 上的 p-0（banner B/D、imgTextB）。 複合 .container 提高特異性：shopLinerp 主題有 bare .container 的 padding 規則 （手機 padding: 10px 16px），原被 p-0 的 !important 壓制，等價替換需維持勝出 */ .container.container-flush { padding: 0; }