/* theme.css Single place to configure theme colors for student, admin and website frontends. Usage: - Edit the variables below under :root to change the site-wide colors. - Or add a theme class to the tag like to switch presets. */ :root { --site-primary: #23376c; /* default primary color */ --site-secondary: #ea5e20; /*#6c757d */ --site-success: #198754; --site-danger: #dc3545; --site-warning: #ffc107; --site-info: #0dcaf0; --site-bg: #ffffff; --site-text: #212529; } /* Basic page colors */ html, body { background-color: var(--site-bg); color: var(--site-text); } /* Override common Bootstrap color helpers to use CSS variables */ .bg-primary { background-color: var(--site-primary) !important; } .text-primary { color: var(--site-primary) !important; } .btn-primary { background-color: var(--site-primary); border-color: var(--site-primary); color: #fff; } .btn-primary:hover, .btn-primary:focus { filter: brightness(0.95); } /* Badges */ .badge.bg-success { background-color: var(--site-success) !important; color: #fff; } .badge.bg-secondary { background-color: var(--site-secondary) !important; color: #fff; } .badge.bg-warning { background-color: var(--site-warning) !important; color: #212529; } .badge.bg-dark { background-color: var(--site-text) !important; color: #fff; } /* Navbar tweaks */ .navbar.bg-primary, .navbar.bg-primary .navbar-brand, .navbar.bg-primary .nav-link { color: #fff; } /* Theme presets: apply by adding the class to , e.g. */ .theme-student { --site-primary: #0d6efd; } .theme-admin { --site-primary: #6610f2; } .theme-site { --site-primary: #198754; } /* Small helpers for consistent components */ .site-accent { color: var(--site-primary); } .btn-themeblue{ background-color: var(--site-primary); border-color: var(--site-primary); color: #fff; } .btn-themeblue:hover, .btn-themeblue:focus { filter: brightness(0.95); border:1px solid var(--site-primary); } /* End of theme.css */ /* Certificate badge overlay */ .image-with-badge { position: relative; } .image-with-badge img { display: block; width: 100%; height: auto; } .certificate-badge { position: absolute; top: 16px; left: 16px; border: 5px solid #4c6098; outline: 5px solid #7d8db8; width: 130px; height: 130px; border-radius: 50%; background: var(--site-primary); color: #ea5e20; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,0.25); z-index: 50; pointer-events: none; } .certificate-badge i { font-size: 106px; line-height: 1; } .certificate-badge .cert-text { display: block; position: absolute; color:#ffffff; font-size: 15px; font-weight: 600; letter-spacing: 0.4px; } @media (max-width: 576px) { .certificate-badge { width: 80px; height: 80px; top: 12px; left: 12px; } .certificate-badge i { font-size: 30px; } }