use proper css for language direction

lichess-org · Mar 23, 2024 · 7afc998 · 7afc998
1 parent 775b145
commit 7afc998
Show file tree

Hide file tree

Showing 1,415 changed files with 1,635 additions and 3,139 deletions.
diff --git a/app/templating/AssetHelper.scala b/app/templating/AssetHelper.scala
@@ -35,19 +35,19 @@ trait AssetHelper extends HasEnv:
  def flairSrc(flair: Flair) = staticAssetUrl(s"$flairVersion/flair/img/$flair.webp")
 
  def cssTag(name: String)(using ctx: Context): Frag =
- cssTagWithDirAndTheme(name, isRTL, ctx.pref.currentBg)
+ cssTagWithTheme(name, isRTL, ctx.pref.currentBg)
 
- def cssTagWithDirAndTheme(name: String, isRTL: Boolean, theme: String): Frag =
+ def cssTagWithTheme(name: String, isRTL: Boolean, theme: String): Frag =
  if theme == "system" then
  frag(
- cssTagWithDirAndSimpleTheme(name, isRTL, "light")(media := "(prefers-color-scheme: light)"),
- cssTagWithDirAndSimpleTheme(name, isRTL, "dark")(media := "(prefers-color-scheme: dark)")
+ cssTagWithSimpleTheme(name, isRTL, "light")(media := "(prefers-color-scheme: light)"),
+ cssTagWithSimpleTheme(name, isRTL, "dark")(media := "(prefers-color-scheme: dark)")
  )
- else cssTagWithDirAndSimpleTheme(name, isRTL, theme)
+ else cssTagWithSimpleTheme(name, isRTL, theme)
 
- private def cssTagWithDirAndSimpleTheme(name: String, isRTL: Boolean, theme: String): Tag =
+ private def cssTagWithSimpleTheme(name: String, isRTL: Boolean, theme: String): Tag =
  cssAt:
- s"css/$name.${if isRTL then "rtl" else "ltr"}.$theme.${if minifiedAssets then "min" else "dev"}.css"
+ s"css/$name.$theme.${if minifiedAssets then "min" else "dev"}.css"
 
  def cssTagNoTheme(name: String): Frag =
  cssAt(s"css/$name.${if minifiedAssets then "min" else "dev"}.css")

diff --git a/app/views/base/embed.scala b/app/views/base/embed.scala
@@ -16,7 +16,7 @@ object embed:
  layout.bits.metaCsp(basicCsp.withNonce(ctx.nonce).withInlineIconFont),
  st.headTitle(title),
  layout.bits.pieceSprite(ctx.pieceSet),
- cssTagWithDirAndTheme(cssModule, isRTL = lila.i18n.LangList.isRTL(ctx.lang), ctx.bg),
+ cssTagWithTheme(cssModule, isRTL = lila.i18n.LangList.isRTL(ctx.lang), ctx.bg),
  (ctx.bg == "system").option(embedJsUnsafe(systemThemePolyfillJs, ctx.nonce))
  ),
  st.body(cls := s"${ctx.bg} highlight ${ctx.boardClass}")(

diff --git a/app/views/base/layout.scala b/app/views/base/layout.scala
@@ -15,10 +15,11 @@ import lila.common.base.StringUtils.escapeHtmlRaw
 object layout:
 
  object bits:
- val doctype = raw("<!DOCTYPE html>")
- def htmlTag(using lang: Lang) = html(st.lang := lang.code, dir := isRTL.option("rtl"))
- val topComment = raw("""<!-- Lichess is open source! See https://lichess.org/source -->""")
- val charset = raw("""<meta charset="utf-8">""")
+ val doctype = raw("<!DOCTYPE html>")
+ def htmlTag(using lang: Lang) =
+ html(st.lang := lang.code, dir := isRTL.option("rtl"), cls := isRTL.option("rtl"))
+ val topComment = raw("""<!-- Lichess is open source! See https://lichess.org/source -->""")
+ val charset = raw("""<meta charset="utf-8">""")
  val viewport = raw:
  """<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">"""
  def metaCsp(csp: ContentSecurityPolicy): Frag = raw:

diff --git a/ui/.build/src/sass.ts b/ui/.build/src/sass.ts
@@ -90,21 +90,16 @@ async function buildThemedScss() {
  const path = match[1];
  const partial = match[2];
  fs.mkdirSync(`${path}/gen`, { recursive: true });
- for (const direction of ['ltr', 'rtl']) {
- for (const theme of ['light', 'dark', 'transp']) {
- const themed = `${path}/gen/${partial}.${direction}.${theme}.scss`;
- if (fs.existsSync(themed)) {
- continue;
- }
- const code =
- `@import '../../../../common/css/dir/${direction}';\n` +
- `@import '../../../../common/css/theme/${theme}';\n` +
- `@import '../${partial}';\n`;
- try {
- await fs.promises.writeFile(themed, code);
- } catch (e) {
- env.log(e, { error: true });
- }
+ for (const theme of ['light', 'dark', 'transp']) {
+ const themed = `${path}/gen/${partial}.${theme}.scss`;
+ if (fs.existsSync(themed)) {
+ continue;
+ }
+ const code = `@import '../../../../common/css/theme/${theme}';\n` + `@import '../${partial}';\n`;
+ try {
+ await fs.promises.writeFile(themed, code);
+ } catch (e) {
+ env.log(e, { error: true });
  }
  }
  }

diff --git a/ui/analyse/css/_action-menu.scss b/ui/analyse/css/_action-menu.scss
@@ -29,14 +29,16 @@
  }
 
  &:before {
- #{$end-direction}: 8px;
+ @include pos-end(8px);
  }
 
  &:after {
- #{$start-direction}: 8px;
+ @include pos-start(8px);
  }
  }
+}
 
