You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
2.4 KiB
CSS
45 lines
2.4 KiB
CSS
:root{ --bg:#0f1115; --card:#141822; --muted:#8c93a6; --ok:#19c37d; --bad:#ef4444; --fg:#e6e7eb; --edge:#202637;}
|
|
*{ box-sizing:border-box }
|
|
body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--fg) }
|
|
.wrap{ max-width:980px; margin:24px auto; padding:0 16px }
|
|
header{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px }
|
|
.h1{ font-size:24px; font-weight:700 }
|
|
.pill{ display:inline-flex; gap:8px; padding:8px 12px; border-radius:999px; background:var(--card); border:1px solid var(--edge); font-size:14px }
|
|
.pill.ok{ background:rgba(25,195,125,.12); border-color:#1f7a58 }
|
|
.pill.bad{ background:rgba(239,68,68,.12); border-color:#7a1f1f }
|
|
.muted{ color:var(--muted) }
|
|
|
|
.grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:16px }
|
|
@media (max-width:900px){ .grid{ grid-template-columns:1fr } }
|
|
|
|
.card{ background:var(--card); border:1px solid var(--edge); border-radius:14px; padding:16px }
|
|
h2{ font-size:16px; margin:0 0 10px }
|
|
|
|
form .row{ display:flex; gap:10px; flex-wrap:wrap }
|
|
input, select{ background:#0d1117; border:1px solid #263041; color:var(--fg); border-radius:10px; padding:10px; outline:none }
|
|
input[type="number"]{ max-width:160px }
|
|
input[type="text"]{ flex:1 }
|
|
|
|
.seg{ display:inline-flex; border:1px solid #263041; border-radius:10px; overflow:hidden }
|
|
.seg input{ display:none }
|
|
.seg label{ padding:8px 10px; cursor:pointer; background:#0d1117; user-select:none }
|
|
.seg input:checked + label{ background:#182033; color:#b6d1ff }
|
|
|
|
.toggle{ display:inline-flex; border:1px solid #263041; border-radius:10px; overflow:hidden }
|
|
.toggle input{ display:none }
|
|
.toggle label{ padding:8px 12px; cursor:pointer; background:#0d1117; user-select:none; min-width:100px; text-align:center }
|
|
.toggle input:checked + label{ background:#183033; color:#b6d1ff }
|
|
|
|
button.btn{ background:#1f6fe8; border:none; color:#fff; padding:10px 14px; border-radius:10px; cursor:pointer }
|
|
button.btn.secondary{ background:#273244 }
|
|
button.btn.danger{ background:#c92a2a }
|
|
|
|
table{ width:100%; border-collapse:collapse }
|
|
th, td{ border-bottom:1px solid #222b3b; padding:10px; text-align:left; font-size:14px }
|
|
th{ color:#aab3c4; font-weight:600 }
|
|
td.num{ font-variant-numeric:tabular-nums; text-align:right }
|
|
|
|
.pos{ color:#ef9a9a } /* you owe */
|
|
.neg{ color:#9ae6b4 } /* they owe */
|
|
|
|
.tag{ font-size:12px; padding:2px 8px; border-radius:999px; background:#1a2332; border:1px solid #243046 } |