diff --git a/app/client/components/GridView.css b/app/client/components/GridView.css index bb5521b7..db2ff0ce 100644 --- a/app/client/components/GridView.css +++ b/app/client/components/GridView.css @@ -313,10 +313,13 @@ left: calc(4em + 1px + (var(--frozen-position, 0) - var(--frozen-offset, 0)) * 1px); /* 4em for row number + total width of cells + 1px for border*/ z-index: 1; } - /* for data field we need to reuse color from record (add-row and zebra stripes) */ .gridview_row .record .field.frozen { - background-color: inherit; + background-color: var(--field-background-color, inherit); +} + +.gridview_row .record.record-add .field.frozen { + background-color: inherit !important; /* important to win over zebra stripes */ } /* HACK: add box shadow to fix outline overflow from active cursor */ @@ -328,11 +331,6 @@ box-shadow: 0px 1px 0px var(--grist-theme-table-body-border, var(--grist-color-dark-grey)); } -/* selected field has a transparent color - with frozen fields we can't do it */ -.gridview_row .field.frozen.selected { - background-color: var(--grist-theme-selection-opaque-bg, var(--grist-color-selection-opaque)); -} - /* make room for a frozen line by adding margin to first not frozen field - in header and in data */ .field.frozen + .field:not(.frozen) { margin-left: 1px; diff --git a/app/client/components/viewCommon.css b/app/client/components/viewCommon.css index 0f46725f..f37e5d63 100644 --- a/app/client/components/viewCommon.css +++ b/app/client/components/viewCommon.css @@ -53,10 +53,11 @@ * We can't use background inheritance, because row background color is more important then static (aka default) * column color defined on a field (so lower in the dom). */ - background-color: var(--grist-diff-background-color, - var(--grist-column-rule-background-color, - var(--grist-row-rule-background-color, - var(--grist-cell-background-color, unset)))); + --field-background-color: var(--grist-diff-background-color, + var(--grist-column-rule-background-color, + var(--grist-row-rule-background-color, + var(--grist-cell-background-color)))); + background-color: var(--field-background-color, unset); } /** Similar order is for detail view, but there is no row rules */ @@ -67,11 +68,11 @@ } .record.record-zebra.record-even .field { - background-color: var(--grist-diff-background-color, - var(--grist-column-rule-background-color, - var(--grist-row-rule-background-color-zebra, - var(--grist-row-rule-background-color, - var(--grist-cell-background-color, unset))))); + --field-background-color: var(--grist-diff-background-color, + var(--grist-column-rule-background-color, + var(--grist-row-rule-background-color-zebra, + var(--grist-row-rule-background-color, + var(--grist-cell-background-color))))); } .record.record-add .field { diff --git a/test/nbrowser/gristUtils.ts b/test/nbrowser/gristUtils.ts index bdd57bec..c945e417 100644 --- a/test/nbrowser/gristUtils.ts +++ b/test/nbrowser/gristUtils.ts @@ -2030,8 +2030,8 @@ export async function setFont(type: 'bold'|'underline'|'italic'|'strikethrough', } /** - * Returns the rgb/hex representation of `color` if it's a name (e.g. red, blue, green, white, black, or transparent), - * or `color` unchanged if it's not a name. + * Returns the rgb/hex representation of `color` if it's a name (e.g. red, blue, green, white, black, addRow, or + * transparent), or `color` unchanged if it's not a name. */ export function nameToHex(color: string) { switch(color) { @@ -2041,6 +2041,7 @@ export function nameToHex(color: string) { case 'white': color = '#FFFFFF'; break; case 'black': color = '#000000'; break; case 'transparent': color = 'rgba(0, 0, 0, 0)'; break; + case 'addRow': color = 'rgba(246, 246, 255, 1)'; break; } return color; }