quenousimporte
/
notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(colors): use css classes instead of inline styling

This commit is contained in:
quenousimporte 2023-11-16 10:47:53 +01:00
parent 47b12a0d04
commit 8b8c7761d9
2 changed files with 95 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
main.js
View File

@ -1809,7 +1809,7 @@ function searchinlist(list)
else else
{ {
var ts = document.createElement("span"); var ts = document.createElement("span");
ts.setAttribute("style", "color:grey"); ts.setAttribute("class", "searchlistprefix");
ts.innerHTML = item.prefix || ""; ts.innerHTML = item.prefix || "";
elt.appendChild(ts); elt.appendChild(ts);
@ -1822,7 +1822,7 @@ function searchinlist(list)
item.suffix.forEach(t => item.suffix.forEach(t =>
{ {
ts = document.createElement("span"); ts = document.createElement("span");
ts.setAttribute("style", "color:grey"); ts.setAttribute("class", "searchlistsuffix");
ts.innerHTML = " " + t; ts.innerHTML = " " + t;
elt.appendChild(ts); elt.appendChild(ts);
}); });
@ -2056,8 +2056,8 @@ function rawline2html(line, index, options)
// headings // headings
if (line.startsWith("#")) if (line.startsWith("#"))
{ {
line = line.replace(/(#* )/, "<span class='color-accent'>$1</span>"); line = line.replace(/(#* )/, "<span class='color-heading-mark'>$1</span>");
line = "<span class='color-bold'>" + line + "</span>"; line = "<span class='color-heading'>" + line + "</span>";
} }
// bold and italics // bold and italics
@ -2067,7 +2067,7 @@ function rawline2html(line, index, options)
temp = line.substring(2); temp = line.substring(2);
} }
temp = temp.replace(/\*\*([^\*]*)\*\*/g, "<span class='color-bold'>&#42;&#42;$1&#42;&#42;</span>"); temp = temp.replace(/\*\*([^\*]*)\*\*/g, "<span class='color-bold'>&#42;&#42;$1&#42;&#42;</span>");
temp = temp.replace(/\*([^\*]*)\*/g, "<em>&#42;$1&#42;</em>"); temp = temp.replace(/\*([^\*]*)\*/g, "<span class='color-emphasis'>&#42;$1&#42;</span>");
if (line.startsWith("* ")) if (line.startsWith("* "))
{ {
@ -2083,7 +2083,7 @@ function rawline2html(line, index, options)
{ {
if (line.startsWith(marker) && marker.trim()) 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; options.header = false;
} }
line = line || emptyline; line = line || emptyline;
line = "<span style='color:lightgrey'>" + line + "</span>"; line = "<span class='color-header'>" + line + "</span>";
} }
// code blocks // code blocks
@ -2107,7 +2107,7 @@ function rawline2html(line, index, options)
{ {
options.code = true; options.code = true;
options.language = line.substring(3); 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) else if (line == "```" && options.code)
{ {
@ -2120,7 +2120,7 @@ function rawline2html(line, index, options)
var comment = false; var comment = false;
if (line.match(/^\s*\/\//)) if (line.match(/^\s*\/\//))
{ {
line = "<span style='color:grey'>" + line + "</span>"; line = "<span class='color-code-comment'>" + line + "</span>";
comment = true; comment = true;
} }
line = "<div class='color-code'>" + (line || emptyline) + "</div>"; line = "<div class='color-code'>" + (line || emptyline) + "</div>";
@ -2129,16 +2129,16 @@ function rawline2html(line, index, options)
var keywords = languagekeywords[options.language]; var keywords = languagekeywords[options.language];
keywords.forEach(keyword => 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 // internal links
line = line.replace(/\[\[(.*)\]\]/g, "[[<u>$1</u>]]"); line = line.replace(/\[\[(.*)\]\]/g, "[[<span class='color-link'>$1</span>]]");
// comments // comments
line = line.replace(/&lt;\!--(.*)/g, "<span style='color:lightgrey'>&lt;!--$1</span>"); line = line.replace(/&lt;\!--(.*)/g, "<span class='color-comment'>&lt;!--$1</span>");
if (line.includes("&lt;!--") && !line.includes("--&gt;")) if (line.includes("&lt;!--") && !line.includes("--&gt;"))
{ {
@ -2147,7 +2147,7 @@ function rawline2html(line, index, options)
else if (options.comment) else if (options.comment)
{ {
line = line || emptyline; line = line || emptyline;
line = "<span style='color:lightgrey'>" + line line = "<span class='color-comment'>" + line
if (line.includes("--&gt;")) if (line.includes("--&gt;"))
{ {
options.comment = false; options.comment = false;
@ -2162,7 +2162,7 @@ function rawline2html(line, index, options)
if (line.startsWith("// ")) if (line.startsWith("// "))
{ {
line = "<span style='color:lightgrey'>" + line + "</span>"; line = "<span class='color-comment'>" + line + "</span>";
} }
// autocomplete snippets // autocomplete snippets
@ -2183,7 +2183,7 @@ function rawline2html(line, index, options)
if (matching.length) if (matching.length)
{ {
line += "<span class='color-light'>"; line += "<span class='color-autocomplete'>";
line += matching.join().substr(pos - slashpos - 1); line += matching.join().substr(pos - slashpos - 1);
line += "</span>"; line += "</span>";
} }
@ -2196,13 +2196,13 @@ function rawline2html(line, index, options)
{ {
if (line.startsWith("x ")) if (line.startsWith("x "))
{ {
line = "<del style='color:lightgrey'>" + line + "</del>"; line = "<span class='color-todo-complete'>" + line + "</span>";
} }
else else
{ {
line = line.replace(/(\(\w\))/g, "<span style='text-shadow:var(--shadow); color:var(--blue);'>$1</span>"); line = line.replace(/(\(\w\))/g, "<span class='color-todo-priority'>$1</span>");
line = line.replace(/(@\w*)/g, "<span style='text-shadow:var(--shadow); color:grey'>$1</span>"); line = line.replace(/(@\w*)/g, "<span class='color-todo-project'>$1</span>");
line = line.replace(/(\s\+\w*)/g, "<span style='color:grey'>$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>"); line = line.replace(/`(.*)`/, "<span class='color-code'>`$1`</span>");
// links // links
line = line.replace(/(http[^\s]*)/, "<u>$1</u>"); line = line.replace(/(http[^\s]*)/, "<span class='color-link'>$1</span>");
return line; return line;
} }

81
style.css
View File

@ -1,7 +1,8 @@
/* globals */ /* globals */
:root { :root {
--black: rgb(55, 53, 47); --black: rgb(55, 53, 47);
--blue: #5AA7CE; --accent: #5AA7CE;
--shadow: 0.75px 0 0; --shadow: 0.75px 0 0;
} }
@ -10,7 +11,7 @@ body {
margin-right: 7%; margin-right: 7%;
background: white; background: white;
font-family: system-ui; font-family: system-ui;
caret-color: var(--blue); caret-color: var(--accent);
color: var(--black); color: var(--black);
} }
@ -29,6 +30,7 @@ input {
} }
/* scrollbars */ /* scrollbars */
:root :root
{ {
scrollbar-width: thin; scrollbar-width: thin;
@ -149,25 +151,92 @@ body::-webkit-scrollbar-thumb {
margin: 2px 2px 2px 2px; margin: 2px 2px 2px 2px;
} }
.searchlistprefix {
color: grey;
}
.searchlistsuffix {
color: grey;
}
/* colors */ /* colors */
.color-code { .color-code {
color:lightgray; color:lightgray;
background-color:var(--black); background-color:var(--black);
} }
.color-accent { .color-heading-mark {
color: var(--blue); color: var(--accent);
}
.color-heading {
text-shadow: var(--shadow);
} }
.color-bold { .color-bold {
text-shadow: var(--shadow); text-shadow: var(--shadow);
} }
.color-light { .color-emphasis {
color: lightgray; 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 */ /* link dialog */
#linkdialog { #linkdialog {
border-radius: 3px; border-radius: 3px;
opacity:1; opacity:1;