Package CSS pour les modules complémentaires de l'éditeur

Pour que votre module complémentaire Éditeur ressemble à Google Sheets, Docs, Slides ou Forms, associez le package CSS ci-dessous pour appliquer le style Google aux polices, aux boutons et aux éléments de formulaire. Pour obtenir un exemple du package CSS utilisé, consultez le guide de démarrage rapide du module complémentaire Docs. Pour utiliser le package CSS, il vous suffit d'inclure ce qui suit en haut de chaque fichier HTML:

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

Notez que le style des éléments de formulaire ne peut pas être entièrement contrôlé dans tous les navigateurs. En particulier, les éléments <select> affichent des artefacts visuels dans Firefox et Internet Explorer, bien qu'ils fonctionnent toujours correctement. Pour voir à quoi ressemblent les styles dans un navigateur donné, il vous suffit de charger cette page dans ce navigateur.

Typographie

Utilisez la police Arial pour tout le texte, dans les styles suivants selon l'utilisation:

Utilisation et apparence Mise en forme avec le package 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>

Boutons

Vous pouvez utiliser n'importe quel type de bouton standard : <button>, <input type="button"> ou <input type="submit">, ainsi que <a class="button">. Les boutons adjacents horizontalement s'espacent automatiquement. Plusieurs couleurs sont disponibles pour différents usages:

Utiliser Apparence Mise en forme avec le package CSS
Action principale 
<button class="action">Translate</button>
Action(s) secondaire(s) 
<button>Close</button>
Créer une action 
<button class="create">Create</button>
Action de partage 
<button class="share">Share</button>

Cases à cocher

Exemple Mise en forme avec le package 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>

Cases d'option

Exemple Mise en forme avec le package 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>

Sélectionner des menus

Exemple Mise en forme avec le package 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>

Les zones de texte

Exemple Mise en forme avec le package CSS 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Champs de texte

Exemple Mise en forme avec le package 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>

Les barres latérales peuvent être difficiles à styliser, car bien que la hauteur soit variable, de nombreux modules complémentaires doivent inclure une zone de branding qui ne défile pas. Vous trouverez ci-dessous une copie simplifiée de la barre latérale du guide de démarrage rapide du module complémentaire Google Docs. Si vous faites glisser le coin inférieur droit de la zone de texte pour que le contenu soit plus haut que la barre latérale, la zone de contenu défile automatiquement, mais le branding en bas ne le fait pas.

L'exemple utilise la classe sidebar pour appliquer la marge intérieure appropriée et la classe bottom pour forcer la zone de branding en bas. Une classe locale, branding-below, définit ensuite la zone que la zone principale de la barre latérale doit laisser vide en bas.

Exemple Mise en forme avec le package 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>