24 lines
1.5 KiB
HTML
24 lines
1.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
||
|
|
<link rel="stylesheet" href="_card.css">
|
||
|
|
<style>
|
||
|
|
body { padding:24px; display:flex; flex-direction:column; gap:14px; max-width:560px; }
|
||
|
|
.field { display:flex; flex-direction:column; gap:4px; }
|
||
|
|
.lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#5A5347; }
|
||
|
|
.input { height:32px; padding:0 10px; font-family:"IBM Plex Sans",sans-serif; font-size:13px; background:#ECE7DC; border:1px solid #B5AE9F; border-radius:2px; color:#1A1814; outline:none; }
|
||
|
|
.input.mono { font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; }
|
||
|
|
.input:focus { border-color:#3A6FB0; outline:2px solid #3A6FB0; outline-offset:1px; }
|
||
|
|
.row { display:flex; gap:10px; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="field"><span class="lbl">Search payee</span><input class="input" placeholder="스타벅스, E-Mart, Toss…"></div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="field" style="flex:1"><span class="lbl">Amount</span><input class="input mono" value="38,500" style="text-align:right"></div>
|
||
|
|
<div class="field" style="width:90px"><span class="lbl">Ccy</span><input class="input mono" value="KRW"></div>
|
||
|
|
</div>
|
||
|
|
<div class="field"><span class="lbl">Account · focus state</span><input class="input mono" value="Personal:Expenses:Food:Coffee" style="border-color:#3A6FB0; outline:2px solid #3A6FB0; outline-offset:1px;"></div>
|
||
|
|
</body></html>
|