- - - Italic +

Variable - - -

- Variable axes: - - Weight: - - + + + Italic - - Slant: - - + + + ☀

Size: + - dp + + + + + + Weight: + + + + + + Slant: + + + + + + Weight: + @@ -1627,20 +1658,14 @@ document.head.appendChild(fontCSS) Letter spacing: - %

+ %

Line height: - dp

+ dp

@@ -1651,7 +1676,6 @@ document.head.appendChild(fontCSS) - @@ -1665,49 +1689,7 @@ document.head.appendChild(fontCSS) - - - - -

Display

+ Anti-alias: @@ -1727,8 +1709,6 @@ document.head.appendChild(fontCSS) - Inverted colors -

Features

@@ -1747,6 +1727,7 @@ document.head.appendChild(fontCSS) ss01 (Open Digits) ss02 (Disambiguation) ss03 (Curved r) + ss04 (Disambiguation w/o zero) cv01 (Alternate one) cv02 (Open four) cv03 (Open six) @@ -1763,8 +1744,6 @@ document.head.appendChild(fontCSS)

Default-on features: Disable calt (Contextual alternates) - - Disable rlig (Required ligatures) Disable kern (Kerning)

@@ -1805,7 +1784,6 @@ function InterDynamicTracking(fontSize) { return a + b * Math.pow(Math.E, c * fontSize) } - // provide hinted=1 to use TTF hinted fonts. // not exposed in UI as it only works when serving the site locally // with fonts in the build/fonts directory. @@ -1817,6 +1795,87 @@ if (hinted) { } document.body.style.fontFamily = familyName + +function parseQueryString(qs) { + return new Map( + qs.replace(/^\?+/g,'') + .split('&') + .filter(s => s.trim()) + .map(s => s.split('=').map(decodeURIComponent)) + ) +} + + +function fmtQueryString(mapLikeIterable) { + let pairs = [] + for (let kv of mapLikeIterable) { + let k = kv[0] + let v = kv[1] + if (v === undefined) { + pairs.push(encodeURIComponent(k)) + } else { + v = (v === true) ? 1 : (v === false || v === null) ? 0 : v + pairs.push(encodeURIComponent(k) + '=' + encodeURIComponent(v)) + } + } + return pairs.sort().join('&') +} + + +function setCurrentQueryString(queryString) { + replaceURL(() => { + if (typeof queryString == "function") { + queryString = queryString() + } + return document.location.pathname + (queryString ? "?" + queryString : "") + }) +} + + +function setCurrentQueryStringParam(key, value, zeroValue) { + setCurrentQueryString(() => { + let qs = parseQueryString(document.location.search) + if (value === undefined || value === zeroValue) { + qs.delete(key) + } else { + qs.set(key, value) + } + return fmtQueryString(qs) + }) +} + + +// replaceURL(url :string|Function, title? :string, meta? :any) +var replaceURL = (()=>{ + // We employ some backoff on calling history.replaceState as + // Chrome will start to throttle (meaning ignoring) calls to + // history.replaceState if the frequency gets too high. + // Safari 13 provides a budget of 200 replaceState calls in a 30 second sliding time window. + // Chrome instead uses an IPC message flooding prevention (https://crbug.com/882238) + + let timer = null + let queued = null // {url, title, meta} when queued, null when not + + function flush() { + if (queued) { + let url = typeof queued.url == "function" ? queued.url() : queued.url + history.replaceState(queued.meta, queued.title, url) + queued = null + } + clearTimeout(timer) + timer = null + } + + return function replaceURL(url, title, meta) { + queued = { url, title, meta } + if (timer === null) { + flush() + timer = setTimeout(flush, 200) + } + } +})() + + class BoundVar { constructor(name, e, valueGetter, valueSetter, parentVars) { this.name = name @@ -1824,11 +1883,12 @@ class BoundVar { this.valueGetter = valueGetter this.valueSetter = valueSetter this.isCheckbox = (e.type == 'checkbox') - this.isNumber = e.type == 'number' + this.isNumber = e.type == 'number' || e.type == 'range' this.lastValue = this.getValue() this.parentVars = parentVars this.defaultValue = this.lastValue this._changeCallbacks = [] + this._isInitialSetValue = true } refreshValue(ev) { @@ -1868,7 +1928,9 @@ class BoundVar { } if (this.valueSetter) { - const v = this.valueSetter(this.e, value) + let isInitial = this._isInitialSetValue + this._isInitialSetValue = false + const v = this.valueSetter(this.e, value, isInitial) if (v !== undefined) { value = v } @@ -1876,13 +1938,11 @@ class BoundVar { if (this.isCheckbox) { this.e.checked = !!value - } else if (this.isNumber && typeof value == 'number') { + } else if (this.isNumber && typeof value == 'number' && 'valueAsNumber' in this.e) { if (isNaN(value)) { this.e.value = null - } else { - if (this.e.valueAsNumber != value) { - this.e.valueAsNumber = value - } + } else if (this.e.valueAsNumber != value) { + this.e.valueAsNumber = value } } else if (this.e.value != value) { this.e.value = value @@ -1898,15 +1958,10 @@ class BoundVar { class Vars { constructor(queryString) { - this.values = new Map( - queryString.replace(/^\?+/g,'') - .split('&') - .filter(s => s.trim()) - .map(s => s.split('=').map(decodeURIComponent)) - ) + this.values = parseQueryString(queryString) this.vars = new Map() - this._historyReplaceStateTimer = null - this._needsHistoryReplaceState = false + // this._historyReplaceStateTimer = null + // this._needsHistoryReplaceState = false } getValue(name) { @@ -1932,30 +1987,33 @@ class Vars { } else { this.values.set(name, value) } - this._setNeedsHistoryReplaceState() - } - - _performHistoryReplaceState() { - history.replaceState({} , '', '?' + this.getQueryString()) - this._needsHistoryReplaceState = false + setCurrentQueryString(() => this.getQueryString()) } - _setNeedsHistoryReplaceState() { - // We employ some backoff on calling history.replaceState as - // Chrome will start to throttle (meaning ignoring) calls to - // history.replaceState if the frequency gets too high. - if (this._historyReplaceStateTimer === null) { - this._performHistoryReplaceState() - this._historyReplaceStateTimer = setTimeout(() => { - this._historyReplaceStateTimer = null - if (this._needsHistoryReplaceState) { - this._performHistoryReplaceState() - } - }, 200) - } else { - this._needsHistoryReplaceState = true - } - } + // _performHistoryReplaceState() { + // // let qs = mergeQueryString(document.location.search, this.getQueryString()) + // setCurrentQueryString(this.getQueryString()) + // this._needsHistoryReplaceState = false + // } + + // setNeedsHistoryReplaceState() { + // // We employ some backoff on calling history.replaceState as + // // Chrome will start to throttle (meaning ignoring) calls to + // // history.replaceState if the frequency gets too high. + // // Safari 13 provides a budget of 200 replaceState calls in a 30 second sliding time window. + // // Chrome instead uses an IPC message flooding prevention (https://crbug.com/882238) + // if (this._historyReplaceStateTimer === null) { + // this._performHistoryReplaceState() + // this._historyReplaceStateTimer = setTimeout(() => { + // this._historyReplaceStateTimer = null + // if (this._needsHistoryReplaceState) { + // this._performHistoryReplaceState() + // } + // }, 200) + // } else { + // this._needsHistoryReplaceState = true + // } + // } refreshValue(name) { let v = this.vars.get(name) @@ -1969,24 +2027,25 @@ class Vars { } getQueryString() { - let pairs = [] - this.values.forEach((v, k) => { - let vr = this.vars.get(k) - if (vr && vr.defaultValue == v) { - return // skip + let qs = parseQueryString(document.location.search) + // patch qs: set or remove any attributes that are registered in this.values + for (let e of this.vars) { + let k = e[0], vr = e[1], v = this.values.get(k) + if (v === undefined || vr.defaultValue == v || k[0] == '_') { + qs.delete(k) + } else { + qs.set(k, v) } - v = (v === true) ? 1 : (v === false || v === null) ? 0 : v - pairs.push(encodeURIComponent(k) + '=' + encodeURIComponent(v)) - }) - return pairs.join('&') + } + return fmtQueryString(qs) } // bind(name :string, // sel :Element|string, - // valueSetter? :(e:Element, value:any)=>void, + // valueSetter? :(e:Element, value:any, isInitial:bool)=>void, // valueGetter? :(e:Element)=>any) // bind(name :string, - // valueSetter? :(e:Element, value:any)=>void, + // valueSetter? :(e:Element, value:any, isInitial:bool)=>void, // valueGetter? :(e:Element, prevValue:any, ev?:Event)=>any) bind(name, sel, valueSetter, valueGetter) { if (typeof sel == 'function' || sel === undefined) { @@ -2006,7 +2065,11 @@ class Vars { return } switch (ev.key) { + case 'ArrowRight': case 'ArrowUp': { + if (ev.key == 'ArrowRight' && e.type != "range") { + return + } if (ev.altKey) { ev.target.valueAsNumber *= 2 } else { @@ -2017,7 +2080,11 @@ class Vars { this._refreshValue(v, ev) break } + case 'ArrowLeft': case 'ArrowDown': { + if (ev.key == 'ArrowLeft' && e.type != "range") { + return + } if (ev.altKey) { ev.target.valueAsNumber /= 2 } else { @@ -2055,6 +2122,17 @@ class Vars { } +// function mergeQueryString(a, b) { +// a = a.replace(/^[\?\&]+/, "").split('&').sort().map(v => v.split('=')) +// b = b.replace(/^[\?\&]+/, "").split('&').sort().map(v => v.split('=')) +// let s = new Map(a) +// for (let kv of b) { +// s.set(kv[0], kv[1]) +// } +// return Array.from(s).map(kv => kv[1] ? kv.join('=') : kv[0]).join('&') +// } + + function main() { const vars = new Vars(document.location.search) @@ -2073,6 +2151,28 @@ function main() { const repertoireControl = $('.repertoireControl') const samplesElement = $('samples') + const boxes = $('boxes') + + let shiftKeyPressed = false + const checkKeys = ev => { + shiftKeyPressed = ev.shiftKey + } + window.addEventListener('keydown', checkKeys) + window.addEventListener('keyup', checkKeys) + + + // sidebar show/hide + const sidebarButton = $("#sidebar-button") + let sidebarMinimized = false + function setSidebarMinimized(minimized) { + sidebarMinimized = minimized + document.body.classList.toggle("sidebar-minimized", sidebarMinimized) + setCurrentQueryStringParam("nosidebar", sidebarMinimized ? 1 : undefined) + sidebarButton.title = sidebarMinimized ? "Show controls" : "Hide controls" + } + sidebarButton.onclick = () => setSidebarMinimized(!sidebarMinimized) + setSidebarMinimized(document.location.search.indexOf('nosidebar') != -1) + // setInterval(()=>{ setSidebarMinimized(!sidebarMinimized) },2000) // filter paste to match style $$('[contenteditable]').forEach(el => { @@ -2083,8 +2183,6 @@ function main() { }, {capture:true,passive:false}) }) - let sizeVar = null - // prevent clicks on img-button from changing focus $$('.img-button').forEach(el => { el.addEventListener('pointerdown', ev => { @@ -2216,13 +2314,30 @@ function main() { } }) - const boxes = $('boxes') - sizeVar = vars.bind('size', (e, v) => { + var sizeVar, varSizeRange + var varSizeSettingValueImpl = false + + sizeVar = vars.bind('size', (e, v, isInitial) => { boxes.style.display = (v > 20) ? 'none' : null setCSSProp('font-size', v + 'px') setGlyphlistClass('hideNames', v < 36) + if (varSizeRange && !varSizeSettingValueImpl) { + varSizeSettingValueImpl = true + varSizeRange.setValue(v) + varSizeSettingValueImpl = false + } return v }) + varSizeRange = vars.bind('_sizeRange', (e, v, isInitial) => { + if (isInitial) { + return sizeVar.getValue() + } else if (!varSizeSettingValueImpl) { + varSizeSettingValueImpl = true + vars.setValue("size", v) + varSizeSettingValueImpl = false + } + }) + let usingVarFont = false var varWeightRange, varSlantRange @@ -2230,7 +2345,7 @@ function main() { var varSlantSettingValueImpl = false let currentBodyWeightClass = null - vars.bind('weight', (e, v) => { + let varWeight = vars.bind('weight', (e, v) => { setCSSProp('font-weight', v) if (currentBodyWeightClass) { document.body.classList.remove(currentBodyWeightClass) @@ -2272,15 +2387,29 @@ function main() { } } - vars.bind('varfont', (e, on) => { + vars.bind('varfont', (e, on, isInitial) => { usingVarFont = on - document.body.classList[on ? 'add' : 'remove']('varfont') + document.body.classList.toggle('varfont', on) if (on) { + if (!isInitial) { + // copy value of const weight to var weight + let w = parseInt(varWeight.getValue()) + if (!isNaN(w) && varWeightRange && !varWeightSettingValueImpl) { + varWeightRange.setValue(w) + } + } document.body.style.fontFamily = ( hinted ? fontFamilyNameVarHinted : fontFamilyNameVar ) } else { + if (!isInitial && varWeightRange) { + // copy value of var weight to const weight + let w = varWeightRange.getValue() + if (!isNaN(w)) { + vars.setValue("weight", Math.round(w / 100) * 100) + } + } document.body.style.fontFamily = ( hinted ? fontFamilyNameHinted : fontFamilyName @@ -2311,7 +2440,11 @@ function main() { if (prevValue === undefined) { return 400 } - return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value + v = e.valueAsNumber + if (shiftKeyPressed) { + v = Math.round(v / 100) * 100 + } + return v }) varSlantRange = vars.bind('varSlant', (e, v) => { @@ -2370,7 +2503,11 @@ function main() { return v } + let resetLineHeightButton = $('.reset-line-height') + let resetLetterSpacingButton = $('.reset-letter-spacing') + let letterSpacingVar = vars.bind('letterSpacing', (e, v) => { + resetLetterSpacingButton.classList.toggle("disabled", !v) if (!v) { v = updateImplicitLetterSpacing(e, sizeVar.getValue()) } @@ -2392,7 +2529,7 @@ function main() { } }) - $('.reset-letter-spacing').addEventListener('click', ev => { + resetLetterSpacingButton.addEventListener('click', ev => { vars.setValue('letterSpacing', '') ev.stopPropagation() ev.preventDefault() @@ -2401,6 +2538,7 @@ function main() { vars.bind('lineHeight', lineHeightInput, (e, v) => { setCSSProp('line-height', v ? v + 'px' : null) + resetLineHeightButton.classList.toggle("disabled", !v) }, (e, prevValue, ev) => { if (ev && !ev.inputType && !prevValue) { // step increment/decrement @@ -2413,14 +2551,17 @@ function main() { return e.value || "" }) - $('.reset-line-height').addEventListener('click', ev => { + resetLineHeightButton.addEventListener('click', ev => { vars.setValue('lineHeight', '') ev.stopPropagation() ev.preventDefault() }, {passive:false,capture:true}) - vars.bind('display-invert-colors', (e, on) => { - document.body.classList[on ? 'add' : 'remove']('inverted-colors') + vars.bind("invert-colors", (e, on) => { + if (defaultColorSceme == "dark") { + on = !on + } + document.documentElement.classList.toggle('color-scheme-dark', on) }) let spaaSelect = vars.bind('antialias', (e, v) => { diff --git a/docs/lab/lab.css b/docs/lab/lab.css index beb8dc306..3e9b3c027 100644 --- a/docs/lab/lab.css +++ b/docs/lab/lab.css @@ -1,26 +1,125 @@ :root { + /* 1 pixel */ + --displayScale: 1; + --pixel: 1px; + --fieldHeight: 24px; + --sidebarWidth: 275px; + --sidebarButtonSize: 24px; + --sidebarWidthToButtonSizeScale: 0.0872; /* 24/275 */ + + --font-family: Inter; +} +@supports (font-variation-settings: normal) { + :root { --font-family: 'Inter var'; } +} +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), + only screen and (min-device-pixel-ratio: 1.5), + only screen and (min-resolution: 1.5dppx) { :root { + --displayScale: 2; + --pixel: 0.5px; +}} +@media only screen and (-webkit-min-device-pixel-ratio: 2.5), + only screen and (min-device-pixel-ratio: 2.5), + only screen and (min-resolution: 2.5dppx) { :root { + --displayScale: 3; + --pixel: 0.34px; +}} +@media only screen and (-webkit-min-device-pixel-ratio: 3.5), + only screen and (min-device-pixel-ratio: 3.5), + only screen and (min-resolution: 3.5dppx) { :root { + --displayScale: 4; + --pixel: 0.25px; +}} - /* P3 wide gamut colors */ +/* basic color ————————————————————————————————————————————————————————————————————————————— */ +/* sRGB colors */ +:root { + --red: #F03009; + --yellow: #FFE310; + --blue: rgb(3, 102, 214); +} +/* P3 wide gamut colors */ +@supports (color: color(display-p3 1 1 1)) { :root { --red: color(display-p3 0.94 0.19 0.04); --yellow: color(display-p3 1 0.87 0.05); - --blue: rgb(3, 102, 214); +}} + +/* color scheme ———————————————————————————————————————————————————————————————————————————— */ +:root { + /* signal that this document supports both light and dark color schemes */ + color-scheme: light dark; + + /* Light color scheme */ + --bgColor: white; + --fgColor: black; + --fgColorDimmed: rgba(0,0,0,0.4); + + --input-color-bg: white; + --input-color-focus: black; + --input-slider-color-bg: rgba(0,0,0,0.2); + --input-slider-color-fg: var(--fgColor); + --input-slider-color-focus: rgb(0, 130, 255); + --input-slider-knob-size: 8px; + --input-slider-track-size: 6px; + --input-slider-track-hit-size: 12px; + + --surface1-color-bg: #f4f4f4; + --surface1-color-fg: #222; + + --surface2-color-bg: white; + --surface2-color-fg: #222; + --surface2-color-bg-hover: var(--surface2-color-bg); + --surface2-color-bg-active: #ddd; + --surface2-shadow-intensity: 0.5; + --surface2-shadow-intensity-hover: 0.75; + --surface2-shadow-intensity-active: 1.5; + + --icon-minimize: url(../res/icons/minimize-black.svg); + --icon-popup: url(../res/icons/popup-black.svg); + --icon-reset: url(../res/icons/reset-black.svg); + --icon-settings: url(../res/icons/settings-black.svg); } -@supports not (color: color(display-p3 1 1 1)) { - /* sRGB colors */ - :root { - --red: #F03009; - --yellow: #FFE310; - } + +:root.color-scheme-dark { + /* Dark color scheme */ + --bgColor: #090909; + --fgColor: #fff; + --fgColorDimmed: rgba(255,255,255,0.4); + + --input-color-bg: #2c2c2c; + --input-color-focus: rgba(255,255,255,0.7); + --input-slider-color-bg: rgba(255,255,255,0.2); + --input-slider-color-fg: var(--fgColor); + + --surface1-color-bg: #1b1b1b; + --surface1-color-fg: #aaa; + + --surface2-color-bg: #333; + --surface2-color-fg: white; + --surface2-color-bg-hover: #444; + --surface2-color-bg-active: #666; + --surface2-shadow-intensity: 4; + --surface2-shadow-intensity-hover: 4; + --surface2-shadow-intensity-active: 10; + + --icon-minimize: url(../res/icons/minimize.svg); + --icon-popup: url(../res/icons/popup.svg); + --icon-reset: url(../res/icons/reset.svg); + --icon-settings: url(../res/icons/settings.svg); } +/* document ———————————————————————————————————————————————————————————————————————————— */ + * { margin:0; padding:0; font-synthesis: none; } -html { } body { - background-color: white; - color:#111; - font:11px serif; + --fgColorMax: var(--fgColor); + background-color: var(--bgColor); + color: var(--fgColor); + font: 11px var(--font-family), sans-serif; font-weight:400; /*300=light, 400=regular, 500=medium, 600=semibold*/ + transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1); + transition-property: color, background; } .robotoFont { font-family: "Roboto", serif; @@ -40,7 +139,6 @@ a { border-radius:5px; } a:hover { color:#30C2FF; } - p { padding: 24px; padding-top:12px; @@ -50,9 +148,12 @@ h2 { margin: 42px 18px 0 18px; padding: 6px; } - i, cite, em, var, address, dfn { - font-style: oblique; + font-style: italic; +} +body.varfont i, body.varfont cite, body.varfont em, body.varfont var, +body.varfont address, body.varfont dfn { + font-style: oblique -10deg; } label { @@ -67,46 +168,228 @@ input[type="number"] { border: none; padding: 4px; border-radius: 2px; - background: white; + background: var(--input-color-bg); } select { + font:inherit; + line-height:16px; height: var(--fieldHeight); box-sizing: border-box; -webkit-appearance: none; border: none; padding: 4px 18px 4px 4px; border-radius: 2px; - background: white; - background-image: url(../res/icons/popup-black.svg); + background: var(--input-color-bg); + background-image: var(--icon-popup); background-repeat: no-repeat; background-position: right center; } +/* fix for Firefox issue:; */ +select option { font-family:var(--font-family),Inter; } input[type="number"]:focus, input[type="text"]:focus, select:focus { outline: none; - box-shadow: 0 0 0 2px black; + box-shadow: 0 0 0 2px var(--input-color-focus); +} + +input[type=range]::-moz-focus-outer { + border: 0; +} + +/* range slider ———————————————————————————————————————————————————————————————————————————— */ + +input[type=range] { + -webkit-appearance: none; + width: 100%; + background: transparent; + cursor: default; +} +input[type=range]:focus { + outline: none; +} + +input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + border: 0; + height: var(--input-slider-knob-size); + width: var(--input-slider-knob-size); + border-radius: var(--input-slider-knob-size); + background: var(--input-slider-color-fg); + box-shadow: 0 0 0 2px var(--surface1-color-bg); + margin-top: calc(calc(var(--input-slider-knob-size) - var(--input-slider-track-size)) / -2); +} +input[type=range]::-moz-range-thumb { + border: 0; + height: var(--input-slider-knob-size); + width: var(--input-slider-knob-size); + border-radius: var(--input-slider-knob-size); + background: var(--input-slider-color-fg); + box-shadow: 0 0 0 2px var(--surface1-color-bg); + margin-top: calc(calc(var(--input-slider-knob-size) - var(--input-slider-track-size)) / -2); +} + + +input[type=range]::-webkit-slider-runnable-track { + /* Note: hit testing is done on this element so we make it large enough + to easily hit with --input-slider-track-hit-size and a border that matches the + background color. This is not portable, unfortunately. */ + box-sizing: border-box; + width: 100%; + height: var(--input-slider-track-hit-size); + background: var(--input-slider-color-bg); + border-radius: var(--input-slider-track-size); + --border-w: calc(calc(var(--input-slider-track-hit-size) - var(--input-slider-track-size)) / 2); + border: var(--border-w) solid var(--surface1-color-bg); +} +input[type=range]::-moz-range-track { + box-sizing: border-box; + width: 100%; + height: var(--input-slider-track-hit-size); + background: var(--input-slider-color-bg); + border-radius: var(--input-slider-track-size); + --border-w: calc(calc(var(--input-slider-track-hit-size) - var(--input-slider-track-size)) / 2); + border: var(--border-w) solid var(--surface1-color-bg); +} + +/*input[type=range]:focus::-webkit-slider-thumb { background-color: var(--blue) } +input[type=range]:focus::-moz-range-thumb { background-color: var(--blue) }*/ + +input[type=range]:focus::-webkit-slider-runnable-track { + box-shadow: 0 0 0 1px var(--input-color-focus); +} +input[type=range]:focus::-moz-range-track { + box-shadow: 0 0 0 1px var(--input-color-focus); } +/* TODO: MS Edge +input[type=range]::-ms-thumb { + height: var(--input-slider-knob-size); + width: var(--input-slider-knob-size); + border-radius: var(--input-slider-knob-size); + background: var(--input-slider-color-fg); + box-shadow: 0 0 0 2px var(--surface1-color-bg); + margin-top: calc(calc(var(--input-slider-knob-size) - var(--input-slider-track-size)) / -2); +} +input[type=range]::-ms-track { + width: 100%; + height: 8.4px; + background: transparent; + border-color: transparent; + border-width: 16px 0; + color: transparent; +} +input[type=range]::-ms-fill-lower { + background: #2a6495; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +input[type=range]:focus::-ms-fill-lower { + background: #3071a9; +} +input[type=range]::-ms-fill-upper { + background: #3071a9; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +input[type=range]:focus::-ms-fill-upper { + background: #367ebd; +}*/ + + +/* ———————————————————————————————————————————————————————————————————————————— */ + + +/* minimized sidebar button */ +#sidebar-button { + --iconSize: 16px; + position: fixed; + z-index: 2; + bottom: 16px; + right: 16px; + opacity: 0.8; + transform-origin:100% 100%; + transform: scale(calc(1 / var(--displayScale))); + width: calc(var(--sidebarButtonSize) * var(--displayScale)); + height: calc(var(--sidebarButtonSize) * var(--displayScale)); + border-radius: calc(var(--sidebarButtonSize) * var(--displayScale)); + color: var(--surface2-color-fg); + background-color: var(--surface2-color-bg); + background-image: var(--icon-minimize); + background-repeat: no-repeat; + background-position: center center; + background-size: calc(var(--iconSize) * var(--displayScale)); + --shadowIntensity: var(--surface2-shadow-intensity); + --shadowA1: calc(var(--shadowIntensity) * 0.1); + --shadowA2: calc(var(--shadowIntensity) * 0.2); + box-shadow: + 0 0 0 calc(1px * var(--displayScale)) rgba(0,0,0,var(--shadowA1)) , + 0 calc(1px * var(--displayScale)) calc(1px * var(--displayScale)) rgba(0,0,0,var(--shadowA1)) , + 0 calc(2px * var(--displayScale)) calc(3px * var(--displayScale)) rgba(0,0,0,var(--shadowA1)) , + 0 calc(2px * var(--displayScale)) calc(6px * var(--displayScale)) rgba(0,0,0,var(--shadowA2)) ; + user-select: none; cursor: default; + transition: box-shadow 84ms cubic-bezier(0.17, 0.65, 0.48, 1); +} +#sidebar-button:hover { + opacity:1; + --shadowIntensity: var(--surface2-shadow-intensity-hover); + background-color: var(--surface2-color-bg-hover); +} +#sidebar-button:active { + opacity: 1; + --shadowIntensity: var(--surface2-shadow-intensity-active); + background-color: var(--surface2-color-bg-active); +} +body.sidebar-minimized #sidebar-button { + background-image: var(--icon-settings); +} + +/* the sidebar */ .options { - width: 275px; + --rowBottomMargin: 6px; + --bgColor: var(--surface1-color-bg); + --fgColor: var(--surface1-color-fg); + color: var(--fgColor); + width: var(--sidebarWidth); box-sizing:border-box; position:fixed; top:0; right:0; bottom:0; - background:#f4f4f4; + background: var(--bgColor); padding: 24px; user-select:none; -moz-user-select: none; -webkit-user-select:none; font-family: sans-serif !important; overflow: auto; letter-spacing:0.012em; + transform-origin:100% 0%; + transform: scale(1, 1); + border: 0 solid transparent; + border-radius: 0; + box-sizing: border-box; + transition: transform 168ms cubic-bezier(0.17, 0.65, 0.48, 1); + -webkit-overflow-scrolling: touch; + overscroll-behavior: contain; } -.options > * { - display: block; - margin-bottom:10px; - line-height: 18px; +body.sidebar-minimized .options { + overflow: hidden; + pointer-events: none; + transform: translate(var(--sidebarWidth), 0); } + .options > * { + display: block; + margin: 0; + margin-bottom: var(--rowBottomMargin); + line-height: 18px; + } + .options .flex-x { + display: flex; + } + .options .flex-x > * { + flex: 1 1 auto; + } .options small { opacity: 0.6; } @@ -115,6 +398,14 @@ select:focus { font-size: 12px; margin: 1rem 0 0.5rem 0; } + .options input, .options select { + font-family: inherit; + color: inherit; + } + .options input::placeholder { + color: var(--fgColor); + opacity: 0.4; + } .options input[type="radio"], .options input[type="checkbox"] { margin-right:4px; } @@ -144,6 +435,13 @@ select:focus { .options select[name="sample"] { width:225px; } + .options label input[type="checkbox"] + * { + display: inline-block; + min-width:50%; + } + .options label input[type="checkbox"] + *:hover { + color: var(--fgColorMax); + } .options label.rasterizePhrase { margin-left:20px; margin-bottom:20px; @@ -159,33 +457,46 @@ select:focus { .options input[type="checkbox"] + * { user-select: none; -moz-user-select: none; -webkit-user-select:none; } - .options .varfontControl { - display: none; + .options .varfontControl, + .options .constfontControl { + transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1); + transition-property: opacity, height, margin; + } + .options .varfontControl, + body.varfont .options .constfontControl { + pointer-events:none; + overflow: hidden; + opacity:0; + height: 0; + margin: 0; } body.varfont .options .varfontControl { - display: block; + overflow: visible; + pointer-events:all; + opacity:1; + height: var(--fieldHeight); + margin-bottom: var(--rowBottomMargin); } + /*body.varfont .options .constfontControl { + display: none; + }*/ .options .varfontControl .label-and-value { display: flex; } - .options .varfontControl .label-and-value > span { - padding-left: 10px; - width: 80px; - flex: 0 0 auto; - } - .options .varfontControl input[type="range"] { + /*body.varfont .options select[name="weight"] { + pointer-events: none; + opacity: 0.4; + }*/ + .options input[type="range"] { flex: 1 1 auto; } - .options .varfontControl input[type="number"] { + .options input[type="range"] + input[type="number"] { flex: 0 1 auto; - width: 35px; + width: 40px; border: none; - padding: 0; + padding: 2px; margin-left: 4px; - } - body.varfont .options select[name="weight"] { - pointer-events: none; - opacity: 0.4; + background: transparent; } .options .label-and-value input + note, .options .label-and-value select + note { @@ -195,7 +506,7 @@ select:focus { line-height: var(--fieldHeight); margin-left: 0.5em; user-select: none; -webkit-user-select: none; -moz-user-select:none; - color: rgba(0,0,0,0.4); + color: var(--fgColorDimmed); } .options .label-and-value input + note .unit, .options .label-and-value select + note .unit { @@ -225,8 +536,13 @@ select:focus { background-color: rgba(0,0,0,0.2); } .img-button:focus { - box-shadow: 0 0 0 2px black; + box-shadow: 0 0 0 2px var(--input-color-focus); +} +.img-button.disabled { + opacity:0.4; + pointer-events: none; } +.img-button.reset { background-image: var(--icon-reset); } .checkbox-group label { margin: 0; @@ -234,15 +550,17 @@ select:focus { .preview { display:flex; - margin-right:275px; /*width of options sidebar*/ + margin-right:var(--sidebarWidth); /*width of options sidebar*/ overflow: auto; } +body.sidebar-minimized .preview { + margin-right:16px; +} samples, boxes { display:flex; } -/*samples { background: rgba(255,0,255,0.4); } sample { background: rgba(100,100,255,0.4); }*/ samples { display: flex; width: 100%; @@ -259,7 +577,7 @@ body.italic samples { white-space: pre-wrap; outline: none; overflow-wrap: break-word; - color:black; + color: var(--fgColor); } sample p { white-space: pre-wrap; @@ -275,7 +593,7 @@ body.italic samples { } sample .glyphlist g { margin:1px; - background:#f9f9f9; + background: var(--surface1-color-bg); display: flex; flex-direction: column; justify-content: center; @@ -309,13 +627,6 @@ body.italic samples { display:none; } -body.inverted-colors { - background: #020202; -} -body.inverted-colors sample { - color: white; -} - body.secondarySampleDisabled .showOnlyWithSecondarySample { display: none; } @@ -330,7 +641,8 @@ body.font-weight-700 b { font-weight: 500; } -boxes { +boxes { display:none; } +/*boxes { margin:12px; margin-bottom:0; } @@ -377,7 +689,7 @@ boxes { margin:0; display:inline-block; background:rgba(30,255,30,0.1);; - } + }*/ canvas { diff --git a/docs/res/icons/minimize-black.svg b/docs/res/icons/minimize-black.svg new file mode 100644 index 000000000..4fef3328f --- /dev/null +++ b/docs/res/icons/minimize-black.svg @@ -0,0 +1,3 @@ + diff --git a/docs/res/icons/minimize.svg b/docs/res/icons/minimize.svg new file mode 100644 index 000000000..861eec592 --- /dev/null +++ b/docs/res/icons/minimize.svg @@ -0,0 +1,3 @@ + -- cgit v1.2.3