jbrueckner/GhostGrid
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(light-mode): JSON panel header dark, orange Ansible card overrides

Browse Source 
- JSON panel header (bg-slate-900) no longer flips to light gray inside
  the dark terminal block — scoped override keeps it #161b22
- Title text and copy button styled consistently for dark context
- Orange Ansible status card gets proper light-mode colors (orange-50 bg,
  orange-200 border, orange-600 text)
- application/json badge tweaked to text-indigo-400 for consistency
This commit is contained in:
Brückner
2026-06-05 10:09:52 +02:00
parent aa5c2332e8
commit 33c7b2ba65
2 changed files with 42 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BookingDetailsModal.tsx
View File

@ -320,7 +320,7 @@ export default function BookingDetailsModal({
<Database className="w-3.5 h-3.5" /> <Database className="w-3.5 h-3.5" />
GET /api/bookings/{booking.id} GET /api/bookings/{booking.id}
</span> </span>
<span className="text-indigo-300 bg-indigo-500/15 border border-indigo-500/30 px-1.5 py-0.5 rounded font-mono text-[9px]">application/json</span> <span className="text-indigo-400 bg-indigo-500/20 border border-indigo-500/30 px-1.5 py-0.5 rounded font-mono text-[9px]">application/json</span>
</div> </div>
<div className="p-4 relative overflow-x-auto max-h-[260px] overflow-y-auto"> <div className="p-4 relative overflow-x-auto max-h-[260px] overflow-y-auto">
<button <button

47
src/index.css
View File

@ -518,21 +518,56 @@
border-color: var(--border) !important; border-color: var(--border) !important;
} }
/* Developer panel wrapper - restore dark terminal feel */ /* JSON REST Response panel – always dark (code/terminal aesthetic) */
:root.light #booking-details-modal .font-mono.bg-slate-950 { :root.light #booking-details-modal .font-mono.bg-slate-950 {
background-color: #0d1117 !important; background-color: #0d1117 !important;
color: #c9d1d9 !important; color: #c9d1d9 !important;
border-color: #30363d !important; border-color: #30363d !important;
} }
/* Terminal output area bg-slate-1000 */ /* Header bar inside the dark JSON panel – keep dark to match the block */
:root.light #booking-details-modal .bg-slate-1000 { :root.light #booking-details-modal .font-mono.bg-slate-950 .bg-slate-900 {
background-color: #0d1117 !important; background-color: #161b22 !important;
color: #c9d1d9 !important;
border-color: #30363d !important; border-color: #30363d !important;
} }
/* Ansible/terminal button trigger row bg-slate-900/40 - keep readable */ /* Title label and icon in dark panel header */
:root.light #booking-details-modal .font-mono.bg-slate-950 .text-indigo-400 {
color: #818cf8 !important;
}
/* Copy button inside dark panel */
:root.light #booking-details-modal .font-mono.bg-slate-950 button {
background-color: #21262d !important;
border-color: #30363d !important;
color: #8b949e !important;
}
:root.light #booking-details-modal .font-mono.bg-slate-950 button:hover {
background-color: #30363d !important;
color: #f0f6fc !important;
}
/* Ansible status card – orange accent in light mode */
:root.light #booking-details-modal .bg-orange-950\/10 {
background-color: #fff7ed !important;
}
:root.light #booking-details-modal .border-orange-900\/40 {
border-color: #fdba74 !important;
}
:root.light .text-orange-400 {
color: #ea580c !important;
}
:root.light .bg-orange-950\/60,
:root.light .bg-orange-900\/40 {
background-color: #fed7aa !important;
border-color: #fb923c !important;
color: #9a3412 !important;
}
:root.light .border-orange-800\/50 {
border-color: #fb923c !important;
}
/* bg-slate-900/40 rows (notice box etc.) – light in light mode */
:root.light #booking-details-modal .bg-slate-900\/40 { :root.light #booking-details-modal .bg-slate-900\/40 {
background-color: #f1f5f9 !important; background-color: #f1f5f9 !important;
border-color: var(--border) !important; border-color: var(--border) !important;