clawbot
375998beaf
The signature screen showed only the text a personal message decodes to, with bidirectional, right-to-left and zero-width characters acting on it, so a site could make the message read differently from the bytes that are signed, and a message that was not hex was decoded into NUL characters. The screen now shows the hex as "Raw data" alongside the text, lays the text out left to right in byte order, and shows each control character, line and paragraph separator, and character that paints nothing (the set src/shared/symbolSpoof.js already strips) as a U+XXXX mark. A message is hex when getBytes, which signing uses, reads it; one that is not cannot be signed, so it is shown as plain text with "Sign" disabled. Model: opus-5-5
77 lines
2.5 KiB
CSS
77 lines
2.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--font-mono:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
|
"Liberation Mono", monospace;
|
|
--color-bg: #ffffff;
|
|
--color-fg: #000000;
|
|
--color-muted: #666666;
|
|
--color-border: #000000;
|
|
--color-border-light: #cccccc;
|
|
--color-hover: #eeeeee;
|
|
--color-well: #e8e8e8;
|
|
--color-danger-well: #fef2f2;
|
|
--color-section: #dddddd;
|
|
}
|
|
|
|
html.dark {
|
|
--color-bg: #000000;
|
|
--color-fg: #ffffff;
|
|
--color-muted: #aaaaaa;
|
|
--color-border: #ffffff;
|
|
--color-border-light: #444444;
|
|
--color-hover: #222222;
|
|
--color-well: #1a1a1a;
|
|
--color-danger-well: #2a0a0a;
|
|
--color-section: #2a2a2a;
|
|
}
|
|
|
|
body {
|
|
width: 396px;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Copy-flash feedback: inverts colors then fades back */
|
|
.copy-flash-active {
|
|
background-color: var(--color-fg) !important;
|
|
color: var(--color-bg) !important;
|
|
transition: none;
|
|
}
|
|
|
|
.copy-flash-fade {
|
|
transition:
|
|
background-color 225ms ease-out,
|
|
color 225ms ease-out;
|
|
}
|
|
|
|
/* An address is one atomic string, so it gets a row of its own and never
|
|
* breaks across lines. A wrapped address reads as two shorter strings, and
|
|
* two shorter strings are exactly what an address-poisoning attack needs
|
|
* the user to compare instead of the whole thing. Every view that shows an
|
|
* address puts it in one of these, alone: the colour dot, the wallet title,
|
|
* the ENS name and the explorer link all live on their own line above, so
|
|
* nothing competes with the 42 characters for width.
|
|
*
|
|
* overflow-x is the escape hatch, not the mechanism. The row is wide enough
|
|
* for a full address at every nesting depth the popup uses; if that ever
|
|
* stops being true — a font with wider glyphs, a browser zoom — the row
|
|
* scrolls and the user can still reach the last character, rather than the
|
|
* tail being clipped away by #app's overflow-x-hidden with nothing to say
|
|
* it happened. tests/e2e asserts the scroll is never actually needed. */
|
|
.am-address {
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* A personal message on the signature screen is laid out left to right in
|
|
* the order of its bytes. Without this, right-to-left characters in it move
|
|
* the characters around them: `5`, U+05C3, `00` would read as `500`
|
|
* followed by U+05C3. A paragraph separator (U+2029) ends this layout for
|
|
* the text after it, so src/popup/views/approval.js shows one as a mark. */
|
|
.am-byte-order {
|
|
direction: ltr;
|
|
unicode-bidi: bidi-override;
|
|
}
|