/* 全站按钮统一使用与商品卡片一致的圆角，不再使用胶囊形按钮 */ :root { --site-card-button-radius: 0.5rem; } html[data-site-theme="tigercloset"] { --site-card-button-radius: 2px; } html body button, html body [role="button"], html body #creatorPromoLink, html body #weidianBuyBtn, html body #energyWelcomePopupContent a, html body .product-card-buy-btn, html body .detail-search-sort-btn, html body #detailSearchLoadMore { border-radius: var(--site-card-button-radius) !important; } /* 顶部搜索容器、详情购买入口也与商品卡片保持一致 */ html body #detailSearchForm, html body #detailBuyBtn, html body #detailSecondaryBuyBtn, html body #detailBottomBuyBtn, html body #detailWeidianBtn, html body #detailNotFoundBackBtn { border-radius: var(--site-card-button-radius) !important; } /* 详情页返回按钮仅保留箭头，不显示任何圆形/方形底板 */ html body #detailBackBtn, html[data-site-theme="tigercloset"] body #detailBackBtn { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } /* 统一交互控件：所有按钮、输入框、下拉框均与详情页 Buy Now 使用相同圆角 */ :root, html[data-site-theme="tigercloset"] { --site-card-button-radius: 0.5rem; } html body button, html body input, html body select, html body textarea, html body [role="button"], html body #detailSearchForm, html body #creatorPromoLink, html body #weidianBuyBtn, html body #detailWeidianBtn, html body #detailBuyBtn, html body #detailSecondaryBuyBtn, html body #detailBottomBuyBtn, html body #detailNotFoundBackBtn, html body .product-card-buy-btn, html body .detail-search-sort-btn, html body #detailSearchLoadMore, html body .settings-language-toggle, html body .detail-menu-option { border-radius: var(--site-card-button-radius) !important; } /* 三条线图标只显示图标，不显示底部半透明方块或边框 */ html body #detailMoreBtn, html body #globalSettingsBtn, html[data-site-theme="tigercloset"] body #detailMoreBtn, html[data-site-theme="tigercloset"] body #globalSettingsBtn { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; } #detailMoreMenuWrap, #globalSettingsMenuWrap { position: relative; } #detailMoreMenu, #globalSettingsMenu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 220; width: min(320px, calc(100vw - 24px)); max-height: min(74vh, 620px); overflow-y: auto; overscroll-behavior: contain; background: var(--theme-card) !important; border: 1px solid var(--theme-border) !important; border-radius: 14px !important; box-shadow: 0 22px 56px rgba(0, 0, 0, 0.34); color: #f8fafc; } #detailMoreMenu.hidden, #globalSettingsMenu.hidden { display: none !important; } #detailMoreMenu .detail-menu-section + .detail-menu-section, #globalSettingsMenu .detail-menu-section + .detail-menu-section { border-top: 1px solid var(--theme-border); } #detailMoreMenu .detail-menu-heading, #globalSettingsMenu .detail-menu-heading { color: #9ca3af; font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: none; padding: 13px 12px 7px; } .settings-currency-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 4px 10px 13px; } .settings-theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 4px 10px 13px; } #detailMoreMenu .detail-menu-option, #globalSettingsMenu .detail-menu-option { min-width: 0; min-height: 34px; padding: 7px 8px; justify-content: center; text-align: center; color: #d1d5db; background: transparent; border: 1px solid var(--theme-border-light); font-size: 12px; font-weight: 700; line-height: 1.1; } #detailMoreMenu .detail-menu-option.is-active, #globalSettingsMenu .detail-menu-option.is-active { color: var(--theme-primary) !important; background: var(--theme-primary-alpha) !important; border-color: var(--theme-primary) !important; } #detailMoreMenu .detail-menu-option-label, #globalSettingsMenu .detail-menu-option-label { overflow: visible; text-overflow: clip; } .settings-language-toggle { width: 100%; min-height: 58px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #f8fafc; background: transparent !important; border: 0 !important; text-align: left; } .settings-language-current { display: block; margin-top: 4px; color: #d1d5db; font-size: 13px; font-weight: 700; } .settings-language-toggle[aria-expanded="true"] > i { transform: rotate(90deg); } .settings-language-toggle > i { transition: transform .18s ease; } .settings-language-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 10px 13px; } .settings-language-options.hidden { display: none !important; } html[data-site-theme="tigercloset"] #detailMoreMenu, html[data-site-theme="tigercloset"] #globalSettingsMenu { background: #ffffff !important; border-color: #e5e7eb !important; color: #111827 !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14) !important; } html[data-site-theme="tigercloset"] .settings-language-toggle, html[data-site-theme="tigercloset"] .settings-language-current { color: #111827 !important; } html[data-site-theme="tigercloset"] #detailMoreMenu .detail-menu-option, html[data-site-theme="tigercloset"] #globalSettingsMenu .detail-menu-option { color: #374151 !important; border-color: #e5e7eb !important; } html[data-site-theme="tigercloset"] #detailMoreMenu .detail-menu-option.is-active, html[data-site-theme="tigercloset"] #globalSettingsMenu .detail-menu-option.is-active { color: #9a6418 !important; background: #fff8ed !important; border-color: #d8a75b !important; } @media (max-width: 767px) { #detailMoreMenu, #globalSettingsMenu { width: min(310px, calc(100vw - 20px)); right: 0; } .settings-currency-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Light：只将深色背景替换成白色，保留当前站点字体与黄色强调色 */ html[data-color-mode="light"] body, html[data-color-mode="light"] #productDetailPage, html[data-color-mode="light"] #productListPage { background: #ffffff !important; color: #111827 !important; } html[data-color-mode="light"] nav, html[data-color-mode="light"] .sticky, html[data-color-mode="light"] #globalAppLoader, html[data-color-mode="light"] #detailBottomBar { background: #ffffff !important; } html[data-color-mode="light"] .text-white, html[data-color-mode="light"] .text-gray-100, html[data-color-mode="light"] .text-gray-200, html[data-color-mode="light"] .text-gray-300, html[data-color-mode="light"] #productDetailPage .detail-title, html[data-color-mode="light"] #productDetailPage .detail-strong, html[data-color-mode="light"] #productDetailPage .detail-white, html[data-color-mode="light"] #detailOriginalLink, html[data-color-mode="light"] #detailSearchInput { color: #111827 !important; } html[data-color-mode="light"] .text-gray-400, html[data-color-mode="light"] .text-gray-500, html[data-color-mode="light"] .text-gray-600, html[data-color-mode="light"] #productDetailPage .detail-muted { color: #6b7280 !important; } html[data-color-mode="light"] #productDetailPage .detail-price, html[data-color-mode="light"] #productDetailPage #detailBrandName, html[data-color-mode="light"] #modalPrice, html[data-color-mode="light"] #productGrid p, html[data-color-mode="light"] .text-\[var\(--theme-primary\)\] { color: var(--theme-primary) !important; } html[data-color-mode="light"] #productDetailPage .detail-header, html[data-color-mode="light"] #productDetailPage .detail-panel, html[data-color-mode="light"] #productDetailPage .detail-subpanel, html[data-color-mode="light"] #detailMoreMenu, html[data-color-mode="light"] #globalSettingsMenu, html[data-color-mode="light"] #settingsContent, html[data-color-mode="light"] #agentModalContent, html[data-color-mode="light"] #modalContent, html[data-color-mode="light"] #subCategoryDropdownList, html[data-color-mode="light"] #sortDropdownList { background: #ffffff !important; border-color: var(--theme-border) !important; } html[data-color-mode="light"] #productGrid > div { background: #ffffff !important; border-color: var(--theme-border) !important; } html[data-color-mode="light"] input::placeholder { color: #9ca3af !important; } html[data-color-mode="light"] #detailMoreMenu, html[data-color-mode="light"] #globalSettingsMenu, html[data-color-mode="light"] .settings-language-toggle, html[data-color-mode="light"] .settings-language-current, html[data-color-mode="light"] #detailMoreMenu .detail-menu-option, html[data-color-mode="light"] #globalSettingsMenu .detail-menu-option { color: #111827 !important; } html[data-color-mode="light"] #detailMoreMenu .detail-menu-option.is-active, html[data-color-mode="light"] #globalSettingsMenu .detail-menu-option.is-active { color: var(--theme-primary) !important; background: var(--theme-primary-alpha) !important; border-color: var(--theme-primary) !important; } /* 手动切换到 Light 时只改变配色，不切换为 tigercloset 字体 */ html[data-site-theme="tigercloset"][data-preserve-site-font="true"] body, html[data-site-theme="tigercloset"][data-preserve-site-font="true"] button, html[data-site-theme="tigercloset"][data-preserve-site-font="true"] input, html[data-site-theme="tigercloset"][data-preserve-site-font="true"] select, html[data-site-theme="tigercloset"][data-preserve-site-font="true"] textarea, html[data-site-theme="tigercloset"][data-preserve-site-font="true"] a, html[data-site-theme="tigercloset"][data-preserve-site-font="true"] #mainNavTitle, html[data-site-theme="tigercloset"][data-preserve-site-font="true"] #modalPrice, html[data-site-theme="tigercloset"][data-preserve-site-font="true"] #productGrid p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif !important; } /* 2026-06-16：修复设置菜单层级、统一详情控件圆角，并去除 PC 端重复购买按钮 */ #productListNav { position: relative !important; z-index: 90 !important; overflow: visible !important; } #productDetailPage .detail-header { z-index: 90 !important; overflow: visible !important; } #globalSettingsMenuWrap, #detailMoreMenuWrap { position: relative !important; z-index: 95 !important; } #globalSettingsMenu, #detailMoreMenu { z-index: 99 !important; } /* 与 detailSecondaryBuyBtn 使用完全一致的圆角，覆盖 detail-subpanel 的 18px 圆角 */ html body #productDetailPage #detailSearchForm, html body #productDetailPage #detailOriginalLinkWrap, html body #productDetailPage #detailWeidianBtn { border-radius: var(--site-card-button-radius) !important; } /* 搜索框右侧提交按钮也使用同样圆角 */ html body #productDetailPage #detailSearchForm > button[type="submit"] { border-radius: var(--site-card-button-radius) !important; } /* PC 端只保留上方主 Buy Now，隐藏 Open Weidian 下方的重复按钮 */ @media (min-width: 768px) { #productDetailPage #detailSecondaryBuyBtn { display: none !important; } } /* 2026-06-16：设置菜单使用 body 级浮层，彻底避免被 sticky 分类栏和商品内容遮挡 */ #globalSettingsMenu.settings-menu-portal, #detailMoreMenu.settings-menu-portal { position: fixed !important; top: var(--settings-menu-top, 72px) !important; left: auto !important; right: var(--settings-menu-right, 12px) !important; z-index: 2147483000 !important; isolation: isolate; transform: translateZ(0); -webkit-transform: translateZ(0); } body.settings-menu-is-open::after { content: ""; position: fixed; inset: 0; z-index: 2147482990; background: transparent; pointer-events: none; } /* 主 Buy Now：与上方搜索框、链接框、Open Weidian 使用相同圆角 */ html body #productDetailPage #detailBuyBtn { border-radius: var(--site-card-button-radius) !important; } /* 2026-06-17：详情页按钮与商品卡片购买按钮保持相同弧度，不再显示为圆形/胶囊形。 */ html body #productDetailPage #detailHeaderShareBtn, html body #productDetailPage #detailBottomShareBtn, html body #productDetailPage #detailBuyBtn, html body #productDetailPage #detailSecondaryBuyBtn, html body #productDetailPage #detailBottomBuyBtn, html body #productDetailPage #detailWeidianBtn { border-radius: var(--site-card-button-radius) !important; } /* repsldng.shop：商品列表、搜索结果和详情页标题与价格加粗。 */ html[data-site-repsldng="true"] #productGrid .product-card h2, html[data-site-repsldng="true"] #productGrid .product-card p[translate="no"], html[data-site-repsldng="true"] #detailSearchResultsGrid .product-card h2, html[data-site-repsldng="true"] #detailSearchResultsGrid .product-card p[translate="no"], html[data-site-repsldng="true"] #detailTitle, html[data-site-repsldng="true"] #detailPrice { font-weight: 900 !important; font-synthesis: weight; } /* 有质检图的商品，在首页列表和独立搜索列表的主图左上角显示 QC AVAILABLE。 */ .product-qc-badge { position: absolute; top: 8px; left: 8px; z-index: 30; display: inline-flex; align-items: center; justify-content: center; gap: 0; min-height: 28px; padding: 4px 7px; border: 1px solid rgba(22, 163, 74, 0.38); border-radius: var(--site-card-button-radius) !important; background: rgba(255, 255, 255, 0.94); color: #16a34a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: 0.035em; white-space: nowrap; pointer-events: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* 独立搜索页：缩小两张商品卡片之间的间距，并扩大卡片可用宽度。 */ #detailSearchResultsGrid { gap: 10px !important; } /* 详情页独立搜索结果：桌面端和移动端都保留左右安全间距。 */ #detailSearchResultsSection { width: 100%; max-width: 1280px; margin-left: auto !important; margin-right: auto !important; padding-left: 18px !important; padding-right: 18px !important; box-sizing: border-box; } #detailSearchResultsSection > .detail-panel { width: 100%; box-sizing: border-box; overflow: hidden; } @media (max-width: 767px) { #detailSearchResultsSection { margin-left: auto !important; margin-right: auto !important; padding-left: 12px !important; padding-right: 12px !important; } #detailSearchResultsSection > .detail-panel { padding-left: 8px !important; padding-right: 8px !important; border-left-width: 1px !important; border-right-width: 1px !important; border-radius: 16px !important; } #detailSearchResultsGrid { column-gap: 6px !important; row-gap: 10px !important; } #detailSearchResultsGrid .product-card > div:last-child { padding-left: 10px !important; padding-right: 10px !important; } #detailSearchResultsGrid .product-card-buy-wrap { padding-left: 0; padding-right: 0; } .product-qc-badge { top: 6px; left: 6px; min-height: 25px; padding: 3px 6px; font-size: 10px; } } /* 2026-06-17：移动端底部购买按钮完整显示 + Help & support 标题 */ #productDetailPage #detailBottomBar { gap: 8px !important; padding-left: 10px !important; padding-right: 10px !important; } #productDetailPage #detailBottomPrice { flex: 0 1 auto; min-width: 0; font-size: clamp(16px, 4.8vw, 20px) !important; line-height: 1; } #productDetailPage #detailBottomActions { flex: 0 0 auto; min-width: 0; margin-left: auto; gap: 7px !important; } #productDetailPage #detailBottomShareBtn { width: 44px !important; min-width: 44px !important; height: 48px !important; } #productDetailPage #detailBottomBuyBtn { width: max-content !important; min-width: 0 !important; max-width: none !important; flex: 0 0 auto !important; white-space: nowrap !important; padding-left: 14px !important; padding-right: 14px !important; gap: 7px !important; } #productDetailPage #detailBottomBuyText { display: inline-block !important; min-width: max-content !important; max-width: none !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; font-size: 14px !important; line-height: 1 !important; } #productDetailPage #detailBottomBuyBtn.detail-bottom-buy-medium { padding-left: 10px !important; padding-right: 10px !important; gap: 5px !important; } #productDetailPage #detailBottomBuyBtn.detail-bottom-buy-medium #detailBottomBuyText { font-size: 11.5px !important; letter-spacing: -0.02em; } #productDetailPage #detailBottomBuyBtn.detail-bottom-buy-long { padding-left: 7px !important; padding-right: 7px !important; gap: 4px !important; } #productDetailPage #detailBottomBuyBtn.detail-bottom-buy-long > i { font-size: 16px !important; } #productDetailPage #detailBottomBuyBtn.detail-bottom-buy-long #detailBottomBuyText { font-size: 10px !important; letter-spacing: -0.035em; } /* 两篇帮助文章上方的分区标题。 */ #detailGuidesMount .detail-guide-section-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 2px 4px 10px; color: #f8fafc; font-size: 16px; font-weight: 900; line-height: 1.25; text-align: left; } #detailGuidesMount .detail-guide-section-heading::before { content: ""; display: block; width: 3px; min-width: 3px; height: 22px; border-radius: 999px; background: var(--theme-primary); box-shadow: 0 0 0 1px var(--theme-primary-alpha); } html[data-color-mode="light"] #detailGuidesMount .detail-guide-section-heading, html[data-site-theme="tigercloset"] #detailGuidesMount .detail-guide-section-heading { color: #111827; } @media (max-width: 389px) { #productDetailPage #detailBottomBar { gap: 6px !important; padding-left: 8px !important; padding-right: 8px !important; } #productDetailPage #detailBottomPrice { font-size: 15px !important; } #productDetailPage #detailBottomActions { gap: 5px !important; } #productDetailPage #detailBottomShareBtn { width: 40px !important; min-width: 40px !important; } #productDetailPage #detailBottomBuyBtn.detail-bottom-buy-medium #detailBottomBuyText { font-size: 10.5px !important; } #productDetailPage #detailBottomBuyBtn.detail-bottom-buy-long #detailBottomBuyText { font-size: 9px !important; } } /* 2026-06-17：全部商品列表改为更紧凑的间距，让商品卡片更宽 */ #productListPage { width: 100%; max-width: 1440px !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box; } #productGrid { width: 100%; column-gap: 8px !important; row-gap: 10px !important; } /* 独立搜索结果页同步使用相同的紧凑卡片布局 */ #detailSearchResultsSection { width: 100%; max-width: 1440px !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box; } #detailSearchResultsSection > .detail-panel { width: 100%; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box; } #detailSearchResultsGrid { width: 100%; column-gap: 8px !important; row-gap: 10px !important; } @media (min-width: 640px) { #productListPage, #detailSearchResultsSection { padding-left: 14px !important; padding-right: 14px !important; } #productGrid, #detailSearchResultsGrid { column-gap: 12px !important; row-gap: 14px !important; } #detailSearchResultsSection > .detail-panel { padding-left: 12px !important; padding-right: 12px !important; } } @media (max-width: 639px) { #productGrid .product-card > div:last-child, #detailSearchResultsGrid .product-card > div:last-child { padding-left: 9px !important; padding-right: 9px !important; } } /* 2026-06-17：Light 模式下，非白色实心按钮统一使用白色文字 */ html[data-color-mode="light"] { --theme-button-text: #ffffff; } /* 使用主题按钮色或渐变色的按钮 */ html[data-color-mode="light"] #topSignupBtn, html[data-color-mode="light"] .product-card-buy-btn, html[data-color-mode="light"] #mainBuyBtn, html[data-color-mode="light"] #productDetailPage .detail-accent-bg, html[data-color-mode="light"] .detail-search-sort-btn.is-active, html[data-color-mode="light"] #paginationNumbers button[class*="bg-[var(--theme-button)]"], html[data-color-mode="light"] #categoryContainer button[class*="bg-[var(--theme-button)]"], html[data-color-mode="light"] #templateToggles button[class*="bg-[var(--theme-button)]"], html[data-color-mode="light"] button[class*="bg-gradient-to-r"], html[data-color-mode="light"] button[class*="bg-[var(--theme-button)]"], html[data-color-mode="light"] a[class*="bg-[var(--theme-button)]"] { color: #ffffff !important; } /* 黑色或深色背景按钮也保持白字 */ html[data-color-mode="light"] button[class*="bg-black/"], html[data-color-mode="light"] a[class*="bg-black/"], html[data-color-mode="light"] #closeModal, html[data-color-mode="light"] #detailGalleryPrev, html[data-color-mode="light"] #detailGalleryNext { color: #ffffff !important; } /* 彩色按钮内的图标、文字节点继承白色，避免被 Light 全局文字规则改回黑色 */ html[data-color-mode="light"] #topSignupBtn *, html[data-color-mode="light"] .product-card-buy-btn *, html[data-color-mode="light"] #mainBuyBtn *, html[data-color-mode="light"] #productDetailPage .detail-accent-bg *, html[data-color-mode="light"] .detail-search-sort-btn.is-active *, html[data-color-mode="light"] button[class*="bg-gradient-to-r"] *, html[data-color-mode="light"] button[class*="bg-[var(--theme-button)]"] *, html[data-color-mode="light"] a[class*="bg-[var(--theme-button)]"] *, html[data-color-mode="light"] button[class*="bg-black/"] * { color: inherit !important; } /* 原本透明、悬停后才变成主题色的按钮：悬停时改为白字 */ html[data-color-mode="light"] #creatorPromoLink:hover { color: #ffffff !important; } /* 2026-06-17：修复移动端分页横向溢出和左侧内容被截断 */ @media (max-width: 639px) { #paginationControls:not(.hidden), #detailSearchPaginationControls:not(.hidden) { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "page-size page-size page-size" "previous page-numbers next"; align-items: center; justify-items: center; width: 100% !important; max-width: 100% !important; overflow: visible !important; gap: 10px 6px !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; } #pageSizeContainer, #detailSearchPaginationControls > div:first-child { grid-area: page-size; width: 100%; justify-content: center; } #paginationPrev, #detailSearchPaginationPrev { grid-area: previous; min-width: 58px !important; padding-left: 10px !important; padding-right: 10px !important; } #paginationNumbers, #detailSearchPaginationNumbers { grid-area: page-numbers; min-width: 0 !important; max-width: 100% !important; gap: 5px !important; overflow: visible !important; } #paginationNext, #detailSearchPaginationNext { grid-area: next; min-width: 58px !important; padding-left: 10px !important; padding-right: 10px !important; } #paginationNumbers button, #detailSearchPaginationNumbers button { min-width: 34px !important; width: 34px !important; height: 36px !important; padding-left: 4px !important; padding-right: 4px !important; } #pageSizeSelect, #detailSearchPageSizeSelect { min-width: 76px; text-align: center; text-align-last: center; } } /* 2026-06-17：PC 端顶部导航、筛选区、商品列表左右边缘统一垂直对齐 */ .product-list-content-shell { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 8px; padding-right: 8px; box-sizing: border-box; } #productListNav > .product-list-content-shell, #productListFilters > .product-list-content-shell, #productListPage.product-list-content-shell { width: 100%; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } @media (min-width: 640px) { .product-list-content-shell { padding-left: 14px; padding-right: 14px; } } @media (min-width: 1024px) { .product-list-content-shell { padding-left: 20px !important; padding-right: 20px !important; } /* 覆盖之前商品区单独设置的 14px，确保顶部和商品卡片起始线一致 */ #productListPage, #productListNav > .product-list-content-shell, #productListFilters > .product-list-content-shell { max-width: 1440px !important; padding-left: 20px !important; padding-right: 20px !important; } } /* 2026-06-17：移动端分页强制单行显示 */ @media (max-width: 639px) { #paginationControls:not(.hidden), #detailSearchPaginationControls:not(.hidden) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; gap: 4px !important; padding: 18px 2px !important; overflow: hidden !important; box-sizing: border-box !important; } #pageSizeContainer, #detailSearchPaginationControls > div:first-child { grid-area: auto !important; width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; justify-content: center !important; gap: 0 !important; } #paginationPrev, #detailSearchPaginationPrev, #paginationNext, #detailSearchPaginationNext { grid-area: auto !important; flex: 0 0 auto !important; min-width: 46px !important; width: 46px !important; height: 34px !important; padding: 0 5px !important; font-size: 11px !important; line-height: 1 !important; } #paginationNumbers, #detailSearchPaginationNumbers { grid-area: auto !important; display: flex !important; flex: 0 0 auto !important; min-width: 0 !important; max-width: none !important; gap: 3px !important; overflow: visible !important; } #paginationNumbers button, #detailSearchPaginationNumbers button { flex: 0 0 30px !important; min-width: 30px !important; width: 30px !important; height: 34px !important; padding: 0 !important; font-size: 12px !important; line-height: 1 !important; } #pageSizeSelect, #detailSearchPageSizeSelect { flex: 0 0 56px !important; min-width: 56px !important; width: 56px !important; height: 34px !important; padding: 0 18px 0 7px !important; font-size: 12px !important; line-height: 1 !important; text-align: center !important; text-align-last: center !important; } #paginationInfo, #detailSearchPaginationInfo, #pageSizeContainer > span, #detailSearchPerPageLabel { display: none !important; } } /* 极窄屏幕继续压缩，仍保持同一行 */ @media (max-width: 359px) { #paginationControls:not(.hidden), #detailSearchPaginationControls:not(.hidden) { gap: 3px !important; padding-left: 0 !important; padding-right: 0 !important; } #paginationPrev, #detailSearchPaginationPrev, #paginationNext, #detailSearchPaginationNext { min-width: 42px !important; width: 42px !important; font-size: 10px !important; } #paginationNumbers button, #detailSearchPaginationNumbers button { flex-basis: 28px !important; min-width: 28px !important; width: 28px !important; } #pageSizeSelect, #detailSearchPageSizeSelect { flex-basis: 52px !important; min-width: 52px !important; width: 52px !important; } } /* 2026-06-17：Light 模式下详情图片数量角标固定为黑底白字 */ html[data-color-mode="light"] #detailImageCounter, html[data-color-mode="light"] #detailImageCounter * { color: #ffffff !important; } html[data-color-mode="light"] #detailImageCounter { background: rgba(0, 0, 0, 0.72) !important; -webkit-text-fill-color: #ffffff !important; } /* 2026-06-17：移动端商品列表与搜索结果增加左右留白 */ @media (max-width: 639px) { #productListPage.product-list-content-shell, #productListPage { padding-left: 16px !important; padding-right: 16px !important; } #detailSearchResultsSection { padding-left: 16px !important; padding-right: 16px !important; } #detailSearchResultsSection > .detail-panel { padding-left: 12px !important; padding-right: 12px !important; } } /* Product link copied 提示固定黑底白字，避免 Light 模式下文字看不清 */ #copyLinkToast, #copyLinkToast * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #copyLinkToast { background: rgba(0, 0, 0, 0.88) !important; border-color: rgba(255, 255, 255, 0.22) !important; } /* 2026-06-17：移动端首页顶部控件与商品列表使用相同左右边距 */ @media (max-width: 639px) { #productListNav > .product-list-content-shell, #productListFilters > .product-list-content-shell, #productListPage.product-list-content-shell { padding-left: 16px !important; padding-right: 16px !important; } /* 搜索框、注册按钮、目录和筛选下拉都不能超出统一内容区 */ #productListNav #topBannerActions, #productListNav #creatorPromoLink, #productListNav #searchInput, #productListFilters #categoryContainer, #productListFilters .grid { max-width: 100%; box-sizing: border-box; } } /* Help & support 标题和第一篇文章之间不要保留过大的空白 */ #detailGuidesMount .detail-guide-list { gap: 8px !important; } #detailGuidesMount .detail-guide-section-heading { margin-bottom: 0 !important; padding-bottom: 2px !important; } #detailGuidesMount .detail-guide-section-heading + .detail-guide-card { margin-top: 0 !important; } /* 2026-06-17：详情页第二购买按钮按主题切换文字颜色 */ html[data-color-mode="light"] #detailSecondaryBuyBtn, html[data-color-mode="light"] #detailSecondaryBuyBtn * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } html[data-color-mode="dark"] #detailSecondaryBuyBtn, html[data-color-mode="dark"] #detailSecondaryBuyBtn * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Light 和 Dark 模式下，所有商品价格统一使用红色 */ html[data-color-mode="light"] #productGrid .product-card p[translate="no"], html[data-color-mode="light"] #detailSearchResultsGrid .product-card p[translate="no"], html[data-color-mode="light"] #detailPrice, html[data-color-mode="light"] #detailBottomPrice, html[data-color-mode="light"] #modalPrice, html[data-color-mode="dark"] #productGrid .product-card p[translate="no"], html[data-color-mode="dark"] #detailSearchResultsGrid .product-card p[translate="no"], html[data-color-mode="dark"] #detailPrice, html[data-color-mode="dark"] #detailBottomPrice, html[data-color-mode="dark"] #modalPrice { color: #ef4444 !important; -webkit-text-fill-color: #ef4444 !important; } /* ========================================================================== */ /* 2026-08-05 Street Rock theme */ /* Dark: black + electric yellow. Light: warm poster paper + electric yellow. */ /* ========================================================================== */ html[data-color-mode="dark"] { color-scheme: dark; } html[data-color-mode="light"] { color-scheme: light; } /* Both themes share the same high-contrast yellow button with black text. */ html[data-color-mode] #topSignupBtn, html[data-color-mode] .product-card-buy-btn, html[data-color-mode] #mainBuyBtn, html[data-color-mode] #productDetailPage .detail-accent-bg, html[data-color-mode] .detail-search-sort-btn.is-active, html[data-color-mode] #paginationNumbers button[class*="bg-[var(--theme-button)]"], html[data-color-mode] #detailSearchPaginationNumbers button[class*="bg-[var(--theme-button)]"], html[data-color-mode] #categoryContainer button[class*="bg-[var(--theme-button)]"], html[data-color-mode] #templateToggles button[class*="bg-[var(--theme-button)]"], html[data-color-mode] button[class*="bg-gradient-to-r"], html[data-color-mode] button[class*="bg-[var(--theme-button)]"], html[data-color-mode] a[class*="bg-[var(--theme-button)]"] { color: var(--theme-button-text) !important; -webkit-text-fill-color: var(--theme-button-text) !important; } html[data-color-mode] #topSignupBtn *, html[data-color-mode] .product-card-buy-btn *, html[data-color-mode] #mainBuyBtn *, html[data-color-mode] #productDetailPage .detail-accent-bg *, html[data-color-mode] .detail-search-sort-btn.is-active *, html[data-color-mode] button[class*="bg-gradient-to-r"] *, html[data-color-mode] button[class*="bg-[var(--theme-button)]"] *, html[data-color-mode] a[class*="bg-[var(--theme-button)]"] * { color: inherit !important; -webkit-text-fill-color: inherit !important; } /* Page surfaces */ html[data-color-mode] body, html[data-color-mode] #productListPage, html[data-color-mode] #productDetailPage { background: var(--theme-base) !important; } html[data-color-mode] nav, html[data-color-mode] .sticky, html[data-color-mode] #globalAppLoader, html[data-color-mode] #detailBottomBar { background: var(--theme-base) !important; } html[data-color-mode] #productDetailPage .detail-header, html[data-color-mode] #productDetailPage .detail-panel, html[data-color-mode] #detailMoreMenu, html[data-color-mode] #globalSettingsMenu, html[data-color-mode] #settingsContent, html[data-color-mode] #agentModalContent, html[data-color-mode] #modalContent, html[data-color-mode] #subCategoryDropdownList, html[data-color-mode] #sortDropdownList, html[data-color-mode] #productGrid > div, html[data-color-mode] #detailSearchResultsGrid > div, html[data-color-mode] .detail-guide-card { background: var(--theme-card) !important; border-color: var(--theme-border) !important; } html[data-color-mode] #productDetailPage .detail-subpanel { background: var(--theme-element) !important; border-color: var(--theme-border-light) !important; } /* Text colors are variable-driven so the two modes stay visually consistent. */ html[data-color-mode] body, html[data-color-mode] .text-white, html[data-color-mode] .text-gray-100, html[data-color-mode] .text-gray-200, html[data-color-mode] .text-gray-300, html[data-color-mode] #productDetailPage .detail-title, html[data-color-mode] #productDetailPage .detail-strong, html[data-color-mode] #productDetailPage .detail-white, html[data-color-mode] #detailOriginalLink, html[data-color-mode] #detailSearchInput, html[data-color-mode] #detailMoreMenu, html[data-color-mode] #globalSettingsMenu, html[data-color-mode] .settings-language-toggle, html[data-color-mode] .settings-language-current, html[data-color-mode] #detailMoreMenu .detail-menu-option, html[data-color-mode] #globalSettingsMenu .detail-menu-option, html[data-color-mode] .detail-guide-toggle, html[data-color-mode] .detail-guide-article h2, html[data-color-mode] .detail-guide-article h3, html[data-color-mode] .detail-guide-article strong, html[data-color-mode] #detailGuidesMount .detail-guide-section-heading { color: var(--theme-text) !important; -webkit-text-fill-color: var(--theme-text) !important; } html[data-color-mode] .text-gray-400, html[data-color-mode] .text-gray-500, html[data-color-mode] .text-gray-600, html[data-color-mode] #productDetailPage .detail-muted, html[data-color-mode] .detail-guide-article { color: var(--theme-text-muted) !important; -webkit-text-fill-color: var(--theme-text-muted) !important; } html[data-color-mode] input::placeholder { color: var(--theme-text-muted) !important; opacity: 0.82; } /* Keep the existing red price hierarchy, but tune it for each palette. */ html[data-color-mode] #productGrid .product-card p[translate="no"], html[data-color-mode] #detailSearchResultsGrid .product-card p[translate="no"], html[data-color-mode] #detailPrice, html[data-color-mode] #detailBottomPrice, html[data-color-mode] #modalPrice { color: var(--theme-price) !important; -webkit-text-fill-color: var(--theme-price) !important; } /* Light mode: warm paper rather than plain white. */ html[data-color-mode="light"] body { background-color: var(--theme-base) !important; background-image: linear-gradient(rgba(21, 21, 21, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 21, 21, 0.018) 1px, transparent 1px); background-size: 28px 28px; } html[data-color-mode="light"] #productListNav, html[data-color-mode="light"] #productListFilters, html[data-color-mode="light"] #productDetailPage .detail-header, html[data-color-mode="light"] #detailBottomBar { box-shadow: 0 8px 26px var(--theme-shadow); } html[data-color-mode="light"] #productGrid > div, html[data-color-mode="light"] #detailSearchResultsGrid > div, html[data-color-mode="light"] #productDetailPage .detail-panel { box-shadow: 0 10px 24px var(--theme-shadow) !important; } /* Dark mode: restrained yellow edge gives the street-rock feeling without noise. */ html[data-color-mode="dark"] #productListNav, html[data-color-mode="dark"] #productDetailPage .detail-header { border-bottom-color: rgba(255, 212, 0, 0.38) !important; } html[data-color-mode="dark"] #productGrid > div:hover, html[data-color-mode="dark"] #detailSearchResultsGrid > div:hover, html[data-color-mode="dark"] #productDetailPage .detail-panel:hover { border-color: rgba(255, 212, 0, 0.72) !important; } /* Theme picker previews */ #detailMoreMenu .theme-menu-option, #globalSettingsMenu .theme-menu-option { display: flex; align-items: center; gap: 8px; } .theme-option-preview { width: 28px; height: 18px; display: inline-grid; grid-template-columns: 1fr 1fr; flex: 0 0 auto; overflow: hidden; border: 1px solid currentColor; border-radius: 3px; } .theme-option-preview i { display: block; min-width: 0; } .theme-option-preview-dark i:first-child { background: #080808; } .theme-option-preview-dark i:last-child { background: #FFD400; } .theme-option-preview-light i:first-child { background: #F2EBDD; } .theme-option-preview-light i:last-child { background: #FFD400; } html[data-color-mode] #detailMoreMenu .detail-menu-option.is-active, html[data-color-mode] #globalSettingsMenu .detail-menu-option.is-active { color: var(--theme-primary) !important; -webkit-text-fill-color: var(--theme-primary) !important; background: var(--theme-primary-alpha) !important; border-color: var(--theme-primary) !important; } /* Both Buy Now buttons use the same black text on yellow. */ html[data-color-mode] #detailSecondaryBuyBtn, html[data-color-mode] #detailSecondaryBuyBtn * { color: var(--theme-button-text) !important; -webkit-text-fill-color: var(--theme-button-text) !important; } /* Preserve white text only for controls that intentionally stay on black overlays. */ html[data-color-mode] #closeModal, html[data-color-mode] #detailGalleryPrev, html[data-color-mode] #detailGalleryNext, html[data-color-mode] #detailImageCounter, html[data-color-mode] #detailImageCounter *, html[data-color-mode] #copyLinkToast, html[data-color-mode] #copyLinkToast * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* 2026-08-05：修复 Dark 模式 QC AVAILABLE 文字被全局 -webkit-text-fill-color 覆盖。 */ html[data-color-mode="dark"] .product-qc-badge, html[data-color-mode="dark"] .product-qc-badge span { color: #15803d !important; -webkit-text-fill-color: #15803d !important; opacity: 1 !important; } html[data-color-mode="dark"] .product-qc-badge { background: rgba(255, 255, 255, 0.97) !important; border-color: rgba(21, 128, 61, 0.55) !important; } /* ========================================================================== */ /* 2026-08-05 PC 首页一体化顶栏与居中留白 */ /* 仅作用于 >= 1024px；移动端现有布局、宽度和间距保持不变。 */ /* ========================================================================== */ @media (min-width: 1024px) { /* 导航和筛选区使用完全相同的背景，视觉上连成一个完整区域。 */ html[data-color-mode] #productListNav, html[data-color-mode] #productListFilters { background-color: var(--theme-base) !important; background-image: none !important; } /* 去掉两块之间的分割线及阴影；筛选区底部边框继续分隔商品区域。 */ html[data-color-mode] #productListNav { border-bottom-color: transparent !important; box-shadow: none !important; } html[data-color-mode] #productListFilters { border-top: 0 !important; box-shadow: none !important; } /* * PC 内容区进一步收窄，宽屏左右留白更明显。 * 顶部、筛选和商品列表共用同一条左右起止线，宽屏时自动产生留白。 */ .product-list-content-shell, #productListNav > .product-list-content-shell, #productListFilters > .product-list-content-shell, #productListPage.product-list-content-shell, #productListPage { width: calc(100% - 80px) !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } }