zui/src/less/doc.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// ZUI: article.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2014-2020 cnezsoft.com; Licensed MIT
/// ========================================================================


// DOCUMENT SITE STYLE
// ===================

// mixins

.chapter-accent(@color;
@pale) {
  .chapter-heading {
    color: @color;
    .icon {
      .opacity(.8);
    }
  }
  .card {
    &.choosed {
      border-color: @pale;
      border-color: fade(@color, 60%);
      box-shadow: 0 1px 6px fade(@color, 30%);
      &:before {
        background-color: @color;
      }
    }
  }
  .card-heading {
    > .icon {
      color: @color;
      border-color: @pale;
      &:hover {
        cursor: pointer;
      }
      &.text-icon {
        font-size: 12px;
      }
    }
    &.hover {
      background-color: @pale;
      > .icon {
        background-color: @color;
        border-color: @color;
        color: #fff;
        &:before {
          color: #fff;
        }
      }
    }
    &:hover {
      > h5 > .name {
        color: @color;
      }
    }
    > h5 > .name:hover {
      cursor: pointer;
    }
    > .btn-toggle {
      background-color: @pale;
      color: @color;
      &:hover {
        color: @pale;
        background-color: @color;
        cursor: pointer;
      }
    }
  }
  .card-content {
    > ul {
      > li {
        &:before {
          background-color: @pale;
        }
        &:hover {
          &:before {
            background-color: @color;
          }
          &:after {
            border-color: @color;
          }
        }
        > a[href^='#search/']:before {
          background-color: @pale;
          color: @color;
        }
        &.active > a,
        > a:hover {
          background-color: @pale;
        }
      }
    }
  }
  .color-accent {
    color: @color;
  }
  .card-content > ul > li > a[target="_blank"]:after,
  .card[data-target="external"] > .card-heading > h5 > a:after {
    display: inline-block;
    display: none\0;
    margin-left: 5px;
    .icon-zenicon();
    content: @icon-external-link;
    .opacity(0);
    .scale(.5);
    left: -10px;
    position: relative;
    .transition-fast(transform;
    opacity;
    left);
  }
  .card-content > ul > li > a[target="_blank"]:hover:after,
  .card[data-target="external"] > .card-heading.hover > h5 > a:after {
    left: 0;
    .opacity(1);
    .scale(1);
  }
}

.page-accent(@color;
@pale) {
  #pageHeader {
    > .wrapper > .icon {
      background-color: @color;
      color: #fff;
    }
  }
  #pageContent {
    > section {
      > header:before {
        background-color: @pale;
      }
      &.hover {
        > header {
          &:before {
            background-color: @color;
          }
          &:after {
            border-color: @color;
          }
          > h3 {
            color: @color;
          }
        }
        &:before {
          border-color: @color;
        }
      }
    }
  }
  #pageTogger {
    &:hover {
      border-color: @color;
      &:before,
      &:after {
        background-color: @color;
      }
    }
  }
}

.icon-xuanxuan {display: inline-block!important; width: 24px; height: 24px; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAA2FBMVEUAAAD/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/QIH/////9vn/RIT/8/j/vNP/psT/ocH/Z5v/5u//4uz/3ej/uNH/sMv/qsf/m73/lrr/kLb/h7D/gaz/b6H/+Pv/3+r/3un/0uH/yNr/w9f/dqX/YZf/XJT/TIr/eaf/eKaGVdyFAAAAJ3RSTlMABePE+jMU772tmvd2Khry7N3XyZWBZlEmIQ/o0qSOfIuFQV1YPA7HJZ3+AAAB90lEQVRIx5WV6UKrMBCFJ9Cyldbutbt6lym0WrXu+3av7/9GymASQqDQ71fO5JBtkgE06n3PadmVit1yvH4dCqjODFQwZlXIZ2BiBuYgb3Ru1zCzZmGHFcylcsggRaODW+k0QGHfwAKMfd1f/gurhSVoWWK/DpbC4Tv3MSa8eFgep0zHQXARcuEDMaz96MvFN9eK/zoKXXJVG0LElOtl1HuKSU6j0FLIKV02IRfEB0re45AMRJexK9QL9V6h5IoizzLQBWC2UHfUfYaSM4rcyYDN4A9Kzqn/U+g30o+Y4Ah6CXVPhqeQH3M8wD0m6IGblCfkOFGUmhkX2opekeeW2rfUfkWFNuypgQ25Vut/61XcCtX+JmCKm2AhCW60pwSYZh1I/1rrrUFztxnGMFF0GK98872HTdxClQm4in7VTmmFqWP1lduv54GUxIe6lulzkeknPdNVAEOqRzK8Cf0/HgAlBgD0drmtvaiE1bh6znkPLzILVM4O1Bf3jpKP1IubQYQ1LvumxxYQg7JVQ9R9j9elINDq0vJB1CUPOMzEEpgMBKNOsb8zggQjs3B88kuYt93vMUjjb/llNX9DBlUj7w/XtSCbedYke90h5DJ00m7311/YSt/my3bcg36VQSHWFAkTSnPUpsVAedg8WlcDdsCatyc5y/8Ck4QB40D1b8oAAAAASUVORK5CYII=");}

.icon-10x { font-size: 140px; }

@animation-speed-quickly: .1s;
.transition-quickly() {
  .transition(all @animation-speed-quickly @animation-type);
}

.transition-quickly(@target) {
  .transition(@target @animation-speed-quickly @animation-type);
}

.transition-quickly(@target1;
@target2) {
  .transition(~"@{target1} @{animation-speed-quickly} @{animation-type}, @{target2} @{animation-speed-quickly} @{animation-type}");
}

.transition-quickly(@target1;
@target2;
@target3) {
  .transition(~"@{target1} @{animation-speed-quickly} @{animation-type}, @{target2} @{animation-speed-quickly} @{animation-type}, @{target3} @{animation-speed-quickly} @{animation-type}");
}

.transition-quickly(@target1;
@target2;
@target3;
@target4) {
  .transition(~"@{target1} @{animation-speed-quickly} @{animation-type}, @{target2} @{animation-speed-quickly} @{animation-type}, @{target3} @{animation-speed-quickly} @{animation-type}, @{target4} @{animation-speed-quickly} @{animation-type}");
}

.transition-quickly(@target1;
@target2;
@target3;
@target4;
@target5;
@target6) {
  .transition(~"@{target1} @{animation-speed-quickly} @{animation-type}, @{target2} @{animation-speed-quickly} @{animation-type}, @{target3} @{animation-speed-quickly} @{animation-type}, @{target4} @{animation-speed-quickly} @{animation-type}, @{target5} @{animation-speed-quickly} @{animation-type}, @{target6} @{animation-speed-quickly} @{animation-type}");
}

@media (min-width: 992px) {
  .col-md-d5 {
    width: 20%;
  }
}

.slide-in-up-100 {
  position: relative;
  top: 100px;
  &.in { top: 0; }
}

.slide-in-right-50 {
  position: relative;
  left: 50px;
  &.in { left: 0; }
}

.grow-up-in-height {
  &.show {
    height: 0;
    overflow: hidden;
    &.in { height: auto; }
  }
}

.margin-zero { margin: 0!important; }

// examples
@-webkit-keyframes glow {
  0% {
    -webkit-box-shadow: 0 0 12px rgba(71, 164, 71, 0.1);
    border-color: rgba(71, 164, 71, 0.9);
  }
  100% {
    -webkit-box-shadow: 0 0 18px rgba(26, 128, 26, 0.8), 0 0 12px rgba(71, 164, 71, 0.5);
    border-color: rgba(26, 128, 26, 1.0);
  }
}

.example {
  position: relative;
  padding: 20px;
  margin: 0 0 15px;
  border-style: solid;
  border: 1px solid #ddd;
  outline: none;
  transition: all 0.3s;
}

.example:focus,
.example [contenteditable]:focus {
  outline: none;
  box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.5);
  -webkit-animation-name: glow;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out
}

