.PostMention, .UserMention, .GroupMention { background: var(--control-bg); color: var(--control-color); border-radius: @border-radius; font-weight: 600; blockquote & { background: var(--body-bg); } &:hover, &:active { color: var(--link-color); } } .UserMention, .PostMention, .GroupMention, .TagMention { padding: 2px 5px; vertical-align: middle; border: 0 !important; white-space: nowrap; &--deleted { opacity: 0.8; filter: grayscale(1); } } .PostMention { margin: 0 3px; &:first-child { margin-left: 0; } // @TODO: 2.0 use an icon in the XSLT template. &:before { .fas(); content: @fa-var-reply; margin-right: 5px; } } .GroupMention { background-color: var(--color, var(--control-bg)); color: var(--control-color); --link-color: currentColor; &--colored { --control-color: var(--contrast-color, var(--body-bg)); --link-color: var(--control-color); } .icon { margin-left: 5px; } } & when (is-extension-enabled('flarum-tags')) { .TagMention { --tag-bg: var(--color, var(--control-bg)); .tag-label(); margin: 0 2px; .icon { margin-right: 2px; } } } .ComposerBody-mentionsWrapper { position: relative; } .MentionsDropdown { max-width: 500px; max-height: 150px; overflow: auto; position: absolute; mark { padding: 0; } > li > a:hover { background: none; } } .MentionsDropdown, .PostMention-preview, .Post-mentionedBy-preview { // @TODO: Rename to .MentionsDropdownItem, along with child classes. 2.0 .PostPreview { color: @muted-color; .Avatar { .Avatar--size(24px); margin: 0 0 0 -37px; .MentionsDropdown-post& { margin-top: 3px; margin-bottom: 3px; } } .username { color: @text-color; font-weight: bold; } } .PostPreview-content { padding-left: 37px; overflow: hidden; line-height: 1.7em; display: block; } } .Post-mentionedBy { display: inline-block; } .Post-mentionedBy-summary { cursor: pointer; } .Post-mentionedBy-preview, .PostMention-preview, .MentionsDropdown { margin: 5px 0 !important; > li > a { white-space: normal; border-bottom: 0; } } .PostMention-preview-discussion { padding-top: 0 !important; font-weight: bold !important; white-space: normal !important; } .PostQuoteButton { position: absolute; .Button--color(@tooltip-color, @tooltip-bg); } .MentionsDropdown .Badge { box-shadow: none; } @media @phone { .MentionsDropdown { max-width: 100%; } } .Post-footer .item-replies { position: relative; }