/* * Fixes the colours on the django-import-export preview tables under Unfold. * * Two upstream problems are worked around here: * * 1. The diff-match-patch library writes inline styles on the and * tags in the preview, like . That pale * green is unreadable behind Unfold's near-white dark mode text. * django-import-export ships overrides for this in import.css, but they are * written as `table.import-preview td ins`, and Unfold's import_preview.html * renders the table without the import-preview class, so they never match. * * 2. Every dark rule in import.css is written as html[data-theme="dark"]. * Unfold does not use data-theme at all: it toggles a `dark` class on . * So none of those rules apply here either. * * The colours below are translucent on purpose. They tint whatever background * is underneath instead of replacing it, so the inherited text colour stays * readable in both light and dark mode. */ /* Inserted and removed text inside a preview cell. The !important is needed to beat the inline style that diff-match-patch writes on the tag itself. */ #content td ins, #content td ins * { background: rgba(34, 197, 94, 0.18) !important; text-decoration: none; } #content td del, #content td del * { background: rgba(239, 68, 68, 0.18) !important; text-decoration: line-through; } .dark #content td ins, .dark #content td ins * { background: rgba(34, 197, 94, 0.28) !important; } .dark #content td del, .dark #content td del * { background: rgba(239, 68, 68, 0.28) !important; } /* Row tint per import type. The class comes from row.import_type in import_preview.html: new, skip, update or delete. Painting the td rather than the tr keeps it above Unfold's own alternating row background. */ #content tr.new > td { background-color: rgba(34, 197, 94, 0.10); } #content tr.update > td { background-color: rgba(245, 158, 11, 0.12); } #content tr.delete > td { background-color: rgba(239, 68, 68, 0.12); } #content tr.skip > td { background-color: rgba(148, 163, 184, 0.12); } .dark #content tr.new > td { background-color: rgba(34, 197, 94, 0.16); } .dark #content tr.update > td { background-color: rgba(245, 158, 11, 0.16); } .dark #content tr.delete > td { background-color: rgba(239, 68, 68, 0.16); } .dark #content tr.skip > td { background-color: rgba(148, 163, 184, 0.10); } /* The hover box listing field errors on the validation page. import.css gives it a fixed pale pink, which hides light text in dark mode. */ .dark #content .validation-error-container { background-color: #4c1d1d !important; color: #fee2e2; }