256 lines
16 KiB
CSS
256 lines
16 KiB
CSS
:root {
|
|
--bg: #111111;
|
|
--surface: rgba(0, 0, 0, .25);
|
|
--surface-active: rgba(0, 0, 0, .42);
|
|
--text: #ffffff;
|
|
--muted: rgba(255, 255, 255, .68);
|
|
--accent: #f0d28a;
|
|
--accent-text: #17130b;
|
|
--link: #ffffff;
|
|
--danger: #ff9188;
|
|
--line: rgba(255, 255, 255, .18);
|
|
--shadow: 0 18px 55px rgba(0, 0, 0, .2);
|
|
--app-device-safe-top: max(var(--tg-safe-area-inset-top, 0px), env(safe-area-inset-top));
|
|
--app-safe-top: max(var(--tg-content-safe-area-inset-top, 0px), calc(var(--app-device-safe-top) + 72px));
|
|
--app-safe-right: max(var(--tg-content-safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px), env(safe-area-inset-right));
|
|
--app-safe-bottom: max(var(--tg-content-safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom));
|
|
--app-safe-left: max(var(--tg-content-safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px), env(safe-area-inset-left));
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-height: 100%;
|
|
overflow-x: hidden;
|
|
background: var(--bg);
|
|
overscroll-behavior: none;
|
|
overscroll-behavior-y: none;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
isolation: isolate;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
padding:
|
|
max(14px, var(--app-safe-top))
|
|
max(18px, var(--app-safe-right))
|
|
calc(108px + var(--app-safe-bottom))
|
|
max(18px, var(--app-safe-left));
|
|
overflow-x: hidden;
|
|
background: transparent;
|
|
}
|
|
|
|
body::before,
|
|
body::after {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
height: var(--app-background-height, 100dvh);
|
|
z-index: -2;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
|
|
body::before {
|
|
background: #111 url("./background.jpg") center center / cover no-repeat;
|
|
}
|
|
|
|
body::after {
|
|
z-index: -1;
|
|
background: rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
button, input, select { font: inherit; color: inherit; }
|
|
button {
|
|
cursor: pointer;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
touch-action: manipulation;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
button:focus { outline: none; }
|
|
button:focus-visible { outline: 2px solid rgba(255, 255, 255, .72); outline-offset: 2px; }
|
|
button:active { filter: brightness(.88); }
|
|
|
|
.shell { display: flex; flex-direction: column; width: min(100%, 560px); min-height: calc(var(--tg-viewport-stable-height, 100dvh) - 126px - var(--app-safe-top) - var(--app-safe-bottom)); margin: 0 auto; }
|
|
.topbar { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 6px 2px 26px; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
|
|
.eyebrow { margin: 0 0 3px; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 750; color: var(--muted); }
|
|
h1, h2, p { margin-top: 0; }
|
|
h1 { margin-bottom: 0; font-size: 30px; line-height: 1; letter-spacing: -.04em; }
|
|
h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
|
|
.user-chip { position: fixed; z-index: 9; top: calc(var(--app-device-safe-top) + 10px); left: 50%; display: flex; align-items: center; gap: 8px; max-width: min(42vw, 190px); padding: 5px 11px 5px 5px; border: 0; border-radius: 999px; transform: translateX(-50%); background: var(--surface); font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
|
|
.mini-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: rgba(0, 0, 0, .28); color: var(--text); }
|
|
|
|
.view-stage { display: flex; flex: 1; flex-direction: column; width: 100%; min-width: 0; }
|
|
.view-stage.transition-forward { animation: view-stage-from-right .3s cubic-bezier(.22, 1, .36, 1); }
|
|
.view-stage.transition-backward { animation: view-stage-from-left .3s cubic-bezier(.22, 1, .36, 1); }
|
|
.view { display: none; padding-top: 0; }
|
|
.view.active { display: block; }
|
|
#dashboardView.active { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; }
|
|
.dashboard-summary { width: 100%; margin-top: auto; }
|
|
|
|
.hero-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
min-height: 122px;
|
|
padding: 15px 20px;
|
|
border-radius: 29px;
|
|
border: 1px solid var(--line);
|
|
color: var(--text);
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.hero-card p { margin-bottom: 15px; opacity: .72; font-size: 13px; }
|
|
.hero-card strong { display: block; margin-bottom: 32px; font-size: clamp(38px, 10vw, 54px); letter-spacing: -.055em; line-height: 1; overflow-wrap: anywhere; }
|
|
.saving-row { display: flex; align-items: center; gap: 12px; }
|
|
.saving-row span { min-width: 48px; font-weight: 800; }
|
|
.progress { flex: 1; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.2); }
|
|
.progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: #e8d487; transition: width .4s ease; }
|
|
.hero-card small { display: block; margin-top: 7px; opacity: .55; font-size: 11px; }
|
|
.dashboard-summary .hero-card strong { margin-bottom: 0; }
|
|
.dashboard-summary .metric-grid { margin-bottom: 0; }
|
|
|
|
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 12px 0 28px; }
|
|
.metric { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 17px 15px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
|
|
.metric-icon { display: grid; place-items: center; flex: 0 0 auto; width: 35px; height: 35px; border-radius: 12px; font-size: 19px; }
|
|
.income .metric-icon { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
|
|
.expense .metric-icon { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
|
|
.metric div { min-width: 0; }
|
|
.metric small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
|
|
.metric strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
|
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 3px 14px; }
|
|
.section-title > span { color: var(--muted); font-size: 11px; }
|
|
.category-list { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: var(--surface); }
|
|
.empty-state { padding: 25px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.5; }
|
|
.category-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
|
|
.category-item:last-child { border-bottom: 0; }
|
|
.category-item strong { font-size: 13px; }
|
|
.category-item span { color: var(--muted); font-size: 12px; }
|
|
.category-item .category-bar { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 4px; background: var(--line); }
|
|
.category-bar i { display: block; height: 100%; background: var(--accent); }
|
|
.category-item.expense-item .category-bar i { background: var(--danger); }
|
|
.history-heading { margin-top: 28px; }
|
|
.history-page-heading { margin: 5px 3px 24px; }
|
|
.transaction-list { overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: var(--surface); }
|
|
.transaction-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 11px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
|
|
.transaction-row:last-child { border-bottom: 0; }
|
|
.transaction-kind { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); font-size: 19px; }
|
|
.transaction-row.expense-row .transaction-kind { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
|
|
.transaction-copy { min-width: 0; }
|
|
.transaction-copy strong, .transaction-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.transaction-copy strong { font-size: 13px; }
|
|
.transaction-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
|
|
.transaction-actions { display: grid; justify-items: end; gap: 5px; }
|
|
.transaction-actions strong { font-size: 13px; }
|
|
.cancel-button { padding: 2px 0; border: 0; background: transparent; color: var(--danger); font-size: 10px; }
|
|
|
|
.add-heading { margin: 5px 3px 24px; }
|
|
.transaction-form { display: grid; gap: 18px; }
|
|
.segmented, .board-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 15px; background: var(--surface); }
|
|
.segment, .board-switch button { padding: 11px 10px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 650; }
|
|
.segment.active, .board-switch button.active { color: var(--text); background: var(--surface-active); box-shadow: 0 3px 12px rgba(0, 0, 0, .16); }
|
|
.transaction-form label { display: grid; gap: 8px; font-size: 12px; font-weight: 700; }
|
|
.transaction-form label > span { margin-left: 4px; }
|
|
.transaction-form em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 500; }
|
|
.transaction-form input, .transaction-form select { width: 100%; min-height: 50px; padding: 0 15px; outline: none; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
|
|
.transaction-form input:focus, .transaction-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
|
|
.amount-field > div { position: relative; }
|
|
.amount-field input { height: 78px; padding-right: 54px; font-size: 35px; font-weight: 750; letter-spacing: -.04em; }
|
|
.amount-field b { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 24px; }
|
|
.primary-button { min-height: 54px; margin-top: 3px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 16px; background: var(--surface-active); color: var(--text); font-weight: 750; box-shadow: var(--shadow); }
|
|
.secondary-button { min-height: 44px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--accent); font-weight: 700; }
|
|
.form-hint { margin: -8px 15px 0; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; }
|
|
.hidden { display: none !important; }
|
|
|
|
.board-heading { align-items: center; margin-top: 5px; margin-bottom: 20px; }
|
|
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--link); font-size: 21px; }
|
|
.board-switch { position: fixed; z-index: 9; bottom: calc(max(12px, calc(var(--app-safe-bottom) + 8px)) + 64px); left: 50%; display: none; width: fit-content; margin: 0; padding: 5px; border: 1px solid var(--line); border-radius: 999px; transform: translateX(-50%); box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
|
|
.leaderboard-open .board-switch { display: grid; }
|
|
.board-switch button { min-width: 84px; padding: 8px 14px; border-radius: 999px; }
|
|
.board-switch button.active { color: var(--accent); background: transparent; box-shadow: none; }
|
|
.segmented { position: fixed; z-index: 9; bottom: calc(max(12px, calc(var(--app-safe-bottom) + 8px)) + 64px); left: 50%; display: none; width: fit-content; margin: 0; padding: 5px; border: 1px solid var(--line); border-radius: 999px; transform: translateX(-50%); box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
|
|
.form-open .segmented { display: grid; }
|
|
.segmented .segment { min-width: 104px; padding: 8px 14px; border-radius: 999px; }
|
|
.segmented .segment.active { color: var(--accent); background: transparent; box-shadow: none; }
|
|
.leader-filter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 3px 13px; color: var(--muted); font-size: 11px; font-weight: 700; }
|
|
.leader-filter select { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: var(--surface); }
|
|
.leaderboard-list { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
|
|
.leaderboard-list.loading { min-height: 100px; padding: 30px; color: var(--muted); text-align: center; font-size: 13px; }
|
|
.leader-row { display: grid; grid-template-columns: 25px 42px 1fr auto; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
|
|
.leader-row:last-child { border-bottom: 0; }
|
|
.leader-row.me { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
|
|
.rank { color: var(--muted); text-align: center; font-size: 12px; font-weight: 750; }
|
|
.leader-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
|
|
.avatar-fallback { display: grid; place-items: center; color: var(--accent); font-weight: 800; }
|
|
.leader-name { min-width: 0; }
|
|
.leader-name strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
|
|
.leader-name small { color: var(--muted); font-size: 10px; }
|
|
.leader-actions { display: grid; justify-items: end; gap: 4px; }
|
|
.leader-percent { font-size: 15px; font-weight: 850; color: var(--accent); }
|
|
.leader-percent.negative { color: var(--danger); }
|
|
.friend-remove { padding: 1px 0; border: 0; background: transparent; color: var(--danger); font-size: 10px; }
|
|
.friend-hint { margin: 13px 18px; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
|
|
|
|
.bottom-nav { position: fixed; z-index: 10; bottom: max(12px, calc(var(--app-safe-bottom) + 8px)); left: 50%; display: flex; align-items: stretch; gap: 9px; width: min(340px, calc(100% - var(--app-safe-left) - var(--app-safe-right) - 24px)); height: 54px; transform: translateX(-50%); }
|
|
.nav-tabs { display: grid; flex: 1; grid-template-columns: repeat(3, 1fr); gap: 2px; min-width: 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
|
|
.nav-tabs button { display: grid; place-items: center; gap: 1px; min-width: 0; padding: 2px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 650; }
|
|
.nav-tabs button > span { font-size: 20px; line-height: 26px; }
|
|
.nav-tabs button.active { color: var(--accent); }
|
|
.app-action { display: grid; flex: 0 0 54px; place-items: center; width: 54px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 31px; font-weight: 500; line-height: 1; box-shadow: var(--shadow); transition: flex-basis .24s ease, width .24s ease, border-radius .24s ease; }
|
|
.app-action:disabled { opacity: .72; cursor: default; }
|
|
.form-open .nav-tabs { display: none; }
|
|
.form-open .app-action { flex-basis: 100%; width: 100%; border-radius: 999px; font-size: 16px; font-weight: 800; }
|
|
.form-open { padding-bottom: calc(174px + var(--app-safe-bottom)); }
|
|
.leaderboard-open { padding-bottom: calc(174px + var(--app-safe-bottom)); }
|
|
.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(100px + var(--app-safe-bottom)); max-width: calc(100% - 36px); padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; transform: translate(-50%, 20px); background: rgba(0, 0, 0, .62); color: var(--text); opacity: 0; pointer-events: none; transition: .2s ease; font-size: 12px; box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
|
|
.toast.show { opacity: 1; transform: translate(-50%, 0); }
|
|
|
|
.hero-card,
|
|
.user-chip,
|
|
.metric,
|
|
.category-list,
|
|
.transaction-list,
|
|
.segmented,
|
|
.board-switch,
|
|
.transaction-form input,
|
|
.transaction-form select,
|
|
.secondary-button,
|
|
.icon-button,
|
|
.leader-filter select,
|
|
.leaderboard-list {
|
|
backdrop-filter: blur(50px);
|
|
-webkit-backdrop-filter: blur(50px);
|
|
}
|
|
|
|
input::placeholder { color: rgba(255, 255, 255, .48); }
|
|
select option { color: #ffffff; background: #252525; }
|
|
|
|
@keyframes view-stage-from-right {
|
|
from { transform: translate3d(100vw, 0, 0); }
|
|
to { transform: translate3d(0, 0, 0); }
|
|
}
|
|
|
|
@keyframes view-stage-from-left {
|
|
from { transform: translate3d(-100vw, 0, 0); }
|
|
to { transform: translate3d(0, 0, 0); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.view-stage.transition-forward,
|
|
.view-stage.transition-backward { animation: none; }
|
|
}
|