mirror of
https://github.com/rsms/inter.git
synced 2024-11-17 07:47:33 +01:00
418 lines
8.3 KiB
CSS
418 lines
8.3 KiB
CSS
:root {
|
|
--fieldHeight: 24px;
|
|
|
|
/* P3 wide gamut colors */
|
|
--red: color(display-p3 0.94 0.19 0.04);
|
|
--yellow: color(display-p3 1 0.87 0.05);
|
|
--blue: rgb(3, 102, 214);
|
|
}
|
|
@supports not (color: color(display-p3 1 1 1)) {
|
|
/* sRGB colors */
|
|
:root {
|
|
--red: #F03009;
|
|
--yellow: #FFE310;
|
|
}
|
|
}
|
|
|
|
* { margin:0; padding:0; font-synthesis: none; }
|
|
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,-system,-system-ui,-apple-system,sans-serif;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
i, cite, em, var, address, dfn {
|
|
font-style: oblique;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:50px;
|
|
background: none;
|
|
/*border: 1px solid rgba(0,0,0,0.2);*/
|
|
border: none;
|
|
padding: 4px;
|
|
border-radius: 2px;
|
|
background: white;
|
|
}
|
|
|
|
select {
|
|
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-repeat: no-repeat;
|
|
background-position: right center;
|
|
}
|
|
|
|
input[type="number"]:focus,
|
|
input[type="text"]:focus,
|
|
select:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px black;
|
|
}
|
|
|
|
.options {
|
|
width: 275px;
|
|
box-sizing:border-box;
|
|
position:fixed;
|
|
top:0; right:0; bottom:0;
|
|
background:#f4f4f4;
|
|
padding: 24px;
|
|
user-select:none; -moz-user-select: none;
|
|
font-family: sans-serif !important;
|
|
overflow: auto;
|
|
letter-spacing:0.012em;
|
|
}
|
|
.options > * {
|
|
display: block;
|
|
margin-bottom:10px;
|
|
line-height: 18px;
|
|
}
|
|
.options small {
|
|
opacity: 0.6;
|
|
}
|
|
.options h3 {
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
margin: 1rem 0 0.5rem 0;
|
|
}
|
|
.options input[type="radio"], .options input[type="checkbox"] {
|
|
margin-right:4px;
|
|
}
|
|
.options .label-and-value {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
height: var(--fieldHeight);
|
|
}
|
|
.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;
|
|
max-height: var(--fieldHeight);
|
|
box-sizing: border-box;
|
|
}
|
|
.options 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%;
|
|
}
|
|
.options label.style {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.options input[type="checkbox"] + * {
|
|
user-select: none; -moz-user-select: none;
|
|
}
|
|
.options .varfontControl {
|
|
display: none;
|
|
}
|
|
body.varfont .options .varfontControl {
|
|
display: block;
|
|
}
|
|
.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"] {
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
}
|
|
.options .label-and-value input + note,
|
|
.options .label-and-value select + note {
|
|
display: flex;
|
|
align-items: center;
|
|
height: var(--fieldHeight);
|
|
line-height: var(--fieldHeight);
|
|
margin-left: 0.5em;
|
|
user-select: none; -webkit-user-select: none;
|
|
color: rgba(0,0,0,0.4);
|
|
}
|
|
.options .label-and-value input + note .unit,
|
|
.options .label-and-value select + note .unit {
|
|
flex: 0 0 auto;
|
|
display:flex;
|
|
width: 18px;
|
|
}
|
|
|
|
|
|
.img-button {
|
|
display: inline-block;
|
|
width: var(--fieldHeight);
|
|
height:var(--fieldHeight);
|
|
background-size: 16px 16px;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
border-radius: 3px;
|
|
opacity: 0.8;
|
|
outline: none;
|
|
}
|
|
.img-button:hover {
|
|
opacity: 1;
|
|
background-color: rgba(0,0,0,0.1);
|
|
}
|
|
.img-button:hover:active {
|
|
opacity: 1;
|
|
background-color: rgba(0,0,0,0.2);
|
|
}
|
|
.img-button:focus {
|
|
box-shadow: 0 0 0 2px black;
|
|
}
|
|
|
|
.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;
|
|
width: 100%;
|
|
}
|
|
body.italic samples {
|
|
font-style: italic;
|
|
}
|
|
sample {
|
|
margin: 0;
|
|
/*white-space: pre;*/
|
|
padding: 2rem;
|
|
min-width:100px;
|
|
/*max-width:450px;*/
|
|
white-space: pre-wrap;
|
|
outline: none;
|
|
overflow-wrap: break-word;
|
|
color:black;
|
|
}
|
|
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;
|
|
border-radius: 2px;
|
|
}
|
|
sample .glyphlist g span.glyph {
|
|
flex: 1 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/*margin-top:16px;*/
|
|
/*background:salmon;*/
|
|
font-feature-settings: normal !important;
|
|
}
|
|
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.inverted-colors {
|
|
background: #020202;
|
|
}
|
|
body.inverted-colors sample {
|
|
color: white;
|
|
}
|
|
|
|
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; }
|
|
}
|