/* * 阿拉伯语（RTL）方向覆盖。只在 RTL 语言下由 inc/i18n.php 入队。 * * woo-fanyi 会给 打上 dir="rtl"，浏览器据此把 flex / grid / 文字流整体 * 镜像，所以「大版面」是自动对的，不用逐块重写。真正会留在原地的只有三类： * 1. 绝对定位的 left/right（角标、箭头、抽屉、关闭按钮） * 2. 物理方向的 border-left / border-right（引用块、通知条、装饰竖线） * 3. 物理方向的 margin / padding / float / text-align * 这个文件只处理这三类，主题里另外那些 left: 50% 是「居中」而不是「靠左」， * 一律不动 —— 把它们也翻掉反而会让居中元素跑偏。 * * 作用域一律用 [dir="rtl"]，不用 WordPress 的 is_rtl()：站点 locale 始终是 * en_US，语言是插件在运行时切的，is_rtl() 永远是 false，指望它会一条都不生效。 */ /* ========== 1. 绝对定位角标与箭头 ========== */ [dir="rtl"] .flash-badge, [dir="rtl"] .badge-sale, [dir="rtl"] ul.products li.product .onsale { left: auto; right: 12px; } [dir="rtl"] .wc-page div.product > .onsale { left: auto; right: 14px; } [dir="rtl"] .cart-count { right: auto; left: -4px; } [dir="rtl"] .cat-arrow { right: auto; left: 12px; } [dir="rtl"] .qr-close { right: auto; left: 10px; } [dir="rtl"] .woocommerce-product-gallery__trigger { right: auto; left: 14px; } [dir="rtl"] .skip-link { left: auto; right: 16px; } [dir="rtl"] .step::before { left: auto; right: 0; } [dir="rtl"] .cat-meta { padding-right: 18px; padding-left: 66px; } /* ========== 2. 装饰性竖线：边框换边 ========== */ [dir="rtl"] .brand-head, [dir="rtl"] .entry-content blockquote, [dir="rtl"] .sale-timer, [dir="rtl"] .woocommerce-error, [dir="rtl"] .woocommerce-message, [dir="rtl"] .woocommerce-info { border-left: 0; border-right: 3px solid var(--accent); } [dir="rtl"] .woocommerce-error { border-right-color: var(--ink); } [dir="rtl"] .sale-timer { border-right-color: var(--accent-deep); } [dir="rtl"] .drawer-sub { border-left: 0; border-right: 1px solid var(--line); } [dir="rtl"] .woocommerce-order ul.order_details li { border-right: 0; border-left: 1px solid var(--line); } [dir="rtl"] .woocommerce-order ul.order_details li:last-child { border-left: 0; } /* ========== 3. 抽屉：从左侧滑入 ========== */ [dir="rtl"] .drawer-panel { right: auto; left: 0; transform: translateX(-100%); border-left: 0; border-right: 3px solid var(--accent); } [dir="rtl"] .drawer.open .drawer-panel { transform: translateX(0); } [dir="rtl"] .drawer-nav li.drawer-group > .drawer-sub { padding-left: 0; padding-right: 12px; } /* ========== 4. 内外边距与浮动 ========== */ [dir="rtl"] .flash-price del, [dir="rtl"] .prod-price del, [dir="rtl"] ul.products li.product .price del { margin-right: 0; margin-left: 8px; } [dir="rtl"] .summary .price del { margin-right: 0; margin-left: 10px; } [dir="rtl"] .flash-actions .added_to_cart { margin-left: 0; margin-right: 12px; } [dir="rtl"] .flash-timer-note, [dir="rtl"] .post-nav-next { margin-left: 0; margin-right: auto; } [dir="rtl"] .woocommerce input[type="checkbox"] { margin-right: 0; margin-left: 8px; } [dir="rtl"] .entry-content ol, [dir="rtl"] .entry-content ul { padding-left: 0; padding-right: 26px; } [dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 0; padding-right: 16px; } [dir="rtl"] .select2-container .select2-selection--single .select2-selection__arrow { right: auto; left: 8px; } [dir="rtl"] .mega-links a:hover { padding-left: 0; padding-right: 14px; } [dir="rtl"] .woocommerce-cart-form .coupon, [dir="rtl"] .woocommerce-result-count { float: right; } [dir="rtl"] .woocommerce-ordering { float: left; } /* ========== 5. 文字对齐 ========== */ [dir="rtl"] .entry-content td, [dir="rtl"] .prod-specs-table th, [dir="rtl"] table.shop_table td, [dir="rtl"] .flash-timer { text-align: right; } [dir="rtl"] .post-nav-next { text-align: left; } /* ========== 6. 方向性图标 ========== */ /* * 「阅读全文 →」「查看商品 →」这些箭头在 RTL 里必须指向左边，否则语义是反的 * （箭头应当指向阅读前进方向）。图标是内联 SVG，直接水平翻转最省事。 * 下拉三角是由 border 拼的小方块旋转而成，它的 border-right 也要换边， * 否则三角会朝反方向。 */ [dir="rtl"] .text-link svg, [dir="rtl"] .btn svg, [dir="rtl"] .cat-arrow svg, [dir="rtl"] .result-arrow svg, [dir="rtl"] .mega-more svg { transform: scaleX(-1); } [dir="rtl"] .nav-list > li.has-mega > a::after, [dir="rtl"] .nav-list > li.menu-item-has-children > a::after { border-right: 0; border-left: 1.4px solid currentColor; } [dir="rtl"] .entry-content summary::after { right: auto; left: 22px; border-right: 0; border-left: 1.6px solid var(--accent-deep); } /* ========== 7. 悬浮联系条 ========== */ [dir="rtl"] .contact-rail.rail-right { right: auto; left: 18px; } [dir="rtl"] .contact-rail.rail-left { left: auto; right: 18px; } @media (min-width: 769px) and (max-width: 1380px) { [dir="rtl"] .contact-rail.rail-right { right: auto; left: 16px; } [dir="rtl"] .contact-rail.rail-left { left: auto; right: 16px; } } /* 手机端联系条是通栏底部条，左右都贴边，不需要换向 */ @media (max-width: 560px) { [dir="rtl"] .contact-rail, [dir="rtl"] .contact-rail.rail-right, [dir="rtl"] .contact-rail.rail-left { left: 0; right: 0; } } /* ========== 8. 图片与画廊保持 LTR ========== */ /* * direction:rtl 会把 WooCommerce 画廊的 Flexslider 轨道也镜像，缩略图顺序会乱。 * 插件已经注入了一份画廊保护 CSS，这里只补主题自己的定高图片容器：它们是 * position:absolute + inset:0，本身不受方向影响，显式写一次防止被继承的 * direction 影响 object-position 的解析。 */ [dir="rtl"] .cat-media img, [dir="rtl"] .prod-media img, [dir="rtl"] .post-media img, [dir="rtl"] .flash-media img, [dir="rtl"] .mega-promo-media img, [dir="rtl"] .brand-plate-img, [dir="rtl"] .hero-photo img { direction: ltr; } /* ========== 9. 语言切换器自身 ========== */ [dir="rtl"] .lang-menu { right: auto; left: 0; } /* ========== 10. 数字 + 拉丁单位的双向文本隔离 ========== 「24 hr」「1 ml」「100 ml」这类是 RTL 里的经典坑：数字是中性方向，拉丁字母 是强 LTR，整段又处在 RTL 段落里，Unicode 双向算法会把它们重排成「hr 24」。 DOM 里的顺序是对的，错的是渲染，所以不能靠改模板解决，必须在 CSS 里把这 一小段隔离成独立的 LTR 方向上下文。 isolate 而不是 embed：isolate 会让这段文字对外表现为一个中性字符，不会反过来 干扰它前后阿拉伯文的排列。 */ [dir="rtl"] .stat-num, [dir="rtl"] .hero-stats dd, [dir="rtl"] .price, [dir="rtl"] .amount, [dir="rtl"] .woocommerce-Price-amount, [dir="rtl"] .prod-price, [dir="rtl"] .flash-price, [dir="rtl"] .summary .price, [dir="rtl"] .cd-num, [dir="rtl"] .sku, [dir="rtl"] .prod-specs-table td { direction: ltr; unicode-bidi: isolate; } /* 价格和数字块在 RTL 段落里要靠右起排 */ [dir="rtl"] .stat-num, [dir="rtl"] .hero-stats dd, [dir="rtl"] .prod-price, [dir="rtl"] .flash-price { text-align: right; }