/* ========================================================================== Flip-Book — white-label skin for the self-hosted Bigcapital instance Injected by Nginx sub_filter at acct.flip-tracker.com. See README.md. Nothing here is built into the container images, so `docker compose pull` cannot wipe it. The trade-off is that every selector below is aimed at upstream markup we do not control — so each one is anchored to something stable (a literal className, a BEM class, a Blueprint `bp4-*` class, or a link target), never to a styled-components hash. Anything positional is written so that a miss degrades to "unstyled", never to "broken". Load order note: PrivatePages' stylesheet is code-split and appended to at runtime, i.e. AFTER this file. Overrides of anything it sets need !important — that is why it appears as often as it does below. ========================================================================== */ :root { /* Measured off the source artwork, not guessed. */ --fb-deep: #014755; /* dominant ink: wordmark, house */ --fb-mid: #016b78; /* secondary teal */ --fb-light: #0a8494; --fb-accent: #0fc2d6; /* the arrow */ --fb-ink: #0f2b31; --fb-muted: #5b7278; --fb-bg: #f4f7f8; --fb-surface: #ffffff; --fb-border: #dbe5e8; --fb-hairline:#eef4f5; /* Upstream's sidebar is #01115e navy in light mode. One variable rebrands the whole rail. Declared !important because PrivatePages.css lands later. */ --color-sidebar-background: var(--fb-deep) !important; } /* ========================================================================== 1. Logo substitution Every Bigcapital logo in the app is a Blueprint , which renders around an inline SVG sized by width/height attributes. Painting our artwork into that span via ::after inherits the exact layout box upstream already reserved, so nothing shifts. ========================================================================== */ .bp4-icon-bigcapital, .bp4-icon-mini-bigcapital { position: relative; display: inline-block; } .bp4-icon-bigcapital > svg, .bp4-icon-mini-bigcapital > svg { opacity: 0 !important; } .bp4-icon-bigcapital::after, .bp4-icon-mini-bigcapital::after { content: ""; position: absolute; inset: 0; background: url("/flipbook/flipbook-horizontal.png") no-repeat center / contain; } /* The collapsed sidebar shows a square mini mark, so it gets the roundel rather than the horizontal lockup, which would letterbox to nothing. */ .bp4-icon-mini-bigcapital::after { background-image: url("/flipbook/flipbook-mark-white.png"); } /* Dark-mode-only inline SVG. We force light, so this should never render — hidden defensively in case a future build reaches it another way. */ svg[data-icon="bigcapital-alt"] { opacity: 0 !important; } /* On the dark sidebar the full-colour lockup would disappear. */ .sidebar .bp4-icon-bigcapital::after, .sidebar__head-logo .bp4-icon-bigcapital::after { background-image: url("/flipbook/flipbook-horizontal-white.png"); } .sidebar__head-logo svg { opacity: 0 !important; } /* ========================================================================== 2. Login — split-screen brand panel + form NOTE: `authentication` is a class on , not on a wrapper div — Bigcapital applies it with a body-class helper. Confirmed against the rendered DOM, not inferred. The real tree is: body.authentication └ #root └ .App └ div <- styled wrapper └ div <- fixed 384px column, padding-top:80px ├ div <- logo, text-align:center └ div <- TransitionGroup -> card + footer links The brand panel is a position:fixed pseudo-element rather than a grid track. also carries #nprogress plus assorted script/link nodes, so a grid container here picks up stray grid items and sizes its tracks unpredictably; fixed positioning sidesteps all of that. ========================================================================== */ body.authentication { min-height: 100vh; background: var(--fb-surface); } body.authentication::before { content: ""; position: fixed; inset: 0 auto 0 0; width: clamp(320px, 36%, 560px); background: url("/flipbook/flipbook-lockup-white.png") no-repeat center center / min(64%, 300px) auto, radial-gradient(circle at 28% 18%, rgba(15, 194, 214, 0.20), transparent 58%), linear-gradient(155deg, var(--fb-deep) 0%, #01596a 48%, var(--fb-mid) 100%); } body.authentication > #root { min-height: 100vh; margin-left: clamp(320px, 36%, 560px); } /* Centring lives on .App, not #root: upstream styles #root in ways that beat an unflagged rule here, and .App is the element that actually wraps the auth column. Flagged because both compete with app CSS loaded after us. */ body.authentication #root > .App { min-height: 100vh; display: flex !important; align-items: center !important; justify-content: center !important; padding: 40px 24px; /* .App carries a 1100px min-width for the dashboard's desktop layout. Left alone it overflows #root and the form centres against the wrong box (and the login page scrolls sideways on a phone). Irrelevant on an auth page. */ width: 100% !important; min-width: 0 !important; } body.authentication #root > .App > div { width: 100%; display: flex; justify-content: center; } /* Drop the 384px column's 80px top padding so the card centres properly. */ body.authentication #root > .App > div > div { width: 400px !important; max-width: 100% !important; margin: 0 !important; padding-top: 0 !important; } /* The panel carries the logo, so hide the in-column one and the small "powered by" mark beneath the card. Scoped to the auth body, so the sidebar logo elsewhere in the app is unaffected. */ body.authentication .bp4-icon-bigcapital { display: none !important; } body.authentication #root > .App > div > div > div:first-child { margin-bottom: 0 !important; } /* Card */ body.authentication div:has(> form) { background: var(--fb-surface) !important; border: 1px solid var(--fb-border) !important; border-radius: 14px !important; padding: 30px 28px !important; box-shadow: 0 12px 34px rgba(1, 71, 85, 0.09) !important; } body.authentication div:has(> form)::before { content: "Sign in"; display: block; font-size: 21px; font-weight: 700; color: var(--fb-deep); letter-spacing: -0.01em; margin-bottom: 22px; } /* Fields */ body.authentication .bp4-label { font-size: 13px; font-weight: 600; color: var(--fb-ink); margin-bottom: 6px; } body.authentication .bp4-input { height: 44px !important; border-radius: 9px !important; background: #fbfdfd !important; box-shadow: inset 0 0 0 1px var(--fb-border) !important; transition: box-shadow 0.15s ease; } body.authentication .bp4-input:focus { background: var(--fb-surface) !important; box-shadow: inset 0 0 0 1px var(--fb-mid), 0 0 0 3px rgba(1, 107, 120, 0.16) !important; } body.authentication .bp4-control, body.authentication .bp4-checkbox { color: var(--fb-ink); font-size: 13.5px; } /* Submit */ body.authentication .bp4-button.bp4-intent-primary { height: 46px; border-radius: 9px !important; font-weight: 600; letter-spacing: 0.01em; background: linear-gradient(180deg, var(--fb-mid), var(--fb-deep)) !important; box-shadow: none !important; transition: filter 0.15s ease; } body.authentication .bp4-button.bp4-intent-primary:hover { filter: brightness(1.08); } body.authentication a { color: var(--fb-mid); font-weight: 600; } body.authentication a:hover { color: var(--fb-deep); } /* Phone: drop the panel, put the full-colour stacked lockup above the form. Inputs stay >=16px so iOS does not zoom the viewport on focus. */ @media (max-width: 900px) { body.authentication::before { display: none; } body.authentication > #root { margin-left: 0; } body.authentication #root > .App { padding: 28px 18px; } body.authentication #root > .App > div > div > div:first-child { display: block !important; height: 116px; margin-bottom: 26px !important; background: url("/flipbook/flipbook-lockup.png") no-repeat center / contain; } body.authentication .bp4-input { font-size: 16px !important; } } /* ========================================================================== 3. Homepage — card grid, curated to the flipper workflow Upstream renders .financial-reports > __section > (.section-title + __list > __item > a.title + p.desc). These are NOT unstyled: FinancialSheets-*.css (shared with the reports landing page) lays the items out as fixed 250x140 tiles in a wrapping flex row, and it is code-split so it loads AFTER this file. Everything that fights it therefore needs !important. The stylesheet the homepage chunk ships for itself, Homepage-*.css, styles .homepage__container — a class that is never rendered — so that one is genuinely dead and irrelevant. ========================================================================== */ .financial-reports { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; max-width: 1120px; padding: 22px 28px 44px !important; align-items: start; } /* Branded banner spanning the grid. The tagline sits to the right of the lockup, which the background-position keeps clear. */ .financial-reports::before { content: "Accounting for Flippers"; grid-column: 1 / -1; display: flex; align-items: center; min-height: 88px; padding-left: 208px; border-radius: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.82); background: url("/flipbook/flipbook-horizontal-white.png") no-repeat 26px center / auto 40px, linear-gradient(120deg, var(--fb-deep) 0%, var(--fb-mid) 68%, var(--fb-light) 100%); } .financial-reports__section { background: var(--fb-surface); border: 1px solid var(--fb-border); border-radius: 12px; padding: 2px 20px 12px; box-shadow: 0 1px 2px rgba(1, 71, 85, 0.04); } .financial-reports .section-title { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fb-mid) !important; margin: 0 !important; padding: 16px 0 11px !important; border-bottom: 1px solid var(--fb-border); } /* Undo the fixed-tile flex row: a plain vertical list reads better in a card and keeps the page dense. */ .financial-reports__list { display: block !important; margin-left: 0 !important; } .financial-reports__item { width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 13px 0 !important; border: 0 !important; border-bottom: 1px solid var(--fb-hairline) !important; } .financial-reports__item:last-child { border-bottom: 0 !important; } .financial-reports__item .title { display: block; font-size: 14.5px !important; font-weight: 600; color: var(--fb-deep); text-decoration: none; } .financial-reports__item .title:hover { color: var(--fb-mid); text-decoration: none; } .financial-reports__item .desc { margin: 3px 0 0 !important; font-size: 12.5px; line-height: 1.45; color: var(--fb-muted) !important; } /* Curation: a house flipper raises no sales invoices, estimates or quotes, and carries no inventory items — those two stock sections are noise. Matched on link target rather than :nth-child so upstream reordering the sections cannot silently hide the wrong one. */ .financial-reports__section:has(a[href="/invoices"]), /* Accounts Receivable */ .financial-reports__section:has(a[href="/items"]) { /* Products & Inventory */ display: none !important; } @media (max-width: 700px) { .financial-reports { padding: 14px 14px 32px !important; gap: 14px; } .financial-reports::before { min-height: 68px; padding-left: 0; justify-content: center; font-size: 0; background-size: auto 30px, cover; background-position: center, center; } } /* ========================================================================== 4. Shell polish ========================================================================== */ body { background: var(--fb-bg); } .dashboard__topbar-navbar { border-bottom: 1px solid var(--fb-border); } /* Keep primary actions on-brand across the app, not just on login. */ .bp4-button.bp4-intent-primary { background-color: var(--fb-mid) !important; background-image: none !important; } .bp4-button.bp4-intent-primary:hover { background-color: var(--fb-deep) !important; }