模板:密码盘/styles.css

.pd-pad{max-width:520px;margin:2px auto;text-align:center;font-size:13px;line-height:1.3}
.pd-head{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px;margin-bottom:3px}
.pd-title{font-size:13px;font-weight:700;color:#333;transition:color .2s ease}
.pd-pad.pd-open .pd-title{color:#2e7d32}
.pd-state{font-size:11px;color:#888}
.pd-display{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3px;margin:0 0 4px}
.pd-slot{display:inline-block;min-width:20px;min-height:18px;padding:1px 5px;box-sizing:border-box;font-size:12px;line-height:1.3;white-space:nowrap;text-align:center;color:#2a4b8d;background:#f0f2f5;border:1px solid #ccc;border-radius:3px;transition:background .15s ease,border-color .15s ease}
.pd-slot-filled{background:#e0ecff;border-color:#2a4b8d}
.pd-keys{display:block}
.pd-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3px;margin:2px 0}
.pd-ctrl-row{margin-top:4px}
.pd-key{flex:0 1 auto;min-width:22px;height:22px;padding:0 4px;font-family:inherit;font-size:12px;color:#202124;background:#fff;border:1px solid #ccc;border-radius:3px;cursor:pointer;user-select:none;transition:background .12s ease,color .12s ease,transform .12s ease}
.pd-key:hover:not(:disabled){background:#e0ecff}
.pd-key:active:not(:disabled){transform:translateY(1px)}
.pd-key:focus{outline:2px solid #36c;outline-offset:0}
.pd-key:disabled{opacity:.5;cursor:default}
.pd-ctl{color:#666;font-size:11px}
.pd-msg{margin-top:3px;font-size:11px;min-height:12px}
.pd-msg-ok{color:#2e7d32}
.pd-msg-err{color:#c62828}
.pd-secret-locked{display:none}
.pd-secret-open{display:block}
@keyframes pd-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.pd-shake{animation:pd-shake .25s ease-in-out 2}