@import './variables';

body {
  margin: 0;
  padding: 10px 35px 50px;
  /*margin: 30px;*/
  font-size: 16px;
  line-height: 1.4;
  color: #34495e;
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;

  opacity: 0; // 生产环境中要改为0
}

body.hash-loaded {
  opacity: 1;
}

h1, h2 {
  border-bottom: 1px rgba(52, 73, 94, 0.6) solid;
}

h1 {
  padding-bottom: 8px;
}

h2 {
  padding-bottom: 5px;
}

h1, h2, h3, h4 {
  margin: 25px 0 15px;
}

code {
  border-radius: 2px;
  padding: 2px 4px;
  margin: 0 5px;
  background-color: #f7f7f7;
}

pre {
  font-family: monospace;
  padding: 15px 20px;
  border-radius: 3px;
  background-color: #f7f7f7;
}

pre code {
  margin: 0;
  padding: 0;
}

th, td {
  padding: 5px 15px;
}

th {
  background-color: #f7f7f7;
}

// css 优化沉淀 @[  #wiki渲染器 todo  ]{ihk14kbo_pi5qjshq_h9ewg}@

a {
  color: #37966b;
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms;
}

a[link-tag], a[tag-hash] {
  &:after {
    content: '  ';
    background-repeat: no-repeat;
    background-size: 0.8em 0.8em;
    background-position: center center;
    display: inline-block;
    width: 1em;
    height: 1em;
    position: relative;
    top: 0.2em;
    opacity: 0.5;
  }

  &:hover:after {
    opacity: 1;
  }
}

[link-tag]{
  color: @color-link-color;
}
[link-tag]:after{
  background: url("../images/icon-link.png");
}
[link-tag]:hover{
  color: @color-highlight;
  text-decoration: none;
}
[tag-hash]{
  color: @color-tag-color;
  text-decoration: none;
}
[tag-hash]:after{
  background: url("../images/icon-tag.png");
}
[tag-hash]:hover{
  color: @color-highlight;
  text-decoration: none;
}

a.highlighted {
  color: @color-target-highlight;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 400px;
  max-height: 600px;
}

.file-tag {
  position: fixed;
  bottom: 5px;
  right: 20px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0.8;

  &:before {
    content: "文件标记: ";
  }
}

body.preview-page {
  //zoom: 0.8;

  padding:0;
  margin: 0;
  // hacky地实现zooming
  width: 125vw;
  #content-wrapper {
    box-sizing: border-box;
    padding: 10px 35px 10px;
    transform: scale(0.8);
    transform-origin:top left;
  }

  .file-tag {
    right: 30px;
    bottom: -20px;
  }
}

.preview {
  @height-preview: 45vh;

  .controls {
    position: fixed;
    bottom: 0;

    padding: 5px 15px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    margin: 10px 20px;
    display: inline-block;
    border-radius: 15px;
    opacity: 0.1;

    transition: opacity 200ms, top 300ms, bottom 300ms;

    &:hover {
      opacity: 1;
    }

    .action {
      margin-left: 8px;
      cursor: pointer;

      &:hover {
        color: @color-highlight;
      }
    }
  }

  .preview-content-wrapper {
    position: fixed;
    left: 25px;
    width: ~"calc(100vw - 60px)";
    background: white;

    bottom: -@height-preview;
    height: @height-preview;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);

    transition: bottom 500ms, top 500ms;

    iframe {
      border: 0;
      width: 100%;
      height: ~"45vh";
    }
  }

  // 倒计时中的控制块
  &[data-is-counting=true] {
    &[data-is-shown=false] .controls {
      opacity: 0.8;
    }
  }

  // 显示状态 -
  &[data-is-shown=true] {
    .controls {
      bottom: @height-preview;
      opacity: 0.8;
    }

    .preview-content-wrapper {
      bottom: 0;
    }
  }

  &.top {
    .controls {
      top: 0;
      bottom: auto;
    }

    .preview-content-wrapper {
      top: -@height-preview;
      bottom: auto;
    }

    &[data-is-shown=true] {
      .controls {
        top: @height-preview;
      }

      .preview-content-wrapper {
        top: 0;
      }
    }
  }
}


// 从bootstrap抽取出来

.label-default {
  background-color: #818a91;
}

.label-default[href]:focus, .label-default[href]:hover {
  background-color: #687077;
}

.label-primary {
  background-color: #0275d8;
}

.label-primary[href]:focus, .label-primary[href]:hover {
  background-color: #025aa5;
}

.label-success {
  background-color: #5cb85c;
}

.label-success[href]:focus, .label-success[href]:hover {
  background-color: #449d44;
}

.label-info {
  background-color: #5bc0de;
}

.label-info[href]:focus, .label-info[href]:hover {
  background-color: #31b0d5;
}

.label-warning {
  background-color: #f0ad4e;
}

.label-warning[href]:focus, .label-warning[href]:hover {
  background-color: #ec971f;
}

.label-danger {
  background-color: #d9534f;
}

.label-danger[href]:focus, .label-danger[href]:hover {
  background-color: #c9302c;
}
.label-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem;
}
.label {
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
}