chick
22 lines
2.2 KiB
CSS
22 lines
2.2 KiB
CSS
body { width: 430px; margin: 0; font: 13px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #e5e7eb; background: #0f172a; }
|
|
main { padding: 14px; } h1 { margin: 0 0 12px; font-size: 18px; }
|
|
label { display: grid; gap: 5px; margin: 8px 0; color: #cbd5e1; }
|
|
input { box-sizing: border-box; width: 100%; padding: 7px 9px; border: 1px solid #334155; border-radius: 8px; color: #e5e7eb; background: #111827; outline: none; }
|
|
input:focus { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56,189,248,.18); }
|
|
.row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
|
|
.country-box { margin-top: 10px; padding: 10px; border: 1px solid #253244; border-radius: 10px; background: #111827; }
|
|
.country-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
|
|
button { padding: 7px 10px; border: 1px solid #334155; border-radius: 8px; color: #e5e7eb; background: #1f2937; cursor: pointer; }
|
|
button:hover { background: #273449; } button:disabled { opacity: .55; cursor: not-allowed; }
|
|
.primary { background: #2563eb; border-color: #3b82f6; } .primary:hover { background: #1d4ed8; }
|
|
.selected { display: flex; flex-wrap: wrap; gap: 6px; min-height: 25px; margin: 8px 0; }
|
|
.chip { display: inline-flex; gap: 5px; align-items: center; padding: 4px 7px; border-radius: 999px; background: #0e7490; color: #ecfeff; }
|
|
.chip button { padding: 0 3px; border: 0; background: transparent; }
|
|
.country-list { max-height: 170px; overflow: auto; border: 1px solid #253244; border-radius: 8px; }
|
|
.country-item { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 9px; border: 0; border-bottom: 1px solid #1f2937; border-radius: 0; background: #0b1220; text-align: left; }
|
|
.country-item.selected-item { background: #123044; color: #bae6fd; }
|
|
.country-id { color: #94a3b8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
.actions { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; margin-top: 12px; }
|
|
.current { margin-top: 12px; padding: 10px; border-radius: 10px; background: #020617; color: #cbd5e1; }
|
|
code { color: #67e8f9; user-select: all; } .hint { margin: 7px 0 0; color: #94a3b8; font-size: 12px; }
|