Skip to content

Commit e21afe9

Browse files
aldergalderg
committed
Adds dark mode support
1 parent 1884cb0 commit e21afe9

File tree

3 files changed

+184
-42
lines changed

3 files changed

+184
-42
lines changed

‎tools/csv.html

+94-22
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,57 @@
44
<head>
55
<title>Online CSV Viewer</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+
<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>
858
<script type="text/javascript" src="deflate/pako.min.js"></script>
959
<script type="text/javascript">
1060
function bytesToString(arr)
@@ -68,19 +118,40 @@
68118
</script>
69119
</head>
70120
<body style="color-scheme:light dark;" onload="document.getElementById('url').focus();">
71-
<h2>Online CSV Viewer</h2>
72-
View public CSV files:
73-
<br><br>
74-
1. Link to CSV file: <input type="text" id="url" size="80" value="" placeholder="eg. https://jgraph.github.io/drawio-diagrams/diagrams/orgchart.csv"></input>
75-
<br><small>Note: Public Google sheets can be used via https://docs.google.com/spreadsheets/d/{fileId}/export?format=csv&usp=sharing where {fileId} is
76-
the ID of the file.</small>
77-
<br><br>
78-
2. Enter Title: <input type="text" size="30" id="title" placeholder="eg. Title"></input> (Optional)
79-
<br><br>
80-
3. Enter Description:
81-
<br>
82-
<textarea rows="20" cols="100" id="desc"
83-
spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off">
121+
<span style="position:relative;display:inline-block;left:50%;transform:translate(-50%,0);">
122+
<div style="display:flex;align-items:center;opacity:0.7;">
123+
<svg viewBox="24 26 68 68" style="width:28px;display:inline-block;">
124+
<line y2="72.394" x2="41.061" y1="43.384" x1="58.069" stroke-miterlimit="10" stroke-width="3.5528"
125+
stroke="currentColor" fill="none" />
126+
<line y2="72.394" x2="75.076" y1="43.384" x1="58.068" stroke-miterlimit="10" stroke-width="3.5008"
127+
stroke="currentColor" fill="none" />
128+
<path
129+
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"
130+
fill="currentColor" />
131+
<path
132+
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"
133+
fill="currentColor" />
134+
<path
135+
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"
136+
fill="currentColor" />
137+
</svg>
138+
<span style="font-family:Helvetica;font-weight:700;font-size:20px;margin-left:4px;">draw.io</span>
139+
<h2 style="text-align:center;width:100%;margin:10px;">Online CSV Viewer</h2>
140+
</div>
141+
<hr>
142+
<br>
143+
View public CSV files:
144+
<br><br>
145+
1. Link to CSV file: <input type="text" id="url" size="80" value="" placeholder="eg. https://jgraph.github.io/drawio-diagrams/diagrams/orgchart.csv"></input>
146+
<br><small>Note: Public Google sheets can be used via https://docs.google.com/spreadsheets/d/{fileId}/export?format=csv&usp=sharing where {fileId} is
147+
the ID of the file.</small>
148+
<br><br>
149+
2. Enter Title: <input type="text" size="30" id="title" placeholder="eg. Title"></input> (Optional)
150+
<br><br>
151+
3. Enter Description:
152+
<br>
153+
<textarea rows="20" cols="100" id="desc"
154+
spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off">
84155
#
85156
# Example CSV import. Use # for comments and # for configuration. Paste CSV below.
86157
# The following names are reserved and should not be used (or ignored):
@@ -166,7 +237,7 @@ <h2>Online CSV Viewer</h2>
166237
# Multiple connect entries are allowed.
167238

