# 用户卡片样式出错

**URL:** <https://meta.discourse.org/t/usercard-style-is-broken/287258>\
**Category:** UX\
**Tags:** completed, user-card\
**Created:** [2023年十二月2日 08:21 UTC](https://meta.discourse.org/t/usercard-style-is-broken/287258 "2023-12-02T08:21:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2023年十二月2日 08:21 UTC](https://meta.discourse.org/t/usercard-style-is-broken/287258/1 "2023-12-02T08:21:37Z")

</div>

你好 👋

看起来 float-kit 的 `.popup-menu` 样式覆盖了用户卡片特定的样式。这导致了一些冲突，例如 \u003ckbd\u003eMessage\u003c/kbd\u003e、\u003ckbd\u003eChat\u003c/kbd\u003e 等按钮的样式。类 `popup-menu` 被添加到 `.fk-d-menu` 中，导致了这个问题。

 ![Screenshot 2023-12-02 at 9.12.46](https://global.discourse-cdn.com/meta/original/4X/1/c/6/1c6f87a269f5efde91b682df583872cc59bc50fa.png)

并且 popup-menu 的背景、边框、阴影也出现了。

 ![Screenshot_20231202_093305](https://global.discourse-cdn.com/meta/original/4X/d/1/6/d160618db4c629d1e093e4d5218b0faf019fa4f1.jpeg)

可能相关的提交：[UX: improve btn-transparent styling by awesomerobot · Pull Request #24666 · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull/24666)

谢谢 🙂

删除 `popup-menu` 类可以解决这个问题。一个可能的快速修复方法是覆盖用户卡片上的 `popup-menu`。

可以通过 `.popup-menu[data-identifier=card]` 来定位。

> **所以像这样可以恢复用户卡片样式**
>
> ```scss
> @mixin usercard-btn($btn-bg, $btn-color, $btn-bg-hover, $btn-color-hover) {
> background: var(--#{$btn-bg});
> .d-icon {
> color: var(--#{$btn-color});
> margin-right: 0.45em;
> }
> .discourse-no-touch & {
> &:focus,
> &:hover {
> background-color: var(--#{$btn-bg-hover});
> color: var(--#{$btn-color-hover});
> .d-icon {
> color: var(--#{$btn-color-hover});
> }
> }
> }
> .discourse-touch & {
> &:focus,
> &:hover {
> color: var(--#{$btn-color});
> .d-icon {
> color: var(--#{$btn-color});
> }
> }
> }
> }
> 
> .popup-menu[data-identifier="card"] {
> background: none;
> border: none;
> .mobile-view & {
> z-index: z("max");
> }
> box-shadow: none;
> ul {
> li {
> border-bottom: none;
> }
> }
> .btn {
> justify-content: center;
> padding: 0.5em 0.65em;
> border-radius: var(--d-button-border-radius);
> margin-bottom: 5px;
> .d-icon {
> align-self: unset;
> margin-top: unset
> }
> &.btn-primary {
> @include usercard-btn(
> tertiary,
> secondary,
> tertiary-hover,
> secondary
> );
> }
> &:not(.btn-primary) {
> @include usercard-btn(
> primary-low,
> primary,
> primary-medium,
> secondary
> );
> }
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2023年十二月4日 22:05 UTC](https://meta.discourse.org/t/usercard-style-is-broken/287258/3 "2023-12-04T22:05:12Z")

</div>

我认为这已经修复了：🥳

> <https://github.com/discourse/discourse/pull/24695>
>
> follow-up to 56795f5, the "popup-menu" class shouldn't apply to \*all\* of these m…enus

 ![don usercard](https://global.discourse-cdn.com/meta/original/4X/4/6/8/4683dca832b250a481e66bf6c809cda08f0a6250.jpeg)

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2023年十二月6日 22:06 UTC](https://meta.discourse.org/t/usercard-style-is-broken/287258/4 "2023-12-06T22:06:43Z")

</div>

此主题在 2 天后自动关闭。不再允许回复。