/* ==========================================================================
LLI - in-account form pages
==========================================================================
Currently: app-course-select.php and app-course-register.php.
Two scopes: .lli-form-page for what both share, .lli-course-form for
what belongs only to the course-selection screen.
WHY THIS FILE EXISTS SEPARATELY FROM THE PAGE
The label and field markup for those dropdowns is emitted by
_lib/_html_object_admin.php :: ObjPublicCourse(), which is shared with
dashboard.php. Changing the grid classes inside that helper would silently
restyle the dashboard too, so nothing there is touched: the layout is
corrected here instead, scoped under .lli-course-form, and only the page
that opts in by carrying that class is affected.
WHAT WAS WRONG
The helper emits a Bootstrap 3 HORIZONTAL form - label in col-md-3, field in
col-md-6. Below 992px those columns collapse to full width, which stacks the
pieces correctly but leaves them inheriting the theme's centred text and
leaves the field at a width the theme decides. The result on a phone was
centred labels over a field that did not line up with anything. These rules
make the stack explicit and left-aligned at every width, so there is no
size at which the form is laid out by accident.
NO INLINE STYLES: the page carries none, and neither does this layout.
========================================================================== */
.lli-course-form {
--lli-ink: #1a2340;
--lli-muted: #8a93a8;
--lli-brand: #0b1f66;
--lli-field: #f3f6fb;
--lli-line: #d9e0ec;
--lli-error: #c0392b;
text-align: left;
}
/* The page heading, left-aligned with the fields beneath it rather than
centred over them. Declared on .lli-form-page so every page in this family
gets the same heading - Course Registration, Change Password, Registered
Course(s), Registered Certification(s), Service/Facility Registration. */
.lli-form-page h2,
.lli-course-form h2 {
margin: 0 0 24px;
font-size: 24px;
line-height: 1.3;
font-weight: 700;
text-align: left;
color: #1a2340;
color: var(--lli-ink);
}
/* ------------------------------------------------------------ the fields --
float:none + width:100% overrides the helper's col-md-3 / col-md-6 at EVERY
width, not just below the breakpoint where bootstrap would have done it.
That is the point: one layout, so nothing changes shape unpredictably
between a tablet and a laptop. */
.lli-course-form .form-group { margin: 0 0 18px; }
.lli-course-form .form-group > .control-label,
.lli-course-form .form-group > div[class*="col-"] {
float: none;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.lli-course-form .control-label {
display: block;
text-align: left;
padding-top: 0;
margin-bottom: 8px;
font-size: 14px;
font-weight: 700;
color: #1a2340;
color: var(--lli-ink);
}
/* Matches the account pages: same fill, same radius, same focus ring, so the
two halves of the site do not look like two products. Height comes from the
shared rule below, not from here. */
.lli-course-form select.form-control,
.lli-course-form input.form-control {
width: 100%;
border: 1px solid #d9e0ec;
border: 1px solid var(--lli-line);
background-color: #f3f6fb;
background-color: var(--lli-field);
border-radius: 10px;
padding: 0 14px;
font-size: 15px;
color: #1a2340;
color: var(--lli-ink);
box-shadow: none;
transition: background-color .15s, border-color .15s, box-shadow .15s;
}
/* A long option must not widen the control. The closed select clips its text
by default with no indication that anything was cut; ellipsis says so.
NOTE this governs the CLOSED control only - the open option list is drawn by
the browser itself and no stylesheet can size it. See the note in
app-course-select.php. */
.lli-course-form select.form-control {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
/* Chrome adds no room for the arrow when text is clipped. */
padding-right: 36px;
}
/* Belt and braces: nothing inside this form may push the PAGE sideways. */
.lli-course-form,
.lli-form-page { max-width: 100%; }
.lli-course-form select.form-control:focus,
.lli-course-form input.form-control:focus {
background-color: #fff;
border-color: #0b1f66;
border-color: var(--lli-brand);
box-shadow: 0 0 0 3px rgba(11, 31, 102, .12);
outline: 0;
}
.lli-course-form .has-error select.form-control,
.lli-course-form .has-error input.form-control {
border-color: #c0392b;
border-color: var(--lli-error);
background-color: #fff;
}
.lli-course-form .help-block {
display: block;
margin-top: 6px;
font-size: 13px;
color: #c0392b;
color: var(--lli-error);
}
/* The helper wraps each field in .input-icon.right and drops a warning icon in
when validation fails. Left as a plain block so the icon does not sit on top
of the native select arrow, which cannot be moved. */
.lli-course-form .input-icon { position: relative; }
.lli-course-form .input-icon > .fa-warning {
display: inline-block;
margin: 0 0 6px;
color: #c0392b;
color: var(--lli-error);
}
/* ------------------------------------------------------------ the action --
Full width on a phone - a 150px button floating in a 320px viewport is hard
to hit and reads as unfinished - and shrink-to-fit from 480px up. */
.lli-course-form .lli-actions { margin-top: 26px; text-align: center; }
.lli-course-form .lli-actions .btn {
display: block;
width: 100%;
height: 54px; /* same as the fields above it */
border: 0;
border-radius: 10px;
background-color: #0b1f66;
background-color: var(--lli-brand);
color: #fff;
font-size: 16px;
font-weight: 600;
padding: 0 28px;
transition: background-color .15s;
}
.lli-course-form .lli-actions .btn:hover,
.lli-course-form .lli-actions .btn:focus { background-color: #0a2a8a; color: #fff; }
@media (min-width: 480px) {
.lli-course-form .lli-actions .btn { display: inline-block; width: auto; min-width: 240px; }
}
/* On a wide screen the three dropdowns should not stretch to the full width of
a desktop content column - a 1200px-wide select is hard to scan. Capped, and
left-aligned with the heading. */
@media (min-width: 768px) {
.lli-course-form .form-group > div[class*="col-"] { max-width: 520px; }
.lli-form-page h2,
.lli-course-form h2 { font-size: 26px; }
}
/* ==========================================================================
.lli-form-page - the shared layout for logged-in form pages
==========================================================================
Applied to app-course-select.php and app-course-register.php.
WHY IT IS NEEDED AT ALL
The fields on these pages are emitted by two shared helpers in
_lib/_html_object_admin.php - ObjPublicCourse() and objUserField() - and
both write BOOTSTRAP HORIZONTAL FORM markup:
…field…
col-lg-* only takes effect from 1200px up. Below that the label and the
field are plain full-width blocks that inherit whatever text-align the
surrounding theme happens to set - which is centre. That is the whole bug
in the screenshots: centred labels sitting over left-aligned values.
The helpers are shared with dashboard.php, app-course-register-tab.php and
app-certification-register.php, so none of them is edited. The layout is
corrected here, and only a page that opts in by carrying .lli-form-page is
affected.
========================================================================== */
.lli-form-page {
text-align: left;
/* The space the button needed. Content used to end flush against the blue
footer; this gives the page a consistent foot at every width. */
padding-bottom: 40px;
}
/* Left-aligned at EVERY width, not only below the breakpoint bootstrap would
have acted on. One layout, so nothing re-flows unpredictably between a
tablet and a laptop. */
.lli-form-page .form-group > label.control-label,
.lli-form-page .form-group > div[class*="col-"] {
float: none;
width: 100%;
padding-left: 0;
padding-right: 0;
text-align: left;
}
.lli-form-page .control-label {
display: block;
text-align: left;
padding-top: 0;
margin-bottom: 8px;
font-size: 14px;
font-weight: 700;
color: #1a2340;
}
/* The required asterisk the helper emits as . */
.lli-form-page .control-label .require { color: #c0392b; }
.lli-form-page .form-group { margin: 0 0 18px; }
/* .form-control only: checkboxes, radios and the theme's own controls are left
exactly as they are, so nothing that is not a text-style field is stretched
to the full width of the column. */
.lli-form-page .form-control {
width: 100%;
max-width: 520px;
border: 1px solid #d9e0ec;
border-radius: 10px;
padding: 8px 14px;
font-size: 15px;
color: #1a2340;
background-color: #fff;
box-shadow: none;
}
/* Height is set ONCE, in the block further down - see "taller fields". This
rule used to repeat it at 46px, and because its selector is more specific
than that block's, 46px won no matter what the later rule said. That is why
the fields never grew. Padding only from here on. */
.lli-form-page select.form-control,
.lli-form-page input[type="text"].form-control,
.lli-form-page input[type="password"].form-control { padding: 0 16px; }
.lli-form-page .form-control:focus {
border-color: #0b1f66;
box-shadow: 0 0 0 3px rgba(11, 31, 102, .12);
outline: 0;
}
.lli-form-page .has-error .form-control { border-color: #c0392b; }
.lli-form-page textarea.form-control,
.lli-form-page textarea { width: 100%; max-width: 520px; height: auto; }
/* ------------------------------------------------------- the summary card --
Session / Course Name / Total Amount and so on: a label column and a value
column that collapse to full-width blocks on a narrow screen. Rendered as a
label ABOVE its value, both left-aligned, with the value carrying the
emphasis - which is the one the reader is actually looking for. */
.lli-form-page .well { background-color: #f7f9fc; border: 1px solid #e3e8f0; border-radius: 12px; }
.lli-form-page .well .row { margin-left: 0; margin-right: 0; }
.lli-form-page .well .row > div[class*="col-"] {
float: none;
width: 100%;
padding-left: 0;
padding-right: 0;
text-align: left;
}
/* The label column is the odd one: the helper gives it no class of its own, so
it is addressed by position. */
.lli-form-page .well .row > div[class*="col-"]:first-child {
font-size: 13px;
font-weight: 700;
color: #5c6478;
margin-bottom: 2px;
}
.lli-form-page .well .row > div[class*="col-"]:last-child {
font-size: 15px;
color: #1a2340;
margin-bottom: 14px;
}
.lli-form-page .well .row:last-child > div[class*="col-"]:last-child { margin-bottom: 0; }
/* --------------------------------------------------------- section titles --
The portlet caption and the fieldset legend are the page's headings. The
icon the caption carries was glued to its text with no gap. */
.lli-form-page .portlet-title .caption,
.lli-form-page legend {
text-align: left;
font-size: 18px;
font-weight: 700;
color: #1a2340;
}
.lli-form-page .portlet-title .caption > i { margin-right: 8px; }
.lli-form-page legend { border-bottom: 1px solid #e3e8f0; padding-bottom: 8px; }
/* ---------------------------------------------------------- wider screens --
From 768px the fields stop growing with the column: a text field as wide as
a desktop content area is hard to scan, and the cap keeps the form reading
as one column of controls rather than as full-width bars. */
@media (min-width: 768px) {
.lli-form-page .well .row > div[class*="col-"]:first-child { font-size: 13.5px; }
}
@media (max-width: 480px) {
.lli-form-page { padding-bottom: 28px; }
.lli-form-page .form-control { max-width: none; }
.lli-form-page textarea.form-control,
.lli-form-page textarea { max-width: none; }
}
/* ==========================================================================
Wide tables - app-register-course-list.php
==========================================================================
A seven-column table (No / Tracking ID / Course Name / Schedule / Status /
Certificate Status / Action) cannot be made to fit a 390px phone. Squeezing
it produced the screenshot: every cell wrapped to one word per line, the
right-hand columns fell off the screen, and there was no way to reach them
because nothing on the page could scroll sideways.
So the table is given somewhere to scroll instead. .lli-table-wrap is the
viewport, .lli-table keeps a min-width wide enough for the content to stay
legible, and the two together mean the page itself never scrolls sideways -
only the table does.
WHY NOT STACK EACH ROW INTO A CARD
That is the other common answer, and it is wrong here: these rows are
compared against each other (which course, which status, which needs
action), and comparison is exactly what stacking destroys.
========================================================================== */
.lli-table-wrap {
width: 100%;
overflow-x: auto;
/* Momentum scrolling on iOS; harmless elsewhere. */
-webkit-overflow-scrolling: touch;
/* Keeps the shadow of a scrolled-away column from being clipped. */
padding-bottom: 2px;
margin-bottom: 18px;
}
/* Below this the columns start wrapping a word per line again. Above it the
table simply fills the container, so there is no scrollbar on a laptop.
The figure is per table, not global: a five-column list needs less room than
a seven-column one, and forcing both to the same width would make the
shorter one scroll for no reason. */
.lli-table { min-width: 840px; margin-bottom: 0; }
.lli-table--5col { min-width: 640px; }
/* app-register-certification-list.php, by position:
1 No. 2 Tracking ID 3 Certification 4 Status 5 Action */
.lli-table--5col > thead > tr > th:nth-child(3),
.lli-table--5col > tbody > tr > td:nth-child(3) { width: 40%; min-width: 220px; text-align: left; }
.lli-table--5col > thead > tr > th:nth-child(4),
.lli-table--5col > tbody > tr > td:nth-child(4) { width: 17%; min-width: 120px; text-align: center; }
.lli-table--5col > thead > tr > th:nth-child(5),
.lli-table--5col > tbody > tr > td:nth-child(5) { width: 20%; min-width: 170px; text-align: center; }
.lli-table--5col > thead > tr > th:nth-child(6),
.lli-table--5col > tbody > tr > td:nth-child(6),
.lli-table--5col > thead > tr > th:nth-child(7),
.lli-table--5col > tbody > tr > td:nth-child(7) { width: auto; min-width: 0; }
.lli-table > thead > tr > th {
background-color: #f3f6fb;
border-bottom: 2px solid #e3e8f0;
font-size: 13px;
font-weight: 700;
color: #1a2340;
padding: 12px 10px;
white-space: nowrap; /* a header must never wrap to one word per line */
vertical-align: middle;
}
.lli-table > tbody > tr > td {
padding: 12px 10px;
font-size: 14px;
color: #1a2340;
vertical-align: middle;
border-top: 1px solid #eef1f6;
}
.lli-table > tbody > tr:hover > td { background-color: #f7f9fc; }
/* Column widths and alignment, by position - the markup carries no inline
style, so this is the only place they are stated.
1 No. 2 Tracking ID 3 Course Name
4 Schedule 5 Status 6 Certificate Status
7 Action */
.lli-table > thead > tr > th:nth-child(1),
.lli-table > tbody > tr > td:nth-child(1) { width: 5%; text-align: center; }
.lli-table > thead > tr > th:nth-child(2),
.lli-table > tbody > tr > td:nth-child(2) { width: 14%; white-space: nowrap; }
.lli-table > thead > tr > th:nth-child(3),
.lli-table > tbody > tr > td:nth-child(3) { width: 26%; min-width: 210px; }
.lli-table > thead > tr > th:nth-child(4),
.lli-table > tbody > tr > td:nth-child(4) { width: 15%; min-width: 150px; }
.lli-table > thead > tr > th:nth-child(5),
.lli-table > tbody > tr > td:nth-child(5) { width: 12%; text-align: center; }
.lli-table > thead > tr > th:nth-child(6),
.lli-table > tbody > tr > td:nth-child(6) { width: 13%; text-align: center; }
.lli-table > thead > tr > th:nth-child(7),
.lli-table > tbody > tr > td:nth-child(7) { width: 15%; text-align: center; min-width: 170px; }
/* The action cell holds stacked buttons; give them room to breathe rather than
sitting on each other's baseline. */
.lli-table .btn { margin: 2px 0; white-space: normal; }
/* Replaces the inline min-height the page used to carry, so a short list does
not leave the footer riding up the screen. */
.lli-min-h { min-height: 300px; }
/* The scroll affordance. Without something visible, a table that scrolls looks
identical to one that is simply cut off - which is how the original read. */
@media (max-width: 991px) {
.lli-table-wrap {
border: 1px solid #e3e8f0;
border-radius: 10px;
}
.lli-table-wrap::-webkit-scrollbar { height: 8px; }
.lli-table-wrap::-webkit-scrollbar-track { background: #f3f6fb; border-radius: 0 0 10px 10px; }
.lli-table-wrap::-webkit-scrollbar-thumb { background: #c3cbdb; border-radius: 8px; }
/* Firefox and any browser that honours the standard property. */
.lli-table-wrap { scrollbar-width: thin; scrollbar-color: #c3cbdb #f3f6fb; }
}
/* ==========================================================================
.lli-form-page--center - the form block, centred on a wide screen
==========================================================================
On a laptop the content column is ~900px wide while the form is a single
column of controls, so left-aligning the block left a large empty margin on
the right and the form read as though it had slipped off-centre.
TWO DIFFERENT KINDS OF ALIGNMENT, AND ONLY ONE OF THEM CHANGES
The BLOCK is centred in the page. The CONTENT of the block - labels, field
text, help text - stays left-aligned, which is what makes a form scannable:
a reader follows one left edge down the column. Centring the text as well
is what the original theme did, and it is the thing that made these pages
hard to read in the first place.
Applied to the form pages only. The two list pages keep their full width,
because a table centred inside a narrower box would have less room to show
its columns and would need to scroll sooner.
========================================================================== */
.lli-form-page--center > h2,
.lli-form-page--center > .row,
.lli-form-page--center > form {
max-width: 620px;
margin-left: auto;
margin-right: auto;
float: none;
}
/* The bootstrap column inside the row carries its own float, width and - on
one page - an offset that shifted the whole form right. All three are
neutralised so the centring above is the only thing positioning the block. */
.lli-form-page--center > .row > div[class*="col-"] {
float: none;
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
/* Inside a block that is already capped, a second cap on the field would leave
the label wider than the control it belongs to. */
.lli-form-page--center .form-control,
.lli-form-page--center textarea.form-control,
.lli-form-page--center textarea { max-width: none; }
.lli-form-page--center .form-group > div[class*="col-"] { max-width: none; }
/* The notification block belongs to the same column as the form. */
.lli-form-page--center > .alert,
.lli-form-page--center > .note { max-width: 620px; margin-left: auto; margin-right: auto; }
/* Below the cap there is nothing to centre - the block already fills the
width - so the rules simply stop applying rather than fighting the phone
layout. */
/* ==========================================================================
INLINE LABELS FROM 768px - the layout in the approved design
==========================================================================
Below 768px the label stays ABOVE its field (the mobile layout already in
use, unchanged). From 768px up the two sit on one row, label right-aligned
against the field, which is what the design shows and what every other
screen in the product does.
WHY FLEX AND NOT THE BOOTSTRAP FLOATS THAT ARE ALREADY IN THE MARKUP
The three helpers that emit these fields disagree about the grid: one writes
col-md-3 + col-md-6, one col-lg-3 + col-lg-{size}, and one takes its label
width from $GLOBALS["G_LABEL_COL"]. Their breakpoints therefore differ -
col-md- switches at 992px, col-lg- at 1200px - so with the native floats the
same form changes shape at two different widths depending on which helper
drew which row. One flex rule keyed on the SHAPE of the markup (a label
followed by a column div) gives every field the same behaviour at the same
width, whichever helper produced it, and none of the helpers has to change.
flex-wrap is on so that a form-group carrying anything beyond the usual
label + column - a stray help block, a second control - wraps it onto its
own line instead of squeezing the row.
========================================================================== */
/* ---------------------------------------------------- taller fields, both --
Applies at every width, mobile included, per the brief.
THE ONLY PLACE A FIELD HEIGHT IS DECLARED. Two earlier rules set 46px here
as well, one of them with a more specific selector, so the taller value was
silently discarded - the fields looked unchanged however large the number
in this block grew. Keep it that way: one declaration, no repeats.
52px matches the login and register cards, so a field is the same size
wherever it appears in the product. */
.lli-form-page .form-control,
.lli-form-page select.form-control,
.lli-form-page input[type="text"].form-control,
.lli-form-page input[type="password"].form-control,
.lli-course-form select.form-control,
.lli-course-form input.form-control {
/* Superseded by the !important declaration at the end of this file - the
remote LUMS theme outranks a plain value here. Kept as the readable
statement of intent; the number must match the one below. */
height: 54px;
padding: 0 16px;
font-size: 15px;
line-height: 1.5;
}
.lli-form-page textarea.form-control,
.lli-form-page textarea {
height: auto;
min-height: 110px;
padding: 12px 16px;
line-height: 1.6;
}
.lli-form-page .form-group,
.lli-course-form .form-group { margin-bottom: 22px; }
.lli-form-page .control-label,
.lli-course-form .control-label { line-height: 1.45; }
@media (min-width: 768px) {
.lli-form-page .form-group,
.lli-course-form .form-group {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
/* 30% is the proportion in the design. max-width repeats the basis so the
column cannot grow when a label runs to two lines.
LEFT-ALIGNED, not right. Right-aligning pushes every label to the inner
edge of its column and leaves a block of empty space between the page
margin and the shortest label - which is the gap marked in the review.
Left-aligning starts each label on the SAME left edge as the heading
above the form, so the eye follows one vertical line down the page:
heading, then every label, then the action button. */
.lli-form-page .form-group > label.control-label,
.lli-course-form .form-group > label.control-label {
flex: 0 0 30%;
max-width: 30%;
width: 30%;
text-align: left;
padding-right: 18px;
/* Lines the label up with the text INSIDE the field rather than with
the top of its border. */
padding-top: 15px;
margin-bottom: 0;
}
.lli-form-page .form-group > div[class*="col-"],
.lli-course-form .form-group > div[class*="col-"] {
flex: 1 1 0;
width: auto;
max-width: none;
min-width: 0; /* lets a long value shrink instead of overflowing */
}
/* A field with no label - the policy consent block, the CNIC checkbox -
spans the FULL section width and starts on the same left edge as the
section heading above it. Indenting it to the field column was the
earlier behaviour and it left a large empty rectangle to the left of the
checkbox, which read as a missing label rather than as alignment. A
block with no label has nothing to align to, so it aligns to the
section. */
.lli-form-page .form-group > div[class*="col-"]:first-child {
flex: 1 1 100%;
max-width: 100%;
margin-left: 0;
}
/* The centred block has to be wider now that it holds two columns: at
620px the field beside a 30% label was too narrow to read. */
.lli-form-page--center > h2,
.lli-form-page--center > .row,
.lli-form-page--center > form,
.lli-form-page--center > .alert,
.lli-form-page--center > .note { max-width: 880px; }
/* The action row is centred on the section rather than tied to the field
column: it closes the form, so it belongs to the whole block and not to
the last field above it. */
.lli-form-page--center .lli-actions,
.lli-course-form .lli-actions { margin-left: 0; }
}
/* On a phone every rule above is inert: the form-group is not flex, the label
is a block above its field, and nothing is indented. Stated here so it is
clear the mobile layout is a deliberate default and not an oversight. */
@media (max-width: 767px) {
.lli-form-page .form-group > label.control-label,
.lli-course-form .form-group > label.control-label {
text-align: left;
padding-right: 0;
padding-top: 0;
margin-bottom: 8px;
}
.lli-form-page .form-group > div[class*="col-"]:first-child { margin-left: 0; }
}
/* ------------------------------------------------------------ action rows --
One class for every submit row. The pages used to position these with
bootstrap offsets chosen for the old horizontal grid (col-md-offset-4 on
one, offset-2 on another, offset-md-3 - a Bootstrap 4 name that does
nothing here - on a third), so no two buttons sat in the same place. They
now inherit the 30% indent from the field column above them. */
.lli-form-page .lli-actions { margin-top: 26px; text-align: center; }
.lli-form-page .lli-actions--spaced { margin-top: 50px; margin-bottom: 50px; }
.lli-form-page .lli-actions .btn {
display: block;
width: 100%;
height: 54px;
border: 0;
border-radius: 10px;
background-color: #0b1f66;
color: #fff;
font-size: 16px;
font-weight: 600;
padding: 0 28px;
}
.lli-form-page .lli-actions .btn:hover,
.lli-form-page .lli-actions .btn:focus { background-color: #0a2a8a; color: #fff; }
@media (min-width: 480px) {
.lli-form-page .lli-actions .btn { display: inline-block; width: auto; min-width: 240px; }
}
/* ==========================================================================
The course summary card - full width, figures on one line
==========================================================================
app-course-register.php only, via .lli-has-summary.
TWO SEPARATE WIDTHS ON ONE PAGE
The summary is a READING block: a course title runs to two lines inside an
880px column and the card ends up taller than the form it introduces. The
fields below it are an ENTRY block, and those stay at 880px because a text
input as wide as a desktop is hard to scan and hard to aim at. So the card
is released to the full content width while everything below keeps the cap
it already had - which is what the review asked for.
========================================================================== */
@media (min-width: 768px) {
/* Release the outer cap on this page... */
.lli-has-summary > .row,
.lli-has-summary > form { max-width: none; }
/* ...and re-apply it to the parts that are still data entry. */
.lli-has-summary fieldset,
.lli-has-summary .lli-actions,
.lli-has-summary > .row > div[class*="col-"] > form > .row {
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
}
/* ------------------------------------------------------- the figures row --
Total Amount / Discount / Payable Amount are one line of information, not
three facts that need a row each. Grid rather than float so the three share
the width evenly and collapse to one column on a phone without a second set
of rules - auto-fit does it from the minimum, so a narrow card simply gets
fewer columns.
The rows inside keep their existing label/value markup; only the stacking
changes, so nothing about the PHP that fills them moves. */
.lli-summary-figures {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 4px 28px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #e3e8f0;
}
/* Undo the full-width stacking the card's other rows use: inside this grid a
row is a cell, not a line. */
.lli-form-page .lli-summary-figures .row { margin: 0; }
.lli-form-page .lli-summary-figures .row > div[class*="col-"] {
float: none;
width: 100%;
padding-left: 0;
padding-right: 0;
text-align: left;
}
.lli-form-page .lli-summary-figures .row > div[class*="col-"]:first-child {
font-size: 13px;
font-weight: 700;
color: #5c6478;
margin-bottom: 2px;
}
.lli-form-page .lli-summary-figures .row > div[class*="col-"]:last-child {
font-size: 16px;
font-weight: 700;
color: #1a2340;
margin-bottom: 0;
}
/* The figure that is actually owed carries the emphasis. :last-child so it
follows the markup whether or not a discount row is present. */
.lli-summary-figures .row:last-child > div[class*="col-"]:last-child { color: #0b1f66; }
/* ------------------------------------------- rows whose label is EMPTY ----
Not "missing" - empty. objUserField() always writes the label element and
blanks its text for a CHECKBOX field (see the $opt reset in
_html_object_admin.php), and two blocks on the registration page do the
same by hand. So the 30% column is still there, holding nothing, and the
consent text starts a third of the way across the card with a large empty
rectangle beside it - which reads as a label that failed to load.
:empty matches only a label with no text and no children, so a real label
can never be hidden by this. The field beside it then spans the full
section width, aligned with the section heading above.
========================================================================== */
@media (min-width: 768px) {
.lli-form-page .form-group > label.control-label:empty,
.lli-course-form .form-group > label.control-label:empty { display: none; }
.lli-form-page .form-group > label.control-label:empty + div[class*="col-"],
.lli-course-form .form-group > label.control-label:empty + div[class*="col-"] {
flex: 1 1 100%;
max-width: 100%;
margin-left: 0;
}
}
/* ==========================================================================
Two overrides of stylesheets this project does not control
==========================================================================
Both of these were found by reading nassets/css/ied.css after the earlier
fixes appeared to do nothing.
1. .btn-submit carries `float: right` (ied.css:2946). A floated button
ignores text-align on its parent entirely, which is why the Register
button stayed hard right while every other button centred. Clearing the
float is what makes the centring apply.
2. .form-control is declared at height:70px in ied.css and again by the
LUMS theme loaded from lums.edu.pk, which this project cannot edit or
inspect. The height below is marked !important because that remote sheet
is the only thing that can still outrank it, and a field height that
silently reverts is exactly the bug being fixed here. It is scoped to
.lli-form-page, so nothing outside these pages is affected.
========================================================================== */
.lli-form-page .lli-actions .btn,
.lli-course-form .lli-actions .btn {
float: none;
margin-left: auto;
margin-right: auto;
}
.lli-form-page .form-control,
.lli-form-page select.form-control,
.lli-form-page input[type="text"].form-control,
.lli-form-page input[type="password"].form-control,
.lli-form-page input[type="file"].form-control,
.lli-course-form select.form-control,
.lli-course-form input.form-control {
height: 54px !important;
padding: 0 16px;
font-size: 15px;
line-height: 1.5;
}
/* A file input needs its own padding: the browser draws a button inside the
field, and zero vertical padding crops it. */
.lli-form-page input[type="file"].form-control {
padding: 12px 16px;
line-height: 1.6;
}
/* Textareas are sized by rows, not by the field height above. */
.lli-form-page textarea.form-control,
.lli-form-page textarea {
height: auto !important;
min-height: 120px;
padding: 12px 16px;
}