توثيق الخصائص المخصصة

لقد فعلت هذا مؤخرًا لسمة، حيث طلبت من Claude-3.5، المضمن في Cursor، إنشاء وثائق. لقد نجح الأمر بشكل جيد جدًا، لذا أردت تجربته لقاعدة بيانات Discourse الأساسية.

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

@Codebase قم بإنشاء جدول كامل لجميع خصائص CSS المخصصة من قاعدة بيانات Discourse. قم بتضمين كل خاصية من جميع الملفات وقم بتنظيمها في الفئات التالية: التخطيط والأبعاد، نصف قطر الحواف، التنقل، الشريط الجانبي، عناصر الإدخال، الدردشة، الطباعة، ألوان السمات، قيم ألوان RGB. لكل خاصية، اعرض اسمها ووصفها وقيمتها الافتراضية وملف المصدر الخاص بها. قم بتنسيق أسماء الخصائص والقيم الافتراضية باستخدام علامات الاقتباس المائلة. لا تتخطى أي خصائص، ولا تطرح أسئلة، ولا تضف تعليقات.

التخطيط والأبعاد

اسم الخاصية الوصف القيمة الافتراضية ملف المصدر
--d-max-width الحد الأقصى لعرض المحتوى 1110px desktop/discourse.scss
--topic-body-width عرض محتوى نص الموضوع 750px common/foundation/base.scss
--topic-body-width-padding حشوة نص الموضوع 20px common/foundation/base.scss
--topic-avatar-width عرض الصورة الرمزية في المواضيع 45px common/foundation/base.scss
--d-wrap-padding-h الحشوة الأفقية ل حاوية الالتفاف 0.67em common/base/discourse.scss

نصف قطر الحواف

اسم الخاصية الوصف القيمة الافتراضية ملف المصدر
--d-border-radius نصف قطر الحواف الافتراضي 2px common/foundation/base.scss
--d-border-radius-large نصف قطر الحواف الكبير 2px common/foundation/base.scss
--d-nav-pill-border-radius نصف قطر الحواف لأقراص التنقل 2px common/foundation/base.scss
--d-button-border-radius نصف قطر الحواف للأزرار 2px common/foundation/base.scss
--d-input-border-radius نصف قطر الحواف لعناصر الإدخال 2px common/foundation/base.scss
--full-page-border-radius نصف قطر الحواف للصفحة الكاملة 12px plugins/chat/assets/stylesheets/common/base-common.scss

التنقل

اسم الخاصية الوصف القيمة الافتراضية ملف المصدر
--d-nav-color لون نص التنقل var(--primary) common/base/discourse.scss
--d-nav-bg-color خلفية التنقل transparent common/base/discourse.scss
--d-nav-color--hover لون نص التنقل عند التحويم var(--primary) common/base/discourse.scss
--d-nav-bg-color--hover خلفية التنقل عند التحويم var(--d-hover) common/base/discourse.scss
--d-nav-color--active لون نص التنقل النشط var(--tertiary) common/base/discourse.scss
--d-nav-bg-color--active خلفية التنقل النشط transparent common/base/discourse.scss
--d-nav-border-color--active حدود التنقل النشط var(--d-nav-color--active) common/base/discourse.scss
--d-nav-underline-height ارتفاع خط التنقل السفلي 0.125em common/base/discourse.scss

الشريط الجانبي

اسم الخاصية الوصف القيمة الافتراضية ملف المصدر
--d-sidebar-width عرض الشريط الجانبي 17em common/base/sidebar.scss
--d-sidebar-row-horizontal-padding الحشوة الأفقية للصفوف 1rem common/base/sidebar.scss
--d-sidebar-row-height ارتفاع صفوف الشريط الجانبي 2.2em common/base/sidebar.scss
--d-sidebar-animation-time مدة الرسوم المتحركة 0.25s common/base/sidebar.scss
--d-sidebar-animation-ease تخفيف الرسوم المتحركة ease-in-out common/base/sidebar.scss
--d-sidebar-background لون الخلفية var(--secondary) common/base/sidebar.scss
--d-sidebar-admin-background خلفية قسم المسؤول var(--primary-very-low) common/base/sidebar.scss
--d-sidebar-footer-fade لون تلاشي التذييل rgba(var(--secondary-rgb), 1) common/base/sidebar.scss
--d-sidebar-header-color لون نص الرأس var(--primary-medium) common/base/sidebar.scss
--d-sidebar-header-icon-color لون أيقونة الرأس var(--primary-medium) common/base/sidebar.scss
--d-sidebar-border-color لون الحدود var(--primary-low) common/base/sidebar.scss
--d-sidebar-link-color لون نص الرابط var(--primary-high) common/base/sidebar.scss
--d-sidebar-link-icon-color لون أيقونة الرابط var(--primary-500) common/base/sidebar.scss
--d-sidebar-link-badge-color لون شارة الرابط var(--primary-700) common/base/sidebar.scss
--d-sidebar-prefix-background لون خلفية البادئة var(--primary-low) common/base/sidebar.scss
--d-sidebar-prefix-color لون نص البادئة var(--d-sidebar-link-color) common/base/sidebar.scss
--d-sidebar-suffix-color لون اللاحقة var(--tertiary-med-or-tertiary) common/base/sidebar.scss

