Framework CSS

Nous fournissons un framework CSS destiné à vous aider dans le développement d'overlays et docks ainsi que l'application de thèmes sur ceux-ci. Vous trouverez ci-dessous l'ensemble des variables et classes exposées, regroupées par thématiques.

Fichier core.css

Le fichier core.css contient du code dont le but est d'harmoniser et réinitialiser certaines marges et autres propriétés, notamment de nature textuelle, afin d'obtenir une base saine pour tout code additionnel. Nous recommandons donc de toujours inclure celui-ci sauf si vous maîtrisez parfaitement ce que vous faites et que vous choisissez par exemple d'utiliser un framework CSS différent du nôtre.

<link rel="stylesheet" href="https://obs.multistream.tools/v1/core.css"/>

Fichier overlay.css

Le fichier overlay.css contient des variables et classes utiles au développement d'overlays multiplateformes ; par exemple pour la mise en page globale et l'affichage d'icônes représentant les logos de différents réseaux sociaux. De la même manière que pour le fichier core.css, nous recommandons de toujours inclure celui-ci.

<link rel="stylesheet" href="https://obs.multistream.tools/v1/core.css"/>
<link rel="stylesheet" href="https://obs.multistream.tools/v1/overlay.css"/>

Variables

nom	valeur	description
`--borderSize`	`1px`	Épaisseur de la bordure pour la variable `--border`
`--borderStyle`	`solid`	Style de la bordure pour la variable `--border`
`--border`	Bordure	Regroupe les variables `--borderSize` et `--borderStyle`
`--borderRadius`	`4px`	Rayon global des coins arrondis
`--color1`	`white`	Couleur de premier plan
`--colorDiscord`	`#7289da`	Couleur du logo Discord
`--colorFacebook`	`#005fec`	Couleur du logo Facebook
`--colorInstagram`	`#e4405f`	Couleur du logo Instagram
`--colorKick`	`#53fc18`	Couleur du logo Kick
`--colorTikTok`	`--fontColor`	Couleur du logo TikTok
`--colorTrovo`	`#19d66b`	Couleur du logo Trovo
`--colorTwitch`	`#a970ff`	Couleur du logo Twitch
`--colorX`	`--fontColor`	Couleur du logo X
`--colorYouTube`	`red`	Couleur du logo YouTube
`--fontColor`	`--color1`	Couleur du texte de la page
`--fontFamily`	`Verdana, Arial, Helvetica, sans-serif`	Police du texte de la page par défaut (fallback)
`--fontFamily1`	`--fontFamily`	Police du texte de la page
`--fontSize`	`100%`	Taille du texte de la page
`--fontWeight`	`400`	Graisse du texte de la page
`--fontZoom`	`1`	Coefficient multiplicateur du texte de la page
`--spacing`	`1rem`	Valeur de base pour des espacements
`--spacing25`	25% de `--spacing`	Valeur alternative pour des espacements
`--spacing50`	50% de `--spacing`	Valeur alternative pour des espacements
`--spacing75`	75% de `--spacing`	Valeur alternative pour des espacements
`--spacing125`	125% de `--spacing`	Valeur alternative pour des espacements
`--spacing150`	150% de `--spacing`	Valeur alternative pour des espacements
`--spacing175`	175% de `--spacing`	Valeur alternative pour des espacements
`--spacing200`	200% de `--spacing`	Valeur alternative pour des espacements
`--zoom`	`1`	Coefficient multiplicateur global système
`--platformsFont`	`platforms`	Police de caractères des logos de plateformes

info

Utilisez toujours des unités relatives telles que rem et/ou la fonction calc pour définir notamment la taille des textes et espacements de vos overlays et docks ; de cette manière ceux-ci seront fluides et supporteront par défault la fonctionnalité de zoom que nous proposons.

Également, les polices de caractères que vous décidez d'utiliser doivent toutes être affectées à des variables nommées ---fontFamily1, ---fontFamily2, ... Ceci de manière à permettre leur personnalisation grâce au paramètre dédié.

Utilisez la variable --fontZoom pour par exemple faire varier dymaniquement la taille des textes de vos overlays et docks à l'aide de notre framework JavaScript.

