mirror of
https://github.com/9001/copyparty.git
synced 2025-08-17 09:02:15 -06:00
ux fixes
This commit is contained in:
ed
parent
d9c71c11fd
commit
75e68d3427
|
|
@ -182,6 +182,10 @@ blink {
|
|||
}
|
||||
}
|
||||
@media screen {
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
background: #39b;
|
||||
|
|
@ -208,16 +212,17 @@ blink {
|
|||
padding: .5em 0;
|
||||
}
|
||||
#mn {
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
xfont-variant: small-caps;
|
||||
font-weight: normal;
|
||||
margin: 1.3em 0 0 0;
|
||||
padding: 1.3em 0 .7em 1em;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
#mn a {
|
||||
background: #2c2c2c;
|
||||
color: #444;
|
||||
background: none;
|
||||
margin: 0 0 0 -.2em;
|
||||
padding: 0 0 0 .4em;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
/* ie: */
|
||||
border-bottom: .1em solid #777\9;
|
||||
margin-right: 1em\9;
|
||||
|
|
@ -234,17 +239,16 @@ blink {
|
|||
height: 1.05em;
|
||||
margin: -.2em .3em -.2em -.4em;
|
||||
display: inline-block;
|
||||
border: 1px solid rgba(255,224,192,0.3);
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
border-width: .05em .05em 0 0;
|
||||
transform: rotate(45deg);
|
||||
background: linear-gradient(45deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0.35));
|
||||
}
|
||||
#mn a:hover {
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
#mh {
|
||||
margin: 1.5em 0;
|
||||
margin: 0 0 1.5em 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -312,6 +316,12 @@ blink {
|
|||
background: #282828;
|
||||
border: .07em dashed #444;
|
||||
}
|
||||
html.dark #mn a:not(:last-child):after {
|
||||
border-color: rgba(255,255,255,0.3);
|
||||
}
|
||||
html.dark #mn a {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 64em) {
|
||||
#mw {
|
||||
|
|
@ -366,6 +376,9 @@ blink {
|
|||
border-bottom: .07em solid #4ac;
|
||||
padding: 0 .3em;
|
||||
}
|
||||
#toc {
|
||||
margin: 0 !important;
|
||||
}
|
||||
#toc>ul {
|
||||
border-left: .1em solid #84c4dd;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
<link href="/.cpr/md.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="mn"></div>
|
||||
<div id="toc"></div>
|
||||
<div id="mw">
|
||||
<div id="mn"></div>
|
||||
<div id="mh">
|
||||
<a id="lightswitch" href="#">dark</a>
|
||||
<a id="edit" href="?edit">edit</a>
|
||||
<a id="lightswitch" href="#">go dark</a> //
|
||||
<a id="edit" href="?edit">edit this</a>
|
||||
</div>
|
||||
<div id="ml">
|
||||
<div style="text-align:center;margin:5em 0">
|
||||
|
|
@ -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();
|
||||
})();
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
*/
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
})();
|
||||
|
||||
</script>
|
||||
<script src="/.cpr/deps/easymde.full.js"></script>
|
||||
<script src="/.cpr/mde.js"></script>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ eye
|
|||
heading
|
||||
image
|
||||
italic
|
||||
lightbulb
|
||||
link
|
||||
list-ol
|
||||
list-ul
|
||||
|
|
|
|||
Loading…
Reference in a new issue