عناصر الإدخال

اسم الخاصية الوصف القيمة الافتراضية ملف المصدر
--d-input-bg-color لون خلفية الإدخال var(--secondary) common/base/discourse.scss
--d-input-text-color لون نص الإدخال var(--primary) common/base/discourse.scss
--d-input-border نمط حدود الإدخال 1px solid var(--primary-400) common/base/discourse.scss
--d-input-bg-color--disabled خلفية الإدخال المعطل var(--primary-very-low) common/base/discourse.scss
--d-input-text-color--disabled لون نص الإدخال المعطل var(--primary-medium) common/base/discourse.scss
--d-input-border--disabled حدود الإدخال المعطل 1px solid var(--primary-low) common/base/discourse.scss

الدردشة

اسم الخاصية الوصف القيمة الافتراضية ملف المصدر
--message-left-width العرض الأيسر للرسائل 42px plugins/chat/assets/stylesheets/common/base-common.scss
--channel-list-avatar-size حجم الصور الرمزية في قائمة القنوات 30px plugins/chat/assets/stylesheets/common/base-common.scss
--chat-header-offset إزاحة رأس الدردشة 45px plugins/chat/assets/stylesheets/common/base-common.scss
--chat-header-expanded-offset إزاحة الرأس الموسع للدردشة 0px plugins/chat/assets/stylesheets/common/base-common.scss

الطباعة

اسم الخاصية الوصف القيمة الافتراضية ملف المصدر
--d-font-family--monospace مكدس خطوط العرض الثابت ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", menlo, monaco, consolas, monospace common/foundation/base.scss
--heading-font-family عائلة الخطوط للعناوين مشار إليها في الكود common/base/discourse.scss
--font-family عائلة الخطوط الأساسية مشار إليها في الكود common/base/discourse.scss
--line-height-small ارتفاع السطر الصغير مشار إليها في الكود common/base/_topic-list.scss
--line-height-medium ارتفاع السطر المتوسط مشار إليها في الكود common/base/_topic-list.scss
--line-height-large ارتفاع السطر الكبير مشار إليها في الكود common/base/_topic-list.scss

ألوان السمات

اسم الخاصية الوصف القيمة الافتراضية ملف المصدر
--primary اللون الأساسي #222222 color_definitions.scss
--secondary اللون الثانوي #ffffff color_definitions.scss
--tertiary اللون الثالث #0088cc color_definitions.scss
--quaternary اللون الرابع #e45735 color_definitions.scss
--header_background لون خلفية الرأس #ffffff color_definitions.scss
--header_primary اللون الأساسي للرأس #222222 color_definitions.scss
--highlight لون التمييز #ffff4d color_definitions.scss
--danger لون الخطر/الخطأ #e45735 color_definitions.scss
--success لون النجاح #009900 color_definitions.scss
--love لون الحب/القلب #fa6c8d color_definitions.scss
--d-selected لون حالة التحديد #e9e9e9 color_definitions.scss
--d-hover لون حالة التحويم #f2f2f2 color_definitions.scss

قيم ألوان RGB

اسم الخاصية الوصف القيمة الافتراضية ملف المصدر
--always-black-rgb اللون الأسود بصيغة RGB 0, 0, 0 color_definitions.scss
--primary-rgb اللون الأساسي بصيغة RGB 34, 34, 34 color_definitions.scss
--primary-low-rgb اللون الأساسي المنخفض بصيغة RGB 242, 242, 242 color_definitions.scss
--primary-very-low-rgb اللون الأساسي المنخفض جدًا بصيغة RGB 248, 248, 248 color_definitions.scss
--secondary-rgb اللون الثانوي بصيغة RGB 255, 255, 255 color_definitions.scss
--header_background-rgb خلفية الرأس بصيغة RGB 255, 255, 255 color_definitions.scss
--tertiary-rgb اللون الثالث بصيغة RGB 0, 136, 204 color_definitions.scss
--highlight-rgb لون التمييز بصيغة RGB 255, 255, 77 color_definitions.scss
--success-rgb لون النجاح بصيغة RGB 0, 153, 0 color_definitions.scss
12 إعجابًا

تبدو رائعة! يمكنني بالفعل رؤية بعض الأشياء التي يمكنني استخدامها في نسقي الخاص.

إعجابَين (2)

هذا رائع ومفيد للغاية. شكرا لك!

:beers: :sunglasses: :+1: :sparkles:

إعجابَين (2)