En revanche ne faites jamais varier la valeur de la variable --zoom car celle-ci doit pouvoir être personnalisée grâce au paramètre dédié ; vous pouvez cependant modifier sa valeur par défaut et l'utiliser pour permettre d'appliquer un zoom global à vos overlays et docks là où vous estimez que ceci peut être utile.

Logos

Les classes logo, discord, facebook, instagram, kick, tiktok, trovo, twitch, youtube et x permettent respectivement d'afficher notre logo et ceux de Discord, Facebook, Instagram, Kick, TikTok, Trovo, Twitch, YouTube et X.

<i class="logo"></i>
<i class="discord"></i>
<i class="facebook"></i>
<i class="instagram"></i>
<i class="kick"></i>
<i class="tiktok"></i>
<i class="trovo"></i>
<i class="twitch"></i>
<i class="youtube"></i>
<i class="x"></i>

Utilitaires

`hidden`

La classe hidden sert à masquer (opacité) un élément donné.

<div class="hidden">Hidden</div>

Fichier dock.css

Le fichier dock.css contient des variables et classes utiles au développement de docks d'administation ; par exemple pour la mise en page globale et l'affichage de formulaires. Nous recommandons d'inclure celui-ci en complément des deux autres mais uniquement dans le cas de docks affichés dans OBS en tant que docks Internet personnalisés.

<link rel="stylesheet" href="https://obs.multistream.tools/v1/core.css"/>
<link rel="stylesheet" href="https://obs.multistream.tools/v1/overlay.css"/>
<link rel="stylesheet" href="https://obs.multistream.tools/v1/dock.css"/>

Variables

nom	valeur	description
`--buttonActiveScale`	`0.95`	Échelle des boutons lorsqu'un utilisateur clique dessus
`--color2`	`#635985`	Couleur de second plan
`--color3`	`#3b345b`	Couleur de troisième plan
`--color4`	`#352d4e`	Couleur de quatrième plan
`--color5`	`#18122b`	Couleur d'arrière plan
`--colorInfo`	`#00c7e6`	Couleur symbolisant une information
`--colorDanger`	`#ff7452`	Couleur symbolisant un danger ou une erreur
`--disabledOpacity`	`0.25`	Opacité d'un élément désactivé
`--scheme`	`dark`	Jeu de couleurs préféré pour la page (documentation)
`--spacing`	`0.75rem`	Valeur de base pour des espacements
`--shadowSize`	`10px`	Taille globale des ombres sur la page
`--textAmount`	`' x'`	Texte précédant l'affichage de la valeur `amount` d'un événement donné
`--textSender`	`' → '`	Texte indiquant que l'événement est une action d'un utilisateur sur un autre
`--textTier`	`' '`	Texte précédant l'affichage de la valeur `tier` d'un événement donné

Utilitaires

`padding`

La classe padding sert à ajouter un espacement interne de base à un élément donné.

<div class="padding">Padding</div>

`text-left`

La classe text-left sert à aligner à gauche le texte d'un élément donné.

<div class="text-left">Left</div>

`text-center`

La classe text-center sert à aligner au centre le texte d'un élément donné.

<div class="text-center">Center</div>

`text-right`

La classe text-right sert à aligner à droite le texte d'un élément donné.

<div class="text-right">Right</div>

`info`

La classe info modifie la couleur de fond d'un élément donné pour symboliser une information.

<div class="info">Info</div>

<button class="button info">Info button</button>

`danger`

La classe danger modifie la couleur de fond d'un élément donné pour symboliser un danger ou une erreur.

<div class="danger">Danger/Error</div>

<button class="button danger">Danger button</button>

`flexible`

La classe flexible permet de rendre flexible (prend toute la place restante disponible) un élément donné, directement enfant d'un élément portant la classe col ou row.

Dans le cas d'un parent direct portant la classe row, les éléments portant la classe field, label ou box ne sont pas affectés car flexibles par défaut.

<div class="col">
  <div class="flexible">Flexible</div>
  <div>Not flexible</div>
</div>