+.action-menu {
  &__tools {
  display: grid;
  gap: 0 1em;
@@ -51,7 +53,7 @@
  min-height: 3em;
 
  &::before {
- padding-#{$end-direction}: 8px;
+ padding-inline-end: 8px;
  font-size: 1.7em;
  }
 
@@ -97,7 +99,7 @@
  }
 
  .switch + label {
- margin-#{$start-direction}: 1ch;
+ margin-inline-start: 1ch;
  }
 
  input[type='range'] {

diff --git a/ui/analyse/css/_analyse.free.scss b/ui/analyse/css/_analyse.free.scss
@@ -11,7 +11,7 @@
  @extend %box-radius-bottom;
 
  position: absolute;
- #{$end-direction}: 0;
+ @include pos-end(0);
  top: 100%;
  text-align: right;
  visibility: hidden;

diff --git a/ui/analyse/css/_chart-loader.scss b/ui/analyse/css/_chart-loader.scss
@@ -18,14 +18,14 @@
  span {
  @extend %nowrap-hidden;
 
- margin-#{$start-direction}: 7px;
+ margin-inline-start: 7px;
  opacity: 1;
  transition: 0.5s;
  width: 100px;
  display: block;
 
  .analyse__underboard:hover & {
- margin-#{$start-direction}: 0;
+ margin-inline-start: 0;
  width: 0;
  opacity: 0;
  }
@@ -35,6 +35,6 @@
  width: 32px;
  height: 32px;
  display: inline-block;
- margin-#{$start-direction}: 10px;
+ margin-inline-start: 10px;
  }
 }
diff --git a/ui/analyse/css/_forecast.scss b/ui/analyse/css/_forecast.scss
@@ -37,15 +37,15 @@
 
  @include padding-direction(0.7em, 0.1em, 0.7em, 0.6em);
 
- margin-#{$start-direction}: -0.1em;
+ margin-inline-start: -0.1em;
 
  @include transition;
 
  position: relative;
  border-bottom: $border;
 
  &::before {
- margin-#{$start-direction}: -0.6em;
+ margin-inline-start: -0.6em;
  opacity: 0.4;
  }
 
@@ -54,7 +54,7 @@
  @extend %button-none;
 
  position: absolute;
- #{$end-direction}: 8px;
+ @include pos-end(8px);
  width: 1.5em;
  height: 1.5em;
  line-height: 1;
@@ -63,7 +63,7 @@
  display: flex;
  justify-content: center;
  align-items: center;
- padding-#{$end-direction}: 0.5px;
+ padding-inline-end: 0.5px;
 
  @include transition;
 
@@ -141,7 +141,7 @@
 
  sans > * {
  display: inline-block;
- margin-#{$end-direction}: 0.2em;
+ margin-inline-end: 0.2em;
  }
 
  .add sans {

diff --git a/ui/analyse/css/_fork.scss b/ui/analyse/css/_fork.scss
@@ -20,7 +20,7 @@ $c-fork: $c-primary;
  border-bottom: 1px solid $c-bg-box;
 
  &:nth-child(odd) {
- border-#{$end-direction}: 1px solid $c-bg-box;
+ border-inline-end: 1px solid $c-bg-box;
  }
  &.correct {
  background: mix($c-secondary, $c-bg-box, 25%);
@@ -45,7 +45,7 @@ $c-fork: $c-primary;
  glyph {
  @extend %base-font;
 
- margin-#{$start-direction}: 2px;
+ margin-inline-start: 2px;
  }
 
  eval {

diff --git a/ui/analyse/css/_keyboard.scss b/ui/analyse/css/_keyboard.scss
@@ -1,6 +1,6 @@
 .keyboard-help {
  td.mouse li {
  list-style: disc inside;
- margin-#{$start-direction}: 1em;
+ margin-inline-start: 1em;
  }
 }
diff --git a/ui/analyse/css/_layout.scss b/ui/analyse/css/_layout.scss
@@ -26,7 +26,7 @@ body {
  grid-area: board;
 
  cg-container {
- #{$end-direction}: 0;
+ @include pos-end(0);
  }
  }
 

diff --git a/ui/analyse/css/_player-clock.scss b/ui/analyse/css/_player-clock.scss
@@ -4,7 +4,7 @@ $clock-height: 20px;
 
 .analyse__player_strip {
  position: absolute;
- #{$end-direction}: 0;
+ @include pos-end(0);
  display: flex;
 
  &.top {
@@ -35,7 +35,7 @@ $clock-height: 20px;
  @extend %metal;
 
  padding: 0 0.5em;
- margin-#{$start-direction}: 12px;
+ margin-inline-start: 12px;
  height: $clock-height;
  font-weight: bold;
  text-align: center;
@@ -62,14 +62,14 @@ $clock-height: 20px;
 }
 
 .material {
- padding-#{$end-direction}: 1px;
+ padding-inline-end: 1px;
 
  mpiece {
  width: 20px;
  height: 20px;
 
  &.pawn {
- margin-#{$start-direction}: -10px;
+ margin-inline-start: -10px;
  }
  }
  score {

diff --git a/ui/analyse/css/_practice.scss b/ui/analyse/css/_practice.scss
@@ -35,20 +35,20 @@
  }
 
  .comment .wait {
- padding-#{$start-direction}: 15px;
+ padding-inline-start: 15px;
  }
 
  .verdict {
  font-weight: bold;
- margin-#{$end-direction}: 10px;
+ margin-inline-end: 10px;
  display: flex;
  }
 
  .verdict::before {
  width: 30px;
  height: 100%;
  color: #fff;
- margin-#{$end-direction}: 7px;
+ margin-inline-end: 7px;
  text-align: center;
  font-size: 1.4em;
  font-weight: normal;
@@ -87,7 +87,7 @@
  .comment {
  move {
  cursor: pointer;
- margin-#{$start-direction}: 5px;
+ margin-inline-start: 5px;
  color: $c-link;
  transition: 0.3s;
  }

diff --git a/ui/analyse/css/_retro.scss b/ui/analyse/css/_retro.scss
@@ -46,6 +46,6 @@
 
  .continue i::before {
  font-size: 2.5em;
- margin-#{$end-direction}: 10px;
+ margin-inline-end: 10px;
  }
 }
diff --git a/ui/analyse/css/_round-training.scss b/ui/analyse/css/_round-training.scss
@@ -3,7 +3,7 @@
  a {
  @extend %flex-center-nowrap;
  text-transform: inherit;
- text-align: $start-direction;
+ text-align: start;
  &::before {
  font-size: 2.8em;
  }
@@ -65,7 +65,7 @@
 
  &__side {
  flex: 0 0 calc(50% - #{$analyse-block-gap});
- margin-#{$start-direction}: $analyse-block-gap;
+ margin-inline-start: $analyse-block-gap;
  }
 
  > a {

diff --git a/ui/analyse/css/_round-underboard.scss b/ui/analyse/css/_round-underboard.scss
@@ -103,7 +103,7 @@ $col2-panel-height: 240px;
  strong,
  a {
  display: inline-block;
- margin-#{$end-direction}: 1em;
+ margin-inline-end: 1em;
  }
  }
 
@@ -115,7 +115,7 @@ $col2-panel-height: 240px;
  border: 0;
  background: none;
  padding: 0.3em;
- margin-#{$end-direction}: 0.5em;
+ margin-inline-end: 0.5em;
  }
 }
 

diff --git a/ui/analyse/css/_tools.scss b/ui/analyse/css/_tools.scss
@@ -34,7 +34,7 @@
  button {
  @extend %button-none;
 
- margin-#{$start-direction}: 1em;
+ margin-inline-start: 1em;
  color: $c-link;
 
  &:hover {
@@ -92,7 +92,7 @@
  }
 
  &::before {
- margin-#{$end-direction}: 0.3em;
+ margin-inline-end: 0.3em;
  }
 
  &.highlighted {

diff --git a/ui/analyse/css/_training.scss b/ui/analyse/css/_training.scss
@@ -34,13 +34,13 @@
  .player {
  display: flex;
  align-items: center;
- margin-#{$start-direction}: 10px;
+ margin-inline-start: 10px;
  }
 
  .no-square {
  width: 64px;
  height: 64px;
- margin-#{$end-direction}: 10px;
+ margin-inline-end: 10px;
  }
 
  .is3d & div.no-square {
@@ -58,7 +58,7 @@
  display: block;
  width: 64px;
  height: 64px;
- margin-#{$end-direction}: 10px;
+ margin-inline-end: 10px;
  font-size: 50px;
  font-size: 64px;
  line-height: 64px;

diff --git a/ui/analyse/css/build/gen/analyse.forecast.dark.scss b/ui/analyse/css/build/gen/analyse.forecast.dark.scss
@@ -0,0 +1,2 @@
+@import '../../../../common/css/theme/dark';
+@import '../analyse.forecast';
diff --git a/ui/analyse/css/build/gen/analyse.forecast.light.scss b/ui/analyse/css/build/gen/analyse.forecast.light.scss
@@ -0,0 +1,2 @@
+@import '../../../../common/css/theme/light';
+@import '../analyse.forecast';
diff --git a/ui/analyse/css/build/gen/analyse.forecast.ltr.dark.scss b/ui/analyse/css/build/gen/analyse.forecast.ltr.dark.scss