style(card): unified color with pills and buttons

This commit is contained in:
Ayo Ayco 2025-01-19 20:42:40 +01:00
parent cff0caec1d
commit 713a7fa70b
2 changed files with 16 additions and 14 deletions

View file

@ -33,13 +33,15 @@
vertical-align: text-bottom;
}
& a:has(.link_card) {
& a:has(.link-card) {
text-decoration: none;
}
& .media,
& .link_card {
border: 1px solid rgba(34, 34, 34, 0.15);
& .link-card {
border: 1px solid;
border-color: var(--border-color-light);
color: var(--text-color-dark-faded);
border-radius: 5px;
box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
max-width: 100%;
@ -51,10 +53,10 @@
}
& .media:hover,
& .link_card:hover {
color: var(--color-link);
& .link-card:hover {
color: var(--color-brand-blue-3);
border: 1px solid var(--color-brand-blue-3);
text-decoration-color: var(--color-link);
border-color: var(--color-link);
}
& p {
@ -93,7 +95,7 @@
}
}
& .link_card {
& .link-card {
color: var(--text-color-dark-faded);
text-decoration: underline;
text-decoration-color: var(--text-color-light-faded);
@ -149,17 +151,17 @@ article.card {
}
& .media,
& .link_card {
border: 1px solid rgba(197, 209, 222, 0.15);
& .link-card {
border: 1px solid;
border-color: var(--border-color-dark);
color: var(--text-color-light-faded);
background: var(--bg-dark);
background-color: var(--bg-dark);
}
& .media:hover,
& .link_card:hover {
& .link-card:hover {
color: var(--color-brand-complement);
text-decoration-color: var(--color-brand-complement);
border-color: var(--color-brand-complement);
border: 1px solid var(--color-brand-complement);
}
}
}

View file

@ -44,7 +44,7 @@
{% endif %}
{% endfor %}
{% if thread.media_attachments|length <= 0 and thread.card %} <a href="{{ thread.card.url }}">
<div class="link_card">
<div class="link-card">
<small>
{{ thread.card.provider_name or
thread.card.provider_url }}