ayo/threads
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(card): unified color with pills and buttons

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

28
static/card.css
View file

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

2
templates/card.html
View file

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