ross/toptrumps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Ross
2025-12-06 21:51:03 +00:00
parent cb430859e4
commit 1fb573525b
6 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cards/templates/cards/_card_hero_styles.html
+2
View File
@@ -35,4 +35,6 @@
height:auto;
object-fit:contain;
}
/* Hide print fallback images by default on screen; printable view will reveal them */
.print-hero-bg{display:none}
</style>
cards/templates/cards/_card_inner_design1.html
+1 -1
View File
@@ -4,7 +4,7 @@
<div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:200px; position:relative; overflow:hidden;">
{# Print fallback: actual <img> element that is hidden on screen but shown by `printable.html` via its print stylesheet. #}
{% if card.background and card.background.image %}
<img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
<img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
{% endif %}
{% if card.image %}
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:180px; z-index:1;">
cards/templates/cards/_card_inner_design2.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="toptrump-card design-2" style="border-radius:6px; overflow:hidden; background:#111; color:#eee;">
<div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:220px; filter:brightness(0.7); position:relative; overflow:hidden;">
{% if card.background and card.background.image %}
<img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
<img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
{% endif %}
{% if card.image %}
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:200px; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,0.6); z-index:1;">
cards/templates/cards/_card_inner_design3.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="toptrump-card design-3" style="border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
<div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:200px; filter:brightness(0.9); position:relative; overflow:hidden;">
{% if card.background and card.background.image %}
<img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
<img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
{% endif %}
{% if card.image %}
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px; z-index:1;">
cards/templates/cards/_card_inner_design4.html
+1 -1
View File
@@ -12,7 +12,7 @@
</div>
<div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size: {{ card.background_image_scale }}; background-position:center; flex:1; position:relative; padding:8px; overflow:hidden;">
{% if card.background and card.background.image %}
<img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
<img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
{% endif %}
<div style="position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3; width:84%; max-width:420px;">
<div style="background:rgba(0,0,0,0.55); padding:6px 10px; border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center;">
cards/templates/cards/printable.html
+1 -1
View File
@@ -44,7 +44,7 @@
@media print{
/* Hide CSS background-images and show the <img> fallback for reliability */
.print-card .hero-image{background-image:none !important}
.print-card .print-hero-bg{display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.print-card .print-hero-bg{display:block !important; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
/* Ensure card content layers above the fallback background */
.print-card .toptrump-card{position:relative; z-index:2}