95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
-
+
+
+
+
-
+
+
+
+
+
-
-
+
+
|
CX("#pikchrshow-controls {" /* where the buttons live */
"display: flex; flex-direction: row; "
"align-items: center; flex-wrap: wrap;"
"}");
CX("#pikchrshow-controls > * {"
"display: inline; margin: 0 0.25em 0.5em 0;"
"}");
CX("#pikchrshow-controls > .input-with-label > * {"
CX("#pikchrshow-output-wrapper label {"
"cursor: pointer;"
"}");
CX("body.pikchrshow .input-with-label > * {"
"margin: 0 0.2em; cursor: pointer;"
"}");
CX("#pikchrshow-output.dark-mode svg {"
/* Flip the colors to approximate a dark theme look */
"filter: invert(1) hue-rotate(180deg);"
"}");
CX("#sbs-wrapper > fieldset {"
CX("#pikchrshow-output-wrapper {"
"padding: 0.25em 0.5em; border-radius: 0.25em;"
"}");
CX("#pikchrshow-output-wrapper > legend {"
"display: flex; flex-direction: row;"
"align-items: center;"
"}");
CX("fieldset > legend > *,"
"fieldset > legend > .copy-button"
CX("#pikchrshow-output-wrapper > legend > *,"
"#pikchrshow-output-wrapper > legend > .copy-button"
/* ^^^ better-match .copy-button selector required to override
default */
"{margin-right: 0.5em}");
CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
CX("</style>");
CX("<div>Input pikchr code and tap Preview to render it:</div>");
CX("<div id='sbs-wrapper'>");
|