diff options
-rw-r--r-- | docs/lab/lab.css | 275 |
1 files changed, 275 insertions, 0 deletions
diff --git a/docs/lab/lab.css b/docs/lab/lab.css new file mode 100644 index 000000000..a439ee415 --- /dev/null +++ b/docs/lab/lab.css @@ -0,0 +1,275 @@ +* { margin:0; padding:0; } +html { } +body { + background-color: white; + color:#111; + font:11px serif; + font-weight:400; /*300=light, 400=regular, 500=medium, 600=semibold*/ +} +.robotoFont { + font-family: "Roboto", serif; +} +.systemFont { + font-family: system-ui,-apple-system,"SF Pro Text","SF UI Text",BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;, serif; +} +.italic { + font-style: italic; +} +.de-emphasize { + color:#555; +} +a { + color:#2984AA; + text-decoration:inherit; + display:inline-block; + padding:0 0.3em; + margin:0 -0.3em; + border-radius:5px; +} +a:hover { color:#30C2FF; } + +p { + padding: 24px; + padding-top:12px; +} +h2 { + font-weight:500; + margin: 42px 18px 0 18px; + padding: 6px; +} +.options { + width: 275px; + box-sizing:border-box; + position:fixed; + top:0; right:0; bottom:0; + background:#f4f4f4; + padding: 24px; + user-select:none; + font-family: sans-serif !important; + overflow: auto; + letter-spacing:0.01em; +} +.options > * { + display: block; + margin-bottom:10px; + line-height: 18px; +} + .options small { + opacity: 0.6; + } + .options input[type="radio"], .options input[type="checkbox"] { + margin-right:4px; + } + .options .label-and-value { + display: flex; + flex-wrap: nowrap; + justify-content: flex-start; + } + .options .label-and-value span { + /*flex: 1 1 auto;*/ + /*background:salmon;*/ + text-align: left; + margin-right:6px; + width:90px; + } + .options .label-and-value input { + width:50px; + } + .options .label-and-value select { + min-width:50px; + max-width:130px; + } + .options select[name="sample"] { + width:225px; + } + .options label.rasterizePhrase { + margin-left:20px; + margin-bottom:20px; + } + .options label.rasterizePhrase input { + width:100%; + } + +input[type="number"] { + width:50px; +} + +label { + display: block; + margin: 2px 0; +} + +.checkbox-group label { + margin: 0; +} + +.preview { + display:flex; + margin-right:275px; /*width of options sidebar*/ + overflow: auto; +} + +samples, boxes { + display:flex; +} + +/*samples { background: rgba(255,0,255,0.4); } sample { background: rgba(100,100,255,0.4); }*/ +samples { + display: flex; + padding: 24px 0; + width:100%; +} + sample { + margin: 0; + /*white-space: pre;*/ + padding: 0 24px; + min-width:100px; + /*max-width:450px;*/ + white-space: pre-wrap; + } + sample p { + white-space: pre-wrap; + } + sample :focus { + outline: 2px solid #30C2FF; + } + sample .glyphlist { + display: flex; + flex-wrap: wrap; + letter-spacing:0; + line-height: normal; + } + sample .glyphlist g { + margin:1px; + background:#f9f9f9; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow:hidden; + width:2em; + height:2em; + page-break-inside: avoid; break-inside: avoid; + } + sample .glyphlist g span.glyph { + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; + /*margin-top:16px;*/ + /*background:salmon;*/ + } + sample .glyphlist g span.name { + /*background:lightblue;*/ + text-align: center; + flex: 0 0 auto; + font-size:9px; + color: rgba(0,0,0,0.3); + font-weight: 400; + padding-bottom:2px; + /*height: 16px;*/ + } + sample .glyphlist.hideNames g span.name { + display:none; + } + +body.secondarySampleDisabled .showOnlyWithSecondarySample { + display: none; +} + +body.font-weight-400 b { + font-weight: 500; +} +body.font-weight-500 b { + font-weight: 700; +} +body.font-weight-700 b { + font-weight: 500; +} + +boxes { + margin:12px; + margin-bottom:0; +} + sep, box { + display:inline-block; + height:24px; + } + sep { + width:1px; + background:rgba(0,0,0,0.1); + margin:12px 0 12px 12px; + } + box { + display:inline-block; + background:#222; + color:white; + line-height:24px; + padding:0 12px; + margin:12px 0 0 12px; + min-width:100px; + border-top: 8px solid rgba(255,30,0,0.1); + border-bottom: 8px solid rgba(255,30,0,0.1); + box-sizing: border-box; + outline: none; + } + box span { + display: block; + margin: -8px 0; + } + box.positive { + background:#eee; + color:black; + } + box.centered { + text-align:center; + } + box.tight { + display: flex; + align-items: center; + line-height: normal; + border-color:rgba(0,30,255,0.1); + } + box.tight span { + margin:0; + display:inline-block; + background:rgba(30,255,30,0.1);; + } + + +canvas { + image-rendering: optimizeSpeed; /* Older versions of FF */ + image-rendering: -moz-crisp-edges; /* FF 6.0+ */ + image-rendering: -webkit-optimize-contrast; /* Webkit (non standard naming) */ + image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ + image-rendering: crisp-edges; /* Possible future browsers. */ + -ms-interpolation-mode: nearest-neighbor; /* IE (non standard naming) */ +} + +#renderCanvas { + position: fixed; + top: 0; + left: 0; + pointer-events: none; + visibility: hidden; +} + +#displayCanvas { + display: inline-block; + vertical-align: top; +} + +#measure { + position:absolute; + left:0; top:0; + background:salmon; + visibility:hidden; + pointer-events:none; +} + +@media print { + .options { display:none; } + .preview { margin:0; } + boxes { display:none; } + samples { padding:0; } +} |