gristlabs_grist-core/app/client/components/viewCommon.css
Jarosław Sadziński f93b4fd3bc (core) Selection for styled columns
Summary:
Grid UI improvements.
- Selecting a column with a custom background, didn't produce a visual difference.
- Hiding num-row right border when it is not needed (it should be used only for frozen columns)

Test Plan: manual tests

Reviewers: cyprien

Reviewed By: cyprien

Differential Revision: https://phab.getgrist.com/D3425
2022-05-13 09:45:17 +02:00

233 lines
5.4 KiB
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-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 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 - this still remains white.
TODO: consider making this color the single source
*/
background: white;
}
.record.record-hlines { /* Overwrites style, width set on element */
border-bottom-style: solid;
}
.record.record-zebra.record-even {
background-color: #f8f8f8;
}
.record.record-add {
background-color: #f6f6ff !important; /* important to win over zebra stripes */
}
.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 */
}
.record-vlines > .field {
border-right-color: var(--grist-color-dark-grey); /* set border visibility */
}
.field.scissors {
outline: 2px dashed var(--grist-color-cursor);
}
.field.selected {
background-color: var(--grist-color-selection);
}
.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%;
background-color: var(--grist-diff-background-color, var(--grist-cell-background-color, unset));
--grist-actual-cell-color: var(--grist-diff-color, var(--grist-cell-color));
color: var(--grist-actual-cell-color, black);
}
.field.selected .field_clip {
mix-blend-mode: darken;
}
.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%;
/* one pixel outline around the cell, and one inside the cell */
outline: 1px solid var(--grist-color-inactive-cursor);
box-shadow: inset 0 0 0 1px var(--grist-color-inactive-cursor);
pointer-events: none;
}
.active_cursor {
outline: 1px solid var(--grist-color-cursor);
box-shadow: inset 0 0 0 1px var(--grist-color-cursor);
}
}
/* These classes are used to flash the cursor to indicate that editing in a cell is disabled. */
.cursor_read_only {
outline: 1px solid #ff9a00;
box-shadow: inset 0 0 0 1px #ff9a00;
}
.cursor_read_only_fade {
outline-color: var(--grist-color-cursor);
box-shadow: inset 0 0 0 1px var(--grist-color-cursor);
transition: outline-color 0.5s ease-in, box-shadow 0.5s ease-in;
}
.cursor_read_only_lock {
top: 0px;
height: 100%;
padding: 0 4px;
line-height: inherit;
background-color: #ff9a00;
color: white;
opacity: 1;
}
.cursor_read_only_fade > .cursor_read_only_lock {
opacity: 0;
transition: opacity 0.5s ease-in;
}
.column_name {
background-color: 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-color-dark-grey);
}
.column_name.selected {
background-color: var(--grist-color-medium-grey-opaque);
}
.gridview_data_row_num.selected {
background-color: var(--grist-color-medium-grey-opaque);
}
.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;
}