You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
282 lines
8.2 KiB
282 lines
8.2 KiB
/*
|
|
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);
|
|
}
|
|
|
|
.gridview_row .field.selected > .selection {
|
|
background-color: var(--grist-theme-selection, var(--grist-color-selection));
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.field.transform_field > .selection {
|
|
background-color: var(--grist-theme-selection-darker, rgba(22,179,120,0.25));
|
|
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.transform_field > .field_clip.invalid + .selection {
|
|
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-header-color,
|
|
var(--grist-theme-table-header-fg), unset);
|
|
background-color: var(--grist-header-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 > .selection {
|
|
background-color: var(--grist-theme-selection-header);
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.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;
|
|
}
|