/* THE SECURITY CODE, ONE DEFINITION FOR THE NINE PAGES THAT CARRY IT. p-u-2 (register), p-u-5 (login), p-u-7, p-u-13, p-u-15, p-u-16, p-u-17, p-fo-3 and p-me-1 all include /user/utils/security/index.jsp -- eleven include sites across those nine pages -- so they all read this file. IT IS ONE BOX NOW. The field, the picture of the code and the button for a new one used to be three boxes in a row, which left the name with nothing to sit over: centred, it named the picture. They are one field now, with the picture and the button inside it on the right, exactly where the Show control sits on a password field. The name goes inside, like every other field on the site. WHAT THE OLD STYLESHEET CARRIED, AND WHY EACH ONE WENT * width:220px a fixed width in containers of every other width * background:#EBEBEB one light grey, in all 22 themes, including the dark ones * direction:rtl on the box, then direction:ltr back on the field inside it * six !important written to beat the shared `input` rule, which a two-class selector already beats on its own * refresh_v1.png a request for a 12px arrow that never takes the theme * display:table + float, which cannot give the parts a shared height The one colour that stays fixed is the plate behind the picture. The code image is generated dark-on-light by /servlet/security/, so a dark plate would hide it. That is a property of the image, not a token that was missed. */ /* THE ROW STATES NO WIDTH AT ALL. The field inside it is a .fld, so it takes .fld's width the way every other field on the site does. The row used to carry its own 222 plus an override that removed it on a converted page -- written when .fld was 300 -- and the two disagreed the moment .fld moved to 222: the code row came out wider than the field above it. One number, in one place, and they cannot drift. */ .security_m{width:100%;margin:5px 0 12px;background:none;border:0; border-radius:0;overflow:visible;direction:ltr} /* room on the right for the picture and the button, so the digits never run under them; the digits are spaced because they are read back one at a time */ .security_m .fld input.co{padding-right:112px;letter-spacing:.14em} .security_m .fld input.co::placeholder{letter-spacing:normal;opacity:1} /* THE NAME STAYS ON THE BORDER, in this one field. Every other .fld holds its name inside until there is something to show. This box is not empty space: the picture and the button live in it, leaving about 51px where the name needs 105, so at rest it ran under the picture. On the border it has the whole top edge, and it is exactly where every other name ends up the moment anybody types -- so the field still reads as one of them. That also frees the placeholder to say what the answer looks like. */ .security_m .fld label{transform:translateY(-9px) scale(.68)} .security_m .fld input.co:focus + label{color:var(--mainColor)} /* ─── THE PICTURE, INSIDE THE FIELD ────────────────────────────────────── Its plate stays light in every theme because the servlet draws the digits dark on white. Inset from the field's edge so the field's own border still reads as the edge of the control. */ .security_m .fld .im{position:absolute;top:5px;bottom:5px;right:41px;width:72px; display:flex;align-items:center;justify-content:center;overflow:hidden; background:#ebebeb;border-radius:var(--surface-radius-2, 3px);z-index:2; pointer-events:none} /* the servlet returns 75x20 with the digits at x16..73, so a fifth of the picture is blank on the left. At this width that leaves the ink about 7px right of centre; this pulls it back. The stylesheet this replaces carried -9px for the same reason. Measured against the live servlet on 2026-09-15: if it ever draws a centred image, this line is the one to delete. */ .security_m .fld .im img{display:block;width:100%;margin:0;padding:0;filter:none; position:relative;left:-7px;mix-blend-mode:darken} /* ─── A NEW CODE ───────────────────────────────────────────────────────── Drawn rather than fetched, so it takes the theme colour on hover and costs no request. The old one was a 12px PNG that stayed the same grey in all 22 themes. */ .security_m .fld .re{position:absolute;top:5px;bottom:5px;right:5px;width:32px; float:none;cursor:pointer;z-index:2;background:var(--color-3); border-radius:var(--surface-radius-2, 3px);transition:background .2s; -webkit-tap-highlight-color:transparent} .security_m .fld .re::after{content:"";display:block;width:100%;height:100%; background:var(--color-6);transition:background .2s; -webkit-mask:var(--sec-re) no-repeat center / 16px; mask:var(--sec-re) no-repeat center / 16px} .security_m .fld .re:hover{background:var(--color-4)} .security_m .fld .re:hover::after{background:var(--mainColor)} .security_m{--sec-re:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 11A8 8 0 1 0 18.6 16'/%3E%3Cpath d='M20 5v6h-6'/%3E%3C/svg%3E")} /* ─── RIGHT TO LEFT ────────────────────────────────────────────────────── The row mirrors with the form around it: the name and the answer start from the right, and the picture and the button move to the left, which is the far edge of the field in that direction. The digits still read left to right -- European digits are a left-to-right run inside a right-to-left line, which is what an Arabic or Persian reader expects of a number. The base rules stay physical so nothing depends on logical-property support in an old WebView. */ body.rtl .security_m{direction:rtl} body.rtl .security_m .fld input.co{padding-right:13px;padding-left:112px} body.rtl .security_m .fld .im{right:auto;left:41px} body.rtl .security_m .fld .re{right:auto;left:5px} /* a container tighter than a dialog -- the invite panel, the message form -- keeps all three, with the picture giving up the width */ @media (max-width:360px){ .security_m .fld input.co{padding-right:100px} .security_m .fld .im{width:62px;right:39px} .security_m .fld .re{width:30px} body.rtl .security_m .fld input.co{padding-right:13px;padding-left:100px} body.rtl .security_m .fld .im{right:auto;left:39px} }