Shared field styles · CSS

shared/example.css

@import url("./contacts.css");
html { font: 16px/1.5 system-ui, sans-serif; color: #172642; background: white; }
body { margin: 0; padding: 24px; }
h1 { font: 700 30px/1.2 system-ui, sans-serif; margin: 0; color: #172642; }
body:has(.nicegui-content) { padding: 0; }
.nicegui-content { padding: 24px; gap: 0; }

/* Rosetta exposes the library launcher below the live iframe. */
.gramlot-inspector-launcher { display: none; }

/* The master owns the visible inspector; the lazy source instance stays hidden. */
gramlot-inspector { display: none; }

/* A shared gap and native label layout for the first binding lesson. */
h1 + :is(label, gnr-textbox, .q-field) { margin-top:20px; }
label:has(> input) { display:flex; flex-direction:column; gap:4px; max-width:280px; }
label > input { font:inherit; padding:6px 8px; border:1px solid #cbd2dd; border-radius:4px; }

:is(label, gnr-textbox, .q-field) + h1 { margin-top:32px; }

.input-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 20px; padding:7px; width:100%; box-sizing:border-box; }
.input-fields > * { min-width:0; }
.input-fields > label { display:flex; flex-direction:column; gap:4px; max-width:none; font-size:12px; font-weight:600; }
.input-fields > label :is(input,textarea) { box-sizing:border-box; max-width:100%; min-width:0; font:16px system-ui; }
.input-fields textarea { padding:6px 8px; border:1px solid #cbd2dd; border-radius:4px; width:100%; }
.input-fields input[type=checkbox] { align-self:start; }

/* Compact field presentation belongs to the shared lesson theme. */
gnr-formlet {
  font:13px/1.25 system-ui,sans-serif;
  --form-label-font-size:11px;
  --field-border:#d3d8df;
  --form-field-radius:2px;
  gap:6px 16px;
}
.input-fields { gap:6px 16px; font:13px/1.25 system-ui,sans-serif; }
.input-fields > label { font-size:11px; gap:3px; }
.input-fields > label :is(input,textarea) {
  font:13px/1.25 system-ui,sans-serif;
  padding:3px 6px;
  border:1px solid #d3d8df;
  border-radius:2px;
}
.input-fields > label input:not([type=checkbox]) { min-height:25px; }
.input-fields .q-field__control,
.input-fields .q-field__marginal { min-height:38px; height:auto; }
.input-fields .q-field__native { font:13px/1.25 system-ui,sans-serif; min-height:25px; }
.input-fields .q-field__label { font-size:11px; }
.input-fields .q-textarea .q-field__native { min-height:55px; }

.input-fields .q-field__label { top:2px; transform:none; line-height:14px; }
.input-fields .q-field__native { padding:16px 0 2px; border:0; }
.input-fields .q-field__control-container { padding-top:0; }
.input-fields .q-field__bottom { padding-top:2px; min-height:0; }