بطاقات الموضوع

[JammyDodger]

للعلم، قد يكون الدخول إلى الوضع الآمن لإجراء الإجراءات المجمعة بديلاً لتعطيل مكون السمة للجميع. من الواضح أنه لا يزال يتطلب مجهودًا إضافيًا، ولكنه ربما يسبب تأثيرًا أقل على الآخرين؟

[tknospdr (David Muszynski)]

نعم، هذا ما توصلت إليه بعد أن عرفت عن الوضع الآمن…

[DenisDoroshchuk]

مرحباً،

شكراً لك على المكون الخاص بك! لاحظنا مشكلة عند استخدام المكون الخاص بك في المنتدى https://community.escapecollective.com/. إذا نقرت على عنوان الموضوع، يتم إعادة تحميل SPA (لقد أرفقت ملف GIF بهذه المشكلة)، ولكن إذا نقرت على البطاقة خارج العنوان، فإن كل شيء يعمل بشكل جيد. تم اكتشاف المشكلة لأن مكون Guest Gate لم يكن يعمل بشكل صحيح بسبب إعادة تحميل الصفحة.
إليك اقتراح: Guest Gate Theme Component - #154 by Don
هل يمكنك إلقاء نظرة على هذه المشكلة؟

شكراً،
دينيس د.

[tknospdr (David Muszynski)]

@tknospdr

شكرًا، لقد أضفت:

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

وهو يعمل بشكل مثالي مع لوحة الألوان الافتراضية “Shades of Blue”.

حسنًا، الجزء الثاني. كيف أقوم بتحريره ليعمل مع لوحتي ألوان؟ بدا الأمر جيدًا حتى تحول المتصفح إلى الوضع الداكن.

أجيب على سؤالي مرة أخرى…

لقد تعلمت عن @media (prefers-color-scheme: light/dark) الليلة الماضية، لذا كل شيء على ما يرام.

لذا يبدو أن شيئًا ما قد تغير مع الجولة الأخيرة من تحديثات Discourse.
الآن، الحافة اليسرى فقط لبطاقات الموضوع الخاص بي تحترم هذا الـ CSS، لقد كنت أبحث للعثور على ما سيصلحه ولكني لم أنجح حتى الآن.
هل يمكن لأي شخص آخر تأكيد ذلك ومعرفة ما إذا كان بإمكانه تتبع التغييرات المطلوبة؟

[Moin]

المشكلة هي المتغير الذي تمت إضافته مؤخرًا للون الخلفية في المواضيع التي قرأتها.

لا أعتقد أن هناك dev-news حول هذا التغيير. ولكن يمكنك العثور على بعض المعلومات هنا:

Styling Discourse with variables: Show & Tell

We’ve recently added a lot of css variables to Discourse. These variables make theming and customizing aspects of the UI much easier. For many changes, you will no longer need to target super specific elements in the html, and instead only change a variable. If you are curious about what variables are able to be changed, I suggest you look through the app using this regex → --([a-zA-Z0-9\-_]+): If using a code editor and searching for all instances of the above regex, you should see something …

[tknospdr (David Muszynski)]

هل هناك طريقة لإخفاء تنسيق CSS هذا؟ لقد دمر هذا مظهر موقعي وبما أنني لست مبرمجًا بأي شكل من الأشكال، فلا أعرف كيف أتغلب على ذلك.
لقد نظرت في فاحص العناصر، ورأيت كلمة “visited” على جميع المواضيع المعطلة ورأيت أنها مفقودة على الموضوع الذي لا يزال يبدو صحيحًا.
كيف يمكنني إصلاح هذا؟

الموضوع الذي لم أزره بعد (بدون تحويم):

ومع تحويم الماوس:

والآخرون معطلون.

[tknospdr (David Muszynski)]

لقد كان تتبع ذلك أصعب مما ينبغي. (أنا متأكد تمامًا من أن ذلك يرجع إلى قصوري، ولكن لا يزال الأمر كذلك…)

يبدو أن إضافة:

.topic-list-item-background-color--visited {
    background: none
}

قد أصلح الأمر دون أي آثار جانبية غير مرغوب فيها.

[jordan.vidrine]

في الأنماط الخاصة بك، تحتاج الآن فقط إلى تغيير هذين المتغيرين:

--topic-list-item-background-color
--topic-list-item-background-color--visited

لذلك، يجب أن يعمل شيء مثل هذا:

:root {
--topic-list-item-background-color: YOUR COLOR HERE;
--topic-list-item-background-color--visited: YOUR COLOR HERE;
}

[tknospdr (David Muszynski)]

كيف يمكن تفسير ذلك للفروقات عند التغيير بين الإضاءة العادية والإضاءة المعتمة؟

[jordan.vidrine]

@tknospdr

كيف يمكن أن يفسر ذلك الاختلافات عند التبديل بين الفاتح والداكن؟

