wrapped, a JS-filled , or an input.
The tones are the theme's own: --cui-body-color (#2c384a) stays on values, captions
drop to the muted grey CoreUI uses for secondary text. Weight 600 keeps the caption
legible at the lower contrast and reinforces "this is the name of the thing". Inputs
are unaffected - a readonly input already has its own grey field to sit in.
To revert: delete this block. */
.criteria-flex .search-panel .form-group > label:not(.inline-label),
.sv-row > .sv-label {
color: var(--sv-label, #6b7a8d);
font-weight: 600;
}
/* A value the page DID wrap (, , a JS-filled div) should not be shouted twice -
it keeps body ink, and any bold it carries now reads as emphasis against a muted
caption rather than competing with one. */
.criteria-flex .search-panel .form-group > b,
.criteria-flex .search-panel .form-group > span:not(.badge),
.criteria-flex .search-panel .form-group > div {
/* sv-ink first: --cui-body-color is a LIGHT-ONLY literal, and these display
values rendered dark-on-dark once the panels went token-dark */
color: var(--sv-ink, var(--cui-body-color));
}
/* ---------- Disabled checkboxes / radios: readable, not invisible ----------
A disabled checkbox is drawn by the browser in a pale grey that all but vanishes on a
white card, and a disabled CHECKED one is the worst case: a light grey tick inside a
light grey box. That matters here because several read-only panels use disabled boxes
to REPORT state rather than to collect it - the RIBS case NYCDMV registration flags
(Reg Expired, Suspended, Revoked ...) are a status list the user has to be able to
read at a glance.
Rendering is taken over with appearance:none for the disabled state only, because
nothing else is reliable: the UA paints disabled controls its own way, and opacity /
filter / accent-color are honoured inconsistently across Chrome, Firefox and Safari.
Interactive (enabled) boxes keep native rendering untouched, so focus rings, keyboard
behaviour and platform look are unaffected - and a disabled control has no interaction
to break.
The checked mark is a background SVG rather than a ::before, since pseudo-elements on
input elements are not dependable outside Chrome. 13px matches the native box closely
enough to sit level with enabled boxes in the same column.
To revert the experiment: delete this block. */
input[type='checkbox']:disabled,
input[type='radio']:disabled {
-webkit-appearance: none;
appearance: none;
width: 13px;
height: 13px;
margin: 0 3px 0 0;
vertical-align: middle;
box-sizing: border-box;
border: 1px solid var(--sv-line-strong, #8a99ab);
background-color: var(--sv-fill, #f0f2f5);
opacity: 1; /* beat any UA/theme fading */
cursor: not-allowed;
}
input[type='radio']:disabled { border-radius: 50%; }
input[type='checkbox']:disabled { border-radius: 3px; }
/* Checked + disabled: the state a read-only panel is actually reporting. Tinted box,
firm border and a dark tick, so "ticked" reads from across the room while still
looking inert rather than clickable. */
input[type='checkbox']:disabled:checked {
border-color: var(--sv-accent, #2c384a);
background-color: var(--sv-accent-chip, #d7e2ee);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232c384a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 11px 11px;
}
input[type='radio']:disabled:checked {
border-color: var(--sv-accent, #2c384a);
background-color: var(--sv-card, #fff);
background-image: radial-gradient(#2c384a 0, #2c384a 3px, transparent 3.5px);
}
/* ---------- Bootstrap button accent (login page + any BS buttons) ---------- */
.btn-primary {
background-color: var(--cui-btn-bg);
border-color: var(--cui-btn-bg);
color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: var(--cui-btn-hover);
border-color: var(--cui-btn-hover);
color: #fff;
}
.btn-link { color: var(--cui-link); }
/* ---------- login (welcome.jsp) ---------- */
/* CoreUI-style sign-in card: white, bordered, centered; sits over the splash
image on desktop. On phones the splash/overlay classes are removed by the
page's own JS, so the card floats on the plain light background. */
.form-signin {
background-color: #fff;
border: 1px solid var(--cui-card-border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 21, 0.18);
padding: 2rem 1.75rem;
width: 100%;
max-width: 400px;
margin: 8vh auto 0;
}
@media (max-width: 700px) {
body#login-placement { background-color: var(--cui-body-bg) !important; }
.form-signin {
margin: 3vh auto 0;
max-width: 94vw;
box-shadow: 0 1px 4px rgba(0, 0, 21, 0.1);
}
}