.example.no-padding { padding: 0; }

.example.borderless { border: none; }

.example > *:last-child {
  margin-bottom: 0;
}

pre {
  margin-bottom: 15px;
  border-radius: 0;
  position: relative;
  border-color: #ddd;
  padding: 10px 20px;
  em {
    display: inline-block;
    font-weight: 700;
  }
  &:hover {
    em {
      background-color: @color-danger-pale;
    }
  }

  > code:before {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 12px;
    line-height: 16px;
    padding: 0 4px;
    display: inline-block;
    transition: opacity .2s;
    color: #fff;
    border-radius: 2px;
    background-color: #bbb;
    background-color: rgba(0,0,0,.15);
    pointer-events: none;
  }

  &:hover > code:before {
    opacity: 0;
  }

  > code.lang-javascript:before,
  > code.lang-js:before {content: 'javascript';}
  > code.lang-html:before {content: 'html';}
  > code.lang-css:before {content: 'css';}
}

pre.linenums { padding: 10px; }

.example + pre,
pre + pre {
  margin: -15px 0 15px;
  border-radius: 0;
  border: 1px solid #DDD;
  border-top: none;
}

.copyable { position: relative; }

.btn-copy-code {
  position: absolute;
  right: 3px;
  top: 3px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  width: 28px;
  height: 28px;
  padding: 3px 0;
  line-height: 20px;
  text-shadow: none;
  opacity: 0;
  > .icon { line-height: 20px; }
  &:hover {
    background-color: @color-back;
    color: @color-secondary;
    border-color: @color-primary;
  }
}

pre:hover > .btn-copy-code,
.copyable:hover > .btn-copy-code,
.copyable.fixed-copy-btn > .btn-copy-code {
  opacity: 1;
}

.nav-examples {
  &.nav-tabs > li > a {
    border-radius: 0
  }
}

.nav-examples + .example {
  border-top-color: transparent;
}

a.avatar {
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  background-color: #e5e5e5;
  border-radius: 4px;
  margin-top: 5px!important;
  color: #aaa!important;
  font-size: 30px;
  line-height: 40px;
}

body > .tooltip {
  z-index: 9999
}

a.avatar > i {
  font-size: 28px
}

a.avatar:hover {
  text-decoration: none
}

.loader {
  color: @color-gray;
  .transition-normal();
  text-align: center;
  padding: 0;
  .opacity(0);
  height: 0;
  overflow: hidden;
  .scale(.5);
  > .icon {
    font-size: 42px;
    display: block;
    height: 50px;
    width: 50px;
    line-height: 50px;
    margin: 0 auto;
  }
  &.loading,
  &.with-error {
    padding: 80px 0;
    .opacity(1);
    height: auto;
    .scale(1);
  }
  &.loading {
    > .error-text {
      display: none;
    }
  }
  &.with-error {
    > .icon-spin {
      -moz-animation: none;
      -o-animation: none;
      -webkit-animation: none;
      animation: none;
      &:before {
        content: @icon-exclamation-sign;
      }
    }
    > .error-text {
      display: inline;
    }
    > .loading-text {
      display: none;
    }
  }
}

.template {
  display: none
}

.path-zui-36 {
  display: inline-block;
  background-color: #fff;
  border-radius: 18px;
  height: 36px;
  width: 36px;
  position: relative;
  overflow: hidden;
  &:before,
  &:after {
    content: ' ';
    display: block;
    position: absolute;
    border: 2px solid @color-primary;
    left: 11px;
    width: 14px;
    height: 4px;
  }
  &:before {
    top: 9px;
    border-bottom: none;
  }
  &:after {
    top: 23px;
    border-top: none;
  }
  .path-1,
  .path-2,
  .path-1:before,
  .path-1:after,
  .path-2:before {
    display: block;
    content: ' ';
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: @color-primary;
  }
  .path-1 {
    left: 15px;
    top: 19px;
  }
  .path-1:before,
  .path-2:before {
    left: -2px;
    top: 2px;
  }
  .path-1:after {
    left: 2px;
    top: -2px;
  }
  .path-2 {
    left: 21px;
    top: 13px;
  }
}

