/* 卖家精灵 2026 版工作台顶部导航 * * 只写工作台相对官网 header 的差异：header 根元素同时带 navx 和 wsx， * 中和层、品牌、语言、caret、pop、工具矩阵、消息中心、登录态按钮组全部直接复用 nav.css， * 本文件不重复它们，只做覆盖。选择器统一用 .navx.wsx 抬高特异性压过 nav.css 的 .navx。 * * 引用方：/jsp/cn/__v2/base/header-2026.jsp */ .ss-nav-2026{position:relative;z-index:101} .ss-nav-2026 .navx.wsx{position:static;z-index:auto;box-shadow:0 4px 10px rgba(0,0,0,.06)} /* ===== 橙底主题 ===== 与旧导航保持一致：背景取 __v2/base/header.jsp 的 .bg-new-color，前景取 front.css 的 .u-header--navbar-bg（常态 70% 白，hover 纯白）。官网侧 .navx 不带 wsx，不受影响。 */ .navx.wsx{background:linear-gradient(90deg,#FF8110 0%,#FF9A14 100%)} /* logo 换成旧导航那枚白色 svg（见 header-2026.jsp），尺寸对齐 sellersprite-webapp-new 的 138×36。 svg 自带 viewBox（2000×644）且默认 xMidYMid meet，撑到 138×36 的框里按比例居中，不会拉伸。 */ .navx.wsx .brand{width:138px;height:36px;flex:0 0 138px} .navx.wsx .brand-mark{width:138px;height:36px;flex:0 0 138px} .navx.wsx .brand-mark img{width:138px;height:36px} /* 这条特异性高于 nav.css 里常驻橙色的 .navx .product-trigger，「产品」一并被拉回常规色 */ .navx.wsx .menu>li>a,.navx.wsx .menu>li>button{color:rgba(255,255,255,.7)} .navx.wsx .menu>li:hover>a,.navx.wsx .menu>li:focus-within>a, .navx.wsx .menu>li:hover>button,.navx.wsx .menu>li:focus-within>button{color:#fff} /* AI 解读的常态紫（nav.css .navx .ai-advisor-trigger，0,2,0）已被上面那条压掉，但它的 hover 橙（nav.css:160，0,5,1）比上面的 0,4,2 高，橙字会糊进橙底；抬到 0,6,1 拉回纯白。 */ .navx.wsx .menu>li.ai-advisor-menu:hover>.ai-advisor-trigger, .navx.wsx .menu>li.ai-advisor-menu:focus-within>.ai-advisor-trigger{color:#fff} .navx.wsx .language-trigger{color:rgba(255,255,255,.7)} .navx.wsx .language-trigger:hover, .navx.wsx .language-trigger[aria-expanded="true"]{background:rgba(255,255,255,.16);color:#fff} .navx.wsx .purchase-button,.navx.wsx .profile-trigger, .navx.wsx .notification-button{color:rgba(255,255,255,.7)} .navx.wsx .purchase-button:hover,.navx.wsx .profile-trigger:hover, .navx.wsx .notification-button:hover, .navx.wsx .purchase-button:focus,.navx.wsx .profile-trigger:focus, .navx.wsx .notification-button:focus, .navx.wsx .purchase-button:active,.navx.wsx .profile-trigger:active, .navx.wsx .notification-button:active{color:#fff} /* 橙底上点击态保持白色，避免被 nav.css 的主题色 active 盖成橙色字 */ .navx.wsx .menu>li>a:active,.navx.wsx .menu>li>button:active{color:#fff} .navx.wsx .profile-trigger{border-left-color:rgba(255,255,255,.28)} .navx.wsx .nav-toggle:hover{background:rgba(255,255,255,.18)} .navx.wsx .nav-toggle span, .navx.wsx .nav-toggle span::before, .navx.wsx .nav-toggle span::after{background:#fff} /* 上一条与 nav.css 的展开态同特异性、靠加载顺序赢，得把中间那根重新压回透明 */ .navx.wsx .nav-toggle[aria-expanded="true"] span{background:transparent} .navx.wsx .caret{background:none;margin:0;line-height:normal;text-align:left;cursor:inherit} /* 工作台页面里有 z-index 较高的浮层，语言菜单跟着抬一档（官网侧 30 就够）。 出现后与 .plugin-pop 一致：贴导航底、顶部直角、底部 8px 圆角。 */ .navx.wsx .language-selector{align-self:stretch;height:64px;min-height:64px} .navx.wsx .language-menu,.navx.wsx #ssNavLanguageMenu{top:64px;z-index:99;border-radius:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:8px;border-bottom-right-radius:8px} #wsNavMenu > li >a {font-size:16px} #wsNavMenu > li > button {font-size:16px} /* ===== 产品大菜单 ===== 工作台版是「收藏列 + 5 个工具列」，没有官网那条产品线 rail： 184 + 176×5 = 1064px，与设计稿一致。高度跟随内容，靠 align-items:stretch 让收藏列等高。 */ .navx.wsx .product-mega{width:1064px;border-radius:0 0 16px 16px} .navx.wsx .product-tool-column,.navx.wsx .product-ai{height:auto;flex:0 0 176px;padding:24px 8px} .navx.wsx .product-ai{background:linear-gradient(180deg,#faf9ff 0%,#f0f2ff 100%)} .navx.wsx .product-mega .menu-tool-icon{display:none} /* 收藏列 */ .navx.wsx .favorite-column{flex:0 0 184px;max-height:414px;padding:24px 8px 24px 16px;border-right:1px solid #f0f1f2;background:#fcfdfd;overflow-y:auto} .navx.wsx .column-heading{height:18px;padding:0 8px;display:flex;align-items:center;gap:4px;color:#797b7f;font-size:13px;font-weight:500;line-height:18px} .navx.wsx .favorite-heading-icon{width:16px;height:16px;display:grid;place-items:center;color:#97a4b0;font-size:15px} .navx.wsx .favorite-list{margin-top:20px;display:flex;flex-direction:column;gap:8px} .navx.wsx .favorite-list[hidden]{display:none} .navx.wsx .favorite-list>li{display:flex;align-items:center;border-radius:4px} .navx.wsx .favorite-list>li:hover{background:#fff7ef} .navx.wsx .favorite-link{flex:1;min-width:0;display:block;padding:7px 8px;color:#1f2329;font-size:14px;font-weight:500;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .navx.wsx .favorite-list>li:hover .favorite-link{color:#fb8c1e} /* 拖动把手：整行可拖，hover 时才提示。Sortable 用的是 HTML5 drag，光标给 grab 更直观 */ .navx.wsx .favorite-list>li{cursor:grab} .navx.wsx .favorite-list>li.sortable-chosen{cursor:grabbing;background:#fff4e8} .navx.wsx .favorite-list>li.sortable-ghost{opacity:.4} /* 行内取消收藏 */ .navx.wsx .favorite-remove{width:24px;height:24px;display:grid;place-items:center;color:#fb8c1e;font-size:13px;opacity:0;flex:0 0 24px} .navx.wsx .favorite-list>li:hover .favorite-remove{opacity:1} .navx.wsx .favorite-empty{display:flex;flex-direction:column;align-items:center;text-align:center} .navx.wsx .favorite-empty[hidden]{display:none} .navx.wsx .favorite-empty img{width:120px;height:93px;margin-top:15px} .navx.wsx .favorite-empty strong{margin-top:20px;color:#1f2329;font-size:12px;font-weight:500;line-height:18px} .navx.wsx .favorite-empty p{width:148px;margin-top:8px;color:#676879;font-size:12px;line-height:18px} .navx.wsx .favorite-drag-tip{margin-top:12px;padding:0 8px;color:#b4bdc7;font-size:11px;line-height:16px} /* ===== 工具项上的收藏星标 ===== 星标只在工作台输出（官网侧由 nav-2026-tools.jsp 的 fav 参数控制，整个节点都不渲染）， 所以这里不需要再为 .navx 写隐藏规则。菜单项本身是 flex，星标靠 margin-left:auto 顶到最右。 */ .navx.wsx .menu-tool-fav{margin-left:auto;width:18px;height:18px;display:grid;place-items:center; color:#ffb552;font-size:13px;opacity:0;transition:opacity .16s;flex:0 0 18px} .navx.wsx .menu-tool:hover .menu-tool-fav{opacity:1} /* 已收藏只换颜色，显隐仍跟 hover，未收藏 / 已收藏都是悬停才出现 */ .navx.wsx .menu-tool-fav.is-faved{color:#fb8c1e} /* ===== 插件菜单 ===== */ .navx.wsx .pop.plugin-pop{left:50%;width:176px;padding:16px;border-radius:0 0 8px 8px;border-top-left-radius:0;border-top-right-radius:0;transform:translateX(-50%) translateY(8px)} .navx.wsx .menu>li:hover>.plugin-pop,.navx.wsx .menu>li:focus-within>.plugin-pop{transform:translateX(-50%) translateY(0)} .navx.wsx .plugin-title{padding:0 8px;color:#797b7f;font-size:13px;font-weight:500;line-height:18px} .navx.wsx .plugin-options{margin-top:8px;display:flex;flex-direction:column;gap:8px} .navx.wsx .plugin-option{padding:8px 12px;border-radius:8px;color:#1f2329;font-size:15px;font-weight:500;line-height:22px} .navx.wsx .plugin-option:hover{background:#fff7ef;color:#fb8c1e} /* ===== 优麦云菜单（Figma 27063:16405）===== */ .navx.wsx .pop.youmaiyun-pop{left:50%;width:360px;padding:0;overflow:visible;border-radius:0 0 8px 8px;box-sizing:border-box;box-shadow:0 4px 10px rgba(0,0,0,.08);transform:translateX(-50%) translateY(8px)} .navx.wsx .menu>li:hover>.youmaiyun-pop,.navx.wsx .menu>li:focus-within>.youmaiyun-pop{transform:translateX(-50%) translateY(0)} .navx.wsx .youmaiyun-list{padding:16px;display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:0} .navx.wsx .youmaiyun-item,.navx.wsx a.youmaiyun-item:visited{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:62px;padding:8px 10px;border-radius:8px;color:#1f2329;background:transparent} .navx.wsx .youmaiyun-item:hover,.navx.wsx .youmaiyun-item:focus,.navx.wsx .youmaiyun-item:active,.navx.wsx .youmaiyun-item:focus-within{color:#1f2329;background:#f6f6ff} .navx.wsx .youmaiyun-item-main,.navx.wsx a.youmaiyun-item-main:visited{display:flex;align-items:center;justify-content:space-between;gap:24px;flex:1;min-width:0;color:#1f2329} .navx.wsx .youmaiyun-item-copy{display:flex;flex-direction:column;gap:4px;min-width:0} .navx.wsx .youmaiyun-item-title{display:flex;align-items:center;gap:4px;color:#1f2329;font-size:15px;font-weight:500;line-height:22px;white-space:nowrap} .navx.wsx .youmaiyun-item-icon{width:14px;height:14px;flex:0 0 14px;display:block} .navx.wsx .youmaiyun-item-desc{color:#676879;font-size:12px;font-weight:400;line-height:18px;white-space:nowrap} .navx.wsx .youmaiyun-item-arrow{width:16px;height:16px;flex:0 0 16px;display:block} .navx.wsx .youmaiyun-item-mini{position:relative} .navx.wsx .youmaiyun-qr-pop{position:absolute;left:calc(100% + 24px);top:50%;z-index:3;width:152px;padding:16px 16px 0;box-sizing:border-box;background:#fff;border-radius:8px;box-shadow:-4px -4px 10px rgba(0,0,0,.08),4px 4px 10px rgba(0,0,0,.08);opacity:0;visibility:hidden;transform:translateY(-50%);pointer-events:none} .navx.wsx .youmaiyun-qr-pop::before{content:"";position:absolute;left:-8px;top:50%;width:0;height:0;border-style:solid;border-width:7.5px 8px 7.5px 0;border-color:transparent #fff transparent transparent;transform:translateY(-50%)} .navx.wsx .youmaiyun-item-mini:hover .youmaiyun-qr-pop,.navx.wsx .youmaiyun-item-mini:focus-within .youmaiyun-qr-pop{opacity:1;visibility:visible;pointer-events:auto} .navx.wsx .youmaiyun-qr-img{display:block;width:120px;height:120px;object-fit:cover} .navx.wsx .youmaiyun-qr-text{margin:0;padding:16px 10px;color:#797b7f;font-size:12px;font-weight:500;line-height:normal;letter-spacing:.46px;text-align:center;white-space:nowrap} .navx.wsx .youmaiyun-actions{display:flex;align-items:center;justify-content:center;gap:24px;padding:12px 10px;background:#fff;border-top:1px solid rgba(0,0,0,.02);border-radius:0 0 8px 8px} .navx.wsx .youmaiyun-btn{display:inline-flex;align-items:center;justify-content:center;min-width:88px;padding:7px 11px;border-radius:4px;font-size:13px;font-weight:500;line-height:normal;white-space:nowrap} .navx.wsx .youmaiyun-btn-ghost,.navx.wsx a.youmaiyun-btn-ghost:visited{border:1px solid #7a6aff;background:#fff;color:#7a6aff} .navx.wsx .youmaiyun-btn-ghost:hover,.navx.wsx .youmaiyun-btn-ghost:focus,.navx.wsx .youmaiyun-btn-ghost:active{background:#f6f6ff;color:#7a6aff;border-color:#7a6aff} .navx.wsx .youmaiyun-btn-solid,.navx.wsx a.youmaiyun-btn-solid:visited{background:#7a6aff;border:1px solid #7a6aff;color:#fff} .navx.wsx .youmaiyun-btn-solid:hover,.navx.wsx .youmaiyun-btn-solid:focus,.navx.wsx .youmaiyun-btn-solid:active{background:#6b5cf0;border-color:#6b5cf0;color:#fff} /* ===== 收藏夹一级项 ===== */ /* nav.css 的 .navx .menu>li{display:flex} 会盖掉 [hidden] 的 UA 默认 display:none， 没收藏时这一项得靠这条才真的藏起来 */ .navx.wsx .menu>li.favorite-menu[hidden]{display:none} .navx.wsx .favorite-pop{min-width:180px;max-height:420px;overflow-y:auto} .navx.wsx .favorite-pop .favorite-list{margin-top:0;gap:2px} .navx.wsx .favorite-pop .favorite-drag-tip{margin-top:8px;padding:0} /* 收藏区域滚动条 */ .navx.wsx .favorite-column,.navx.wsx .favorite-pop{scrollbar-width:thin;scrollbar-color:#d8dde3 transparent} .navx.wsx .favorite-column::-webkit-scrollbar,.navx.wsx .favorite-pop::-webkit-scrollbar{width:6px} .navx.wsx .favorite-column::-webkit-scrollbar-track,.navx.wsx .favorite-pop::-webkit-scrollbar-track{background:transparent} .navx.wsx .favorite-column::-webkit-scrollbar-thumb,.navx.wsx .favorite-pop::-webkit-scrollbar-thumb{border:1px solid transparent;border-radius:999px;background:#d8dde3;background-clip:padding-box} .navx.wsx .favorite-column::-webkit-scrollbar-thumb:hover,.navx.wsx .favorite-pop::-webkit-scrollbar-thumb:hover{background:#b9c1ca;background-clip:padding-box} /* ===== 学习中心弹窗（复用老版知识库片段）===== nav-knowledge.jsp 自带的