/* ============================================================ Amenaro · 多语言样式（语言切换器 + RTL 阿拉伯语） 本文件由发布流程自动挂到每个页面 ，请勿手工在模板里重复引用。 ============================================================ */ /* ---------- 语言切换器 ---------- */ .lang-switch{position:relative;flex:0 0 auto} .lang-btn{ display:inline-flex;align-items:center;gap:7px;cursor:pointer; border:1px solid var(--line);background:#fff;border-radius:12px; padding:9px 12px;font:inherit;font-weight:800;font-size:14px;color:var(--blue); line-height:1;transition:.2s ease; } .lang-btn:hover{border-color:#c8d8e8;background:#f4f8fc} .lang-flag{letter-spacing:.5px} .lang-caret{ width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor;opacity:.65 } .lang-menu{ position:absolute;top:calc(100% + 8px);right:0;min-width:172px;z-index:120; background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow); padding:6px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s ease; } .lang-switch.open .lang-menu, .lang-switch:hover .lang-menu, .lang-switch:focus-within .lang-menu{opacity:1;visibility:visible;transform:translateY(0)} .lang-menu a{ display:block;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:650;color:#263b53 } .lang-menu a:hover{background:#eef4fb;color:var(--blue)} .lang-menu a.is-current{background:#eef4fb;color:var(--blue)} .lang-menu a.is-current:after{content:"✓";float:right;font-weight:900;color:var(--green)} @media (max-width:900px){ .lang-switch{order:-1} .lang-btn{padding:9px 10px} } /* ---------- 阿拉伯语（RTL）字体 ---------- */ html[lang="ar"] body, html[lang="ar"] .btn, html[lang="ar"] .lang-btn, html[lang="ar"] .lang-menu a{ font-family:"Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,"Arial",sans-serif; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{line-height:1.5;letter-spacing:0} /* ---------- 阿拉伯语（RTL）方向镜像 ---------- */ html[dir="rtl"] .nav .dropdown-menu{left:auto;right:0} html[dir="rtl"] .lang-menu{right:auto;left:0} html[dir="rtl"] .floating-card{left:auto;right:-20px} html[dir="rtl"] .list-check li{padding-left:0;padding-right:28px} html[dir="rtl"] .list-check li:before{left:auto;right:0} html[dir="rtl"] .badge-dot{left:auto;right:22px} html[dir="rtl"] .spec-table th, html[dir="rtl"] .spec-table td, html[dir="rtl"] .prose th, html[dir="rtl"] .prose td, html[dir="rtl"] .legal th, html[dir="rtl"] .legal td{text-align:right} html[dir="rtl"] .kicker-card{border-left:0;border-right:5px solid var(--gold)} html[dir="rtl"] .prose ul, html[dir="rtl"] .prose ol{padding-left:0;padding-right:22px} html[dir="rtl"] .wa-float{right:auto;left:18px} html[dir="rtl"] .card-close{right:auto;left:18px} html[dir="rtl"] .lang-menu a.is-current:after{float:left} html[dir="rtl"] .breadcrumb{direction:rtl} html[dir="rtl"] .topbar .container{text-align:right} @media (max-width:600px){ html[dir="rtl"] .wa-float{left:14px} } /* ---------- 长词（德语）不撑破布局 ---------- */ html[lang="de"] .btn{word-break:break-word;hyphens:auto} html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3{hyphens:auto} /* ---------- 博客正文排版微调（阿拉伯语两侧留白更大） ---------- */ html[lang="ar"] .prose{line-height:1.95} /* ============================================================ 手机端语言下拉定位修正 ------------------------------------------------------------ 病因：手机上 .lang-switch 被 order:-1 挤到行首（LTR 在最左、RTL 在最右）， 而 .lang-menu 是 position:absolute + right:0（右对齐按钮）。 按钮在最左侧时锚点也跟着跑到屏幕外 → 实测 LTR 390px 下菜单 x=-99， 172px 宽里有 99px 溢出屏幕左侧；菜单项文字是左对齐的，于是被整段切掉， 只剩 float:right 的 ✓ 露在里面（RTL 手机端镜像同理，向右溢出 98.7px）。 修法：手机上不再对齐按钮外侧，改为贴着按钮所在那一侧向内展开。 ⚠️ 本段必须留在文件末尾 —— 上面 html[dir="rtl"] .lang-menu 规则优先级相同， 靠“后出现者胜”才能覆盖掉它。 ============================================================ */ @media (max-width:900px){ .lang-menu{right:auto;left:0;max-width:calc(100vw - 32px)} html[dir="rtl"] .lang-menu{left:auto;right:0} }