/* ========================================================================== Custom "minty" Color Suite Main Light Mint: #E2F9F4 ========================================================================== */ /* 1. Define the Color Variables */ :root { --bs-minty: #21b092; /* Vibrant mint/teal for main elements */ --bs-minty-rgb: 33, 176, 146; /* RGB version of main color */ --bs-minty-bg-subtle: #E2F9F4; /* Your #E2F9F4 light mint background */ --bs-minty-border-subtle: #b1eee3; /* Slightly darker border for alerts/tables */ --bs-minty-text-emphasis: #0f5144; /* Dark teal for readable text on light mint */ } /* 2. Text, Background, and Border Utilities */ .text-minty { color: var(--bs-minty) !important; } .bg-minty { background-color: var(--bs-minty) !important; } .border-minty { border-color: var(--bs-minty) !important; } /* 3. Alerts (.alert-minty) */ .alert-minty { --bs-alert-color: var(--bs-minty-text-emphasis); --bs-alert-bg: var(--bs-minty-bg-subtle); --bs-alert-border-color: var(--bs-minty-border-subtle); } /* 4. Buttons (.btn-minty) */ .btn-minty { --bs-btn-color: #ffffff; --bs-btn-bg: var(--bs-minty); --bs-btn-border-color: var(--bs-minty); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #1a9279; /* Slightly darker hover */ --bs-btn-hover-border-color: #1a9279; --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #147360; /* Darker active state */ --bs-btn-active-border-color: #147360; --bs-btn-focus-shadow-rgb: 33, 176, 146; } /* 5. Tables (.table-minty) */ .table-minty { --bs-table-color: var(--bs-minty-text-emphasis); --bs-table-bg: var(--bs-minty-bg-subtle); --bs-table-border-color: var(--bs-minty-border-subtle); } /* ========================================================================== Custom "stone" Color Suite Main Light Mint: #E2F9F4 ========================================================================== */ /* 1. Define the Color Variables */ :root { --bs-stone: #E8F1F6; --bs-stone-rgb: 232, 241, 246; --bs-stone-bg-subtle: #E8F1F6; --bs-stone-border-subtle: #69727D; --bs-stone-text-emphasis: #0f5144; } /* 2. Text, Background, and Border Utilities */ .text-stone { color: var(--bs-stone) !important; } .bg-stone { background-color: var(--bs-stone) !important; } .border-stone { border-color: var(--bs-stone) !important; } /* 3. Alerts (.alert-stone) */ .alert-stone { --bs-alert-color: var(--bs-stone-text-emphasis); --bs-alert-bg: var(--bs-stone-bg-subtle); --bs-alert-border-color: var(--bs-stone-border-subtle); } /* 4. Buttons (.btn-stone) */ .btn-stone { --bs-btn-color: #ffffff; --bs-btn-bg: var(--bs-stone); --bs-btn-border-color: var(--bs-stone); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #1a9279; /* Slightly darker hover */ --bs-btn-hover-border-color: #1a9279; --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #147360; /* Darker active state */ --bs-btn-active-border-color: #147360; --bs-btn-focus-shadow-rgb: 33, 176, 146; } /* 5. Tables (.table-stone) */ .table-stone { --bs-table-color: var(--bs-stone-text-emphasis); --bs-table-bg: var(--bs-stone-bg-subtle); --bs-table-border-color: var(--bs-stone-border-subtle); } /* ========================================================================== OVERRIDE A BOOTSTRAP DEFAULT ========================================================================== */ /* ========================================================================== custom.css - Bootstrap 5.3.3 Custom Success Theme Overrides Link this AFTER bootstrap.min.css in your HTML ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. Main Success Color ------------------------------------------------------------------------ */ --bs-success: #87D4B3; /* MUST match your hex color converted to RGB (Red, Green, Blue). Crucial for opacity utilities like .bg-success and .text-success */ --bs-success-rgb: 135, 212, 179; /* ------------------------------------------------------------------------ 2. Bootstrap 5.3+ Subtle Theme Variables Controls .alert-success, soft badges, and light component backgrounds ------------------------------------------------------------------------ */ --bs-success-bg-subtle: #eefaf5; --bs-success-border-subtle: #b3e5d0; --bs-success-text-emphasis: #134e35; } /* -------------------------------------------------------------------------- 3. Solid Button (.btn-success) -------------------------------------------------------------------------- */ .btn-success { /* Dark text used for accessibility/contrast against this lighter shade */ --bs-btn-color: #0f3827; --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); /* Hover State */ --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #6dbf9e; --bs-btn-hover-border-color: #6dbf9e; /* Active / Pressed State */ --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #52a381; --bs-btn-active-border-color: #52a381; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Focus Glow Ring */ --bs-btn-focus-shadow-rgb: 135, 212, 179; } /* -------------------------------------------------------------------------- 4. Outline Button (.btn-outline-success) -------------------------------------------------------------------------- */ .btn-outline-success { --bs-btn-color: #134e35; --bs-btn-border-color: var(--bs-success); /* Hover State */ --bs-btn-hover-color: #0f3827; --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); /* Active / Pressed State */ --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #6dbf9e; --bs-btn-active-border-color: #6dbf9e; /* Focus Glow Ring */ --bs-btn-focus-shadow-rgb: 135, 212, 179; } /* -------------------------------------------------------------------------- 5. Dark Mode Overrides Ensures soft backgrounds and text remain readable in dark mode -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --bs-success-bg-subtle: #133829; --bs-success-border-subtle: #1f5940; --bs-success-text-emphasis: #a6e5cc; }