diff --git a/ui/src/style/components/code-mirror/_hints.scss b/ui/src/style/components/code-mirror/_hints.scss new file mode 100644 index 0000000000..cc5e431761 --- /dev/null +++ b/ui/src/style/components/code-mirror/_hints.scss @@ -0,0 +1,35 @@ +/* + CodeMirror Hints Styles + ------------------------------------------------------------------------------ +*/ + +.CodeMirror-hints { + position: absolute; + z-index: 10; + overflow: hidden; + list-style: none; + margin: 0; + padding: 0; + box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8); + border-radius: $radius; + font-size: 12px; + font-family: $code-font; + font-weight: 600; + max-height: 20em; + overflow-y: auto; + @include gradient-h($c-star, $c-pool); +} + +li.CodeMirror-hint { + margin: 0; + padding: 6px 7px; + line-height: 12px; + white-space: pre; + color: $c-neutrino; + cursor: pointer; +} + +li.CodeMirror-hint-active { + @include gradient-h($c-comet, $c-laser); + color: $g20-white; +} diff --git a/ui/src/style/components/code-mirror/_tickscript.scss b/ui/src/style/components/code-mirror/_tickscript.scss new file mode 100644 index 0000000000..6db3d30610 --- /dev/null +++ b/ui/src/style/components/code-mirror/_tickscript.scss @@ -0,0 +1,95 @@ +/* + CodeMirror "TICKscript" Theme + ------------------------------------------------------------------------------ + Intended for use with the TICKscript CodeMirror Mode +*/ + +.cm-s-tickscript { + .cm-keyword { + color: $c-comet; + } + + .cm-operator { + color: $c-dreamsicle; + } + + .cm-variable-2 { + color: #80CBC4; + } + + .cm-variable-3, + .cm-type { + color: $c-laser; + } + + .cm-builtin { + color: #DECB6B; + } + + .cm-atom { + color: $c-viridian; + } + + .cm-number { + color: $c-daisy; + } + + .cm-def { + color: rgba(233, 237, 237, 1); + } + + .cm-string { + color: $c-krypton; + } + + .cm-string-2 { + color: #80CBC4; + } + + .cm-comment { + color: $g10-wolf; + } + + .cm-variable { + color: $c-laser; + } + + .cm-tag { + color: #80CBC4; + } + + .cm-meta { + color: #80CBC4; + } + + .cm-attribute { + color: #FFCB6B; + } + + .cm-property { + color: #80CBAE; + } + + .cm-qualifier { + color: #DECB6B; + } + + .cm-variable-3, + .cm-type { + color: #DECB6B; + } + + .cm-tag { + color: rgba(255, 83, 112, 1); + } + + .cm-error { + color: rgba(255, 255, 255, 1.0); + background-color: #EC5F67; + } + + .CodeMirror-matchingbracket { + text-decoration: underline; + color: white !important; + } +} diff --git a/ui/src/style/components/code-mirror/_time-machine.scss b/ui/src/style/components/code-mirror/_time-machine.scss new file mode 100644 index 0000000000..d9b8e99d06 --- /dev/null +++ b/ui/src/style/components/code-mirror/_time-machine.scss @@ -0,0 +1,45 @@ +/* + CodeMirror "Time Machine" Theme + ------------------------------------------------------------------------------ + Intended for use with the IFQL CodeMirror Mode +*/ + +.cm-s-time-machine { + color: $g11-sidewalk; + + .cm-variable { + color: $c-pool; + font-weight: 700; + } + .cm-function, + .cm-pipe-forward { + color: $c-comet; + font-weight: 700; + } + .cm-arrow-function, + .cm-function-arg { + color: #ff4d96; + } + .cm-operator { + color: $g15-platinum; + } + .cm-argument { + color: $g11-sidewalk; + } + .cm-string-single, + .cm-string-double { + color: $c-honeydew; + } + .cm-boolean { + color: $c-viridian; + } + .cm-null { + color: $c-dreamsicle; + } + .cm-number { + color: $c-hydrogen; + } + .cm-comment { + color: $g8-storm; + } +} \ No newline at end of file diff --git a/ui/src/style/components/code-mirror/theme.scss b/ui/src/style/components/code-mirror/theme.scss index c8d6b53f27..3e1580b170 100644 --- a/ui/src/style/components/code-mirror/theme.scss +++ b/ui/src/style/components/code-mirror/theme.scss @@ -1,10 +1,6 @@ /* - - Name: CHRONOGRAF YO - Author: Michael Kaminsky (http://github.com/mkaminsky11) - - Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme) - + CodeMirror Styles + ------------------------------------------------------------------------------ */ .react-codemirror2 { @@ -12,12 +8,13 @@ width: 100%; height: 100%; } -.cm-s-material.CodeMirror { +.CodeMirror { border-radius: 0 0 $radius $radius; font-family: $code-font; background-color: transparent; color: $g13-mist; - font-weight: 600; + font-weight: 500; + font-size: 13px; height: 100%; } @@ -29,12 +26,12 @@ @include custom-scrollbar-round($g0-obsidian, $g6-smoke); } -.cm-s-material .CodeMirror-gutters { +.CodeMirror-gutters { @include gradient-v($g2-kevlar, $g0-obsidian); border: none; } -.cm-s-material .CodeMirror-gutters .CodeMirror-gutter { +.CodeMirror-gutters .CodeMirror-gutter { background-color: fade-out($g4-onyx, 0.75); height: calc(100% + 30px); } @@ -43,166 +40,54 @@ width: 60px; } -.cm-s-material.CodeMirror .CodeMirror-sizer { +.CodeMirror .CodeMirror-sizer { margin-left: 60px; } -.cm-s-material.CodeMirror .CodeMirror-linenumber.CodeMirror-gutter-elt { +.CodeMirror .CodeMirror-linenumber.CodeMirror-gutter-elt { padding-right: 9px; width: 46px; color: $g8-storm; } -.cm-s-material .CodeMirror-guttermarker, -.cm-s-material .CodeMirror-guttermarker-subtle, -.cm-s-material .CodeMirror-linenumber { +.CodeMirror-guttermarker, +.CodeMirror-guttermarker-subtle, +.CodeMirror-linenumber { color: rgb(83, 127, 126); } -.cm-s-material .CodeMirror-cursor { +.CodeMirror-cursor { width: 2px; border: 0; background-color: $g20-white; box-shadow: 0 0 3px $c-laser, 0 0 6px $c-ocean, 0 0 11px $c-amethyst; } -.cm-s-material div.CodeMirror-selected, -.cm-s-material.CodeMirror-focused div.CodeMirror-selected { +div.CodeMirror-selected, +.CodeMirror-focused div.CodeMirror-selected { background-color: fade-out($g8-storm, 0.7); } -.cm-s-material .CodeMirror-line::selection, -.cm-s-material .CodeMirror-line>span::selection, -.cm-s-material .CodeMirror-line>span>span::selection { +.CodeMirror-line::selection, +.CodeMirror-line>span::selection, +.CodeMirror-line>span>span::selection { background: rgba(255, 255, 255, 0.10); } -.cm-s-material .CodeMirror-line::-moz-selection, -.cm-s-material .CodeMirror-line>span::-moz-selection, -.cm-s-material .CodeMirror-line>span>span::-moz-selection { +.CodeMirror-line::-moz-selection, +.CodeMirror-line>span::-moz-selection, +.CodeMirror-line>span>span::-moz-selection { background: rgba(255, 255, 255, 0.10); } -.cm-s-material .CodeMirror-activeline-background { +.CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); } -.cm-s-material .cm-keyword { - color: $c-comet; -} - -.cm-s-material .cm-operator { - color: $c-dreamsicle; -} - -.cm-s-material .cm-variable-2 { - color: #80CBC4; -} - -.cm-s-material .cm-variable-3, -.cm-s-material .cm-type { - color: $c-laser; -} - -.cm-s-material .cm-builtin { - color: #DECB6B; -} - -.cm-s-material .cm-atom { - color: $c-viridian; -} - -.cm-s-material .cm-number { - color: $c-daisy; -} - -.cm-s-material .cm-def { - color: rgba(233, 237, 237, 1); -} - -.cm-s-material .cm-string { - color: $c-krypton; -} - -.cm-s-material .cm-string-2 { - color: #80CBC4; -} - -.cm-s-material .cm-comment { - color: $g10-wolf; -} - -.cm-s-material .cm-variable { - color: $c-laser; -} - -.cm-s-material .cm-tag { - color: #80CBC4; -} - -.cm-s-material .cm-meta { - color: #80CBC4; -} - -.cm-s-material .cm-attribute { - color: #FFCB6B; -} - -.cm-s-material .cm-property { - color: #80CBAE; -} - -.cm-s-material .cm-qualifier { - color: #DECB6B; -} - -.cm-s-material .cm-variable-3, -.cm-s-material .cm-type { - color: #DECB6B; -} - -.cm-s-material .cm-tag { - color: rgba(255, 83, 112, 1); -} - -.cm-s-material .cm-error { - color: rgba(255, 255, 255, 1.0); - background-color: #EC5F67; -} - -.cm-s-material .CodeMirror-matchingbracket { - text-decoration: underline; - color: white !important; -} - -// CodeMirror hints -.CodeMirror-hints { - position: absolute; - z-index: 10; - overflow: hidden; - list-style: none; - margin: 0; - padding: 0; - box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8); - border-radius: $radius; - font-size: 12px; - font-family: $code-font; - font-weight: 600; - max-height: 20em; - overflow-y: auto; - @include gradient-h($c-star, $c-pool); -} - -li.CodeMirror-hint { - margin: 0; - padding: 6px 7px; - line-height: 12px; - white-space: pre; - color: $c-neutrino; - cursor: pointer; -} - -li.CodeMirror-hint-active { - @include gradient-h($c-comet, $c-laser); - color: $g20-white; -} \ No newline at end of file +/* + Themes & Sub-Components + ------------------------------------------------------------------------------ +*/ +@import 'time-machine'; +@import 'tickscript'; +@import 'hints';