.path-btn {
  border-radius: 0;
  &:focus,
  &:active {
    outline: none;
    background: none;
  }
  &:before,
  &:after,
  > .path-1,
  > .path-1:before,
  > .path-1:after {
    .transition-fast();
    position: absolute;
    content: ' ';
    display: block;
    height: 2px;
    width: 10px;
    border: 2px solid @color-gray;
    border: 2px solid rgba(0, 0, 0, 0.4);
    left: 19px;
    top: 18px;
  }
  &:after {
    top: 26px;
  }
  > .path-1 {
    top: 22px;
    left: 23px;
  }
  > .path-1:before,
  > .path-1:after {
    left: -4px;
    top: -2px;
    width: 6px;
  }
  > .path-1:after {
    top: 2px;
  }
  &:hover {
    background-color: @color-gray-lighter;
    background-color: rgba(0, 0, 0, 0.1);
    &:before,
    &:after,
    > .path-1,
    > .path-1:before,
    > .path-1:after {
      border-color: @color-fore;
      transform: rotate(180deg);
    }
    &:before {
      top: 26px;
    }
    &:after {
      top: 18px;
    }
    > .path-1 {
      left: 15px;
    }
    > .path-1:before {
      top: 2px;
      left: -4px;
    }
    > .path-1:after {
      top: -2px;
      left: -4px;
    }
  }
  &.path-close-btn {
    &:before,
    &:after,
    > .path-1,
    > .path-1:before,
    > .path-1:after {
      border-top: 0;
      border-bottom: 0;
    }
    > .path-1 {
      border-right: 0;
    }
  }
}

// .path-max-btn {
//   &:before, &:after, > .path-1, > .path-1:before, > .path-1:after {
//     height: 6px;
//     width: 6px;
//     left: 12px;
//     top: 18px;
//   }
//   &:before {
//     border-right: 0;
//     border-bottom: 0;
//   }
//   &:after {
//     left: 16px;
//     border-left: 0;
//     border-bottom: 0;
//   }
//   > .path-1 {
//     top: 22px;
//     border-right: 0;
//     border-top: 0;
//   }
//   > .path-1:before{
//     border-top: 0;
//     border-left: 0;
//     top: 0px;
//     left: 2px;
//   }
//   > .path-1:after {
//     width: 10px;
//     height: 10px;
//     left: -2px;
//     top: -4px;
//   }
//   &:hover {
//     &:before, &:after, > .path-1:before, > .path-1 {
//       transform: rotate(0deg);
//     }
//     &:before {
//       top: 16px;
//       left: 10px;
//     }
//     &:after {
//       top: 16px;
//       left: 18px;
//     }
//     > .path-1 {
//       top: 24px;
//       left: 10px;
//     }
//     > .path-1:before {
//       top: 0px;
//       left: 6px;
//     }
//     > .path-1:after {
//       width: 4px;
//       height: 4px;
//       top: -3px;
//       left: 3px;
//     }
//   }
// }
body {
  .transition-fast(background);
}

#header {
  color: #fff;
  margin-bottom: 20px;
  padding-top: 80px;
  .transition-fast(padding;
  height;
  background-color);
  small {
    .opacity(.65);
  }
}

#navDownloadLink {
  visibility: hidden;
}

#navbar {
  > .container {
    position: relative;
  }
  .transition-normal(padding-top);
  padding: 20px 0;
  border-bottom: none;
  &.navbar-inverse {
    background: none;
    .navbar-toggle {
      border: none;
      border-radius: 0;
    }
  }
  .navbar-nav > li > a {
    &:hover,
    &:focus {
      background-color: rgba(0, 0, 0, .2);
    }
    line-height: 20px;
    height: 40px;
    border-radius: 4px;
    > .icon {
      font-size: 18px;
      position: relative;
      top: 2px;
      display: inline-block;
    }
  }
  .navbar-brand {
    position: relative;
    padding-left: 58px;
  }
  .path-zui-36 {
    position: absolute;
    top: 0;
    left: 10px;
  }
  .navbar-collapse {
    &.in,
    &.collapsing {
      #navDownloadLink {
        visibility: visible;
      }
      background-color: #fff;
      margin-top: 10px;
      border: none;
      width: 150px;
      float: right;
      box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

      position: relative;
      overflow: visible;
      &:before {
        content: ' ';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        top: -20px;
        right: 20px;
        border-width: 10px;
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent #fff transparent;
      }
      .navbar-nav > li > a {
        color: @color-fore;
        .opacity(0);
      }
    }
    &.in .navbar-nav > li > a {
      .opacity(1);
    }
  }
}

#compactTogger {
  display: none;
  font-size: 18px;
}

#heading {
  text-align: center;
  position: relative;
  overflow: hidden;
  > h1 {
    font-size: 48px;
    font-weight: normal;
    margin-top: 0;
  }
  > p {
    .opacity(.65);
  }
}

#download {
  > .btn-lg {
    border-color: #e5e5e5;
    border-color: rgba(255, 255, 255, .65);
    margin-bottom: 15px;

    + .btn { margin-left: 10px }

    > .icon {
      position: relative;
      margin-left: 6px;
      margin-right: -3px;
      top: -1px;
    }

    &.btn-white {
      background: #fff;
      color: @color-primary;
      opacity: .9;

      &:hover,
      &:focus,
      &:active {
        opacity: 1;
        color: @color-secondary;
      }
    }
  }
  padding-top: 20px;
  text-align: center;
}

#search {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px 70px;
}

#searchForm {
  position: relative;
  > .icon {
    position: absolute;
    left: 14px;
    top: 14px;
    .opacity(.65);
    display: block;
    width: 16px;
    text-align: center;
    height: 16px;
    color: #fff;
  }
}

#searchInput {
  // .transition-quickly();
  background: none;
  border-radius: 21px;
  padding-left: 40px;
  border: 1px solid #e5e5e5;
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
  .placeholder(#e5e5e5);
  .placeholder(rgba(255, 255, 255, .5));
  &:focus {
    border-color: #fff;
    background-color: rgba(255, 255, 255, .1);
    @shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
    0 0 6px lighten(rgba(0, 0, 0, .275), 20%);
    box-shadow: @shadow;

  }
}

#searchHelpBtn {
  position: absolute;
  right: 4px;
  top: 3px;
  text-align: center;
  border-radius: 20px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  padding: 0;
  color: #fff;
  .opacity(.65);
  outline: none;
  &:hover,
  &:active,
  &:focus {
    background-color: #808080;
    background-color: rgba(0, 0, 0, .5);
  }
  > .icon {
    font-size: 18px;
  }
}

#search.with-query-text #searchHelpBtn {
  > .icon:before {
    content: @icon-remove;
  }
}

