From 63bde7b9daca6138cf654fbf6472bddc2b9d40f6 Mon Sep 17 00:00:00 2001 From: Servius Date: Wed, 15 Mar 2017 15:06:50 -0700 Subject: [PATCH] New Themes from CodeMirror --- CodeMirror/theme/ambiance-mobile.css | 5 ++ CodeMirror/theme/dracula.css | 7 +-- CodeMirror/theme/duotone-dark.css | 35 ++++++++++++ CodeMirror/theme/duotone-light.css | 36 ++++++++++++ CodeMirror/theme/icecoder.css | 2 +- CodeMirror/theme/material.css | 2 +- CodeMirror/theme/night.css | 3 +- CodeMirror/theme/panda-syntax.css | 85 ++++++++++++++++++++++++++++ CodeMirror/theme/pastel-on-dark.css | 1 - CodeMirror/theme/solarized.css | 36 +++++++----- 10 files changed, 188 insertions(+), 24 deletions(-) create mode 100644 CodeMirror/theme/ambiance-mobile.css create mode 100644 CodeMirror/theme/duotone-dark.css create mode 100644 CodeMirror/theme/duotone-light.css create mode 100644 CodeMirror/theme/panda-syntax.css diff --git a/CodeMirror/theme/ambiance-mobile.css b/CodeMirror/theme/ambiance-mobile.css new file mode 100644 index 0000000..88d332e --- /dev/null +++ b/CodeMirror/theme/ambiance-mobile.css @@ -0,0 +1,5 @@ +.cm-s-ambiance.CodeMirror { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} diff --git a/CodeMirror/theme/dracula.css b/CodeMirror/theme/dracula.css index 57f979a..53a660b 100644 --- a/CodeMirror/theme/dracula.css +++ b/CodeMirror/theme/dracula.css @@ -16,7 +16,7 @@ .cm-s-dracula .CodeMirror-gutters { color: #282a36; } .cm-s-dracula .CodeMirror-cursor { border-left: solid thin #f8f8f0; } .cm-s-dracula .CodeMirror-linenumber { color: #6D8A88; } -.cm-s-dracula.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } +.cm-s-dracula .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } .cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); } .cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); } .cm-s-dracula span.cm-comment { color: #6272a4; } @@ -24,8 +24,7 @@ .cm-s-dracula span.cm-number { color: #bd93f9; } .cm-s-dracula span.cm-variable { color: #50fa7b; } .cm-s-dracula span.cm-variable-2 { color: white; } -.cm-s-dracula span.cm-def { color: #ffb86c; } -.cm-s-dracula span.cm-keyword { color: #ff79c6; } +.cm-s-dracula span.cm-def { color: #50fa7b; } .cm-s-dracula span.cm-operator { color: #ff79c6; } .cm-s-dracula span.cm-keyword { color: #ff79c6; } .cm-s-dracula span.cm-atom { color: #bd93f9; } @@ -35,7 +34,7 @@ .cm-s-dracula span.cm-qualifier { color: #50fa7b; } .cm-s-dracula span.cm-property { color: #66d9ef; } .cm-s-dracula span.cm-builtin { color: #50fa7b; } -.cm-s-dracula span.cm-variable-3 { color: #50fa7b; } +.cm-s-dracula span.cm-variable-3 { color: #ffb86c; } .cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); } .cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } diff --git a/CodeMirror/theme/duotone-dark.css b/CodeMirror/theme/duotone-dark.css new file mode 100644 index 0000000..b09a585 --- /dev/null +++ b/CodeMirror/theme/duotone-dark.css @@ -0,0 +1,35 @@ +/* +Name: DuoTone-Dark +Author: by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes) + +CodeMirror template by Jan T. Sott (https://github.com/idleberg), adapted by Bram de Haan (https://github.com/atelierbram/) +*/ + +.cm-s-duotone-dark.CodeMirror { background: #2a2734; color: #6c6783; } +.cm-s-duotone-dark div.CodeMirror-selected { background: #545167!important; } +.cm-s-duotone-dark .CodeMirror-gutters { background: #2a2734; border-right: 0px; } +.cm-s-duotone-dark .CodeMirror-linenumber { color: #545167; } + +/* begin cursor */ +.cm-s-duotone-dark .CodeMirror-cursor { border-left: 1px solid #ffad5c; /* border-left: 1px solid #ffad5c80; */ border-right: .5em solid #ffad5c; /* border-right: .5em solid #ffad5c80; */ opacity: .5; } +.cm-s-duotone-dark .CodeMirror-activeline-background { background: #363342; /* background: #36334280; */ opacity: .5;} +.cm-s-duotone-dark .cm-fat-cursor .CodeMirror-cursor { background: #ffad5c; /* background: #ffad5c80; */ opacity: .5;} +/* end cursor */ + +.cm-s-duotone-dark span.cm-atom, .cm-s-duotone-dark span.cm-number, .cm-s-duotone-dark span.cm-keyword, .cm-s-duotone-dark span.cm-variable, .cm-s-duotone-dark span.cm-attribute, .cm-s-duotone-dark span.cm-quote, .cm-s-duotone-dark span.cm-hr, .cm-s-duotone-dark span.cm-link { color: #ffcc99; } + +.cm-s-duotone-dark span.cm-property { color: #9a86fd; } +.cm-s-duotone-dark span.cm-punctuation, .cm-s-duotone-dark span.cm-unit, .cm-s-duotone-dark span.cm-negative { color: #e09142; } +.cm-s-duotone-dark span.cm-string { color: #ffb870; } +.cm-s-duotone-dark span.cm-operator { color: #ffad5c; } +.cm-s-duotone-dark span.cm-positive { color: #6a51e6; } + +.cm-s-duotone-dark span.cm-variable-2, .cm-s-duotone-dark span.cm-variable-3, .cm-s-duotone-dark span.cm-string-2, .cm-s-duotone-dark span.cm-url { color: #7a63ee; } +.cm-s-duotone-dark span.cm-def, .cm-s-duotone-dark span.cm-tag, .cm-s-duotone-dark span.cm-builtin, .cm-s-duotone-dark span.cm-qualifier, .cm-s-duotone-dark span.cm-header, .cm-s-duotone-dark span.cm-em { color: #eeebff; } +.cm-s-duotone-dark span.cm-bracket, .cm-s-duotone-dark span.cm-comment { color: #6c6783; } + +/* using #f00 red for errors, don't think any of the colorscheme variables will stand out enough, ... maybe by giving it a background-color ... */ +.cm-s-duotone-dark span.cm-error, .cm-s-duotone-dark span.cm-invalidchar { color: #f00; } + +.cm-s-duotone-dark span.cm-header { font-weight: normal; } +.cm-s-duotone-dark .CodeMirror-matchingbracket { text-decoration: underline; color: #eeebff !important; } diff --git a/CodeMirror/theme/duotone-light.css b/CodeMirror/theme/duotone-light.css new file mode 100644 index 0000000..80203d1 --- /dev/null +++ b/CodeMirror/theme/duotone-light.css @@ -0,0 +1,36 @@ +/* +Name: DuoTone-Light +Author: by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes) + +CodeMirror template by Jan T. Sott (https://github.com/idleberg), adapted by Bram de Haan (https://github.com/atelierbram/) +*/ + +.cm-s-duotone-light.CodeMirror { background: #faf8f5; color: #b29762; } +.cm-s-duotone-light div.CodeMirror-selected { background: #e3dcce !important; } +.cm-s-duotone-light .CodeMirror-gutters { background: #faf8f5; border-right: 0px; } +.cm-s-duotone-light .CodeMirror-linenumber { color: #cdc4b1; } + +/* begin cursor */ +.cm-s-duotone-light .CodeMirror-cursor { border-left: 1px solid #93abdc; /* border-left: 1px solid #93abdc80; */ border-right: .5em solid #93abdc; /* border-right: .5em solid #93abdc80; */ opacity: .5; } +.cm-s-duotone-light .CodeMirror-activeline-background { background: #e3dcce; /* background: #e3dcce80; */ opacity: .5; } +.cm-s-duotone-light .cm-fat-cursor .CodeMirror-cursor { background: #93abdc; /* #93abdc80; */ opacity: .5; } +/* end cursor */ + +.cm-s-duotone-light span.cm-atom, .cm-s-duotone-light span.cm-number, .cm-s-duotone-light span.cm-keyword, .cm-s-duotone-light span.cm-variable, .cm-s-duotone-light span.cm-attribute, .cm-s-duotone-light span.cm-quote, .cm-s-duotone-light-light span.cm-hr, .cm-s-duotone-light-light span.cm-link { color: #063289; } + +.cm-s-duotone-light span.cm-property { color: #b29762; } +.cm-s-duotone-light span.cm-punctuation, .cm-s-duotone-light span.cm-unit, .cm-s-duotone-light span.cm-negative { color: #063289; } +.cm-s-duotone-light span.cm-string, .cm-s-duotone-light span.cm-operator { color: #1659df; } +.cm-s-duotone-light span.cm-positive { color: #896724; } + +.cm-s-duotone-light span.cm-variable-2, .cm-s-duotone-light span.cm-variable-3, .cm-s-duotone-light span.cm-string-2, .cm-s-duotone-light span.cm-url { color: #896724; } +.cm-s-duotone-light span.cm-def, .cm-s-duotone-light span.cm-tag, .cm-s-duotone-light span.cm-builtin, .cm-s-duotone-light span.cm-qualifier, .cm-s-duotone-light span.cm-header, .cm-s-duotone-light span.cm-em { color: #2d2006; } +.cm-s-duotone-light span.cm-bracket, .cm-s-duotone-light span.cm-comment { color: #b6ad9a; } + +/* using #f00 red for errors, don't think any of the colorscheme variables will stand out enough, ... maybe by giving it a background-color ... */ +/* .cm-s-duotone-light span.cm-error { background: #896724; color: #728fcb; } */ +.cm-s-duotone-light span.cm-error, .cm-s-duotone-light span.cm-invalidchar { color: #f00; } + +.cm-s-duotone-light span.cm-header { font-weight: normal; } +.cm-s-duotone-light .CodeMirror-matchingbracket { text-decoration: underline; color: #faf8f5 !important; } + diff --git a/CodeMirror/theme/icecoder.css b/CodeMirror/theme/icecoder.css index e8f95ef..ffebaf2 100644 --- a/CodeMirror/theme/icecoder.css +++ b/CodeMirror/theme/icecoder.css @@ -40,4 +40,4 @@ ICEcoder default theme by Matt Pass, used in code editor available at https://ic .cm-s-icecoder .CodeMirror-gutters { background: #1d1d1b; min-width: 41px; border-right: 0; } .cm-s-icecoder .CodeMirror-linenumber { color: #555; cursor: default; } .cm-s-icecoder .CodeMirror-matchingbracket { color: #fff !important; background: #555 !important; } -.cm-s-icecoder .CodeMirror-activeline-background { background: #000; } \ No newline at end of file +.cm-s-icecoder .CodeMirror-activeline-background { background: #000; } diff --git a/CodeMirror/theme/material.css b/CodeMirror/theme/material.css index 91ed6ce..01d8679 100644 --- a/CodeMirror/theme/material.css +++ b/CodeMirror/theme/material.css @@ -7,7 +7,7 @@ */ -.cm-s-material { +.cm-s-material.CodeMirror { background-color: #263238; color: rgba(233, 237, 237, 1); } diff --git a/CodeMirror/theme/night.css b/CodeMirror/theme/night.css index 4dbb866..fd4e561 100644 --- a/CodeMirror/theme/night.css +++ b/CodeMirror/theme/night.css @@ -10,7 +10,7 @@ .cm-s-night .CodeMirror-linenumber { color: #f8f8f8; } .cm-s-night .CodeMirror-cursor { border-left: 1px solid white; } -.cm-s-night span.cm-comment { color: #6900a1; } +.cm-s-night span.cm-comment { color: #8900d1; } .cm-s-night span.cm-atom { color: #845dc4; } .cm-s-night span.cm-number, .cm-s-night span.cm-attribute { color: #ffd500; } .cm-s-night span.cm-keyword { color: #599eff; } @@ -19,7 +19,6 @@ .cm-s-night span.cm-variable-2, .cm-s-night span.cm-tag { color: #99b2ff; } .cm-s-night span.cm-variable-3, .cm-s-night span.cm-def { color: white; } .cm-s-night span.cm-bracket { color: #8da6ce; } -.cm-s-night span.cm-comment { color: #6900a1; } .cm-s-night span.cm-builtin, .cm-s-night span.cm-special { color: #ff9e59; } .cm-s-night span.cm-link { color: #845dc4; } .cm-s-night span.cm-error { color: #9d1e15; } diff --git a/CodeMirror/theme/panda-syntax.css b/CodeMirror/theme/panda-syntax.css new file mode 100644 index 0000000..c93b2ea --- /dev/null +++ b/CodeMirror/theme/panda-syntax.css @@ -0,0 +1,85 @@ +/* + Name: Panda Syntax + Author: Siamak Mokhtari (http://github.com/siamak/) + CodeMirror template by Siamak Mokhtari (https://github.com/siamak/atom-panda-syntax) +*/ +.cm-s-panda-syntax { + background: #292A2B; + color: #E6E6E6; + line-height: 1.5; + font-family: 'Operator Mono', 'Source Sans Pro', Menlo, Monaco, Consolas, Courier New, monospace; +} +.cm-s-panda-syntax .CodeMirror-cursor { border-color: #ff2c6d; } +.cm-s-panda-syntax .CodeMirror-activeline-background { + background: rgba(99, 123, 156, 0.1); +} +.cm-s-panda-syntax .CodeMirror-selected { + background: #FFF; +} +.cm-s-panda-syntax .cm-comment { + font-style: italic; + color: #676B79; +} +.cm-s-panda-syntax .cm-operator { + color: #f3f3f3; +} +.cm-s-panda-syntax .cm-string { + color: #19F9D8; +} +.cm-s-panda-syntax .cm-string-2 { + color: #FFB86C; +} + +.cm-s-panda-syntax .cm-tag { + color: #ff2c6d; +} +.cm-s-panda-syntax .cm-meta { + color: #b084eb; +} + +.cm-s-panda-syntax .cm-number { + color: #FFB86C; +} +.cm-s-panda-syntax .cm-atom { + color: #ff2c6d; +} +.cm-s-panda-syntax .cm-keyword { + color: #FF75B5; +} +.cm-s-panda-syntax .cm-variable { + color: #ffb86c; +} +.cm-s-panda-syntax .cm-variable-2 { + color: #ff9ac1; +} +.cm-s-panda-syntax .cm-variable-3 { + color: #ff9ac1; +} + +.cm-s-panda-syntax .cm-def { + color: #e6e6e6; +} +.cm-s-panda-syntax .cm-property { + color: #f3f3f3; +} +.cm-s-panda-syntax .cm-unit { + color: #ffb86c; +} + +.cm-s-panda-syntax .cm-attribute { + color: #ffb86c; +} + +.cm-s-panda-syntax .CodeMirror-matchingbracket { + border-bottom: 1px dotted #19F9D8; + padding-bottom: 2px; + color: #e6e6e6; +} +.cm-s-panda-syntax .CodeMirror-gutters { + background: #292a2b; + border-right-color: rgba(255, 255, 255, 0.1); +} +.cm-s-panda-syntax .CodeMirror-linenumber { + color: #e6e6e6; + opacity: 0.6; +} diff --git a/CodeMirror/theme/pastel-on-dark.css b/CodeMirror/theme/pastel-on-dark.css index 7197509..2603d36 100644 --- a/CodeMirror/theme/pastel-on-dark.css +++ b/CodeMirror/theme/pastel-on-dark.css @@ -11,7 +11,6 @@ background: #2c2827; color: #8F938F; line-height: 1.5; - font-size: 14px; } .cm-s-pastel-on-dark div.CodeMirror-selected { background: rgba(221,240,255,0.2); } .cm-s-pastel-on-dark .CodeMirror-line::selection, .cm-s-pastel-on-dark .CodeMirror-line > span::selection, .cm-s-pastel-on-dark .CodeMirror-line > span > span::selection { background: rgba(221,240,255,0.2); } diff --git a/CodeMirror/theme/solarized.css b/CodeMirror/theme/solarized.css index 7882c93..1f39c7e 100644 --- a/CodeMirror/theme/solarized.css +++ b/CodeMirror/theme/solarized.css @@ -4,7 +4,7 @@ http://ethanschoonover.com/solarized */ /* -Solarized color pallet +Solarized color palette http://ethanschoonover.com/solarized/img/solarized-palette.png */ @@ -34,7 +34,7 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png } .cm-s-solarized.cm-s-dark { color: #839496; - background-color: #002b36; + background-color: #002b36; text-shadow: #002b36 0 1px; } .cm-s-solarized.cm-s-light { @@ -113,32 +113,34 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png box-shadow: inset 7px 0 12px -6px #000; } -/* Gutter border and some shadow from it */ +/* Remove gutter border */ .cm-s-solarized .CodeMirror-gutters { - border-right: 1px solid; + border-right: 0; } /* Gutter colors and line number styling based of color scheme (dark / light) */ /* Dark */ .cm-s-solarized.cm-s-dark .CodeMirror-gutters { - background-color: #002b36; - border-color: #00232c; + background-color: #073642; } .cm-s-solarized.cm-s-dark .CodeMirror-linenumber { + color: #586e75; text-shadow: #021014 0 -1px; } /* Light */ .cm-s-solarized.cm-s-light .CodeMirror-gutters { - background-color: #fdf6e3; - border-color: #eee8d5; + background-color: #eee8d5; +} + +.cm-s-solarized.cm-s-light .CodeMirror-linenumber { + color: #839496; } /* Common */ .cm-s-solarized .CodeMirror-linenumber { - color: #586e75; padding: 0 5px; } .cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; } @@ -149,15 +151,19 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png color: #586e75; } +/* Cursor */ .cm-s-solarized .CodeMirror-cursor { border-left: 1px solid #819090; } -/* -Active line. Negative margin compensates left padding of the text in the -view-port -*/ +/* Fat cursor */ +.cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; } +.cm-s-solarized.cm-s-light .cm-animate-fat-cursor { background-color: #77ee77; } +.cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor { background: #586e75; } +.cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: #586e75; } + +/* Active line */ .cm-s-solarized.cm-s-dark .CodeMirror-activeline-background { - background: rgba(255, 255, 255, 0.10); + background: rgba(255, 255, 255, 0.06); } .cm-s-solarized.cm-s-light .CodeMirror-activeline-background { - background: rgba(0, 0, 0, 0.10); + background: rgba(0, 0, 0, 0.06); }