<div class="row">
  <div class="flexible">Flexible</div>
  <div>Not flexible</div>
</div>

`not-flexible`

La classe not-flexible permet d'annuler la flexibilité par défaut d'un élément donné, directement enfant d'un élément portant la classe toolbar ou row.

Dans le cas d'un parent direct portant la classe toolbar, il s'agit des éléments portant la classe button.

Dans le cas d'un parent direct portant la classe row, il s'agit des éléments portant la classe field, label ou box.

<div class="toolbar">
  <button class="button">Flexible</button>
  <button class="button not-flexible">Not flexible</button>
</div>

<div class="row">
  <div class="field not-flexible">Not flexible field</div>
  <div class="label not-flexible">Not flexible label</div>
  <div class="box not-flexible">Not flexible box</div>
</div>

`gap`

La classe gap permet d'ajouter un espacement entre les éléments directement enfants d'un élément donné, portant également la classe content.

<div class="page">
  <div class="content gap">
    <div>Content</div>
    <div>Content</div>
  </div>
</div>

`double-gap`

La classe double-gap permet de doubler l'espacement par défaut entre les éléments directement enfants d'un élément donné, portant également la classe row ou col.

<div class="row double-gap">
  <div>Content</div>
  <div>Content</div>
</div>

<div class="col double-gap">
  <div>Content</div>
  <div>Content</div>
</div>

`no-gap`

La classe no-gap permet de supprimer l'espacement entre les éléments directement enfants d'un élément donné, portant également la classe row ou col.

<div class="row no-gap">
  <div>Content</div>
  <div>Content</div>
</div>

<div class="col no-gap">
  <div>Content</div>
  <div>Content</div>
</div>

Génériques

`row`

La classe row permet d'afficher en ligne les éléments directement enfants d'un élément donné, en séparant ceux-ci - dont certains peuvent être flexibles - par un espacement par défaut.

<div class="row">
  <div>Content</div>
  <div>Content</div>
</div>

`col`

La classe col permet d'afficher en colonne les éléments directement enfants d'un élément donné, en séparant ceux-ci - dont certains peuvent être flexibles - par un espacement par défaut.

<div class="col">
  <div>Content</div>
  <div>Content</div>
</div>

`box`

La classe box permet d'ajouter une boîte (bordure et espacement interne par défaut) autour d'un contenu donné.

<div class="box">Content</div>

Boutons

`button`

La classe button permet de styliser de façon uniforme un bouton sur lequel l'utilisateur du dock pourra cliquer.

Les couleurs, ainsi que le comportement adopté pour chaque état du bouton, sont basés sur les variables précédemment décrites.

Un bouton portant la classe button est traité comme flexible par défaut si directement enfant d'un élément portant la classe toolbar.

<button class="button" type="button">Button</button>
<button class="button" type="reset">Reset</button>
<button class="button" disabled>Disabled</button>
<button class="button">Submit</button>

Barres d'outils

`toolbar`

La classe toolbar permet d'afficher une barre d'outils/onglets sur lequels l'utilisateur du dock pourra cliquer ; il peut s'agir de boutons, de champs de formulaires et de liens de navigation.

Les barres d'outils sont principalement destinées à être utilisées dans le cadre d'onglets ou de pages car leur position restera fixe, indépendante du scroll applicable au contenu.

<footer class="toolbar">
  <label class="field">
    <input class="input text-left"/>
  </label>
  <label class="field">
    <input class="input" type="checkbox"/>
    <span class="label">Checkbox</span>
  </label>
  <button class="button" type="button">Button</button>
</footer>

<nav class="toolbar">
  <a class="tab" href="#home">Home</a>
  <a class="tab" href="#settings">Settings</a>
</nav>

Pages

`content`

La classe content permet de définir la zone scrollable correspondant au contenu à l'intérieur d'une page.

L'élément portant la classe content doit être directement enfant de celui portant la classe page.

<div class="page">
  <div class="content">
    <div>Scrollable content</div>
  </div>
</div>

`page`

La classe page permet de définir une page, c'est à dire un élément ayant un contenu potentiellement scrollable accompagné d'une éventuelle barre d'outils.

