Package CSS pour les modules complémentaires Editor

Pour donner à votre module complémentaire d'éditeur l'apparence de Google Sheets, Docs, Slides ou Forms, ajoutez un lien dans le package CSS ci-dessous afin d'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 les éléments suivants 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 du formulaire ne peut pas être entièrement contrôlé dans tous les navigateurs. Plus spécifiquement, les éléments <select> affichent des artefacts visuels dans Firefox et Internet Explorer, bien qu'ils continuent de fonctionner correctement. Pour voir à quoi ressemblent les styles dans un navigateur donné, chargez simplement cette page dans ce navigateur.

Typographie

Utilisez la police Arial pour tout le texte, dans les styles suivants (selon son utilisation) :

Utilisation et apparence Balisage 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 qui se trouvent à l'horizontale s'affichent automatiquement. Plusieurs couleurs sont disponibles pour différentes utilisations:

Utilisez cet outil Apparence Balisage 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 Balisage 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 Balisage 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 Balisage 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 Balisage avec le package CSS
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Champs de texte

Exemple Balisage 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 même si leur hauteur est 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 issue du guide de démarrage rapide du module complémentaire Google Docs. Si vous faites glisser l'angle inférieur droit de la zone de texte pour agrandir le contenu par rapport à la barre latérale, la zone de contenu défile automatiquement, mais pas le branding en bas.

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 libre en bas.

Exemple Balisage 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>