style linting popups ^^

chee · Jan 5, 2019 · e79a621 · e79a621
1 parent 01006d1
commit e79a621
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 3 deletions.
diff --git a/browserAction/index.html b/browserAction/index.html
@@ -1,9 +1,9 @@
 <!doctype html>
 <meta charset=utf-8>
-<link href=style.css rel=stylesheet>
 <link href=codemirror/lib/codemirror.css rel=stylesheet>
 <link href=codemirror/addon/lint/lint.css rel=stylesheet>
-<link href=codemirror/theme/gruvbox-dark.css rel=stylesheet>
+<link href=codemirror/theme/monokai.css rel=stylesheet>
+<link href=style.css rel=stylesheet>
 <script src="jshint.js"></script>
 <script src=codemirror/lib/codemirror.js></script>
 <script src=codemirror/mode/javascript/javascript.js></script>

diff --git a/browserAction/script.js b/browserAction/script.js
@@ -8,7 +8,7 @@ let editor = CodeMirror.fromTextArea(javascript, {
 	tabSize: 2,
 	indentWithTabs: true,
 	lint: CodeMirror.lint.javascript,
-	theme: "gruvbox-dark"
+	theme: "monokai"
 })
 
 editor.setOption("lint", {

diff --git a/browserAction/style.css b/browserAction/style.css
@@ -18,6 +18,8 @@ textarea, .CodeMirror {
 	font-weight: bold;
 	border: 2px dotted black;
 	padding: .5em;
+	font-size: 16px;
+	font-family: "Operator Mono", "Office Code Pro D", "Fira Code", "Fira Mono", monospace;
 }
 
 .letters-js {
@@ -32,3 +34,89 @@ textarea, .CodeMirror {
 	font-weight: 400;
 	src: url('./reem-kufi.woff2') format('woff2');
 }
+
+
+/* The lint marker gutter */
+.CodeMirror-lint-markers {
+	width: 16px;
+}
+
+.CodeMirror-lint-tooltip {
+	background-color: #fff;
+	border: 4px dotted #ff2a60;
+	border-radius: 10px;
+	color: black;
+	font-family: reem kufi;
+	font-size: 1em;
+	overflow: hidden;
+	padding: 10px 20px;
+	position: fixed;
+	white-space: pre;
+	white-space: pre-wrap;
+	z-index: 100;
+	max-width: 600px;
+	opacity: 0;
+	transition: opacity .4s;
+}
+
+.CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning {
+	border-bottom: 1px dotted #ff2a50;
+}
+
+.CodeMirror-lint-mark-error {
+}
+
+.CodeMirror-lint-mark-warning {
+	border-bottom-color: #f7df1e;
+}
+
+.CodeMirror-lint-marker-error,
+.CodeMirror-lint-marker-warning {
+	background-position: center center;
+	background-repeat: no-repeat;
+	cursor: pointer;
+	display: inline-block;
+	height: 16px;
+	width: 16px;
+	vertical-align: middle;
+	position: relative;
+}
+
+.CodeMirror-lint-message-error:before,
+.CodeMirror-lint-message-warning:before {
+	content: "";
+	display: inline-block;
+	height: 1em;
+	width: 1em;
+	border-radius: 1em;
+	margin-right: .5em;
+	vertical-align: middle;
+	box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2)
+}
+
+.CodeMirror-lint-message-error,
+.CodeMirror-lint-message-warning {
+	padding-left: 0;
+}
+
+.CodeMirror-lint-marker-error,
+.CodeMirror-lint-message-error {
+	background: none;
+}
+
+.CodeMirror-lint-message-error:before {
+	background: #ff2a50;
+}
+
+.CodeMirror-lint-message-warning:before {
+	background: #f7df1e;
+}
+
+.CodeMirror-lint-marker-warning,
+.CodeMirror-lint-message-warning {
+	background: none;
+}
+
+.CodeMirror-lint-marker-multiple:before {
+
+}