مشكلة لون أيقونات الرأس عند تحريك الماوس

شكراً على ردك!

لسبب ما، يبدو أن الألوان كانت صحيحة (لون الأزرق الفاتح العزيز لدي) لأيقونات الرأس الأصلية، ولكن ليس لأيقوناتي الأخرى، التي تم تعيينها بواسطة مكون سمة.

لذلك، نجح لون الأزرق الفاتح لأيقونات الهامبرغر والبحث، ربما بسبب فئة .header-dropdown-toggle الخاصة بها.
مكون السمة الذي يضيف أيقوناتي الإضافية يضيف أيضاً مُحدِّد .custom-header-icon-link على نفس مستوى فئة .header-dropdown-toggle.

ربما تضيف هذه المُحدِّدات دقة كافية لتجاوز أي قاعدة تستخدم .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)