UX: improve mention styling (#19156)

This updates mention styling. This reduces bold, increases contrast, and makes inactive mentions look more inactive.
This commit is contained in:
Kris 2022-11-22 18:17:03 -05:00 committed by GitHub
parent 62be87d5f3
commit b0f380c4c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 14 deletions

View File

@ -1249,27 +1249,26 @@ blockquote > *:last-child {
}
a.mention {
// linked
@include mention;
}
span.mention {
font-weight: bold;
font-size: 0.93em;
color: var(--primary);
// unlinked
color: var(--primary-high);
}
a.mention-group {
// unlinked
display: inline-block;
font-weight: bold;
font-size: 0.93em;
color: var(--primary);
color: var(--primary-high);
cursor: default;
&.notify,
.small-action-desc & {
color: var(--primary-high-or-secondary-low);
padding: 2px 4px;
background: var(--primary-low);
border-radius: 8px;
// linked
cursor: pointer;
@include mention;
}
}

View File

@ -19,11 +19,13 @@ a.hashtag-cooked {
&:visited,
&:hover {
color: var(--primary-high-or-secondary-low);
color: var(--primary);
}
.d-icon {
margin-right: 3px;
color: var(--primary-high);
font-size: var(--font-down-1);
margin: 0 0.2em 0 0.1em;
}
}

View File

@ -238,9 +238,8 @@ $hpad: 0.65em;
@mixin mention() {
display: inline-block; // https://bugzilla.mozilla.org/show_bug.cgi?id=1656119
font-weight: bold;
font-size: 0.93em;
color: var(--primary-high-or-secondary-low);
color: var(--primary);
padding: 0 4px 1px;
background: var(--primary-low);
border-radius: 8px;