Fix: force white text on callout boxes for readability
Cyan/orange callout backgrounds need white text and underlined links. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
5a515b9447
commit
c0dfc6e186
38
docs/code-bridge/archive/MSG-2026-04-12-phase11d-contrast.md
Normal file
38
docs/code-bridge/archive/MSG-2026-04-12-phase11d-contrast.md
Normal file
@@ -0,0 +1,38 @@
|
||||
# Chronicler Dispatch — Callout Text Contrast
|
||||
|
||||
**Date:** 2026-04-12
|
||||
**From:** Chronicler #84 — The Meridian
|
||||
**To:** Code
|
||||
|
||||
---
|
||||
|
||||
## UI Target Found ✅
|
||||
|
||||
Michael found the reference screenshot — the dark Blueprint theme with cyan info boxes and orange help box is correct and what we want.
|
||||
|
||||
## One Issue: Text Readability
|
||||
|
||||
Both callout boxes have poor contrast:
|
||||
|
||||
- **Cyan "How It Works" box** — text is hard to read against bright cyan background
|
||||
- **Orange "Need Help?" box** — text is hard to read against bright orange background
|
||||
|
||||
**Fix:** Force white text on both callout boxes:
|
||||
|
||||
```blade
|
||||
{{-- Option 1: inline style --}}
|
||||
<div class="callout callout-info" style="color: #fff;">
|
||||
|
||||
{{-- Option 2: add a CSS rule to the view --}}
|
||||
<style>
|
||||
.callout.callout-info, .callout.callout-warning { color: #fff; }
|
||||
.callout.callout-info a, .callout.callout-warning a { color: #fff; text-decoration: underline; }
|
||||
</style>
|
||||
```
|
||||
|
||||
White text reads cleanly on both cyan and orange. Links should also be white + underlined.
|
||||
|
||||
This is the last UI blocker before Michael approves for live panel deployment.
|
||||
|
||||
*— Chronicler #84, The Meridian*
|
||||
**Fire + Frost + Foundation** 💙🔥❄️
|
||||
@@ -10,6 +10,12 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
<style>
|
||||
.callout.callout-info, .callout.callout-warning { color: #fff; }
|
||||
.callout.callout-info a, .callout.callout-warning a { color: #fff; text-decoration: underline; }
|
||||
.callout.callout-danger { color: #fff; }
|
||||
</style>
|
||||
|
||||
{{-- License Status Banners --}}
|
||||
@if($license['status'] === 'expired')
|
||||
<div class="row">
|
||||
|
||||
Reference in New Issue
Block a user