/* TipTracker UI - Bootstrap polish + ambient blur background (green/purple) */ :root{ --tt-green: 34,197,94; /* emerald */ --tt-purple: 168,85,247; /* violet */ --tt-brand-rgb: var(--tt-green); --tt-accent-rgb: var(--tt-purple); --tt-radius: 18px; --tt-shadow-light: 0 12px 32px rgba(0,0,0,.08); --tt-shadow-dark: 0 18px 46px rgba(0,0,0,.45); } /* Ambient backdrop */ .tt-bg{ position: relative; min-height: 100vh; } .tt-bg::before, .tt-bg::after{ content:""; position: fixed; inset: -20vh -20vw; z-index: -2; pointer-events: none; } .tt-bg::before{ background: radial-gradient(1200px 900px at 18% 12%, rgba(var(--tt-green), .25), transparent 65%), radial-gradient(1100px 850px at 82% 8%, rgba(var(--tt-purple), .22), transparent 70%), radial-gradient(900px 700px at 60% 88%, rgba(var(--tt-green), .12), transparent 70%); filter: blur(0px); } .tt-bg::after{ background: radial-gradient(700px 500px at 20% 30%, rgba(var(--tt-green), .18), transparent 70%), radial-gradient(700px 500px at 80% 24%, rgba(var(--tt-purple), .18), transparent 70%); filter: blur(34px); opacity: .9; } /* ============================ PATCH: also support body.tt-ambient (your base.html uses ) ============================ */ .tt-ambient{ position: relative; min-height: 100vh; } .tt-ambient::before, .tt-ambient::after{ content:""; position: fixed; inset: -20vh -20vw; z-index: -2; pointer-events: none; } .tt-ambient::before{ background: radial-gradient(1200px 900px at 18% 12%, rgba(var(--tt-green), .25), transparent 65%), radial-gradient(1100px 850px at 82% 8%, rgba(var(--tt-purple), .22), transparent 70%), radial-gradient(900px 700px at 60% 88%, rgba(var(--tt-green), .12), transparent 70%); filter: blur(0px); } .tt-ambient::after{ background: radial-gradient(700px 500px at 20% 30%, rgba(var(--tt-green), .18), transparent 70%), radial-gradient(700px 500px at 80% 24%, rgba(var(--tt-purple), .18), transparent 70%); filter: blur(34px); opacity: .9; } /* ============================ END PATCH ============================ */ /* Make sure bootstrap background isn't flat */ html[data-bs-theme="dark"] body{ background-color: #0b0f17; } html[data-bs-theme="light"] body{ background-color: #f7f9ff; } /* Nav gets a subtle glass feel */ .tt-nav{ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); } html[data-bs-theme="light"] .tt-nav{ border-bottom: 1px solid rgba(0,0,0,.08); } /* (Unused if you removed the dot in HTML, safe to keep) */ .tt-dot{ width: 12px; height: 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(var(--tt-green),1), rgba(var(--tt-purple),1)); box-shadow: 0 0 0 6px rgba(var(--tt-green), .14), 0 0 18px rgba(var(--tt-purple), .22); } /* Cards */ .tt-card{ border-radius: var(--tt-radius); overflow: hidden; } .tt-soft-shadow{ box-shadow: var(--tt-shadow-light); } html[data-bs-theme="dark"] .tt-soft-shadow{ box-shadow: var(--tt-shadow-dark); } /* Glass surface on top of ambient bg */ .tt-glass{ background: rgba(255,255,255,.72); border: 1px solid rgba(0,0,0,.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html[data-bs-theme="dark"] .tt-glass{ background: rgba(15, 22, 36, .72); border: 1px solid rgba(255,255,255,.08); } /* Buttons inherit the glass vibe a bit */ .tt-btn{ border-radius: 14px; } /* Alerts match cards */ .tt-alert{ border-radius: 16px; border: 1px solid rgba(255,255,255,.10); } html[data-bs-theme="light"] .tt-alert{ border: 1px solid rgba(0,0,0,.08); } /* KPIs */ .tt-kpi{ font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; } .tt-mono{ font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Receipt thumbnails */ .tt-thumb{ width: 100%; height: 150px; object-fit: cover; cursor: pointer; } /* File preview grid items */ .tt-thumb-name{ font-size: .8rem; word-break: break-word; } /* Modal image fit */ .tt-modal-imgwrap{ width: 100%; height: min(78vh, 820px); display: flex; align-items: center; justify-content: center; background: var(--bs-body-bg); } .tt-modal-img{ max-width: 100%; max-height: 100%; object-fit: contain; } /* Chart container */ .tt-chart{ width: 100%; height: 300px; } /* Slightly nicer tables on mobile */ .table-responsive{ border-radius: 16px; } /* --- Make secondary/outline buttons visible on dark background --- */ html[data-bs-theme="dark"] .btn-outline-secondary, html[data-bs-theme="dark"] .btn-secondary{ border-color: rgba(255,255,255,.28) !important; color: rgba(255,255,255,.88) !important; background: rgba(255,255,255,.06) !important; /* faint fill so it doesn't blend */ box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; } html[data-bs-theme="dark"] .btn-outline-secondary:hover, html[data-bs-theme="dark"] .btn-secondary:hover{ border-color: rgba(255,255,255,.40) !important; background: rgba(255,255,255,.12) !important; color: #fff !important; } html[data-bs-theme="dark"] .btn-outline-secondary:focus, html[data-bs-theme="dark"] .btn-secondary:focus, html[data-bs-theme="dark"] .btn-outline-secondary:focus-visible, html[data-bs-theme="dark"] .btn-secondary:focus-visible{ box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 0 .22rem rgba(var(--tt-purple), .25) !important; } html[data-bs-theme="dark"] .btn-outline-secondary:disabled, html[data-bs-theme="dark"] .btn-secondary:disabled{ opacity: .55; background: rgba(255,255,255,.04) !important; } /* Modal header actions: keep Open + Close on the right with spacing */ .tt-modal-actions{ margin-left: auto; display: flex; align-items: center; gap: .6rem; /* space between Open and X */ } .tt-modal-actions .btn-close{ margin: 0; /* prevents Bootstrap default margin quirks */ } /* Space between receipt preview grid and buttons */ #receiptPreview{ margin-bottom: 1rem; /* increase to 1.5rem if you want more */ } #receiptPreview .card{ margin-bottom: .25rem; } /* ----------------------------- Sortable table headers (clean) ------------------------------ */ th.tt-sortable{ cursor: pointer; user-select: none; white-space: nowrap; } .tt-sort-link{ color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; user-select: none; } .tt-sort-link:hover{ text-decoration: none; opacity: .95; } .tt-sort-icons{ display: inline-flex; flex-direction: column; line-height: .75; font-size: .6rem; opacity: .35; transform: translateY(-1px); } .tt-sort-icons .up, .tt-sort-icons .down{ display: block; height: .6rem; } /* Active sort state */ th.tt-sortable.tt-sort-active .tt-sort-icons{ opacity: .85; } th.tt-sortable.tt-sort-active.tt-sort-asc .tt-sort-icons .up{ opacity: 1; color: var(--bs-primary); } th.tt-sortable.tt-sort-active.tt-sort-asc .tt-sort-icons .down{ opacity: .25; } th.tt-sortable.tt-sort-active.tt-sort-desc .tt-sort-icons .down{ opacity: 1; color: var(--bs-primary); } th.tt-sortable.tt-sort-active.tt-sort-desc .tt-sort-icons .up{ opacity: .25; } /* ----------------------------- Sticky + blur navbar patch ------------------------------ */ .tt-nav-sticky{ position: sticky; top: 0; z-index: 1030; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Stronger contrast for glass navbar */ html[data-bs-theme="dark"] .tt-nav.tt-nav-sticky{ background: rgba(15, 22, 36, .65); border-bottom: 1px solid rgba(255,255,255,.10); } html[data-bs-theme="light"] .tt-nav.tt-nav-sticky{ background: rgba(255,255,255,.75); border-bottom: 1px solid rgba(0,0,0,.08); } /* Navbar shrink-on-scroll polish */ .tt-nav{ transition: box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease; } /* Wrap your container in .tt-nav-inner for smooth padding animation (recommended) */ .tt-nav-inner{ padding-top: .75rem; padding-bottom: .75rem; transition: padding 160ms ease; } /* Scrolled state: slightly tighter + shadow */ .tt-nav--scrolled .tt-nav-inner{ padding-top: .40rem; padding-bottom: .40rem; } html[data-bs-theme="dark"] .tt-nav--scrolled{ box-shadow: 0 10px 26px rgba(0,0,0,.45); border-bottom-color: rgba(255,255,255,.14); background: rgba(15, 22, 36, .78); } html[data-bs-theme="light"] .tt-nav--scrolled{ box-shadow: 0 10px 22px rgba(0,0,0,.12); border-bottom-color: rgba(0,0,0,.10); background: rgba(255,255,255,.82); } /* Optional: make the brand feel a touch more compact when scrolled */ .tt-nav--scrolled .navbar-brand{ transform: translateY(-1px); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ .tt-nav, .tt-nav-inner{ transition: none; } } /* ============================ PATCH: tt-table theme-aware styling (fix: table rows stay dark in light mode + improve spacing) ============================ */ .tt-table{ --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: rgba(255,255,255,.10); --bs-table-striped-bg: rgba(255,255,255,.04); --bs-table-striped-color: var(--bs-body-color); --bs-table-hover-bg: rgba(255,255,255,.06); --bs-table-hover-color: var(--bs-body-color); } html[data-bs-theme="light"] .tt-table{ --bs-table-border-color: rgba(0,0,0,.10); --bs-table-striped-bg: rgba(0,0,0,.03); --bs-table-hover-bg: rgba(0,0,0,.05); } /* Comfortable row height */ .tt-table thead th, .tt-table tbody td{ padding-top: .78rem; padding-bottom: .78rem; } /* ============================ END PATCH ============================ */ /* Reports/Dashboard table: nicer edge padding for first + last columns */ .tt-table thead th:first-child, .tt-table tbody td:first-child{ padding-left: 1.1rem; } .tt-table thead th:last-child, .tt-table tbody td:last-child{ padding-right: 1.1rem; } /* Keep your generic table padding too, but fix missing semicolons */ .table thead th:first-child, .table tbody td:first-child{ padding-left: 1.1rem; } .table thead th:last-child, .table tbody td:last-child{ padding-right: 1.1rem; } /* ========================================================= Password eye toggle: force icon visibility in both themes Put this at the VERY END of styles.css so it wins. ========================================================= */ .tt-pass-toggle{ display: inline-flex; align-items: center; justify-content: center; min-width: 44px; /* consistent square button */ padding: 0 .8rem; } /* Force SVG to render with the button color no matter what */ .tt-pass-toggle .tt-eye{ display: block; width: 16px; height: 16px; fill: currentColor !important; stroke: none !important; pointer-events: none; opacity: 1 !important; } /* Override your global dark-mode btn-outline-secondary patch for THIS button */ html[data-bs-theme="dark"] .tt-pass-toggle.btn-outline-secondary{ color: rgba(255,255,255,.92) !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.28) !important; } /* Light theme readability (prevents “white on white” or washed out icon) */ html[data-bs-theme="light"] .tt-pass-toggle.btn-outline-secondary{ color: rgba(11,18,32,.80) !important; background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.18) !important; } /* Extra safety: add a tiny outline so even same-color backgrounds show the icon */ html[data-bs-theme="dark"] .tt-pass-toggle .tt-eye{ filter: drop-shadow(0 0 1px rgba(0,0,0,.65)); } html[data-bs-theme="light"] .tt-pass-toggle .tt-eye{ filter: drop-shadow(0 0 1px rgba(255,255,255,.55)); }