L'élément portant la classe page doit être l'élément body, directement enfant de celui-ci (pour pouvoir utiliser une balise spécifique) ou faire partie de notre système d'onglets décrit ci-dessous.

<body class="page">
  <main class="content">
    <!-- Scrollable content -->
  </main>
  <footer class="toolbar">
    <!-- Toolbar content -->
  </footer>
</body>

<body>
  <form class="page">
    <section class="content">
      <!-- Scrollable content -->
    </section>
    <footer class="toolbar">
      <!-- Toolbar content -->
    </footer>
  </form>
</body>

Onglets

`tab`

La classe tab permet de définir un lien de navigation, directement enfant d'une barre d'outils, pointant vers un onglet donné.

Notre système d'onglets ne prend actuellement en charge que deux liens pour deux onglets différents.

La navigation doit obligatoirement se faire avec des ancres HTML et l'une d'elles doit forcément être #settings ; l'ordre des liens n'a quant à lui pas d'importance.

<nav class="toolbar">
  <a class="tab" href="#settings">Settings</a>
  <a class="tab" href="#home">Home</a>
</nav>

`tabs`

La classe tabs permet d'afficher des pages en tant qu'onglets, c'est à dire une seule à la fois, avec une navigation fixe dédiée au basculement de l'une à l'autre.

Notre système d'onglets ne prend actuellement en charge que deux pages différentes dont une ayant forcément l'identifiant (attribut id) settings.

L'élément portant la classe tabs doit être l'élément body ou directement enfant de celui-ci pour pouvoir utiliser une balise spécifique. Ses enfants directs doivent porter la classe page ou toolbar, l'élément portant la classe toolbar doit toujours arriver en dernier.

<body class="tabs">
  <main id="home" class="page">
    <!-- Page content and toolbar -->
  </main>
  <form id="settings" class="page">
    <!-- Page content and toolbar -->
  </form>
  <nav class="toolbar">
    <a class="tab" href="#home">Home</a>
    <a class="tab" href="#settings">Settings</a>
  </nav>
</body>

<body>
  <form class="tabs">
    <section id="home" class="page">
      <!-- Page content and toolbar -->
    </section>
    <section id="settings" class="page">
      <!-- Page content and toolbar -->
    </section>
    <nav class="toolbar">
      <a class="tab" href="#home">Home</a>
      <a class="tab" href="#settings">Settings</a>
    </nav>
  </form>
</body>

Formulaires

`input`

La classe input permet de styliser de façon uniforme un élément de formulaire avec lequel l'utilisateur du dock pourra intéragir.

Les couleurs, ainsi que le comportement adopté pour chaque état de l'élément, sont basés sur les variables précédemment décrites.

Un élément portant la classe input est traité comme flexible si directement enfant d'un élément portant la classe field.

<input class="input" type="checkbox"/>
<input class="input" type="radio"/>
<input class="input" type="file"/>
<input class="input" type="number"/>
<input class="input" required/>
<input class="input" disabled/>

`label`

La classe label permet de styliser de façon uniforme l'étiquette décrivant un champ de formulaire ou un groupement de champs de formulaires.

L'élément portant la classe label doit être directement enfant de celui portant la classe fields ou field.

Si directement enfant d'un élément portant la classe field, l'élément portant la classe label doit toujours arriver en dernier.

<fieldset class="fields">
  <legend class="label">Fields label</legend>
  <!-- Fields content -->
</fieldset>

<label class="field">
  <!-- Input content -->
  <span class="label">Field label</span>
</label>

`field`

La classe field permet de styliser de façon uniforme un champ de formulaire.

L'élément portant la classe field doit contenir un élément portant la classe input et idéalement un élément portant la classe label comme enfants directs.

La présence d'un élément portant la classe label est obligatoire lorsque l'élément précédent, portant la classe input, est de type checkbox, radio ou file.

<label class="field">
  <input class="input" type="checkbox"/>
  <span class="label">Checkbox</span>
</label>

<label class="field">
  <input class="input" type="radio"/>
  <span class="label">Radio</span>
