-
This commit is contained in:
Ty Clifford
@@ -0,0 +1,518 @@
|
||||
:root {
|
||||
--bg: #080a12;
|
||||
--bg-soft: #0e1120;
|
||||
--surface: rgba(19, 22, 39, .86);
|
||||
--surface-solid: #131627;
|
||||
--surface-2: #191d32;
|
||||
--border: rgba(255, 255, 255, .09);
|
||||
--border-strong: rgba(255, 255, 255, .16);
|
||||
--text: #f4f5fb;
|
||||
--muted: #959bb2;
|
||||
--muted-2: #68708b;
|
||||
--purple: #8b5cf6;
|
||||
--purple-bright: #a978ff;
|
||||
--blue: #2ea9ff;
|
||||
--pink: #ff4fa3;
|
||||
--green: #43f5a4;
|
||||
--red: #ff5364;
|
||||
--orange: #ff9f43;
|
||||
--shadow: 0 24px 70px rgba(0, 0, 0, .28);
|
||||
--radius: 20px;
|
||||
--sidebar-width: 248px;
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--bg: #eef0f8;
|
||||
--bg-soft: #e6e9f3;
|
||||
--surface: rgba(255, 255, 255, .9);
|
||||
--surface-solid: #fff;
|
||||
--surface-2: #f5f6fb;
|
||||
--border: rgba(30, 35, 60, .1);
|
||||
--border-strong: rgba(30, 35, 60, .18);
|
||||
--text: #181b2d;
|
||||
--muted: #697087;
|
||||
--muted-2: #8b91a3;
|
||||
--shadow: 0 20px 50px rgba(41, 45, 75, .11);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 75% -10%, rgba(139, 92, 246, .12), transparent 32rem),
|
||||
radial-gradient(circle at 15% 95%, rgba(46, 169, 255, .08), transparent 30rem),
|
||||
var(--bg);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
button, input, select, textarea { font: inherit; }
|
||||
button, a { -webkit-tap-highlight-color: transparent; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { color: inherit; }
|
||||
h1, h2, h3, p { margin-top: 0; }
|
||||
h1 { margin-bottom: 0; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.15; letter-spacing: -.035em; }
|
||||
h2 { margin-bottom: 0; font-size: 1.05rem; letter-spacing: -.02em; }
|
||||
small { color: var(--muted); }
|
||||
code { color: var(--green); background: rgba(67, 245, 164, .08); padding: .15rem .35rem; border-radius: 5px; }
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
|
||||
.muted { color: var(--muted); }
|
||||
.green { color: var(--green) !important; }
|
||||
.pink { color: var(--pink) !important; }
|
||||
.red { color: var(--red) !important; }
|
||||
.orange { color: var(--orange) !important; }
|
||||
.eyebrow {
|
||||
margin-bottom: .35rem;
|
||||
color: var(--muted);
|
||||
font-size: .69rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .13em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.app-shell { min-height: 100vh; }
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
inset: 0 auto 0 0;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
width: var(--sidebar-width);
|
||||
flex-direction: column;
|
||||
padding: 24px 16px;
|
||||
border-right: 1px solid var(--border);
|
||||
background: rgba(9, 11, 20, .88);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
[data-theme="light"] .sidebar { background: rgba(247, 248, 252, .9); }
|
||||
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 26px; }
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
flex: 0 0 39px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(169, 120, 255, .55);
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(145deg, var(--purple), #5a35ca);
|
||||
box-shadow: 0 0 25px rgba(139, 92, 246, .32);
|
||||
font-size: .72rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: -.04em;
|
||||
}
|
||||
.brand strong { display: block; font-size: .92rem; }
|
||||
.brand small { display: block; margin-top: 1px; font-size: .65rem; }
|
||||
.nav { display: grid; gap: 5px; }
|
||||
.nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
min-height: 42px;
|
||||
padding: 9px 11px;
|
||||
border-radius: 11px;
|
||||
color: var(--muted);
|
||||
font-size: .8rem;
|
||||
font-weight: 650;
|
||||
transition: .18s ease;
|
||||
}
|
||||
.nav a span { display: grid; width: 22px; place-items: center; color: var(--muted-2); font-size: 1rem; }
|
||||
.nav a:hover { color: var(--text); background: var(--surface-2); }
|
||||
.nav a.active {
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, rgba(139, 92, 246, .3), rgba(139, 92, 246, .08));
|
||||
box-shadow: inset 3px 0 var(--purple-bright);
|
||||
}
|
||||
[data-theme="light"] .nav a.active { color: #5631b9; }
|
||||
.nav a.active span { color: var(--purple-bright); }
|
||||
.nav-label { margin: 24px 11px 8px; color: var(--muted-2); font-size: .63rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
|
||||
.sidebar-footer { display: grid; gap: 5px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); }
|
||||
.theme-toggle, .text-button {
|
||||
width: 100%;
|
||||
padding: 9px 11px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
color: var(--muted);
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.theme-toggle:hover, .text-button:hover { color: var(--text); background: var(--surface-2); }
|
||||
.theme-toggle span:first-child { display: inline-block; width: 24px; color: var(--orange); }
|
||||
|
||||
.main { min-height: 100vh; margin-left: var(--sidebar-width); }
|
||||
.topbar {
|
||||
display: flex;
|
||||
min-height: 92px;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 20px clamp(22px, 4vw, 52px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgba(8, 10, 18, .55);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
[data-theme="light"] .topbar { background: rgba(238, 240, 248, .72); }
|
||||
.topbar > div:nth-child(2) { flex: 1; }
|
||||
.topbar .eyebrow { margin-bottom: .25rem; }
|
||||
.menu-button { display: none; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; }
|
||||
.month-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
background: var(--surface);
|
||||
}
|
||||
.month-switcher a { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; color: var(--muted); }
|
||||
.month-switcher a:hover { color: var(--text); background: var(--surface-2); }
|
||||
.month-switcher input { width: 143px; border: 0; color: var(--text); background: transparent; font-weight: 750; text-align: center; }
|
||||
.page-content { display: grid; gap: 22px; padding: 28px clamp(22px, 4vw, 52px) 60px; }
|
||||
|
||||
.flash {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 18px clamp(22px, 4vw, 52px) -6px;
|
||||
padding: 12px 15px;
|
||||
border: 1px solid;
|
||||
border-radius: 12px;
|
||||
font-size: .79rem;
|
||||
}
|
||||
.flash > span { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; font-weight: 900; }
|
||||
.flash.success { border-color: rgba(67, 245, 164, .3); color: var(--green); background: rgba(67, 245, 164, .07); }
|
||||
.flash.error { border-color: rgba(255, 83, 100, .3); color: var(--red); background: rgba(255, 83, 100, .08); }
|
||||
.flash button { margin-left: auto; border: 0; color: inherit; background: transparent; cursor: pointer; }
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
.glow-purple { box-shadow: var(--shadow), inset 0 0 50px rgba(139, 92, 246, .06); }
|
||||
.glow-blue { box-shadow: var(--shadow), inset 0 0 50px rgba(46, 169, 255, .06); }
|
||||
.glow-green { box-shadow: var(--shadow), inset 0 0 50px rgba(67, 245, 164, .06); }
|
||||
.hero-grid { display: grid; grid-template-columns: 1.75fr repeat(3, 1fr); gap: 16px; }
|
||||
.hero-balance { position: relative; display: flex; min-height: 164px; align-items: center; justify-content: space-between; overflow: hidden; padding: 24px 27px; }
|
||||
.hero-balance::after { position: absolute; width: 180px; height: 180px; right: -60px; bottom: -110px; border-radius: 50%; background: var(--purple); filter: blur(45px); opacity: .17; content: ""; }
|
||||
.hero-amount { margin: 7px 0 4px; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 850; letter-spacing: -.065em; }
|
||||
.balance-ring {
|
||||
--angle: calc(var(--progress) * 3.6deg);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
flex: 0 0 92px;
|
||||
place-content: center;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle 35px, var(--surface-solid) 97%, transparent 100%), conic-gradient(var(--purple-bright) var(--angle), rgba(255,255,255,.08) 0);
|
||||
text-align: center;
|
||||
}
|
||||
.balance-ring span { font-size: 1.1rem; font-weight: 850; line-height: 1; }
|
||||
.balance-ring small { margin-top: 3px; font-size: .63rem; text-transform: uppercase; }
|
||||
.metric-card { position: relative; min-height: 164px; padding: 22px; overflow: hidden; }
|
||||
.metric-card p { margin: 16px 0 5px; color: var(--muted); font-size: .72rem; font-weight: 700; }
|
||||
.metric-card strong { display: block; font-size: 1.45rem; letter-spacing: -.045em; }
|
||||
.metric-card small { display: block; margin-top: 6px; font-size: .65rem; }
|
||||
.metric-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; font-size: .9rem; font-weight: 900; }
|
||||
.metric-icon.blue { color: var(--blue); background: rgba(46, 169, 255, .12); }
|
||||
.metric-icon.pink { color: var(--pink); background: rgba(255, 79, 163, .12); }
|
||||
.metric-icon.orange { color: var(--orange); background: rgba(255, 159, 67, .12); }
|
||||
.metric-icon.green { color: var(--green); background: rgba(67, 245, 164, .12); }
|
||||
|
||||
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
|
||||
.span-2 { grid-column: span 2; }
|
||||
.stack { display: grid; align-content: start; gap: 20px; }
|
||||
.content-grid .card, .calendar-card, .page-content > .card { padding: 22px; }
|
||||
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
|
||||
.card-heading .eyebrow { margin-bottom: 3px; }
|
||||
.button {
|
||||
display: inline-flex;
|
||||
min-height: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 9px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
color: var(--text);
|
||||
background: var(--surface-2);
|
||||
font-size: .77rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
.button:hover { transform: translateY(-1px); border-color: var(--border-strong); }
|
||||
.button.primary { border-color: rgba(139, 92, 246, .45); color: #fff; background: linear-gradient(135deg, var(--purple), #6841d6); box-shadow: 0 9px 24px rgba(139, 92, 246, .22); }
|
||||
.button.secondary { background: transparent; }
|
||||
.button.small { min-height: 33px; padding: 6px 11px; font-size: .7rem; }
|
||||
.button.full { width: 100%; }
|
||||
.text-link { padding: 0; border: 0; color: var(--purple-bright); background: none; font-size: .73rem; font-weight: 750; cursor: pointer; }
|
||||
.text-link:hover { text-decoration: underline; }
|
||||
.icon-button { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
|
||||
.icon-button:hover { color: var(--text); border-color: var(--border-strong); }
|
||||
.icon-button.danger:hover { color: var(--red); border-color: rgba(255, 83, 100, .35); background: rgba(255, 83, 100, .07); }
|
||||
|
||||
.budget-list { display: grid; }
|
||||
.budget-row { display: flex; align-items: center; gap: 13px; padding: 15px 0; border-top: 1px solid var(--border); }
|
||||
.budget-row:first-child { padding-top: 2px; border-top: 0; }
|
||||
.category-dot { width: 9px; height: 38px; flex: 0 0 9px; border-radius: 9px; background: var(--dot); box-shadow: 0 0 13px color-mix(in srgb, var(--dot), transparent 50%); }
|
||||
.budget-main { min-width: 0; flex: 1; }
|
||||
.budget-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
|
||||
.budget-title strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.budget-title span, .budget-meta { color: var(--muted); font-size: .63rem; }
|
||||
.progress-track { height: 5px; margin: 9px 0 6px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.07); }
|
||||
[data-theme="light"] .progress-track { background: rgba(30,35,60,.08); }
|
||||
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--bar); box-shadow: 0 0 12px color-mix(in srgb, var(--bar), transparent 55%); }
|
||||
.budget-meta { display: flex; justify-content: space-between; }
|
||||
.budget-row .target { width: 80px; font-size: .79rem; text-align: right; }
|
||||
.trend-chart { display: block; width: 100%; max-width: 100%; }
|
||||
.trend-chart.large { min-height: 260px; }
|
||||
.accent-card { border-color: rgba(139, 92, 246, .23); }
|
||||
.stats-card { background: linear-gradient(135deg, rgba(46,169,255,.09), rgba(139,92,246,.06)), var(--surface); }
|
||||
.stat-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
|
||||
.stat-trio div { padding: 12px 4px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.025); }
|
||||
.stat-trio strong, .stat-trio span { display: block; }
|
||||
.stat-trio strong { color: var(--blue); font-size: 1.25rem; }
|
||||
.stat-trio span { margin-top: 2px; color: var(--muted); font-size: .58rem; }
|
||||
.mini-list { display: grid; }
|
||||
.mini-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border); }
|
||||
.mini-list > div:first-child { padding-top: 0; border-top: 0; }
|
||||
.mini-list strong, .mini-list small { display: block; font-size: .72rem; }
|
||||
.mini-list small { margin-top: 2px; font-size: .58rem; }
|
||||
|
||||
label { display: grid; gap: 6px; color: var(--muted); font-size: .68rem; font-weight: 750; }
|
||||
input, select, textarea {
|
||||
width: 100%;
|
||||
min-height: 41px;
|
||||
padding: 9px 11px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 9px;
|
||||
outline: none;
|
||||
color: var(--text);
|
||||
background: var(--surface-2);
|
||||
transition: border-color .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
textarea { min-height: auto; resize: vertical; }
|
||||
input:focus, select:focus, textarea:focus { border-color: rgba(139, 92, 246, .65); box-shadow: 0 0 0 3px rgba(139, 92, 246, .1); }
|
||||
input[type="color"] { padding: 5px; }
|
||||
input[type="checkbox"] { width: 17px; height: 17px; min-height: 17px; accent-color: var(--purple); }
|
||||
.money-input { position: relative; }
|
||||
.money-input span { position: absolute; z-index: 1; left: 11px; top: 50%; color: var(--muted); transform: translateY(-50%); }
|
||||
.money-input input { padding-left: 27px; }
|
||||
.stack-form { display: grid; gap: 14px; }
|
||||
.stack-form.compact { gap: 11px; }
|
||||
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
|
||||
.form-grid .span-2 { grid-column: 1 / -1; }
|
||||
.form-note { margin: 13px 0 0; color: var(--muted); font-size: .65rem; }
|
||||
.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.025); cursor: pointer; }
|
||||
.check-row input { margin-top: 2px; }
|
||||
.check-row span, .check-row strong, .check-row small { display: block; }
|
||||
.check-row strong { color: var(--text); font-size: .72rem; }
|
||||
.check-row small { margin-top: 2px; font-weight: 500; }
|
||||
.check-row.slim { align-items: center; padding: 4px 0; border: 0; background: transparent; }
|
||||
.check-row.slim span { color: var(--muted); font-size: .68rem; }
|
||||
.inline-form { display: flex; }
|
||||
.top-gap { margin-top: 11px; }
|
||||
.inline-fields { display: grid; grid-template-columns: 1.2fr .35fr 1fr auto; align-items: end; gap: 12px; }
|
||||
.empty-state { padding: 30px 15px; border: 1px dashed var(--border-strong); border-radius: 14px; color: var(--muted); text-align: center; }
|
||||
.empty-state strong { color: var(--text); }
|
||||
.empty-state p { margin: 5px 0 0; font-size: .72rem; }
|
||||
.empty-state.compact { padding: 20px 10px; }
|
||||
|
||||
dialog { width: min(570px, calc(100vw - 30px)); padding: 0; border: 0; border-radius: 20px; color: var(--text); background: transparent; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
|
||||
dialog::backdrop { background: rgba(3, 4, 9, .78); backdrop-filter: blur(6px); }
|
||||
.dialog-card { padding: 24px; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--surface-solid); }
|
||||
.dialog-card .card-heading { margin-bottom: 19px; }
|
||||
|
||||
.summary-strip { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; gap: 12px; padding: 17px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
|
||||
.summary-strip div { padding-right: 18px; border-right: 1px solid var(--border); }
|
||||
.summary-strip span, .summary-strip strong { display: block; }
|
||||
.summary-strip span { color: var(--muted); font-size: .62rem; }
|
||||
.summary-strip strong { margin-top: 2px; font-size: 1rem; }
|
||||
.search-box { position: relative; width: min(240px, 100%); }
|
||||
.search-box span { position: absolute; z-index: 1; left: 10px; top: 50%; transform: translateY(-50%); }
|
||||
.search-box input { min-height: 34px; padding: 6px 9px 6px 29px; font-size: .68rem; }
|
||||
.table-wrap { width: 100%; overflow-x: auto; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th { padding: 10px; border-bottom: 1px solid var(--border-strong); color: var(--muted); font-size: .61rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
|
||||
td { padding: 13px 10px; border-bottom: 1px solid var(--border); font-size: .72rem; vertical-align: middle; }
|
||||
tbody tr:last-child td { border-bottom: 0; }
|
||||
td small { display: block; margin-top: 3px; font-size: .59rem; }
|
||||
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 20px; background: var(--surface-2); font-size: .62rem; }
|
||||
.pill i, .category-bars i { width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
|
||||
|
||||
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; }
|
||||
.calendar-toolbar p:last-child { margin-bottom: 0; font-size: .72rem; }
|
||||
.calendar-card { padding: 0 !important; overflow: hidden; }
|
||||
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
||||
.calendar-weekdays { border-bottom: 1px solid var(--border); background: var(--surface-2); }
|
||||
.calendar-weekdays span { padding: 11px; color: var(--muted); font-size: .62rem; font-weight: 800; text-align: center; text-transform: uppercase; }
|
||||
.calendar-day { position: relative; min-height: 130px; padding: 9px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||||
.calendar-day:nth-child(7n) { border-right: 0; }
|
||||
.calendar-day.blank { background: rgba(0,0,0,.08); }
|
||||
.day-number { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: var(--muted); font-size: .67rem; font-weight: 800; }
|
||||
.calendar-day.today .day-number { color: #fff; background: var(--purple); box-shadow: 0 0 16px rgba(139,92,246,.42); }
|
||||
.calendar-event { display: flex; align-items: flex-start; gap: 5px; margin-top: 6px; padding: 6px 7px; border-left: 2px solid var(--purple); border-radius: 6px; background: rgba(139,92,246,.1); font-size: .58rem; }
|
||||
.calendar-event.bill { border-color: var(--pink); background: rgba(255,79,163,.09); }
|
||||
.calendar-event.payday { border-color: var(--green); background: rgba(67,245,164,.08); }
|
||||
.calendar-event.deadline { border-color: var(--orange); background: rgba(255,159,67,.08); }
|
||||
.calendar-event > div { min-width: 0; flex: 1; }
|
||||
.calendar-event strong, .calendar-event small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.calendar-event button { padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
|
||||
|
||||
.comparison-grid { grid-template-columns: 2fr 1fr; }
|
||||
.comparison-metrics { grid-template-columns: repeat(4, 1fr); }
|
||||
.category-bars { display: grid; gap: 18px; }
|
||||
.category-bars p { display: flex; justify-content: space-between; margin-bottom: 0; font-size: .68rem; }
|
||||
.category-bars p span { display: flex; align-items: center; gap: 7px; }
|
||||
.category-bars small { display: block; margin-top: -1px; font-size: .58rem; }
|
||||
|
||||
.dead-hero { display: flex; min-height: 180px; align-items: center; justify-content: space-between; gap: 30px; padding: 28px 32px; background: linear-gradient(110deg, rgba(46,169,255,.08), rgba(139,92,246,.08)), var(--surface); }
|
||||
.dead-hero h2 { font-size: 1.45rem; }
|
||||
.dead-hero p:last-child { max-width: 570px; margin: 10px 0 0; color: var(--muted); }
|
||||
.visible-balance, .concealed-balance { min-width: 220px; font-size: 2rem; font-weight: 850; letter-spacing: -.05em; text-align: center; }
|
||||
.concealed-balance { padding: 20px; border: 1px solid rgba(46,169,255,.28); border-radius: 16px; color: var(--blue); background: rgba(46,169,255,.07); cursor: pointer; }
|
||||
.concealed-balance .revealed { display: none; }
|
||||
.concealed-balance.reveal .masked { display: none; }
|
||||
.concealed-balance.reveal .revealed { display: block; }
|
||||
.concealed-balance small { display: block; margin-top: 4px; font-size: .58rem; font-weight: 650; letter-spacing: 0; }
|
||||
.dead-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.rule-list { display: grid; gap: 15px; }
|
||||
.rule-list > div { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); }
|
||||
.rule-list p, .rule-list strong, .rule-list small { display: block; margin: 0; }
|
||||
.rule-list strong { font-size: .72rem; }
|
||||
.rule-list small { margin-top: 3px; font-size: .6rem; }
|
||||
|
||||
.settings-grid { display: grid; grid-template-columns: .7fr repeat(2, 1fr); gap: 20px; align-items: start; }
|
||||
.settings-nav { position: sticky; top: 20px; display: grid; gap: 5px; padding: 18px !important; }
|
||||
.settings-nav .eyebrow { padding: 0 8px 7px; }
|
||||
.settings-nav a { padding: 8px; border-radius: 8px; color: var(--muted); font-size: .7rem; font-weight: 700; }
|
||||
.settings-nav a:hover { color: var(--text); background: var(--surface-2); }
|
||||
.toggle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
|
||||
.toggle-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.02); cursor: pointer; }
|
||||
.toggle-card span, .toggle-card strong, .toggle-card small { display: block; }
|
||||
.toggle-card strong { color: var(--text); font-size: .7rem; }
|
||||
.toggle-card small { margin-top: 2px; font-size: .56rem; font-weight: 500; }
|
||||
.toggle-card input { position: absolute; opacity: 0; pointer-events: none; }
|
||||
.toggle-card i { position: relative; width: 35px; height: 20px; flex: 0 0 35px; border-radius: 20px; background: var(--muted-2); transition: .18s; }
|
||||
.toggle-card i::after { position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .18s; content: ""; }
|
||||
.toggle-card input:checked + i { background: var(--purple); box-shadow: 0 0 14px rgba(139,92,246,.3); }
|
||||
.toggle-card input:checked + i::after { transform: translateX(15px); }
|
||||
.status-badge { padding: 5px 8px; border-radius: 20px; font-size: .58rem; font-weight: 850; text-transform: uppercase; }
|
||||
.status-badge.success { color: var(--green); background: rgba(67,245,164,.1); }
|
||||
.status-badge.warning { color: var(--orange); background: rgba(255,159,67,.1); }
|
||||
.sticky-save { position: sticky; bottom: 18px; width: 100%; z-index: 5; }
|
||||
.settings-actions { display: flex; justify-content: flex-end; gap: 10px; }
|
||||
.setup-secret { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 23px; border-color: rgba(67,245,164,.3); }
|
||||
.setup-secret p { margin: 6px 0 0; color: var(--muted); }
|
||||
.setup-secret > code { padding: 12px 15px; font-size: 1.1rem; letter-spacing: .12em; }
|
||||
.setup-secret details { grid-column: 1 / -1; }
|
||||
.wrap-code { display: block; margin-top: 8px; overflow-wrap: anywhere; }
|
||||
|
||||
.data-actions { grid-template-columns: repeat(3, 1fr); }
|
||||
.export-card { display: flex; min-height: 145px; align-items: center; gap: 16px; padding: 21px; transition: transform .18s ease, border-color .18s ease; }
|
||||
.export-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
|
||||
.export-card > div { min-width: 0; flex: 1; }
|
||||
.export-card small { display: block; margin-top: 7px; }
|
||||
.export-card b { font-size: 1.2rem; }
|
||||
.export-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 14px; font-weight: 900; }
|
||||
.export-card.purple .export-icon { color: var(--purple-bright); background: rgba(139,92,246,.12); }
|
||||
.export-card.blue .export-icon { color: var(--blue); background: rgba(46,169,255,.12); }
|
||||
.export-card.pink .export-icon { color: var(--pink); background: rgba(255,79,163,.12); }
|
||||
.data-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.file-drop { padding: 24px; border: 1px dashed var(--border-strong); border-radius: 13px; text-align: center; cursor: pointer; }
|
||||
.file-drop input { margin-bottom: 9px; background: transparent; }
|
||||
.file-drop span { display: block; font-size: .62rem; }
|
||||
.database-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
||||
.database-facts div { padding: 13px; border: 1px solid var(--border); border-radius: 10px; }
|
||||
.database-facts span, .database-facts strong { display: block; }
|
||||
.database-facts span { color: var(--muted); font-size: .58rem; }
|
||||
.database-facts strong { margin-top: 4px; font-size: .7rem; }
|
||||
.portability-note { display: flex; align-items: center; gap: 14px; }
|
||||
.portability-note p { margin: 4px 0 0; color: var(--muted); font-size: .7rem; }
|
||||
|
||||
.auth-body { min-height: 100vh; overflow-x: hidden; background: #080a12; color: #f4f5fb; }
|
||||
.auth-shell { display: grid; min-height: 100vh; grid-template-columns: 1.15fr .85fr; }
|
||||
.auth-story { position: relative; display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(30px, 6vw, 78px); background: radial-gradient(circle at 60% 45%, rgba(139,92,246,.18), transparent 27rem), linear-gradient(145deg, #111426, #090b14); }
|
||||
.auth-story::before { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 42px 42px; content: ""; mask-image: linear-gradient(to bottom right, black, transparent 75%); }
|
||||
.auth-story > * { position: relative; z-index: 1; }
|
||||
.auth-brand { padding: 0; }
|
||||
.auth-story h1 { max-width: 650px; margin-bottom: 20px; font-size: clamp(3rem, 6vw, 6.5rem); line-height: .92; letter-spacing: -.07em; }
|
||||
.auth-story > div:nth-child(2) > p:last-child { max-width: 580px; color: #9da3b8; font-size: 1rem; }
|
||||
.auth-orbit { position: absolute; width: 340px; height: 340px; right: -55px; bottom: -65px; border: 1px solid rgba(169,120,255,.18); border-radius: 50%; }
|
||||
.auth-orbit span { position: absolute; inset: 35px; border: 1px solid rgba(46,169,255,.18); border-radius: 50%; }
|
||||
.auth-orbit .orbit-two { inset: 80px; border-color: rgba(255,79,163,.18); }
|
||||
.auth-orbit .orbit-three { inset: 123px; border-color: rgba(67,245,164,.18); }
|
||||
.auth-orbit strong { position: absolute; inset: 0; display: grid; place-items: center; color: var(--green); font-size: 3rem; text-shadow: 0 0 30px rgba(67,245,164,.4); }
|
||||
.auth-panel { display: grid; place-items: center; padding: 35px; background: #0c0e19; }
|
||||
.auth-panel .flash { width: min(430px, 100%); margin: 0 0 14px; }
|
||||
.auth-card { width: min(430px, 100%); padding: 32px; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: #131627; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
|
||||
.auth-card h2 { margin-bottom: 8px; font-size: 1.7rem; }
|
||||
.auth-card > .muted { margin-bottom: 24px; }
|
||||
.auth-card input, .auth-card select { background: #191d32; }
|
||||
.otp-input { font-size: 1.6rem; letter-spacing: .4em; text-align: center; }
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.hero-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.hero-balance { grid-column: 1 / -1; }
|
||||
.comparison-metrics { grid-template-columns: repeat(2, 1fr); }
|
||||
.data-actions { grid-template-columns: 1fr; }
|
||||
.settings-grid { grid-template-columns: 1fr; }
|
||||
.settings-grid > .span-2 { grid-column: 1; }
|
||||
.settings-nav { position: static; display: flex; overflow-x: auto; }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 20px 0 70px rgba(0,0,0,.4); }
|
||||
.sidebar.open { transform: translateX(0); }
|
||||
.main { margin-left: 0; }
|
||||
.menu-button { display: block; }
|
||||
.content-grid, .comparison-grid, .dead-grid, .data-grid { grid-template-columns: 1fr; }
|
||||
.content-grid > .span-2 { grid-column: 1; }
|
||||
.calendar-day { min-height: 110px; }
|
||||
.auth-shell { grid-template-columns: 1fr; }
|
||||
.auth-story { display: none; }
|
||||
.auth-panel { min-height: 100vh; }
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.topbar { min-height: 78px; padding: 15px 16px; }
|
||||
.topbar .eyebrow { display: none; }
|
||||
.month-switcher input { width: 118px; }
|
||||
.month-switcher a { width: 25px; }
|
||||
.page-content { padding: 20px 15px 45px; }
|
||||
.flash { margin-left: 15px; margin-right: 15px; }
|
||||
.hero-grid, .comparison-metrics { grid-template-columns: 1fr; }
|
||||
.hero-balance { grid-column: 1; }
|
||||
.metric-card { min-height: 135px; }
|
||||
.summary-strip { grid-template-columns: 1fr 1fr; }
|
||||
.summary-strip div { border-right: 0; }
|
||||
.summary-strip .button { grid-column: 1 / -1; }
|
||||
.card-heading { flex-wrap: wrap; }
|
||||
.search-box { width: 100%; }
|
||||
.form-grid, .toggle-grid { grid-template-columns: 1fr; }
|
||||
.form-grid .span-2 { grid-column: 1; }
|
||||
.inline-fields { grid-template-columns: 1fr; }
|
||||
.calendar-weekdays span { padding: 8px 2px; font-size: .52rem; }
|
||||
.calendar-day { min-height: 76px; padding: 4px; }
|
||||
.calendar-event { padding: 3px; border-left-width: 1px; }
|
||||
.calendar-event > span, .calendar-event small, .calendar-event form { display: none; }
|
||||
.calendar-event strong { font-size: .48rem; }
|
||||
.day-number { width: 20px; height: 20px; }
|
||||
.dead-hero { align-items: stretch; flex-direction: column; padding: 22px; }
|
||||
.visible-balance, .concealed-balance { width: 100%; min-width: 0; }
|
||||
.setup-secret { grid-template-columns: 1fr; }
|
||||
.setup-secret details { grid-column: 1; }
|
||||
.setup-secret > code { overflow-x: auto; }
|
||||
.database-facts { grid-template-columns: 1fr; }
|
||||
table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; }
|
||||
.auth-panel { padding: 18px; }
|
||||
.auth-card { padding: 24px; }
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
(() => {
|
||||
const root = document.documentElement;
|
||||
const toggle = document.querySelector('[data-theme-toggle]');
|
||||
const updateThemeLabel = () => {
|
||||
const label = document.querySelector('[data-theme-label]');
|
||||
if (label) label.textContent = root.dataset.theme === 'dark' ? 'Light mode' : 'Dark mode';
|
||||
};
|
||||
updateThemeLabel();
|
||||
toggle?.addEventListener('click', () => {
|
||||
root.dataset.theme = root.dataset.theme === 'dark' ? 'light' : 'dark';
|
||||
localStorage.setItem('budget-theme', root.dataset.theme);
|
||||
updateThemeLabel();
|
||||
document.querySelectorAll('[data-trend-chart]').forEach(drawTrendChart);
|
||||
});
|
||||
|
||||
document.querySelector('[data-menu-toggle]')?.addEventListener('click', () => {
|
||||
document.querySelector('#sidebar')?.classList.toggle('open');
|
||||
});
|
||||
|
||||
document.querySelector('[data-month-picker]')?.addEventListener('change', (event) => {
|
||||
const picker = event.currentTarget;
|
||||
const parameters = new URLSearchParams({ route: picker.dataset.route, month: picker.value });
|
||||
window.location.href = `?${parameters.toString()}`;
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-dialog-open]').forEach((button) => {
|
||||
button.addEventListener('click', () => document.getElementById(button.dataset.dialogOpen)?.showModal());
|
||||
});
|
||||
document.querySelectorAll('[data-dialog-close]').forEach((button) => {
|
||||
button.addEventListener('click', () => button.closest('dialog')?.close());
|
||||
});
|
||||
document.querySelectorAll('dialog').forEach((dialog) => {
|
||||
dialog.addEventListener('click', (event) => {
|
||||
if (event.target === dialog) dialog.close();
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-confirm]').forEach((form) => {
|
||||
form.addEventListener('submit', (event) => {
|
||||
if (!window.confirm(form.dataset.confirm)) event.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.flash button').forEach((button) => {
|
||||
button.addEventListener('click', () => button.closest('.flash')?.remove());
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-table-search]').forEach((input) => {
|
||||
input.addEventListener('input', () => {
|
||||
const table = document.getElementById(input.dataset.tableSearch);
|
||||
const query = input.value.trim().toLowerCase();
|
||||
table?.querySelectorAll('tbody tr').forEach((row) => {
|
||||
row.hidden = query !== '' && !row.textContent.toLowerCase().includes(query);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const concealed = document.querySelector('[data-concealed-balance]');
|
||||
if (concealed) {
|
||||
let approved = false;
|
||||
concealed.addEventListener('click', () => {
|
||||
if (!approved) approved = window.confirm('Reveal the dormant account balance while your pointer remains here?');
|
||||
if (approved) {
|
||||
concealed.querySelector('.revealed').textContent = concealed.dataset.value;
|
||||
concealed.classList.add('reveal');
|
||||
}
|
||||
});
|
||||
concealed.addEventListener('mouseleave', () => {
|
||||
concealed.classList.remove('reveal');
|
||||
approved = false;
|
||||
});
|
||||
}
|
||||
|
||||
function drawTrendChart(canvas) {
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(canvas.dataset.trendChart || '[]');
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (!data.length) return;
|
||||
const width = canvas.clientWidth || 600;
|
||||
const height = Number(canvas.getAttribute('height')) || 220;
|
||||
const ratio = window.devicePixelRatio || 1;
|
||||
canvas.width = width * ratio;
|
||||
canvas.height = height * ratio;
|
||||
canvas.style.height = `${height}px`;
|
||||
const context = canvas.getContext('2d');
|
||||
context.scale(ratio, ratio);
|
||||
|
||||
const styles = getComputedStyle(document.documentElement);
|
||||
const text = styles.getPropertyValue('--muted').trim();
|
||||
const border = styles.getPropertyValue('--border-strong').trim();
|
||||
const purple = styles.getPropertyValue('--purple-bright').trim();
|
||||
const pink = styles.getPropertyValue('--pink').trim();
|
||||
const padding = { top: 20, right: 12, bottom: 32, left: 48 };
|
||||
const plotWidth = width - padding.left - padding.right;
|
||||
const plotHeight = height - padding.top - padding.bottom;
|
||||
const maxValue = Math.max(...data.flatMap((row) => [Number(row.gross_resources) || 0, Number(row.expenses) || 0]), 1) * 1.12;
|
||||
|
||||
context.clearRect(0, 0, width, height);
|
||||
context.font = '10px system-ui';
|
||||
context.fillStyle = text;
|
||||
context.strokeStyle = border;
|
||||
context.lineWidth = 1;
|
||||
context.setLineDash([3, 5]);
|
||||
for (let line = 0; line <= 4; line++) {
|
||||
const y = padding.top + plotHeight * (line / 4);
|
||||
context.beginPath();
|
||||
context.moveTo(padding.left, y);
|
||||
context.lineTo(width - padding.right, y);
|
||||
context.stroke();
|
||||
const value = maxValue * (1 - line / 4);
|
||||
context.fillText(compactMoney(value, canvas.dataset.symbol), 0, y + 3);
|
||||
}
|
||||
context.setLineDash([]);
|
||||
|
||||
const pointX = (index) => padding.left + (data.length === 1 ? plotWidth / 2 : plotWidth * index / (data.length - 1));
|
||||
const pointY = (value) => padding.top + plotHeight - (Number(value) / maxValue * plotHeight);
|
||||
|
||||
const drawSeries = (key, color, fill) => {
|
||||
context.beginPath();
|
||||
data.forEach((row, index) => {
|
||||
const x = pointX(index);
|
||||
const y = pointY(row[key]);
|
||||
index === 0 ? context.moveTo(x, y) : context.lineTo(x, y);
|
||||
});
|
||||
context.strokeStyle = color;
|
||||
context.lineWidth = 2.5;
|
||||
context.lineJoin = 'round';
|
||||
context.stroke();
|
||||
if (fill) {
|
||||
context.lineTo(pointX(data.length - 1), padding.top + plotHeight);
|
||||
context.lineTo(pointX(0), padding.top + plotHeight);
|
||||
context.closePath();
|
||||
const gradient = context.createLinearGradient(0, padding.top, 0, padding.top + plotHeight);
|
||||
gradient.addColorStop(0, `${color}32`);
|
||||
gradient.addColorStop(1, `${color}00`);
|
||||
context.fillStyle = gradient;
|
||||
context.fill();
|
||||
}
|
||||
data.forEach((row, index) => {
|
||||
context.beginPath();
|
||||
context.arc(pointX(index), pointY(row[key]), 3.5, 0, Math.PI * 2);
|
||||
context.fillStyle = color;
|
||||
context.fill();
|
||||
});
|
||||
};
|
||||
|
||||
drawSeries('gross_resources', purple, true);
|
||||
drawSeries('expenses', pink, false);
|
||||
data.forEach((row, index) => {
|
||||
const label = new Date(`${row.month}-02T12:00:00`).toLocaleDateString(undefined, { month: 'short' });
|
||||
context.fillStyle = text;
|
||||
context.textAlign = 'center';
|
||||
context.fillText(label, pointX(index), height - 9);
|
||||
});
|
||||
context.textAlign = 'left';
|
||||
context.fillStyle = purple;
|
||||
context.fillRect(width - 145, 3, 8, 8);
|
||||
context.fillStyle = text;
|
||||
context.fillText('Resources', width - 132, 11);
|
||||
context.fillStyle = pink;
|
||||
context.fillRect(width - 70, 3, 8, 8);
|
||||
context.fillStyle = text;
|
||||
context.fillText('Spent', width - 57, 11);
|
||||
}
|
||||
|
||||
function compactMoney(value, symbol = '$') {
|
||||
if (value >= 1000000) return `${symbol}${(value / 1000000).toFixed(1)}m`;
|
||||
if (value >= 1000) return `${symbol}${(value / 1000).toFixed(1)}k`;
|
||||
return `${symbol}${Math.round(value)}`;
|
||||
}
|
||||
|
||||
document.querySelectorAll('[data-trend-chart]').forEach(drawTrendChart);
|
||||
let resizeTimer;
|
||||
window.addEventListener('resize', () => {
|
||||
window.clearTimeout(resizeTimer);
|
||||
resizeTimer = window.setTimeout(() => document.querySelectorAll('[data-trend-chart]').forEach(drawTrendChart), 120);
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user