Fossil SCM
pikchrshow: when running under a skin with the white-foreground property, apply a CSS filter to the SVG to approximate a dark-theme look.
Commit
c7d88f275403fbaee779877380c861f52c65a0b803f301096ff311bfa478ff86
Parent
3c7f742639a3fdf…
1 file changed
+7
-1
+7
-1
| --- src/pikchrshow.c | ||
| +++ src/pikchrshow.c | ||
| @@ -48,13 +48,19 @@ | ||
| 48 | 48 | "#pikchrshow-output, #pikchrshow-form" |
| 49 | 49 | "{display: flex; flex-direction: column;}" |
| 50 | 50 | "#pikchrshow-form > * {margin: 0.25em 0;}" |
| 51 | 51 | "#pikchrshow-output {margin-top: 1em;}" |
| 52 | 52 | "</style>"); |
| 53 | + if( skin_detail_boolean("white-foreground") ){ | |
| 54 | + /* Flip the colors to approximate a dark theme look */ | |
| 55 | + CX("<style>#pikchrshow-output > svg {" | |
| 56 | + "filter: invert(1) hue-rotate(180deg);" | |
| 57 | + "}</style>"); | |
| 58 | + } | |
| 53 | 59 | CX("<form method='POST' id='pikchrshow-form' action=''>"); |
| 54 | 60 | CX("<div>Input pikchr code and tap SUBMIT to render it:</div>"); |
| 55 | - CX("<textarea name='content' rows='20' cols='80'>"); | |
| 61 | + CX("<textarea name='content' rows='15' cols='80'>"); | |
| 56 | 62 | CX("%s", zContent/*safe-for-%s*/); |
| 57 | 63 | CX("</textarea>"); |
| 58 | 64 | CX("<input type='submit'></input>"); |
| 59 | 65 | CX("</form>"); |
| 60 | 66 | CX("<div id='pikchrshow-output'>"); |
| 61 | 67 |
| --- src/pikchrshow.c | |
| +++ src/pikchrshow.c | |
| @@ -48,13 +48,19 @@ | |
| 48 | "#pikchrshow-output, #pikchrshow-form" |
| 49 | "{display: flex; flex-direction: column;}" |
| 50 | "#pikchrshow-form > * {margin: 0.25em 0;}" |
| 51 | "#pikchrshow-output {margin-top: 1em;}" |
| 52 | "</style>"); |
| 53 | CX("<form method='POST' id='pikchrshow-form' action=''>"); |
| 54 | CX("<div>Input pikchr code and tap SUBMIT to render it:</div>"); |
| 55 | CX("<textarea name='content' rows='20' cols='80'>"); |
| 56 | CX("%s", zContent/*safe-for-%s*/); |
| 57 | CX("</textarea>"); |
| 58 | CX("<input type='submit'></input>"); |
| 59 | CX("</form>"); |
| 60 | CX("<div id='pikchrshow-output'>"); |
| 61 |
| --- src/pikchrshow.c | |
| +++ src/pikchrshow.c | |
| @@ -48,13 +48,19 @@ | |
| 48 | "#pikchrshow-output, #pikchrshow-form" |
| 49 | "{display: flex; flex-direction: column;}" |
| 50 | "#pikchrshow-form > * {margin: 0.25em 0;}" |
| 51 | "#pikchrshow-output {margin-top: 1em;}" |
| 52 | "</style>"); |
| 53 | if( skin_detail_boolean("white-foreground") ){ |
| 54 | /* Flip the colors to approximate a dark theme look */ |
| 55 | CX("<style>#pikchrshow-output > svg {" |
| 56 | "filter: invert(1) hue-rotate(180deg);" |
| 57 | "}</style>"); |
| 58 | } |
| 59 | CX("<form method='POST' id='pikchrshow-form' action=''>"); |
| 60 | CX("<div>Input pikchr code and tap SUBMIT to render it:</div>"); |
| 61 | CX("<textarea name='content' rows='15' cols='80'>"); |
| 62 | CX("%s", zContent/*safe-for-%s*/); |
| 63 | CX("</textarea>"); |
| 64 | CX("<input type='submit'></input>"); |
| 65 | CX("</form>"); |
| 66 | CX("<div id='pikchrshow-output'>"); |
| 67 |