</label>

<label class="field">
  <input class="input" type="file"/>
  <span class="label">File</span>
</label>

<label class="field">
  <input class="input"/>
  <span class="label">Input</span>
</label>

<label class="field">
  <input class="input"/>
</label>

`fields`

La classe fields permet d'afficher un groupement de champs de formulaire espacés les uns des autres.

L'élément portant la classe fields doit contenir un élément portant la classe label et plusieurs éléments portant la classe field comme enfants directs.

<fieldset class="fields">
  <legend class="label">Fields</legend>
  <label class="field">
    <!-- Field content -->
  </label>
  <label class="field">
    <!-- Field content -->
  </label>
</fieldset>

Événements

`source`

La classe source permet d'afficher la source/provenance d'un événement.

L'élément portant la classe source, optionnel, doit être directement enfant de celui portant la classe event.

<div class="event">
  <span class="source twitch"></span>
</div>

`type`

La classe type permet d'afficher le type d'un événement.

L'élément portant la classe type, optionnel, doit être directement enfant de celui portant la classe event.

Les attributs data-tier et data-amount, tous deux optionnels, permettent d'ajouter des informations supplémentaires au contenu de l'élément.

<div class="event">
  <span class="type subscriber" data-tier="3" data-amount="12">subscriber</span>
</div>

<div class="event">
  <span class="type cheer" data-amount="500">cheer</span>
</div>

`user`

La classe user permet d'afficher le nom de l'utilisateur sur lequel s'applique l'événement.

L'élément portant la classe user, optionnel, doit être directement enfant de celui portant la classe event.

L'attribut data-sender, optionnel, permet de préciser le nom de l'utilisateur à l'origine de l'événement si celui-ci est différent ; par exemple dans le cas d'un abonnement offert.

<div class="event">
  <span class="user" data-sender="TheFrenchBiff">You</span>
</div>

`message`

La classe message permet d'afficher un message lié à un événement.

L'élément portant la classe message, optionnel, doit être directement enfant de celui portant la classe event.

<div class="event">
  <span class="message">Thank you for being an amazing streamer!</span>
</div>

`event`

La classe event permet de styliser de façon uniforme l'affichage d'un événement.

L'attribut data-sender, optionnel, permet de préciser si le nom de l'utilisateur à l'origine de l'événement est différent de celui auquel il s'applique ; par exemple dans le cas d'un abonnement offert.

L'attribut data-message, optionnel, permet d'afficher un éventuel message lié à l'événement de façon plus simple/limitée que par le bias d'un élément enfant portant la classe message.

<div class="event" data-sender="TheFrenchBiff" data-message="Thank you!">
  <!-- Event content -->
</div>

Détails

`details`

La classe details permet de styliser de façon uniforme l'affichage d'un élément HTML details.

<details class="details">
  <summary class="button">Toggle</summary>
  <!-- Content -->
</details>

Framework CSS

Fichier core.css​

Fichier overlay.css​

Variables​

Logos​

Utilitaires​

hidden​

Fichier dock.css​

Variables​

Utilitaires​

padding​

text-left​

text-center​

text-right​

info​

danger​

flexible​

not-flexible​

gap​

double-gap​

no-gap​

Génériques​

row​

col​

box​

Boutons​

button​

Barres d'outils​

toolbar​

Pages​

content​

page​

Onglets​

tab​

tabs​

Formulaires​

input​

label​

field​

fields​

Événements​

source​

type​

user​

message​

event​

Détails​

details​

Fichier core.css

Fichier overlay.css

Variables

Logos

Utilitaires

`hidden`

Fichier dock.css

Variables

Utilitaires

`padding`

`text-left`

`text-center`

`text-right`

`info`

`danger`

`flexible`

`not-flexible`

`gap`

`double-gap`

`no-gap`

Génériques

`row`

`col`

`box`

Boutons

`button`

Barres d'outils

`toolbar`

Pages

`content`

`page`

Onglets

`tab`

`tabs`

Formulaires

`input`

`label`

`field`

`fields`

Événements

`source`

`type`

`user`

`message`

`event`

Détails

`details`