whmcsCrosterTemplates/assets/less/variables/default.less

// Global variables
// --------------------------------------------------

@brand: cros;// Important for rename branding in CSS classes

@baseFontFamily: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@baseFontSize: 14px;
@baseFontcolor: #2a2e36;
@baseHeadingcolor: @baseFontcolor;
@body-bg: @white;

@themeColor: #0273d4;

@link-color: @themeColor;
@link-hover-color: lighten(@link-color, 10%);


// Typography
@h1-font-size: (@font-size-base * 2.5);

// Brand Colors
// -------------------------
@brand-primary: @themeColor;
@brand-secondary: #DB3F3B;

//@brand-success: @green;
@brand-success: @brand-primary;
@brand-info: @brand-primary;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;

@theme-colors: {
	primary:     @brand-primary;
	secondary:   @brand-secondary;
	success:     @brand-success;
	info:        @brand-info;
	warning:     @brand-warning;
	danger:      @brand-danger;
};

// Default Borders
// -------------------------
@default-border-color: #D5DCE5;
@border-color: @default-border-color;

@input-group-addon-bg: @gray-lighter;
@input-border-color: @default-border-color;
 
@sticker-bg: #fedc45;

@box-shadow: 0px 4px 6px 0px rgba(0, 11, 40, 0.1);
//@box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.12), 0px 8px 32px rgba(0, 0, 0, 0.08);
@box-shadow-hover: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

// Accent Colors
// -------------------------
@white: #FFFFFF;

// Page Wrapper 
// -------------------------
@page-wrapper-bg: @gray-lighter;

// Default Gray
// -------------------------
@gray-darker: #101010;
@gray-dark: lighten(@navTopBg, 4%);
@gray: lighten(#000, 33.5%);
@gray-light: lighten(#000, 60%);
@gray-lighter: #EDF0F5;


@dmb: #1d1d1d;
@dmc: #e0e0e0;
@dmhc: #e0e0e0;
@dmbc: #333333;

// Navigations
// -------------------------

// Top
// -----------
@navTopBg: #101010;
@navBrandBg: lighten(@navTopBg, 4%);
@navTopBorder: darken(@navTopBg, 7%);

@navTopLink: darken(@baseFontcolor, 10%);
@navTopLink-hover: @navTopLink;

@navbarDarklink: @white;
@navbarDarklink-hover: @white;

@breadcrumbBg: @white;


// Sidebar
// -----------
@navSideWidth: 270px;
@sideBar: @gray-lighter;

@navSidebarLink: @baseFontcolor;
@navSidebarLinkHover: @link-hover-color;
@navSidebarLinkBg: @sideBar;
@navSidebarBorder: @default-border-color;

@navSidebarDropdownBg: @themeColor;
@navSidebarDropdownLink: @navbarDarklink;
@navSidebarIconColor: lighten(@baseFontcolor, 7%);

@navHover: lighten(@sideBar, 7%);

//active state
@navSidebarActive: @themeColor;

// Dark & Primary
@DarknavSidebarLink: @navbarDarklink;
@DarknavSidebarLinkHover: @navbarDarklink-hover;
@DarknavSidebarLinkBg: @themeColor;
@DarknavSidebarBorder: @default-border-color;

@DarknavSidebarDropdownBg: lighten(@themeColor, 3%);
@DarknavSidebarDropdownLink: @DarknavSidebarLink;
@DarknavSidebarIconColor: @DarknavSidebarLinkHover;

@DarknavHover: lighten(@themeColor, 7%);

//active state
@DarknavSidebarActive: @white;;


// Badge
// -------------------------
@badge-default:@gray-light;
@badge-primary:@brand-primary;
@badge-secondary:@brand-secondary;
@badge-info:@brand-info;
@badge-success:@brand-success;
@badge-danger:@brand-danger;
@badge-warning:@brand-warning;

@badge-inverse:@gray-dark;
@badge-light:@gray-lighter;


// For FrontEnd (home.css)
// -------------------------
@FooterBlockbg : @white;
@FooterLink: @baseFontcolor;
@FooterHoverLink: @link-hover-color;



//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.

@state-success-text:             #3c763d;
@state-success-bg:               #dff0d8;
@state-success-border:           darken(spin(@state-success-bg, -10), 5%);

@state-info-text:                #31708f;
@state-info-bg:                  #d9edf7;
@state-info-border:              darken(spin(@state-info-bg, -10), 7%);

@state-warning-text:             #8a6d3b;
@state-warning-bg:               #fcf8e3;
@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);

@state-danger-text:              #a94442;
@state-danger-bg:                #f2dede;
@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);



@line-height-computed:    	1.50rem; // ~20px

@border-radius-base:        4px;

//== Panels
//
//##

@panel-bg:                    #fff;
@panel-body-padding:          1rem;
@panel-heading-padding:       0.625rem 0.9375rem;
@panel-footer-padding:        @panel-heading-padding;
@panel-border-radius:         @border-radius-base;

//** Border color for elements within panels
@panel-inner-border:          #ddd;
@panel-footer-bg:             @gray-lighter;

@panel-default-text:          @gray-dark;
@panel-default-border:        @default-border-color;
@panel-default-heading-bg:    @gray-lighter;

@panel-primary-text:          @white;
@panel-primary-border:        @brand-primary;
@panel-primary-heading-bg:    @brand-primary;

@panel-success-text:          @state-success-text;
@panel-success-border:        @state-success-border;
@panel-success-heading-bg:    @state-success-bg;

@panel-info-text:             @state-info-text;
@panel-info-border:           @state-info-border;
@panel-info-heading-bg:       @state-info-bg;

@panel-warning-text:          @state-warning-text;
@panel-warning-border:        @state-warning-border;
@panel-warning-heading-bg:    @state-warning-bg;

@panel-danger-text:           @state-danger-text;
@panel-danger-border:         @state-danger-border;
@panel-danger-heading-bg:     @state-danger-bg;