بسته CSS برای افزودنی های ویرایشگر

برای اینکه افزونه ویرایشگر شما شبیه برگه‌ها، اسناد، اسلایدها یا فرم‌های Google باشد، در بسته CSS زیر پیوند دهید تا استایل Google را روی فونت‌ها، دکمه‌ها و عناصر فرم اعمال کنید. برای نمونه ای از بسته CSS در حال استفاده، به شروع سریع افزونه Docs مراجعه کنید. برای استفاده از بسته CSS، فقط موارد زیر را در بالای هر فایل HTML قرار دهید:

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

توجه داشته باشید که سبک عناصر فرم را نمی توان به طور کامل در همه مرورگرها کنترل کرد. به طور خاص، عناصر <select> برخی از مصنوعات بصری را در فایرفاکس و اینترنت اکسپلورر نشان می‌دهند، اگرچه هنوز به درستی کار می‌کنند. برای اینکه ببینید سبک ها در یک مرورگر مشخص چگونه به نظر می رسند، به سادگی این صفحه را در آن مرورگر بارگذاری کنید.

تایپوگرافی

از فونت 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 Docs آمده است. اگر گوشه سمت راست پایین قسمت نوشتار را بکشید تا محتوا بلندتر از نوار کناری باشد، ناحیه محتوا به طور خودکار اسکرول می‌شود اما علامت تجاری در پایین اینطور نیست.

در این مثال از کلاس 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>