Fossil SCM

Simplified pikchrshow markup alignment selection to a single checkbox. Related CSS/layout tweaks.

stephan 2020-09-12 02:58 trunk
Commit 240646ef7d8eb2ae5684b54c8f444bd9c8cfd3cc65b96e8a0ea7f463452df855
Parent c3bb7cd22a8dde6…
3 files changed +7 -3 +20 -24 +11 -4
~ src/default.css ~ src/fossil.page.pikchrshow.js ~ src/pikchrshow.c
M src/default.css
+7 -3
--- src/default.css
+++ src/default.css
@@ -1113,11 +1113,11 @@
11131113
 (e.g. DIV) so that certain nesting constructs are legal.
11141114
 */
11151115
 .input-with-label {
11161116
 border: 1px inset rgba(128, 128, 128, 0.5);
11171117
 border-radius: 0.25em;
1118
- padding: 0.15em 0.25em;
1118
+ padding: 0.1em;
11191119
 margin: 0 0.5em;
11201120
 display: inline-block;
11211121
 cursor: default;
11221122
 white-space: nowrap;
11231123
 }
@@ -1140,15 +1140,19 @@
11401140
 margin: 0;
11411141
 }
11421142
 .input-with-label > textarea {
11431143
 margin: 0;
11441144
 }
1145
+/* Browsers are unfortunately inconsistent in how they
1146
+ align checkboxes and radio buttons, even if they're
1147
+ given the same vertical-align value. 'middle' seems to
1148
+ be the least bad option, rather than the ideal. */
11451149
 .input-with-label > input[type=checkbox] {
1146
- vertical-align: sub;
1150
+ vertical-align: middle;
11471151
 }
11481152
 .input-with-label > input[type=radio] {
1149
- vertical-align: sub;
1153
+ vertical-align: middle;
11501154
 }
11511155
 .input-with-label > label {
11521156
 font-weight: initial;
11531157
 margin: 0 0.25em 0 0.25em;
11541158
 vertical-align: middle;
11551159
--- src/default.css
+++ src/default.css
@@ -1113,11 +1113,11 @@
1113 (e.g. DIV) so that certain nesting constructs are legal.
1114 */
1115 .input-with-label {
1116 border: 1px inset rgba(128, 128, 128, 0.5);
1117 border-radius: 0.25em;
1118 padding: 0.15em 0.25em;
1119 margin: 0 0.5em;
1120 display: inline-block;
1121 cursor: default;
1122 white-space: nowrap;
1123 }
@@ -1140,15 +1140,19 @@
1140 margin: 0;
1141 }
1142 .input-with-label > textarea {
1143 margin: 0;
1144 }
 
 
 
 
1145 .input-with-label > input[type=checkbox] {
1146 vertical-align: sub;
1147 }
1148 .input-with-label > input[type=radio] {
1149 vertical-align: sub;
1150 }
1151 .input-with-label > label {
1152 font-weight: initial;
1153 margin: 0 0.25em 0 0.25em;
1154 vertical-align: middle;
1155
--- src/default.css
+++ src/default.css
@@ -1113,11 +1113,11 @@
1113 (e.g. DIV) so that certain nesting constructs are legal.
1114 */
1115 .input-with-label {
1116 border: 1px inset rgba(128, 128, 128, 0.5);
1117 border-radius: 0.25em;
1118 padding: 0.1em;
1119 margin: 0 0.5em;
1120 display: inline-block;
1121 cursor: default;
1122 white-space: nowrap;
1123 }
@@ -1140,15 +1140,19 @@
1140 margin: 0;
1141 }
1142 .input-with-label > textarea {
1143 margin: 0;
1144 }
1145 /* Browsers are unfortunately inconsistent in how they
1146 align checkboxes and radio buttons, even if they're
1147 given the same vertical-align value. 'middle' seems to
1148 be the least bad option, rather than the ideal. */
1149 .input-with-label > input[type=checkbox] {
1150 vertical-align: middle;
1151 }
1152 .input-with-label > input[type=radio] {
1153 vertical-align: middle;
1154 }
1155 .input-with-label > label {
1156 font-weight: initial;
1157 margin: 0 0.25em 0 0.25em;
1158 vertical-align: middle;
1159
M src/fossil.page.pikchrshow.js
+20 -24
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -29,37 +29,34 @@
2929
 taContent: E('#content'),
3030
 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
3131
 'readonly', true),
