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

style: adjust hashtag pills colors

Browse source
This commit is contained in:
Ayo Ayco 2025-01-19 11:39:29 +01:00
parent 37712027f1
commit a4d012ef51
5 changed files with 71 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
static/pills.css Normal file
View file

@ -0,0 +1,55 @@
.featured-tags,
.tag-bar {
& .pill {
border-radius: 5px;
border: 1px solid;
border-color: rgba(197, 209, 222, 0.25);
background-color: rgba(197, 209, 222, 0.15);
margin-bottom: 0.5em;
padding: 0.25em 1em;
display: inline-block;
font-size: var(--font-size-sm);
color: var(--text-color-dark-faded);
text-decoration: none;
&:hover {
color: var(--color-link);
border: 1px solid var(--color-link);
}
& .pill-label {
background-color: rgba(0, 0, 0, 0.15);
border-radius: 0.5em;
padding: 0 0.25em;
margin-right: 0.25em;
font-weight: bold;
}
}
}
@media (prefers-color-scheme: dark) {
.featured-tags,
.tag-bar {
& .pill {
color: var(--text-color-light-faded);
border: 1px solid;
border-color: rgba(0, 0, 0, 0.25);
background-color: rgba(0, 0, 0, 0.15);
text-decoration: none;
&:hover {
color: var(--color-brand-complement);
border: 1px solid var(--color-brand-complement);
}
}
}
}
.featured-tags .pill {
color: var(--text-color-dark);
}
@media (prefers-color-scheme: dark) {
.featured-tags .pill {
color: var(--text-color-light);
}
}

35
templates/_home.html
View file

@ -25,6 +25,10 @@
<!-- Use parent app's variables & reset stylesheets -->
<link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
<!-- threads specific static css-->
<link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
<style>
html {
scroll-behavior: smooth;
@ -114,29 +118,6 @@
display: none;
}
.pill {
border-radius: 2em;
background-color: rgba(197, 209, 222, 0.25);
margin-bottom: 0.5em;
padding: 0.5em 1em;
display: inline-block;
font-size: var(--font-size-sm);
color: var(--text-color-dark);
text-decoration: none;
&:hover {
color: var(--color-link);
}
& .pill-label {
font-weight: bold;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 0.5em;
padding: 0 0.25em;
margin-right: 0.25em;
}
}
.card_avatar img {
border: 2px solid rgba(197, 209, 222, 0.15);
border-radius: 50%;
@ -168,14 +149,6 @@
}
}
.pill {
background-color: rgba(0, 0, 0, 0.15);
color: var(--text-color-light-faded);
&:hover {
color: var(--color-brand-complement);
}
}
}
</style>
</head>

35
templates/_tag.html
View file

@ -25,6 +25,10 @@
<!-- Use parent app's variables & reset stylesheets -->
<link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
<!-- threads specific static css-->
<link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
<style>
html {
scroll-behavior: smooth;
@ -109,28 +113,6 @@
}
}
.pill {
border-radius: 2em;
background-color: rgba(197, 209, 222, 0.25);
margin-bottom: 0.5em;
padding: 0.5em 1em;
display: inline-block;
font-size: var(--font-size-sm);
color: var(--text-color-dark);
text-decoration: none;
&:hover {
color: var(--color-link);
}
& .pill-label {
background-color: rgba(0, 0, 0, 0.15);
border-radius: 0.5em;
padding: 0 0.25em;
margin-right: 0.25em;
}
}
.card_avatar img {
border: 2px solid rgba(197, 209, 222, 0.15);
border-radius: 50%;
@ -161,15 +143,6 @@
border-right: 2px solid rgba(197, 209, 222, 0.15);
}
}
.pill {
background-color: rgba(0, 0, 0, 0.15);
color: var(--text-color-light-faded);
&:hover {
color: var(--color-brand-complement);
}
}
}
</style>
</head>

17
templates/card.html
View file

@ -17,8 +17,8 @@
& .body {
.hashtag,
.mention {
.hashtag:not(.pill),
.mention:not(.pill) {
color: var(--text-color-dark-faded);
text-decoration: none;
@ -128,8 +128,8 @@
& .body {
.hashtag,
.mention {
.hashtag:not(.pill),
.mention:not(.pill) {
color: var(--text-color-light-faded);
text-decoration: none;
@ -158,15 +158,6 @@
}
}
}
.pill {
background-color: rgba(0, 0, 0, 0.15);
color: var(--text-color-light-faded);
&:hover {
color: var(--color-brand-complement);
}
}
}
</style>
<article class="card">

6
templates/tag-pills.html
View file

@ -1,8 +1,10 @@
<div class="featured-tags">
{% for tag in tags %}
<a class="pill" href="{{url_for('threads.tag', id=tag.name) }}">
<span class="pill-label">{{ tag.statuses_count }}</span>
<a class="hashtag pill" href="{{url_for('threads.tag', id=tag.name) }}">
{{ tag.name }}
{% if tag.statuses_count is defined %}
<span class="pill-label">{{ tag.statuses_count }}</span>
{% endif %}
</a>
{% endfor %}
</div>