Skip to content

Commit 4f31fea

Browse files
aldergalderg
committed
Adds stylesheet for dark mode
1 parent e21afe9 commit 4f31fea

8 files changed

+209
-266
lines changed

‎tools/base64.html

+30-7
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<title>Base64 encode image</title>
55
<meta charset="utf-8"/>
6+
<link rel="stylesheet" type="text/css" href="style.css">
67
<script type="text/javascript">
78
//<![CDATA[
89
function main()
@@ -44,12 +45,34 @@
4445
//]]>
4546
</script>
4647
</head>
47-
<body style="color-scheme:light dark;" onload="main();">
48-
<h2>Base64 encode image</h2>
49-
<div id="dropZone" style="width:600px;height:200px;border:1px dashed gray;">Drag image here</div>
50-
<br/>
51-
Result:
52-
<br/>
53-
<textarea rows="20" cols="96" id="result" placeholder="No image yet" style="outline:none;"></textarea>
48+
<body onload="main();">
49+
<span style="position:relative;display:inline-block;left:50%;transform:translate(-50%,0);">
50+
<div style="display:flex;align-items:center;opacity:0.7;">
51+
<svg viewBox="24 26 68 68" style="width:28px;display:inline-block;">
52+
<line y2="72.394" x2="41.061" y1="43.384" x1="58.069" stroke-miterlimit="10" stroke-width="3.5528"
53+
stroke="currentColor" fill="none" />
54+
<line y2="72.394" x2="75.076" y1="43.384" x1="58.068" stroke-miterlimit="10" stroke-width="3.5008"
55+
stroke="currentColor" fill="none" />
56+
<path
57+
d="M52.773,77.084c0,1.954-1.599,3.553-3.553,3.553H36.999c-1.954,0-3.553-1.599-3.553-3.553v-9.379c0-1.954,1.599-3.553,3.553-3.553h12.222c1.954,0,3.553,1.599,3.553,3.553V77.084z"
58+
fill="currentColor" />
59+
<path
60+
d="M67.762,48.074c0,1.954-1.599,3.553-3.553,3.553H51.988c-1.954,0-3.553-1.599-3.553-3.553v-9.379c0-1.954,1.599-3.553,3.553-3.553H64.21c1.954,0,3.553,1.599,3.553,3.553V48.074z"
61+
fill="currentColor" />
62+
<path
63+
d="M82.752,77.084c0,1.954-1.599,3.553-3.553,3.553H66.977c-1.954,0-3.553-1.599-3.553-3.553v-9.379c0-1.954,1.599-3.553,3.553-3.553h12.222c1.954,0,3.553,1.599,3.553,3.553V77.084z"
64+
fill="currentColor" />
65+
</svg>
66+
<span style="font-family:Helvetica;font-weight:700;font-size:20px;margin-left:4px;">draw.io</span>
67+
<h2 style="text-align:center;width:100%;margin:10px;">Base64 encode image</h2>
68+
</div>
69+
<hr>
70+
<br>
71+
<div id="dropZone" style="width:600px;height:200px;border:1px dashed gray;">Drag image here</div>
72+
<br/>
73+
Result:
74+
<br/>
75+
<textarea rows="20" cols="96" id="result" placeholder="No image yet" style="outline:none;"></textarea>
76+
</span>
5477
</body>
5578
</html>

‎tools/convert.html