#ad {
  transition: opacity .2s;
  padding-bottom: 20px;
  margin-top: -50px;

  > a {
    opacity: .8;
    color: #fff;
    display: block;
    padding: 10px;
    background: rgba(0,0,0,.15);
    border-radius: @border-radius-base;
    font-size: 14px;
    width: 340px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;

    &:after,
    &:before {
      content: ' ';
      position: absolute;
      top: 0;
      bottom: 0;
      transform: skewX(-45deg) translate(-120px,0);
      width: 100px;
      left: 0;
      background-color: rgba(255,255,255,.2);
      opacity: 1;
      transition: transform .3s, opacity .3s;
    }

    &:after {
      top: 20px;
      right: 0;
      transform: none;
      width: auto;
      background-color: rgba(0,0,0,.1);
    }

    &:hover,
    &:focus {
      opacity: 1;
      background: rgba(0,0,0,.2);
      text-decoration: none;
      box-shadow: rgba(0,0,0,.12) 0 1px 6px,rgba(0,0,0,.15) 0 1px 4px;

      &:before {
        opacity: 1;
        transform: skewX(-45deg) translate(360px,0);
      }
    }
  }
}

#xuanxuan {
  position: relative!important;
  padding-left: 33px!important;
  padding-right: 0!important;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+)!important;
  transition: all .3s;

  .icon-xuanxuan {
    display: block!important;
    position: absolute;
    top: 9px;
    left: 10px;
  }

  &:hover {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDAlIiB5MT0iMTAwJSIgeDI9IjAlIiB5Mj0iMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMyMjAwY2YiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzgyMDZmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNDk3MDAwMDAwMDAwMDAwMDUiLz48c3RvcCBzdG9wLWNvbG9yPSIjYWMwMGQ3IiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCN2c2dnKSIgLz48L3N2Zz4=)!important;
    background-color: transparent!important;
  }
}

body.ad-hover.ad-xuanxuan {
  #download .btn-primary,
  #header {
    transition: .5s background-color;
    background-color: rgb(145, 43, 255)!important;
  }
  #download .btn-white {color: rgb(145, 43, 255)!important;}
}

