web: wip add display
This commit is contained in:
Rasmus Andersson
parent
776f39d74f
commit
7edb70b69e
9 changed files with 1144 additions and 462 deletions
|
|
@ -1338,13 +1338,13 @@
|
|||
, ["braceleft", 0, "007B", "LEFT CURLY BRACKET"]
|
||||
, ["braceright", 0, "007D", "RIGHT CURLY BRACKET"]
|
||||
, ["at", 0, "0040", "COMMERCIAL AT"]
|
||||
, ["parenleft.case", 0, "E081", null, "#aaf260"]
|
||||
, ["parenright.case", 0, "E082", null, "#aaf260"]
|
||||
, ["bracketleft.case", 0, "E083", null, "#aaf260"]
|
||||
, ["bracketright.case", 0, "E084", null, "#aaf260"]
|
||||
, ["braceleft.case", 0, "E085", null, "#aaf260"]
|
||||
, ["braceright.case", 0, "E086", null, "#aaf260"]
|
||||
, ["at.case", 0, "E087", null, "#aaf260"]
|
||||
, ["parenleft.case", 0, null, null, "#aaf260"]
|
||||
, ["parenright.case", 0, null, null, "#aaf260"]
|
||||
, ["bracketleft.case", 0, null, null, "#aaf260"]
|
||||
, ["bracketright.case", 0, null, null, "#aaf260"]
|
||||
, ["braceleft.case", 0, null, null, "#aaf260"]
|
||||
, ["braceright.case", 0, null, null, "#aaf260"]
|
||||
, ["at.case", 0, null, null, "#aaf260"]
|
||||
, ["numbersign", 0, "0023", "NUMBER SIGN", "rgba(239,239,239,0.004)"]
|
||||
, ["currency", 0, "00A4", "CURRENCY SIGN", "rgba(204,239,241,0.004)"]
|
||||
, ["slash", 0, "002F", "SOLIDUS", "rgba(239,239,239,0.004)"]
|
||||
|
|
@ -1363,16 +1363,16 @@
|
|||
, ["trianglebullet", 0, "2023", "TRIANGULAR BULLET", "rgba(239,239,239,0.004)"]
|
||||
, ["blackleftbullet", 0, "204C", "BLACK LEFTWARDS BULLET", "rgba(239,239,239,0.004)"]
|
||||
, ["blackrightbullet", 0, "204D", "BLACK RIGHTWARDS BULLET", "rgba(239,239,239,0.004)"]
|
||||
, ["hyphen.case", 0, "E088", null, "#aaf260"]
|
||||
, ["endash.case", 0, "E089", null, "#aaf260"]
|
||||
, ["figuredash.case", 0, "E08A", null, "#aaf260"]
|
||||
, ["emdash.case", 0, "E08B", null, "#aaf260"]
|
||||
, ["bullet.case", 0, "E08C", null, "#aaf260"]
|
||||
, ["openbullet.case", 0, "E08D", null, "#aaf260"]
|
||||
, ["hyphenbullet.case", 0, "E08E", null, "#aaf260"]
|
||||
, ["trianglebullet.case", 0, "E08F", null, "#aaf260"]
|
||||
, ["blackleftbullet.case", 0, "E090", null, "#aaf260"]
|
||||
, ["blackrightbullet.case", 0, "E091", null, "#aaf260"]
|
||||
, ["hyphen.case", 0, null, null, "#aaf260"]
|
||||
, ["endash.case", 0, null, null, "#aaf260"]
|
||||
, ["figuredash.case", 0, null, null, "#aaf260"]
|
||||
, ["emdash.case", 0, null, null, "#aaf260"]
|
||||
, ["bullet.case", 0, null, null, "#aaf260"]
|
||||
, ["openbullet.case", 0, null, null, "#aaf260"]
|
||||
, ["hyphenbullet.case", 0, null, null, "#aaf260"]
|
||||
, ["trianglebullet.case", 0, null, null, "#aaf260"]
|
||||
, ["blackleftbullet.case", 0, null, null, "#aaf260"]
|
||||
, ["blackrightbullet.case", 0, null, null, "#aaf260"]
|
||||
, ["quoteleft", 0, "2018", "LEFT SINGLE QUOTATION MARK", "rgba(239,239,239,0.004)"]
|
||||
, ["quoteright", 0, "2019", "RIGHT SINGLE QUOTATION MARK", "rgba(239,239,239,0.004)"]
|
||||
, ["apostrophemod", 0, "02BC", "MODIFIER LETTER APOSTROPHE"]
|
||||
|
|
@ -1396,7 +1396,7 @@
|
|||
, ["ellipsis", 0, "2026", "HORIZONTAL ELLIPSIS", "rgba(239,239,239,0.004)"]
|
||||
, ["twodotleader", 0, "2025", "TWO DOT LEADER", "rgba(239,239,239,0.004)"]
|
||||
, ["colon", 0, "003A", "COLON", "rgba(239,239,239,0.004)"]
|
||||
, ["colon.case", 0, "E092", null, "#aaf260"]
|
||||
, ["colon.case", 0, null, null, "#aaf260"]
|
||||
, ["semicolon", 0, "003B", "SEMICOLON", "rgba(239,239,239,0.004)"]
|
||||
, ["comma.tf", 0, "E093", null, "#7f16c9"]
|
||||
, ["period.tf", 0, "E094", null, "#7f16c9"]
|
||||
|
|
@ -1422,26 +1422,26 @@
|
|||
, ["plusminus", 0, "00B1", "PLUS-MINUS SIGN", "rgba(204,239,241,0.004)"]
|
||||
, ["approxequal", 0, "2248", "ALMOST EQUAL TO", "rgba(204,239,241,0.004)"]
|
||||
, ["asciitilde", 0, "007E", "TILDE", "rgba(204,239,241,0.004)"]
|
||||
, ["less.case", 0, "E097", null, "#aaf260"]
|
||||
, ["greater.case", 0, "E098", null, "#aaf260"]
|
||||
, ["lessequal.case", 0, "E099", null, "#aaf260"]
|
||||
, ["greaterequal.case", 0, "E09A", null, "#aaf260"]
|
||||
, ["equal.case", 0, "E09B", null, "#aaf260"]
|
||||
, ["notequal.case", 0, "E09C", null, "#aaf260"]
|
||||
, ["plus.case", 0, "E09D", null, "#aaf260"]
|
||||
, ["minus.case", 0, "E09E", null, "#aaf260"]
|
||||
, ["multiply.case", 0, "E09F", null, "#aaf260"]
|
||||
, ["divide.case", 0, "E0A0", null, "#aaf260"]
|
||||
, ["plusminus.case", 0, "E0A1", null, "#aaf260"]
|
||||
, ["approxequal.case", 0, "E0A2", null, "#aaf260"]
|
||||
, ["asciitilde.case", 0, "E0A3", null, "#aaf260"]
|
||||
, ["less.case", 0, null, null, "#aaf260"]
|
||||
, ["greater.case", 0, null, null, "#aaf260"]
|
||||
, ["lessequal.case", 0, null, null, "#aaf260"]
|
||||
, ["greaterequal.case", 0, null, null, "#aaf260"]
|
||||
, ["equal.case", 0, null, null, "#aaf260"]
|
||||
, ["notequal.case", 0, null, null, "#aaf260"]
|
||||
, ["plus.case", 0, null, null, "#aaf260"]
|
||||
, ["minus.case", 0, null, null, "#aaf260"]
|
||||
, ["multiply.case", 0, null, null, "#aaf260"]
|
||||
, ["divide.case", 0, null, null, "#aaf260"]
|
||||
, ["plusminus.case", 0, null, null, "#aaf260"]
|
||||
, ["approxequal.case", 0, null, null, "#aaf260"]
|
||||
, ["asciitilde.case", 0, null, null, "#aaf260"]
|
||||
, ["logicalnot", 0, "00AC", "NOT SIGN", "rgba(204,239,241,0.004)"]
|
||||
, ["underscore", 1, "005F", "LOW LINE", "rgba(239,239,239,0.004)"]
|
||||
, ["dagger", 0, "2020", "DAGGER", "rgba(239,239,239,0.004)"]
|
||||
, ["daggerdbl", 0, "2021", "DOUBLE DAGGER", "rgba(239,239,239,0.004)"]
|
||||
, ["asciicircum", 0, "005E", "CIRCUMFLEX ACCENT", "rgba(204,239,241,0.004)"]
|
||||
, ["asterisk", 0, "002A", "ASTERISK", "rgba(239,239,239,0.004)"]
|
||||
, ["asterisk.case", 0, "E0A4", null, "#aaf260"]
|
||||
, ["asterisk.case", 0, null, null, "#aaf260"]
|
||||
, ["registered", 0, "00AE", "REGISTERED SIGN", "rgba(204,239,241,0.004)"]
|
||||
, ["copyright", 0, "00A9", "COPYRIGHT SIGN", "rgba(204,239,241,0.004)"]
|
||||
, ["copyleft", 0, "1F12F", "COPYLEFT SYMBOL"]
|
||||
|
|
@ -1832,10 +1832,10 @@
|
|||
, ["less.circled", 0, "E135"]
|
||||
, ["greater.circled", 0, "E136"]
|
||||
, ["equal.circled", 0, "E137"]
|
||||
, ["plus.circled", 0, "2295", "CIRCLED PLUS"]
|
||||
, ["minus.circled", 0, "2296", "CIRCLED MINUS"]
|
||||
, ["multiply.circled", 0, "2297", "CIRCLED TIMES"]
|
||||
, ["divide.circled", 0, "2A38", "CIRCLED DIVISION SIGN"]
|
||||
, ["plus.circled", 0, "E15F"]
|
||||
, ["minus.circled", 0, "E160"]
|
||||
, ["multiply.circled", 0, "E161"]
|
||||
, ["divide.circled", 0, "E162"]
|
||||
, ["upArrow.circled", 0, "E138"]
|
||||
, ["downArrow.circled", 0, "E139"]
|
||||
, ["leftArrow.circled", 0, "E13A"]
|
||||
|
|
|
|||
|
|
@ -7,6 +7,25 @@
|
|||
<link href="../inter.css" rel="stylesheet">
|
||||
<script type="text/javascript">
|
||||
|
||||
// dark color scheme by default?
|
||||
let defaultColorSceme = "light"
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
defaultColorSceme = "dark"
|
||||
if (document.location.search.indexOf("invert-colors") == -1) {
|
||||
document.documentElement.classList.add("color-scheme-dark")
|
||||
}
|
||||
}
|
||||
|
||||
// Safari?
|
||||
(function(u){ if (
|
||||
u.indexOf('Safari/') != -1 &&
|
||||
u.indexOf('Chrome/') == -1 &&
|
||||
u.indexOf('Chromium/') == -1
|
||||
) {
|
||||
document.documentElement.classList.add('safari')
|
||||
} })(navigator.userAgent);
|
||||
|
||||
|
||||
const samples = new Map()
|
||||
let sampleVar = null // BoundVar
|
||||
|
||||
|
|
@ -161,7 +180,13 @@ Ambiguation: (should not be fractions)
|
|||
`)
|
||||
|
||||
|
||||
samples.set('Feature: rlig', `
|
||||
samples.set('Feature: ccmp', `
|
||||
/d /caroncmb --> /dcaron ==> d\u030C
|
||||
/j /tildecomb --> /jdotless /tildecomb ==> j\u0303
|
||||
|
||||
/i <modifier> --> /idotless ==> i\u0300
|
||||
/idotless /gravecomb --> /igrave ==> \u0131\u0300
|
||||
|
||||
Enclosing glyphs (glyph + {U+20DD,U+20DE})
|
||||
U+20DD COMBINING ENCLOSING CIRCLE: ⃝
|
||||
U+20DE COMBINING ENCLOSING SQUARE: ⃞
|
||||
|
|
@ -193,14 +218,14 @@ U\u20DE V\u20DE W\u20DE X\u20DE Y\u20DE Z\u20DE !\u20DE ?\u
|
|||
←\u20DE →\u20DE ↑\u20DE ↓\u20DE
|
||||
|
||||
HE\u20DDLLO WO\u20DERLD
|
||||
|
||||
Note on combining-marks compatibility:
|
||||
• rlig=on: uses precomposed ligatures (default.)
|
||||
• rlig=off: rely on layout engine to combine (limited support.)
|
||||
`)
|
||||
|
||||
|
||||
samples.set('Feature: calt', `
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ[]{}()
|
||||
abcdefghijklmnopqrstuvwxyz
|
||||
0123456789!?.
|
||||
|
||||
Arrows
|
||||
dash[1-3]+gt\t\t-> --> --->
|
||||
e{n,m}dash+gt\t–> —>
|
||||
|
|
@ -213,6 +238,9 @@ equal[1,2]+gt\t\t=> ==>
|
|||
lt+equal+equal\t<==
|
||||
lt+equal[1,2]+gt\t<=> <==>
|
||||
|
||||
Abc{}[]()
|
||||
ABC{}[]()
|
||||
|
||||
combined with calt to adjust to caps
|
||||
A -> B <- C->D<-E=>F<=>G
|
||||
A –> B <– C–>D<–E=>F<=>G
|
||||
|
|
@ -1534,15 +1562,6 @@ body.varfont.hinted .inter select {
|
|||
<link href="lab.css" rel="stylesheet">
|
||||
<script type="text/javascript">
|
||||
|
||||
// Safari?
|
||||
(function(u){ if (
|
||||
u.indexOf('Safari/') != -1 &&
|
||||
u.indexOf('Chrome/') == -1 &&
|
||||
u.indexOf('Chromium/') == -1
|
||||
) {
|
||||
document.documentElement.classList.add('safari')
|
||||
} })(navigator.userAgent);
|
||||
|
||||
const fontVersion = Math.round(Date.now()).toString(36)
|
||||
let fontFamilyName = 'Inter-v' + fontVersion
|
||||
let fontFamilyNameHinted = 'Inter-hinted-v' + fontVersion
|
||||
|
|
@ -1566,10 +1585,48 @@ document.head.appendChild(fontCSS)
|
|||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="init-anim">
|
||||
<div id="sidebar-button"></div>
|
||||
<div class="options inter">
|
||||
|
||||
<label class="style">
|
||||
<div class="flex-x">
|
||||
<label>
|
||||
<input type="checkbox" name="varfont"
|
||||
title="Use variable font instead of constant font files">
|
||||
<span>Variable</span>
|
||||
</label>
|
||||
<label style="display:inline-block; margin-left:4px">
|
||||
<input type="checkbox" name="italic">
|
||||
<em>Italic</em>
|
||||
</label>
|
||||
<label title="Swap color scheme">
|
||||
<input type="checkbox" name="invert-colors">
|
||||
<b>☀</b>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="label-and-value">
|
||||
<span>Size:</span>
|
||||
<input type="range" value="22" step="1" min="11" max="200" name="_sizeRange">
|
||||
<input type="number" value="22" step="1" min="4" max="1024" name="size">
|
||||
<!-- <note><span class="unit">dp</span></note> -->
|
||||
</label>
|
||||
|
||||
<!-- Variable font controls (hidden when not using variable fonts) -->
|
||||
<label class="label-and-value varfontControl">
|
||||
<span>Weight:</span>
|
||||
<input type="range" value="400" step="1" min="100" max="900" name="varWeight">
|
||||
<input type="number" value="400" step="1" min="100" max="900" name="varWeightNum">
|
||||
</label>
|
||||
|
||||
<label class="label-and-value varfontControl">
|
||||
<span>Slant:</span>
|
||||
<input type="range" value="0" step="0.01" min="0" max="10" name="varSlant">
|
||||
<input type="number" value="0" step="0.01" min="0" max="10" name="varSlantNum">
|
||||
</label>
|
||||
|
||||
<label class="label-and-value constfontControl">
|
||||
<span>Weight:</span>
|
||||
<select name="weight" style="max-width:100px">
|
||||
<option value="100">Thin (100)</option>
|
||||
<option value="200">Extra Light (200)</option>
|
||||
|
|
@ -1581,32 +1638,6 @@ document.head.appendChild(fontCSS)
|
|||
<option value="800">Extra Bold (800)</option>
|
||||
<option value="900">Black (900)</option>
|
||||
</select>
|
||||
<label style="display:inline-block; margin-left:4px"><input type="checkbox" name="italic"> <em>Italic</em></label>
|
||||
<label>
|
||||
<input type="checkbox" name="varfont"
|
||||
title="Use variable font instead of constant font files">
|
||||
<span>Variable</span>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<div class="checkbox-group varfontControl">
|
||||
<span>Variable axes:</span>
|
||||
<label class="label-and-value">
|
||||
<span>Weight:</span>
|
||||
<input type="range" value="400" step="10" min="100" max="900" name="varWeight">
|
||||
<input type="number" value="400" step="1" min="100" max="900" name="varWeightNum">
|
||||
</label>
|
||||
<label class="label-and-value">
|
||||
<span>Slant:</span>
|
||||
<input type="range" value="0" step="0.01" min="0" max="10" name="varSlant">
|
||||
<input type="number" value="0" step="1" min="0" max="10" name="varSlantNum">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="label-and-value">
|
||||
<span>Size:</span>
|
||||
<input type="number" value="22" step="1" min="4" max="1024" name="size">
|
||||
<note><span class="unit">dp</span></note>
|
||||
</label>
|
||||
|
||||
<label class="label-and-value">
|
||||
|
|
@ -1627,20 +1658,14 @@ document.head.appendChild(fontCSS)
|
|||
<label class="label-and-value">
|
||||
<span>Letter spacing:</span>
|
||||
<input type="number" value="" placeholder="" step="0.1" name="letterSpacing">
|
||||
<note><span class="unit">%</span><div
|
||||
class="img-button reset-letter-spacing"
|
||||
tabindex="0"
|
||||
style="background-image:url(../res/icons/reset-black.svg)"></div>
|
||||
<note><span class="unit">%</span><div class="img-button reset reset-letter-spacing" tabindex="0"></div>
|
||||
</note>
|
||||
</label>
|
||||
|
||||
<label class="label-and-value">
|
||||
<span>Line height:</span>
|
||||
<input type="number" value="" placeholder="" step="1" min="0" max="1000" name="lineHeight">
|
||||
<note><span class="unit">dp</span><div
|
||||
class="img-button reset-line-height"
|
||||
tabindex="0"
|
||||
style="background-image:url(../res/icons/reset-black.svg)"></div>
|
||||
<note><span class="unit">dp</span><div class="img-button reset reset-line-height" tabindex="0"></div>
|
||||
</note>
|
||||
</label>
|
||||
|
||||
|
|
@ -1651,7 +1676,6 @@ document.head.appendChild(fontCSS)
|
|||
<option value="capitalize">capitalize</option>
|
||||
<option value="uppercase">uppercase</option>
|
||||
<option value="lowercase">lowercase</option>
|
||||
<option value="full-width">full-width</option>
|
||||
</select></label>
|
||||
|
||||
<label class="label-and-value">
|
||||
|
|
@ -1665,49 +1689,7 @@ document.head.appendChild(fontCSS)
|
|||
<option value="wavy underline">wavy underline</option>
|
||||
</select></label>
|
||||
|
||||
<!--label class="label-and-value" title="controls the usage of alternate glyphs for capital letters">
|
||||
<span>Caps:</span>
|
||||
<select name="variantCaps">
|
||||
<option value="normal" selected>normal</option>
|
||||
<option value="small-caps">small-caps</option>
|
||||
<option value="all-small-caps">all-small-caps</option>
|
||||
<option value="petite-caps">petite-caps</option>
|
||||
<option value="all-petite-caps">all-petite-caps</option>
|
||||
<option value="unicase">unicase</option>
|
||||
<option value="titling-caps">titling-caps</option>
|
||||
</select></label-->
|
||||
|
||||
<!--label class="label-and-value">
|
||||
<span>Ligatures:</span>
|
||||
<select name="variantLigatures">
|
||||
<option value="normal" selected>normal</option>
|
||||
<option value="none">none</option>
|
||||
<option value="common-ligatures">common-ligatures</option>
|
||||
<option value="no-common-ligatures">no-common-ligatures</option>
|
||||
<option value="discretionary-ligatures">discretionary-ligatures</option>
|
||||
<option value="no-discretionary-ligatures">no-discretionary-ligatures</option>
|
||||
<option value="historical-ligatures">historical-ligatures</option>
|
||||
<option value="no-historical-ligatures">no-historical-ligatures</option>
|
||||
<option value="contextual">contextual</option>
|
||||
<option value="no-contextual">no-contextual</option>
|
||||
</select></label>
|
||||
|
||||
<label class="label-and-value" title="controls the usage of alternate glyphs for capital letters">
|
||||
<span>Numeric:</span>
|
||||
<select name="variantNumeric">
|
||||
<option value="normal" selected>normal</option>
|
||||
<option value="ordinal">ordinal</option>
|
||||
<option value="slashed-zero">slashed-zero</option>
|
||||
<option value="lining-nums">lining-nums</option>
|
||||
<option value="oldstyle-nums">oldstyle-nums</option>
|
||||
<option value="proportional-nums">proportional-nums</option>
|
||||
<option value="tabular-nums">tabular-nums</option>
|
||||
<option value="diagonal-fractions">diagonal-fractions</option>
|
||||
<option value="stacked-fractions">stacked-fractions</option>
|
||||
<option value="oldstyle-nums stacked-fractions">oldstyle-nums stacked-fractions</option>
|
||||
</select></label-->
|
||||
|
||||
<h3>Display</h3>
|
||||
<!-- <h3>Display</h3> -->
|
||||
|
||||
<label class="label-and-value">
|
||||
<span>Anti-alias:</span>
|
||||
|
|
@ -1727,8 +1709,6 @@ document.head.appendChild(fontCSS)
|
|||
</select>
|
||||
</label>
|
||||
|
||||
<label title="White text on black background"><input type="checkbox" name="display-invert-colors"> Inverted colors</label>
|
||||
|
||||
|
||||
<h3>Features</h3>
|
||||
|
||||
|
|
@ -1747,6 +1727,7 @@ document.head.appendChild(fontCSS)
|
|||
<label title='Stylistic set 1 "Open Digits"'><input type="checkbox" class="featopt" name="feat:ss01"> ss01 (Open Digits)</label>
|
||||
<label title='Stylistic set 2 "Disambiguation"'><input type="checkbox" class="featopt" name="feat:ss02"> ss02 (Disambiguation)</label>
|
||||
<label title='Stylistic set 3 "Lower case r curves into round neighbors"'><input type="checkbox" class="featopt" name="feat:ss03"> ss03 (Curved r)</label>
|
||||
<label title='Stylistic set 4 "Disambiguation without slashed zero"'><input type="checkbox" class="featopt" name="feat:ss04"> ss04 (Disambiguation w/o zero)</label>
|
||||
<label title='Character Variant 1 "Alternate one"'><input type="checkbox" class="featopt" name="feat:cv01"> cv01 (Alternate one)</label>
|
||||
<label title='Character Variant 2 "Open four"'><input type="checkbox" class="featopt" name="feat:cv02"> cv02 (Open four)</label>
|
||||
<label title='Character Variant 3 "Open six"'><input type="checkbox" class="featopt" name="feat:cv03"> cv03 (Open six)</label>
|
||||
|
|
@ -1763,8 +1744,6 @@ document.head.appendChild(fontCSS)
|
|||
<div class="checkbox-group">
|
||||
<span>Default-on features:</span>
|
||||
<label title="Contextual alternates"><input type="checkbox" class="featopt" name="feat:calt=0"> Disable calt (Contextual alternates)</label>
|
||||
<!-- <label title="Standard ligatures"><input type="checkbox" class="featopt" name="feat:liga=0"> Disable liga (Standard ligatures)</label> -->
|
||||
<label title="Required ligatures"><input type="checkbox" class="featopt" name="feat:rlig=0"> Disable rlig (Required ligatures)</label>
|
||||
<label title="Kerning"><input type="checkbox" class="featopt" name="feat:kern=0"> Disable kern (Kerning)</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -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()
|
||||
setCurrentQueryString(() => this.getQueryString())
|
||||
}
|
||||
|
||||
_performHistoryReplaceState() {
|
||||
history.replaceState({} , '', '?' + this.getQueryString())
|
||||
this._needsHistoryReplaceState = false
|
||||
}
|
||||
// _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.
|
||||
if (this._historyReplaceStateTimer === null) {
|
||||
this._performHistoryReplaceState()
|
||||
this._historyReplaceStateTimer = setTimeout(() => {
|
||||
this._historyReplaceStateTimer = null
|
||||
if (this._needsHistoryReplaceState) {
|
||||
this._performHistoryReplaceState()
|
||||
}
|
||||
}, 200)
|
||||
} else {
|
||||
this._needsHistoryReplaceState = true
|
||||
}
|
||||
}
|
||||
// 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) => {
|
||||
|
|
|
|||
434
docs/lab/lab.css
434
docs/lab/lab.css
|
|
@ -1,26 +1,125 @@
|
|||
:root {
|
||||
--fieldHeight: 24px;
|
||||
/* 1 pixel */
|
||||
--displayScale: 1;
|
||||
--pixel: 1px;
|
||||
|
||||
/* P3 wide gamut colors */
|
||||
--red: color(display-p3 0.94 0.19 0.04);
|
||||
--yellow: color(display-p3 1 0.87 0.05);
|
||||
--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;
|
||||
}}
|
||||
|
||||
/* basic color ————————————————————————————————————————————————————————————————————————————— */
|
||||
/* sRGB colors */
|
||||
:root {
|
||||
--red: #F03009;
|
||||
--yellow: #FFE310;
|
||||
--blue: rgb(3, 102, 214);
|
||||
}
|
||||
@supports not (color: color(display-p3 1 1 1)) {
|
||||
/* sRGB colors */
|
||||
:root {
|
||||
--red: #F03009;
|
||||
--yellow: #FFE310;
|
||||
}
|
||||
/* 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);
|
||||
}}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
: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"] {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.options .varfontControl input[type="number"] {
|
||||
flex: 0 1 auto;
|
||||
width: 35px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin-left: 4px;
|
||||
}
|
||||
body.varfont .options select[name="weight"] {
|
||||
/*body.varfont .options select[name="weight"] {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}*/
|
||||
.options input[type="range"] {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.options input[type="range"] + input[type="number"] {
|
||||
flex: 0 1 auto;
|
||||
width: 40px;
|
||||
border: none;
|
||||
padding: 2px;
|
||||
margin-left: 4px;
|
||||
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 {
|
||||
|
|
|
|||
Reference in a new issue