168239
connect: {"from": "manager", "to": "name", "invert": true, "label": "manages", \
169-
"style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}
240+
"style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}
170241
connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;"}
171242

172243
# Node x-coordinate. Possible value is a column name. Default is empty. Layouts will
@@ -226,12 +297,13 @@ <h2>Online CSV Viewer</h2>
226297

227298
# If the CSV at the given URL has no column names in the first line, then please
228299
# add them here as a comma-separated list, eg. name,location,id
229-
</textarea>
230-
<br><br>
231-
<button onclick="create();return false;" style="font-weight:bold;">4. Click Here!</button>
232-
<br><br>
233-
<a href="" target="_blank" id="result"></a>
234-
<textarea style="display:none;" rows="20" cols="100" id="textarea"
235-
spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
300+
</textarea>
301+
<br><br>
302+
<button onclick="create();return false;" style="font-weight:bold;">4. Click Here!</button>
303+
<br><br>
304+
<a href="" target="_blank" id="result"></a>
305+
<textarea style="display:none;" rows="20" cols="100" id="textarea"
306+
spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
307+
</span>
236308
</body>
237309
</html>

‎tools/link.html

+1-3
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
textarea {
2828
box-sizing: border-box;
2929
font-family: monospace;
30-
color: lightgray;
3130
resize: vertical;
3231
font-size: inherit;
3332
border-radius: 4px;
@@ -373,7 +372,7 @@
373372
</head>
374373
<body style="color-scheme:light dark;font-family:sans-serif;" onload="resetLink();actionChanged();document.getElementById('cells').focus();">
375374
<span style="position:relative;display:inline-block;left:50%;transform:translate(-50%,0);">
376-
<div style="display:flex;align-items:center;">
375+
<div style="display:flex;align-items:center;opacity:0.7;">
377376
<svg viewBox="24 26 68 68" style="width:28px;display:inline-block;">
378377
<line y2="72.394" x2="41.061" y1="43.384" x1="58.069" stroke-miterlimit="10" stroke-width="3.5528"
379378
stroke="currentColor" fill="none" />
@@ -395,7 +394,6 @@ <h2 style="text-align:center;width:100%;margin:10px;">Create Custom Link</h2>
395394
<img style="opacity:0.6;height:16px;width:16px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTExIDE4aDJ2LTJoLTJ2MnptMS0xNkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6bTAtMTRjLTIuMjEgMC00IDEuNzktNCA0aDJjMC0xLjEuOS0yIDItMnMyIC45IDIgMmMwIDItMyAxLjc1LTMgNWgyYzAtMi4yNSAzLTIuNSAzLTUgMC0yLjIxLTEuNzktNC00LTR6Ii8+PC9zdmc+" border="0">
396395
</a>
397396
</div>
398-
399397
<hr>
400398
Title: <input type="text" size="16" id="title"></input>
401399
<hr>

‎tools/viewer.html

+89-17
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,57 @@
44
<head>
55
<title>Online Diagram Viewer</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+
<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>
858
<script type="text/javascript">
959
function create()
1060
{
@@ -58,21 +108,43 @@
58108
</script>
59109
</head>
60110
<body onload="document.getElementById('url').focus();">
61-
<h2>Online Diagram Viewer</h2>
62-
View public VSDX, Gliffy, Lucidchart and draw.io diagrams (Google Link Sharing Links supported):
63-
<br><br>
64-
1. Link to Diagram: <input type="text" id="url" size="80" value="" placeholder="https://www.example.com/diagram.xml"></input>
65-
<br><br>
66-
2. Choose Mode:
67-
<input type="radio" name="option" id="lightbox" checked="checked"/> Full Screen Mode&nbsp;
68-
<input type="radio" name="option"/> Editor&nbsp;
69-
<input type="radio" name="option" id="iframe"/> IFrame
70-
&nbsp;(Height: <input type="text" id="height" size="10" value="400px"/>)
71-
<br><br>
72-
<button onclick="create();return false;" style="font-weight:bold;">3. Click Here!</button>
73-
<br><br>
74-
<a href="" target="_blank" id="result"></a>
75-
<textarea style="display:none;" rows="4" cols="100" id="textarea"
76-
spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
111+
<span style="position:relative;display:inline-block;left:50%;transform:translate(-50%,0);">
112+
<div style="display:flex;align-items:center;opacity:0.7;">
113+
<svg viewBox="24 26 68 68" style="width:28px;display:inline-block;">
114+
<line y2="72.394" x2="41.061" y1="43.384" x1="58.069" stroke-miterlimit="10" stroke-width="3.5528"
115+
stroke="currentColor" fill="none" />
116+
<line y2="72.394" x2="75.076" y1="43.384" x1="58.068" stroke-miterlimit="10" stroke-width="3.5008"
117+
stroke="currentColor" fill="none" />
118+
<path
119+
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"
120+
fill="currentColor" />
121+
<path
122+
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"
123+
fill="currentColor" />
124+
<path
125+
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"
126+
fill="currentColor" />
127+
</svg>
128+
<span style="font-family:Helvetica;font-weight:700;font-size:20px;margin-left:4px;">draw.io</span>
129+
<h2 style="text-align:center;width:100%;margin:10px;">Online Diagram Viewer</h2>
130+
</div>
131+
<hr>
132+
<br>
133+
View public VSDX, Gliffy, Lucidchart and draw.io diagrams (Google Link Sharing Links supported):
134+
<br><br>
135+
1. Link to Diagram: <input type="text" id="url" size="80" value="" placeholder="https://www.example.com/diagram.xml"></input>
136+
<br><br>
137+
2. Choose Mode:
138+
<input type="radio" name="option" id="lightbox" checked="checked"/> Full Screen Mode&nbsp;
139+
<input type="radio" name="option"/> Editor&nbsp;
140+
<input type="radio" name="option" id="iframe"/> IFrame
141+
&nbsp;(Height: <input type="text" id="height" size="10" value="400px"/>)
142+
<br><br>
143+
<button onclick="create();return false;" style="font-weight:bold;">3. Click Here!</button>
144+
<br><br>
145+
<a href="" target="_blank" id="result"></a>
146+
<textarea style="display:none;" rows="4" cols="100" id="textarea"
147+
spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
148+
</span>
77149
</body>
78150
</html>

0 commit comments

Comments
 (0)