Media WebUI

Theme Colors

Theme colors are based on a subset of the Material Design color palette.

primary
secondary
highlight
muted
disabled
transparent
light
default
dark
info-light
info
info-dark
success-light
success
success-dark
warning-light
warning
warning-dark
danger-light
danger
danger-dark
accent-1-light
accent-1
accent-1-dark
accent-2-light
accent-2
accent-2-dark
accent-3-light
accent-3
accent-3-dark
accent-4-light
accent-4
accent-4-dark
accent-5-light
accent-5
accent-5-dark

The above classes all set the background and a complimentary foreground color. However, you can use the background and foreground colors separately by simply prefixing the class name with background- or color- respectively. See the following example.

Example
Lorem ipsum
Lorem ipsum
Lorem ipsum
Markup
<div class="text-sm">
  <div class="flex-row flex-padding-xs">
    <div class="flex-col flex-fit background-accent-1-dark color-info-light">Lorem ipsum</div>
    <div class="flex-col flex-fit background-accent-4-dark color-success-light">Lorem ipsum</div>	
    <div class="flex-col flex-fit background-accent-5-dark color-warning-light">Lorem ipsum</div>
  </div>
</div>

If you are using the full WebUI CSS file, then you are also able to set border, boundary, and outline colors by prefixing with border-, boundary-, or outline-.

Naming convention

To use the event color classes the following format should be followed. [element attribute]-[element event]-[theme color].

For example background-focus-info or border-hover-accent-1

Color Combinations

Color combinations should always be chosen carefully, taking into account people with partial sight and / or color blindness.

Translucency

The translucent-* classes range from a zero alpha transparency to a value of 0.9, and just like the theme colors, they can be used to set background, foreground, border, boundary, or outline. Here is a list of the translucency classes available:

Classes
Alpha Value
translucent, background-translucent, color-translucent, border-translucent, boundary-translucent, outline-translucent
0
translucent-1, background-translucent-1, color-translucent-1, border-translucent, boundary-translucent, outline-translucent
0.1
translucent-2, background-translucent-2, color-translucent-2, border-translucent, boundary-translucent, outline-translucent
0.2
translucent-3, background-translucent-3, color-translucent-3, border-translucent, boundary-translucent, outline-translucent
0.3
translucent-4, background-translucent-4, color-translucent-4, border-translucent, boundary-translucent, outline-translucent
0.4
translucent-5, background-translucent-5, color-translucent-5, border-translucent, boundary-translucent, outline-translucent
0.5
translucent-6, background-translucent-6, color-translucent-6, border-translucent, boundary-translucent, outline-translucent
0.6
translucent-7, background-translucent-7, color-translucent-7, border-translucent, boundary-translucent, outline-translucent
0.7
translucent-8, background-translucent-8, color-translucent-8, border-translucent, boundary-translucent, outline-translucent
0.8
translucent-9, background-translucent-9, color-translucent-9, border-translucent, boundary-translucent, outline-translucent
0.9

Making use of translucency is one easy way to get more color shades.

Example
Pellentesque habitant morbi tristique senectus
Pellentesque habitant morbi tristique senectus
Pellentesque habitant morbi tristique senectus
Pellentesque habitant morbi tristique senectus
Pellentesque habitant morbi tristique senectus
Markup
<div class="container background-accent-1-dark color-light">
  <div class="panel background-translucent">
    Pellentesque habitant morbi tristique senectus
  </div>
  <div class="panel background-translucent-1">
    Pellentesque habitant morbi tristique senectus
  </div>
  <div class="panel background-translucent-2">
    Pellentesque habitant morbi tristique senectus
  </div>
  <div class="panel background-translucent-3">
    Pellentesque habitant morbi tristique senectus
  </div>
  <div class="panel background-translucent-4">
    Pellentesque habitant morbi tristique senectus
  </div>							
</div>

Focus and Hover Events

WebUI has a full range classes supporting focus and hover events for colors. These are used for various types of button by default, but are also there for you to use on other elements.

Supported Elements

Not all HTML elements accept focus events by default. If you need focus events for elements such as divs or spans, then you will need to to add a tabindex attribute to them and set the value to -1.

Example
Markup
<div class="container gap-vertical-md">
  <div class="container">
    <button type="button" class="menu-button-sm menu-button-info rounded-md background-focus-accent-2">Background Focus</button>
  </div>
  <div class="container">
    <input type="text" class="input-lg width-full rounded-md border-focus-accent-2" placeholder="Border Focus" />
  </div>
  <div class="container">
    <button type="button" class="menu-button-sm menu-button-info rounded-md background-hover-accent-2">Background Hover</button>
  </div>
  <div class="container">
    <input type="text" class="input-lg width-full rounded-md border-hover-accent-2" placeholder="Border Hover" />
  </div>
</div>