r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

update codemirror theme to include sass variables

Browse source
This commit is contained in:
catarak 2016-09-15 17:57:03 -04:00 committed by Cassie Tarakajian
parent d8757cc921
commit d8ecd1f72a
1 changed files with 40 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
client/styles/components/_p5-widget-codemirror-theme.scss
View file

@ -20,18 +20,8 @@ $p5-light-white: #FDFDFD;
$p5-light-lightgray: #f4f4f4; $p5-light-lightgray: #f4f4f4;
$p5-light-darkgray: #b5b5b5; $p5-light-darkgray: #b5b5b5;
$p5-light-selected: rbga(45, 123, 182, 25); $p5-light-selected: rgba(45, 123, 182, 25);
$p5-light-activeline: rgb(207, 207, 207);
:root {
--light-gray: #A0A0A0;
--dark-gray: #666;
--almost-black: #222;
--dark-brown: #704F21;
--light-brown: #a67f59;
--pinkish: #DC3787; /* not p5 pink, but related */
--dark-blueish: #00A1D3;
}
.cm-s-p5-widget { .cm-s-p5-widget {
background-color: $p5-light-white; background-color: $p5-light-white;
@ -42,16 +32,24 @@ $p5-light-selected: rbga(45, 123, 182, 25);
color: $p5-light-gray; color: $p5-light-gray;
} }
.cm-s-p5-widget .cm-def {
color: $p5-light-blue;
}
.cm-s-p5-widget .cm-string { .cm-s-p5-widget .cm-string {
color: $p5-light-blue; color: $p5-light-blue;
} }
.cm-s-p5-widget .cm-string-2 {
color: $p5-light-pink;
}
.cm-s-p5-widget .cm-number { .cm-s-p5-widget .cm-number {
color: $p5-light-pink; color: $p5-light-pink;
} }
.cm-s-p5-widget .cm-keyword { .cm-s-p5-widget .cm-keyword {
color: $p5-light-darkblue; color: $p5-light-brown;
} }
.cm-s-p5-widget .cm-variable { .cm-s-p5-widget .cm-variable {
@ -79,36 +77,39 @@ $p5-light-selected: rbga(45, 123, 182, 25);
} }
.cm-s-p5-widget .CodeMirror-selected { .cm-s-p5-widget .CodeMirror-selected {
background: $p5-light-selected; background-color: $p5-light-selected;
} }
.cm-s-p5-widget span { color: var(--dark-gray); } .cm-s-p5-widget .CodeMirror-activeline-background {
background-color: #F3F3F3;
}
.cm-s-p5-widget span.cm-meta { color: var(--dark-gray); } .cm-s-p5-widget .CodeMirror-activeline-gutter {
.cm-s-p5-widget span.cm-keyword { line-height: 1em; color: var(--dark-brown); } background-color: #ECECEC;
.cm-s-p5-widget span.cm-atom { color: var(--pinkish); } border-right: 1px solid #ddd;
.cm-s-p5-widget span.cm-number { color: var(--pinkish); } }
.cm-s-p5-widget span.cm-def { color: var(--dark-blueish); }
.cm-s-p5-widget span.cm-variable { color: var(--dark-blueish); }
.cm-s-p5-widget span.cm-variable-2 { color: var(--almost-black); }
.cm-s-p5-widget span.cm-variable-3 { color: var(--almost-black); }
.cm-s-p5-widget span.cm-property { color: var(--almost-black); }
.cm-s-p5-widget span.cm-operator { color: var(--light-brown); }
.cm-s-p5-widget span.cm-comment { color: var(--light-gray); }
.cm-s-p5-widget span.cm-string { color: var(--dark-blueish); }
.cm-s-p5-widget span.cm-string-2 { color: var(--dark-blueish); }
.cm-s-p5-widget span.cm-error { color: #f00; } .cm-s-p5-widget .cm-error {
color: #f00;
}
.cm-s-p5-widget .CodeMirror-activeline-background { background-color: #e8f2ff; } .cm-s-p5-widget .CodeMirror-matchingbracket {
// .cm-s-p5-widget .CodeMirror-activeline-gutter { background-color: #e8f2ff; } outline: 1px solid $p5-light-darkgray;
.cm-s-p5-widget .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; } color: black !important;
}
/* These styles don't seem to be set by CodeMirror's javascript mode. */ .cm-s-p5-widget .cm-qualifier {
color: $p5-light-blue;
}
.cm-s-p5-widget span.cm-qualifier { color: #555; } .cm-s-p5-widget .cm-tag {
.cm-s-p5-widget span.cm-builtin { color: #30a; } color: $p5-light-brown;
.cm-s-p5-widget span.cm-bracket { color: #cc7; } }
.cm-s-p5-widget span.cm-tag { color: #170; }
.cm-s-p5-widget span.cm-attribute { color: #00c; } .cm-s-p5-widget .cm-builtin {
.cm-s-p5-widget span.cm-link { color: #219; } color: $p5-light-blue;
}
.cm-s-p5-widget .cm-attribute {
color: $p5-light-darkblue;
}