rsms/inter
1
1
Fork 0
mirror of https://github.com/rsms/inter.git synced 2025-01-07 16:59:08 +03:00
Code Issues Projects Releases Wiki Activity

web: lab: improves viz for draw-sample-background

Browse Source
This commit is contained in:
Rasmus Andersson 2021-03-31 14:52:41 -07:00
parent b80228e35d
commit ca3853ece4
2 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/lab/index.html
View File

@ -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

11
docs/lab/lab.css
View File

@ -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 {