github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-03 05:39:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: improve mention styling (#19156)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/assets/stylesheets/common/base/topic-post.scss
View File

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

6
app/assets/stylesheets/common/components/hashtag.scss
View File

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

3
app/assets/stylesheets/common/foundation/mixins.scss
View File

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