/** * Hauzii Map Utilities * * data-hz-map「填地址或 Google 地圖網址 → 免 key embed iframe」的版面 class。 * * 分層(改之前先看懂,別把兩層混在一起): * .hz-map-wrapper ← compiler 烘出來的外層,**吃版式** * (aspect_ratio 的 inline style / frame / visibility / override class) * .hz-map-focus-container ← MapBindingProcessor 生成的內層,**只管內容**(iframe + click layer) * 值為空時內層不存在,fallback iframe 直接是 wrapper 的子元素 —— 兩種情況的 * iframe 都要填滿,所以下面的填滿規則同時涵蓋這兩條路徑。 * * 高度來源:wrapper 的 aspect-ratio。這裡給 4/3 當**預設**,aspect_ratio atom 有設值時 * 由 processor 產的 inline style 覆蓋(inline 恆勝選擇器)。沒有這個預設,未設比例的 * wrapper 高度為 auto → 內層 absolute 撐不出高度 → 地圖看不見。 * * 特異性:`:root body` 前綴是家規(對抗主題樣式,見 blocksy-theme-reset-systemic-20260630), * 與 GapDomain / HoverDomain 全家族一致。 */ :root body .hz-map-wrapper { position: relative; display: block; width: 100%; /* 預設比例;aspect_ratio atom 設值後由 inline style 覆蓋 */ aspect-ratio: 4 / 3; overflow: hidden; } :root body .hz-map-focus-container { position: absolute; inset: 0; display: block; } /* 兩條路徑的 iframe 都填滿 wrapper：processor 生成的（內層）與 fallback（直接子層） */ :root body .hz-map-focus-container > iframe, :root body .hz-map-wrapper > iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; } /* Click layer — cross-origin iframe 收不到點擊事件，編輯器靠這層才選得到地圖。基礎定位放這裡（前台 / 編輯器都載得到），編輯器專屬的 hover 提示與 active 疊層在 hz-bind-focus.css。 */ :root body .hz-map-click-layer { position: absolute; inset: 0; z-index: 10; cursor: pointer; background: transparent; } /* 前台不該擋住地圖互動（拖曳 / 縮放）。必須排除 .block-editor-iframe__body —— Gutenberg 響應式預覽 iframe 的沒有 .wp-admin / .block-editor-page class。 */ body:not(.wp-admin):not(.block-editor-iframe__body) .hz-map-click-layer { pointer-events: none; } /* 「這個地址我讀不懂」警告 — **編輯器限定**（MapPreviewNotice 只在 is_preview 時注入，前台永遠不會出現這個元素，所以這段 CSS 前台載到也沒有任何行為影響）。顏色/字級走中性做法（currentColor + em），不硬編 hex / px。 */ :root body .hz-map-notice { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 20; padding: 0.75em 1em; font-size: 0.875em; line-height: 1.5; text-align: center; color: currentColor; background: rgba(249, 115, 22, 0.92); /* 對齊編輯器 chrome 的 Hauzii 橘（同 hz-bind-focus 標籤） */ pointer-events: none; }