/* 前台与主题 / WP 顶栏共存时的细节适配 * * 注意：ceonova-pro 的 header.php 是裸，不调用 body_class()， * 因此不能依赖 body.ceo-docs-page--* 选择器；一律用页面内的 .ceo-docs-*-page。 * * 教程网顶栏是 sticky、占文档流；主题 .navBar_01 是 fixed（z-index:1009）不占流。 * 仅靠 margin-top 可能因 main/#ceotheme 外边距折叠失效，故教程布局改为 fixed 贴在导航下方。 * * 手机端主题还有固定底栏 .ceo-app-footer-fixed（约 60px）；正文区与 FAB * 必须避开它，否则会出现「滚不动 / 按钮被挡 / 点不到大纲」等问题。 */ :root { --ceo-docs-admin-bar: 0px; --ceo-docs-nav-offset: 80px; --ceo-docs-bottom-offset: 0px; } body.admin-bar { --ceo-docs-admin-bar: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --ceo-docs-admin-bar: 46px; } } /* —— 教程详情：整页布局钉在主题导航下方 —— */ .ceo-docs-doc-page { --ceo-docs-nav-offset: 80px; --header-height: 80px; --ceo-docs-bottom-offset: 0px; margin: 0; padding: 0; box-sizing: border-box; } /* 主题透明顶栏背后：与分类页同一套背景，不改导航布局 * 桌面 .navBar_01 = 1009；手机 .ceo_app_navbar = 998。 * 背景必须低于两者，否则手机会把 LOGO / 搜索 / 登录盖住。 */ .ceo-docs-nav-backdrop { position: fixed; top: 0; /* 与主题 .navBar_01 对齐 */ left: 0; right: 0; height: var(--ceo-docs-nav-offset, 80px); z-index: 990; pointer-events: none; background-color: #0a2a5c; background-size: cover; background-position: center top; background-repeat: no-repeat; overflow: hidden; } /* 教程页强制手机顶栏高于背景，避免主题其它层叠把它压下去 */ .ceo_app_navbar { z-index: 1005 !important; } .ceo-docs-nav-backdrop:not(.has-bg) { background-image: radial-gradient(ellipse 70% 90% at 12% 18%, rgba(0, 111, 255, 0.5), transparent 55%), radial-gradient(ellipse 55% 70% at 92% 78%, rgba(37, 99, 235, 0.38), transparent 50%), linear-gradient(145deg, #0b1d3a 0%, #0d3a7a 48%, #0a2a5c 100%); } .ceo-docs-nav-backdrop-mask { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(6, 22, 48, 0.86) 0%, rgba(10, 42, 92, 0.76) 46%, rgba(0, 90, 190, 0.58) 100%); } .ceo-docs-nav-backdrop.has-bg .ceo-docs-nav-backdrop-mask { background: linear-gradient(115deg, rgba(6, 22, 48, 0.9) 0%, rgba(10, 42, 92, 0.8) 44%, rgba(0, 102, 210, 0.64) 100%); } .ceo-docs-doc-page .doc-layout { position: fixed !important; top: var(--ceo-docs-nav-offset, 80px) !important; left: 0; right: 0; /* 避开主题手机底栏，否则正文被挡且 flex 子项高度算错导致滚不动 */ bottom: var(--ceo-docs-bottom-offset, 0px) !important; width: 100%; max-width: none; height: auto !important; margin: 0; z-index: 1; /* 低于主题导航 1009，避免盖住下拉菜单 */ box-sizing: border-box; display: flex; min-height: 0; overflow: hidden; } /* 手机 Safari / Chrome：flex 子项默认 min-height:auto，会撑破容器导致无法内部滚动 */ .ceo-docs-doc-page .doc-sidebar, .ceo-docs-doc-page .doc-main { min-height: 0; min-width: 0; } .ceo-docs-doc-page .doc-main { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* 窄屏左侧大纲抽屉：贴在主题导航与底栏之间 */ .ceo-docs-doc-page .doc-sidebar-left { top: var(--ceo-docs-nav-offset, var(--header-height, 80px)) !important; bottom: var(--ceo-docs-bottom-offset, 0px) !important; } /* 浮层按钮：仅窄屏抬高，避开主题底栏；桌面保留 sticky 回到顶部 */ @media (max-width: 900px) { .ceo-docs-doc-page .doc-toc-fab { bottom: calc(16px + var(--ceo-docs-bottom-offset, 0px) + env(safe-area-inset-bottom, 0px)); } .ceo-docs-doc-page .doc-search-fab { bottom: calc(78px + var(--ceo-docs-bottom-offset, 0px) + env(safe-area-inset-bottom, 0px)); } .ceo-docs-doc-page .doc-back-top { bottom: calc(134px + var(--ceo-docs-bottom-offset, 0px) + env(safe-area-inset-bottom, 0px)); } .ceo-docs-doc-page .service-qr-float { bottom: calc(16px + var(--ceo-docs-bottom-offset, 0px) + env(safe-area-inset-bottom, 0px)); } } /* 搜索浮层 / 特效 / FAB 必须高于主题导航（1009）与底栏（999） */ .ceo-docs-doc-page .doc-search-sheet { z-index: 11050; } .ceo-docs-doc-page .doc-search-fx-layer { z-index: 11040; } .ceo-docs-doc-page .doc-toc-backdrop { z-index: 11020; } /* * 开屏弹窗会被 openTechModal 挂到 body（z-index:12000）。 * 大纲打开时 JS 也会把抽屉/遮罩 port 到 body，这里保证层级压过开屏残留。 */ body > .doc-toc-backdrop.doc-toc-ported, .doc-toc-backdrop.doc-toc-ported { z-index: 12100 !important; } body > .doc-sidebar-left.doc-toc-ported, .doc-sidebar-left.doc-toc-ported { position: fixed !important; top: var(--ceo-docs-nav-offset, var(--header-height, 80px)) !important; bottom: var(--ceo-docs-bottom-offset, 0px) !important; left: 0 !important; z-index: 12110 !important; transform: translateX(0) !important; } body.doc-toc-open #popup-ad-modal, body.doc-toc-open .popup-ad-overlay { display: none !important; pointer-events: none !important; visibility: hidden !important; opacity: 0 !important; } /* 未 port 时的旧兜底：解开 layout 层叠上下文 */ body.doc-toc-open .ceo-docs-doc-page .doc-layout { z-index: auto !important; } body.doc-toc-open .ceo-docs-doc-page .doc-sidebar-left, .doc-toc-open .ceo-docs-doc-page .doc-sidebar-left { z-index: 11030 !important; } .ceo-docs-doc-page .doc-search-fab, .ceo-docs-doc-page .doc-toc-fab, .ceo-docs-doc-page .doc-back-top { z-index: 11010; } /* 右侧栏允许搜索结果面板溢出，并保证可点 */ .ceo-docs-doc-page .doc-sidebar-right { overflow: visible; position: relative; z-index: 20; } .ceo-docs-doc-page .doc-sidebar-right .doc-search { position: relative; z-index: 30; pointer-events: auto; } .ceo-docs-doc-page .doc-sidebar-right .doc-search-panel { z-index: 40; } .ceo-docs-doc-page .doc-search-input, .ceo-docs-doc-page .doc-search-clear, .ceo-docs-doc-page .doc-search-result { pointer-events: auto; } /* 列表 / 搜索页：避开固定顶栏与手机底栏 */ .ceo-docs-search-page { box-sizing: border-box; padding-top: calc(var(--ceo-docs-nav-offset, 80px) + 24px) !important; padding-bottom: calc(24px + var(--ceo-docs-bottom-offset, 0px)) !important; } .ceo-docs-home-page .container, .ceo-docs-search-page { box-sizing: border-box; } .ceo-docs-home-page .home-layout { padding-bottom: calc(64px + var(--ceo-docs-bottom-offset, 0px)) !important; } /* 主题可能重置 button，保证解锁按钮可见 */ .ceo-docs-front .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; } /* —— 顶栏跑马灯：挂到主题 .navBar_01 内 —— * 首页布局：logo(flex-1) 把菜单/登录顶到右侧。 * 教程页：logo 保持原尺寸靠左，跑马灯接过 flex-1 占中间，菜单/登录尺寸与首页一致靠右。 * 空间不足时只压缩/隐形跑马灯（仍占位），不改菜单与登录样式。 */ .navBar_01.ceo-docs-nav-with-ad > .ceo-container, #headbox.ceo-docs-nav-with-ad > .ceo-container { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start; width: 100%; max-width: 100%; min-width: 0; height: 80px; box-sizing: border-box; } /* logo：与首页同尺寸，靠左不拉伸 */ .navBar_01.ceo-docs-nav-with-ad .logo, .navBar_01.ceo-docs-nav-with-ad .ceo-logo-navBar_01, #headbox.ceo-docs-nav-with-ad .logo { flex: 0 0 auto !important; flex-grow: 0 !important; width: auto !important; max-width: none !important; height: 49px !important; margin-right: 10px !important; } .navBar_01.ceo-docs-nav-with-ad .logo img, #headbox.ceo-docs-nav-with-ad .logo img { width: auto; max-width: none; height: 100%; object-fit: contain; } /* 菜单 / 搜索 / 登录：与首页一致，整组靠右 */ .navBar_01.ceo-docs-nav-with-ad .nav, #headbox.ceo-docs-nav-with-ad .nav, .navBar_01.ceo-docs-nav-with-ad .search, #headbox.ceo-docs-nav-with-ad .search, .navBar_01.ceo-docs-nav-with-ad > .ceo-container > .ceo-visible\@s, #headbox.ceo-docs-nav-with-ad > .ceo-container > .ceo-visible\@s { flex: 0 0 auto; min-width: 0; } .navBar_01.ceo-docs-nav-with-ad .ceo-users-lore, #headbox.ceo-docs-nav-with-ad .ceo-users-lore { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center; white-space: nowrap; } .navBar_01.ceo-docs-nav-with-ad .ceo-users-lore > a, #headbox.ceo-docs-nav-with-ad .ceo-users-lore > a { white-space: nowrap; flex-shrink: 0; } /* 菜单间距/字号跟首页 diy.css 一致，不要缩小 */ .navBar_01.ceo-docs-nav-with-ad .nav > ul, #headbox.ceo-docs-nav-with-ad .nav > ul { display: flex; flex-wrap: nowrap; align-items: center; white-space: nowrap; } .navBar_01.ceo-docs-nav-with-ad .nav > ul > li, #headbox.ceo-docs-nav-with-ad .nav > ul > li { margin: 0 15px; flex-shrink: 0; } .navBar_01.ceo-docs-nav-with-ad .nav > ul > li > a, #headbox.ceo-docs-nav-with-ad .nav > ul > li > a { font-size: 16px; padding: 27px 0; } /* 跑马灯：占满 logo 与菜单之间的弹性空间，把菜单/登录顶到右侧 */ .navBar_01 .header-ad-marquee, #headbox .header-ad-marquee, .ceo_app_navbar .header-ad-marquee { flex: 1 1 auto; min-width: 0; max-width: none; width: auto; height: 40px; margin: 0 16px; align-self: center; overflow: hidden; } .navBar_01 .header-ad-marquee.is-compact, #headbox .header-ad-marquee.is-compact { max-width: 220px; margin: 0 10px; } /* 隐藏内容但仍 flex 占位，保证菜单继续靠右（等同首页 logo flex-1） */ .navBar_01 .header-ad-marquee.is-hidden-fit, #headbox .header-ad-marquee.is-hidden-fit { visibility: hidden !important; pointer-events: none !important; height: 0 !important; border: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; background: transparent !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; overflow: hidden !important; } /* 主题顶栏偏深色透明：提高文字对比度 */ .navBar_01 .header-ad-item, #headbox .header-ad-item { color: #f5fbff; -webkit-text-fill-color: #f5fbff; font-size: 0.92rem; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 0 14px rgba(96, 165, 255, 0.55); } .navBar_01 .header-ad-sep, #headbox .header-ad-sep { color: #9fd0ff; margin: 0 1rem; } .navBar_01 .header-ad-marquee, #headbox .header-ad-marquee { border-color: rgba(255, 255, 255, 0.38); background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(96, 165, 255, 0.22), rgba(255, 255, 255, 0.16)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 16px rgba(0, 40, 120, 0.28); } /* 中窄屏桌面顶栏：跑马灯内容隐藏，但仍占位把右侧顶住 */ @media (max-width: 1100px) { .navBar_01 .header-ad-marquee, #headbox .header-ad-marquee { display: block !important; /* 覆盖 app.css 的 display:none，保留占位 */ visibility: hidden; pointer-events: none; height: 0; border: 0; margin: 0; padding: 0; box-shadow: none; background: transparent; flex: 1 1 auto; min-width: 0; max-width: none; overflow: hidden; } } /* 手机顶栏空间紧：不插跑马灯、不改 logo flex，避免遮挡搜索/登录 */ @media (max-width: 960px) { .ceo_app_navbar .header-ad-marquee { display: none !important; } .ceo_app_navbar .logo.ceo-flex-1, .ceo_app_navbar > .ceo-container > .logo { flex: 1 1 auto !important; max-width: none !important; } } /* 教程详情页隐藏主题浮动广告，避免挡内容 */ body.ceo-docs-page--doc #floating-ad, .ceo-docs-doc-page ~ #floating-ad { display: none !important; } /* 密码解锁弹窗：挂到 body 后需压过主题导航/开屏 */ body > #password-modal.doc-modal-overlay, #password-modal.doc-modal-overlay { z-index: 12150 !important; }