/**
* Field Display System — the presentation a Display Format needs when it is
* markup rather than text.
*
* A form field holds its value in an , so a variant that reads as a
* link, a chip, a badge or a swatch cannot be shown by rewriting that value.
* public/js/form-field-display.js hides the control in view mode and puts a
* `.fd-view` element beside it carrying the rendered presentation.
*
* `.fd-view` deliberately reads from the SAME custom properties as `.field-data`
* (declared in form/edit.blade.php), so a rendered field is the same box as an
* unrendered one — same border, radius, padding, height, background and font.
* Nothing here restyles an existing rule; it only describes elements that did
* not exist before.
*/
/* The control a rendered element stands in for. Still in the DOM, still
carrying its name and value, so the form saves exactly what it always did. */
.fd-control-hidden {
display: none !important;
}
.fd-view {
font-family: var(--form-field-data-font-family);
font-size: var(--form-field-data-font-size);
font-weight: var(--form-field-data-font-weight);
color: var(--form-field-data-font-color);
padding: var(--form-field-box-padding);
border: var(--form-field-box-border-weight) var(--form-field-box-border-style) var(--form-field-box-border-color);
border-radius: var(--form-field-box-border-radius);
background: var(--form-field-readonly-background-color);
min-height: var(--form-field-height);
width: 100%;
/* A chip row wraps; a single value sits on the text baseline the way the
value in an input does. */
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
/* A long value scrolls inside its own box rather than widening the panel. */
overflow-x: auto;
}
/* Anything block-level the variant renders (a
, rendered rich text)
takes the full width instead of sitting on the flex baseline. */
.fd-view > pre,
.fd-view > p,
.fd-view > ul,
.fd-view > ol,
.fd-view > table {
flex: 1 1 100%;
margin: 0;
}
/* ── The pieces a variant draws with ─────────────────────────────────── */
.fd-link {
color: var(--form-field-focus-border-color, #2563eb);
text-decoration: underline;
}
/* A choice or a link shown as a badge. */
.fd-badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 10px;
font-size: 0.85em;
font-weight: 600;
background: var(--form-field-box-background-color, #f1f5f9);
color: var(--form-field-data-font-color);
border: 1px solid var(--form-field-box-border-color, #e2e8f0);
}
/* One member of a multi-value set. */
.fd-chip {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 10px;
font-size: 0.9em;
background: var(--form-field-box-background-color, #f1f5f9);
color: var(--form-field-data-font-color);
border: 1px solid var(--form-field-box-border-color, #e2e8f0);
}
/* A colour, drawn as the colour it names. */
.fd-swatch {
display: inline-block;
flex: 0 0 auto;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.15);
}
/* The country a telephone number belongs to. Either a flag character or the
artwork the countries table stores, so the box sizes to whichever arrives. */
.fd-flag {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
line-height: 1;
}
.fd-flag > svg,
.fd-flag > img {
height: 1em;
width: auto;
}
/* No artwork and no flag character — the country written out instead, marked
so it reads as the country rather than as part of the number. */
.fd-flag-text {
font-size: 0.8em;
font-weight: 600;
letter-spacing: 0.04em;
padding: 1px 5px;
border-radius: 3px;
background: var(--form-field-box-background-color, #f1f5f9);
border: 1px solid var(--form-field-box-border-color, #e2e8f0);
}
/* An identifier or a hex value, where the characters line up. */
.fd-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* ── Image fields ───────────────────────────────────────────────────────
An image field is a widget, not a value in a box: form/edit.blade.php
draws it as `.img-field-host` holding a preview pane and an upload
control, and public/js/form-field-display.js puts the chosen format on
that widget as a class.
"Image Scaled" is the pane's own behaviour — `.imgf-content img` already
fits the whole picture inside it — so it needs no rule here. The two
below describe the alternatives, and both are scoped to a class the
runtime adds, so a widget with no format chosen is untouched. */
/* Image Filled — the picture covers the pane, cropping what overflows.
The padding some forms give the pane would show as a frame around a
filled picture, so it is dropped for this fit only. */
.imgf-preview.imgf-fill .imgf-content {
padding: 0;
}
.imgf-preview.imgf-fill .imgf-content img {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
}
/* Image File Name — the stored name, in place of the picture. The pane is
hidden rather than emptied, so switching back to a picture format costs
nothing and the upload wiring behind it stays live. */
.img-field-host.imgf-as-name .imgf-preview,
.img-field-host.imgf-as-name .imgf-input {
display: none;
}
.img-field-host .imgf-name {
/* A long name stays on one line and ellipsises, the way a long value in
a field box does, rather than growing the row. */
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* JSON and script, shown as written. */
.fd-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
line-height: 1.5;
white-space: pre-wrap;
overflow-x: auto;
max-width: 100%;
}
.fd-code b {
font-weight: 700;
}
/* The attributes a drawn type was asked to spell out beside its sample —
a font's family and size, a line's weight and style, a shadow's offset and
blur, a colour's value and opacity. Secondary to the name it follows, so it
reads as detail rather than as a second value. */
.fd-detail {
font-size: 0.85em;
opacity: 0.7;
}
/* A shadow, drawn as a box actually carrying it. The margin is what keeps an
offset or a blur inside the row instead of under the field beside it. */
.fd-shadow {
display: inline-block;
flex: 0 0 auto;
height: 14px;
margin: 3px 6px;
border-radius: 3px;
background: var(--form-field-box-background-color, #fff);
border: 1px solid var(--form-field-box-border-color, #e2e8f0);
vertical-align: middle;
}
/* A geolocation drawn as one map tile, and an image held as a URL drawn as
the picture it points at. Both size to the box the field gives them rather
than to their own pixels. */
.fd-map,
.fd-thumb {
display: inline-block;
max-width: 100%;
height: auto;
border-radius: 3px;
border: 1px solid var(--form-field-box-border-color, #e2e8f0);
vertical-align: middle;
}
.fd-thumb {
max-height: 96px;
width: auto;
}