CSS framework

We provide a CSS framework intended to help you in the development of overlays and docks as well as the application of themes on these. Below you will find all the variables and classes exposed, grouped by category.

core.css file

The core.css file contains code whose purpose is to harmonize and reset certain margins and other properties, particularly of a textual nature, in order to obtain a clean basis for any additional code. We therefore recommend to always include this one unless you have complete mastery of what you are doing and for example choose to use a CSS framework different from ours.

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

overlay.css file

The overlay.css file contains variables and classes useful for multiplatform overlay development; notably for the overall layout and display of icons representing the logos of different social networks. In the same way as for the core.css file, we recommend always including this one.

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

Variables

name	value	description
`--borderSize`	`1px`	Border thickness for the `--border` variable
`--borderStyle`	`solid`	Border style for the `--border` variable
`--border`	Border	Groups the `--borderSize` and `--borderStyle` variables
`--borderRadius`	`4px`	Overall rounded corners radius
`--color1`	`white`	Foreground color
`--colorDiscord`	`#7289da`	Discord logo color
`--colorFacebook`	`#005fec`	Facebook logo color
`--colorInstagram`	`#e4405f`	Instagram logo color
`--colorKick`	`#53fc18`	Kick logo color
`--colorTikTok`	`--fontColor`	TikTok logo color
`--colorTrovo`	`#19d66b`	Trovo logo color
`--colorTwitch`	`#a970ff`	Twitch logo color
`--colorX`	`--fontColor`	X logo color
`--colorYouTube`	`red`	YouTube logo color
`--fontColor`	`--color1`	Page text color
`--fontFamily`	`Verdana, Arial, Helvetica, sans-serif`	Default/fallback text font
`--fontFamily1`	`--fontFamily`	Page text font
`--fontSize`	`100%`	Page text size
`--fontWeight`	`400`	Page text weight
`--fontZoom`	`1`	Page text zoom multiplier
`--spacing`	`1rem`	Base spacing value
`--spacing25`	25% of `--spacing`	Alternative spacing value
`--spacing50`	50% of `--spacing`	Alternative spacing value
`--spacing75`	75% of `--spacing`	Alternative spacing value
`--spacing125`	125% of `--spacing`	Alternative spacing value
`--spacing150`	150% of `--spacing`	Alternative spacing value
`--spacing175`	175% of `--spacing`	Alternative spacing value
`--spacing200`	200% of `--spacing`	Alternative spacing value
`--zoom`	`1`	Overall system zoom multiplier
`--platformsFont`	`platforms`	Platforms logos font

info

Always use relative units such as rem and/or the calc function to define the text size and spacing of your overlays and docks; in this way they will be fluid and support by default the zoom functionality that we offer.

Also, the fonts you decide to use should all be assigned to variables named ---fontFamily1, ---fontFamily2, ... This is to allow their customization using the dedicated parameter.

Use the --fontZoom variable to, for example, dymanically vary the text size of your overlays and docks using our JavaScript framework.

On the other hand never vary the value of the --zoom variable because it must be able to be personalized using the dedicated parameter; however, you can change its default value and use it to allow global zooming to be applied to your overlays and docks where you feel this might be useful.

Logos

The logo, discord, facebook, instagram, kick, tiktok, trovo, twitch, youtube and x classes respectively allow displaying our logo and those of Discord, Facebook, Instagram, Kick, TikTok, Trovo, Twitch, YouTube and 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>

Utilities

`hidden`

The hidden class is used to hide (opacity) a given element.

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

dock.css file

The dock.css file contains variables and classes useful for the development of administration docks; notably for the overall layout and display of forms. We recommend including this one in addition to the other two but only in the case of docks displayed in OBS as custom browser docks.

<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

name	value	description
`--buttonActiveScale`	`0.95`	Button scale when clicked
`--color2`	`#635985`	Second plane color
`--color3`	`#3b345b`	Third plane color
`--color4`	`#352d4e`	Fourth plane color
`--color5`	`#18122b`	Background color
`--colorInfo`	`#00c7e6`	Color symbolizing an information
`--colorDanger`	`#ff7452`	Color symbolizing a danger or an error
`--disabledOpacity`	`0.25`	Opacity of a disabled element
`--scheme`	`dark`	Preferred color scheme for the page (documentation)
`--spacing`	`0.75rem`	Base value for spacing
`--shadowSize`	`10px`	Overall size of shadows on the page
`--textAmount`	`' x'`	Text preceding the display of the `amount` value of a given event
`--textSender`	`' → '`	Text indicating that the event is an action by one user on another
`--textTier`	`' '`	Text preceding the display of the `tier` value of a given event

Utilities

`padding`

The padding class is used to add basic inner spacing to a given element.

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

`text-left`

The text-left class is used to left align the text of a given element.

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

`text-center`

The text-center class is used to center align the text of a given element.

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

`text-right`

The text-right class is used to right align the text of a given element.

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

`info`

The info class modifies the background color of a given element to symbolize an information.

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

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

`danger`

The danger class modifies the background color of a given element to symbolize a danger or an error.

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

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

`flexible`

The flexible class allows you to make flexible (takes up all the remaining space) a given element, directly child of an element carrying the col or row class.

In the case of a direct parent carrying the row class, elements carrying the field, label or box class are not affected because they are flexible by default.

<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`

The not-flexible class allows you to cancel the flexibility by default of a given element, directly child of an element carrying the toolbar or row class.

In the case of a direct parent carrying the toolbar class, these are elements carrying the button class.

In the case of a direct parent carrying the row class, these are elements carrying the field, label or box class.

<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`

