gristlabs_grist-core/app/client/components/AceEditor.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

64 lines
2.0 KiB
CSS

.ace_editor {
background-color: var(--grist-theme-ace-editor-bg, white);
}
.ace_editor .ace_placeholder {
font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, "Source Code Pro", source-code-pro, monospace;
font-size: 11px;
color: var(--grist-theme-text-light, #929299);
font-style: italic;
white-space: nowrap;
opacity: 1.0;
transform: none;
}
.ace_grist_link_hidden {
display: none;
}
.ace_grist_link {
color: var(--grist-theme-ace-autocomplete-link, var(--grist-color-light-green));
text-decoration: underline;
cursor: pointer;
}
.ace_grist_example {
color: var(--grist-theme-ace-autocomplete-secondary-fg);
}
.ace_editor.ace_autocomplete .ace_completion-highlight {
color: var(--grist-theme-ace-autocomplete-highlighted-fg, #000) !important;
text-shadow: 0 0 0.01em;
}
.ace_editor.ace_autocomplete .ace_completion-highlight.ace_grist_link {
color: var(--grist-theme-ace-autocomplete-link-highlighted, var(--grist-color-dark-green)) !important;
}
.ace_editor.ace_autocomplete .ace_text-layer {
z-index: 7;
pointer-events: auto;
}
.ace_editor.ace_autocomplete {
color: var(--grist-theme-ace-autocomplete-primary-fg) !important;
background: var(--grist-theme-ace-autocomplete-bg, #fbfbfb) !important;
border: 1px solid var(--grist-theme-ace-autocomplete-border, lightgray) !important;
width: 500px !important; /* the default in language_tools.js is 280px */
max-width: 80%; /* of the screen, for hypothetical mobile support */
}
.ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
background-color: var(--grist-theme-ace-autocomplete-line-bg-hover, rgba(233,233,253,0.4)) !important;
border: 1px solid var(--grist-theme-ace-autocomplete-line-border-hover, #abbffe) !important;
}
.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
background-color: var(--grist-theme-ace-autocomplete-active-line-bg, #CAD6FA) !important;
}
.ace_autocomplete .ace_line .ace_ {
/* Ace collapses whitespace by default, which breaks alignment changes made in AceEditorCompletions.ts. */
white-space: pre !important;
}