mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-05-09 20:38:40 +00:00
Merge branch 'update-Codemirror' of https://github.com/naturalcrit/homebrewery into add-cm-features
This commit is contained in:
Víctor Losada Hernández
@@ -1,83 +0,0 @@
|
||||
.editor .codeEditor .CodeMirror {
|
||||
// Themes with dark backgrounds
|
||||
&.cm-s-3024-night,
|
||||
&.cm-s-abbott,
|
||||
&.cm-s-abcdef,
|
||||
&.cm-s-ambiance,
|
||||
&.cm-s-ayu-dark,
|
||||
&.cm-s-ayu-mirage,
|
||||
&.cm-s-base16-dark,
|
||||
&.cm-s-bespin,
|
||||
&.cm-s-blackboard,
|
||||
&.cm-s-cobalt,
|
||||
&.cm-s-colorforth,
|
||||
&.cm-s-darcula,
|
||||
&.cm-s-dracula,
|
||||
&.cm-s-duotone-dark,
|
||||
&.cm-s-erlang-dark,
|
||||
&.cm-s-gruvbox-dark,
|
||||
&.cm-s-hopscotch,
|
||||
&.cm-s-icecoder,
|
||||
&.cm-s-isotope,
|
||||
&.cm-s-lesser-dark,
|
||||
&.cm-s-liquibyte,
|
||||
&.cm-s-lucario,
|
||||
&.cm-s-material,
|
||||
&.cm-s-material-darker,
|
||||
&.cm-s-material-ocean,
|
||||
&.cm-s-material-palenight,
|
||||
&.cm-s-mbo,
|
||||
&.cm-s-midnight,
|
||||
&.cm-s-monokai,
|
||||
&.cm-s-moxer,
|
||||
&.cm-s-night,
|
||||
&.cm-s-nord,
|
||||
&.cm-s-oceanic-next,
|
||||
&.cm-s-panda-syntax,
|
||||
&.cm-s-paraiso-dark,
|
||||
&.cm-s-pastel-on-dark,
|
||||
&.cm-s-railscasts,
|
||||
&.cm-s-rubyblue,
|
||||
&.cm-s-seti,
|
||||
&.cm-s-shadowfox,
|
||||
&.cm-s-the-matrix,
|
||||
&.cm-s-tomorrow-night-bright,
|
||||
&.cm-s-tomorrow-night-eighties,
|
||||
&.cm-s-twilight,
|
||||
&.cm-s-vibrant-ink,
|
||||
&.cm-s-xq-dark,
|
||||
&.cm-s-yonce,
|
||||
&.cm-s-zenburn {
|
||||
.CodeMirror-code {
|
||||
.block:not(.cm-comment) { color : magenta; }
|
||||
.columnSplit {
|
||||
color : black;
|
||||
background-color : rgba(35,153,153,0.5);
|
||||
}
|
||||
.pageLine {
|
||||
background-color : rgba(255,255,255,0.5);
|
||||
& ~ pre.CodeMirror-line { color : black; }
|
||||
}
|
||||
}
|
||||
}
|
||||
// Themes with light backgrounds
|
||||
&.cm-s-default,
|
||||
&.cm-s-3024-day,
|
||||
&.cm-s-ambiance-mobile,
|
||||
&.cm-s-base16-light,
|
||||
&.cm-s-duotone-light,
|
||||
&.cm-s-eclipse,
|
||||
&.cm-s-elegant,
|
||||
&.cm-s-juejin,
|
||||
&.cm-s-neat,
|
||||
&.cm-s-neo,
|
||||
&.cm-s-paraiso-lightm
|
||||
&.cm-s-solarized,
|
||||
&.cm-s-ssms,
|
||||
&.cm-s-ttcn,
|
||||
&.cm-s-xq-light,
|
||||
&.cm-s-yeti {
|
||||
// Future styling for themes with light backgrounds
|
||||
--dummyVar : 'currently unused';
|
||||
}
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
/*stylelint-disable*/
|
||||
.editor .snippetBar {
|
||||
color: white;
|
||||
background-color: #2F393C;
|
||||
.dropdown {
|
||||
background-color: #2F393C;
|
||||
}
|
||||
.editors {
|
||||
border-color: #ccc;
|
||||
}
|
||||
}
|
||||
/* Main BG color and normal text color */
|
||||
.CodeMirror {
|
||||
--bg: #293134;
|
||||
--highlight: #bcbcbc;
|
||||
color: #91A6AA;
|
||||
background: var(--bg);
|
||||
.CodeMirror-scroll {
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid #555;
|
||||
background: var(--bg);
|
||||
.CodeMirror-gutter {
|
||||
background-color: var(--bg);
|
||||
&.CodeMirror-foldgutter {
|
||||
cursor: pointer;
|
||||
border-left: 1px solid #555;
|
||||
transition: background 0.1s;
|
||||
&:hover {
|
||||
background: #555;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.CodeMirror-lines {
|
||||
/* Line numbers*/
|
||||
.CodeMirror-linenumber.CodeMirror-gutter-elt {
|
||||
background-color: var(--bg);
|
||||
color: #81969A;
|
||||
}
|
||||
/* Blinking cursor */
|
||||
.CodeMirror-cursor {
|
||||
border-left: 1px solid #E0E2E4;
|
||||
}
|
||||
.pageLine {
|
||||
color: #000000;
|
||||
background: #000000;
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
}
|
||||
.CodeMirror-code .CodeMirror-line {
|
||||
&.columnSplit {
|
||||
font-style: italic;
|
||||
color: inherit;
|
||||
background-color: #1F5763;
|
||||
border-bottom: #229999 solid 1px;
|
||||
}
|
||||
/*syntax*/
|
||||
.cm-header {
|
||||
font-weight: bold;
|
||||
color: #C51B1B;
|
||||
-webkit-text-stroke-width: 0.1px;
|
||||
-webkit-text-stroke-color: #000000;
|
||||
}
|
||||
.cm-strong {
|
||||
color: #309DD2;
|
||||
}
|
||||
.cm-em {
|
||||
/*italics*/
|
||||
}
|
||||
.cm-link {
|
||||
color: #DD6300;
|
||||
}
|
||||
.cm-string {
|
||||
color: #AA8261;
|
||||
}
|
||||
/* @import */
|
||||
.cm-def {
|
||||
color: #2986CC;
|
||||
}
|
||||
/* Bullets and such */
|
||||
.cm-variable-2 {
|
||||
color: #3CBF30;
|
||||
}
|
||||
.block:not(.cm-comment) {
|
||||
color: #E3E3E3;
|
||||
}
|
||||
.inline-block {
|
||||
color: #E3E3E3;
|
||||
}
|
||||
.cm-tag {
|
||||
color: #E3FF00;
|
||||
}
|
||||
.cm-attribute {
|
||||
color: #E3FF00;
|
||||
}
|
||||
.cm-atom {
|
||||
color: #c1939a;
|
||||
}
|
||||
.cm-number {
|
||||
color: #2986CC;
|
||||
}
|
||||
.cm-property:not(.cm-error) ~ .cm-variable {
|
||||
color:#9e1f9e;
|
||||
}
|
||||
.cm-qualifier {
|
||||
color: #EE1919;
|
||||
}
|
||||
.cm-comment {
|
||||
color: #BBC700;
|
||||
}
|
||||
.cm-keyword {
|
||||
color: white;
|
||||
}
|
||||
.cm-error {
|
||||
color: #C50202;
|
||||
}
|
||||
.CodeMirror-foldmarker {
|
||||
color: #F0FF00;
|
||||
}
|
||||
.cm-builtin {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.dt-highlight {
|
||||
background: #ffffff14;
|
||||
}
|
||||
.dl-colon-highlight {
|
||||
background: #ccc;
|
||||
}
|
||||
.dl-highlight.dd-highlight {
|
||||
color: #b5858d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import { EditorView } from '@codemirror/view';
|
||||
|
||||
|
||||
export default EditorView.theme({
|
||||
'&' : {
|
||||
backgroundColor : '#293134',
|
||||
color : '#91a6aa',
|
||||
},
|
||||
'.cm-content' : {
|
||||
padding : '4px 0',
|
||||
fontFamily : 'monospace',
|
||||
fontSize : '13px',
|
||||
lineHeight : '1',
|
||||
},
|
||||
'.cm-line' : {
|
||||
padding : '0 4px',
|
||||
},
|
||||
'.cm-gutters' : {
|
||||
borderRight : '1px solid #555',
|
||||
backgroundColor : '#293134',
|
||||
whiteSpace : 'nowrap',
|
||||
},
|
||||
'.cm-foldGutter' : {
|
||||
borderLeft : '1px solid #555',
|
||||
backgroundColor : '#293134',
|
||||
},
|
||||
'.cm-foldGutter:hover' : {
|
||||
backgroundColor : '#555',
|
||||
},
|
||||
'.cm-gutterElement' : {
|
||||
color : '#81969a',
|
||||
},
|
||||
'.cm-linenumber' : {
|
||||
padding : '0 3px 0 5px',
|
||||
minWidth : '20px',
|
||||
textAlign : 'right',
|
||||
color : '#999',
|
||||
whiteSpace : 'nowrap',
|
||||
},
|
||||
'.cm-cursor' : {
|
||||
borderLeft : '1px solid #E0E2E4',
|
||||
},
|
||||
'.cm-fat-cursor' : {
|
||||
width : 'auto',
|
||||
backgroundColor : '#7e7',
|
||||
caretColor : 'transparent',
|
||||
},
|
||||
'.cm-activeLine' : {
|
||||
backgroundColor : '#868c9323',
|
||||
},
|
||||
'.cm-gutterElement.cm-activeLineGutter' : {
|
||||
backgroundColor : '#868c9323',
|
||||
},
|
||||
'.cm-activeLine' : {
|
||||
backgroundColor : '#868c9323',
|
||||
},
|
||||
'.cm-selected' : {
|
||||
backgroundColor : '#d7d4f0',
|
||||
},
|
||||
'.cm-pageLine' : {
|
||||
backgroundColor : '#7ca97c',
|
||||
color : '#000',
|
||||
fontWeight : 'bold',
|
||||
letterSpacing : '.5px',
|
||||
borderTop : '1px solid #ff0',
|
||||
},
|
||||
'.cm-columnSplit' : {
|
||||
backgroundColor : '#7ca97c',
|
||||
color : 'black',
|
||||
fontWeight : 'bold',
|
||||
letterSpacing : '1px',
|
||||
borderBottom : '1px solid #ff0',
|
||||
},
|
||||
'.cm-line.cm-block, .cm-line .cm-inline-block' : {
|
||||
color : '#E3E3E3',
|
||||
},
|
||||
'.cm-definitionList .cm-definitionTerm' : {
|
||||
color : '#E3E3E3',
|
||||
},
|
||||
'.cm-definitionList .cm-definitionColon' : {
|
||||
backgroundColor : '#0000',
|
||||
color : '#e3FF00',
|
||||
},
|
||||
'.cm-definitionList .cm-definitionDesc' : {
|
||||
color : '#b5858d',
|
||||
},
|
||||
|
||||
// Semantic classes
|
||||
'.cm-header' : { color: '#C51B1B', fontWeight: 'bold' },
|
||||
'.cm-strong' : { color: '#309dd2', fontWeight: 'bold' },
|
||||
'.cm-em' : { fontStyle: 'italic' },
|
||||
'.cm-keyword' : { color: '#fff' },
|
||||
'.cm-atom, cm-value, cm-color' : { color: '#c1939a' },
|
||||
'.cm-number' : { color: '#2986cc' },
|
||||
'.cm-def' : { color: '#2986cc' },
|
||||
'.cm-list' : { color: '#3cbf30' },
|
||||
'.cm-variable, .cm-type' : { color: '#085' },
|
||||
'.cm-comment' : { color: '#bbc700' },
|
||||
'.cm-link' : { color: '#DD6300', textDecoration: 'underline' },
|
||||
'.cm-string' : { color: '#AA8261', textDecoration: 'none' },
|
||||
'.cm-string-2' : { color: '#f50', textDecoration: 'none' },
|
||||
'.cm-meta, .cm-qualifier, .cm-class' : { color: '#19ee2b' },
|
||||
'.cm-builtin' : { color: '#fff' },
|
||||
'.cm-bracket' : { color: '#997' },
|
||||
'.cm-tag, .cm-attribute' : { color: '#e3ff00' },
|
||||
'.cm-hr' : { color: '#999' },
|
||||
'.cm-negative' : { color: '#d44' },
|
||||
'.cm-positive' : { color: '#292' },
|
||||
'.cm-error, .cm-invalidchar' : { color: '#c50202' },
|
||||
'.cm-matchingbracket' : { color: '#0b0' },
|
||||
'.cm-nonmatchingbracket' : { color: '#a22' },
|
||||
'.cm-matchingtag' : { backgroundColor: 'rgba(255, 150, 0, 0.3)' },
|
||||
'.cm-quote' : { color: '#090' },
|
||||
}, { dark: true });
|
||||
@@ -1,3 +1,8 @@
|
||||
/*This document is old, from back when Codemirror was version 5,
|
||||
if someone wants to update it, feel free, it needs to be like default.js or darkbrewery.js
|
||||
Then imported in snippetbar.jsx and codeEditor.jsx.
|
||||
*/
|
||||
|
||||
.CodeMirror {
|
||||
background: #0C0C0C;
|
||||
color: #B9BDB6;
|
||||
@@ -18,13 +23,13 @@
|
||||
}
|
||||
|
||||
/* Line number stuff */
|
||||
.CodeMirror-gutter-elt {
|
||||
.cm-gutter-elt {
|
||||
color: #81969A;
|
||||
}
|
||||
.CodeMirror-linenumber {
|
||||
background-color: #0C0C0C;
|
||||
}
|
||||
.CodeMirror-gutter {
|
||||
.cm-gutter {
|
||||
background-color: #0C0C0C;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
import { EditorView } from '@codemirror/view';
|
||||
|
||||
//This theme is made of the base css for the codemirror 5 editor
|
||||
|
||||
export default EditorView.theme({
|
||||
'&' : {
|
||||
backgroundColor : 'white',
|
||||
color : 'black',
|
||||
},
|
||||
'.cm-content' : {
|
||||
padding : '4px 0',
|
||||
fontFamily : 'monospace',
|
||||
fontSize : '13px',
|
||||
lineHeight : '1',
|
||||
},
|
||||
'.cm-line' : {
|
||||
padding : '0 4px',
|
||||
},
|
||||
'.cm-gutters' : {
|
||||
borderRight : '1px solid #ddd',
|
||||
backgroundColor : '#f7f7f7',
|
||||
whiteSpace : 'nowrap',
|
||||
},
|
||||
'.cm-linenumber' : {
|
||||
padding : '0 3px 0 5px',
|
||||
minWidth : '20px',
|
||||
textAlign : 'right',
|
||||
color : '#999',
|
||||
whiteSpace : 'nowrap',
|
||||
},
|
||||
'.cm-cursor' : {
|
||||
borderLeft : '1px solid black',
|
||||
},
|
||||
'.cm-fat-cursor' : {
|
||||
width : 'auto',
|
||||
backgroundColor : '#7e7',
|
||||
caretColor : 'transparent',
|
||||
},
|
||||
'.cm-activeLine' : {
|
||||
backgroundColor : '#becee374',
|
||||
},
|
||||
'.cm-gutterElement.cm-activeLineGutter' : {
|
||||
backgroundColor : '#becee374',
|
||||
},
|
||||
'.cm-selected' : {
|
||||
backgroundColor : '#d7d4f0',
|
||||
},
|
||||
'.cm-foldmarker' : {
|
||||
color : 'blue',
|
||||
fontFamily : 'arial',
|
||||
lineHeight : '0.3',
|
||||
cursor : 'pointer',
|
||||
},
|
||||
|
||||
'.cm-header' : { color: 'blue', fontWeight: 'bold' },
|
||||
'.cm-strong' : { fontWeight: 'bold' },
|
||||
'.cm-em' : { fontStyle: 'italic' },
|
||||
'.cm-keyword' : { color: '#708' },
|
||||
'.cm-atom, cm-value, cm-color' : { color: '#219' },
|
||||
'.cm-number' : { color: '#164' },
|
||||
'.cm-def' : { color: '#00f' },
|
||||
'.cm-list' : { color: '#05a' },
|
||||
'.cm-variable, .cm-type' : { color: '#085' },
|
||||
'.cm-comment' : { color: '#a50' },
|
||||
'.cm-link' : { color: '#00c', textDecoration: 'underline' },
|
||||
'.cm-string' : { color: '#a11', textDecoration: 'none' },
|
||||
'.cm-string-2' : { color: '#f50', textDecoration: 'none' },
|
||||
'.cm-meta, .cm-qualifier, .cm-class' : { color: '#555' },
|
||||
'.cm-builtin' : { color: '#30a' },
|
||||
'.cm-bracket' : { color: '#997' },
|
||||
'.cm-tag' : { color: '#170' },
|
||||
'.cm-attribute' : { color: '#00c' },
|
||||
'.cm-hr' : { color: '#999' },
|
||||
'.cm-negative' : { color: '#d44' },
|
||||
'.cm-positive' : { color: '#292' },
|
||||
'.cm-error, .cm-invalidchar' : { color: '#f00' },
|
||||
'.cm-matchingbracket' : { color: '#0b0' },
|
||||
'.cm-nonmatchingbracket' : { color: '#a22' },
|
||||
'.cm-matchingtag' : { backgroundColor: '#ff96004d' },
|
||||
'.cm-quote' : { color: '#090' },
|
||||
}, { dark: false });
|
||||
Reference in New Issue
Block a user