3232
 uiControls: E('#pikchrshow-controls'),
3333
 previewModeToggle: D.button("Preview mode"),
34
- selectAlignment: D.append(
35
- D.select(/*alignment for markup blocks*/),
36
- D.option('', 'Markup Alignment'),
37
- D.option('', 'left (default)'),
38
- D.option('center', 'center')
39
- )
34
+ markupAlignCenter: D.attr(D.checkbox(), 'id','markup-align-center'),
35
+ markupAlignWrapper: D.span()//D.addClass(D.span(), 'input-with-label')
4036
 };
4137
4238
 ////////////////////////////////////////////////////////////
4339
 // Setup markup alignment selection...
44
- D.disable(P.e.selectAlignment.options[0]
45
- /*has to be done after creation for default selection to work*/
46
- );
47
- P.e.selectAlignment.addEventListener('change', function(ev){
40
+ P.e.markupAlignCenter.addEventListener('change', function(ev){
4841
 /* Update markdown/fossil wiki preview if it's active */
4942
 if(P.previewMode==1 || P.previewMode==2){
5043
 P.renderPreview();
5144
 }
5245
 }, false);
46
+ D.append(P.e.markupAlignWrapper,
47
+ P.e.markupAlignCenter,
48
+ D.label(P.e.markupAlignCenter, "Align center?"));
5349
5450
 ////////////////////////////////////////////////////////////
5551
 // Setup the preview fieldset's LEGEND element...
5652
 D.append( P.e.previewLegend,
5753
 P.e.previewModeToggle,
58
- P.e.previewModeLabel,
54
+ '\u00a0',
5955
 P.e.previewCopyButton,
60
- D.addClass(P.e.selectAlignment, 'hidden') );
56
+ P.e.previewModeLabel,
57
+ P.e.markupAlignWrapper );
6158
6259
 ////////////////////////////////////////////////////////////
6360
 // Setup clipboard-copy of markup/SVG...
6461
 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
6562
 P.e.previewCopyButton.addEventListener('text-copied', D.flashOnce.eventHandler, false);
@@ -104,13 +101,13 @@
104101
 'Pikchr scripts may also be dragged/dropped from ',
105102
 'the local filesystem into the text area, but ',
106103
 'the auto-preview option does not apply to them.'
107104
 )
108105
 )
109
- ).childNodes.forEach(function(ch){
106
+ )/*.childNodes.forEach(function(ch){
110107
 ch.style.margin = "0 0.25em";
111
- });
108
+ })*/;
112109
 D.append(P.e.uiControls, cbWrap);
113110
 P.predefinedPiks.forEach(function(script,ndx){
114111
 const opt = D.option(script.code ? script.code.trim() :'', script.name);
115112
 D.append(selectScript, opt);
116113
 if(!ndx) selectScript.selectedIndex = 0 /*timing/ordering workaround*/;
@@ -179,13 +176,13 @@
179176
 P.renderPreview()/*it's already rendered, but this gets all
180177
 labels/headers in sync.*/;
181178
 }
182179
 }/*F.onPageLoad()*/);
183180
184
- /* Shows or hides P.e.selectAlignment */
181
+ /* Shows or hides P.e.markupAlignWrapper */
185182
 const showMarkupAlignment = function(showIt){
186
- P.e.selectAlignment.classList[showIt ? 'remove' : 'add']('hidden');
183
+ P.e.markupAlignWrapper.classList[showIt ? 'remove' : 'add']('hidden');
187184
 };
