/* ======================================================= custom_alerts.css — Final alert overrides Loaded LAST in cascade (after theme.css, cyber_overrides.css) This is the single source of truth for alert appearance. ======================================================= */ /* ── Base alert reset: single border, single background, no glow ── */ .alert, .mg-theme-alert { border-radius: 10px !important; border: 1px solid rgba(0, 168, 232, 0.22) !important; background: linear-gradient(145deg, rgba(0, 28, 44, 0.82), rgba(0, 18, 30, 0.90)) !important; color: rgba(220, 240, 255, 0.90) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* No text-shadow, no inset glow — keeps it professional */ } /* Hover: very subtle lift only, no colored glow */ .alert:hover, .mg-theme-alert:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important; transform: translateY(-1px) !important; } /* ── Icon (::before) — RTL-safe ── The parent is display:flex with gap:10px. flex: 0 0 auto prevents the icon from stretching. margin-inline-end:0 means gap handles the spacing in both LTR and RTL so no extra right-side whitespace appears in Arabic mode. Rendered as a small solid glyph inside a gradient circle badge (matches the icon-badge language used elsewhere in the theme) instead of theme.css's flat single-character glyph. */ .alert::before, .mg-theme-alert::before { flex: 0 0 22px !important; width: 22px !important; min-width: 0 !important; /* unset any min-width from theme.css */ height: 22px !important; margin-top: 0 !important; margin-inline-end: 0 !important; /* gap on parent does the spacing */ display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; font-family: "Font Awesome 5 Pro" !important; font-weight: 900 !important; font-size: 10px !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important; } /* ── Info (blue) ── */ .alert-info, .mg-theme-alert.alert-info, .mg-theme-alert.alert-primary { border-color: rgba(0, 168, 232, 0.30) !important; background: linear-gradient(145deg, rgba(0, 60, 90, 0.82), rgba(0, 35, 60, 0.88)) !important; color: rgba(210, 240, 255, 0.92) !important; } .alert-info::before, .mg-theme-alert.alert-info::before, .mg-theme-alert.alert-primary::before { content: "\f129" !important; background: linear-gradient(145deg, #00c9ff, #007ea7) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 10px rgba(0, 168, 232, 0.5) !important; } /* ── Success (green) ── */ .alert-success, .mg-theme-alert.alert-success { border-color: rgba(0, 190, 90, 0.28) !important; background: linear-gradient(145deg, rgba(0, 45, 30, 0.84), rgba(0, 28, 20, 0.90)) !important; color: rgba(200, 245, 220, 0.92) !important; } .alert-success::before, .mg-theme-alert.alert-success::before { content: "\f00c" !important; background: linear-gradient(145deg, #00d26a, #00a855) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 10px rgba(0, 210, 106, 0.5) !important; } /* ── Warning (amber) ── */ .alert-warning, .mg-theme-alert.alert-warning { border-color: rgba(210, 130, 0, 0.30) !important; background: linear-gradient(145deg, rgba(50, 30, 0, 0.84), rgba(30, 18, 0, 0.90)) !important; color: rgba(255, 225, 160, 0.92) !important; } .alert-warning::before, .mg-theme-alert.alert-warning::before { content: "\f12a" !important; background: linear-gradient(145deg, #ffb347, #ff9500) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 10px rgba(255, 165, 0, 0.5) !important; } /* ── Danger / Error (red) ── */ .alert-danger, .alert-error, .mg-theme-alert.alert-danger { border-color: rgba(200, 50, 50, 0.30) !important; background: linear-gradient(145deg, rgba(50, 10, 10, 0.84), rgba(30, 8, 8, 0.90)) !important; color: rgba(255, 200, 200, 0.92) !important; } .alert-danger::before, .alert-error::before, .mg-theme-alert.alert-danger::before { content: "\f00d" !important; background: linear-gradient(145deg, #ff5f5f, #e23f3f) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 10px rgba(255, 79, 79, 0.5) !important; } /* ── Alert links ── */ .alert .alert-link, .mg-theme-alert .alert-link { color: #7fdfff !important; border-bottom: 1px solid rgba(127, 223, 255, 0.35) !important; font-weight: 600; } .alert .alert-link:hover, .mg-theme-alert .alert-link:hover { color: #b2edff !important; border-bottom-color: rgba(178, 237, 255, 0.55) !important; } /* ── RTL: icon order — the flex row is already correct in RTL because flex-direction is not reversed on .alert. The ::before will naturally render on the visual-start side. We only need to ensure no margin-right/left adds asymmetric space. ── */ html[dir="rtl"] .alert::before, html[lang="ar"] .alert::before { margin-left: 0 !important; margin-right: 0 !important; } /* ── Login card alerts (kept from original) ── */ .mg-login-card .mg-login-alert { margin-bottom: 14px !important; font-weight: 600; font-size: 0.9em; padding: 12px 16px; text-align: center; } .mg-login-card .alert::before { display: none !important; } .mg-login-card .alert .close, .mg-login-card .alert .btn-close, .mg-login-card .alert-dismissible .close, .mg-login-card .alert-dismissible .btn-close { display: none !important; } /* ========================================================================== Error-alert layout fix. includes/alert.tpl renders errors as: The following errors occurred: and the alert container is `display:flex; gap:10px` (see the ::before icon note above). That makes the and the