wrapper (opened field) —
which cover every populated / editable field.
NB: we deliberately do NOT flex a bare (an empty field, or the sub-
inputs of a grouped field like Name). `display:flex` strips a cell of its
table-cell role, and two flexed cells in one row collapse into a single
stacked block — turning a row of fields into a column. So a bare empty
field keeps its caption below; populated fields (the norm) get it on top.
:not(.hide) — this rule outspecifies the theme's .hide{display:none}, so
without it a hidden captioned box (e.g. the .user-photo-form upload panel
on Users/User.php, revealed by the "+" toggle) would be forced visible. */
body.modules #body div:not(.hide):has(> label > .legend-gray),
body.modules #body div:not(.hide):has(> label > .legend-red),
body.modules #body div:not(.hide):has(> .legend-gray),
body.modules #body div:not(.hide):has(> .legend-red) {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
}
body.modules #body div:not(.hide):has(> label > .legend-gray) > br,
body.modules #body div:not(.hide):has(> label > .legend-red) > br,
body.modules #body div:not(.hide):has(> .legend-gray) > br,
body.modules #body div:not(.hide):has(> .legend-red) > br {
display: none;
}
/* Multi-select field group under ONE caption — the PrepareDate() month/day/year
triple (every date field's open state) and the Preferences > Display Options
"Date Format" selects. The column-reverse stack above would put each select
on its own line, in reverse order. Lay these out as a wrapping row instead:
the caption is forced onto a full first line (order/flex-basis), and the
selects (+ the jscalendar button, if any) sit side by side below it.
NB: the caption :has() qualifier is repeated here so this rule OUTRANKS the
column-reverse rule above (same class count, more element count) — with only
:has(> select + select) it loses on specificity and never applies. */
body.modules #body div:not(.hide):has(> select + select):has(> .legend-gray),
body.modules #body div:not(.hide):has(> select + select):has(> .legend-red),
body.modules #body div:not(.hide):has(> select + select):has(> label > .legend-gray),
body.modules #body div:not(.hide):has(> select + select):has(> label > .legend-red) {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
body.modules #body div:not(.hide):has(> select + select) > .legend-gray,
body.modules #body div:not(.hide):has(> select + select) > .legend-red,
body.modules #body div:not(.hide):has(> select + select) > label:has(> .legend-gray),
body.modules #body div:not(.hide):has(> select + select) > label:has(> .legend-red) {
order: -1;
flex-basis: 100%;
}
/* Grouped field editor (Name & co.), OPEN state: a click-to-edit field whose
editor is a nested of captioned sub-inputs (First / Middle / Last /
Suffix). Flexing the sub-cells directly would collapse the row (see note
above), so lay the row out with flex at the level instead: the sub-
fields stay side by side, each with its caption stacked on top.
Scoped to the InputDivOnclick wrapper via div[id^="div"] (its id is
"div"+field-id) so it can ONLY hit a click-to-edit editor — never a card or
layout that merely happens to wrap a form (that would flex
every cell of the whole form). Matches only the OPEN state: in the display
state the wrapper's direct child is .onclick, not a . */
body.modules #body div[id^="div"]:has(> table .legend-gray) > table,
body.modules #body div[id^="div"]:has(> table .legend-red) > table,
body.modules #body div[id^="div"]:has(> table .legend-gray) > table > tbody,
body.modules #body div[id^="div"]:has(> table .legend-red) > table > tbody {
display: block;
}
body.modules #body div[id^="div"]:has(> table .legend-gray) > table > tbody > tr,
body.modules #body div[id^="div"]:has(> table .legend-red) > table > tbody > tr {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
body.modules #body div[id^="div"]:has(> table .legend-gray) > table > tbody > tr > td,
body.modules #body div[id^="div"]:has(> table .legend-red) > table > tbody > tr > td {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
}
body.modules #body div[id^="div"]:has(> table .legend-gray) br,
body.modules #body div[id^="div"]:has(> table .legend-red) br {
display: none;
}
/* MarkDown editor (e.g. Custom tab "Comments"/"Registration Notes", the
calendar event popup's "Notes"): TextAreaInput() emits [.md-preview =
Write/Preview tabs][textarea][caption]. twine-app.js wraps the cell in a
.field-stack that the caption rule above reverse-stacks, which lands the
order caption / textarea / tabs. Override that one stack to a normal column
and order it caption -> tabs -> field, so the tabs sit between the heading
and the field. */
body.modules #body .field-stack:has(> div.md-preview) {
display: flex;
flex-direction: column; /* override the caption rule's column-reverse */
}
body.modules #body .field-stack:has(> div.md-preview) > label { order: 1; }
body.modules #body .field-stack:has(> div.md-preview) > div.md-preview {
order: 2;
/* Pull the tab strip down 1px onto the field's top border and sit above it,
so the active tab (no bottom border) covers the line beneath it and opens
into the field — the classic connected-tab look. */
position: relative;
z-index: 1;
margin-bottom: -1px;
}
body.modules #body .field-stack:has(> div.md-preview) > textarea { order: 3; }
/* Boxed Write/Preview tabs: bordered, rounded top corners (all of them,
including "Write"'s), full border (including bottom) by default so the
INACTIVE tab keeps a visible line separating it from the field below. The
ACTIVE tab's own bottom border is colored to match its background, blending
into it — this pairs with the two field-merge rules below (textarea /
rendered panel) to erase the line specifically under whichever tab is
active. */
body.modules #body .md-preview > .tab {
display: inline-block;
box-sizing: border-box;
border: 1px solid var(--field-line);
border-radius: 6px 6px 0 0;
background: var(--card);
padding: 5px 12px;
margin: 0 2px 0 0;
font-size: 12px;
font-weight: 600;
line-height: 1.6;
color: var(--ink-faint);
cursor: pointer;
}
body.modules #body .md-preview > .tab.disabled { /* active tab */
color: var(--pri);
font-weight: 700;
background: var(--card);
border-bottom-color: var(--card);
}
/* Write field (textarea): a real SIBLING of .md-preview. The existing
field-stack rule above already pulls .md-preview -1px onto this textarea
with z-index:1, so the active tab's blended bottom border (opaque, matching
background) paints over and erases the textarea's top border locally; the
inactive tab's real border-bottom shows normally beside/through it. */
body.modules #body .md-preview + textarea {
border-top-left-radius: 0 !important;
border-top-right-radius: 8px !important;
}
/* Preview field (the rendered .markdown-to-html panel): a CHILD of
.md-preview, not a sibling — so the field-stack rule's -1px/z-index shift on
the OUTER .md-preview box (aimed at the sibling textarea) never reaches it.
Give the panel its own matching overlap: pull it up 1px onto the tab row
(same stacking context as the tabs, so DOM order alone would let the panel's
line paint over both tabs) and lift only the active tab above it with
z-index, so — same as the textarea case — the active tab's opaque background
erases the line locally while the inactive tab's own border stands in front
of (and matches) the panel's line elsewhere. */
body.modules #body .md-preview > .tab.disabled {
position: relative;
z-index: 1;
}
body.modules #body .md-preview > div.markdown-to-html {
position: relative;
margin-top: -1px;
border-top: 1px solid var(--field-line) !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 8px !important;
}
/* =====================================================
INFO CARDS (Student Info)
The student info block (general + custom fields) and the enrollment block
are wrapped in .twine-card and float as white rounded cards on the page
background. The student card sits inside the tab body (td.popTable); the
enrollment card renders just after the tab card, straight in #body.
===================================================== */
body.modules #body .twine-card {
background: var(--card);
border: 1px solid #e6ebf1;
border-radius: 16px;
padding: 24px 30px;
margin-bottom: 20px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
body.modules #body .twine-card:last-child {
margin-bottom: 0;
}
/* Let the page background show through the tab body so the cards float on it
(tabs without cards keep the plain white sheet): the Student Info card
(.twine-card) and the Addresses & Contacts card layout (tr.address). */
body.modules .postbox:has(.h3multi) > tbody > tr > td.popTable:has(.twine-card),
body.modules .postbox:has(.h3multi) > tbody > tr > td.popTable:has(tr.address) {
background: transparent;
}
/* Continuous field flow inside a card — drop the section separators. */
body.modules #body .twine-card hr {
display: none;
}
/* Enrollment card header: title + record-count pill, replacing ListOutput's
default "N … were found." nav row. */
body.modules #body .twine-card--enrollment .list-nav {
display: none;
}
body.modules #body .twine-card-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
body.modules #body .twine-card-title {
font-size: 17px;
font-weight: 800;
letter-spacing: -.01em;
color: var(--ink);
}
body.modules #body .twine-pill {
padding: 3px 11px;
border-radius: 999px;
background: var(--pri-soft);
color: var(--pri-deep);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
/* Enrollment table sits flush inside the card (no double frame / offsets). */
/* A list inside a card melts into it (the Student Info Enrollment look):
the card provides the frame, so the inner .widefat drops its own border,
radius and header fill. Applies to every .twine-card — incl. the wrapped
Users tab bodies (Preferences Widgets / Student Fields / User Fields lists)
so they read like the student page instead of a card-in-a-card. */
body.modules #body .twine-card .widefat {
border: 0;
border-radius: 0;
}
body.modules #body .twine-card .widefat th,
body.modules #body .twine-card .widefat tfoot tr th {
background: transparent;
}
body.modules #body .twine-card > div[style*="overflow"] {
margin: 0;
}
/* =====================================================
CHOSEN searchable select (ChosenSelectInput, e.g. "Add Existing
Address/Contact"). Chosen paints its magnifier / clear / arrow glyphs from
ONE sprite positioned by background-position; the generic #body input rule
above (higher specificity via #body) resets that position + box, so the
search field showed a stack of stray sprite glyphs (arrows, double-X). Give
it a clean look: single magnifier at the trailing edge, no sprite.
===================================================== */
body.modules #body .chosen-search input[type=text],
body.modules #body .chosen-container-single .chosen-search input[type=text] {
box-sizing: border-box;
height: auto;
margin: 0;
padding: 7px 32px 7px 11px;
border: 1px solid var(--field-line);
border-radius: 8px;
direction: ltr;
font-size: 13px;
background-color: var(--card) !important;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2394a3b8%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%278%27%2F%3E%3Cpath%20d%3D%27m21%2021-4.3-4.3%27%2F%3E%3C%2Fsvg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
background-size: 15px 15px !important;
}
/* =====================================================
ADDRESSES & CONTACTS (design/new.html)
The page is a 3-column layout table anchored by :
col1 = address list, col2 = contacts + address detail (stacked), col3 =
selected-contact detail (empty by default). Re-flow it into the mockup's
cards: address-list | (contacts | address) — all via CSS on the existing
markup, so every link / form / master-detail action keeps working.
===================================================== */
body.modules #body table:has(> tbody > tr.address) { display: block; }
body.modules #body table:has(> tbody > tr.address) > tbody { display: block; }
body.modules #body tr.address {
display: grid;
grid-template-columns: 340px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
body.modules #body tr.address > td { display: block; min-width: 0; padding: 0; }
body.modules #body tr.address > td:empty { display: none; }
/* Right column: contacts | address split (contacts spans both rows). */
body.modules #body tr.address > td:nth-child(2) {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-items: start;
}
body.modules #body tr.address > td:nth-child(2) > br { display: none; }
body.modules #body tr.address > td:nth-child(2) > table:nth-of-type(1) { grid-column: 1; grid-row: 1 / span 2; }
body.modules #body tr.address > td:nth-child(2) > table:nth-of-type(2) { grid-column: 2; grid-row: 1; margin: 0; }
body.modules #body tr.address > td:nth-child(2) > table:nth-of-type(3) { grid-column: 2; grid-row: 2; margin: 0; box-shadow: none; }
/* Each inner widefat -> a clean white card. */
body.modules #body tr.address .widefat {
display: table;
width: 100%;
background: var(--card);
border: 1px solid #e6ebf1;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
border-collapse: separate;
border-spacing: 0;
}
body.modules #body tr.address .widefat th {
background: var(--card) !important;
border-bottom: 1px solid #eef2f6;
padding: 13px 18px;
font-size: 13.5px !important;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
text-align: left;
}
body.modules #body tr.address .widefat td {
border: 0;
border-bottom: 1px solid #f3f5f8;
padding: 11px 16px;
vertical-align: middle;
}
body.modules #body tr.address .widefat tr:last-child td { border-bottom: 0; }
/* Selected row -> pri-soft highlight. */
body.modules #body tr.address .widefat tr.highlight { background: var(--pri-soft); }
body.modules #body tr.address .widefat tr.highlight-hover:hover { background: var(--hover); }
body.modules #body tr.address .widefat a:not(.arrow) {
color: var(--ink);
text-decoration: none;
font-weight: 700;
font-size: 13px;
}
body.modules #body tr.address .widefat td a:not(.arrow):hover { color: var(--pri); }
/* Add-... action rows -> teal. */
body.modules #body tr.address .widefat a[href*="address_id=new"],
body.modules #body tr.address .widefat a[href*="address_id=old"],
body.modules #body tr.address .widefat a[href*="person_id=new"],
body.modules #body tr.address .widefat a[href*="person_id=old"] {
color: var(--pri);
font-weight: 600;
}
body.modules #body tr.address .arrow.right { color: #cbd5e1; }
/* Address-detail field rows get separators like the mockup. */
body.modules #body tr.address > td:nth-child(2) > table:nth-of-type(2) td {
border-bottom: 1px solid #eef2f6;
}
/* Contact avatar + name column (avatar span added in Address.inc.php). */
body.modules #body tr.address .tw-avatar {
width: 36px; height: 36px; border-radius: 10px;
background: var(--bg, #e2e8f0); color: var(--c, #475569);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px; flex: none;
}
body.modules #body tr.address td:has(> .tw-avatar) { display: flex; align-items: center; gap: 11px; }
body.modules #body tr.address .tw-namecol { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
body.modules #body tr.address .tw-namecol a { color: var(--pri); font-weight: 700; font-size: 13.5px; }
body.modules #body tr.address .tw-sub { font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }
body.modules #body tr.address .tw-imgs { margin-left: auto; }
/* Residence / mailing -> green-check rows. */
body.modules #body tr.address > td:nth-child(2) > table:nth-of-type(3) td:nth-child(3) {
color: #16a34a; font-weight: 700; font-size: 12.5px;
}
body.modules #body tr.address > td:nth-child(2) > table:nth-of-type(3) img { display: none; }
/* Swap the list's +/- PNG buttons for clean glyphs (real app renders PNGs). */
body.modules #body tr.address img[src*="btn/add.png"] {
content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%230e7490%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
width: 15px !important; height: 15px !important; vertical-align: middle;
}
body.modules #body tr.address img[src*="btn/remove.png"] {
content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23dc2626%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
width: 14px !important; height: 14px !important; vertical-align: middle;
}
body.modules #body tr.address img[src*="btn/compass_rose.png"] { display: none; }
/* --- Selected-contact state -----------------------------------------------
When a contact is picked from "Contacts at this Address", td3 (the contact
detail: Contact Information + Additional Information) becomes non-empty. Then
re-flow the row to three columns — addresses | contacts | detail — promote
the middle cell's tables into that grid (display:contents), drop the Address
and Primary/Mailing cards, and drop the contact detail into the freed column
so it replaces Address. Default (no contact) keeps the base two-column flow. */
body.modules #body tr.address:has(> td:nth-child(3):not(:empty)) {
grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
body.modules #body tr.address:has(> td:nth-child(3):not(:empty)) > td:nth-child(2) {
display: contents;
}
body.modules #body tr.address:has(> td:nth-child(3):not(:empty)) > td:nth-child(2) > table:nth-of-type(1) {
grid-column: 2;
grid-row: 1;
}
body.modules #body tr.address:has(> td:nth-child(3):not(:empty)) > td:nth-child(2) > table:nth-of-type(2),
body.modules #body tr.address:has(> td:nth-child(3):not(:empty)) > td:nth-child(2) > table:nth-of-type(3) {
display: none;
}
/* Contact Information (td3) and the Additional Information category fieldsets
(td4) sit side by side in the two freed columns. */
body.modules #body tr.address:has(> td:nth-child(3):not(:empty)) > td:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
body.modules #body tr.address:has(> td:nth-child(3):not(:empty)) > td:nth-child(4) {
grid-column: 4;
grid-row: 1;
align-self: start;
}
/* Contact-detail fieldsets (e.g. "Additional Information") render as a bare
|