نمط التنقل الافتراضي الجديد ونظام ألوان مبسط

[awesomerobot (Kris)]

ما الذي يتغير

قريباً، ستتغير قائمة “القائمة العلوية” والتنقلات ذات النمط المماثل (والتي يشار إليها أحيانًا باسم حبوب التنقل) وستحصل على نمط محدث وأكثر اتساقًا في جميع أنحاء Discourse.

القائمة العلوية

قبل:

بعد:

قائمة الملف الشخصي

قبل:

بعد:

لماذا يتغير؟

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

استخدام هذا اللون، وهو مشابه جدًا لـ “لون أحمر الخطر” افتراضيًا، جعل من الصعب القيام بأشياء مثل تمييز عامل تصفية نشط… لأنه في هذه الحالة يبدو وكأنه خطأ:

قبل:

بعد:

كيف يمكنني تغيير هذا في السمات؟

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

 :root {
  --d-nav-color: var(--primary);
  --d-nav-bg-color: transparent;
  --d-nav-color--hover: var(--primary);
  --d-nav-bg-color--hover: var(--d-hover);
  --d-nav-color--active: var(--tertiary);
  --d-nav-bg-color--active: transparent;
  --d-nav-border-color--active: var(--d-nav-color--active);
  --d-nav-underline-height: 0.125em;
 }

لذلك بدلاً من إضافة مجموعات متعددة من CSS المخصص لتغيير كل مثيل تنقل، يمكنك تغيير المتغيرات حسب الحاجة. على سبيل المثال:

 :root {
  --d-nav-color--active: mediumorchid;
 }

سيؤدي تطبيق هذا CSS إلى:

من أين يأتي هذا الخط السفلي؟

قد تلاحظ أن “الخط السفلي” لعنصر التنقل النشط لا يستخدم خاصية CSS border-bottom. بدلاً من ذلك، يتم تطبيقه باستخدام عنصر زائف ::after pseudo element.

قد تستخدم السمات الحالية بالفعل خاصية border، لذا نأمل أن تجعل هذه الطريقة من السهل إزالة الخط السفلي الخاص بنا إذا كان يتعارض مع الأنماط الحالية. للإزالة:

 :root {
  --d-nav-underline-height: 0;
 }

ماذا لو فضلت النمط القديم؟

استخدام متغيرات CSS الجديدة يجعل هذا سهلاً للغاية للعودة إليه. في السمة الخاصة بك يمكنك تطبيق:

 :root {
  --d-nav-color--hover: var(--quaternary);
  --d-nav-bg-color--hover: var(--quaternary-low);
  --d-nav-color--active: var(--secondary);
  --d-nav-bg-color--active: var(--quaternary);
  --d-nav-border-color--active: var(--primary-medium);
  --d-nav-underline-height: 0;
 }

إذا كنت ترغب فقط في تغيير مثيل واحد لهذا التنقل، يمكنك تحديد نطاق تغييرات المتغيرات إلى معرف أو فئة، على سبيل المثال #navigation-bar بدلاً من :root:

 #navigation-bar {
  --d-nav-color--hover: var(--quaternary);
  --d-nav-bg-color--hover: var(--quaternary-low);
  --d-nav-color--active: var(--secondary);
  --d-nav-bg-color--active: var(--quaternary);
  --d-nav-underline-height: 0;
 }

مثال آخر:

 .user-navigation {
  --d-nav-bg-color--active: lightcyan;
 }

لست متأكدًا من كيفية تغيير CSS؟ تحقق من Making custom CSS changes on your site

هذا كل شيء في الوقت الحالي! كما هو الحال دائمًا، أخبرنا إذا كانت لديك أي أسئلة أو واجهت أي مشاكل على طول الطريق.

[Arkshine]

أعجبني! إنه حديث، وأقل تدخلاً بصريًا، وفوق كل ذلك، يبسط CSS. عمل جيد!

[nobrowser (Ian Zimmerman)]

في أمثلتك، اللون ليس الاختلاف الوحيد بين “القديم” و"الجديد". تبدو حجم الخط أصغر في الأمثلة “الجديدة”. هل هذا مقصود أم عرضي؟

أشعر أنه كان هناك الكثير من التغيير في حجم الخط الافتراضي بالفعل

[Firepup650 (Firepup Sixfifty)]

لا يبدو مختلفًا في الحجم بالنسبة لي، هل يمكنك ربما تحديد الصورة التي تبدو مختلفة؟

[NateDhaliwal]

أعتقد أن الأمر يتعلق بهذا (تم أخذه من ask.replit.com):

يبدو أن النص أصغر.

[dsims (Daniel)]

@nobrowser

حجم الخط يبدو أصغر

@NateDhaliwal

يبدو أن النص أصغر.

يبدو أن حجم الخط قد تغير في هذا السطر هنا عندما تمت إزالة --font-up-1 font-size، وبالتالي أصبح الآن افتراضيًا لـ --base-font-size. وفي حالة قائمة التنقل المنسدلة للجوال، لا يزال --font-down-1 مطبقًا ولكن بدون --font-up-1.

النمط السابق:

.nav-pills {
  > li {
    > a,
    button {
      font-size: var(--font-up-1);

[Moin]

لاحظت ذلك أيضًا. خط القوائم المنسدلة للفئات والعلامات أكبر من “الأحدث” بجوارها. و “الأحدث” أصغر حتى من مقتطف الموضوع المثبت عندما لا تخفي الشريط الجانبي.

[awesomerobot (Kris)]

نعم، تم تعديل حجم الخط عن قصد (كانت هناك أيضًا بعض التعديلات الطفيفة في المسافات). عندما قمنا بزيادة حجم الخط الإجمالي، أصبحت عوامل التصفية أكبر جنبًا إلى جنب مع كل شيء آخر - ولكن الآن أصبحت القوائم المنسدلة وعوامل التصفية ونص زر الموضوع الجديد كلها بنفس الحجم.

إذا كنت ترغب في أن يكون النص أكبر مرة أخرى، يمكنك إضافة بعض CSS…

كل شيء في التنقل (القوائم المنسدلة، عوامل التصفية، الأزرار):

.navigation-container {
 font-size: var(--font-up-1);
}

عوامل التصفية فقط:

#navigation-bar {
 font-size: var(--font-up-1);
}

@nobrowser

أشعر أن هناك الكثير من التغييرات مع حجم الخط الافتراضي بالفعل

إذا كانت لديك أي مشكلات أو اقتراحات محددة، فأخبرنا بذلك ويمكننا المساعدة!