fix(words): refine the left margin band per feedback

- Decouple band width from text inset: `--_words-rail-width` (1.25rem,
  the thin band) + `--_words-rail-gap` (1.25rem, breathing room) →
  text is no longer glued to the band edge.
- Narrow the band: 2.5rem → 1.25rem (20px).
- Lighter tones: rail-bg #ededed → #f5f5f5, rail-border #cfcfcf →
  #e3e3e3. Eidos CSS regenerated.

Verified: band 20px + 1px #e3e3e3 edge, then 20px air before text at 40px.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 540c35e679
commit 9e13d0083e

@ -1741,11 +1741,14 @@
}
[data-words-content] {
/* Narrowed left margin band ("estrechar" — was 3.5rem). Painted
* below as a soft silver strip with a 1px, slightly-stronger-silver
* right border (fixed-tone notebook margin). The drag handle lives
* inside this band on hover. */
--_words-gutter-size: 2.5rem;
/* Left margin: a thin silver band (rail-width) + breathing room
* (rail-gap) before the text, so the edit zone is NOT glued to the
* band. The band is painted below; the gutter-size (band + gap) is
* the text inset. Fixed-tone notebook margin; the drag handle floats
* in this gutter on hover. */
--_words-rail-width: 1.25rem;
--_words-rail-gap: 1.25rem;
--_words-gutter-size: calc(var(--_words-rail-width) + var(--_words-rail-gap));
/* Starting baseline keeps the editor at a sensible height when
* empty; max-block-size caps growth so long documents scroll
* INSIDE the content area instead of pushing the page. */
@ -1762,16 +1765,16 @@
padding-inline-start: var(--_words-gutter-size);
padding-inline-end: var(--_words-content-px);
color: var(--words-content-color);
/* Soft silver left margin band + 1px stronger-silver right border,
* painted in the reserved gutter zone. Background only — does not
* disturb the contenteditable text/selection. */
/* Thin silver band (rail-width) with a 1px slightly-stronger right
* edge, then transparent through the gap to the text. Background
* only — does not disturb the contenteditable text/selection. */
background-image: linear-gradient(
to right,
var(--words-rail-bg) 0,
var(--words-rail-bg) calc(var(--_words-gutter-size) - 1px),
var(--words-rail-border) calc(var(--_words-gutter-size) - 1px),
var(--words-rail-border) var(--_words-gutter-size),
transparent var(--_words-gutter-size)
var(--words-rail-bg) calc(var(--_words-rail-width) - 1px),
var(--words-rail-border) calc(var(--_words-rail-width) - 1px),
var(--words-rail-border) var(--_words-rail-width),
transparent var(--_words-rail-width)
);
background-repeat: no-repeat;
outline: none;

@ -2282,8 +2282,8 @@
--words-content-max-block-size-sm: 50vh;
--words-content-max-block-size-md: 60vh;
--words-content-max-block-size-lg: 70vh;
--words-rail-bg: #ededed;
--words-rail-border: #cfcfcf;
--words-rail-bg: #f5f5f5;
--words-rail-border: #e3e3e3;
--words-selection-color: var(--color-content-primary);
--words-block-gap: var(--space-2);
--words-heading-color: var(--color-content-primary);

@ -2720,10 +2720,11 @@ export const THEME_BASE_RECIPE_TOKENS = {
'content-max-block-size-lg': '70vh',
// Soft silver gutter band — fixed tone, intentionally NOT
// theme-aware. Looks like the physical margin of a notebook
// regardless of the editor theme. `rail-bg` is a very soft
// silver; `rail-border` is a touch stronger for the 1px edge.
'rail-bg': '#ededed',
'rail-border': '#cfcfcf',
// regardless of the editor theme. Very light: `rail-bg` is a
// barely-there silver; `rail-border` is a touch stronger for
// the 1px edge.
'rail-bg': '#f5f5f5',
'rail-border': '#e3e3e3',
'selection-color': 'var(--color-content-primary)',
'block-gap': 'var(--space-2)',
'heading-color': 'var(--color-content-primary)',

Loading…
Cancel
Save

Powered by TurnKey Linux.