Files
Cell 5f1e79f49c feat(i18n): add RTL support for Arabic, Persian and Urdu (#831)
* feat(i18n): add RTL support and Arabic/Persian translations

- Add `dir` attribute to `<html>` via `.Site.Language.Direction`
- Convert physical CSS properties to logical properties across ~30 SCSS files
- Add `[dir="rtl"]` overrides for elements that need physical direction (code blocks, translate, icons)
- Add `logical-direction.html` template function for config value normalization
- Add RTL-aware deprecation warnings for old "left"/"right" config values
- Rename github corner, TOC position, reading progress config values from "left"/"right" to "start"/"end"
- Add Arabic (ar.toml) and Persian (fa.toml) i18n translation files
- Update multilingual documentation with RTL language configuration guide

* feat(shortcodes): add RTL support for tabs and refactor border-radius mixin

- Rename tabs placement values from "left"/"right" to "start"/"end" with deprecation warnings
- Convert all physical directional properties in tabs SCSS to logical properties
- Add RTL overrides for translate and box-shadow in tabs
- Add "start"/"end" support to border-radius mixin using CSS logical properties
- Refactor fixit-decryptor to use border-radius(start/end) mixin

* feat(assets): add RTL support for toc-dialog slide animation

The mobile toc-dialog always slid in from the right (100vw). In RTL
mode it should slide from the left (-100vw), matching the
border-inline-start/margin-inline-end anchoring.

* feat(assets): add RTL support for post-tag comma separator

* refactor(assets): extract RTL styles into dedicated _rtl.scss

* feat(assets): add RTL support for theme-switch and directional icons

* feat(i18n): add RTL support and improve i18n

- Add RTL typography corrections for Arabic-script languages (:lang(ar/fa/ur))
- Remove fa-list-ol from RTL flip list (numbers get mirrored)
- Add Urdu translation file (i18n/ur.toml)
- Rename noMoretTranslations to noTranslations and simplify all translations
- Update json-viewer-element from 1.0.4 to 1.0.6
- Add RTL test posts (index.en.md, index.ar.md)
- Fix layout partials for RTL support

See https://fixit.lruihao.cn/docs/content-management/introduction/#rtl-language-support
2026-08-24 00:22:34 +08:00

76 lines
1.6 KiB
SCSS

@use "core/functions" as *;
@use "core/mixins" as *;
.fixed-buttons {
position: fixed;
inset-inline-end: 1.5rem;
bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
@include z-index(fixed, -10);
}
.fixed-button {
font-size: 1rem;
line-height: 1.5rem;
padding: 0.5rem 0.625rem;
color: fi-var(global-font-secondary-color);
transition: color 0.4s ease;
background-color: light-dark(#f1f1f1, #1e1e1f);
@include border-radius(full);
&:hover,
&:active,
&:focus {
outline: none;
color: fi-var(global-font-color);
}
@include media('print') {
display: none !important;
}
}
.back-to-top {
overflow: hidden;
position: relative;
@include set-fi-vars((
// Ring stroke width
b2t-stroke: 0.5rem,
// Progress color
b2t-prog: light-dark(fi-var(success), fi-var(global-font-color)),
// dasharray = circumference = 2πr
// dashoffset = circumference * (1 - scrollPercent / 100)
b2t-dasharray: 314.15
));
// SVG circular progress ring
svg {
position: absolute;
top: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
// Rotate to start from top
rotate: -90deg;
}
.bg {
fill: none;
stroke: fi-var(global-border-color-light);
stroke-width: fi-var(b2t-stroke);
}
// Progress ring
.progress {
fill: none;
stroke: fi-var(b2t-prog);
stroke-width: fi-var(b2t-stroke);
stroke-linecap: round;
stroke-dasharray: fi-var(b2t-dasharray);
stroke-dashoffset: calc(#{fi-var(b2t-dasharray)} * (1 - #{fi-var(b2t-progress, 0)} / 100));
transition: stroke-dashoffset .1s linear;
}
}