/* * Theme system layered on Bootstrap 4.1. * Each theme sets CSS variables on ; * the rules below map those variables onto Bootstrap components. */ :root { /* Type scale — replaces ad hoc inline font-size values. */ --fs-2xs: 0.75rem; --fs-xs: 0.85rem; --fs-sm: 0.95rem; --fs-base: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.9rem; --fs-3xl: 2.6rem; /* Brand palette for the logged-out marketing pages (home, privacy policy). These pages stay on-brand regardless of the visitor's data-theme cookie, so they read from this fixed palette instead of the --theme-* tokens. */ --brand-dark: #1b2e24; --brand-deep: #1b4332; --brand-primary: #2d6a4f; --brand-accent: #52b788; --brand-accent-hover: #74c69d; --brand-light: #95d5b2; --brand-tint: #b7e4c7; --brand-muted: #74a68c; --brand-success-bg: #d8f3dc; --brand-surface: #eef5f1; --brand-surface-alt: #f8faf9; } /* Flatly teal is the default theme. It carries the bare :root selector so it applies whenever no data-theme is resolved. This block must stay FIRST among the theme blocks: :root and [data-theme="..."] have equal specificity, so a later theme block only wins when its attribute is present — which is exactly the override behaviour we want. */ :root, [data-theme="flatly"] { --theme-body-bg: #ffffff; --theme-body-color: #212529; --theme-muted: #7b8a8b; --theme-primary: #18bc9c; --theme-primary-hover: #128f76; --theme-on-primary: #ffffff; --theme-navbar-bg: #2c3e50; --theme-navbar-color: #ffffff; --theme-navbar-link: #1abc9c; --theme-navbar-muted: #95a5b3; --theme-card-bg: #ffffff; --theme-border: #dce4e6; --theme-input-bg: #ffffff; --theme-input-color: #212529; --theme-success-bg: #d1f2eb; --theme-success-color: #0e6655; --theme-tile-bg: #eef2f5; --theme-danger-color: #b02a37; --theme-warning-color: #b8860b; } /* "Azure Sky" — the original blue-on-white Bootstrap look. Keyed "default" for backward compatibility with existing theme cookies. */ [data-theme="default"] { --theme-body-bg: #ffffff; --theme-body-color: #212529; --theme-muted: #6c757d; --theme-primary: #007bff; --theme-primary-hover: #0069d9; --theme-on-primary: #ffffff; --theme-navbar-bg: #f8f9fa; --theme-navbar-color: #212529; --theme-navbar-link: #007bff; --theme-navbar-muted: #6c757d; --theme-card-bg: #ffffff; --theme-border: #dee2e6; --theme-input-bg: #ffffff; --theme-input-color: #495057; --theme-success-bg: #d4edda; --theme-success-color: #155724; --theme-tile-bg: #f8f9fa; --theme-danger-color: #b02a37; --theme-warning-color: #856404; } [data-theme="finance"] { --theme-body-bg: #fbfdfc; --theme-body-color: #1b2e24; --theme-muted: #6c757d; --theme-primary: #2d6a4f; --theme-primary-hover: #1b4332; --theme-on-primary: #ffffff; --theme-navbar-bg: #1b4332; --theme-navbar-color: #ffffff; --theme-navbar-link: #95d5b2; --theme-navbar-muted: #74a68c; --theme-card-bg: #ffffff; --theme-border: #d8e5de; --theme-input-bg: #ffffff; --theme-input-color: #1b2e24; --theme-success-bg: #d8f3dc; --theme-success-color: #1b4332; --theme-tile-bg: #eef5f1; --theme-danger-color: #b02a37; --theme-warning-color: #8a6d1f; } [data-theme="dark"] { --theme-body-bg: #222529; --theme-body-color: #dee2e6; --theme-muted: #b0b7bd; --theme-primary: #6ea8fe; --theme-primary-hover: #8bb9fe; --theme-on-primary: #0a2f6b; --theme-navbar-bg: #2c3034; --theme-navbar-color: #f8f9fa; --theme-navbar-link: #6ea8fe; --theme-navbar-muted: #b0b7bd; --theme-card-bg: #2c3034; --theme-border: #495057; --theme-input-bg: #2c3034; --theme-input-color: #dee2e6; --theme-success-bg: #143620; --theme-success-color: #75b798; --theme-tile-bg: #2c3034; --theme-danger-color: #ea868f; --theme-warning-color: #ffda6a; } /* ---- Type scale utilities ---- */ .fs-2xs { font-size: var(--fs-2xs); } .fs-xs { font-size: var(--fs-xs); } .fs-sm { font-size: var(--fs-sm); } .fs-base { font-size: var(--fs-base); } .fs-lg { font-size: var(--fs-lg); } .fs-xl { font-size: var(--fs-xl); } .fs-2xl { font-size: var(--fs-2xl); } .fs-3xl { font-size: var(--fs-3xl); } /* ---- Status text (theme-aware alternative to Bootstrap's text-success/-warning/-danger) ---- */ .text-status-success { color: var(--theme-success-color); } .text-status-warning { color: var(--theme-warning-color); } .text-status-danger { color: var(--theme-danger-color); } /* ---- Public pages (home, privacy policy, sign in / sign up) ---- */ /* Shared so the logged-out pages can't drift from each other. All of them render through templates/public_base.html. */ /* Sticky footer: short pages (the auth screens) shouldn't leave the footer floating in the middle of the viewport. */ body.public-page { display: flex; flex-direction: column; min-height: 100vh; } body.public-page .public-main { flex: 1 0 auto; display: flex; flex-direction: column; } .public-footer { background: var(--brand-dark); color: var(--brand-muted); font-size: var(--fs-xs); padding: 1.4rem 0; text-align: center; } .public-footer a { color: var(--brand-light); text-decoration: none; } .public-footer a:hover { text-decoration: underline; } .public-nav { background: var(--brand-deep); } .public-nav .navbar-brand { color: var(--brand-tint); font-weight: 700; } .public-nav .btn-nav-login { color: var(--brand-tint); border: 1px solid var(--brand-accent); border-radius: 0.35rem; padding: 0.35rem 0.9rem; } .public-nav .btn-nav-login:hover { background-color: rgba(255,255,255,0.1); color: #fff; } .public-nav .btn-nav-signup { background: var(--brand-light); color: var(--brand-deep); font-weight: 600; border-radius: 0.35rem; padding: 0.35rem 1rem; } .public-nav .btn-nav-signup:hover { background: var(--brand-accent-hover); } .public-nav .nav-link { color: var(--brand-light); } .public-nav .nav-link:hover { color: #fff; } /* ---- Entrance screens (sign in, sign up, one-time code) ---- */ /* allauth renders these from templates/allauth/layouts/entrance.html. The markup comes from allauth's own templates, so the selectors below target plain elements inside the card rather than classes we control. */ .entrance { /* flex-grow so the tinted panel reaches the footer on tall viewports. */ flex: 1 0 auto; background: var(--brand-surface-alt); padding: 3.5rem 1rem 4rem; } .entrance-card { max-width: 26rem; margin: 0 auto; background: #fff; border: 1px solid var(--brand-surface); border-radius: 0.75rem; padding: 2.25rem 2rem; box-shadow: 0 10px 30px rgba(27, 67, 50, 0.08); } .entrance-card h1 { font-size: var(--fs-xl); font-weight: 700; color: var(--brand-dark); margin-bottom: 0.75rem; } .entrance-card p { font-size: var(--fs-sm); color: var(--theme-muted); } .entrance-card a { color: var(--brand-primary); font-weight: 600; } .entrance-card a:hover { color: var(--brand-deep); } .entrance-card hr { border-top-color: var(--brand-surface); margin: 1.5rem 0; } /* Brand green, not the themed teal -- these pages predate any theme choice. */ .entrance-card .btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff; font-weight: 600; padding: 0.6rem 1rem; border-radius: 0.4rem; } .entrance-card .btn-primary:hover { background-color: var(--brand-deep); border-color: var(--brand-deep); } .entrance-card .btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-accent); font-weight: 600; padding: 0.6rem 1rem; border-radius: 0.4rem; } .entrance-card .btn-outline-primary:hover { background-color: var(--brand-surface); color: var(--brand-deep); border-color: var(--brand-accent); } .entrance-card .btn:focus, .entrance-card input:focus { outline: none; box-shadow: 0 0 0 0.2rem rgba(82, 183, 136, 0.4); } /* allauth renders its forms with Django's as_p, so style the raw elements. */ .entrance-card form p { margin-bottom: 1rem; } .entrance-card form label { display: block; margin-bottom: 0.35rem; font-size: var(--fs-xs); font-weight: 600; color: var(--brand-dark); } .entrance-card form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { display: block; width: 100%; padding: 0.55rem 0.75rem; font-size: var(--fs-base); line-height: 1.5; color: var(--brand-dark); background-color: #fff; border: 1px solid #ced9d3; border-radius: 0.4rem; } .entrance-card .errorlist { color: var(--theme-danger-color); list-style: none; padding-left: 0; font-size: var(--fs-xs); margin-bottom: 0.25rem; } .entrance-card .helptext { display: block; color: var(--theme-muted); font-size: var(--fs-2xs); margin-top: 0.25rem; } .entrance-note { max-width: 26rem; margin: 1.25rem auto 0; text-align: center; font-size: var(--fs-xs); color: var(--theme-muted); } /* ---- Mappings onto Bootstrap ---- */ body { background-color: var(--theme-body-bg); color: var(--theme-body-color); } .text-muted { color: var(--theme-muted) !important; } .navbar.themed { background-color: var(--theme-navbar-bg); } .navbar.themed .navbar-brand { color: var(--theme-navbar-color); } .navbar.themed .nav-link { color: var(--theme-navbar-link); } .navbar.themed .navbar-text { color: var(--theme-navbar-muted); } .btn-primary { background-color: var(--theme-primary); border-color: var(--theme-primary); color: var(--theme-on-primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):active { background-color: var(--theme-primary-hover); border-color: var(--theme-primary-hover); color: var(--theme-on-primary); } .btn-outline-secondary { color: var(--theme-body-color); border-color: var(--theme-border); } .btn-outline-secondary:hover { background-color: var(--theme-border); color: var(--theme-body-color); } /* Logout button sits inside .navbar.themed — use navbar-context colors so it remains legible on dark navbar backgrounds (Finance green, Flatly teal, Dark). */ .navbar.themed .btn-outline-secondary { color: var(--theme-navbar-color); border-color: var(--theme-navbar-muted); } .navbar.themed .btn-outline-secondary:hover { background-color: var(--theme-navbar-muted); color: var(--theme-navbar-bg); border-color: var(--theme-navbar-muted); } a { color: var(--theme-primary); } a:hover { color: var(--theme-primary-hover); } .table { color: var(--theme-body-color); } .table th, .table td { border-color: var(--theme-border); } .table thead th { border-bottom-color: var(--theme-border); } .card { background-color: var(--theme-card-bg); border-color: var(--theme-border); } .card-header { background-color: var(--theme-tile-bg); color: var(--theme-body-color); border-bottom-color: var(--theme-border); } .list-group-item { background-color: var(--theme-card-bg); color: var(--theme-body-color); border-color: var(--theme-border); } .badge-secondary { background-color: var(--theme-border); color: var(--theme-body-color); } .form-control, .custom-select { background-color: var(--theme-input-bg); color: var(--theme-input-color); border-color: var(--theme-border); } .form-control:focus, .custom-select:focus { background-color: var(--theme-input-bg); color: var(--theme-input-color); border-color: var(--theme-primary); box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1); } .alert-success { background-color: var(--theme-success-bg); border-color: var(--theme-success-bg); color: var(--theme-success-color); } pre { color: var(--theme-body-color); background-color: var(--theme-card-bg); border: 1px solid var(--theme-border); padding: 0.75rem; border-radius: 0.25rem; } hr { border-top-color: var(--theme-border); } .display-total { font-size: 2rem; font-weight: 600; } @media (max-width: 576px) { .display-total { font-size: 1.6rem; } } /* Stat tiles */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .stat-tile { background-color: var(--theme-tile-bg); border-radius: 8px; padding: 0.75rem 1rem; } /* Asset / liability accent on the dashboard breakdown tiles. */ .stat-tile-asset { border-left: 3px solid var(--theme-success-color); } .stat-tile-liability { border-left: 3px solid var(--theme-danger-color); } .stat-label { font-size: 0.78rem; color: var(--theme-muted); } .stat-value { font-size: 1.15rem; font-weight: 600; color: var(--theme-body-color); } .account-section-header { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--theme-muted); } .account-section-header::after { content: ""; flex: 1; height: 1px; background: var(--theme-border); } .account-section-header .account-section-count { letter-spacing: 0; font-weight: 500; opacity: 0.75; } .accounts-container.hide-inactive .account-inactive, #accounts-container.hide-inactive .account-inactive { display: none; } .hidden-toggle { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--theme-body-color); cursor: pointer; user-select: none; } /* Small slider switch, sits to the right of the label text. */ .switch { position: relative; display: inline-block; width: 34px; height: 18px; flex: none; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; } .switch-slider { position: absolute; inset: 0; background: var(--theme-border); border-radius: 999px; transition: background 0.15s ease; } .switch-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease; } .switch input:checked + .switch-slider { background: var(--theme-primary); } .switch input:checked + .switch-slider::before { transform: translateX(16px); } .switch input:focus-visible + .switch-slider { box-shadow: 0 0 0 2px var(--theme-primary-hover); } .hidden-toggle-count { font-size: 0.72rem; padding: 0.05rem 0.4rem; border-radius: 999px; border: 1px solid var(--theme-border); color: var(--theme-muted); } .font-weight-500 { font-weight: 500; } .change-badge { font-size: 0.75rem; font-weight: 500; border-radius: 999px; padding: 0.25em 0.7em; vertical-align: middle; } .change-up { background-color: var(--theme-success-bg); color: var(--theme-success-color); } .change-down { background-color: transparent; color: var(--theme-danger-color); border: 1px solid var(--theme-danger-color); } /* Account cards */ /* Use explicit muted colors instead of opacity so text contrast remains readable. */ .card.account-hidden { border-style: dashed; } .card.account-hidden .font-weight-500, .card.account-hidden .stat-value { color: var(--theme-muted); font-weight: 400; } .card.account-hidden .stat-label { opacity: 0.8; } /* Balance entry rows */ .balance-row + .balance-row { border-top: 1px solid var(--theme-border); } .balance-input { width: 140px; } @media (max-width: 400px) { .balance-input { width: 100%; margin-top: 0.4rem; } } .input-group-text { background-color: var(--theme-tile-bg); color: var(--theme-muted); border-color: var(--theme-border); } /* Mobile navbar */ .navbar-toggler.themed-toggler { color: var(--theme-navbar-link); border: 1px solid var(--theme-navbar-muted); font-size: 1.1rem; line-height: 1; padding: 0.3rem 0.6rem; } @media (max-width: 767.98px) { .navbar.themed .navbar-collapse { padding-top: 0.5rem; } .navbar.themed .nav-tools { border-top: 1px solid var(--theme-navbar-muted); margin-top: 0.5rem; padding-top: 0.5rem; } } /* Theme picker in the navbar */ .theme-picker { background-color: transparent; color: var(--theme-navbar-muted); border: 1px solid var(--theme-navbar-muted); border-radius: 0.25rem; padding: 0.15rem 0.4rem; font-size: 0.85rem; } .theme-picker option { color: var(--theme-body-color); background-color: var(--theme-card-bg); } /* ----------------------------------------------------------------------- Desktop left sidebar (md+). Below 768px the navbar keeps its original top-bar + hamburger behaviour untouched. -------------------------------------------------------------------- */ @media (min-width: 768px) { /* Offset the page content clear of the fixed sidebar. The max() keeps the content centred in the viewport on wide screens, but never lets it slide under the 230px sidebar (leaves a ~20px gutter) on narrower ones. */ main.container, footer.container { margin-left: max(250px, calc((100vw - 900px) / 2)); margin-right: auto; } .navbar.themed.app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 230px; margin: 0; padding: 1rem 0.75rem; overflow-y: auto; align-items: stretch; flex-direction: column; border-right: 1px solid var(--theme-navbar-muted); z-index: 1030; } /* The inner .container normally centres content horizontally; inside the sidebar it should be a full-height vertical flex column instead. */ .app-sidebar > .container { display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch; max-width: none; width: 100%; padding: 0; } .app-sidebar .navbar-brand { margin: 0 0 1.25rem 0; padding: 0 0.5rem; font-size: 1.15rem; white-space: normal; line-height: 1.25; } .app-sidebar .navbar-collapse { flex: 1 1 auto; flex-direction: column; align-items: stretch; } .app-sidebar .navbar-nav { flex-direction: column; width: 100%; } .app-sidebar .navbar-nav .nav-link { padding: 0.5rem 0.75rem; border-radius: 0.25rem; } .app-sidebar .navbar-nav .nav-link:hover, .app-sidebar .navbar-nav .nav-link:focus { background-color: var(--theme-navbar-muted); color: var(--theme-navbar-bg); } /* Current page */ .app-sidebar .navbar-nav .nav-link.active { background-color: var(--theme-primary); color: var(--theme-on-primary); font-weight: 600; } /* Tools (theme picker / user / logout) pinned to the bottom, stacked. */ .app-sidebar .nav-tools { margin-top: auto; flex-direction: column; align-items: stretch !important; border-top: 1px solid var(--theme-navbar-muted); padding-top: 0.75rem; } .app-sidebar .nav-tools > * { margin: 0.3rem 0 !important; width: 100%; } .app-sidebar .nav-tools .form-inline { display: block; } .app-sidebar .nav-tools .btn { width: 100%; } }