#grid {
  position: relative;
  > .container {
    > .row > .col {
      &.hide {
        display: block;
        width: 0;
        .opacity(0);
        padding: 0;
      }
    }
    > .row + .row {
      padding-top: 10px;
      border-top: 1px solid @color-gray-pale;
    }
  }
  .chapter {
    margin-bottom: 30px;
  }
  .chapter-heading {
    > h4 {
      margin-bottom: 15px;
      > .name {
        cursor: pointer;
        &:after {
          .icon-zenicon();
          display: inline-block;
          display: none\0;
          margin-left: 5px;
          content: @icon-double-angle-right;
          position: relative;
          left: -10px;
          .opacity(0);
          .transition-fast(opacity;
          left);
        }
        &:hover:after {
          left: 0;
          .opacity(1);
        }
      }
    }
  }
  .card {
    background-color: #fff;
    .transition-quickly(border;
    height;
    transform;
    top;
    left;
    opcity);
    display: none;
    margin-bottom: 0;
    border-color: #fff;
    box-shadow: none;
    &.show {
      display: block;
    }
    &.choosed {
      border-color: #808080;
      &:before {
        .transition-quickly(right);
        content: 'Enter';
        display: block;
        position: absolute;
        right: -100%;
        top: 0;
        padding: 3px 8px;
        color: #fff;
        border-radius: 0 3px 0 3px;
      }
    }
    &[data-target="external"].choosed:before {
      content: 'Enter';
    }
    &[data-target=""].choosed:before {
      display: none;
    }
    &:hover,
    &.open {
      border-color: @color-gray-lighter;
    }
    &.open {
      margin-bottom: 5px;
    }

    &.section-new,
    &.section-update {
      > .card-heading:before {
        display: block;
        content: ' ';
        width: 29px;
        height: 9px;
        background: @color-yellow url("data:image/gif;base64,R0lGODlhHQATAIAAAP///////yH5BAEAAAEALAAAAAAdABMAAAJBjI+py+0JTAQ0RPlQnefa3FnT9nnZxUkjiJVky8byTNf2TaOi2qFbFSoJU7oPBAPkUJIqk86jbBUhU6bRZ8JpHwUAOw==") no-repeat 0 -10px;
        position: absolute;
        left: 5px;
        top: 5px;
        box-shadow: 0 0 0 1px #fff;
        border-radius: 2px;
        z-index: 12;
      }
    }
    &.section-new {
      > .card-heading:before {
        width: 18px;
        background-color: @color-red;
        background-position: 0 0;
      }
    }
  }
  .card-heading {
    .transition-quickly(background-color);
    position: relative;
    padding: 8px 8px 8px 50px;
    > .icon {
      .transition-quickly(background-color;
      color);
      border: 1px solid @color-gray-pale;
      background-size: contain;
      background-position: center;
      position: absolute;
      width: 30px;
      height: 30px;
      line-height: 28px;
      border-radius: 16px;
      text-align: center;
      left: 10px;
      top: 5px;
      z-index: 10;
      font-style: normal;
      &.with-img {
        .opacity(.8);
        background-color: transparent!important;
        background-size: 75%;
        background-repeat: no-repeat;
        &:hover {
          .opacity(1);
        }
      }
      &:before {
        position: relative;
      }
    }
    > h5 {
      .transition-quickly(padding;
      color);
      line-height: 15px;
      font-size: 15px;
      margin: 0;
      padding: 5px 0;
      font-weight: normal;
      > a.name {
        color: @color-fore;
      }
    }
    > small {
      font-size: 12px;
      display: none;
      min-height: 18px;
      white-space: normal;
      max-height: 48px;
      position: relative;
    }
    &:hover {
      > .btn-toggle {
        right: 0;
        width: 64px;
      }
    }
    &.hover {
      background-color: @color-gray-pale;
      > .icon {
        background-color: @color-gray;
        color: #fff;
      }
    }
  }
  .card.choosed .card-heading > h5,
  .card.open .card-heading > h5 {
    font-weight: bold;
  }
  .card-content {
    height: 0;
    padding: 0 10px;
    .transition-quickly(padding;
    height);
    overflow: hidden;
    > ul {
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;
      &:before {
        .opacity(0);
        z-index: 5;
        position: absolute;
        display: block;
        content: ' ';
        left: 15px;
        top: -10px;
        bottom: 14px;
        border-left: 1px dotted @color-gray-lighter;
      }
      > li {
        position: relative;
        padding: 0;
        > a {
          color: @color-fore;
          display: block;
          padding: 5px 0 5px 40px;
          border-radius: 4px;
          > .icon {
            display: inline-block;
            width: 20px;
            text-align: center;
          }
          &:hover,
          &:active,
          &:focus {
            text-decoration: none;
          }
          &[href^='#search/']:before {
            .icon-zenicon();
            display: block;
            content: '\e603';
            background-color: @color-gray-lighter;
            border-radius: 12px;
            width: 24px;
            height: 24px;
            left: 3px;
            top: 2px;
            z-index: 100;
            color: @color-gray;
            line-height: 22px;
            text-align: center;
            position: absolute;
          }
        }
        &.active > a,
        > a:hover {
          background-color: @color-gray-pale;
          color: @color-fore;
        }
        &:before {
          .transition-quickly(transform;
          background-color);
          position: absolute;
          display: block;
          content: ' ';
          width: 8px;
          height: 8px;
          border-radius: 4px;
          background-color: @color-gray-lighter;
          left: 12px;
          top: 10px;
          z-index: 12;
        }
        &:after {
          position: absolute;
          display: block;
          content: ' ';
          border-bottom: 1px dotted @color-gray-lighter;
          width: 20px;
          left: 15px;
          top: 14px;
          z-index: 11;
        }
        &:hover,
        &.active {
          &:before {
            .scale(1.25);
          }
        }
      }
      &[data-view="icons"] {
        .clearfix-mixin();
        > li {
          float: left;
          &:before,
          &:after {
            display: none
          }
          > a {
            position: relative;
            text-indent: -999em;
            padding: 5px;
            width: 30px;
            height: 30px;
            overflow: hidden;
            &:hover {
              .scale(2);
              z-index: 1;
            }
            > .icon {
              display: block;
              position: absolute;
              text-indent: 0;
              width: 100%;
              height: 30px;
              line-height: 30px;
              top: 0;
              left: 0;
            }
          }

          &.control-icon-shaped > a {
            width: 60px;
          }
        }
      }
      // &[data-view="grid"] {
      //   .clearfix();
      //   > li {
      //   }
      // }
    }
  }
  .section-search {
    height: 0;
    padding: 0;
    &:before {
      content: "没有找到，请更改关键字重新检索。";
      display: block;
      position: absolute;
      padding: 0 10px;
      top: 0;
      right: 0;
      height: 30px;
      line-height: 30px;
      background-color: @color-red-pale;
      color: @color-red;
    }
  }
  .card.section-preview-show .section-search:before {
    display: none
  }
  .section-preview {
    background-color: @color-gray-pale;
    height: 0;
    padding: 0;
    &.icon-preview {
      > .icons {min-height: 140px;}
      > .icons > .icon {
        display: inline-block;
        margin: 0 15px;
        text-align: center;
        line-height: 1;
      }
      > h3 {
        padding: 0 10px;
      }
      > pre {
        margin-left: 10px;
        max-width: 400px;
      }
    }

    &.show-shaped-icon {
      .icon-10x {font-size: 56px;}
      .icon-5x {font-size: 42px;}
      .icon-2x {font-size: 28px;}
    }
  }

  .card.open {
    .card-heading {
      > .icon:after {
        content: ' ';
        display: block;
        position: absolute;
        border-left: 1px dotted @color-gray-lighter;
        height: 999px;
        left: 18px;
        top: 36px;
      }
      > small {
        max-height: none;
      }
    }
    .card-content {
      padding: 10px;
      height: auto;
      border-top: 1px dashed @color-gray-pale;
      box-shadow: inset 0 10px 64px rgba(0, 0, 0, 0.03);
      &.section-search,
      &.section-preview {
        height: 0;
        padding: 0;
      }
      > ul {
        &:before {
          .opacity(1);
        }
      }
    }
    &.without-topics {
      .card-heading {
        > .icon:after {
          display: none;
        }
      }
      .card-content {
        padding: 0;
        height: 0;
        border-top: none;
      }
    }
  }
  .chapter[data-accent="blue"] {
    .chapter-accent(@color-blue;
    @color-blue-pale);
  }
  .chapter[data-accent="primary"] {
    .chapter-accent(@color-primary;
    @color-pale);
  }
  .chapter[data-accent="yellow"] {
    .chapter-accent(@color-yellow;
    @color-yellow-pale);
  }
  .chapter[data-accent="green"] {
    .chapter-accent(@color-green;
    @color-green-pale);
  }
  .chapter[data-accent="red"] {
    .chapter-accent(@color-red;
    @color-red-pale);
  }
  .chapter[data-accent="brown"] {
    .chapter-accent(@color-brown;
    @color-brown-pale);
  }
  .chapter[data-accent="purple"] {
    .chapter-accent(@color-purple;
    @color-purple-pale);
  }
}

body.input-query-focus {
  #grid .card.choosed:before {
    right: 0;
  }
}

body.query-enabled {
  #grid > .container > .row + .row {
    padding-top: 0;
    border-top: none;
  }
  &[data-query='icons'] {
    #section-control-icons {
      .card-heading > .icon:before {
        content: @icon-search
      }
    }
    #grid .card.open {
      &.section-preview-show .card-content.section-preview,
      .card-content.section-search {
        height: auto;
        padding: 10px;
      }
      &.section-preview-show .section-preview.icon-preview {
        padding: 20px 10px 10px;
      }
    }
  }
}

@media (min-width: 768px) {
  body.query-enabled {
    #grid {
      &[data-show-col='1'] {
        > .container > .row > .col {
          float: none;
          // min-width: 780px;
          width: 100%;
          margin: 0 auto;
          &.hide {
            width: 0;
          }
        }
      }
    }
  }
}

@media (min-width: 992px) {
  body.query-enabled {
    #grid {
      &[data-show-col='1'] {
        > .container > .row > .col {
          float: none;
          max-width: 780px;
          margin: 0 auto;
          &.hide {
            width: 0;
          }
        }
      }
      &[data-show-col='2'] {
        > .container > .row > .col {
          width: 50%;
          &.hide {
            width: 0;
          }
        }
      }
      &[data-show-col='3'] {
        > .container > .row > .col {
          width: 33.333333333333%;
          &.hide {
            width: 0;
          }
        }
      }
      &[data-show-col='4'] {
        > .container > .row > .col {
          width: 25%;
          &.hide {
            width: 0;
          }
        }
      }
    }
  }
}

#page {
  position: fixed;
  background-color: #fff;
  left: 0;
  right: 0;
  bottom: 0;
  top: 60px;
  z-index: 1000;
  display: none;
  overflow-y: auto;
  .loader {
    .transition(none);
  }
}

