Styling

The editor uses CSS custom properties for all visual styling. Override them on :root.

:root {
  --updog-grid-cell-bg-idle: #ffffff;
  --updog-grid-header-bg-idle: #f8f9fa;
}

Grid Cells

Variable	Description
--updog-grid-cell-bg-idle	Default cell background
--updog-grid-cell-content-idle	Default cell text color
--updog-grid-cell-border-idle	Default cell border
--updog-grid-cell-bg-hover	Hovered cell background
--updog-grid-selection-bg	Selected cell background
--updog-grid-focus-ring-border	Focused cell border
--updog-grid-cell-bg-dirty	Edited cell background
--updog-grid-cell-bg-invalid	Invalid cell background
--updog-grid-cell-content-cut	Cut cell text color
--updog-grid-cell-placeholder-idle	Placeholder cell text color

Headers

Variable	Description
--updog-grid-header-bg-idle	Default header background
--updog-grid-header-content-idle	Default header text color
--updog-grid-header-bg-active	Highlighted header background
--updog-grid-header-bg-selected	Selected header background
--updog-grid-header-icon-idle	Header icon color

Row Markers

Variable	Description
--updog-grid-marker-bg-idle	Default marker background
--updog-grid-marker-content-idle	Default marker text color
--updog-grid-marker-bg-active	Highlighted marker background
--updog-grid-marker-bg-selected	Selected marker background
--updog-grid-status-bar-bg-new	New row bar color
--updog-grid-status-bar-bg-edited	Edited row bar color
--updog-grid-status-bar-bg-error	Error row bar color
--updog-grid-status-bar-bg-empty	Empty row bar color

Selection and Clipboard

Variable	Description
--updog-grid-selection-border	Selection range border
--updog-grid-clipboard-border-copy	Clipboard marquee border (copy)
--updog-grid-clipboard-border-cut	Clipboard marquee border (cut)

Fill Handle

Variable	Description
--updog-grid-fill-overlay-bg	Fill overlay background
--updog-grid-fill-overlay-border	Fill overlay border
--updog-grid-fill-handle-bg	Fill handle background
--updog-grid-fill-handle-border	Fill handle stroke

Find and Replace

Variable	Description
--updog-grid-match-bg-default	Default match background
--updog-grid-match-bg-current	Current match background

Other

Variable	Description
--updog-grid-skeleton-bg	Skeleton background
--updog-grid-skeleton-highlight	Skeleton shimmer