mirror of https://github.com/hashicorp/consul
225 lines
4.6 KiB
SCSS
225 lines
4.6 KiB
SCSS
$syntax-consul: #69499a;
|
|
$syntax-dark-gray: #535f73;
|
|
:root {
|
|
--syntax-light-grey: #dde3e7;
|
|
--syntax-light-gray: #a4a4a4;
|
|
--syntax-light-grey-blue: #6c7b81;
|
|
--syntax-dark-grey: #788290;
|
|
--syntax-faded-gray: #eaeaea;
|
|
// Product colors
|
|
--syntax-atlas: #127eff;
|
|
--syntax-vagrant: #2f88f7;
|
|
--syntax-consul: #{$syntax-consul};
|
|
--syntax-terraform: #822ff7;
|
|
--syntax-serf: #dd4e58;
|
|
--syntax-packer: #1ddba3;
|
|
|
|
// Our colors
|
|
--syntax-gray: lighten(#000, 89%);
|
|
--syntax-red: #ff3d3d;
|
|
--syntax-green: #39b54a;
|
|
--syntax-dark-gray: #{$syntax-dark-gray};
|
|
|
|
--syntax-gutter-grey: #2a2f36;
|
|
--syntax-yellow: var(--token-color-vault-brand);
|
|
}
|
|
.CodeMirror {
|
|
max-width: 1260px;
|
|
min-height: 300px;
|
|
height: auto;
|
|
/* adds some space at the bottom of the editor for when a horizonal-scroll has appeared */
|
|
padding-bottom: 20px;
|
|
}
|
|
.CodeMirror-scroll {
|
|
overflow-x: hidden !important;
|
|
}
|
|
.CodeMirror-lint-tooltip {
|
|
background-color: #f9f9fa;
|
|
border: 1px solid var(--syntax-light-gray);
|
|
border-radius: 0;
|
|
color: lighten(#000, 13%);
|
|
font-family: var(--typo-family-mono);
|
|
font-size: 13px;
|
|
padding: 7px 8px 9px;
|
|
}
|
|
|
|
.cm-s-hashi {
|
|
&.CodeMirror {
|
|
width: 100%;
|
|
background-color: var(--token-color-hashicorp-brand) !important;
|
|
color: #cfd2d1 !important;
|
|
border: none;
|
|
font-family: var(--typo-family-mono);
|
|
-webkit-font-smoothing: auto;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.CodeMirror-gutters {
|
|
color: var(--syntax-dark-grey);
|
|
background-color: var(--syntax-gutter-grey);
|
|
border: none;
|
|
}
|
|
|
|
.CodeMirror-cursor {
|
|
border-left: solid thin #f8f8f0;
|
|
}
|
|
|
|
.CodeMirror-linenumber {
|
|
color: #6d8a88;
|
|
}
|
|
|
|
&.CodeMirror-focused div.CodeMirror-selected {
|
|
background: rgb(33, 66, 131);
|
|
}
|
|
|
|
.CodeMirror-line::selection,
|
|
.CodeMirror-line > span::selection,
|
|
.CodeMirror-line > span > span::selection {
|
|
background: rgb(33, 66, 131);
|
|
}
|
|
|
|
.CodeMirror-line::-moz-selection,
|
|
.CodeMirror-line > span::-moz-selection,
|
|
.CodeMirror-line > span > span::-moz-selection {
|
|
background: var(--token-color-surface-interactive);
|
|
}
|
|
|
|
span.cm-comment {
|
|
color: var(--syntax-light-grey);
|
|
}
|
|
|
|
span.cm-string,
|
|
span.cm-string-2 {
|
|
color: var(--syntax-packer);
|
|
}
|
|
|
|
span.cm-number {
|
|
color: var(--syntax-serf);
|
|
}
|
|
|
|
span.cm-variable {
|
|
color: lighten($syntax-consul, 20%);
|
|
}
|
|
|
|
span.cm-variable-2 {
|
|
color: lighten($syntax-consul, 20%);
|
|
}
|
|
|
|
span.cm-def {
|
|
color: var(--syntax-packer);
|
|
}
|
|
|
|
span.cm-operator {
|
|
color: var(--syntax-gray);
|
|
}
|
|
span.cm-keyword {
|
|
color: var(--syntax-yellow);
|
|
}
|
|
|
|
span.cm-atom {
|
|
color: var(--syntax-serf);
|
|
}
|
|
|
|
span.cm-meta {
|
|
color: var(--syntax-packer);
|
|
}
|
|
|
|
span.cm-tag {
|
|
color: var(--syntax-packer);
|
|
}
|
|
|
|
span.cm-error {
|
|
color: var(--syntax-red);
|
|
}
|
|
|
|
span.cm-attribute {
|
|
color: #9fca56;
|
|
}
|
|
|
|
span.cm-qualifier {
|
|
color: #9fca56;
|
|
}
|
|
|
|
span.cm-property {
|
|
color: lighten($syntax-consul, 20%);
|
|
}
|
|
|
|
span.cm-variable-3 {
|
|
color: #9fca56;
|
|
}
|
|
|
|
span.cm-builtin {
|
|
color: #9fca56;
|
|
}
|
|
|
|
.CodeMirror-activeline-background {
|
|
background: #101213;
|
|
}
|
|
|
|
.CodeMirror-matchingbracket {
|
|
text-decoration: underline;
|
|
color: var(--token-color-surface-primary) !important;
|
|
}
|
|
}
|
|
|
|
.readonly-codemirror {
|
|
.CodeMirror-cursors {
|
|
display: none;
|
|
}
|
|
|
|
.cm-s-hashi {
|
|
span {
|
|
color: var(--syntax-light-grey);
|
|
}
|
|
|
|
span.cm-string,
|
|
span.cm-string-2 {
|
|
color: var(--syntax-faded-gray);
|
|
}
|
|
|
|
span.cm-number {
|
|
color: lighten($syntax-dark-gray, 30%);
|
|
}
|
|
|
|
span.cm-property {
|
|
color: var(--token-color-surface-primary);
|
|
}
|
|
|
|
span.cm-variable-2 {
|
|
color: var(--syntax-light-grey-blue);
|
|
}
|
|
}
|
|
}
|
|
|
|
%code-editor {
|
|
.toolbar-container {
|
|
background: var(--token-color-surface-strong);
|
|
background: linear-gradient(
|
|
180deg,
|
|
var(--token-color-surface-strong) 50%,
|
|
var(--token-color-surface-interactive-active) 100%
|
|
);
|
|
border: 1px solid var(--token-color-surface-interactive-active);
|
|
border-bottom-color: var(--token-color-foreground-faint);
|
|
border-top-color: var(--token-color-foreground-disabled);
|
|
|
|
.toolbar {
|
|
.title {
|
|
color: var(--token-color-foreground-strong);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
.toolbar-separator {
|
|
border-right: 1px solid var(--token-color-palette-neutral-300);
|
|
}
|
|
}
|
|
.ember-power-select-trigger {
|
|
background-color: var(--token-color-surface-primary);
|
|
color: var(--token-color-hashicorp-brand);
|
|
border-radius: var(--decor-radius-100);
|
|
border: var(--decor-border-100);
|
|
border-color: var(--token-color-foreground-faint);
|
|
}
|
|
}
|
|
}
|