#pageHeader {
  background-color: @color-gray-pale;
  border-bottom: 1px solid @color-gray-lighter;
  position: relative;
  padding: 0;
  height: 60px;
  > .container {
    position: relative;
    padding: 12px 20px 12px 54px;
    > .icon {
      position: absolute;
      width: 36px;
      height: 36px;
      line-height: 36px;
      border-radius: 18px;
      text-align: center;
      left: 6px;
      top: 12px;
      z-index: 10;
      font-style: normal;
      color: @color-gray;
      background-color: @color-gray-lighter;
    }
    > h2 {
      padding: 10px 0;
      line-height: 16px;
      font-size: 20px;
      margin: 0;
      > a.name {
        color: @color-fore;
        &:hover {
          text-decoration: none;
          color: @color-fore;
          cursor: normal;
        }
      }
    }
  }
  > .path-max-btn {
    right: 48px;
    width: 36px;
  }
}

#pageCloseBtn {
  position: absolute;
  right: 15px;
  top: 5px;
  width: 48px;
  height: 48px;
  border-radius: 4px;
}

#pageReloadBtn {
  position: absolute;
  right: 70px;
  top: 5px;
  width: 48px;
  height: 48px;
  color: @color-gray;
  display: none;

  &:hover {color: @color-fore}
}

#pageBody {
  padding: 15px 0;
  position: absolute;
  top: 60px;
  bottom: 0;
  width: 100%;
  overflow-y: auto;
}

#pageAttrs {
  padding: 0 0 10px 23px;
  // background-color: @color-gray-pale;
  margin: 0 0 20px 21px;
  border-bottom: 4px double @color-gray-pale;
  .badge {
    float: left;
    background-color: @color-gray-pale;
    margin-right: 10px;
    padding: 6px 10px;
    min-width: 40px;
    text-align: center;
    border-radius: @border-radius-base;
    .opacity(.8);
    line-height: 20px;
    .transition-fast();
    &.btn {
      border: none;
    }
    &[data-toggle='dropdown'] {
      position: relative;
      &:before {
        content: ' ';
        display: block;
        position: absolute;
        right: 1px;
        bottom: 1px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 6px 6px;
        border-color: transparent transparent #ccc transparent;
        .transition-fast(border);
        border-bottom-color: rgba(0, 0, 0, 0.15);
      }
      &:hover:before {
        border-bottom-color: rgba(0, 0, 0, 0.35);
      }
    }
    &.pull-right {
      margin-right: 0;
      margin-left: 10px;
    }
    &:hover {
      .opacity(1);
      background-color: @color-gray-lighter;
      text-decoration: none;
    }
    &.badge-zui {
      background-color: @color-pale;
      color: @color-primary;
      &:hover {
        background-color: darken(@color-pale, 5%);
      }
    }
    &.badge-lite {
      background-color: @color-blue-pale;
      color: @color-blue;
      &:hover,
      &:active,
      &:focus {
        background-color: darken(@color-blue-pale, 5%);
      }
    }
    &.badge-lib {
      background-color: @color-green-pale;
      color: @color-green;
      &:hover {
        background-color: darken(@color-green-pale, 5%);
      }
    }
    &.badge-party {
      background-color: @color-red-pale;
      color: @color-red;
      &:hover {
        background-color: darken(@color-red-pale, 5%);
      }
    }
    &.badge-bootstrap {
      background-color: @color-purple-pale;
      color: @color-purple;
      &:hover {
        background-color: darken(@color-purple-pale, 5%);
      }
    }
    &.badge-custom {
      background-color: @color-brown-pale;
      color: @color-brown;
      &:hover {
        background-color: darken(@color-brown-pale, 5%);
      }
    }
    &.badge-code {
      background-color: @color-pale;
      color: @color-primary;
      &:hover {
        background-color: darken(@color-pale, 5%);
        &:before {
          border-bottom-color: @color-primary;
        }
      }
      &[data-type="has-source-bundles"] {
        .badge-code-pkgs {
          display: inline-block;
          margin-left: 8px;
        }
      }
    }
  }
  .dropdown-menu {
    overflow: hidden;
    padding-top: 0;
    > li > a {
      padding-left: 30px;
      padding-right: 10px;
      position: relative;
      &:before {
        position: absolute;
        display: block;
        left: 15px;
        top: 9px;
        border-radius: 4px;
        content: ' ';
        width: 8px;
        height: 8px;
        background: #ddd;
      }
    }
  }
  .dropdown-header {
    color: #999;
    padding-left: 15px;
    padding-right: 15px;
    &.primary-header {
      color: #fff;
      padding-top: 8px;
      padding-bottom: 8px;
      background-color: @color-pale;
      color: @color-primary;
      &[data-type="source"] {
        color: @color-blue;
        // background-color: @color-blue-pale;
      }
      &[data-type="bundles"] {
        color: @color-green;
        // background-color: @color-green-pale;
      }
    }
  }

  @media (max-width: 767px) {
    margin: 0 0 10px 0;
    padding-left: 0;
    padding-bottom: 10px;
    > .pull-right {
      margin: 0 0 5px 5px !important;
    }
    .badge {
      margin-right: 5px;
      margin-left: 0;
      padding: 5px;
      min-width: 30px;
    }
    > .badge {
      margin-bottom: 5px;
    }
  }
}