+92-70
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<title>Inflate/deflate, URL encode/decode</title>
66
<meta charset="utf-8"/>
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
7+
<link rel="stylesheet" type="text/css" href="style.css">
88
<script type="text/javascript" src="deflate/pako.min.js"></script>
99
<script type="text/javascript">
1010
//<![CDATA[
@@ -460,79 +460,101 @@
460460
//]]>
461461
</script>
462462
</head>
463-
<body style="color-scheme:light dark;">
464-
<h2>Inflate/deflate, URL encode/decode</h2>
465-
<textarea rows="40" cols="120" id="textarea" placeholder="Drop files here or enter text" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
466-
<br/><br/>
467-
<form>
468-
<input type="checkbox" id="encodeCheckbox" checked="checked" /> URL Encode&nbsp;
469-
<input type="checkbox" id="deflateCheckbox" checked="checked" /> Deflate&nbsp;
470-
<input type="checkbox" id="base64Checkbox" checked="checked" /> Base64&nbsp;&nbsp;
471-
<button onclick="removeLinebreaks(document.getElementById('textarea').value);return false;">Remove linebreaks</button>&nbsp;
472-
<button onclick="document.getElementById('textarea').value = encodeURIComponent(document.getElementById('textarea').value);return false;">URL Encode</button>&nbsp;
473-
<button onclick="decodeFromUri();return false;">URL Decode</button>&nbsp;
474-
<button onclick="encode(document.getElementById('textarea').value);return false;">Encode</button>&nbsp;
475-
<button onclick="decode(document.getElementById('textarea').value);return false;">Decode</button>&nbsp;
476-
(<span id="count">0</span> chars)
463+
<body>
464+
<span style="position:relative;display:inline-block;left:50%;transform:translate(-50%,0);">
465+
<div style="display:flex;align-items:center;opacity:0.7;">
466+
<svg viewBox="24 26 68 68" style="width:28px;display:inline-block;">
467+
<line y2="72.394" x2="41.061" y1="43.384" x1="58.069" stroke-miterlimit="10" stroke-width="3.5528"
468+
stroke="currentColor" fill="none" />
469+
<line y2="72.394" x2="75.076" y1="43.384" x1="58.068" stroke-miterlimit="10" stroke-width="3.5008"
470+
stroke="currentColor" fill="none" />
471+
<path
472+
d="M52.773,77.084c0,1.954-1.599,3.553-3.553,3.553H36.999c-1.954,0-3.553-1.599-3.553-3.553v-9.379c0-1.954,1.599-3.553,3.553-3.553h12.222c1.954,0,3.553,1.599,3.553,3.553V77.084z"
473+
fill="currentColor" />
474+
<path
475+
d="M67.762,48.074c0,1.954-1.599,3.553-3.553,3.553H51.988c-1.954,0-3.553-1.599-3.553-3.553v-9.379c0-1.954,1.599-3.553,3.553-3.553H64.21c1.954,0,3.553,1.599,3.553,3.553V48.074z"
476+
fill="currentColor" />
477+
<path
478+
d="M82.752,77.084c0,1.954-1.599,3.553-3.553,3.553H66.977c-1.954,0-3.553-1.599-3.553-3.553v-9.379c0-1.954,1.599-3.553,3.553-3.553h12.222c1.954,0,3.553,1.599,3.553,3.553V77.084z"
479+
fill="currentColor" />
480+
</svg>
481+
<span style="font-family:Helvetica;font-weight:700;font-size:20px;margin-left:4px;">draw.io</span>
482+
<h2 style="text-align:center;width:100%;margin:10px;">Inflate/deflate, URL encode/decode</h2>
483+
</div>
484+
<hr>
477485
<br>
478-
<button onclick="document.getElementById('textarea').value=escape(document.getElementById('textarea').value);return false;">Escape</button>&nbsp;
479-
<button onclick="document.getElementById('textarea').value=unescape(document.getElementById('textarea').value);return false;">Unescape</button>&nbsp;
480-
<button onclick="document.getElementById('textarea').value=btoa(document.getElementById('textarea').value);return false;">btoa</button>
481-
<button onclick="document.getElementById('textarea').value=atob(document.getElementById('textarea').value);return false;">atob</button>
482-
<button onclick="normalizeXml();return false;">Normalize XML</button>
483-
<button onclick="formatXml();return false;">Format XML</button>
484-
<button onclick="formatJson(2);return false;">Format JSON</button>
485-
<button onclick="formatJson();return false;">Normalize JSON</button>
486-
<button onclick="jsVar();return false;">JS variable</button>
487-
<br>
488-
<button onclick="checkMxFile();return false;">Check mxFile</button>
489-
<button onclick="correctMxFile();return false;">Correct mxFile</button>
490-
<button onclick="download();return false;">Download</button>
491-
<script type="text/javascript">
492-
//<![CDATA[
493-
// Enables dropping files
494-
if (window.File != null && window.FileReader != null && window.FileList != null)
495-
{
496-
function handleDrop(evt)
497-
{
498-
evt.stopPropagation();
499-
evt.preventDefault();
500-
501-
if (evt.dataTransfer.files.length > 0)
502-
{
503-
var file = evt.dataTransfer.files[0];
504-
505-
var reader = new FileReader();
506-
reader.onload = function (e)
507-
{
508-
evt.target.value = e.target.result;
509-
};
510-
reader.readAsText(file);
511-
}
512-
};
513-
514-
function handleDragOver(evt)
515-
{
516-
evt.stopPropagation();
517-
evt.preventDefault();
518-
};
486+
<textarea rows="40" cols="120" id="textarea" placeholder="Drop files here or enter text" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
487+
<br/><br/>
488+
<form>
489+
<input type="checkbox" id="encodeCheckbox" checked="checked" /> URL Encode&nbsp;
490+
<input type="checkbox" id="deflateCheckbox" checked="checked" /> Deflate&nbsp;
491+
<input type="checkbox" id="base64Checkbox" checked="checked" /> Base64&nbsp;&nbsp;
492+
<button onclick="removeLinebreaks(document.getElementById('textarea').value);return false;">Remove linebreaks</button>&nbsp;
493+
<button onclick="document.getElementById('textarea').value = encodeURIComponent(document.getElementById('textarea').value);return false;">URL Encode</button>&nbsp;
494+
<button onclick="decodeFromUri();return false;">URL Decode</button>&nbsp;
495+
<button onclick="encode(document.getElementById('textarea').value);return false;">Encode</button>&nbsp;
496+
<button onclick="decode(document.getElementById('textarea').value);return false;">Decode</button>&nbsp;
497+
(<span id="count">0</span> chars)
498+
<br>
499+
<button onclick="document.getElementById('textarea').value=escape(document.getElementById('textarea').value);return false;">Escape</button>&nbsp;
500+
<button onclick="document.getElementById('textarea').value=unescape(document.getElementById('textarea').value);return false;">Unescape</button>&nbsp;
501+
<button onclick="document.getElementById('textarea').value=btoa(document.getElementById('textarea').value);return false;">btoa</button>
502+
<button onclick="document.getElementById('textarea').value=atob(document.getElementById('textarea').value);return false;">atob</button>
503+
<button onclick="normalizeXml();return false;">Normalize XML</button>
504+
<button onclick="formatXml();return false;">Format XML</button>
505+
<button onclick="formatJson(2);return false;">Format JSON</button>
506+
<button onclick="formatJson();return false;">Normalize JSON</button>
507+
<button onclick="jsVar();return false;">JS variable</button>
508+
<br>
509+
<button onclick="checkMxFile();return false;">Check mxFile</button>
510+
<button onclick="correctMxFile();return false;">Correct mxFile</button>
511+
<button onclick="download();return false;">Download</button>
512+
<script type="text/javascript">
513+
//<![CDATA[
514+
// Enables dropping files
515+
if (window.File != null && window.FileReader != null && window.FileList != null)
516+
{
517+
function handleDrop(evt)
518+
{
519+
evt.stopPropagation();
520+
evt.preventDefault();
521+
522+
if (evt.dataTransfer.files.length > 0)
523+
{
524+
var file = evt.dataTransfer.files[0];
525+
526+
var reader = new FileReader();
527+
reader.onload = function (e)
528+
{
529+
evt.target.value = e.target.result;
530+
};
531+
reader.readAsText(file);
532+
}
533+
};
534+
535+
function handleDragOver(evt)
536+
{
537+
evt.stopPropagation();
538+
evt.preventDefault();
539+
};
519540

520-
// Setup the dnd listeners.
521-
var textarea = document.getElementById('textarea');
541+
// Setup the dnd listeners.
542+
var textarea = document.getElementById('textarea');
522543

523-
textarea.addEventListener('dragover', handleDragOver, false);
524-
textarea.addEventListener('drop', handleDrop, false);
525-
var span = document.getElementById('count')
544+
textarea.addEventListener('dragover', handleDragOver, false);
545+
textarea.addEventListener('drop', handleDrop, false);
546+
var span = document.getElementById('count')
526547

527-
function updateCount()
528-
{
529-
span.innerHTML = textarea.value.length;
530-
}
548+
function updateCount()
549+
{
550+
span.innerHTML = textarea.value.length;
551+
}
531552

532-
textarea.addEventListener('input', updateCount, false);
533-
}
534-
//]]>
535-
</script>
536-
</form>
553+
textarea.addEventListener('input', updateCount, false);
554+
}
555+
//]]>
556+
</script>
557+
</form>
558+
</span>
537559
</body>
538560
</html>

