diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index f7e97e0e8..60dd82b84 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -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; diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index b47d5b805..aaf033406 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -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); diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index 9b6a4bf80..7dabd85c8 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -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)',