Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Badges: fix debug pre dark mode colors; white ring shadow around badge in dark mode

Browse Source
This commit is contained in:
Scott Idem
2026-03-12 16:31:26 -04:00
parent 745067b228
commit dd2deb1ab1
1 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte
View File

@@ -950,11 +950,11 @@
<div class="print:hidden">
<h1 class="text-lg font-bold mt-4">Debug Information</h1>
<pre
class="whitespace-pre-wrap break-words text-xs max-h-32 overflow-auto p-2 bg-surface-200 border border-surface-300 rounded mt-4"
class="whitespace-pre-wrap break-words text-xs max-h-32 overflow-auto p-2 bg-surface-200 dark:bg-zinc-800 border border-surface-300 dark:border-zinc-600 rounded mt-4 text-surface-900 dark:text-zinc-100"
>{JSON.stringify($lq__event_badge_obj, null, 2)}</pre>
<pre
class="whitespace-pre-wrap break-words text-xs max-h-32 overflow-auto p-2 bg-surface-200 border border-surface-300 rounded mt-4"
class="whitespace-pre-wrap break-words text-xs max-h-32 overflow-auto p-2 bg-surface-200 dark:bg-zinc-800 border border-surface-300 dark:border-zinc-600 rounded mt-4 text-surface-900 dark:text-zinc-100"
>{JSON.stringify($lq__event_badge_template_obj, null, 2)}</pre>
</div>
{/if}
@@ -980,6 +980,24 @@
color-scheme: light;
}
/*
* In dark mode: white inner ring (matches badge stock) + outer drop shadow
* so the white badge card stands out from the dark page background.
* The ring colour should match the badge face background; per-event stylesheets
* can override badge_front/badge_back background-color but this ring stays white
* (a reasonable default for all card stock).
* Suppressed on print — no shadow on the physical output.
*/
:global(.dark) .event_badge_wrapper {
box-shadow: 0 0 0 6px white, 0 8px 32px rgba(0, 0, 0, 0.75);
}
@media print {
.event_badge_wrapper {
box-shadow: none;
}
}
.badge_front,
.badge_back {
background-color: white;