‎tools/csv.html

+1-51
Original file line numberDiff line numberDiff line change
@@ -4,57 +4,7 @@
44
<head>
55
<title>Online CSV Viewer</title>
66
<meta charset="utf-8"/>
7-
<style type="text/css">
8-
@media (prefers-color-scheme: dark) {
9-
.adaptive-asset {
10-
filter: invert(1);
11-
}
12-
}
13-
@media only screen {
14-
body {
15-
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans",
16-
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
17-
background: light-dark(rgb(255, 255, 255), rgb(18, 18, 18));
18-
color: light-dark(rgb(18, 18, 18), white);
19-
margin: 10px 5% 10px 5%;
20-
color-scheme: dark;
21-
font-size: 12px;
22-
}
23-
hr {
24-
border: 0;
25-
border-top: 1px solid light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
26-
}
27-
textarea {
28-
box-sizing: border-box;
29-
font-family: monospace;
30-
resize: vertical;
31-
font-size: inherit;
32-
border-radius: 4px;
33-
padding: 4px;
34-
}
35-
button {
36-
background: light-dark(#29b6f2, #003555);
37-
border-radius: 4px;
38-
padding: 10px;
39-
border: none;
40-
}
41-
button {
42-
cursor: default;
43-
opacity: 0.9;
44-
}
45-
button:hover:not(:disabled) {
46-
opacity: 1;
47-
}
48-
button:active:not(:disabled) {
49-
filter:invert(1);
50-
}
51-
input {
52-
padding: 2px 6px;
53-
margin: 0 0 0 4px;
54-
font-size: inherit;
55-
}
56-
}
57-
</style>
7+
<link rel="stylesheet" type="text/css" href="style.css">
588
<script type="text/javascript" src="deflate/pako.min.js"></script>
599
<script type="text/javascript">
6010
function bytesToString(arr)

‎tools/generate.html

+5-27
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,10 @@
33
<head>
44
<title>Generate draw.io Diagrams</title>
55
<meta charset="utf-8" />
6-
<style type="text/css">
7-
body {
8-
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans",
9-
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
10-
background: light-dark(rgb(255, 255, 255), rgb(18, 18, 18));
11-
color: light-dark(rgb(18, 18, 18), white);
12-
margin: 10px 5% 10px 5%;
13-
color-scheme: dark;
14-
font-size: 16px;
15-
}
16-
button {
17-
background: #1a4cad;
18-
border-radius: 4px;
19-
padding: 10px;
20-
border: none;
21-
}
22-
button, a, input, select {
23-
cursor: default;
24-
opacity: 0.9;
25-
}
26-
button:hover:not(:disabled), a:hover, input:hover, select:hover {
27-
opacity: 1;
28-
}
29-
</style>
6+
<link rel="stylesheet" type="text/css" href="style.css">
307
</head>
318
<body>
32-
<div style="display:flex;opacity:0.9;align-items:center;padding:20px 20px 10px 20px;">
9+
<div style="display:flex;opacity:0.9;align-items:center;padding:20px 20px 10px 20px;opacity:0.7;">
3310
<svg viewBox="24 26 68 68" style="width:28px;display:inline-block;">
3411
<line y2="72.394" x2="41.061" y1="43.384" x1="58.069" stroke-miterlimit="10" stroke-width="3.5528"
3512
stroke="currentColor" fill="none" />
@@ -56,7 +33,7 @@
5633
placeholder="Diagram description, eg. five tier sequence diagram on how to order fast food online or graph TD; A-->B; A-->C; B-->D; C-->D;"
5734
spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
5835
<div style="position:relative;display:flex;align-items:center;justify-items:stretch;padding-top:10px;">
59-
<button style="position:relative;background:rgb(56, 56, 56);color:gray;" title="Unescape" id="create" onclick="replaceEscapes();return false;">
36+
<button style="position:relative;" title="Unescape" id="create" onclick="replaceEscapes();return false;">
6037
Unescape
6138
</button>
6239
<div style="margin-left:auto;opacity:0.5;">
@@ -204,7 +181,8 @@
204181
};
205182

206183
function preview(value) {
207-
var params = 'lightbox=1&dark=1&border=10&';
184+
var dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
185+
var params = 'lightbox=1&dark=' + ((dark) ? '1' : '0') + '&border=10&';
208186
var prefix = (urlParams['dev'] == '1') ?
209187
'https://test.draw.io/?dev=1&' :
210188
'https://www.draw.io/?' + params;

0 commit comments

Comments
 (0)