@@ -32,12 +32,12 @@ var link_md_as_html = false; // TODO (does nothing)
var toggle = function () {
var dark = !document.documentElement.getAttribute("class");
document.documentElement.setAttribute("class", dark ? "dark" : "");
- btn.innerHTML = dark ? "light" : "dark";
+ btn.innerHTML = "go " + (dark ? "light" : "dark");
if (window.localStorage)
- localStorage.setItem('md-dark', dark ? 1 : 0);
+ localStorage.setItem('darkmode', dark ? 1 : 0);
};
btn.onclick = toggle;
- if (window.localStorage && localStorage.getItem('md-dark') == 1)
+ if (window.localStorage && localStorage.getItem('darkmode') == 1)
toggle();
})();
diff --git a/copyparty/web/md.js b/copyparty/web/md.js
index 0c4ae026..d2a7facd 100644
--- a/copyparty/web/md.js
+++ b/copyparty/web/md.js
@@ -220,10 +220,16 @@ var toc = init_toc();
clearTimeout(final);
timer_active = false;
toc.refresh();
+
+ var y = 0;
+ if (window.matchMedia('(min-width: 64em)').matches)
+ y = parseInt(dom_nav.offsetHeight) - window.scrollY;
+
+ dom_toc.style.marginTop = y < 0 ? 0 : y + "px";
}
onscroll();
- window.onscroll = function () {
+ function ev_onscroll() {
// long timeout: scroll ended
clearTimeout(final);
final = setTimeout(onscroll, 100);
@@ -235,4 +241,7 @@ var toc = init_toc();
timer_active = true;
setTimeout(onscroll, 10);
};
+
+ window.onscroll = ev_onscroll;
+ window.onresize = ev_onscroll;
})();
diff --git a/copyparty/web/mde.css b/copyparty/web/mde.css
index 8a87b46d..69b0c5c9 100644
--- a/copyparty/web/mde.css
+++ b/copyparty/web/mde.css
@@ -7,11 +7,16 @@ html .editor-toolbar>button.active { border-color: rgba(0,0,0,0.4); background:
html .editor-toolbar>i.separator { border-left: 1px solid #ccc; }
html .editor-toolbar.disabled-for-preview>button:not(.no-disable) { opacity: .35 }
+html {
+ line-height: 1.5em;
+}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
font-family: sans-serif;
+ background: #f7f7f7;
+ color: #333;
}
#mn {
font-weight: normal;
@@ -23,6 +28,9 @@ html, body {
margin: 0 0 0 -.2em;
padding: 0 0 0 .4em;
text-decoration: none;
+ /* ie: */
+ border-bottom: .1em solid #777\9;
+ margin-right: 1em\9;
}
#mn a:first-child {
padding-left: .5em;
@@ -61,4 +69,234 @@ html .editor-toolbar>button.save.force-save {
color: #f0c;
}
.cm-header { font-size: .4em !important }
-*/
\ No newline at end of file
+*/
+
+
+
+
+
+/* copied from md.css for now */
+.mdo pre,
+.mdo code,
+.mdo a {
+ color: #480;
+ background: #f7f7f7;
+ border: .07em solid #ddd;
+ border-radius: .2em;
+ padding: .1em .3em;
+ margin: 0 .1em;
+}
+.mdo code {
+ font-size: .96em;
+}
+.mdo pre,
+.mdo code {
+ font-family: monospace, monospace;
+ white-space: pre-wrap;
+ word-break: break-all;
+}
+.mdo pre code {
+ display: block;
+ margin: 0 -.3em;
+ padding: .4em .5em;
+ line-height: 1.1em;
+}
+.mdo a {
+ color: #fff;
+ background: #39b;
+ text-decoration: none;
+ padding: 0 .3em;
+ border: none;
+ border-bottom: .07em solid #079;
+}
+.mdo h2 {
+ color: #fff;
+ background: #555;
+ margin-top: 2em;
+ border-bottom: .22em solid #999;
+ border-top: none;
+}
+.mdo h1 {
+ color: #fff;
+ background: #444;
+ font-weight: normal;
+ border-top: .4em solid #fb0;
+ border-bottom: .4em solid #777;
+ border-radius: 0 1em 0 1em;
+ margin: 3em 0 1em 0;
+ padding: .5em 0;
+}
+h1, h2 {
+ line-height: 1.5em;
+}
+h1 {
+ font-size: 1.7em;
+ text-align: center;
+ border: 1em solid #777;
+ border-width: .05em 0;
+ margin: 3em 0;
+}
+h2 {
+ font-size: 1.5em;
+ font-weight: normal;
+ background: #f7f7f7;
+ border-top: .07em solid #fff;
+ border-bottom: .07em solid #bbb;
+ border-radius: .5em .5em 0 0;
+ padding-left: .4em;
+ margin-top: 3em;
+}
+.mdo ul,
+.mdo ol {
+ border-left: .3em solid #ddd;
+}
+.mdo>ul,
+.mdo>ol {
+ border-color: #bbb;
+}
+.mdo ul>li {
+ list-style-type: disc;
+}
+.mdo ul>li,
+.mdo ol>li {
+ margin: .7em 0;
+}
+p>em,
+li>em {
+ color: #c50;
+ padding: .1em;
+ border-bottom: .1em solid #bbb;
+}
+blockquote {
+ font-family: serif;
+ background: #f7f7f7;
+ border: .07em dashed #ccc;
+ padding: 0 2em;
+ margin: 1em 0;
+}
+small {
+ opacity: .8;
+}
+table {
+ border-collapse: collapse;
+}
+td {
+ padding: .2em .5em;
+ border: .12em solid #aaa;
+}
+th {
+ border: .12em solid #aaa;
+}
+
+
+
+
+
+/* mde support */
+.mdo {
+ padding: 1em;
+ background: #f7f7f7;
+}
+html.dark .mdo {
+ background: #1c1c1c;
+}
+.CodeMirror {
+ background: #f7f7f7;
+}
+
+
+
+
+
+/* darkmode */
+html.dark .mdo,
+html.dark .CodeMirror {
+ border-color: #222;
+}
+html.dark,
+html.dark body,
+html.dark .CodeMirror {
+ background: #222;
+ color: #ccc;
+}
+html.dark .mdo a {
+ background: #057;
+}
+html.dark .mdo h1 a, html.dark .mdo h4 a,
+html.dark .mdo h2 a, html.dark .mdo h5 a,
+html.dark .mdo h3 a, html.dark .mdo h6 a {
+ color: inherit;
+ background: none;
+}
+html.dark pre,
+html.dark code {
+ color: #8c0;
+ background: #1a1a1a;
+ border: .07em solid #333;
+}
+html.dark .mdo ul,
+html.dark .mdo ol {
+ border-color: #444;
+}
+html.dark .mdo>ul,
+html.dark .mdo>ol {
+ border-color: #555;
+}
+html.dark p>em,
+html.dark li>em {
+ color: #f94;
+ border-color: #666;
+}
+html.dark h1 {
+ background: #383838;
+ border-top: .4em solid #b80;
+ border-bottom: .4em solid #4c4c4c;
+}
+html.dark h2 {
+ background: #444;
+ border-bottom: .22em solid #555;
+}
+html.dark td,
+html.dark th {
+ border-color: #444;
+}
+html.dark blockquote {
+ background: #282828;
+ border: .07em dashed #444;
+}
+
+
+
+html.dark #mn a {
+ color: #ccc;
+}
+html.dark #mn a:not(:last-child):after {
+ border-color: rgba(255,255,255,0.3);
+}
+html.dark .editor-toolbar {
+ border-color: #2c2c2c;
+ background: #1c1c1c;
+}
+html.dark .editor-toolbar>i.separator {
+ border-left: 1px solid #444;
+ border-right: 1px solid #111;
+}
+html.dark .editor-toolbar>button {
+ margin-left: -1px; border: 1px solid rgba(255,255,255,0.1);
+ color: #aaa;
+}
+
+
+
+html.dark .editor-toolbar>button:hover {
+ color: #333;
+}
+html.dark .editor-toolbar>button.active {
+ color: #333;
+ border-color: #ec1;
+ background: #c90;
+}
+html.dark .editor-toolbar::after,
+html.dark .editor-toolbar::before {
+ background: none;
+}
\ No newline at end of file
diff --git a/copyparty/web/mde.html b/copyparty/web/mde.html
index 5c966a23..99471246 100644
--- a/copyparty/web/mde.html
+++ b/copyparty/web/mde.html
@@ -25,6 +25,19 @@
var link_md_as_html = false; // TODO (does nothing)
var last_modified = {{ lastmod }};
+var lightswitch = (function () {
+ var fun = function () {
+ var dark = !!!document.documentElement.getAttribute("class");
+ document.documentElement.setAttribute("class", dark ? "dark" : "");
+ if (window.localStorage)
+ localStorage.setItem('darkmode', dark ? 1 : 0);
+ };
+ if (window.localStorage && localStorage.getItem('darkmode') == 1)
+ fun();
+
+ return fun;
+})();
+
diff --git a/copyparty/web/mde.js b/copyparty/web/mde.js
index d0503f2a..99a2cfe8 100644
--- a/copyparty/web/mde.js
+++ b/copyparty/web/mde.js
@@ -21,6 +21,11 @@ var dom_md = document.getElementById('mt');
(function () {
var tbar = [
{
+ name: "light",
+ title: "light",
+ className: "fa fa-lightbulb",
+ action: lightswitch
+ }, {
name: "save",
title: "save",
className: "fa fa-save",
@@ -35,16 +40,17 @@ var dom_md = document.getElementById('mt');
var mde = new EasyMDE({
autoDownloadFontAwesome: false,
autofocus: true,
- insertTexts: ["[](", ")"],
+ spellChecker: false,
renderingConfig: {
markedOptions: {
breaks: true,
gfm: true
}
},
- spellChecker: false,
+ insertTexts: ["[](", ")"],
tabSize: 4,
- toolbar: tbar
+ toolbar: tbar,
+ previewClass: 'mdo'
});
md_changed(mde, true);
mde.codemirror.on("change", function () {
@@ -107,7 +113,7 @@ function save_cb() {
try {
r = JSON.parse(this.responseText);
}
- catch {
+ catch (ex) {
alert('Failed to parse reply from server:\n\n' + this.responseText);
return;
}
diff --git a/scripts/deps-docker/mini-fa.css b/scripts/deps-docker/mini-fa.css
index cbaf6551..fa2b8b29 100644
--- a/scripts/deps-docker/mini-fa.css
+++ b/scripts/deps-docker/mini-fa.css
@@ -39,6 +39,7 @@ eye
heading
image
italic
+lightbulb
link
list-ol
list-ul