188185
189186
 /**
190187
 Updates the preview view based on the current preview mode and
191188
 error state.
@@ -201,35 +198,34 @@
201198
 this.e.previewModeLabel.innerText = "Error";
202199
 return;
203200
 }
204201
 D.removeClass(preTgt, 'error');
205202
 D.removeClass(P.e.previewCopyButton, 'disabled');
206
- D.enable(this.e.previewModeToggle);
203
+ D.enable(this.e.previewModeToggle, this.e.markupAlignCenter);
207204
 let label;
208205
 switch(this.previewMode){
209206
 case 0:
210
- label = "Rendered SVG";
207
+ label = "SVG";
211208
 showMarkupAlignment(false);
212209
 preTgt.innerHTML = this.response.raw;
213210
 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
214211
 break;
215212
 case 1:
216213
 label = "Markdown";
217214
 showMarkupAlignment(true);
218215
 this.e.taPreviewText.value = [
219
- '```pikchr'+(this.e.selectAlignment.value
220
- ? ' '+this.e.selectAlignment.value : ''),
216
+ '```pikchr'+(this.e.markupAlignCenter.checked? ' center' : ''),
221217
 this.response.inputText, '```'
222218
 ].join('\n');
223219
 D.append(D.clearElement(preTgt), this.e.taPreviewText);
224220
 break;
225221
 case 2:
226222
 label = "Fossil wiki";
227223
 showMarkupAlignment(true);
228224
 this.e.taPreviewText.value = [
229225
 '<verbatim type="pikchr',
230
- this.e.selectAlignment.value ? ' '+this.e.selectAlignment.value : '',
226
+ this.e.markupAlignCenter.checked ? ' center' : '',
231227
 '">', this.response.inputText, '</verbatim>'
232228
 ].join('');
233229
 D.append(D.clearElement(preTgt), this.e.taPreviewText);
234230
 break;
235231
 case 3:
@@ -249,13 +245,13 @@
249245
 P.preview = function fp(){
250246
 if(!fp.hasOwnProperty('toDisable')){
251247
 fp.toDisable = [
252248
 /* input elements to disable during ajax operations */
253249
 this.e.btnSubmit, this.e.taContent,
254
- this.e.selectAlignment,
255250
 this.e.cbAutoPreview, this.e.selectScript
256
- /* handled separately: previewModeToggle, previewCopyButton */
251
+ /* handled separately: previewModeToggle, previewCopyButton,
252
+ markupAlignCenter */
257253
 ];
258254
 fp.target = this.e.previewTarget;
259255
 fp.updateView = function(c,isError){
260256
 P.previewMode = 0;
261257
 P.response.raw = c;
@@ -262,11 +258,11 @@
262258
 P.response.isError = isError;
263259
 D.enable(fp.toDisable);
264260
 P.renderPreview();
265261
 };
266262
 }
267
- D.disable(fp.toDisable, this.e.previewModeToggle);
263
+ D.disable(fp.toDisable, this.e.previewModeToggle, this.e.markupAlignCenter);
268264
 D.addClass(this.e.previewCopyButton, 'disabled');
269265
 const content = this.e.taContent.value.trim();
270266
 this.response.raw = undefined;
271267
 this.response.inputText = content;
272268
 if(!content){
273269
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -29,37 +29,34 @@
29 taContent: E('#content'),
30 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
31 'readonly', true),
32 uiControls: E('#pikchrshow-controls'),
33 previewModeToggle: D.button("Preview mode"),
34 selectAlignment: D.append(
35 D.select(/*alignment for markup blocks*/),
36 D.option('', 'Markup Alignment'),
37 D.option('', 'left (default)'),
38 D.option('center', 'center')
39 )
40 };
41
42 ////////////////////////////////////////////////////////////
43 // Setup markup alignment selection...
44 D.disable(P.e.selectAlignment.options[0]
45 /*has to be done after creation for default selection to work*/
46 );
47 P.e.selectAlignment.addEventListener('change', function(ev){
48 /* Update markdown/fossil wiki preview if it's active */
49 if(P.previewMode==1 || P.previewMode==2){
50 P.renderPreview();
51 }
52 }, false);
 
 
 
53
54 ////////////////////////////////////////////////////////////
55 // Setup the preview fieldset's LEGEND element...
56 D.append( P.e.previewLegend,
57 P.e.previewModeToggle,
58 P.e.previewModeLabel,
59 P.e.previewCopyButton,
60 D.addClass(P.e.selectAlignment, 'hidden') );
 
