حزمة 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>