يمكنك استخدام دالة CSS light-dark()

--variable-name: light-dark(#efedea, #223a2c);

@tknospdr

لا أريده أن يكون مختلفًا بمجرد زيارته

يمكنك تعيين كليهما على نفس الشيء.

@tknospdr

لا يغطي تغيير لون التحويم.

لم يتم فعل أي شيء لـ :hover في النواة. ستحتاج فقط إلى التأكد من تعيين المتغير إلى ما تريده عند التحويم.

[tknospdr (David Muszynski)]

لم ينجح هذا معي بعد.
هذا ما نجح في الأصل:

// Blend topic card colors with theme
@media (prefers-color-scheme: dark) {
    .topic-card.has-max-height {
        background: #223c44 !important;
    }
    .topic-card.has-max-height:hover {
        background: #163d51 !important;
    }
}

@media (prefers-color-scheme: light) {
    .topic-card.has-max-height {
        background: #e6ecf2 !important;
    }
    .topic-card.has-max-height:hover {
        background: #ddecf7 !important;
    }
}

ثم بعد آخر تحديث، أضفت هذا وبدا أنه يعمل، لكنه توقف لاحقًا:

.topic-list-item-background-color--visited {
    background: none
}

ثم، بناءً على ما قلته هنا، جربت كليهما بإضافة إلى الحالي و استبدال كل شيء بهذا:

:root {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);
}

يجب أن يكون هناك متغير آخر أحتاج إلى تغطيته hover-visited، لأن المواضيع غير المقروءة تعمل بشكل صحيح، لكن المواضيع التي تمت زيارتها معطلة.

[jordan.vidrine]

@tknospdr

--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);

هذا المتغير غير موجود.

.topic-card.has-max-height:hover {
--topic-list-item-background-color: ADD COLOR HERE
--topic-list-item-background-color--visited: ADD COLOR HERE
}

هذا يجب أن يكون ما تحتاجه، آمل أن يساعد هذا!

[tknospdr (David Muszynski)]

هذا هو أقل عدد من الأسطر التي تمكنت من إنشائها والتي يبدو أنها تعمل بشكل صحيح.

// مزج ألوان بطاقات الموضوع مع السمة
.topic-card.has-max-height {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(none, none);
}

.topic-card.has-max-height:hover {
--topic-list-item-background-color: light-dark(#ddecf7, #163d51);
--topic-list-item-background-color--visited: light-dark(none, none);
}

@media (prefers-color-scheme: dark) {
    .topic-card.has-max-height {
        background: #223c44 !important;
    }
    .topic-card.has-max-height:hover {
        background: #163d51 !important;
    }
}

@media (prefers-color-scheme: light) {
    .topic-card.has-max-height {
        background: #e6ecf2 !important;
    }
    .topic-card.has-max-height:hover {
        background: #ddecf7 !important;
    }
}

[RGJ (Richard - Communiteq)]

لقد قمت بإنشاء طلب سحب لهذا المكون السمة مع إضافتين:

ميزة: تبديل المواضيع المقترحة

يضيف الإعداد إظهار للمواضيع المقترحة

يستخدم بطاقات المواضيع للمواضيع المقترحة اختياريًا (كما هو موضح في طلب الميزة هذا)

ميزة: التحديد حسب الفئات

يضيف الإعداد إظهار في الفئات

إذا لم يكن فارغًا، فإنه يستخدم بطاقات المواضيع في فئات محددة فقط.

[jrgong]

إضافة رائعة @RGJ ، لقد اختبرناها على نسختنا وهي تعمل بشكل رائع، يجب دمجها بالتأكيد في رأيي.

[jrgong]

تم العثور على خطأ CSS صغير آخر مع هذا tc على discourse 3.5.0:

تمت إضافة حدود حول العديد من عناصر واجهة المستخدم مثل سجل التعديل وعناصر توسيع الاقتباس.

هذا بسبب الفئات btn no-text المفقودة من عناصر الزر

[chapoi]

تمت المراجعة والدمج، شكرًا على الإضافة!

[Picho_Pelis (Carlos Andres)]

بصراحة لم أتمكن من جعله يعمل، انظر كيف يبدو قبيحًا جدًا، أستخدم سمة horinzon ساعدني

[Moin]

هذه المكونات غير مدرجة كمتوافقة مع سمة Horizon.

لا أعتقد أنه سيكون من السهل تغيير ذلك لأن كلاهما يخصص قائمة الموضوعات، وكما هو مذكور في المنشور الأول:

@Discourse

قد يتسبب مكون السمة هذا في حدوث تعارضات مع التخصيصات الأخرى لقائمة الموضوعات

[Picho_Pelis (Carlos Andres)]

@tknospdr

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

كيف يمكنني إضافة CSS، الذي أراه هنا في المواضيع، الكثير من CSS