#pageContent {
  padding-left: 44px;
  position: relative;
  &:before {
    position: absolute;
    content: ' ';
    display: block;
    border-left: 1px dotted @color-gray-lighter;
    left: 20px;
    top: -250px;
    bottom: 0;
  }
  > section {
    position: relative;
    &:before {
      position: absolute;
      content: ' ';
      display: block;
      border-left: 1px dotted transparent;
      left: -24px;
      top: 28px;
      bottom: -25px;
    }
    &:last-child:before {
      bottom: 0;
    }
    > header {
      position: relative;
      padding-top: 20px;
      padding-bottom: 10px;
      > h3 {
        margin: 0;
        display: inline-block;
        cursor: pointer;
        &:before,
        &:after {
          position: absolute;
          content: ' ';
          left: -24px;
          top: 25px;
          .transition-fast(background-color);
        }
        &:before {
          display: none;
          width: 1px;
          height: 7px;
        }
        &:after {
          width: 7px;
          height: 1px;
          top: 28px;
          left: -27px;
        }
      }
      &:before {
        position: absolute;
        content: ' ';
        display: block;
        left: -29px;
        top: 23px;
        width: 11px;
        height: 11px;
        background-color: @color-gray-light;
        border-radius: 5px;
        .transition-fast(background-color);
      }
      &:after {
        position: absolute;
        content: ' ';
        display: block;
        width: 16px;
        border-bottom: 1px dotted @color-gray-lighter;
        left: -18px;
        top: 28px;
      }
    }
    &.hover {
      > header {
        h3 {
          &:before,
          &:after {
            background-color: #fff;
          }
        }
      }
      &.collapsed > header > h3:before {
        display: block;
      }
    }
    > article {
      height: auto;
      .transition-fast(opacity;
      height);
    }
    &.collapsed {
      &:before {
        display: none;
      }
      > article {
        height: 0;
        .opacity(0);
        overflow: hidden;
      }
    }
  }
  > article > .alert,
  > section > article > .alert {
    border: none;
    border-radius: 0;
    code {
      background-color: rgba(255, 255, 255, .2);
      border-color: rgba(0, 0, 0, .1);
    }
  }
}

#pageTogger {
  position: absolute;
  bottom: -36px;
  left: 15px;
  width: 19px;
  height: 19px;
  padding: 0;
  border-radius: 10px;
  background-color: #fff;
  color: @color-gray-light;
  z-index: 10;
  border: 1px solid @color-gray-lighter;
  outline: none;
  &:before,
  &:after {
    .transition-normal(background-color);
    position: absolute;
    display: block;
    content: ' ';
    left: 4px;
    top: 4px;
    background-color: @color-gray-light;
  }
  &:before {
    height: 9px;
    width: 1px;
    left: 8px;
    display: none;
  }
  &:after {
    width: 9px;
    top: 8px;
    height: 1px;
  }

  @media (max-width: 767px) {
    display: none;
  }
}

#page.page-collapsed {
  #pageTogger:before {
    display: block;
  }
}

#page.loading {
  #pageTogger {
    display: none
  }
  #pageContent {
    .opacity(0);
  }
}

body.compact-mode {
  #compactTogger {
    display: inline-block;
    margin-left: 8px;
    .transition-fast(top;
    );
    .opacity(0);
    position: relative;
    top: -60px;
  }
  #heading {
    .transition-fast(height);
  }
  #search {
    .transition-fast(opacity);
    .opacity(0);
    padding: 0;
    position: absolute;
    left: 180px;
    top: 12px;
    z-index: 1050;
    max-width: 500px;
    right: 220px;
  }
  #searchInput {
    border-width: 1px;
    height: 36px;
    font-size: 14px;
  }
  #searchForm {
    .opacity(0);
    .scale(.75);
  }
  #searchForm > .icon {
    top: 10px;
  }
  #searchHelpBtn {
    width: 30px;
    height: 30px;
    line-height: 30px;
    top: 3px;
    right: 3px;
  }
  #header {
    z-index: 1010;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 483px;
  }
  #headContainer > .container {
    position: relative;
  }
  #grid {
    .transition-fast(margin-top);
    margin-top: 503px;
  }
  #ad {
    opacity: 0;
  }
  &.compact-mode-in {
    #navbar {
      padding-top: 10px;
      .navbar-nav > li > a {
        width: 40px;
        padding: 10px;
        text-align: center;
        > span {
          display: none;
        }
      }
      .navbar-collapse {
        &.in,
        &.collapsing {
          .navbar-nav > li > a {
            padding: 10px 15px;
            width: auto;
            text-align: left;
            > span {
              display: inline;
            }
          }
        }
      }
    }
    #navDownloadLink {
      visibility: visible;
    }
    #compactTogger {
      .opacity(1);
      top: 1px;
    }
    @media (min-width: 768px) {
      #langSwitcher > a {
        padding: 10px 0!important;

        [lang="zh-cn"] & {
          width: 50px!important;
        }

        > .icon {display: none}
        > span {
          display: inline-block!important;
          background: #fff;
          color: @color-primary;
          line-height: 20px;
          padding: 0 3px;
          border-radius: 5px;
        }
      }
    }
    #header {
      height: 60px;
      padding: 0;
    }
    #heading {
      .opacity(0);
      height: 0;
    }
    #search {
      .opacity(1);
    }
    #searchForm {
      .opacity(1);
      .scale(1);
    }
    #grid {
      margin-top: 70px;
    }
    #ad {display: none}
  }
}

body.page-show {
  overflow: hidden;
  #header {
    .transition-normal(background-color);
    box-shadow: none!important;
  }
  #compactTogger:before {
    content: '\e60b';
  }
  #page {
    .opacity(0);
    .scale(.8);
    display: block;
  }
  #grid,
  #page {
    .transition-fast(opacity;
    transform;
    top);
  }
  &.page-show-in {
    #page {
      .opacity(1);
      .scale(1);
    }
    #grid {
      .opacity(0);
      .scale(.8);
      top: 100px;
    }
  }
  &[data-page-accent="blue"] {
    .page-accent(@color-blue; @color-blue-pale);
  }
  &[data-page-accent="primary"] {
    .page-accent(@color-primary; @color-pale);
  }
  &[data-page-accent="yellow"] {
    .page-accent(@color-yellow; @color-yellow-pale);
  }
  &[data-page-accent="green"] {
    .page-accent(@color-green; @color-green-pale);
  }
  &[data-page-accent="red"] {
    .page-accent(@color-red; @color-red-pale);
  }
  &[data-page-accent="brown"] {
    .page-accent(@color-brown; @color-brown-pale);
  }
  &[data-page-accent="purple"] {
    .page-accent(@color-purple; @color-purple-pale);
  }
}

