حزمة CSS لإضافات المحرر

لمساعدة إضافة المحرِّر في أن تبدو وكأنها "جداول بيانات Google" أو "مستندات Google" أو "العروض التقديمية من Google" أو "نماذج Google"، يمكنك إضافة رابط في حزمة CSS أدناه لتطبيق نمط Google على الخطوط والأزرار وعناصر النموذج. للحصول على نموذج لحزمة CSS قيد الاستخدام، يمكنك الاطّلاع على البدء السريع لإضافة "مستندات Google". لاستخدام حزمة CSS، ما عليك سوى تضمين ما يلي في أعلى كل ملف HTML:

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

تجدر الإشارة إلى أنّه لا يمكن التحكّم بشكل كامل في نمط عناصر النموذج في جميع المتصفّحات. على وجه الخصوص، تعرض عناصر <select> بعض العناصر المرئية في Firefox وInternet Explorer، على الرغم من أنها لا تزال تعمل بشكل صحيح. لمشاهدة كيف تبدو الأنماط في متصفح معين، ما عليك سوى تحميل هذه الصفحة في هذا المتصفح.

فن الطباعة

استخدم خط Arial لكل النص، بالأنماط التالية بناءً على الاستخدام:

الاستخدام والمظهر الترميز باستخدام حزمة CSS
<h1>Titles and headers</h1>
<b>Bold text</b>
Normal text
<a href="">Links</a>
<span class="current">Current navigation selection</span>
<span class="error">Form input errors</span>
<span class="gray">Gray text</span>
<span class="secondary">Secondary text</span>

الأزرار

يمكنك استخدام أي من الأنواع العادية من الأزرار: <button> أو <input type="button"> أو <input type="submit">، بالإضافة إلى <a class="button">. الأزرار المجاورة أفقيًا لنفسها تلقائيًا. هناك عدة ألوان متاحة، لاستخدامات مختلفة:

استخدام المظهر الترميز باستخدام حزمة CSS
الإجراء الأساسي
<button class="action">Translate</button>
الإجراءات الثانوية
<button>Close</button>
إنشاء إجراء
<button class="create">Create</button>
إجراء المشاركة
<button class="share">Share</button>

مربعات اختيار

مثال الترميز باستخدام حزمة CSS
<div>
  <input type="checkbox" id="checkbox1" checked>
  <label for="checkbox1">Checked</label>
</div>
<div>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">Unchecked</label>
</div>
<div>
  <input type="checkbox" id="checkbox3" checked disabled>
  <label for="checkbox3">Checked, disabled</label>
</div>
<div>
  <input type="checkbox" id="checkbox4" disabled>
  <label for="checkbox4">Unchecked, disabled</label>
</div>

أزرار الاختيار

مثال الترميز باستخدام حزمة CSS
<div>
  <input type="radio" name="radio-a" id="radio1" checked>
  <label for="radio1">Checked</label>
</div>
<div>
  <input type="radio" name="radio-a" id="radio2">
  <label for="radio2">Unchecked</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio3"
      checked disabled>
  <label for="radio3">Checked, disabled</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio4" disabled>
  <label for="radio4">Unchecked, disabled</label>
</div>

اختيار القوائم

مثال الترميز باستخدام حزمة CSS
<div class="block form-group">
  <label for="select">Select</label>
  <select id="select">
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>
<div class="block form-group">
  <label for="disabled-select">Disabled select</label>
  <select id="disabled-select" disabled>
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>

مناطق النص

مثال الترميز باستخدام حزمة CSS
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

حقول نصية

مثال الترميز باستخدام حزمة CSS
<div class="inline form-group">
  <label for="city">City</label>
  <input type="text" id="city" style="width: 150px;">
</div>
<div class="inline form-group">
  <label for="state">State</label>
  <input type="text" id="state" style="width: 40px;">
</div>
<div class="inline form-group">
  <label for="zip-code">Zip code</label>
  <input type="text" id="zip-code" style="width: 65px;">
</div>

قد يكون تصميم الأشرطة الجانبية صعبًا، لأنه بالرغم من تغيُّر الارتفاع، إلا أن العديد من الإضافات تحتاج إلى تضمين منطقة للعلامة التجارية لا يمكن تمريرها. يوجد أدناه نسخة مبسطة من الشريط الجانبي من البدء السريع لإضافة مستندات Google. إذا سحبت الزاوية السفلية اليمنى من منطقة النص لجعل المحتوى أطول من الشريط الجانبي، فسيتم تمرير منطقة المحتوى تلقائيًا ولكن لا يتم تمرير العلامة التجارية في الجزء السفلي لا يتم تمريرها.

يستخدم المثال الفئة sidebar لتطبيق المساحة المتروكة الصحيحة والفئة bottom لفرض مساحة العلامة التجارية في الأسفل. الفئة المحلية، branding-below، تحدد بعد ذلك المنطقة الرئيسية للشريط الجانبي التي يجب أن تُترك واضحة من الأسفل.

مثال الترميز باستخدام حزمة CSS
<style>
.branding-below {
  bottom: 56px;
  top: 0;
}
</style>

<div class="sidebar branding-below">
  <div class="block form-group">
    <label for="translated-text">
      <b>Translation</b></label>
    <textarea id="translated-text" rows="15">
    </textarea>
  </div>

  <div class="block">
    <input type="checkbox" id="save-prefs">
    <label for="save-prefs">
      Use these languages by default</label>
  </div>

 <div class="block">
    <button class="blue">Translate</button>
    <button>Insert</button>
  </div>
</div>

<div class="sidebar bottom">
  <span class="gray">
    Translate sample by Google</span>
</div>