%fontOne{
  font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
%fontTwo{
  font-family: Georgia, "Times New Roman", Times, serif;
}

@mixin styleMode($color,$bdColor,$bgColor,$LinkColor,$linkHColor,$linkTColor,$linkTHColor,$linkLColor,$linkLHColor){
  color: $color;
  background-color: $bgColor;
  a{
    color: $LinkColor;
    &:hover{
      color:$linkHColor;
    }
  }
  a.link-title{
    color: $linkTColor;
    &:hover{
      color:$linkTHColor;
    }
  }
  a.link-light{
    color: $linkLColor;
    &:hover{
      color:$linkLHColor;
    }
  }
  hr, footer,.modal-header,.modal-footer,.md-editor, .article-item, .wrap-img img, .comment-head, .comment-text, .comment-item, .reply-list, .reply-item, .signin-form{
    border-color:$bdColor;
  }
  .modal-content{
    background-color: $bgColor;
  }
}
@mixin tagStyle($bdColor,$bgColor,$activeColor,$activeBgColor){
  .sort-tags{
    a{
      border-color: $bdColor;
      background-color: $bgColor;
      &:hover{
        color: $activeColor;
        border-color: $activeBgColor;
        background-color: $activeBgColor;
      }
    }
    .active{
      color: $activeColor;
      border-color: $activeBgColor;
      background-color: $activeBgColor;
    }
  }
}

@mixin markdownStyle($color,$mdLinkColor,$mdLinkHColor,$mdCodeColor,$mdCodeBgColor,$mdQuoteBdColor,$mdQuoteBdLeftColor,$mdQuoteBgColor){
    .markdown-content{
      color: $color;
      blockquote{
        background-color: $mdQuoteBgColor;
        border-color: $mdQuoteBdColor;
        border-left{
          color:$mdQuoteBdLeftColor;
        }
      }
      code{
        background-color: $mdCodeBgColor;
        color: $mdCodeColor;
      }
      pre{
        background-color: $mdCodeBgColor;
        color: $mdCodeColor;
      }
      a{
        color: $mdLinkColor;
        &:hover{
          color: $mdLinkHColor;
        }
      }
      ul{
        list-style-type: disc;
      }
      ol{
        list-style-type: decimal;
      }
    }
    .md-preview{
      @extend .markdown-content;
    }
}

@mixin navbarStyle($bgColor,$navShadowColor,$dropdownBgColor,$avatarAfterColor,$avatarHoverColor){
  @media (max-width: $screen-xs-max){
    .navbar-skin{
      background-color: $bgColor;
      @include box-shadow(0 1px 4px $navShadowColor);
      .dropdown-menu{
        background-color: $dropdownBgColor;
      }
      a.shrink-avatar{
        &:hover{
          img{
            border-color: $avatarHoverColor;
          }
        }
        &:after{
          border-top: 4px solid $avatarAfterColor;
        }
      }
    }
  }
}
@mixin formStyle(){
  $formColor: #999;
  $formBdColor:#2f2f2f;
  $formBgColor: #555;
  .input-group-addon,.form-control{
    color: $formColor;
    background-color: $formBgColor;
    border:1px solid $formBdColor;  
  }
  .input-group-addon{
    border-right: 0;
  }
  .comment-text,textarea{
    background-color: $formBgColor;
  }
}
@mixin tableStyle(){
  $table-bg:                      #555555;
  $table-bg-accent:               #444;
  $table-bg-hover:                #333;
  $table-bg-active:               $table-bg-hover;
  $table-border-color:            black;
  $pagination-bg: #555;
  $pagination-border: #2f2f2f;
  $pagination-active-bg: #337ab7;
  $pagination-active-border: #337ab7;
  .write-blog {
    .select-tags,.select-images,.md-editor>textarea:focus,.md-editor>.md-header{
      background-color: $table-bg;
    }
  }
  table {
    background-color: $table-bg;
  }
  .table-striped {
    > tbody > tr:nth-of-type(odd) {
      background-color: $table-bg-accent;
    }
  }
  .table{
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th,
        > td {
          border-color: $table-border-color;
        }
      }
    }
  }
  .table-bordered, .table-responsive{
    border-color: $table-border-color;
  }
  .table-hover {
    > tbody > tr:hover {
      background-color: $table-bg-hover;
    }
  }

  .pagination {
    > li {
      > a,
      > span {
        background-color: $pagination-bg;
        border-color: $pagination-border;
      }

    }
    > .active > a,
    > .active > span {
      &,
      &:hover,
      &:focus {
        background-color: $pagination-active-bg;
        border-color: $pagination-active-border;
      }
    }
    > .disabled {
      > span,
      > span:hover,
      > span:focus,
      > a,
      > a:hover,
      > a:focus {
        background-color: $pagination-bg;
        border-color: $pagination-border;
      }
    }
  }
}
//sns
@mixin snsIconStyle($marginRight,$size){
    li{
      display: inline-block;
      margin-right: $marginRight;
      a{
        width: $size;
        height: $size;
        display: inline-block;
        @include border-radius(50%);
        line-height: $size;
        font-size: $size * 0.6;
        text-align: center;
        &:hover{
          color:white;
        }
      }
      a.weibo:hover{background-color:$weiboBgColor;}
      a.qq:hover{background-color:$qqBgColor;}
      a.github:hover{background-color:$githubBgColor;}
      a.google:hover{background-color:$googleBgColor;}
      a.wechat:hover{background-color:$wechatBgColor;}
    }
}

