diff options
| -rw-r--r-- | docs/lab/index.html | 11 | ||||
| -rw-r--r-- | docs/lab/lab.css | 8 |
2 files changed, 15 insertions, 4 deletions
diff --git a/docs/lab/index.html b/docs/lab/index.html index 8a9ad5c7d..f98b9d531 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -49,6 +49,10 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) { <b>☀</b> <input type="checkbox" name="invert-colors"> </label> + <label title="Draw background behind samples"> + <b>■</b> + <input type="checkbox" name="draw-sample-bg"> + </label> </div> <label class="label-and-value"> @@ -1095,12 +1099,15 @@ function main() { }, {passive:false,capture:true}) vars.bind("invert-colors", (e, on) => { - if (defaultColorSceme == "dark") { + if (defaultColorSceme == "dark") on = !on - } document.documentElement.classList.toggle('color-scheme-dark', on) }) + vars.bind("draw-sample-bg", (e, on) => { + document.documentElement.classList.toggle('draw-sample-background', on) + }) + let spaaSelect = vars.bind('antialias', (e, v) => { switch (v) { case 'subpixel': { diff --git a/docs/lab/lab.css b/docs/lab/lab.css index a4f603b11..bf1ff3a0b 100644 --- a/docs/lab/lab.css +++ b/docs/lab/lab.css @@ -653,9 +653,10 @@ body.italic samples { } sample { flex: 1 1 50%; - margin: 0; + /*margin: 0;*/ /*white-space: pre;*/ - padding: 2rem; + margin: calc(0.5em + 1rem); + padding: 0; min-width:100px; /*max-width:450px;*/ white-space: pre-wrap; @@ -663,6 +664,9 @@ body.italic samples { overflow-wrap: break-word; color: var(--fgColor); } + :root.draw-sample-background sample { + background: var(--surface2-color-bg-active); + } /*body.secondarySampleDisabled sample { flex-basis: auto; }*/ sample p { white-space: pre-wrap; |