From e79a62134bbcc9f01a58f8252ba431fb966cc613 Mon Sep 17 00:00:00 2001 From: chee Date: Sat, 5 Jan 2019 10:55:57 +0000 Subject: [PATCH] style linting popups ^^ --- browserAction/index.html | 4 +- browserAction/script.js | 2 +- browserAction/style.css | 88 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 91 insertions(+), 3 deletions(-) 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 { + +}