Ben / Nujel

/* Based on https://github.com/dempfi/ayu */

.CodeMirror-scrollbar-filler {
	background: #1f1f1f;
}

.nujel-editor-content {
	height: calc(100% - 1.55rem);
}

.cm-s-ayu-dark.CodeMirror {
	font-family: monospace, mono;
	line-height: 1.2em;
	height:100%;
}

.CodeMirror-hscrollbar,
.CodeMirror-vscrollbar {
	scrollbar-width: auto;
	scrollbar-color: #2e2e2e #1f1f1f;
}

.CodeMirror-hscrollbar::-webkit-scrollbar {
	height: 1rem;
}
.CodeMirror-vscrollbar::-webkit-scrollbar {
	width: 1rem;
}

.CodeMirror-hscrollbar::-webkit-scrollbar-track ,
.CodeMirror-vscrollbar::-webkit-scrollbar-track {
	background: #1f1f1f;
}

.CodeMirror-hscrollbar::-webkit-scrollbar-thumb ,
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
	background-color:#2e2e2e;
	border: none;
	transition:background-color 300ms;
}
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover ,
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover {
	background-color:#3d424d;
}

.cm-s-ayu-dark.CodeMirror { background: transparent; color: #b3b1ad; }
.cm-s-ayu-dark div.CodeMirror-selected { background: #273747; }
.cm-s-ayu-dark .CodeMirror-line::selection, .cm-s-ayu-dark .CodeMirror-line > span::selection, .cm-s-ayu-dark .CodeMirror-line > span > span::selection { background: rgba(39, 55, 71, 99); }
.cm-s-ayu-dark .CodeMirror-line::-moz-selection, .cm-s-ayu-dark .CodeMirror-line > span::-moz-selection, .cm-s-ayu-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(39, 55, 71, 99); }
.cm-s-ayu-dark .CodeMirror-gutters { background: #1f1f1f; border-right: 0px; }
.cm-s-ayu-dark .CodeMirror-guttermarker { color: white; }
.cm-s-ayu-dark .CodeMirror-guttermarker-subtle { color: #3d424d; }
.cm-s-ayu-dark .CodeMirror-linenumber { color: #3d424d; }
.cm-s-ayu-dark .CodeMirror-cursor { border-left: 1px solid #e6b450; }
.cm-s-ayu-dark.cm-fat-cursor .CodeMirror-cursor { background-color: #a2a8a175 !important; }
.cm-s-ayu-dark .cm-animate-fat-cursor { background-color: #a2a8a175 !important; }

.cm-s-ayu-dark span.cm-comment { color: #626a73; }
.cm-s-ayu-dark span.cm-atom { color:#d7dae0; }
.cm-s-ayu-dark span.cm-number { color: #e6b450; }

.cm-s-ayu-dark span.cm-comment.cm-attribute { color: #ffb454; }
.cm-s-ayu-dark span.cm-comment.cm-def { color: rgba(57, 186, 230, 80); }
.cm-s-ayu-dark span.cm-comment.cm-tag { color: #39bae6; }
.cm-s-ayu-dark span.cm-comment.cm-type { color: #5998a6; }

.cm-s-ayu-dark span.cm-property, .cm-s-ayu-dark span.cm-attribute { color: #ffb454; }
.cm-s-ayu-dark span.cm-keyword { color: #ff8f40; }
.cm-s-ayu-dark span.cm-builtin { color: #d7dae0; }
.cm-s-ayu-dark span.cm-string { color: #e5c07b; }

.cm-s-ayu-dark span.cm-variable { color: #b3b1ad; }
.cm-s-ayu-dark span.cm-variable-2 { color: #f07178; }
.cm-s-ayu-dark span.cm-variable-3 { color: #39bae6; }
.cm-s-ayu-dark span.cm-type { color: #ff8f40; }
.cm-s-ayu-dark span.cm-def { color: #ffee99; }
.cm-s-ayu-dark span.cm-bracket { color: #f8f8f2; }
.cm-s-ayu-dark span.cm-tag { color: rgba(57, 186, 230, 80); }
.cm-s-ayu-dark span.cm-header { color: #c2d94c; }
.cm-s-ayu-dark span.cm-link { color: #39bae6; }
.cm-s-ayu-dark span.cm-error { color: #ff3333; }

.cm-s-ayu-dark .CodeMirror-activeline-background { background: #01060e; }
.cm-s-ayu-dark .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}

.cm-s-ayu-dark span.cm-depth-0 {color:#528bff;}
.cm-s-ayu-dark span.cm-depth-1 {color:#c678dd;}
.cm-s-ayu-dark span.cm-depth-2 {color:#e06c75;}
.cm-s-ayu-dark span.cm-depth-3 {color:#e5c07b;}
.cm-s-ayu-dark span.cm-nil { color: #626a73; }
.cm-s-ayu-dark span.cm-true { color:#98c379; }
.cm-s-ayu-dark span.cm-false { color: #e06c75; }