refactor(colors): use css classes instead of inline styling
This commit is contained in:
parent
47b12a0d04
commit
8b8c7761d9
40
main.js
40
main.js
|
@ -1809,7 +1809,7 @@ function searchinlist(list)
|
|||
else
|
||||
{
|
||||
var ts = document.createElement("span");
|
||||
ts.setAttribute("style", "color:grey");
|
||||
ts.setAttribute("class", "searchlistprefix");
|
||||
ts.innerHTML = item.prefix || "";
|
||||
elt.appendChild(ts);
|
||||
|
||||
|
@ -1822,7 +1822,7 @@ function searchinlist(list)
|
|||
item.suffix.forEach(t =>
|
||||
{
|
||||
ts = document.createElement("span");
|
||||
ts.setAttribute("style", "color:grey");
|
||||
ts.setAttribute("class", "searchlistsuffix");
|
||||
ts.innerHTML = " " + t;
|
||||
elt.appendChild(ts);
|
||||
});
|
||||
|
@ -2056,8 +2056,8 @@ function rawline2html(line, index, options)
|
|||
// headings
|
||||
if (line.startsWith("#"))
|
||||
{
|
||||
line = line.replace(/(#* )/, "<span class='color-accent'>$1</span>");
|
||||
line = "<span class='color-bold'>" + line + "</span>";
|
||||
line = line.replace(/(#* )/, "<span class='color-heading-mark'>$1</span>");
|
||||
line = "<span class='color-heading'>" + line + "</span>";
|
||||
}
|
||||
|
||||
// bold and italics
|
||||
|
@ -2067,7 +2067,7 @@ function rawline2html(line, index, options)
|
|||
temp = line.substring(2);
|
||||
}
|
||||
temp = temp.replace(/\*\*([^\*]*)\*\*/g, "<span class='color-bold'>**$1**</span>");
|
||||
temp = temp.replace(/\*([^\*]*)\*/g, "<em>*$1*</em>");
|
||||
temp = temp.replace(/\*([^\*]*)\*/g, "<span class='color-emphasis'>*$1*</span>");
|
||||
|
||||
if (line.startsWith("* "))
|
||||
{
|
||||
|
@ -2083,7 +2083,7 @@ function rawline2html(line, index, options)
|
|||
{
|
||||
if (line.startsWith(marker) && marker.trim())
|
||||
{
|
||||
line = line.replace(marker, "<span class='color-accent'>" + marker + "</span>");
|
||||
line = line.replace(marker, "<span class='color-list-marker'>" + marker + "</span>");
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -2099,7 +2099,7 @@ function rawline2html(line, index, options)
|
|||
options.header = false;
|
||||
}
|
||||
line = line || emptyline;
|
||||
line = "<span style='color:lightgrey'>" + line + "</span>";
|
||||
line = "<span class='color-header'>" + line + "</span>";
|
||||
}
|
||||
|
||||
// code blocks
|
||||
|
@ -2107,7 +2107,7 @@ function rawline2html(line, index, options)
|
|||
{
|
||||
options.code = true;
|
||||
options.language = line.substring(3);
|
||||
line = "<div class='color-code'>" + line.replace(new RegExp("(" + options.language + ")"), "<span style='text-shadow:var(--shadow);color:var(--blue);'>$1</span>") + "</div>";
|
||||
line = "<div class='color-code'>" + line.replace(new RegExp("(" + options.language + ")"), "<span class='color-code-language'>$1</span>") + "</div>";
|
||||
}
|
||||
else if (line == "```" && options.code)
|
||||
{
|
||||
|
@ -2120,7 +2120,7 @@ function rawline2html(line, index, options)
|
|||
var comment = false;
|
||||
if (line.match(/^\s*\/\//))
|
||||
{
|
||||
line = "<span style='color:grey'>" + line + "</span>";
|
||||
line = "<span class='color-code-comment'>" + line + "</span>";
|
||||
comment = true;
|
||||
}
|
||||
line = "<div class='color-code'>" + (line || emptyline) + "</div>";
|
||||
|
@ -2129,16 +2129,16 @@ function rawline2html(line, index, options)
|
|||
var keywords = languagekeywords[options.language];
|
||||
keywords.forEach(keyword =>
|
||||
{
|
||||
line = line.replace(new RegExp("\\b(" + keyword + ")\\b", "ig"), "<span style='text-shadow:var(--shadow);color:var(--blue)'>$1</span>");
|
||||
line = line.replace(new RegExp("\\b(" + keyword + ")\\b", "ig"), "<span class='color-code-keyword'>$1</span>");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// internal links
|
||||
line = line.replace(/\[\[(.*)\]\]/g, "[[<u>$1</u>]]");
|
||||
line = line.replace(/\[\[(.*)\]\]/g, "[[<span class='color-link'>$1</span>]]");
|
||||
|
||||
// comments
|
||||
line = line.replace(/<\!--(.*)/g, "<span style='color:lightgrey'><!--$1</span>");
|
||||
line = line.replace(/<\!--(.*)/g, "<span class='color-comment'><!--$1</span>");
|
||||
|
||||
if (line.includes("<!--") && !line.includes("-->"))
|
||||
{
|
||||
|
@ -2147,7 +2147,7 @@ function rawline2html(line, index, options)
|
|||
else if (options.comment)
|
||||
{
|
||||
line = line || emptyline;
|
||||
line = "<span style='color:lightgrey'>" + line
|
||||
line = "<span class='color-comment'>" + line
|
||||
if (line.includes("-->"))
|
||||
{
|
||||
options.comment = false;
|
||||
|
@ -2162,7 +2162,7 @@ function rawline2html(line, index, options)
|
|||
|
||||
if (line.startsWith("// "))
|
||||
{
|
||||
line = "<span style='color:lightgrey'>" + line + "</span>";
|
||||
line = "<span class='color-comment'>" + line + "</span>";
|
||||
}
|
||||
|
||||
// autocomplete snippets
|
||||
|
@ -2183,7 +2183,7 @@ function rawline2html(line, index, options)
|
|||
|
||||
if (matching.length)
|
||||
{
|
||||
line += "<span class='color-light'>";
|
||||
line += "<span class='color-autocomplete'>";
|
||||
line += matching.join().substr(pos - slashpos - 1);
|
||||
line += "</span>";
|
||||
}
|
||||
|
@ -2196,13 +2196,13 @@ function rawline2html(line, index, options)
|
|||
{
|
||||
if (line.startsWith("x "))
|
||||
{
|
||||
line = "<del style='color:lightgrey'>" + line + "</del>";
|
||||
line = "<span class='color-todo-complete'>" + line + "</span>";
|
||||
}
|
||||
else
|
||||
{
|
||||
line = line.replace(/(\(\w\))/g, "<span style='text-shadow:var(--shadow); color:var(--blue);'>$1</span>");
|
||||
line = line.replace(/(@\w*)/g, "<span style='text-shadow:var(--shadow); color:grey'>$1</span>");
|
||||
line = line.replace(/(\s\+\w*)/g, "<span style='color:grey'>$1</span>");
|
||||
line = line.replace(/(\(\w\))/g, "<span class='color-todo-priority'>$1</span>");
|
||||
line = line.replace(/(@\w*)/g, "<span class='color-todo-project'>$1</span>");
|
||||
line = line.replace(/(\s\+\w*)/g, "<span class='color-todo-context'>$1</span>");
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2210,7 +2210,7 @@ function rawline2html(line, index, options)
|
|||
line = line.replace(/`(.*)`/, "<span class='color-code'>`$1`</span>");
|
||||
|
||||
// links
|
||||
line = line.replace(/(http[^\s]*)/, "<u>$1</u>");
|
||||
line = line.replace(/(http[^\s]*)/, "<span class='color-link'>$1</span>");
|
||||
|
||||
return line;
|
||||
}
|
||||
|
|
81
style.css
81
style.css
|
@ -1,7 +1,8 @@
|
|||
/* globals */
|
||||
|
||||
:root {
|
||||
--black: rgb(55, 53, 47);
|
||||
--blue: #5AA7CE;
|
||||
--accent: #5AA7CE;
|
||||
--shadow: 0.75px 0 0;
|
||||
}
|
||||
|
||||
|
@ -10,7 +11,7 @@ body {
|
|||
margin-right: 7%;
|
||||
background: white;
|
||||
font-family: system-ui;
|
||||
caret-color: var(--blue);
|
||||
caret-color: var(--accent);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
|
@ -29,6 +30,7 @@ input {
|
|||
}
|
||||
|
||||
/* scrollbars */
|
||||
|
||||
:root
|
||||
{
|
||||
scrollbar-width: thin;
|
||||
|
@ -149,25 +151,92 @@ body::-webkit-scrollbar-thumb {
|
|||
margin: 2px 2px 2px 2px;
|
||||
}
|
||||
|
||||
.searchlistprefix {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.searchlistsuffix {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* colors */
|
||||
|
||||
.color-code {
|
||||
color:lightgray;
|
||||
background-color:var(--black);
|
||||
}
|
||||
|
||||
.color-accent {
|
||||
color: var(--blue);
|
||||
.color-heading-mark {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.color-heading {
|
||||
text-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.color-bold {
|
||||
text-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.color-light {
|
||||
color: lightgray;
|
||||
.color-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.color-list-marker {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.color-header {
|
||||
color: lightgrey;
|
||||
}
|
||||
|
||||
.color-code-language {
|
||||
color: var(--accent);
|
||||
text-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.color-code-comment {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.color-code-keyword {
|
||||
color: var(--accent);
|
||||
text-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.color-comment {
|
||||
color: lightgrey;
|
||||
}
|
||||
|
||||
.color-autocomplete {
|
||||
color: lightgrey;
|
||||
}
|
||||
|
||||
.color-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.color-todo-priority {
|
||||
color: var(--accent);
|
||||
text-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.color-todo-complete {
|
||||
color: lightgrey;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.color-todo-project {
|
||||
text-shadow: var(--shadow);
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.color-todo-context {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* link dialog */
|
||||
|
||||
#linkdialog {
|
||||
border-radius: 3px;
|
||||
opacity:1;
|
||||
|
|
Loading…
Reference in New Issue