/* ========================================================================== Order & Eat 总站导航 —— nav.css 放在 https://www.asiacuisine.be/nav/v1/nav.css 这个文件只管三件事: 1. 定义 --oe-nav-w(导航条宽度),并让 body 在左边让出这一条 2. 摆放导航条的宿主元素 #oe-nav(导航内部长什么样在 nav.js 的 Shadow DOM 里) 3. WordPress 后台的 fixed 元素补丁 两个 PHP 站各自的 fixed 补丁不在这里,在它们自己的样式表末尾。 --oe-nav-w 默认是 0px。只有 nav.js 确认当前跑在 Android / WebView2 壳里之后, 才会给 打上 data-oe-nav,宽度才变成 88px。所以在普通浏览器里, 这个文件不产生任何视觉影响,各站的补丁也全部退化成 +0。 ========================================================================== */ :root { --oe-nav-w: 0px; } html[data-oe-nav] { --oe-nav-w: 88px; } html[data-oe-nav] body { padding-left: var(--oe-nav-w); box-sizing: border-box; } /* 导航条的宿主元素。内部由 Shadow DOM 负责,这里只管它在哪、多宽、压在谁上面 */ html[data-oe-nav] #oe-nav { position: fixed; left: 0; top: 0; bottom: 0; width: var(--oe-nav-w); z-index: 2147483000; } /* 窄屏挂不下左侧条,直接关掉(--oe-nav-w 归零,各站补丁同时失效) */ @media (max-width: 640px) { html[data-oe-nav] { --oe-nav-w: 0px; } html[data-oe-nav] #oe-nav { display: none; } } /* ========================================================================== WordPress 后台补丁 body.wp-admin 是 WordPress 自己加的类,天然限定作用域, 而且优先级 (1,1,2) 高过核心样式的 (1,0,0),不怕加载顺序。 后台的左侧管理菜单(#adminmenuback / #adminmenuwrap)是 fixed 但没写 left, 用的是静态位置,body 的 padding 一推就自己跟着走,不用补。 ========================================================================== */ /* ---- 顶部管理栏(每个后台页面都有) ---- */ body.wp-admin #wpadminbar { left: var(--oe-nav-w); right: 0; width: auto; } /* ---- 媒体库弹窗 ---- */ body.wp-admin .media-modal { left: calc(30px + var(--oe-nav-w)); } body.wp-admin .media-modal-backdrop, body.wp-admin .uploader-window { left: var(--oe-nav-w); } /* ---- Thickbox(插件详情,以及不少插件的弹窗) ---- */ body.wp-admin #TB_overlay, body.wp-admin #TB_HideSelect { left: var(--oe-nav-w); right: 0; width: auto; } body.wp-admin #TB_window, body.wp-admin #TB_load { left: calc(50% + var(--oe-nav-w) / 2); /* 原本靠 left:50% + 负 margin 居中 */ } /* ---- 窄屏的菜单开关按钮(641–782px 之间才有意义) ---- */ @media screen and (max-width: 782px) { body.wp-admin #wp-responsive-toggle { left: calc(4px + var(--oe-nav-w)); } } /* ---- 以下两组尚未在真机验证过,用到了再打开 ---- 区块编辑器(在终端上编辑页面/文章时): body.wp-admin .interface-interface-skeleton { left: var(--oe-nav-w); } @media (min-width: 783px) { body.wp-admin .interface-interface-skeleton { left: calc(160px + var(--oe-nav-w)); } body.wp-admin.folded .interface-interface-skeleton { left: calc(36px + var(--oe-nav-w)); } } WooCommerce 后台的固定顶栏: body.wp-admin .woocommerce-layout__header { left: calc(160px + var(--oe-nav-w)); } body.wp-admin.folded .woocommerce-layout__header { left: calc(36px + var(--oe-nav-w)); } ---- */