/* ============================================================ * _user-forms.css — admin user create / edit modal helpers * ------------------------------------------------------------ * Shared by the admin user create, change-role, and * reset-password modals: * - inline password reveal (eye) toggle * - password rules hint that recolours on failure * - Select2 role-option secondary text (description) * * Semantic tokens only, no hex (see docs/design.md). These are * intentionally NOT scoped to a modal id: the reveal/hint * classes are reused across modals, and Select2 appends its * dropdown to , so the role-option classes must be global. * ============================================================ */ /* Password field with an inline reveal (eye) toggle ---------- */ .password-field { position: relative; } .password-field .form-control { padding-right: 38px; } .password-reveal { position: absolute; top: 0; right: 0; bottom: 0; /* span the full control height so the glyph centres regardless of input height */ width: 38px; /* matches the input's padding-right */ display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--color-text-faint); cursor: pointer; } .password-reveal:hover { color: var(--color-text-muted); } /* Password rules hint — recolours to the danger token on failure */ .password-hint { display: block; margin-top: 4px; } .password-hint--error { color: var(--color-feedback-danger); } /* Select2 role options — name + description as secondary text, mirroring the description column shown on /admin/role. */ .ng-role-option__name { display: block; } .ng-role-option__desc { display: block; margin-top: 2px; font-size: 11px; line-height: 1.3; color: var(--color-text-faint); white-space: normal; } /* Form sections — chunk a long modal form into labelled groups (e.g. Personal details / Account & access) so the fields read as digestible blocks rather than one long column. */ .ng-form-section + .ng-form-section { margin-top: var(--space-5); } .ng-form-section__title { margin: 0 0 var(--space-3); font-family: var(--font-family-display); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-faint); } /* Password strength meter — a live progress bar under the password field. JS sets data-level (weak/fair/strong) from how many complexity rules are met; the bar width + colour and the label follow. The bar is decorative (aria-hidden); the text label (aria-live) carries the level for assistive tech, so it's never colour-only. */ .ng-pw-strength { margin-top: var(--space-2); } .ng-pw-strength__track { height: 6px; border-radius: var(--radius-full); background: var(--color-bg-sunken); overflow: hidden; } .ng-pw-strength__bar { width: 0; height: 100%; border-radius: inherit; /* The BAR is a status fill, so it uses the vivid -500 status shades (the dark -700 feedback tokens, meant for text, read muddy as a fill — esp. amber). The LABEL below keeps the readable -700 feedback token. */ background: var(--color-danger-500); transition: width var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard); } .ng-pw-strength__label { display: block; margin-top: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); } .ng-pw-strength[data-level="weak"] .ng-pw-strength__bar { width: 34%; background: var(--color-danger-500); } .ng-pw-strength[data-level="fair"] .ng-pw-strength__bar { width: 67%; background: var(--color-warning-500); } .ng-pw-strength[data-level="strong"] .ng-pw-strength__bar { width: 100%; background: var(--color-success-500); } .ng-pw-strength[data-level="weak"] .ng-pw-strength__label { color: var(--color-feedback-danger); } .ng-pw-strength[data-level="fair"] .ng-pw-strength__label { color: var(--color-feedback-warning); } .ng-pw-strength[data-level="strong"] .ng-pw-strength__label { color: var(--color-feedback-success); } /* ============================================================ * Redesigned "Add a new user" modal (PR #540) — roomier + friendlier: * a dynamic initials avatar, a larger title, label-left field rows, a * wider dialog. Scoped to .ng-user-modal so other modals are untouched. * ============================================================ */ /* Wider dialog + breathing room L/R */ .ng-user-modal { width: 640px; max-width: calc(100vw - 32px); } /* De-composite the dialog: Bootstrap's fade `transform` promotes it to a GPU layer that leaves a phantom (ghost) copy of the close glyph. `transform:none` keeps it off a composited layer so the close renders exactly once. Compound selector — the class is ON the dialog (`.modal-dialog.ng-user-modal`). */ .modal.fade .ng-user-modal.modal-dialog, .modal.in .ng-user-modal.modal-dialog, .ng-user-modal.modal-dialog { transform: none !important; transition: none !important; } .ng-user-modal .modal-content { border-radius: var(--radius-xl); border: none; /* Softer + larger elevation than the default tight/dark Metronic modal shadow. */ box-shadow: 0 28px 64px -18px rgba(15, 19, 17, 0.16), 0 8px 24px -12px rgba(15, 19, 17, 0.08); } .ng-user-modal .modal-header, .ng-user-modal .modal-body, .ng-user-modal .modal-footer { padding-left: var(--space-6); padding-right: var(--space-6); } /* Header: initials avatar + larger title + subtitle, with a Phosphor close */ .ng-user-modal .modal-header { position: relative; padding-top: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border-subtle); } .ng-user-form__head { display: flex; align-items: center; gap: var(--space-4); padding-right: 36px; /* clear the absolute close button */ } .ng-user-form__heading { min-width: 0; } .ng-user-modal .modal-title { margin: 0; font-family: var(--font-family-display); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: 1.2; color: var(--color-text-strong); } .ng-user-form__subtitle { margin: 2px 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); } /* Close button: the × is a STATIC background-image (inline data-URI SVG). This is the one approach that cannot double — a painted background can't be promoted to a GPU/transform layer, so there's no compositing ghost (the earlier CSS bars used `transform:rotate`, which composited and left a phantom second ×; the FA `` un-hid its font glyph under flex; both produced the double). No pseudo-elements, no transform, no font, no child. The stroke colour is baked into the SVG to mirror --color-text-faint (#72706b) — a data- URI can't read CSS vars; hover swaps to the --color-text-default (#272624) variant. */ .ng-user-modal .modal-header .close { position: absolute; top: var(--space-5); right: var(--space-6); margin: 0; padding: 0; width: 28px; height: 28px; float: none; opacity: 1; text-shadow: none; border-radius: var(--radius-md); /* !important defeats a vendor `.close { background:… }` shorthand that otherwise wipes this. */ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3.5%203.5%20L12.5%2012.5%20M12.5%203.5%20L3.5%2012.5%22%20stroke%3D%22%2372706b%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important; background-position: center !important; background-repeat: no-repeat !important; transition: background-color var(--motion-fast) var(--ease-standard); } .ng-user-modal .modal-header .close > * { display: none !important; } /* belt-and-braces: hide any legacy /