Reference Guides
Reference Guides
Breadcrumbs

Category Colors

Intended audience: administrators Developers

AO Platform: 3.5

Overview

This topic describes the style configurations for Category Colors.

Variable Names

--vux-success-700

CSS Variable Name

--vux-success-700

Light
image-20230227-072634.png

Dark
image-20230227-072638.png

Description

Used for success button hover background color

Examples

  1. success button hover background color

  2. Switch handle checked background

--vux-success-600

CSS Variable Name

--vux-success-600

Light
image-20230227-072747.png

Dark
image-20230227-072752.png

Description

Used for view-template-dot background in file manager

Examples

  1. view-template-dot background in file manager

--vux-success-500

CSS Variable Name

--vux-success-500

Light
image-20230227-072920.png

Dark
image-20230227-072925.png

Description

Used for success background color

Examples

  1. Success button background color

    image-20230227-073453.png

  2. Annotations panel approved status

    image-20230227-073131.png

  3. Json diff missing line indication green text color

    image-20230227-073109.png

  4. Webix success message alert text color

    image-20230227-073051.png


--vux-success-300

CSS Variable Name

--vux-success-300

Light
image-20230227-072424.png

Dark
image-20230227-072429.png

Description

Used for success light color

Examples

  1. On/Off toggle switch handle background

    image-20230227-072523.png

  2. Webix success message border

    image-20230227-072541.png

  3. In webvowl label datatype, datatypeproperty fill color

--vux-success-100

CSS Variable Name

--vux-success-100

Light
image-20230227-072028.png

Dark
image-20230227-072031.png

Description

Used for very light success color

Examples

  1. Pivot webix_column webix_max background

  2. Success message background

    image-20230227-072132.png

  3. json difference codeline -> missing background

    image-20230227-072248.png

--vux-error-700

CSS Variable Name

--vux-error-700

Light
image-20230227-071630.png

Dark
image-20230227-071634.png

Description

Used for dark red color

Examples

  1. Notification bell icon badge background

  2. ao-vux-listedit-controls hover color in TOC

    image-20230227-071735.png

  3. webix_error message text color

    image-20230227-071830.png

--vux-error-500

CSS Variable Name

--vux-error-500

Light
image-20230227-071327.png

Dark
image-20230227-071331.png

Description

Used for error background and color

Examples

  1. Uploader progress  error background color

    image-20230227-071447.png

  2. Webix danger button background

    image-20230227-071507.png

  3. Error message input bottom label color

    image-20230227-071527.png

  4. ao-vux-ac-card-status rejected color

    image-20230227-071549.png

--vux-error-300

CSS Variable Name

--vux-error-300

Light
image-20230227-071159.png

Dark
image-20230227-071203.png

Description

Used for invalid input, invalid radio, invalid inp_static, invalid select border color

Examples

  1. invalid input, invalid radio, invalid inp_static, invalid select border color

    image-20230227-071242.png

--vux-error-100

CSS Variable Name

--vux-error-100

Light
image-20230227-070852.png

Dark
image-20230227-070856.png

Description

Used for webix error message background

Examples

  1. .Webix error message background

    image-20230227-071101.png

  2. codeLine type background color

    image-20230227-071039.png

  3. invalid input, invalid radio, invalid inp_static, invalid select background color

    image-20230227-071007.png

--vux-danger-500

CSS Variable Name

--vux-danger-500

Light
image-20230227-070659.png

Dark
image-20230227-070701.png

Description

Used for danger red color

Examples

  1. Invalid multicombo_value, invalid multicombo_tag

  2. webix_remove_upload .cancel_icon hover color

  3. webix_upload_error .error_icon color

  4. invalidStyle color

    image-20230227-070802.png

--vux-danger-300

CSS Variable Name

--vux-danger-300

Light
image-20230227-070401.png

Dark
image-20230227-070402.png

Description

Used for webix error message alert border color

Examples

  1. webix error message alert border color

    image-20230227-070526.png

  2. invalidStyle background color

    image-20230227-070549.png

  3. invalid .webix_inp_bottom_label color

  4. incompleted background in schedular

  5. Danger button active background

  6. webix_warning > div color

--vux-danger-100

CSS Variable Name

--vux-danger-100

Light
image-20230227-070232.png

Dark
image-20230227-070234.png

Description

Used for webix danger button text on hover

Examples

  1. webix danger button text on hover

    image-20230227-070322.png

--vux-loader-700

CSS Variable Name

--vux-loader-700

Light
image-20230227-070035.png

Dark
image-20230227-070041.png

Description

Used for entity Search highlight background

Examples

  1. Entity Search highlight background

  2. TOC results text color

    image-20230227-070126.png

--vux-loader-500

CSS Variable Name

--vux-loader-500

Light
image-20230227-065647.png

Dark
image-20230227-065649.png

Description

Used for ao-vux-annotation-close button icon background color in annotate window.

Examples

  1. ao-vux-annotation-close button icon background color in annotate window.

    image-20230227-065814.png


  2. Annotate window highlight border.

    image-20230227-065848.png

  3. Inprogress background in scheduler

    image-20230227-065931.png

--vux-loader-300

CSS Variable Name

--vux-loader-300

Light
image-20230227-065448.png

Dark
image-20230227-065450.png

Description

Used for webix_badge background color

Examples

  1. In Webix list item for webix_badge background color

  2. Entity-tagger highlight-yellow tag class background color

    image-20230227-065539.png

--vux-loader-100

CSS Variable Name

--vux-loader-100

Light
image-20230227-065220.png

Dark
image-20230227-065221.png

Description

Used for TOC results text background color

Examples

  1. TOC results text background color

    image-20230227-065109.png


  2. Background for pre-annotation-dialog-window

    image-20230227-065134.png

--vux-document-flag-circle

CSS Variable Name

--vux-document-flag-circle

Light
image-20230227-064840.png

Dark
image-20230227-064849.png

Description

Currently not using because of template, style overrides in solution

Examples

  1. .vux_doccontent_content dot background

    image-20230227-064953.png

  2. vux_doccontent_flag_selected_circle background




Contact App Orchid | Disclaimer