variable.less 6.08 KB
/**** SIDEBAR  ****/
@sidebar-color-white: #ffffff;
@sidebar-color-user-statut: #616574; 
@sidebar-color-darker: #202226;
@sidebar-color-gray: #4d4d4d;
@sidebar-color-primary: #319db5;
@sidebar-color-dark: #2b2e33;
@sidebar-color-light: #e2e2e2;
@sidebar-width: 240px;
@sidebar-condensed-width: 190px;
@sidebar-collapsed-width: 50px;

/**** TOPBAR ****/
@topbar-height:50px;
@topbar-color-light: #ffffff;
@topbar-bg-color-light: #ffffff;
@topbar-color-gray: #666666;
@topbar-bg-color-gray: #666666; 
@topbar-color-dark: #2b2e33;
@topbar-bg-color-dark: #2b2e33; 

/**** QUICKVIEW SIDEBAR ****/
@quickview-background: #ffffff;
@quickview-notes: #fefaed;
@quickview-color: #526a82;
@quickview-width: 280px;

/**** BOXED LAYOUT ****/
@boxed-layout-bg: #353535; 

/**** MAIN CONTENT ****/
@main-color-white: #ffffff;
@main-bg-color: #ffffff;
@main-color-dark: #5b5b5b;
@main-color-light: #cccccc;

/**** WIDGETS ****/
@weather-color: #ffffff;
@calendar-bg-light: #ffffff;
@calendar-color-light: #ffffff;
@calendar-color-dark: #5a5c5c; 

/**** PAGES ****/
@account-color-light: #ffffff;
@account-color-dark: #1f3649;

@map-vector-height: 460px; 

@helper-color-light: #ededed;
@helper-width: 300px;

@profil-color-light: #ffffff;

@timeline-color-light: #dddddd;
@timeline-color-blue: #319db5;

@pricing-color-light: #ffffff; 
@pricing-color-dark: #464646; 

@mailbox-color-white: #ffffff;
@mailbox-bg-color-white: #ffffff;
@mailbox-border-light: #dfdfdf;
@mailbox-bg-light: #f9f9f9;
@mailbox-color-dark: #7e7e7e;
@mailbox-color-red: #d9534f;

/**** SEARCH ****/
@search-bg-dark: #2B2E33;

/**** BUILDER ****/
@builder-color-light: #ffffff;





/******** UI **********/

/* Main Color */
@default-color:#616C76;
@default:#E0E6EB;
@default-hover:darken(@default, 5%);
@default-active:darken(@default, 10%);
@default-open:darken(@default, 20%);
@default-disabled:darken(@default, 30%);

@primary:#319DB5;
@primary-hover:darken(@primary, 5%);
@primary-active:darken(@primary, 10%);
@primary-open:darken(@primary, 20%);
@primary-disabled:darken(@primary, 30%);

@info:#b066ff;
@info-hover:darken(@info, 5%);
@info-active:darken(@info, 10%);
@info-open:darken(@info, 20%);
@info-disabled:darken(@info, 30%);

@white:#fff;
@white-hover:darken(@white, 5%);
@white-active:darken(@white, 10%);
@white-open:darken(@white, 20%);
@white-disabled:darken(@white, 30%);

@blue:#00A2D9;
@blue-hover:darken(@blue, 5%);
@blue-active:darken(@blue, 10%);
@blue-open:darken(@blue, 20%);
@blue-disabled:darken(@blue, 30%);

@danger:#C75757;
@danger-hover:darken(@danger, 5%);
@danger-active:darken(@danger, 10%);
@danger-open:darken(@danger, 20%);
@danger-disabled:darken(@danger, 30%);

@dark:#353940;
@dark-hover:darken(@dark, 5%);
@dark-active:darken(@dark, 10%);
@dark-open:darken(@dark, 20%);
@dark-disabled:darken(@dark, 30%);

@success:#18A689;
@success-hover:darken(@success, 5%);
@success-active:darken(@success, 10%);
@success-open:darken(@success, 20%);
@success-disabled:darken(@success, 30%);

@warning:#FF9122;
@warning-hover:darken(@warning, 5%);
@warning-active:darken(@warning, 10%);
@warning-open:darken(@warning, 20%);
@warning-disabled:darken(@warning, 30%);

@inverse:#34495e;
@inverse-hover:darken(@inverse, 5%);
@inverse-active:darken(@inverse, 10%);
@inverse-open:darken(@inverse, 20%);
@inverse-disabled:darken(@inverse, 30%);

