ユーザカードのスタイルが壊れています

こんにちは :wave:

float-kit.popup-menu スタイルが、ユーザーカード固有のスタイルを上書きしているようです。これにより、MessageChat などのボタンのスタイルに競合が発生しています。クラス 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日後に自動的に閉じられました。返信はもう受け付けられません。