61
62 ////////////////////////////////////////////////////////////
63 // Setup clipboard-copy of markup/SVG...
64 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
65 P.e.previewCopyButton.addEventListener('text-copied', D.flashOnce.eventHandler, false);
@@ -104,13 +101,13 @@
104 'Pikchr scripts may also be dragged/dropped from ',
105 'the local filesystem into the text area, but ',
106 'the auto-preview option does not apply to them.'
107 )
108 )
109 ).childNodes.forEach(function(ch){
110 ch.style.margin = "0 0.25em";
111 });
112 D.append(P.e.uiControls, cbWrap);
113 P.predefinedPiks.forEach(function(script,ndx){
114 const opt = D.option(script.code ? script.code.trim() :'', script.name);
115 D.append(selectScript, opt);
116 if(!ndx) selectScript.selectedIndex = 0 /*timing/ordering workaround*/;
@@ -179,13 +176,13 @@
179 P.renderPreview()/*it's already rendered, but this gets all
180 labels/headers in sync.*/;
181 }
182 }/*F.onPageLoad()*/);
183
184 /* Shows or hides P.e.selectAlignment */
185 const showMarkupAlignment = function(showIt){
186 P.e.selectAlignment.classList[showIt ? 'remove' : 'add']('hidden');
187 };
188
189 /**
190 Updates the preview view based on the current preview mode and
191 error state.
@@ -201,35 +198,34 @@
201 this.e.previewModeLabel.innerText = "Error";
202 return;
203 }
204 D.removeClass(preTgt, 'error');
205 D.removeClass(P.e.previewCopyButton, 'disabled');
206 D.enable(this.e.previewModeToggle);
207 let label;
208 switch(this.previewMode){
209 case 0:
210 label = "Rendered SVG";
211 showMarkupAlignment(false);
212 preTgt.innerHTML = this.response.raw;
213 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
214 break;
215 case 1:
216 label = "Markdown";
217 showMarkupAlignment(true);
218 this.e.taPreviewText.value = [
219 '```pikchr'+(this.e.selectAlignment.value
220 ? ' '+this.e.selectAlignment.value : ''),
221 this.response.inputText, '```'
222 ].join('\n');
223 D.append(D.clearElement(preTgt), this.e.taPreviewText);
224 break;
225 case 2:
226 label = "Fossil wiki";
227 showMarkupAlignment(true);
228 this.e.taPreviewText.value = [
229 '<verbatim type="pikchr',
230 this.e.selectAlignment.value ? ' '+this.e.selectAlignment.value : '',
231 '">', this.response.inputText, '</verbatim>'
232 ].join('');
233 D.append(D.clearElement(preTgt), this.e.taPreviewText);
234 break;
235 case 3:
@@ -249,13 +245,13 @@
249 P.preview = function fp(){
250 if(!fp.hasOwnProperty('toDisable')){
251 fp.toDisable = [
252 /* input elements to disable during ajax operations */
253 this.e.btnSubmit, this.e.taContent,
254 this.e.selectAlignment,
255 this.e.cbAutoPreview, this.e.selectScript
256 /* handled separately: previewModeToggle, previewCopyButton */
 
