用户卡片样式出错

你好 :wave:

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

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

可能相关的提交:UX: improve btn-transparent styling by awesomerobot · Pull Request #24666 · discourse/discourse · GitHub

谢谢 :slightly_smiling_face:

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

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

所以像这样可以恢复用户卡片样式
@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
      );
    }
  }
}
6 个赞

我认为这已经修复了::partying_face:

3 个赞

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