// font
@font-bluehost: "fonts/bluehost";
@font: Bluehost, "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif;
@font-code: Consolas, Monaco, courier, monospace;
@font-en: "MV Boli", Bluehost, serif;
// font-size
@font-size: 14px;
// Palette generated by Material Palette - materialpalette.com/indigo/pink
@primaryColor_1: #424242;
@primaryColor_2: #b71c1c;
@darkPrimaryColor: darken(@primaryColor_1, 5%);
@lightPrimaryColor: lighten(@primaryColor_1, 5%);
@textPrimaryColorWhite: #fff;
@textPrimaryColorBlack: #000;
@textCardTitle: #fff;
@textSecondaryColor: lighten(@textPrimaryColorBlack, 40%);
@thumbHoverColor: #000;
@linkHoverColor: lighten(@primaryColor_2, 20%);
@copyrightColor: lighten(@primaryColor_1, 70%);
@dividerColor: lighten(@textPrimaryColorBlack, 60%);
@borderColor: lighten(@textPrimaryColorBlack, 70%);
@backColor: lighten(@textPrimaryColorBlack, 95%);
@alipayColor: #1e88e5;
@weChatColor: #4caf50;
@rewardColor: #d50000;
@githubCardColor: lighten(#424242, 20%);
// tags color
@tag-color-1: #03a9f4;
@tag-color-2: #ff4081;
@tag-color-3: #8bc34a;
@tag-color-4: #ff5722;
@tag-color-5: #ab47bc;
@tag-color-6: #009688;
//share color
@color-weibo: #E6162D;
@color-qq: #3D95D5;
@color-weixin: #2BAD13;
@color-facebook: #4862A3;
@color-twitter: #55ACEE;
@color-google-plus: #db4437;
//layout
@contentWidth: 960px;
@menuWidth: 200px;
@menuPadding: 20px;
@topBarH: 56px;
@headerH: 400px;
@homeW: 700px;
@postW: 70%;
@asideW: 200px;
@postOffsetY: -150px;
@navH: 44px;
@mNavH: 36px;
@searchWidth: 80vw;
@searchHeight: 80vh;
@boxShadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
@imp: !important;

.clearfix:after{
    content: "";
    display: block;
    clear: both;
    visibility: visible;
}

.pull-left{
    float: left;
}

.pull-right{
    float: right;
}

.transition(@s, @dur: ease-in-out) {
    -webkit-transition: @s @dur;
            transition: @s @dur;
}

.transform(@prop) {
    -webkit-transform: @prop;
            transform: @prop;
}

.transform-origin(@h:center, @v:center) {
    -webkit-transform-origin: @h @v;
            transform-origin: @h @v;
}

.boxShadow(@s:.4s) {
    box-shadow: @boxShadow;
    .transition(@s);

    &:hover,
    &:active {
        box-shadow: 0 6px 12px rgba(0, 0, 0, .2), 0 4px 15px rgba(0, 0, 0, .2);
    }
}

.hoverLine(@color) {
    position: relative;
    display: inline-block;

    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        bottom: 0;
        left: 0;
        background-color: @color;
        visibility: hidden;
        .transform(scaleX(0));
        .transition(.4s);
    }

    &:hover {
        text-decoration: none;
    }

    &:hover::after,
    &:active::after {
        visibility: visible;
        .transform(scaleX(1));
    }
}

.tip() {
    position: relative;

    &:before,
    &:after {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        .transition(.3s);
    }

    &:before {
        content: attr(data-title);
        font-size: @font-size - 3;
        color: @textPrimaryColorWhite;
        white-space: nowrap;
        line-height: 24px;
        padding: 0 5px;
        border-radius: 3px;
        background: @primaryColor_2;
    }

    &:after {
        content: "";
        border: 6px solid transparent;
    }

    &:hover {
        &:before,
        &:after {
            visibility: visible;
            opacity: 1;
        }
    }
}

.tip-top() {
    .tip();

    &:before,
    &:after {
        top: -10px;
        right: 50%;
    }

    &:before {
        .transform(translate(50%, -100%));
    }

    &:after {
        border-top-color: @primaryColor_2;
        .transform(translateX(50%));
    }
}
.tip-left() {
    .tip();
    &:before,
    &:after {
        top: 60%;
        .transform(translateY(-50%));
    }
    
    &:before {
        right: 120%;
    }

    &:after {
        right: 60%;
        border-left-color: @primaryColor_2;
    }
}

.card(@radius: 3px) {
    background: #fff;
    border-radius: @radius;
    box-shadow: 0 1px 3px rgba(151, 151, 151, .58);
    .center{
        text-align: center;
    }
    .right{
        text-align: right;
    }
    .center,
    .right{
        p{
            margin-bottom: 0;
        }
    }
}
