@import "./resout";


.view {
  max-width: 1100px;
  margin: 0 auto;
}

.need-padding {
  padding: 0 $padding;
}

.alert {
  position: relative;
  padding-left: 10px;
  &:after {
    content: '';
    width: 4px;
    height: 14px;
    background-color: #50BFFF;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  margin-bottom: 6px;
  &.warn:after {
    background-color: #E00;
  }
}

.plan {
  margin-bottom: 10px;
}

button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-color: #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 4px;

  &.margin {
    margin-right: 6px;
    margin-bottom: 6px;
  }
}

input[type=text].form-controller,
input[type=number].form-controller,
select.form-controller {
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 30px;
  line-height: 30px;
  outline: none;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}

.form {
  .form-item {
    margin-top: 6px;
  }
  .sub {
    margin-left: 4px;
  }
  .form-controller {
    margin-left: 6px;
  }
  margin-bottom: 20px;
}

.cmd {
  background-color: #F6F8FA;
  padding: 10px;
  border-right: 4px;
  font-size: 14px;
  color: #333;
  margin-bottom: 20px;
}



table.mytable {
  width: 100%;
  font-size: 13px;
  line-height: 1.5;
  background-color: #fff;
  border-collapse: collapse;
  color: #34495e
}

table.mytable th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 400;
  background-color: #f1f4f8
}

table.mytable th:first-child {
  padding-left: 10px
}

table.mytable td {
  padding: 8px;
  border-bottom: 1px solid #f1f4f8
}



table.mytable code {
  display: block;
  font-size: 13px;
  overflow-x: auto;
  font-weight: 400;
  line-height: 22px;
  border-radius: 3px;
  margin-bottom: 25px;
  position: relative;
  word-break: break-all;
  white-space: pre-wrap;
  color: #455a64;
  padding: 18px 10px 18px 20px;
  background-color: #f1f4f8;
  font-family: Source Code Pro,Monaco,Inconsolata,monospace;
}

table.mytable code {
  font-size: 13px;
  padding: 0 8px;
  font-family: inherit;
  word-break: keep-all
}
table.mytable code {
  margin: 2px;
  padding: 2px 7px;
  display: inline
}

.nui-scroll{
  overflow-y: auto;
}
.nui-scroll.small::-webkit-scrollbar {
  width: 4px;//表示垂直滚动条的宽度
}
.nui-scroll::-webkit-scrollbar,
html::-webkit-scrollbar {
  width: 8px;//表示垂直滚动条的宽度
  height: 8px;//表示水平滚动条的高度
}
/*正常情况下滑块的样式*/
.nui-scroll::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.05);
  border-radius: 10px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}
/*鼠标悬浮在该类指向的控件上时滑块的样式*/
.nui-scroll:hover::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb  {
  background-color: rgba(0,0,0,.2);
  border-radius: 10px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}
/*鼠标悬浮在滑块上时滑块的样式*/
.nui-scroll::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,0,0,.4);
  -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}
/*正常时候的主干部分*/
.nui-scroll::-webkit-scrollbar-track,
html::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
  background-color: white;
}
/*鼠标悬浮在滚动条上的主干部分*/
.nui-scroll::-webkit-scrollbar-track:hover,
html::-webkit-scrollbar-track:hover {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);
  background-color: rgba(0,0,0,.01);
}



.loading-bar {
  position: absolute;
  z-index: 90000;
  width: 100%;
  height: 2px;
  left: 0px;
  top: 0px;
  span.press {
    display: block;
    float: left;
    width: 0%;
    height: 100%;
    background-color: #FFCB30;
    transition: all 0.4s cubic-bezier(.55,0,.1,1);
  }
  &.loading span.press{
    width: 10%;
    opacity: 1;
  }
  &.end span.press {
    width: 100%;
    opacity: 1;
  }
  &.hide span.press {
    opacity: 0;
    width: 100%;
  }
  &.normal span.press {
    opacity: 0;
    width: 0%;
  }
}