diff options
| author | Rasmus Andersson <rasmus@notion.se> | 2021-04-01 00:52:41 +0300 |
|---|---|---|
| committer | Rasmus Andersson <rasmus@notion.se> | 2021-04-01 00:52:41 +0300 |
| commit | ca3853ece4a917e900e55a346a6489151e4b5472 (patch) | |
| tree | 1eb85e1b3a5edfc4a9ed8a9fcbbf16202f1a71ff /docs | |
| parent | b80228e35d9c07c4c4e6b2b49aa556c204f986e3 (diff) | |
| download | inter-ca3853ece4a917e900e55a346a6489151e4b5472.tar.xz | |
web: lab: improves viz for draw-sample-background
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/lab/index.html | 2 | ||||
| -rw-r--r-- | docs/lab/lab.css | 11 |
2 files changed, 12 insertions, 1 deletions
diff --git a/docs/lab/index.html b/docs/lab/index.html index f98b9d531..c964e57bb 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -696,6 +696,7 @@ function main() { const r = measureDiv.getBoundingClientRect() measurePending = false lineHeightInput.placeholder = r.height + document.documentElement.style.setProperty("--line-height", r.height + "px") } window.addEventListener('load', measure) @@ -799,6 +800,7 @@ function main() { sizeVar = vars.bind('size', (e, v, isInitial) => { boxes.style.display = (v > 20) ? 'none' : null setCSSProp('font-size', v + 'px') + document.documentElement.style.setProperty("--font-size", v + "px") setGlyphlistClass('hideNames', v < 36) if (varSizeRange && !varSizeSettingValueImpl) { varSizeSettingValueImpl = true diff --git a/docs/lab/lab.css b/docs/lab/lab.css index bf1ff3a0b..2c22a0346 100644 --- a/docs/lab/lab.css +++ b/docs/lab/lab.css @@ -79,6 +79,9 @@ --surface2-shadow-intensity-hover: 0.75; --surface2-shadow-intensity-active: 1.5; + --highlight-bg: #ddd; + --guide-color: rgba(255,0,255,0.15); + --icon-minimize: url(../res/icons/minimize-black.svg); --icon-popup: url(../res/icons/popup-black.svg); --icon-reset: url(../res/icons/reset-black.svg); @@ -110,6 +113,9 @@ --surface2-shadow-intensity-hover: 4; --surface2-shadow-intensity-active: 10; + --highlight-bg: #333; + --guide-color: rgba(255,100,255,0.15); + --icon-minimize: url(../res/icons/minimize.svg); --icon-popup: url(../res/icons/popup.svg); --icon-reset: url(../res/icons/reset.svg); @@ -665,7 +671,10 @@ body.italic samples { color: var(--fgColor); } :root.draw-sample-background sample { - background: var(--surface2-color-bg-active); + background: var(--highlight-bg); + --guide-width: calc(calc(var(--line-height) - var(--font-size)) / 2); + box-shadow: inset 0 var(--guide-width) 0 0 var(--guide-color), + inset 0 calc(var(--guide-width) * -1) 0 0 var(--guide-color); } /*body.secondarySampleDisabled sample { flex-basis: auto; }*/ sample p { |