archive/inter-font
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: lab: adds draw-sample-background option

Browse source
This commit is contained in:
Rasmus Andersson 2021-03-31 14:34:11 -07:00
parent 9b8f3f1b5a
commit b80228e35d
2 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
docs/lab/index.html
View file

@ -49,6 +49,10 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
<b>☀</b> <b>☀</b>
<input type="checkbox" name="invert-colors"> <input type="checkbox" name="invert-colors">
</label> </label>
<label title="Draw background behind samples">
<b>■</b>
<input type="checkbox" name="draw-sample-bg">
</label>
</div> </div>
<label class="label-and-value"> <label class="label-and-value">
@ -1095,12 +1099,15 @@ function main() {
}, {passive:false,capture:true}) }, {passive:false,capture:true})
vars.bind("invert-colors", (e, on) => { vars.bind("invert-colors", (e, on) => {
if (defaultColorSceme == "dark") { if (defaultColorSceme == "dark")
on = !on on = !on
}
document.documentElement.classList.toggle('color-scheme-dark', 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) => { let spaaSelect = vars.bind('antialias', (e, v) => {
switch (v) { switch (v) {
case 'subpixel': { case 'subpixel': {

8
docs/lab/lab.css
View file

@ -653,9 +653,10 @@ body.italic samples {
} }
sample { sample {
flex: 1 1 50%; flex: 1 1 50%;
margin: 0; /*margin: 0;*/
/*white-space: pre;*/ /*white-space: pre;*/
padding: 2rem; margin: calc(0.5em + 1rem);
padding: 0;
min-width:100px; min-width:100px;
/*max-width:450px;*/ /*max-width:450px;*/
white-space: pre-wrap; white-space: pre-wrap;
@ -663,6 +664,9 @@ body.italic samples {
overflow-wrap: break-word; overflow-wrap: break-word;
color: var(--fgColor); color: var(--fgColor);
} }
:root.draw-sample-background sample {
background: var(--surface2-color-bg-active);
}
/*body.secondarySampleDisabled sample { flex-basis: auto; }*/ /*body.secondarySampleDisabled sample { flex-basis: auto; }*/
sample p { sample p {
white-space: pre-wrap; white-space: pre-wrap;