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:
parent
62be87d5f3
commit
b0f380c4c7
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue