helpcenter/helpcenter.r7-office.ru/Web/css/base.less

@textColorRed:              #cc3300;
@textColorGreen:            #6b931f;
@linkColor:                 #116d9d;

@defaultWhiteColor:         #fff;

@defaultBgColor:            #fff;
@textColor:                 #333;
@textColorGrayDark:         #83888d;
@textColorGrayLight:        #b2b2b2;
@textColorBlackDark:        #666;
@textColorBlackLight:       #999;

@textColorLinkMain:         #5891d0;

@helpLinkBackgroundColor:   #a9d4ef;

@helpBorderColor:           #d9d9d9;
@helpTableBorderColor:      #d7d8dc;
@helpTableHRColor:          #e4e4e4;

@helpBorderBottomColor:     #d1dce2;
@helpBorderExampleColor:    #e0e0e0;

@helpNoteColor:             #efefef;
@helpNoteTextColor:         #808080;


@buttonTextColor:           #fff;

@formError:                 #bf3703;

@popUpPanelBackground:      #aaa;

@mobileMenuColor:           #f6f6f6;
@mobileDefaultWidth:        100%;

/*@redColor:              #f94a0c;*/
/*@redHoverColor:         #fa6e3d;*/
@redColor:              #ff642e;
@redHoverColor:         #ff7a4b;
@yellowColor:               #fc4;
@greenColor:                #3DB80F;

@lightGrayTextColor:        #666;
@baseBackgroundColor:       #f6f6f6;


.borderRadius (@value: 8px) {
    border-radius: @value;
    -moz-border-radius: @value;
    -webkit-border-radius: @value;
}

.borderRadiusCustomizable (@valueTopLeft: 8px, @valueTopRight: 8px, @valueBottomRight: 8px, @valueBottomLeft: 8px) {
    border-radius: @valueTopLeft @valueTopRight @valueBottomRight @valueBottomLeft;
    -moz-border-radius: @valueTopLeft @valueTopRight @valueBottomRight @valueBottomLeft;
    -webkit-border-radius: @valueTopLeft @valueTopRight @valueBottomRight @valueBottomLeft;
}

.shadow (@radius: 4px, @color: rgba(0, 0, 0, 0.5)) {
    .shadowFullCustomizable(0, 2px, @radius, @color);
}

.shadowFullCustomizable (@byX: 0, @byY: 2px, @radius: 4px, @color: rgba(0, 0, 0, 0.5)) {
    box-shadow: @byX @byY @radius @color;
    -moz-box-shadow: @byX @byY @radius @color;
    -webkit-box-shadow: @byX @byY @radius @color;
}
.shadowFullCustomizableInset(@byX: 0, @byY: 2px, @radius: 4px, @strength: 0, @color: rgba(0, 0, 0, 0.5)) {
   box-shadow:         inset @byX @byY @radius @strength @color;
   -moz-box-shadow:    inset @byX @byY @radius @strength @color;
   -webkit-box-shadow: inset @byX @byY @radius @strength @color;
}

.noShadow() {
    box-shadow: none;
    -moz-box-shadow: 0 none;
    -webkit-box-shadow: 0 none;
}

.boxShadow (@blurRadius: 4px) {
    background: @defaultBgColor;
    border: 1px solid #D1D1D1;
    .shadow(@blurRadius);
}

.linkStyle (@colorLink: #333){
    color:@colorLink;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    text-decoration: none;
}

.textStyle (@colorText: #333, @sizeText: 12px){
    color: @colorText;
    font-size: @sizeText;
}

.resetListStyle (@marginValue: 0, @paddingValue: 0) {
    list-style: none;
    margin: @marginValue;
    padding: @paddingValue;
}

// Gradient
// -------------------------

// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.gradient-horizontal(@start-color: #555, @start-percent: 0%, @end-color: #333, @end-percent: 100%) {
    background-color: @end-color;
    background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
    background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
    background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
}
 
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.gradient-vertical(@start-color: #555, @start-percent: 0%, @end-color: #333, @end-percent: 100%) {
    background-color: @end-color;
    background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
    background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
    background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
}

.bg-vertical-gradient(@start-color, @end-color) {
    .gradient-vertical(@start-color, 0%, @end-color, 100%);
 }

.bg-horizontal-gradient(@start-color, @end-color) {
   .gradient-horizontal(@start-color, 0%, @end-color, 100%);
 }

.bg-gradient-with-image (@img, @img-width, @img-height, @start-color, @end-color) {

    background: url(@img) no-repeat scroll @img-width @img-height, @end-color; /* <20><><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> */
    background: url(@img) no-repeat scroll @img-width @img-height, -moz-linear-gradient(bottom, @start-color, @end-color); /* Firefox 3.6+ */
    background: url(@img) no-repeat scroll @img-width @img-height, -webkit-linear-gradient(bottom, @start-color, @end-color); /* Chrome 10+, Safari 5.1+ */
    background: url(@img) no-repeat scroll @img-width @img-height, -o-linear-gradient(bottom, @start-color, @end-color); /* Opera 11.10+ */
    background: url(@img) no-repeat scroll @img-width @img-height, -ms-linear-gradient(center bottom, @start-color, @end-color); /* IE10 */
    background: url(@img) no-repeat scroll @img-width @img-height, linear-gradient(bottom, @start-color, @end-color); /* CSS3 */
}

.bg-gradient-slider(@start-color, @end-color) {
    background: @end-color; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: -moz-linear-gradient(left,  @end-color 1%, @start-color 50%, @end-color 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,@end-color), color-stop(50%,@start-color), color-stop(100%,@end-color)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  @end-color 1%,@start-color 50%,@end-color 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  @end-color 1%,@start-color 50%,@end-color 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  @end-color 1%,@start-color 50%,@end-color 100%); /* IE10+ */
    background: linear-gradient(to right,  @end-color 1%,@start-color 50%,@end-color 100%); /* W3C */
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); /* IE6-8*/
}

.img-pseudo-base(@top: 0, @left: 0, @height: 16px, @width: 16px) {
    content: " ";
    display: block;
    height: @height;
    position: absolute;
    left: @left;
    top: @top;
    width: @width;
}
.null-sized() {
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    width: 0;
}

.rotate (@deg: 30deg) {
    -ms-transform: rotate(@deg); /* IE 9 */
    -webkit-transform: rotate(@deg); /* Chrome, Safari, Opera */
    transform: rotate(@deg);
}

.customApearance (@value: none){
   -webkit-appearance: @value;
   -moz-appearance:    @value;
   appearance:         @value;
}

/* buttons */
.baseBtn() {
    border: 0 none;
    color: @buttonTextColor;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    padding: 17px 22px;
    text-align: center;
    text-decoration: none !important;
    .borderRadius(3px);
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1em;


    &::-moz-focus-inner {
        outline: none;
        -moz-outline: none;
        border: 0 none;
    }
    &:focus {
        outline: none;
        -moz-outline: none;
        border: 0 none;
    }
}

.InnerPage {
    .main {
        .description {
            .MainHelpCenter {
                li {
                    a.button,
                    a.button:hover,
                    a.button:active,
                    a.button:visited
                    {
                       .baseBtn();
                    }
                }
            }
        }
    }
}
a.button,
a.button:hover,
a.button:active,
a.button:visited
{
   .baseBtn();
}
.button {
    .baseBtn();
    .customApearance(none);

    &:hover, &:active, &:visited {
        .baseBtn();
    }
    &.red {
        background: @redColor;

        &:hover {
            background: @redHoverColor;
        }

        &::-moz-focus-inner {
            background: @redHoverColor;
        }

        &:focus {
            background: @redHoverColor;
        }

        &.disabled, &.disabled:hover {
            background: #fa6e3d;
            cursor: default;

            &::-moz-focus-inner {
                background: #fa6e3d;
            }

            &:focus {
                background: #fa6e3d;
            }
        }
    }
    &.gray {
        background: #444;

        &:hover {
            background: #565656;
        }

        &::-moz-focus-inner {
            background: #4e4e4e;
        }

        &:focus {
            background: #4e4e4e;
        }

        &.disabled, &.disabled:hover {
            background: #666;
            cursor: default;

            &::-moz-focus-inner {
                background: #666;
            }

            &:focus {
                background: #666;
            }
        }
    }
    &.white {
        background: #fff;
        border: 1px solid #B2B2B2 !important;
        color: #666 !important;

        &:hover {
            background: #fff;
			color: #adadad !important;
			border-color: #adadad;
        }

        &::-moz-focus-inner {
            background: #fff;
        }

        &:focus {
            background: #a3a3a3;
        }

    }

}