First commit

frontend/app/assets/css/_langs.scss

@@ -0,0 +1,193 @@
+@use 'mixins' as *;
+
+// ---------- Languages ----------
+
+// the round accent badge a language code wears, on its own or beside a globe
+@mixin lang-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 9px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+  color: var(--accent);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.lang-badge { @include lang-pill; font-size: 0.72rem; letter-spacing: 0.02em; }
+
+// the language link in an article's eyebrow — click to see that language only
+.article-lang {
+  color: var(--accent);
+  font-weight: 600;
+  text-decoration: none;
+  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
+
+  &:hover { border-bottom-style: solid; }
+}
+
+// the quiet label that introduces a row of language/version chips
+.lang-row-label,
+.article-langs-label,
+.version-bar-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--faint);
+  margin-right: 2px;
+}
+
+// language filter chips on the articles index
+.lang-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 2px 0 18px;
+}
+
+.lang-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 0.82rem;
+  font-weight: 600;
+  transition: border-color 0.15s, background-color 0.15s;
+
+  &:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
+
+  &.active {
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+    color: var(--accent);
+  }
+}
+
+// the version switcher of an article in the reader (links, not buttons)
+a.lang-chip { text-decoration: none; }
+
+.article-langs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+// the editor's notice while translating an article
+.translate-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  margin-bottom: 18px;
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
+  background: color-mix(in srgb, var(--accent) 7%, transparent);
+  color: var(--muted);
+  font-size: 0.9rem;
+
+  svg { color: var(--accent); flex: none; }
+
+  a {
+    color: var(--accent);
+    font-weight: 650;
+    text-decoration: none;
+
+    &:hover { text-decoration: underline; }
+  }
+}
+
+// the editor's own version bar: the article's languages as chips, with the
+// unsaved ones wearing a dot, and a dropdown to add another language
+.version-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.dirty-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  flex: none;
+}
+
+.version-add { position: relative; }
+
+.version-dropdown {
+  @include dropdown-panel;
+  left: 0;
+  min-width: 190px;
+  max-height: 280px;
+}
+
+// the card of an article that exists in several languages: the codes ride
+// together beside a globe, so one card says the whole story
+.card-langs {
+  @include lang-pill;
+  gap: 5px;
+  font-size: 0.66rem;
+  letter-spacing: 0.04em;
+
+  svg { opacity: 0.85; }
+}
+
+// the reader's language menu: a button on the article's actions, opening a
+// list of every language — the ones to read in, and the ones left to write
+.lang-menu { position: relative; }
+
+.lang-menu-caret { opacity: 0.6; }
+
+.lang-menu-dropdown {
+  @include dropdown-panel($z: 30);
+  right: 0;
+  min-width: 220px;
+  max-height: 340px;
+  text-align: left;
+}
+
+.lang-menu-section { @include eyebrow(0.68rem, 700, 0.06em); padding: 7px 10px 4px; }
+
+.lang-menu-gap { margin-top: 5px; border-top: 1px solid var(--border); padding-top: 9px; }
+
+.lang-menu-item {
+  @include menu-row(7px 10px, 9px);
+  text-decoration: none;
+
+  &:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
+
+  .lmi-sub {
+    margin-left: auto;
+    max-width: 112px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.72rem;
+    font-weight: 500;
+    color: var(--faint);
+  }
+
+  .lmi-check { flex: none; color: var(--accent); }
+}
+
+.lang-menu-write {
+  .lmi-pencil {
+    margin-left: auto;
+    flex: none;
+    color: var(--faint);
+    transition: color 0.12s;
+  }
+
+  &:hover .lmi-pencil { color: var(--accent); }
+}