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

[Canapin (Coin-coin le Canapin)]

مرحباً!

لفترة طويلة، كانت الأيقونات عند تمرير مؤشر الفأرة فوقها تتحول إلى اللون الرمادي على موقعي الإلكتروني على الرغم من أنني قمت بتجاوز ذلك بلون مخصص (أزرق فاتح):

بسبب CSS الخاص بـ Discourse هذا:

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

كان اللون الأزرق الفاتح يعمل في البداية، وأعتقد أنه توقف عن العمل بعد ترقية Discourse، ولم ألقِ نظرة على هذا الأمر لمدة عام تقريبًا.

ثم، قمت بالترقية إلى الإصدار 2.9.0 مؤخرًا جدًا (أقوم بالترقية في كل مرة يخبرني فيها الواجهة بذلك، وأحيانًا بشكل متكرر أكثر)، وعاد اللون المخصص الذي قمت بتعيينه سابقًا من تلقاء نفسه، وكأنها سحر

ومع ذلك، لاحظت الآن أن اللون الرمادي عاد مرة أخرى

من الممكن أن أكون قد قمت بترقية 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 عندما أستطيع فعل غير ذلك، وغالبًا ما أواجه مشكلة في تجاوز CSS الخاص بـ Discourse بطريقة بسيطة بسبب الفئة الأم .discourse-no-touch التي تتطلب مني إنشاء سلسلة حقيقية من المحددات لتحقيق هدفي.

1. أي فكرة لماذا نجح تجاوز اللون الخاص بي مرة أخرى لبضعة أيام، ثم لم يعد كذلك؟

2. كيف يمكن تجاوز فئات Discourse بشكل صحيح مع هذه الفئة الجد الكبرى المزعجة .discourse-no-touch؟

---

ملاحظة: اللون الأزرق يعمل على الهواتف الذكية. هل هناك قاعدة استهداف بسيطة لجعل تغييرات CSS تؤثر على الأجهزة التي تعمل باللمس والتي لا تعمل باللمس؟

[Don]

مرحباً،

هذا الأمر صعب بعض الشيء ولكني أستخدم شيئاً مشابهاً على موقعي أيضاً، لذا قد يكون هذا مفيداً لك أيضاً.

عام

// Header buttons

.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);
}

[Canapin (Coin-coin le Canapin)]

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

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

لذلك، نجح لون الأزرق الفاتح لأيقونات الهامبرغر والبحث، ربما بسبب فئة .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.