diff --git a/browserAction/index.html b/browserAction/index.html
index fef3714..bf68539 100644
--- a/browserAction/index.html
+++ b/browserAction/index.html
@@ -1,9 +1,9 @@
-
-
+
+
diff --git a/browserAction/script.js b/browserAction/script.js
index 352e92b..71cbd2e 100644
--- 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
index 7618f19..3f6bc37 100644
--- 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 {
+
+}