styles/xf.variables.less

// -------------------------
//  X-Framework variables
// -------------------------

@app-bg: 						#fff; // Background of whole application
@page-bg: 						@app-bg; // Background on pages
@text-color:                    #333;
@general-border-color:			#e6e5eb; // Used throughout most ui elements

// Globals

@global-border-radius:          0;

// Grays
// -------------------------
@black:                 		#000;
@grayDarker:            		#222;
@grayDark:              		#333;
@gray:                  		#555;
@grayLight:            			#999;
@grayLighter:           		#eee;
@white:                 		#fff;

// Typography
// -------------------------
@sansFontFamily:        		"Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:      	 		Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        		Menlo, Monaco, Consolas, "Courier New", monospace;

@baseFontSize:          		13px;
@baseFontFamily:        		@sansFontFamily;
@baseLineHeight:        		18px;
@altFontFamily:         		@serifFontFamily;

@headingsFontFamily:    		inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight:    		bold;    // instead of browser default, bold
@headingsColor:         		inherit; // empty to use BS default, @textColor

// Form Elements
// -------------------------
@input-bg-color:							#fff;
@input-active-bg-color:						#3498DB;
@input-inactive-bg-color:					#e6e6e6;
@input-text-color: 							#294d8c;
@input-label-color: 						@text-color;
@input-placeholder-color:					#c8c8cc;

@range-thumb-bg-color-start:                #1abc9c;
@range-thumb-bg-color-end:                  #1abc9c;
@range-active-bg-color:                     #1abc9c;
@range-thumb-border-color:                  #fff;
@switch-bg-color:                           #e6e6e6;
@switch-active-bg-color:                    #1abc9c;
@switch-thumb-bg-color-start:               #fff;
@switch-thumb-bg-color-end:                 #fff;

// Buttons
// -------------------------
@button-bg-color-start:                     #1abc9c;
@button-bg-color-end:                       #1abc9c;
@button-border-size: 						3px;
@button-text-color: 						#fff;
@button-text-shadow-color: 					rgba(0,0,0,0);

@button-active-bg-color-start: 				#3498DB;
@button-active-bg-color-end:				#3498DB;
@button-active-text-color:					@button-text-color;
@button-active-text-shadow-color:			@button-text-shadow-color;

@button-alert-bg-color-start: 				#e74c3c;
@button-alert-bg-color-end: 				#e74c3c;
@button-alert-text-color:					@button-text-color;
@button-alert-text-shadow-color: 			@button-text-shadow-color;


// Header
// -------------------------
@header-bg-color-start: 					#474e5d;
@header-bg-color-end: 						#474e5d;
@header-border-color: 						#2d313b;
@header-text-color: 						#fff;
@header-text-shadow-color: 					rgba(255,255,255,0);


// Footer nav
// -------------------------
@nav-bg-color:								#212325;
@nav-item-bg-color-start:					#585f63;
@nav-item-bg-color-end:						#383d40;
@nav-item-border-color:						#9b9fa1;
@nav-item-text-color:						#b3b3b3;
@nav-item-icon-color:						@nav-item-text-color;

@nav-item-active-text-color:				#fff;
@nav-item-active-icon-color:				@nav-item-active-text-color;
@nav-item-active-bg-color-start:			rgba(0,0,0,0);
@nav-item-active-bg-color-end:				rgba(0,0,0,0);
@nav-item-active-border-color:				rgba(0,0,0,0);


// Lists
// -------------------------
@list-bg-color: 							#fff;
@list-icon-color:							#95a5a6;
@list-text-color:							@input-label-color;
@list-border-color:                         @general-border-color;
@list-description-text-color:               #95a5a6;

@list-divider-bg-color-start:               #e6e5eb;
@list-divider-bg-color-end:                 #e6e5eb;
@list-divider-text-color:                   #000;


@list-btn-bg-color-start:			        rgba(0,0,0,0);
@list-btn-bg-color-end:			    	    rgba(0,0,0,.1);

@list-btn-active-bg-color-start:			#1abc9c;
@list-btn-active-bg-color-end:				#1abc9c;
@list-btn-active-text-color:				#fff;
@list-btn-active-text-shadow-color:			none;

@count-bubble-bg-color: 					#e6e5eb;
@count-bubble-text-color:					#000;


// Dialogs
// -------------------------
@dialog-dim-color: 							rgba(0,0,0,.4);
@dialog-box-border-color: 					#fff;
@dialog-box-bg-color-start: 				#fff;
@dialog-box-bg-color-end: 					#fff;
@dialog-box-text-color: 					#555;
@dialog-box-text-shadow-color: 				#fff;

@notification-bg-color: 					rgba(0,0,0,.7);
@notification-text-color: 					#e3e3e3;
@notification-text-shadow-color: 			#fff;

// Tabs
@tabs-bg-color-start:                       #e3e3e3;
@tabs-bg-color-end:                         #e3e3e3;
@tabs-text-color:                           #000;
@tabs-text-shadow:                          none;
@tabs-border-color:                         #e3e3e3;

@tabs-active-bg-color-start:                #e3e3e3;
@tabs-active-bg-color-end:                  #e3e3e3;
@tabs-active-text-color:                    #000;
@tabs-active-border-color:                  #1abc9c;