#page-login-signup label:first-child { font-weight:bold; } #page-login-signup input[type="checkbox"], #page-login-signup input[type="radio"]{ transform: scale(1.5); } #page-login-signup .fcontainer { margin-left: 10px; } #page-login-signup .fitem { margin-bottom: 0!important; } #page-login-signup .fdescription.required { display: none; } /* ---- Client-side validation feedback bridge ---- * Moodle's legacy QuickForm JS drops a next to the * label, which on a vertical-layout form ends up "under the field name". * The auth_ibe signup_form.js hides those by tagging them with the class * .auth-ibe-legacy-error, and instead injects a Bootstrap .invalid-feedback * under the input. The rules below add the red border on .is-invalid for * the few element types where Boost's defaults aren't enough on their own. */ #page-login-signup .auth-ibe-legacy-error { display: none !important; } #page-login-signup .invalid-feedback.auth-ibe-feedback { display: block; width: 100%; margin-top: .25rem; font-size: 80%; color: #dc3545; } /* Inputs and textareas: red border + exclamation icon pinned to the * right edge (no native widget there to clash with). */ #page-login-signup .form-control.is-invalid, #page-login-signup input.is-invalid, #page-login-signup textarea.is-invalid { border-color: #dc3545; padding-right: calc(1.5em + .75rem); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right calc(.375em + .1875rem) center; background-size: calc(.75em + .375rem) calc(.75em + .375rem); } /* Selects: same red border + exclamation icon, plus a chevron drawn as * a second background layer. Moodle/Boost normally renders the chevron * via its own background-image on the select, but setting background- * image here replaces it - that was the "chevron disappeared on invalid * select" report. CSS multi-value backgrounds let us stack both: the * exclamation goes on top (first listed) and a Bootstrap-style chevron * goes underneath, anchored to the right edge where the theme's chevron * normally lives. Padding-right is widened so the rendered option text * doesn't run under either icon. */ #page-login-signup select.is-invalid { border-color: #dc3545; padding-right: calc(1.5em + 2.5rem); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: right 1.75rem center, right .75rem center; background-size: calc(.75em + .375rem) calc(.75em + .375rem), 8px 10px; } #page-login-signup .form-control.is-invalid:focus, #page-login-signup input.is-invalid:focus, #page-login-signup textarea.is-invalid:focus, #page-login-signup select.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25); } /* Kill Bootstrap's :valid green styling on every form control on the * signup form. Our validator only ever signals errors (red); we never * want a green "success" icon, and Bootstrap's auto-paint via * `.was-validated *:valid` causes the menucustom-shows-green bug * described above. * * The :not(.is-invalid) is critical. A field that our validator has * stamped with .is-invalid is still HTML5 :valid as long as it has no * native `required` attribute - which is true of almost every field * on a Moodle profile form (Moodle uses aria-required, not the native * attribute). Without the :not, this rule's specificity (1,3,1 - the * :valid pseudo-class counts as a class) is HIGHER than the * .is-invalid rule above (1,2,0), so it would override the red border * and the exclamation icon on every text input and textarea, not just * the ones we wanted to neutralise. With :not, the rule only matches * fields that aren't already flagged as bad, which is exactly what we * want. * * .is-valid selectors are omitted: our JS never sets that class, and * Moodle's signup form doesn't either, so there's nothing to override * there. */ #page-login-signup .was-validated .form-control:valid:not(.is-invalid), #page-login-signup .was-validated input:valid:not(.is-invalid), #page-login-signup .was-validated select:valid:not(.is-invalid), #page-login-signup .was-validated textarea:valid:not(.is-invalid) { border-color: #ced4da; /* Bootstrap 4 .form-control default */ padding-right: .75rem; /* Bootstrap 4 .form-control default */ background-image: none; /* drop the green check overlay */ } #page-login-signup .was-validated .form-control:valid:not(.is-invalid):focus, #page-login-signup .was-validated input:valid:not(.is-invalid):focus, #page-login-signup .was-validated select:valid:not(.is-invalid):focus, #page-login-signup .was-validated textarea:valid:not(.is-invalid):focus { border-color: #80bdff; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); } /* advcheckbox: the actual checkbox is small, so highlight the surrounding * label text rather than trying to paint a border around a 14px checkbox. #page-login-signup .auth-ibe-invalid input[type="checkbox"] + label, #page-login-signup .auth-ibe-invalid label.form-check-label { color: #dc3545; } */ /* autocomplete (menuint): the visible Select2-style widget * (.form-autocomplete-selection) sits BEFORE the underlying and * the typing input in the DOM, so sibling selectors don't reach it. * We paint it via the .auth-ibe-invalid class on the parent .fitem * instead - that class is added by markInvalid() in signup_form.js. */ #page-auth-ibe-edit .auth-ibe-invalid .form-autocomplete-selection { border: 1px solid #dc3545; border-radius: .25rem; } #page-auth-ibe-edit .form-autocomplete-input input.is-invalid { border-color: #dc3545; padding-right: 3rem !important; background-position: right 1.5rem center !important; } #page-auth-ibe-edit .form-autocomplete-input input.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25); } /* advcheckbox + radio (multicheckbox, radioyesno): native checkbox/radio * inputs are OS-rendered so a plain `border` rule is ignored. We use * `outline` + `box-shadow` instead - both work on native form controls in * every modern browser, and combine into a clean red ring around the * input without breaking its native tick/dot rendering. Existing * .form-control-style padding from the transform: scale(1.5) above is * respected because outline doesn't take up layout space. */ #page-auth-ibe-edit .auth-ibe-invalid input[type="checkbox"], #page-auth-ibe-edit .auth-ibe-invalid input[type="radio"] { /*outline: 2px solid #dc3545;*/ /*outline-offset: 1px;*/ box-shadow: 0 0 0 .05rem rgba(220, 53, 69, 1); /*border-radius: 2px;*/ } #page-auth-ibe-edit .auth-ibe-invalid input[type="checkbox"]:focus, #page-auth-ibe-edit .auth-ibe-invalid input[type="radio"]:focus { /*outline: 2px solid #dc3545;*/ box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .35); }