castopod/themes/cp_app/post/_partials/preview_card.php
Yassine Doghri a746a781b4 feat(themes): set generic css variables for colors to enable instance themes
- set new colors using the css variables for theming in tailwind.config.js
- replace admin and
public colors with new variable enabled colors
2021-12-29 12:06:10 +00:00

48 lines
2.1 KiB
PHP

<?php declare(strict_types=1);
if ($preview_card->type === 'image'): ?>
<a href="<?= $preview_card->url ?>" class="flex flex-col bg-highlight" target="_blank" rel="noopener noreferrer">
<?php if ($preview_card->image): ?>
<div class="relative group">
<?= icon(
'external-link',
'absolute inset-0 m-auto text-6xl bg-accent-base bg-opacity-50 group-hover:bg-opacity-100 text-accent-contrast rounded-full p-2',
) ?>
<img src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" class="object-cover w-full h-80" />
</div>
<?php endif; ?>
<div class="flex flex-col flex-1 px-4 py-2">
<span class="text-xs tracking-wider uppercase text-skin-muted"><?= $preview_card->provider_name ?></span>
</div>
</a>
<?php elseif ($preview_card->type === 'video'): ?>
<a href="<?= $preview_card->url ?>" class="flex flex-col bg-highlight" target="_blank" rel="noopener noreferrer">
<?php if ($preview_card->image): ?>
<div class="relative group">
<?= icon(
'play',
'absolute inset-0 m-auto text-6xl bg-accent-base bg-opacity-50 group-hover:bg-opacity-100 text-accent-contrast rounded-full p-2',
) ?>
<img class="object-cover w-full aspect-video" src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" />
</div>
<?php endif; ?>
<div class="flex flex-col flex-1 px-4 py-2">
<span class="text-xs tracking-wider uppercase text-skin-muted"><?= $preview_card->provider_name ?></span>
<span class="mb-2 font-semibold truncate"><?= $preview_card->title ?></span>
</div>
</a>
<?php else: ?>
<a href="<?= $preview_card->url ?>" class="flex items-center bg-highlight">
<?php if ($preview_card->image): ?>
<img src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" class="object-cover w-20 h-20" />
<?php endif; ?>
<p class="flex flex-col flex-1 px-4 py-2">
<span class="text-xs tracking-wider uppercase text-skin-muted"><?= $preview_card->provider_name ?></span>
<span class="mb-2 font-semibold truncate"><?= $preview_card->title ?></span>
</p>
</a>
<?php endif;
?>