@purple:#B381F5;

/* Alert & Notification */
@alert-success: #D1EDE8;
@alert-info: #DEEDF2;
@alert-warning: #F3E6D1;
@alert-danger: #FEE0DE;
@alert-dark: #33363C;

/* Popover */
@popover-dark: #2b2e33; 

/* Form */
@form-white: #fff;
@form-gray: #555;
@form-dark: #1b1e25;

/* Select Input */
@select-light: #ecedee;

/* Tabs */
@tab-light: #dfdfdf;
@tab-dark: #373a41; 

/* Table */
@table-success: #C5EADD;
@table-danger: #f2dede;

/* Summernote */
@summernote-white: #ffffff; 
@summernote-dark: #000000; 
@summernote-light: #f5f5f5;



/******* THEMES *******/

// Theme Default 
@tm-default:#2b2e33;
@tm-default-light:#fff;
@tm-default-light-inner:#f2f2f2;
@tm-default-light-hover:#D8DDDE;
@tm-default-darker :darken(@tm-default,8%);

// Theme Primary 
@tm-primary:#319db5;
@tm-primary-light:#dde6e9;
@tm-primary-light-inner:#D1DDE0;
@tm-primary-light-hover:#C4D5D9;
@tm-primary-dark:darken(@tm-primary,24%);
@tm-primary-darker:darken(@tm-primary,28%);
@tm-primary-darker-hover:darken(@tm-primary,31%);

// Theme Red 
@tm-red:#c9625f;
@tm-red-light:#f8f3f1;
@tm-red-light-inner:#E3D9D7;
@tm-red-light-hover:#DCC9C9;
@tm-red-dark: desaturate(darken(@tm-red,40%), 20%);
@tm-red-darker:darken(@tm-red,46%);
@tm-red-darker-hover:darken(@tm-red,53%);

// Theme Green 
@tm-green:#18a689;
@tm-green-light:#f1f8f3;
@tm-green-light-inner:#D7E4D6;
@tm-green-light-hover:#CCDDC8;
@tm-green-dark: desaturate(darken(@tm-green,25%), 20%);
@tm-green-darker:darken(@tm-green,30%);
@tm-green-darker-hover:darken(@tm-green,34%);

// Theme Orange 
@tm-orange:#b66d39;
@tm-orange-light:#f8f4f1;
@tm-orange-light-inner:#E4DDD6;
@tm-orange-light-hover:#DDD0C8;
@tm-orange-dark: desaturate(darken(@tm-orange,25%), 20%);
@tm-orange-darker:darken(@tm-orange,30%);
@tm-orange-darker-hover:darken(@tm-orange,34%);

// Theme Purple 
@tm-purple:#6e62b5;
@tm-purple-light:#f3f2f7;
@tm-purple-light-inner:#DBD6E4;
@tm-purple-light-hover:#CEC9DC;
@tm-purple-dark: #393f51;
@tm-purple-darker:darken(@tm-purple-dark,5%);
@tm-purple-darker-hover:darken(@tm-purple-darker,7%);

// Theme Blue 
@tm-blue:#4a89dc;
@tm-blue-light:#f2f4f7;
@tm-blue-light-inner:#D7DCE3;
@tm-blue-light-hover:#C9CDDC;
@tm-blue-dark: #1E3948;
@tm-blue-darker:darken(@tm-blue-dark,4%);
@tm-blue-darker-hover:darken(@tm-blue-darker,6%);

// Sidebar Colored Global Colors
@tm-topbar-colored-link:#E8E8E8;
@tm-topbar-colored-nav-icons:#DFDFDF;
@tm-topbar-dropdown-link:#666666;
@tm-topbar-colored-user-dropdown:#959fa9;
@tm-topbar-colored-user-dropdown-hover:#b3bac1;

// Sidebar Light Global Colors
@theme-sidebar-light-h4:#414141;
@theme-sidebar-light-title-link:#B9B9B9;
@theme-sidebar-light-color-dark:#393c3e;
@theme-sidebar-light-link-hover:#27292C;

// Background Color
@bacground-clean:#f8f8f8;
@bacground-lighter:#efefef;
@bacground-light-default:#e9e9e9;
@bacground-light-blue:#e2ebef;
@bacground-light-purple:#e9ecf5;
@bacground-light-dark:#dce1e4;