diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index 5ccf683c1..2a2e774ce 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -994,9 +994,12 @@ background: var(--words-bg); } +/* Striped rows — bumped from a faint 70%-transparent overlay to a + solid toolbar-bg tint so the zebra is actually discernible against + the editor background. */ [data-words-content] :where(table[data-words-table-striped] tr:nth-child(even) td), [data-words-content] :where(table[data-words-table-striped] tr:nth-child(even) th) { - background: color-mix(in srgb, var(--words-toolbar-bg) 70%, transparent); + background: var(--words-toolbar-bg); } [data-words-content] :where(table[data-words-table-compact] td), @@ -1011,6 +1014,13 @@ padding-inline: var(--words-command-px); border: var(--words-border-width) solid var(--words-toolbar-border); vertical-align: top; + transition: background-color 120ms ease; +} + +/* Subtle hover for every body cell — lets the user know cells are + interactive (clickable to edit). Header rows opt out below. */ +[data-words-content] :where(table) tr:hover td:not([data-words-cell-header]) { + background: color-mix(in srgb, var(--_words-accent-solid) 5%, transparent); } [data-words-content] :where(th), @@ -1018,15 +1028,21 @@ background: color-mix(in srgb, var(--_words-accent-solid) 12%, var(--words-bg)); color: var(--words-heading-color); font-weight: var(--words-strong-font-weight); + /* Stronger bottom border under the header row so the divider with + the body is unambiguous regardless of striping. */ + border-block-end-width: calc(var(--words-border-width) * 2); } [data-words-content] [data-words-cell-tone='muted'] { background: color-mix(in srgb, var(--words-toolbar-bg) 82%, transparent); } +/* Accent tone — was 14% solid with full accent-text recolor, which + read as "this cell is broken / special-cased random". Toned down to + 8% background and kept the inherited text color so the cell still + draws the eye without shouting. */ [data-words-content] [data-words-cell-tone='accent'] { - background: color-mix(in srgb, var(--_words-accent-solid) 14%, var(--words-bg)); - color: var(--_words-accent-text); + background: color-mix(in srgb, var(--_words-accent-solid) 8%, var(--words-bg)); } [data-words-content] [data-words-cell-vertical='middle'] {