257 ];
258 fp.target = this.e.previewTarget;
259 fp.updateView = function(c,isError){
260 P.previewMode = 0;
261 P.response.raw = c;
@@ -262,11 +258,11 @@
262 P.response.isError = isError;
263 D.enable(fp.toDisable);
264 P.renderPreview();
265 };
266 }
267 D.disable(fp.toDisable, this.e.previewModeToggle);
268 D.addClass(this.e.previewCopyButton, 'disabled');
269 const content = this.e.taContent.value.trim();
270 this.response.raw = undefined;
271 this.response.inputText = content;
272 if(!content){
273
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -29,37 +29,34 @@
29 taContent: E('#content'),
30 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
31 'readonly', true),
32 uiControls: E('#pikchrshow-controls'),
33 previewModeToggle: D.button("Preview mode"),
34 markupAlignCenter: D.attr(D.checkbox(), 'id','markup-align-center'),
35 markupAlignWrapper: D.span()//D.addClass(D.span(), 'input-with-label')
 
 
 
 
36 };
37
38 ////////////////////////////////////////////////////////////
39 // Setup markup alignment selection...
40 P.e.markupAlignCenter.addEventListener('change', function(ev){
 
 
 
41 /* Update markdown/fossil wiki preview if it's active */
42 if(P.previewMode==1 || P.previewMode==2){
43 P.renderPreview();
44 }
45 }, false);
46 D.append(P.e.markupAlignWrapper,
47 P.e.markupAlignCenter,
48 D.label(P.e.markupAlignCenter, "Align center?"));
49
50 ////////////////////////////////////////////////////////////
51 // Setup the preview fieldset's LEGEND element...
52 D.append( P.e.previewLegend,
53 P.e.previewModeToggle,
54 '\u00a0',
55 P.e.previewCopyButton,
56 P.e.previewModeLabel,
57 P.e.markupAlignWrapper );
58
59 ////////////////////////////////////////////////////////////
60 // Setup clipboard-copy of markup/SVG...
61 F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
62 P.e.previewCopyButton.addEventListener('text-copied', D.flashOnce.eventHandler, false);
@@ -104,13 +101,13 @@
101 'Pikchr scripts may also be dragged/dropped from ',
102 'the local filesystem into the text area, but ',
103 'the auto-preview option does not apply to them.'
104 )
105 )
106 )/*.childNodes.forEach(function(ch){
107 ch.style.margin = "0 0.25em";
108 })*/;
109 D.append(P.e.uiControls, cbWrap);
110 P.predefinedPiks.forEach(function(script,ndx){
111 const opt = D.option(script.code ? script.code.trim() :'', script.name);
112 D.append(selectScript, opt);
113 if(!ndx) selectScript.selectedIndex = 0 /*timing/ordering workaround*/;
@@ -179,13 +176,13 @@
176 P.renderPreview()/*it's already rendered, but this gets all
177 labels/headers in sync.*/;
178 }
179 }/*F.onPageLoad()*/);
180
181 /* Shows or hides P.e.markupAlignWrapper */
182 const showMarkupAlignment = function(showIt){
183 P.e.markupAlignWrapper.classList[showIt ? 'remove' : 'add']('hidden');
184 };
185
186 /**
187 Updates the preview view based on the current preview mode and
188 error state.
@@ -201,35 +198,34 @@
198 this.e.previewModeLabel.innerText = "Error";
199 return;
200 }
201 D.removeClass(preTgt, 'error');
202 D.removeClass(P.e.previewCopyButton, 'disabled');
203 D.enable(this.e.previewModeToggle, this.e.markupAlignCenter);
204 let label;
205 switch(this.previewMode){
206 case 0:
207 label = "SVG";
208 showMarkupAlignment(false);
209 preTgt.innerHTML = this.response.raw;
210 this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
211 break;
212 case 1:
213 label = "Markdown";
214 showMarkupAlignment(true);
215 this.e.taPreviewText.value = [
216 '```pikchr'+(this.e.markupAlignCenter.checked? ' center' : ''),
 
217 this.response.inputText, '```'
218 ].join('\n');
219 D.append(D.clearElement(preTgt), this.e.taPreviewText);
220 break;
221 case 2:
222 label = "Fossil wiki";
223 showMarkupAlignment(true);
224 this.e.taPreviewText.value = [
225 '<verbatim type="pikchr',
226 this.e.markupAlignCenter.checked ? ' center' : '',
227 '">', this.response.inputText, '</verbatim>'
228 ].join('');
229 D.append(D.clearElement(preTgt), this.e.taPreviewText);
230 break;
231 case 3:
@@ -249,13 +245,13 @@
245 P.preview = function fp(){
246 if(!fp.hasOwnProperty('toDisable')){
247 fp.toDisable = [
248 /* input elements to disable during ajax operations */
249 this.e.btnSubmit, this.e.taContent,
 
250 this.e.cbAutoPreview, this.e.selectScript
251 /* handled separately: previewModeToggle, previewCopyButton,
252 markupAlignCenter */
253 ];
254 fp.target = this.e.previewTarget;
255 fp.updateView = function(c,isError){
256 P.previewMode = 0;
257 P.response.raw = c;
@@ -262,11 +258,11 @@
258 P.response.isError = isError;
259 D.enable(fp.toDisable);
260 P.renderPreview();
261 };
262 }
263 D.disable(fp.toDisable, this.e.previewModeToggle, this.e.markupAlignCenter);
264 D.addClass(this.e.previewCopyButton, 'disabled');
265 const content = this.e.taContent.value.trim();
266 this.response.raw = undefined;
267 this.response.inputText = content;
268 if(!content){
269
M src/pikchrshow.c
+11 -4
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -97,22 +97,29 @@
9797
 "align-items: center; flex-wrap: wrap;"
9898
 "}");
