Customize: Use your own file

Paul de Vries edited this page Jan 3, 2016 · 4 revisions

With version 0.3.0 of TouchUI, you can add your own LESS variables, on this wiki you will find all the variables that are used and their default value.

The philosophy is that we include your file after importing the main LESS file of TouchUI. You've total control and can even overwrite CSS selectors if needed.

Even after upgrading TouchUI, your custom file will not be overwritten, all new updates are still applied, you might need to update obsolete or updated variables. If we change variables, then please see the Release Notes for the changes.


General styling

  1. @main-color
    default: #00B0FF
    This defines the main color that is used as background for the header, dropdowns, buttons, table-headers, links etc.

  2. @main-color-text
    default: contrast(@main-color, @dark-color, @light-color, 51%)
    This defines the main text color that used on the @main-color

  3. @main-color-dark
    default: darken(@main-color, 5%)
    This is a small background alternative used for hover, active and pagination

  4. @main-color-dark-text
    default: contrast(@main-color-dark, @dark-color, @light-color, 60%)
    This defines the text color that is used on top of @main-color-dark

  5. @main-color-darker
    default: darken(@main-color, 15%)
    Another alternative of @main-color that is used for buttons inside the dropdown, @main-color-dark is the default background color of a button, this property is used for active and focus.

  6. @main-background
    default: @dark-color
    This defines the main background color used inside the content of tabs

  7. @text-color
    default: @light-color
    This defines the main text color used inside the content of tabs

Gutter properties

  1. @main-gutter
    default: 30px
    This defines the main distance from the browser window to the start of content

  2. @modal-gutter
    default: 30px
    This defines the distance inside the modal between the outer rims to the start of the content

  3. @terminal-gutter
    default: 10px
    This defines the distance inside the terminal between the outer rims to the start of the content

  4. @dropdown-gutter
    default: 15px
    This defines the distance from the outer rim of the dropdown to start of content

Tables

  1. @table-row-background
    default: mix(@main-background, contrast(@main-background), 80%)

  2. @table-row-header-background
    default: @main-color

  3. @table-row-header-text-color
    default: @main-color-text

Progress

  1. @progress-background
    default: @table-row-background

  2. @progress-active-background
    default: @main-color

Swipe listing (e.g. files)

  1. @swipe-list-background-color
    default: @table-row-background

  2. @swipe-list-background-open-color
    default: mix(@main-color, @dark-color, 60%)

Modal

  1. @modal-background
    default: @light-color

  2. @modal-backdrop
    default: fade(@dark-color, 70%)

  3. @modal-footer-background
    default: fade(contrast(@modal-background), 5%)

  4. @modal-border
    default: fade(contrast(@modal-background), 7%)

  5. @modal-text
    default: @dark-color

Buttons

  1. @btn-background
    default: @light-dark-color

  2. @btn-text
    default: contrast(@light-dark-color, @dark-color, @light-color)

  3. @btn-main-background
    default: @main-color

  4. @btn-main-text
    default: @main-color-text

  5. @btn-danger-background
    default: #D40000

  6. @btn-danger-text
    default: contrast(@btn-danger-background, @dark-color, @light-color);

Dropdown and online/offline indicator

  1. @online-color
    default: #9AFD00

  2. @offline-color
    default: red

  3. @dropdown-color
    default: @main-color;

  4. @dropdown-color-text
    default: @main-color-text

  5. @dropdown-divider-color
    default: @main-color-dark

Terminal

  1. @terminal-color
    default: #0F0

  2. @terminal-background
    default: @main-background

  3. @terminal-text-color
    default: @terminal-color

iScroll scrollbars

  1. @terminal-iScroll-color
    default: fade(@terminal-color, 70%)

  2. @dropdown-iScroll-color
    default: fade(@light-darker-dark-color, 70%)

  3. @main-iScroll-color
    default: fade(contrast(@main-background), 70%)

Inputs

  1. @input-background
    default: contrast(@main-background, @dark-light-color, @light-dark-color, 50%)

  2. @input-text-color
    default: contrast(@input-background)

Addon's

  1. @addon-background
    default: @dark-lighter-color

  2. @addon-text-color
    default: @light-color

Keyboard

  1. @keyboard-background
    default: @dark-light-color

  2. @keyboard-color
    default: contrast(@keyboard-background)

  3. @keyboard-accept
    default: #00C751

  4. @keyboard-remove
    default: #9E0000

General styles used for contrast etc.

  1. @dark-color
    default: black

  2. @dark-light-color
    default: lighten(@dark-color, 20%)

  3. @dark-lighter-color
    default: lighten(@dark-color, 30%)

  4. @neutral-color
    default: #555

  5. @light-color
    default: white

  6. @light-dark-color
    default: darken(@light-color, 2%)

  7. @light-darker-color
    default: darken(@light-color, 20%)

  8. @light-darker-dark-color
    default: darken(@light-color, 50%)

  9. @light-darker-darker-color
    default: darken(@light-color, 55%)