The gap class allows you to add spacing between elements directly children of a given element, also carrying the content class.

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

`double-gap`

The double-gap class allows you to double the default spacing between elements directly children of a given element, also carrying the row or col class.

<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`

The no-gap class allows you to remove the spacing between elements directly children of a given element, also carrying the row or col class.

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

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

Generics

`row`

The row class allows you to display in line the directly child elements of a given element, by separating them - some of which can be flexible - by default spacing.

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

`col`

The col class allows displaying in column the elements directly children of a given element, by separating them - some of which can be flexible - by default spacing.

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

`box`

The box class allows you to add a box (border and internal spacing by default) around a given content.

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

Buttons

`button`

The button class allows you to uniformly style a button on which the dock user can click.

The colors, as well as behavior adopted for each state of the button, are based on the previously described variables.

A button with the button class is treated as flexible by default if directly child of an element carrying the toolbar class.

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

`toolbar`

The toolbar class allows you to display a toolbar/tabs on which the dock user can click; it may be buttons, form fields, and navigation links.

Toolbars are mainly intended to be used as part of tabs or pages because their position will remain fixed, independent of the scroll applicable to the content .

<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`

The content class allows you to define the scrollable area corresponding to the content inside a page.

The element carrying the content class must be a direct child of the element carrying the page class.

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

`page`

The page class allows you to define a page, that is to say an element having a potentially scrollable content accompanied by a possible toolbar.

The element carrying the page class must be the body element, a direct child of it (to be able to use a specific tag) or be part of our tabs system described below.

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

Tabs

`tab`

The tab class allows you to define a navigation link, directly child of a toolbar, pointing to a given tab.

Our tabs system currently only supports two links for two different tabs.

Navigation must obligatory be done with HTML anchors and one of them must necessarily be #settings; the order of the links does not matter though.

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

`tabs`

The tabs class allows you to display pages as tabs, i.e. only one at a time, with a fixed navigation dedicated to switching from one to the other.

Our tabs system currently only supports two different pages, one of which must have the identifier (id attribute) settings.

The element carrying the tabs class must be the body element or a direct child of it to be able to use a specific tag. Its direct children must carry the page or toolbar class, the element carrying the toolbar class must always come last.

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

Forms

`input`

The input class allows you to uniformly style a form element with which the dock user can interact.

The colors, as well as the behavior adopted for each state of the element, are based on the previously described variables.

An element carrying the input class is treated as flexible if a direct child of an element carrying the field class.

<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`

The label class allows you to uniformly style the label describing a form field or a grouping of form fields.

The element carrying the label class must be a direct child of the element carrying the fields or field class.

If directly child of an element carrying the field class, the element carrying the label class must always come last.

<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`

The field class allows you to uniformly style a form field.

The element carrying the field class must contain an element carrying the input class and ideally an element carrying the label class as direct children.

The presence of an element carrying the label class is mandatory when the sibling element, carrying the input class, is of type checkbox, radio or 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`

The fields class allows you to display a grouping of form fields spaced from each other.

The element carrying the fields class must contain an element carrying the label class and several elements carrying the field class as direct children.

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

Events

`source`

The source class allows you to display the source/originator of an event.

The element carrying the source class, optional, must be a direct child of the one carrying the event class.

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

`type`

The type class allows you to display the type of an event.

The element carrying the type class, optional, must be a direct child of the one carrying the event class.

The data-tier and data-amount attributes, both optional, allow additional information to be added to the element content.

<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`

The user class allows you to display the name of the user to whom the event applies.

The element carrying the user class, optional, must be a direct child of the one carrying the event class.

The optional data-sender attribute allows you to specify the name of the user at the origin of the event if different; for example in the case of a gifted subscription.

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

`message`

The message class allows you to display a message linked to an event.

The element carrying the message class, optional, must be a direct child of the one carrying the event class.

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

`event`

The event class allows you to uniformly style the display of an event.

The optional data-sender attribute allows you to specify whether the name of the user at the origin of the event is different from the one to which it applies; for example in the case of a gifted subscription.

The optional data-message attribute allows you to display a possible message linked to the event in a simpler/more limited way than through a child element carrying the message class.

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

Détails

`details`

The details class allows you to uniformly style the display of any details HTML element.

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

CSS framework

core.css file​

overlay.css file​

Variables​

Logos​

Utilities​

hidden​

dock.css file​

Variables​

Utilities​

padding​

text-left​

text-center​

text-right​

info​

danger​

flexible​

not-flexible​

gap​

double-gap​

no-gap​

Generics​

row​

col​

box​

Buttons​

button​

Toolbar​

toolbar​

Pages​

content​

page​

Tabs​

tab​

tabs​

Forms​

input​

label​

field​

fields​

Events​

source​

type​

user​

message​

event​

Détails​

details​

core.css file

overlay.css file

Variables

Logos

Utilities

`hidden`

dock.css file

Variables

Utilities

`padding`

`text-left`

`text-center`

`text-right`

`info`

`danger`

`flexible`

`not-flexible`

`gap`

`double-gap`

`no-gap`

Generics

`row`

`col`

`box`

Buttons

`button`

Toolbar

`toolbar`

Pages

`content`

`page`

Tabs

`tab`

`tabs`

Forms

`input`

`label`

`field`

`fields`

Events

`source`

`type`

`user`

`message`

`event`

Détails

`details`