99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
-
+
+
+
+
|
CX("#pikchrshow-controls > * {"
"display: inline; margin: 0 0.25em 0.5em 0;"
"}\n");
CX("#pikchrshow-output-wrapper label {"
"cursor: pointer;"
"}\n");
CX("body.pikchrshow .input-with-label > * {"
"margin: 0 0.2em; cursor: pointer;"
"margin: 0 0.2em;"
"}\n");
CX("body.pikchrshow .input-with-label > label {"
"cursor: pointer;"
"}\n");
CX("#pikchrshow-output.dark-mode svg {"
/* Flip the colors to approximate a dark theme look */
"filter: invert(1) hue-rotate(180deg);"
"}\n");
CX("#pikchrshow-output-wrapper {"
"padding: 0.25em 0.5em; border-radius: 0.25em;"
|
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
-
+
-
|
"Dark mode?",
"1", isDark, 0);
CX("</div>"/*#pikchrshow-controls*/);
CX("</div>"/*#pikchrshow-form*/);
CX("<fieldset id='pikchrshow-output-wrapper'>");
CX("<legend></legend>"
/* Reminder: Firefox does not properly flexbox a LEGEND element,
always flowing it in column mode (at least when its fieldset
always flowing it in column mode. */);
has a flexbox column layout). */);
CX("<div id='pikchrshow-output'>");
if(*zContent){
int w = 0, h = 0;
char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
if( w>0 && h>0 ){
const char *zNonce = safe_html_nonce(1);
CX("%s<div style='max-width:%dpx;'>\n%s</div>%s",
|