/* ===================================================================== Bondgenoot — components/colorblind.css (Cluster-N6 F416) --------------------------------------------------------------------- Active wanneer de class .cb-mode draagt (gezet door layout bij user.pref_color_blind = 1). Palette-shift: - "vijand" / "danger" / "rood" → oranje #F59E0B - "ally" / "safe" / "groen" → blauw #3B82F6 Stam-glow (paars #B794F4) blijft ongewijzigd (klaim-status, niet vijand/ally-discriminatie). Selectors zijn DEFENSIEF + OVERRIDE-style: bestaande pages krijgen accent-vervanging zonder layout-shifts. Geen geometry of spacing. @since Cluster-N6 (F416) ===================================================================== */ /* ----- Globale CSS-vars override ------------------------------------ */ body.cb-mode { /* Het tokens.css-systeem definieert --bg-danger/--bg-success/etc. Hier worden ze omgezet zodat álle componenten die deze vars gebruiken automatisch shiften. */ --bg-danger: #F59E0B; --bg-danger-bg: rgba(245, 158, 11, 0.10); --bg-danger-border: rgba(245, 158, 11, 0.35); --bg-success: #3B82F6; --bg-success-bg: rgba(59, 130, 246, 0.10); --bg-success-border: rgba(59, 130, 246, 0.35); /* Combat-banner accenten (J6) */ --bg-incoming-attack: #F59E0B; --bg-incoming-support: #3B82F6; } /* ----- Vijand- en ally-relations op kaart + popovers ---------------- */ body.cb-mode .relation-enemy, body.cb-mode .player-enemy, body.cb-mode .stam-enemy, body.cb-mode .marker-enemy, body.cb-mode .dot-enemy, body.cb-mode [data-relation="enemy"], body.cb-mode [data-relation="vijand"] { color: #F59E0B !important; border-color: #F59E0B !important; } body.cb-mode .relation-ally, body.cb-mode .player-ally, body.cb-mode .stam-ally, body.cb-mode .marker-ally, body.cb-mode .dot-ally, body.cb-mode [data-relation="ally"], body.cb-mode [data-relation="bondgenoot"] { color: #3B82F6 !important; border-color: #3B82F6 !important; } /* ----- Standaard rood/groen utility-classes ------------------------- */ body.cb-mode .text-red, body.cb-mode .text-danger, body.cb-mode .color-red { color: #F59E0B !important; } body.cb-mode .text-green, body.cb-mode .text-success, body.cb-mode .color-green { color: #3B82F6 !important; } body.cb-mode .bg-red, body.cb-mode .bg-danger { background-color: rgba(245, 158, 11, 0.15) !important; } body.cb-mode .bg-green, body.cb-mode .bg-success { background-color: rgba(59, 130, 246, 0.15) !important; } /* ----- Status-pills (admin + ingame) -------------------------------- */ body.cb-mode .pill-danger, body.cb-mode .pill-error, body.cb-mode .pill-stopped, body.cb-mode .status-bad { background: rgba(245, 158, 11, 0.18) !important; color: #F59E0B !important; border: 1px solid rgba(245, 158, 11, 0.45) !important; } body.cb-mode .pill-success, body.cb-mode .pill-ok, body.cb-mode .pill-running, body.cb-mode .status-good { background: rgba(59, 130, 246, 0.18) !important; color: #3B82F6 !important; border: 1px solid rgba(59, 130, 246, 0.45) !important; } /* ----- Combat banners (J6 F269) ------------------------------------- */ body.cb-mode .incoming-banner.incoming-banner--attack, body.cb-mode .incoming-banner.incoming-attack { border-left-color: #F59E0B !important; background-image: linear-gradient( 90deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.03) 100% ) !important; } body.cb-mode .incoming-banner.incoming-banner--support, body.cb-mode .incoming-banner.incoming-support { border-left-color: #3B82F6 !important; background-image: linear-gradient( 90deg, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0.03) 100% ) !important; } /* ----- Loyalty / health bars --------------------------------------- */ body.cb-mode .bar-fill-danger, body.cb-mode .loyalty-low, body.cb-mode .health-low { background-color: #F59E0B !important; } body.cb-mode .bar-fill-success, body.cb-mode .loyalty-high, body.cb-mode .health-high { background-color: #3B82F6 !important; } /* ----- Form-validation (errors) ------------------------------------- */ body.cb-mode .form-error, body.cb-mode .form-input-error, body.cb-mode .input-error, body.cb-mode input.is-invalid, body.cb-mode select.is-invalid, body.cb-mode textarea.is-invalid { border-color: #F59E0B !important; color: #F59E0B !important; } body.cb-mode .form-success, body.cb-mode input.is-valid, body.cb-mode select.is-valid, body.cb-mode textarea.is-valid { border-color: #3B82F6 !important; } /* ----- Inline icons (✓ ✗) ------------------------------------------ */ body.cb-mode .icon-success, body.cb-mode .ok-mark { color: #3B82F6 !important; } body.cb-mode .icon-danger, body.cb-mode .fail-mark { color: #F59E0B !important; }