Düzenleyici eklentileri için CSS paketi

Düzenleyici eklentinizin Google E-Tablolar, Dokümanlar, Slaytlar veya Formlar gibi görünmesi için aşağıdaki CSS paketini bağlayarak yazı tiplerine, düğmelere ve form öğelerine Google stilini uygulayın. Kullanımdaki CSS paketinin bir örneği için Docs eklentisi hızlı başlangıç kılavuzuna bakın. CSS paketini kullanmak için her HTML dosyasının en üstüne aşağıdakileri eklemeniz yeterlidir:

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

Form öğelerinin stilinin tüm tarayıcılarda tam olarak kontrol edilemediğini unutmayın. Özellikle <select> öğeleri, Firefox ve Internet Explorer'da düzgün şekilde çalışmaya devam etmesine rağmen bazı görsel kusurlar gösterir. Stillerin belirli bir tarayıcıda nasıl göründüğünü görmek için bu sayfayı ilgili tarayıcıda yüklemeniz yeterlidir.

Yazı biçimi

Tüm metinler için Arial yazı tipini kullanın. Kullanıma bağlı olarak aşağıdaki stillerde:

Kullanım ve görünüm CSS paketiyle işaretleme 
<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>

Düğmeler

Standart düğme türlerinden herhangi birini (<button>, <input type="button">, <input type="submit"> ve <a class="button">) kullanabilirsiniz. Yatay olarak bitişik olan düğmeler otomatik olarak aralıklı olur. Çeşitli kullanım alanlarına yönelik birkaç renk mevcuttur:

Kullan Görünüm CSS paketiyle işaretleme
Birincil işlem 
<button class="action">Translate</button>
İkincil işlemler 
<button>Close</button>
İşlem oluşturma 
<button class="create">Create</button>
Paylaşım işlemi 
<button class="share">Share</button>

Onay kutuları

Örnek CSS paketiyle işaretleme 
<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>

Radyo düğmeleri

Örnek CSS paketiyle işaretleme 
<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>

Menüleri seçme

Örnek CSS paketiyle işaretleme 
<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>

Metin alanları

Örnek CSS paketiyle işaretleme 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Metin alanları

Örnek CSS paketiyle işaretleme 
<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>

Yan panellerin stilini belirlemek zor olabilir. Bunun nedeni, yükseklik değişken olsa da birçok eklentinin kaydırmayan bir marka alanı içermesi gerekmesidir. Aşağıda, Google Dokümanlar eklentisi hızlı başlangıç kılavuzundaki kenar çubuğunun basitleştirilmiş bir kopyası verilmiştir. Metin alanının sağ alt köşesini sürükleyerek içeriği kenar çubuğundan daha uzun hale getirirseniz içerik alanı otomatik olarak kaydırılır ancak alt kısımdaki marka öğeleri kaydırmaz.

Örnekte, doğru dolguyu uygulamak için sidebar sınıfı ve marka alanı alt tarafa zorlamak için bottom sınıfı kullanılmaktadır. Ardından, yerel bir sınıf olan branding-below, kenar çubuğunun ana alanının alttan boş bırakması gereken alanı tanımlar.

Örnek CSS paketiyle işaretleme 
<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>