gristlabs_grist-core/app/client/widgets/TextEditor.css
George Gevoian 273b976cab (core) Polish dark mode and remove beta tag
Summary:
Polishes support for dark mode and enables syncing with the OS theme
by default.

Test Plan: Manual.

Reviewers: JakubSerafin

Reviewed By: JakubSerafin

Subscribers: JakubSerafin

Differential Revision: https://phab.getgrist.com/D4041
2023-09-21 13:14:48 -04:00

142 lines
3.4 KiB
CSS

.cell_editor {
position: absolute;
z-index: 1000; /* make it higher than popper's 999 */
display: flex;
}
.default_editor {
box-shadow: 0 0 3px 2px var(--grist-theme-cursor, var(--grist-color-cursor));
}
.readonly_editor {
box-shadow: 0 0 3px 2px var(--grist-theme-cursor-readonly, var(--grist-color-slate));
}
/* make room for lock icon */
.readonly_editor .celleditor_cursor_editor .celleditor_text_editor,
.readonly_editor .celleditor_cursor_editor .celleditor_content_measure {
padding-left: 18px;
}
.readonly_editor::before {
content: "";
position: absolute;
top: 0;
left: 0;
margin: 4px 3px 0 3px;
width: 13px;
height: 13px;
background-color: #D0D0D0;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-image: var(--icon-Lock);
}
.formula_editor_wrapper {
display: flex;
flex-direction: column;
width: 100%;
}
/* Make overflow hidden, since editor might be 1 pixel bigger due to fix for devices
* with different pixel ratio */
.formula_editor {
background-color: var(--grist-theme-ace-editor-bg, white);
padding: 4px 4px 2px 21px;
z-index: 10;
overflow: hidden;
flex: none;
min-height: 22px; /* this is the usual height, but helps slightly when font is shorter than expected */
}
/* styles specific to the formula editor in the side panel */
.default_editor.formula_editor_sidepane {
border-radius: 3px;
}
.formula_editor_sidepane > .formula_editor {
padding: 5px 0 5px 24px;
border-radius: 3px;
}
.formula_editor_sidepane > .formula_field_edit::before, .formula_field_sidepane::before {
left: 4px;
}
.celleditor_cursor_editor {
background-color: var(--grist-theme-cell-editor-bg, white);
/* the following are copied from .field_clip */
padding: 3px 3px 0px 3px;
font-family: var(--grist-font-family-data);
font-size: var(--grist-medium-font-size);
line-height: 18px;
min-height: 21px;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.celleditor_text_editor {
display: block;
outline: none;
padding: 0px;
border: none;
resize: none;
z-index: 10;
background-color: var(--grist-theme-cell-editor-bg, unset);
color: var(--grist-theme-cell-editor-fg, black);
/* Inherit styles, same as for .celleditor_content_measure, to ensure that sizes correspond. */
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.celleditor_text_editor::placeholder {
color: var(--grist-theme-cell-editor-placeholder-fg, unset);
}
.celleditor_content_measure {
position: absolute;
left: 0;
top: 0;
border: none;
visibility: hidden;
overflow: visible;
/* with 'pre-wrap', this lets the editor gets as wide as needed before wrapping; */
/* width is limited only by max-width (which is set in JS code). */
width: max-content;
/* Inherit styles, same as for .celleditor_text_editor, to ensure that sizes correspond. */
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.error_msg {
display: flex;
background-color: #ffb6c1;
padding: 4px;
color: black;
white-space: pre-wrap;
flex: none;
overflow: auto;
}
.error_details {
background-color: #F8EAD5; /* 20% of color-warning-bg */
font-family: 'Monaco', 'Menlo', monospace;
font-size: 12px;
white-space: pre-wrap;
flex: auto;
overflow: auto;
word-break: break-all;
}
.error_details_inner {
padding: 2px 2px 2px 28px;
}
.kf_collapser {
height: 1.2rem;
}