ヘッダーアイコンのマウスホバー時の色がおかしい

サポート
1

こんにちは！

長らく、私のウェブサイトのアイコンにマウスを重ねると、カスタムカラー（薄い青）で上書きしていたにもかかわらず、グレーになっていました。

.discourse-no-touch .d-header-icons .icon:hover .d-icon, .discourse-no-touch .d-header-icons .icon:focus .d-icon {
    color: #919191;
}

薄い青は当初は機能していましたが、Discourseのアップグレード後に機能しなくなったと思われます。この件については、1年ほど確認していませんでした。

その後、最近2.9.0にアップグレードしました（インターフェースに指示されたらアップグレードし、時にはもう少し頻繁にアップグレードしています）。すると、以前設定したカスタムカラーが、まるで魔法のように自分で戻ってきました :magic_wand:

しかし、今になってグレーの色が再び戻ってきてしまいました :grey_question: :weary:

その間にDiscourseを再度アップグレードした可能性があります。
いずれにしても、フォーラムのCSSを編集していないのに、正しい色が戻ってきては消えてしまう理由がわかりません。

現在のCSSルールの順序は以下の通りです。

現在のカスタムCSSは以下の通りです。

.d-header-icons .d-icon {
    color: white;
}
.d-header-icons .icon:hover, .d-header-icons .icon:focus {
    background: white;
}
.d-header-icons .icon:hover .d-icon, .d-header-icons .icon:focus .d-icon {
    color: var(--tertiary-medium);
}
.drop-down-mode .d-header-icons .active .icon .d-icon {
    color: var(--tertiary);
}

可能な限り !important を使用したくありません。また、親クラスである .discourse-no-touch のために、DiscourseのCSSを簡単に上書きするには、目標を達成するために実際の列車の :train: :train: :train: のようなセレクターを作成する必要があり、しばしば苦労しています。

  1. 私の色のオーバーライドが数日間機能し、その後機能しなくなった理由について、何か考えはありますか？

  2. この厄介な大祖父母クラス .discourse-no-touch を使って、Discourseのクラスを適切にオーバーライドするにはどうすればよいですか？

注：ただし、青色はスマートフォンでは機能します。CSSの変更がタッチデバイスと非タッチデバイスの両方に影響を与えるようにするための簡単なターゲットルールはありますか？

「いいね！」 1
2

こんにちは。

これは少し難しいですが、私も自分のサイトで似たようなものを使っているので、あなたにも役立つかもしれません。:slightly_smiling_face:

共通

// ヘッダーボタン

.d-header-icons {
  .icon {
    &:hover,
    &:focus,
    &:active {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
    }
    .discourse-no-touch &:hover,
    .discourse-no-touch &:focus {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
    }
  }
  .d-icon {
    color: #fff;
  }
  .header-dropdown-toggle {
    &:hover {
      background: #fff;
    }
    &.active {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
      &:hover {
        background: #fff;
        .d-icon {
          color: var(--tertiary-medium);
        }
      }
    }
  }
}

.drop-down-mode .d-header-icons .active .icon .d-icon {
  color: var(--tertiary);
}
「いいね！」 1
3

返信ありがとうございます！

なぜか、ネイティブのヘッダーアイコンは（私の大好きなライトブルーの）正しい色が表示されていましたが、テーマコンポーネントで設定した他のアイコンはそうではありませんでした。

そのため、ハンバーガーアイコンと検索アイコンのライトブルーの色は、おそらく .header-dropdown-toggle クラスのおかげで機能しました。私の追加アイコンを追加するテーマコンポーネントは、.header-dropdown-toggle クラスと同じレベルに .custom-header-icon-link セレクターも追加します。

これらのセレクターは、.discourse-no-touch を使用しているルールを上書きするのに十分な精度を追加しているのかもしれません。正直なところ、CSSで何が起こっているのかよく理解できていません。

しかし、あなたの提案はCSSのリファクタリングに役立ちました。結果は次のとおりです。

.d-header-icons {
    .header-dropdown-toggle, .custom-header-icon-link {
        .icon {
            .d-icon {
                color: white;
            }
            &:hover, &:focus {
                background: white;
                .d-icon {
                    color: var(--tertiary-medium);
                }
            }
        }
        &.active .icon .d-icon {
            color: var(--tertiary-medium);
        }
    }
}

これは完璧に機能しており、.discourse-no-touch を使用していません。

chrome_Q7W3Tsm9BU

「いいね！」 1
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.