silentmode/theseus
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

PIN pads: calm hover and press states

Browse source 
Moving the pointer across the keypad lit each key it crossed with a bright
acid border and digit, and every filled dot glowed, which read as the pad
flashing while a PIN was typed. Keys now only lighten slightly on hover and
press in a little when clicked; dots fill without the glow.
This commit is contained in:
Local Dev 2026-10-05 20:28:20 +02:00
parent 877137d8c2
commit b4362f2e54
2 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
settings.html
View file

@ -281,10 +281,14 @@
.pinpad .pindot.on{background:var(--acid);border-color:var(--acid)} .pinpad .pindot.on{background:var(--acid);border-color:var(--acid)}
.pinpad .pinkeys{display:grid;grid-template-columns:repeat(3,62px);gap:8px} .pinpad .pinkeys{display:grid;grid-template-columns:repeat(3,62px);gap:8px}
.pinpad .pinkeys button{height:46px;border-radius:10px;border:1px solid var(--line);background:#1b2330;color:var(--ink);font:500 18px system-ui,sans-serif;cursor:pointer} .pinpad .pinkeys button{height:46px;border-radius:10px;border:1px solid var(--line);background:#1b2330;color:var(--ink);font:500 18px system-ui,sans-serif;cursor:pointer}
.pinpad .pinkeys button:hover{border-color:var(--acid);color:var(--acid-text)} /* Keys only lighten on hover; an acid border lighting up on each key the pointer crossed read as flashing. */
.pinpad .pinkeys button{transition:background-color .08s,transform .06s}
.pinpad .pinkeys button:hover{background:#232c3b}
.pinpad .pinkeys button:active{transform:scale(.96)}
.pinpad .pinkeys button.util{background:transparent;font-size:13px;color:var(--dim)} .pinpad .pinkeys button.util{background:transparent;font-size:13px;color:var(--dim)}
@media (prefers-color-scheme: light){ @media (prefers-color-scheme: light){
.pinwiz-box input[type=password], .pinpad .pinkeys button{background:#f1f5f8;color:#253A49} .pinwiz-box input[type=password], .pinpad .pinkeys button{background:#f1f5f8;color:#253A49}
.pinpad .pinkeys button:hover{background:#e4e9f0}
.pinpad .pinkeys button.util{background:transparent} .pinpad .pinkeys button.util{background:transparent}
} }
</style></head> </style></head>

9
unlock.html
View file

@ -29,12 +29,15 @@
.pinpad .pindots { display: flex; gap: 12px; } .pinpad .pindots { display: flex; gap: 12px; }
.pinpad .pindot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--dim); .pinpad .pindot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--dim);
background: transparent; transition: background .12s, border-color .12s; } background: transparent; transition: background .12s, border-color .12s; }
.pinpad .pindot.on { background: var(--acid); border-color: var(--acid); /* No glow, and keys only lighten on hover: a bright acid border lighting
box-shadow: 0 0 6px rgb(from var(--acid) r g b / .5); } up on whichever key the pointer crosses read as the pad flashing. */
.pinpad .pindot.on { background: var(--acid); border-color: var(--acid); }
.pinpad .pinkeys { display: grid; grid-template-columns: repeat(3, 62px); gap: 8px; } .pinpad .pinkeys { display: grid; grid-template-columns: repeat(3, 62px); gap: 8px; }
.pinpad .pinkeys button { height: 46px; border-radius: 10px; border: 1px solid var(--line); .pinpad .pinkeys button { height: 46px; border-radius: 10px; border: 1px solid var(--line);
background: var(--surface2); color: var(--ink); font: 500 18px system-ui, sans-serif; cursor: pointer; } background: var(--surface2); color: var(--ink); font: 500 18px system-ui, sans-serif; cursor: pointer; }
.pinpad .pinkeys button:hover { border-color: var(--acid); color: var(--acid); } .pinpad .pinkeys button { transition: background-color .08s, transform .06s; }
.pinpad .pinkeys button:hover { background: rgb(from var(--surface2) calc(r + 10) calc(g + 10) calc(b + 12)); }
.pinpad .pinkeys button:active { transform: scale(.96); }
.pinpad .pinkeys button.util { background: transparent; font-size: 13px; color: var(--dim); } .pinpad .pinkeys button.util { background: transparent; font-size: 13px; color: var(--dim); }
/* Two lines reserved, so a message appearing never changes the dialog's /* Two lines reserved, so a message appearing never changes the dialog's
height (it is centred, so any height change moves the whole pad). */ height (it is centred, so any height change moves the whole pad). */