diff options
Diffstat (limited to 'docs/dynmetrics/index.css')
| -rw-r--r-- | docs/dynmetrics/index.css | 262 |
1 files changed, 262 insertions, 0 deletions
diff --git a/docs/dynmetrics/index.css b/docs/dynmetrics/index.css new file mode 100644 index 000000000..c7c98d351 --- /dev/null +++ b/docs/dynmetrics/index.css @@ -0,0 +1,262 @@ +body { + padding-bottom: 0; +} + +const { + display: inline; + font-size: 1.2em; + font-style: italic; + font-family: 'Times New Roman', Times, serif; +} + +sup { + /*background:lightpink;*/ + display: inline-block; + font-size:0.92em; + position: relative; + top:-0.4em; + letter-spacing: 0.001em; + vertical-align: baseline; +} + +.row.first { + padding-bottom:1em; +} + +formula { + display: inline-flex; + align-items: center; + background: white; + border-radius: 5px; + padding: 0 1em; + line-height: 3em; + height: 3em; + overflow: hidden; + margin-right: 1em; + margin-bottom: 1em; +} +.row.white formula { + background: #f5f5f5; +} +formula:last-child { + margin-right: 0; +} +formula.code { + white-space: pre; + font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace; + font-size:0.96em; +} + formula > * { + margin: 0 0.2em 0 0.2em; + } + formula > const { + margin-bottom: 0.11em; + } + formula > sup { + margin-left: 0; + } + + +.samples { + display: flex; + flex-wrap: wrap; + overflow: auto; + overflow-wrap: break-word; + word-break: break-word; +} + .samples .sample { + /*background: lightpink;*/ + color: #111; + flex: 0 1 auto; + outline: none; + margin-right: 50px; + margin-bottom: 50px; + } + .samples .sample .di { + display: block; + background-color: #ccc; + height: 1px; + width: 100%; + margin-bottom: 8px; + } + .samples .sample .di > span { + display: block; + background-color: #333; + height: 100%; + } + .samples .sample .di.match > span { + background-color: #0d3; + } + .samples .sample .di.unavailable { + background-color: #eee; + } + .samples .sample .di.unavailable > span { + visibility: hidden; + } + .samples .sample .info { + display: block; + font-size: 11px !important; + line-height: 11px; + margin-bottom: 9px; + color: #bbb; + } + + +.font-style-regular { font-weight:400 !important; font-style:normal !important; } +.font-style-italic { font-weight:400 !important; font-style:italic !important; } +.font-style-medium { font-weight:500 !important; font-style:normal !important; } +.font-style-medium-italic { font-weight:500 !important; font-style:italic !important; } +.font-style-bold { font-weight:700 !important; font-style:normal !important; } +.font-style-bold-italic { font-weight:700 !important; font-style:italic !important; } +.font-style-black { font-weight:900 !important; font-style:normal !important; } +.font-style-black-italic { font-weight:900 !important; font-style:italic !important; } + +.row.with-sidebar { + padding: 0; +} + .row.with-sidebar > *:first-child { + flex: 1 1 auto; + padding: 50px 0 0 50px; /* note: samples have 50px right margin */ + } + .row.with-sidebar > .sidebar { + flex: 0 0 auto; + } + +div.controls { + box-sizing: border-box; + width: 250px; + max-width: 250px; + flex: 0 0 auto; + padding: 10px 0; + border-left: 4px solid #f4f4f4; + display: flex; + flex-direction: column; + overflow: hidden; +} +div.controls hr { + border: none; + height: 2px; + background: #f4f4f4; + margin-top: 10px; + margin-bottom: 10px; +} +div.controls hr.without-bottom-margin { margin-bottom: 0; } +div.controls hr.without-top-margin { margin-top: 0; } +div.controls hr.without-margins { margin: 0; } +div.controls .control { + display: flex; + justify-content: space-between; + align-items: center; + overflow: hidden; + height: 30px; + margin: 0 16px; +} +div.controls > h3 { + margin: 0 16px; +} +div.controls > textarea { + border: none; + padding:16px; + height: 400px; + font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace; + outline: none; +} +div.controls .control > * { + /*max-width: 50%;*/ + flex: 1 1 auto; + margin:0; + margin-right: 16px; + box-sizing: border-box; +} +div.controls .control > :last-child { + margin-right: 0; +} +div.controls .control > select { + min-width: 6em; + align-items: center; + justify-content: center; +} +div.controls .control > input, +div.controls .control > select { + width: 0; + outline: none; +} +div.controls .control > input[type="number"], +div.controls .control > input[type="text"] { + background: none; + border: none; + padding: 4px 0; + font-size: 13px; +} +div.controls .control > input[type="number"] { + max-width: 60px; + -moz-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1; + -ms-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1; + -o-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1; + -webkit-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1; + font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1; +} +div.controls .control > input[type=number]::-webkit-inner-spin-button, +div.controls .control > input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +div.controls .control > input[type="number"][readonly] { + max-width: 40px; +} +div.controls .control > input.wide[type="number"] { + max-width: 100%; +} +div.controls .control > input[type="range"] { + /*max-width: 80%;*/ + flex: 1 1 auto; + display: block; +} +div.controls .control > img.icon, +div.controls .control > label { + font-family: georgia, serif; + font-style: italic; + line-height: 16px; + color: black; + width: 16px; + height: 16px; + flex: 0 0 auto; + margin-right: 16px; + opacity: 0.6; +} +div.controls canvas { + height: 200px; +} + +.row.small-window { + margin-top:0; + padding-top:0; +} + +@media only screen and (min-width: 541px) { + .small-window { + display: none; + } +} + +@media only screen and (max-width: 540px) { + + .row.with-sidebar { + overflow: auto; + } + + div.controls { + display: none; + } + div.controls .graphplot, + div.controls hr.without-top-margin, + div.controls h3, + div.controls #ideal-values + { + display: none; + } + + .row.with-sidebar { + flex-direction: column; + } +} |