gristlabs_grist-core/app/client/components/viewCommon.css

/*
  record class is used for grid view header and rows
 */
.record {
  display: -webkit-flex;
  display: flex;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;

  border-width: 0px;
  border-style: none;
  border-color: var(--grist-theme-table-body-border, var(--grist-color-dark-grey));
  border-left-style: solid;  /* left border, against rownumbers div, always on */
  border-bottom-width: 1px; /* style: none, set by record-hlines*/
  /* Record background is white (or theme default) by default.
     It gets overridden by the add row, zebra stripes.
     It also gets overridden by selecting rows - but in that case background comes from
     selected fields.
  */
  background-color: var(--grist-diff-background-color, /* diffing view */
                    var(--grist-row-rule-background-color, /* conditional row style */
                    var(--grist-theme-cell-bg, white))); /* default, not transparent */
  color: var(--grist-row-color, var(--grist-theme-cell-fg, black));
}

.record.record-hlines {  /* Overwrites style, width set on element */
  border-bottom-style: solid;
}

.record.record-zebra.record-even {
  background-color: var(--grist-diff-background-color,
                    var(--grist-row-rule-background-color-zebra,
                    var(--grist-row-rule-background-color,
                    var(--grist-theme-cell-zebra-bg, #f8f8f8))));
}

.record.record-add {
  background-color: var(--grist-theme-table-add-new-bg, #f6f6ff) !important;  /* important to win over every thing */
}

.field {
  position: relative;
  height: 100%;
  -webkit-flex: none;
  flex: none;
  min-height: 22px;
  white-space: pre;
  /* make border exist always so content doesn't shift on v-gridline toggle */
  border: 0px solid transparent;  /* width set by js, border exists but is transparent */
/**
* Order of precedence for field is as follows: diff color, column rule, row rule, static (default) style, transparent.
* 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).
*/
  --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 */
.g_record_detail_value {
  background-color: var(--grist-diff-background-color,
                    var(--grist-column-rule-background-color,
                    var(--grist-cell-background-color, unset)));
}

.record.record-zebra.record-even .field {
  --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 {
  background-color: unset !important;  /* important to win over zebra stripes */
}

.record-vlines > .field {
  /* set border visibility */
  border-right-color: var(--grist-theme-table-body-border, var(--grist-color-dark-grey));
}

.field.scissors {
  outline: 2px dashed var(--grist-theme-cursor, var(--grist-color-cursor));
}

.field.draft {
  padding-right: 18px;
}

.field_clip {
  padding: 3px 3px 0px 3px;
  font-family: var(--grist-font-family-data);
  line-height: 18px;
  min-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  height: 100%;
  /* We need to repeat background color here, as it might also be applied on a widget level (through DiffBox.ts)*/
  background-color: var(--grist-diff-background-color, inherit);
  --grist-actual-cell-color: var(--grist-diff-color,
                             var(--grist-rule-color,
                             var(--grist-row-color,
                             var(--grist-cell-color))));
  color: var(--grist-actual-cell-color, unset);
}

.field.selected > .field_selection {
  background-color: var(--grist-theme-selection, var(--grist-color-selection));
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.field_clip.invalid, .field_clip.field-error-from-style {
  background-color: #ffb6c1;
  color: black;
}

.field_clip.invalid:empty {
  background-color: unset;
}

.field_clip.field-error-P {
  color: #B0B0B0;
  background-color: unset;
}

.field_clip.invalid.field-error-C {
  background-color: unset;
  color: var(--grist-color-dark-grey);
  padding-left: 18px;
}

.field_clip.invalid.field-error-C::before {
  /* based on standard icon styles */
  content: "";
  position: absolute;
  top: 4px;
  left: 2px;
  width: 14px;
  height: 14px;
  background-color: var(--grist-color-dark-grey);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--icon-Lock);
}

.field_clip.field-error-U {
  color: #6363a2;
  background-color: unset;
}

.field_clip.field-error-S {
  color: #aaa;
  background-color: unset;
}

/* Insert a zero-width space into each cell, to size cells to at least one line of text. */
.field_clip:empty::before { content: '\200B'; }

@media not print {
.selected_cursor {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.active_cursor {
  /* one pixel outline around the cell, and one inside the cell */
  outline: 1px solid var(--grist-theme-cursor, var(--grist-color-cursor));
  box-shadow: inset 0 0 0 1px var(--grist-theme-cursor, var(--grist-color-cursor));
  z-index: 1;
}
}

.column_name {
  color: var(--grist-theme-table-header-fg, unset);
  background-color: var(--grist-theme-table-header-bg, var(--grist-color-light-grey));
  text-align: center;
  cursor: pointer;
  /* Column headers always show vertical gridlines, to make it clear how to resize them */
  border-right-color: var(--grist-theme-table-header-border-dark, var(--grist-color-dark-grey));
}

.column_names.record {
  border-left-color: var(--grist-theme-table-header-border, var(--grist-color-dark-grey));
}

.column_name.selected {
  color: var(--grist-theme-table-header-selected-fg, unset);
  background-color: var(--grist-theme-table-header-selected-bg, var(--grist-color-medium-grey-opaque));
}

.gridview_data_row_num.selected {
  color: var(--grist-theme-table-header-selected-fg, unset);
  background-color: var(--grist-theme-table-header-selected-bg, var(--grist-color-medium-grey-opaque));
}

.link_selector_row > .gridview_data_row_num {
  color: var(--grist-theme-left-panel-active-page-fg, white);
  background-color: var(--grist-theme-left-panel-active-page-bg, var(--grist-color-dark-bg));
}

.link_selector_row > .record::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--grist-theme-selection, var(--grist-color-selection));
  /* z-index should be higher than '.record .field.frozen' (10) to show for frozen columns,
   * but lower than '.gridview_stick-top' (20) to stay under column headers. */
  z-index: 15;
}

.gridview_data_row_info.linked_dst::before {
  position: absolute;
  content: '\25B8';
  text-align: left;
  left: 7px;
}

.text_wrapping {
  word-break: break-word;
  white-space: pre-wrap;
}

.diff-local, .diff-local-add {
  background-color: #dfdfff;
  --grist-diff-background-color: #dfdfff;
  --grist-diff-color: black;
}

.diff-parent, .diff-remote-remove {
  background-color: #ffdfdf;
  --grist-diff-background-color: #ffdfdf;
  --grist-diff-color: black;
  text-decoration: line-through;
}

.diff-local-remove {
  background-color: #dfdfdf;
  --grist-diff-background-color: #dfdfdf;
  --grist-diff-color: black;
  text-decoration: line-through;
}

.diff-remote, .diff-remote-add {
  background-color: #afffaf;
  --grist-diff-background-color: #afffaf;
  --grist-diff-color: black;
}

.diff-common {
  color: #555;
}