9999
 CX("#pikchrshow-controls > * {"
100100
 "display: inline; margin: 0 0.25em 0.5em 0;"
101101
 "}");
102
- CX("#pikchrshow-controls > .input-with-label > * {"
102
+ CX("#pikchrshow-output-wrapper label {"
103103
 "cursor: pointer;"
104
+ "}");
105
+ CX("body.pikchrshow .input-with-label > * {"
106
+ "margin: 0 0.2em; cursor: pointer;"
104107
 "}");
105108
 CX("#pikchrshow-output.dark-mode svg {"
106109
 /* Flip the colors to approximate a dark theme look */
107110
 "filter: invert(1) hue-rotate(180deg);"
108111
 "}");
109
- CX("#sbs-wrapper > fieldset {"
112
+ CX("#pikchrshow-output-wrapper {"
110113
 "padding: 0.25em 0.5em; border-radius: 0.25em;"
111114
 "}");
112
- CX("fieldset > legend > *,"
113
- "fieldset > legend > .copy-button"
115
+ CX("#pikchrshow-output-wrapper > legend {"
116
+ "display: flex; flex-direction: row;"
117
+ "align-items: center;"
118
+ "}");
119
+ CX("#pikchrshow-output-wrapper > legend > *,"
120
+ "#pikchrshow-output-wrapper > legend > .copy-button"
114121
 /* ^^^ better-match .copy-button selector required to override
115122
 default */
116123
 "{margin-right: 0.5em}");
117124
 CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
118125
 CX("</style>");
119126
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -97,22 +97,29 @@
97 "align-items: center; flex-wrap: wrap;"
98 "}");
99 CX("#pikchrshow-controls > * {"
100 "display: inline; margin: 0 0.25em 0.5em 0;"
101 "}");
102 CX("#pikchrshow-controls > .input-with-label > * {"
103 "cursor: pointer;"
 
 
 
104 "}");
105 CX("#pikchrshow-output.dark-mode svg {"
106 /* Flip the colors to approximate a dark theme look */
107 "filter: invert(1) hue-rotate(180deg);"
108 "}");
109 CX("#sbs-wrapper > fieldset {"
110 "padding: 0.25em 0.5em; border-radius: 0.25em;"
111 "}");
112 CX("fieldset > legend > *,"
113 "fieldset > legend > .copy-button"
 
 
 
 
114 /* ^^^ better-match .copy-button selector required to override
115 default */
116 "{margin-right: 0.5em}");
117 CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
118 CX("</style>");
119
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -97,22 +97,29 @@
97 "align-items: center; flex-wrap: wrap;"
98 "}");
99 CX("#pikchrshow-controls > * {"
100 "display: inline; margin: 0 0.25em 0.5em 0;"
101 "}");
102 CX("#pikchrshow-output-wrapper label {"
103 "cursor: pointer;"
104 "}");
105 CX("body.pikchrshow .input-with-label > * {"
106 "margin: 0 0.2em; cursor: pointer;"
107 "}");
108 CX("#pikchrshow-output.dark-mode svg {"
109 /* Flip the colors to approximate a dark theme look */
110 "filter: invert(1) hue-rotate(180deg);"
111 "}");
112 CX("#pikchrshow-output-wrapper {"
113 "padding: 0.25em 0.5em; border-radius: 0.25em;"
114 "}");
115 CX("#pikchrshow-output-wrapper > legend {"
116 "display: flex; flex-direction: row;"
117 "align-items: center;"
118 "}");
119 CX("#pikchrshow-output-wrapper > legend > *,"
120 "#pikchrshow-output-wrapper > legend > .copy-button"
121 /* ^^^ better-match .copy-button selector required to override
122 default */
123 "{margin-right: 0.5em}");
124 CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
125 CX("</style>");
126

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button