html,body,.top-box{
  height: 100%;
}
a{
  text-decoration: none;
  &:hover,&:active,&:focus{
    text-decoration:none;
  }
}
ul,ol{
  list-style-type: none;
}
//表单
input.ng-invalid.ng-dirty {
  color: $bd-warning;
}

input.ng-valid.ng-dirty {
  color: $bd-success;
}

.day-mode{
  @extend %fontOne;
  @include styleMode($baseFontColor,$baseBorderColor,$baseBgColor,$linkBaseColor,$linkBaseHoverColor,$linkTitleColor,$linkTitleHoverColor,$linkLightColor,$linkLightHoverColor);
  @include tagStyle($tagBdColor,$tagBgColor,$tagActiveColor,$tagActiveBgColor);
  @include markdownStyle($mdFontColor,$mdLinkColor,$mdLinkHColor,$mdCodeColor,$mdCodeBgColor,$mdQuoteBdColor,$mdQuoteBdLeftColor,$mdQuoteBgColor);
  @include navbarStyle($baseBgColor,$navShadowColor,white,black,$navHoverBgColor);
  a.weibo,a.qq,a.github,a.google,a.wechat{background-color:$snsBgColor;}
}
.night-mode{
  @extend %fontOne;
  @include styleMode($nightFontColor,$nightBorderColor,$nightBgColor,$nightLinkBaseColor,$nightLinkBaseHoverColor,$nightLinkTitleColor,$nightLinkTitleHoverColor,$nightLinkLightColor,$nightLinkLightHoverColor);
  @include tagStyle($nightTagBdColor,$nightTagBgColor,$nightTagActiveColor,$nightTagActiveBgColor);
  @include markdownStyle($nightMdFontColor,$nightMdLinkColor,$nightMdLinkHColor,$nightMdCodeColor,$nightMdCodeBgColor,$nightMdQuoteBdColor,$nightMdQuoteBdLeftColor,$nightMdQuoteBgColor);
  @include navbarStyle($nightBgColor,$nightNavShadowColor,gray,gray,black);
  @include formStyle();
  a.weibo,a.qq,a.github,a.google,a.wechat{background-color:$nightSnsBgColor;}
  @include tableStyle();
} 

//下拉菜单
.dropdown-menu li>a{
  text-align: left;
}
//共用内容容器
@mixin public-box($mediaWidth:700px){
  width:100%;
  margin: 0 auto;
  padding: 60px 10px 10px;
  @media (min-width: $screen-sm-min){
      width:$mediaWidth;
      padding: 20px 0 10px $navbarSize;
  }
}
//垂直居中容器
.flex-vertical-box{
  @include display-flex;
  @include flex-wrap(wrap);
  @include justify-content(center);
  @include align-items(center);
  height: 100%;
  width:100%;
}


//返回顶部
.gotop{
  position:fixed;right:2%;bottom:5px;
  width:40px;height:40px;background:rgba(0,0,0,0.5);
  text-align: center;
  cursor: pointer;
  @include transition(all .1s);
  i{font-size:2em;color:#fff;margin-top:3px;}
  &:hover{
    background:rgba(0,0,0,0.8);
  }
}

//react add 
.react-alerts .alert{
  padding: 5px;
  font-size: 1.2em;
}
.versions{
  position:fixed;right:2%;top:5px;
}
//browser outdated
.browsehappy {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0 auto;
  padding: 13px 0 12px;
  text-align: center;
  background-color: $bd-danger;
  color: #fff;
  border-bottom: 1px solid #ddd;
  z-index: 1100;
  a{
    color: yellow;
  }
}