@media (max-width: 767px) {
  #navbar .navbar-nav > li > a {border-radius: 0}
  #search {padding: 30px 10px 40px;}
  #ad {
    margin-top: -20px;

    > a {width: 250px;}
  }
  #grid .col {width: 100%}
  #page {
    top: 0;
    z-index: 1015;
  }
  #pageContent {
    padding-left: 0;
    &:before {
      display: none;
    }
  }
  #pageHeader > .container {
    padding-left: 60px;
  }
  #pageHeader > .container > .icon {
    left: 15px;
  }
  #pageContent > section:before {
    display: none;
  }
  #pageContent > section > header {
    &:before,
    &:after {
      display: none;
    }
    > h3 {
      position: relative;
      &:before {
        display: none;
      }
      &:after {
        content: @icon-minus-sign;
        .icon-zenicon();
        left: auto;
        right: -12px;
        top: 1px;
      }
    }
  }
  #pageContent > section.collapsed > header > h3:after {
    content: @icon-plus-sign;
  }
  body.compact-mode {
    #header {
      height: 433px;
    }
    #grid {
      margin-top: 463px;
    }
    #navbar .navbar-brand {
      .zui-version,
      .brand-title {
        display: none
      }
      #compactTogger {
        margin-left: 0;
        left: -12px;
      }
    }
    #search {
      left: 80px;
      right: 60px;
    }
    #searchInput {
      .placeholder(transparent);
    }
  }
  body.page-show {
    #navbar .navbar-toggle {
      margin-right: 0;
    }
  }
  body.input-query-focus.compact-mode {
    #search {
      left: 10px;
      right: 10px;
    }
    #searchInput {
      .placeholder(#e5e5e5);
      .placeholder(rgba(255, 255, 255, .5));
    }
    #navbar .navbar-brand,
    #navbar .navbar-toggle {
      display: none
    }
  }
}

body[data-page="basic-theme"] {
  @color-primary-inverse: contrast(@color-primary, #333, #fff);
  @color-primary-dark: darken(@color-primary, 10%);
  #pageHeader,
  #pageHeader > .container > h2 > a.name {
    background-color: @color-primary;
    color: @color-primary-inverse;
  }
  #pageHeader {
    border-color: @color-primary-dark;
  }
  &.page-show[data-page-accent=primary] #pageHeader > .wrapper > .icon {
    background-color: @color-primary-dark;
  }
  .path-btn {
    &:before,
    &:after,
    > .path-1,
    > .path-1:before,
    > .path-1:after {
      .transition-fast();
      border-color: #ddd;
      border-color: rgba(255, 255, 255, .7);
    }
  }
}

#changeViewWrapper {display: none}

@media (min-width: 1280px) {
  #changeViewWrapper {
    display: block;
    position: fixed;
    top: 14px;
    right: 15px;
    z-index: 1030;
  }

  #changeViewBtn {
    border-color: #fff;
    background-color: rgba(0,0,0, .1);
    border-color: rgba(0,0,0, 0);
    padding: 5px;
    min-width: 32px;

    &:hover,
    &:focus,
    &:active {background-color: rgba(0,0,0, .2);}
  }

  body.view-double.compact-mode-in.page-open {
    #changeViewBtn {color: #666;}
    &[data-page="basic-theme"] {
      #changeViewBtn {color: #fff;}
    }
    #navbar {
      width: 360px;
      left: 0;
      top: 0;
      padding: 10px 0!important;
      margin-bottom: 0;
      .navbar-header {
        float: none;
      }
      .navbar-toggle {
        display: block;
        float: right;
        margin-right: 0;
      }
      .navbar-collapse {
        display: none!important;
        &.in,
        &.collapsing {
          &:before {
            right: 10px;
          }
          > .navbar-right {
            float: none!important;
            margin-right: 0;
          }
          display: block!important;
          width: 140px;
          > .navbar-nav > li {
            float: none;
            > a {
              border-radius: 0;
            }
          }
        }
      }
      #compactTogger,
      .brand-title {display: none}
    }
    #headContainer {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;

      > .container {width: 100%!important}
    }
    #search {
      padding: 0;
      right: 60px;
      width: 120px;
      left: auto;
      transition: width .2s;
    }
    #searchInput::placeholder {
      color: transparent;
      transition: color .2s;
    }
    &.input-query-focus {
      #search {
        width: 240px;
      }
      #navbar .zui-version {display: none}
      #searchInput::placeholder {color: rgba(255, 255, 255, .5)}
    }
    #header {
      position: fixed;
      left: 0;
      top: 0;
      height: 60px;
      width: 360px;
      padding-top: 60px;
    }
    #pageLoader {max-width: 1160px}
    #grid {
      position: fixed;
      padding: 10px 0;
      top: 60px;
      margin-top: 0;
      left: 0;
      bottom: 0;
      width: 360px;
      opacity: 1!important;
      transform: none!important;
      border-right: 1px solid @color-gray-light;
      overflow-y: auto;

      > .container {
        width: 100%!important;

        .row > .col {width: 100%;}
      }

      .chapter {margin-bottom: 10px;}

      .section-preview.icon-preview > .icons > .icon {
        &.icon-10x {font-size: 70px;}
        &.icon-5x {font-size: 42px;}
        &.icon-2x {font-size: 28px;}
      }
    }

    #pageCloseBtn {display: none}
    #pageReloadBtn {right: 15px;}

    #page {
      display: block!important;
      position: fixed;
      left: 360px;
      top: 0;
      right: 0;
      bottom: 0;
    }

    #pageHeader > .container {margin: 0 auto 0 15px;}
    #pageBody > .container {margin: 0 auto 0 10px;}

    > footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 340px;
      background: rgba(255,255,255,.9);

      > .container {width: 100%!important;}

      hr {display: none}
      p {
        margin: 0;
        line-height: 20px;
        height: 20px;
      }
    }
  }
}

@keyframes scale-shape
{
  0%   {opacity: 0; transform: scale(0);}
  20% {opacity: 1; transform: scale(1);}
  100% {opacity: 1; transform: scale(1);}
}

#changeViewModal {
  .modal-dialog {
    max-width: 450px;
    overflow: hidden;
  }
  .modal-body {padding: 0}
  .view-shape {
    position: absolute;
    left: 20px;
    top: 15px;
    width: 120px;
    height: 100px;
    background-color: #fff;
    border: 1px solid @color-gray-light;
  }

  .view-option-single {
    .view-shape {
      &:before,
      &:after {
        display: block;
        content: ' ';
        position: absolute;
        top: 0;
      }

      &:before {
        height: 10px;
        background: @color-gray;
        right: 0;
        left: 0;
      }

      &:after {
        top: 12px;
        background: @color-gray-light;
        bottom: 0;
        right: 10px;
        left: 10px;
      }

      .s-1 {
        position: absolute;
        top: 13px;
        left: 11px;
        right: 11px;
        bottom: 0;
        background: #fafafa;
        z-index: 1;

        &:before,
        &:after {
          display: block;