/* SweetAlert2 wearing the platform theme. * * Loaded on every page from the master layout, because dialogs are opened from * fourteen different modules and only three of them set a popup customClass — * styling this per page is how eleven dialogs ended up looking like somebody * else's software. * * Why anything is needed at all: the vendored sweetalert2 predates the * library's --swal2-* custom properties, so there is nothing to re-point. And * the theme's own build (vendor/libs/sweetalert2/sweetalert2.css) does style * the fields — with literal hexes at a 17px font and a 10px radius, which is * neither what .form-control looks like nor something an operator can change * from the palette settings. * * Why the html[class] prefix: those theme rules are * `.dark-style .swal2-popup .swal2-textarea`, three classes, and they mark the * border !important. Matching their specificity and relying on load order * would be a coin toss — bullhorn now injects sweetalert2's stylesheet lazily * when a dismissal needs confirming, so the vendor CSS can land AFTER * everything in . The attribute selector adds the one point that settles * it in every load order, and matches whichever *-style class the theme puts on * , so this file never names light or dark. * * The values are .form-control's, read from the theme rather than invented, and * expressed through the same Bootstrap variables so a palette change carries. */ html[class] .swal2-popup { font-family: inherit; } /* The fields. sweetalert2 renders these as direct children of .swal2-popup, so * `inherit` picks up the dialog's own surface — white on light, the card colour * on dark, without this file naming either. */ html[class] .swal2-popup .swal2-input, html[class] .swal2-popup .swal2-textarea, html[class] .swal2-popup .swal2-select, html[class] .swal2-popup .swal2-file { /* calc(), like .form-control: the theme grows the border to 2px on focus and * takes the difference out of the padding, so the field does not jump. A flat * 0.5rem read as 1px too tall beside a real input. */ padding: calc(0.5rem - 1px) calc(0.875rem - 1px); font-family: inherit; font-size: 0.9375rem; font-weight: 400; line-height: 1.47; /* --bs-heading-color, not --bs-body-color: the theme's .form-control is * #d2d2e8 on dark and #636578 on light, both literals, and the heading token * is the one variable that carries exactly those. --bs-body-color is the * dimmer #a0a1b8, which is what made dialog text read as muted. */ color: var(--bs-heading-color, var(--bs-body-color)); background-color: inherit; border: 1px solid var(--bs-border-color, #d8d8dd) !important; border-radius: var(--bs-border-radius, 0.5rem); box-shadow: none; transition: border-color 0.15s ease-in-out; } /* Focus. The border thickens to 2px and the padding gives back the difference, * exactly as .form-control:focus does, so nothing reflows on tab-in. * * The colour here is only a default. gui/services.py emits the operator's focus * colour for these same selectors, and its block is rendered after this file, so * a configured palette takes it from there — which is the point: a dialog field * should focus in the same colour as a field on the page behind it. */ html[class] .swal2-popup .swal2-input:focus, html[class] .swal2-popup .swal2-textarea:focus, html[class] .swal2-popup .swal2-select:focus, html[class] .swal2-popup .swal2-file:focus { color: var(--bs-heading-color, var(--bs-body-color)); border-width: 2px !important; border-color: var(--bs-primary, #666cff) !important; padding: calc(0.5rem - 2px) calc(0.875rem - 2px); outline: 0; box-shadow: none; } html[class] .swal2-popup .swal2-input::placeholder, html[class] .swal2-popup .swal2-textarea::placeholder { color: var(--bs-secondary-color, #a0a1b8); opacity: 1; } /* The line that says what the field is for. The vendor colour is near-invisible * on the dark surface, and this is the label the whole proposal-feedback loop * depends on: an unreadable prompt gets an empty answer. */ html[class] .swal2-popup .swal2-input-label { display: block; /* .form-label's own metrics: 0.83125rem at 500, half a rem of air beneath. * The colour is deliberately --bs-body-color and not the heading token the * FIELD uses — .form-label carries no colour of its own, so it takes the body * colour, and a dialog label should read the same weight as a page label. */ margin: 0 auto 0.5rem; color: var(--bs-body-color); font-size: 0.83125rem; font-weight: 500; } /* Checkbox and radio rows carry their own background in the vendor sheet. */ html[class] .swal2-popup .swal2-checkbox, html[class] .swal2-popup .swal2-radio { background-color: inherit; color: var(--bs-body-color); } html[class] .swal2-popup .swal2-validation-message, html[class] .swal2-popup .swal2-validationerror { background-color: var(--bs-danger-bg-subtle, rgba(255, 77, 73, 0.12)); color: var(--bs-danger-text-emphasis, var(--bs-danger, #ff4d49)); font-size: 0.8125rem; border-radius: var(--bs-border-radius, 0.5rem); } html[class] .swal2-popup .swal2-validation-message::before { background-color: var(--bs-danger, #ff4d49); color: #fff; } /* The field marked in error keeps the error colour rather than the focus one. */ html[class] .swal2-popup .swal2-inputerror, html[class] .swal2-popup .swal2-inputerror:focus { border-color: var(--bs-danger, #ff4d49) !important; } html[class] .swal2-popup .swal2-footer { border-top: 1px solid var(--bs-border-color, #d8d8dd); color: var(--bs-secondary-color, #a0a1b8); font-size: 0.8125rem; } html[class] .swal2-popup .swal2-close { color: var(--bs-secondary-color, #a0a1b8); box-shadow: none; } html[class] .swal2-popup .swal2-close:hover, html[class] .swal2-popup .swal2-close:focus { color: var(--bs-body-color); background: transparent; box-shadow: none; }