Files
fleet/frontend/components/SQLEditor/theme.css
T
Noah Talerman 0234400505 Fix query editor syntax-highlighting colors and visual bugs (#49374)
For the following quick win:
- #49373

- [x] QA'd all new/changed functionality manually
2026-07-15 17:19:13 -07:00

195 lines
3.9 KiB
CSS

.ace_editor.ace-fleet {
font-family: "SourceCodePro", monospace;
font-size: 14px;
background: transparent;
color: #66696f;
border-radius: 4px;
border: solid 1px var(--ui-blue-gray);
line-height: 24px;
}
.ace_editor.ace-fleet:hover {
border: 1px solid var(--ui-fleet-black-50);
background: transparent;
}
.ace_editor.ace-fleet.ace_focus {
border: 1px solid var(--ui-fleet-black-75-down);
background: transparent;
}
.ace-fleet.ace_autocomplete .ace_content {
padding-left: 0px;
}
.ace_editor.ace-fleet.ace_autocomplete {
width: 350px;
}
.ace-fleet .ace_content {
background: var(--core-fleet-white);
height: 100%;
}
.ace-fleet .ace_gutter {
background: var(--core-fleet-white);
color: var(--ui-fleet-black-75);
z-index: 1;
border-right: solid 1px var(--ui-gray);
}
.ace-fleet .ace_gutter-active-line {
background-color: var(--ui-fleet-black-5);
border-radius: 2px;
}
.ace-fleet .ace_print-margin {
width: 1px;
background: var(--ui-fleet-black-5);
}
.ace-fleet .ace_scrollbar {
z-index: 1;
}
.ace-fleet .ace_cursor {
color: var(--ui-fleet-black-50);
}
/* Hide cursor in read-only mode */
.ace-fleet .ace_hidden-cursors {
opacity: 0;
}
.ace-fleet .ace_marker-layer .ace_selection {
background: rgba(74, 144, 226, 0.13);
}
.ace-fleet.ace_multiselect .ace_selection.ace_start {
box-shadow: 0 0 3px 0px var(--core-fleet-white);
}
.ace-fleet .ace_marker-layer .ace_step {
background: rgb(255, 255, 0);
}
.ace-fleet .ace_marker-layer .ace_bracket {
margin: -1px 0 0 -1px;
border: 1px solid var(--ui-fleet-black-25);
}
.ace-fleet .ace_marker-layer .ace_selected-word {
border: 1px solid var(--ui-fleet-black-25);
}
.ace-fleet .ace_invisible {
color: var(--ui-fleet-black-25);
}
.ace-fleet .ace_keyword {
color: var(--core-fleet-purple);
font-weight: normal;
}
.ace-fleet .ace_osquery-token {
border-radius: 3px;
background-color: var(--core-fleet-purple);
color: #ffffff;
}
.ace-fleet .ace_identifier {
color: var(--ui-fleet-black-75);
}
.ace-fleet .ace_string {
color: var(--core-fleet-green);
}
.ace-fleet .ace_osquery-column {
color: var(--ui-fleet-black-75);
}
.ace-fleet .ace_meta,
.ace-fleet .ace_storage,
.ace-fleet .ace_storage.ace_type,
.ace-fleet .ace_support.ace_type {
color: #8959a8;
}
.ace-fleet .ace_keyword.ace_operator,
.ace-fleet .ace_paren {
color: var(--ui-fleet-black-75);
}
.ace-fleet .ace_constant.ace_numeric {
color: var(--core-fleet-green);
}
.ace-fleet .ace_constant.ace_character,
.ace-fleet .ace_constant.ace_language,
.ace-fleet .ace_keyword.ace_other.ace_unit,
.ace-fleet .ace_support.ace_constant,
.ace-fleet .ace_variable.ace_parameter {
color: #f5871f;
}
.ace-fleet .ace_constant.ace_other {
color: #666969;
}
.ace-fleet .ace_invalid {
color: var(--ui-error);
}
.ace-fleet .ace_invalid.ace_deprecated {
color: #ffffff;
background-color: var(--core-fleet-purple);
}
.ace-fleet .ace_fold {
background-color: #4271ae;
border-color: #4d4d4c;
}
.ace-fleet .ace_entity.ace_name.ace_function,
.ace-fleet .ace_support.ace_function,
.ace-fleet .ace_variable {
color: #4271ae;
}
.ace-fleet .ace_support.ace_class,
.ace-fleet .ace_support.ace_type {
color: #c99e00;
}
.ace-fleet .ace_heading,
.ace-fleet .ace_markup.ace_heading {
color: #4fd061;
}
.ace-fleet .ace_entity.ace_name.ace_tag,
.ace-fleet .ace_entity.ace_other.ace_attribute-name,
.ace-fleet .ace_meta.ace_tag,
.ace-fleet .ace_string.ace_regexp,
.ace-fleet .ace_variable {
color: #c82829;
}
.ace-fleet .ace_comment {
color: var(--ui-fleet-black-50);
}
.ace-fleet .ace_indent-guide {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bdu3f/BwAlfgctduB85QAAAABJRU5ErkJggg==)
right repeat-y;
}
/* Dark mode overrides — only for values without a matching CSS custom property */
body.dark-mode .ace_editor.ace-fleet {
color: var(--ui-fleet-black-33);
}
body.dark-mode .ace-fleet .ace_marker-layer .ace_selection {
background: rgba(123, 121, 255, 0.2);
}