spouliot/PowderCoatingLogix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix invisible formula/AI badges: move custom bg-* colors to site.css

Browse Source 
bg-purple (formula, AI badges) was only defined in company-settings-lookups.css
which is not loaded on Quote/Job pages. The badge element rendered with no
background, appearing as a blank space in front of the item description.

Moved all 13 custom color utilities (purple, pink, cyan, teal, indigo, lime,
brown, gray, orange, yellow, green, blue, red) to site.css so they are
available globally. company-settings-lookups.css retains its definitions for
now (harmless duplication; can be cleaned up later).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Pouliot
2026-05-27 18:25:36 -04:00
parent 3cee1307fc
commit 32d09b38f1
1 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/PowderCoating.Web/wwwroot/css/site.css
+18
View File
@@ -838,6 +838,24 @@ th.sortable:hover i {
color: #000 !important; color: #000 !important;
} }
/* Custom badge/background colours not included in Bootstrap 5 core.
Defined globally here so they work on every page (quotes, jobs, wizard, etc.).
Previously only defined in company-settings-lookups.css, which caused invisible
formula/AI item badges on any page that didn't load that stylesheet. */
.bg-purple { background-color: #6f42c1 !important; color: #fff !important; }
.bg-pink { background-color: #d63384 !important; color: #fff !important; }
.bg-cyan { background-color: #0dcaf0 !important; color: #000 !important; }
.bg-teal { background-color: #20c997 !important; color: #fff !important; }
.bg-indigo { background-color: #6610f2 !important; color: #fff !important; }
.bg-lime { background-color: #84cc16 !important; color: #000 !important; }
.bg-brown { background-color: #795548 !important; color: #fff !important; }
.bg-gray { background-color: #6c757d !important; color: #fff !important; }
.bg-orange { background-color: #fd7e14 !important; color: #fff !important; }
.bg-yellow { background-color: #ffc107 !important; color: #000 !important; }
.bg-green { background-color: #198754 !important; color: #fff !important; }
.bg-blue { background-color: #0d6efd !important; color: #fff !important; }
.bg-red { background-color: #dc3545 !important; color: #fff !important; }
/* ============================================================ /* ============================================================
Tom Select — dark mode fixes Tom Select — dark mode fixes
Tom Select's Bootstrap 5 theme hardcodes color:#343a40 which Tom Select's Bootstrap 5 theme hardcodes color:#343a40 which