لقد كان زر الرد أصعب شيء تم إصلاحه باستخدام CSS.
إنه يجعل زر الرد أكثر إشراقًا عند تمرير مؤشر الماوس فوق المنشور أو التركيز عليه. كما أنه يجعل كلمة “Reply” (رد) أكثر سمكًا عند التمرير، وهو ما لا يعجبني.
كما أنه يغير لون الخط عند التمرير المباشر، ولكنه غيّر الأيقونة فقط وليس كلمة “Reply”، لذا أحتاج إلى CSS لتوحيد الإعداد الافتراضي.
هناك العديد من التأثيرات التي تحدث على زر الرد، وهناك أيضًا نوع من التغميق/أو إضافة خط أثقل.
هذا هو الكود الذي أملكه، ولا يزال هناك تأثير لتكبير الخط يحدث، وقد تمكنت من التخلص من تأثير التفتيح:
.post-info.edits .btn-flat svg,
.post-info.edits .btn-flat .d-button-label,
.topic-post .post-controls .create svg,
.topic-post .post-controls .create .d-button-label {
fill: #7b7b7b !important;
color: #7b7b7b !important;
}
/* 2. حالة التمرير: التغيير إلى e0e0e0 */
.post-info.edits .btn-flat:hover svg,
.post-info.edits .btn-flat:hover .d-button-label,
.topic-post .post-controls .create:hover svg,
.topic-post .post-controls .create:hover .d-button-label {
fill: #e0e0e0 !important;
color: #e0e0e0 !important;
}
/* 3. إيقاف التفتيح/التوهج وتخفيف الانتقالات */
.post-info.edits .btn-flat,
.topic-post .post-controls .create {
opacity: 1 !important;
filter: none !important;
transition: none !important;
animation: none !important;
}
/* 4. منع تمييز التمرير من إزالة ألوان التمييز */
.topic-post.highlighted .post-controls .create,
.topic-post.highlighted .post-info.edits .btn-flat {
filter: none !important;
opacity: 1 !important;
}
سيكون من الرائع جدًا إذا تمكنت من تعديل الأيقونات/الخط/النص من خلال نوع من التصميم المدمج. حيث لدي الكثير من CSS الذي يجعل المظهر الافتراضي جيدًا لاحتياجاتي.
لقد كان مظهره أفضل من هذا ولكن كان علي إزالة CSS الذي كان لدي لأنه كان يسبب الكثير من المشاكل بسبب الأزرار المزدوجة وجميع الأنماط المختلفة التي يتم تطبيقها.