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

サポート
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