common-variables.less

/* ==========================================================================
   Variables
   ========================================================================== */
@white: #FFFFFF;
@black: #000000;

/*
 * Grayscale colors. 1 is lightest, 10 is darkest.
 */

@grayscale1: #F5F5F5;
@grayscale2: #E5E5E5;
@grayscale3: #D8D8D8;
@grayscale4: #CCCCCC;
@grayscale5: #ADADAD;
@grayscale6: #999999;
@grayscale7: #8C8C8C;
@grayscale8: #696969;
@grayscale9: #404040;
@grayscale10: #333333;

/*
 * Primary color with 3 lightened shades and 3 darkened shades.
 *
 * The variable color1 is used by the DynamicRespondrSkin portlet.
 * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
 *    the value of.
 * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
 *    regex searches by skin manager.
 */
@color1: #4065B0; // medium blue
@color1-light: lighten(@color1, 10%);
@color1-lighter: lighten(@color1, 25%);
@color1-lightest: lighten(@color1, 50%);
@color1-dark: darken(@color1, 10%);
@color1-darker: darken(@color1, 25%);
@color1-darkest: darken(@color1, 50%);

/*
 * Secondary color with 3 lightened shades and 3 darkened shades.
 *
 * The variable color1 is used by the DynamicRespondrSkin portlet.
 * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
 *    the value of.
 * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
 *    regex searches by skin manager.
 */
@color2: #8AA9D8;  // light blue
@color2-light: lighten(@color2, 10%);
@color2-lighter: lighten(@color2, 25%);
@color2-lightest: lighten(@color2, 50%);
@color2-dark: darken(@color2, 10%);
@color2-darker: darken(@color2, 25%);
@color2-darkest: darken(@color2, 50%);

/*
 * Tertiary color with 3 lightened shades and 3 darkened shades.
 *
 * The variable color1 is used by the DynamicRespondrSkin portlet.
 * 1) Do not change the variable name. It is used as a portlet preference variable name that users can override
 *    the value of.
 * 2) The value must be on the same line as the variable name and be terminated with a semicolon due to
 *    regex searches by skin manager.
 */
@color3: #F68923;  // orange
@color3-light: lighten(@color3, 10%);
@color3-lighter: lighten(@color3, 25%);
@color3-lightest: lighten(@color3, 50%);
@color3-dark: darken(@color3, 10%);
@color3-darker: darken(@color3, 25%);
@color3-darkest: darken(@color3, 50%);


@border: 1px solid @grayscale3;

@body-background-color: @white;

/**
 * Link colors
 */
@link-color: #f00;

/**
 * Region Styles
 */
@header-background-color: @color1;
@header-text-color: @white;

@footer-background-color : #404040;
@footer-text-color : #adadad;


/**
 * User bar styles
 */
@portal-global-background-color: @color1;
@portal-global-background-gradient: false;
@portal-global-border-color: @color1-light;

@user-portal-link-color: @link-color;

@btn-skin-color:              @white;
@btn-skin-bg:                 @color2;
@btn-skin-border:             darken(@btn-skin-bg, 5%);

@btn-skin-alt-color:              #grayscale10;
@btn-skin-alt-bg:                 @color3;
@btn-skin-alt-border:             darken(@color3, 5%);
// @user-portal-background-color: @white;


/**
 * Header
 */
@notification-icon-color: @white;
/**
 * Nav
 */
@navbar-background-color: @color1-dark;
@navbar-border-color: transparent;
@navbar-border-size: 0;

@navbar-item-background-color: transparent;
@navbar-item-text-color: @grayscale3;

@navbar-item-font-weight: bold;

@navbar-item-hover-text-color: lighten(@navbar-item-text-color, 50%);
@navbar-item-hover-background-color: @color1-light;

@navbar-item-active-background-color: @color1-darker;
// @navbar-item-active-hover-background-color: darken(@color1, 20%);
@navbar-item-active-hover-background-color: lighten(@navbar-item-active-background-color, 5%);

@navbar-item-active-text-color: @white;
@navbar-item-active-hover-text-color: inherit;

@navbar-controls-color: @grayscale10;
@navbar-controls-hover-color: @white;

@menu-toggle-background-color: @color2;
@menu-toggle-text-color: @white;

@menu-toggle-hover-background-color: @color3;
@menu-toggle-hover-text-color: @white;

/**
 * Search field
 */
@search-button-text-color: @white;
@search-button-background-color: rgb(30, 77, 43);
/**
 * Portlet Chrome Settings
 */
@portlet-border-color: @color1;
@portlet-border-radius: 3px;
@portlet-titlebar-link-color: @color1;
@portlet-titlebar-background-color: @grayscale2;

@portlet-options-link-color: @grayscale10;
@portlet-options-link-hover-color: darken(@portlet-options-link-color, 20%);

/**
 * Detached Header (aka sticky header) styles
 */
@detached-header-link-color: @grayscale4;
@detached-header-backbround-color: @color1;
@detached-header-height: 30px;

/*
 * Custom Mixins
 */
 .border (@color: @grayscale3, @size: 1px) {
        border: @size solid @color;
}

/*
 * Simple float. Pass in the direction; default is left.
 */

.float (@direction: left) {
    float: @direction;
}