@require './mode'
@require './code'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'

html, body
  padding 0
  margin 0

body
  font-family Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
  //font-family 'fangsong'
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 15px
  color var(--text-color)
  background-color var(--background-color)

.page, .password-wrapper-in
  overflow-x: hidden
  margin-left $sidebarWidth

.navbar
  position fixed
  z-index 20
  top 0
  left 0
  right 0
  height $navbarHeight
  box-sizing border-box
  box-shadow none

.sidebar-mask
  position fixed
  z-index 9
  top 0
  left 0
  width 100vw
  height 100vh
  display none
  background-color: rgba(0,0,0,.65);

.sidebar
  font-size 16px
  background-color var(--background-color)
  width $sidebarWidth
  position fixed
  z-index 10
  margin 0
  top $navbarHeight
  left 0
  bottom 0
  box-sizing border-box
  border-right 1px solid var(--border-color)
  overflow-y auto

.content__default:not(.custom)
  @extend $wrapper
  a:hover
    text-decoration underline
  p.demo
    padding 1rem 1.5rem
    border 1px solid #ddd
    border-radius 4px
  img
    max-width 100%
  *:first-child
    margin-top 0

.content__default.custom
  padding 0
  margin 0
  img
    max-width 100%
		
.content__default p > img:only-child{
  display: block;
	margin: auto;
}
.abstract
  img
    max-width 100%

a
  font-weight 500
  color $accentColor
  text-decoration none

p a code
  font-weight 400
  color $accentColor

kbd
  background #eee
  border solid 0.15rem #ddd
  border-bottom solid 0.25rem #ddd
  border-radius 0.15rem
  padding 0 0.15em

//blockquote
//  font-size .9rem
//  color #999
//  border-left .25rem solid #999
//  background-color var(--code-color)
//  margin 0.5rem 0
//  padding .25rem 0 .25rem 1rem
//  & > p
//    margin 0
blockquote {
  border-left: 4px solid #42b983;
  padding: 10px 15px;
  color: #777;
  background-color: rgba(66, 185, 131, .1);
  margin 0
}


strong
  font-weight 600
//
//h1, h2, h3, h4, h5, h6
//  font-weight 500
//  line-height 1.25
//  .content__default:not(.custom) > &
//    margin-top (2.1rem - $navbarHeight)
//    padding-top $navbarHeight
//    margin-bottom 1rem
//    &:first-child
//      margin-top -3.5rem
//
//h1
//  display none
//  font-size 1.6rem
//  &.title
//    display block
//
//h2
//  position relative
//  padding-left 0.8rem
//  font-size 1.4rem
//  &::before
//    position: absolute
//    left 0
//    bottom 0
//    display: block
//    height 1.8rem
//    content: ''
//    border-left 5px solid $accentColor
//
//h3
//  font-size 1.2rem

//vue中的标题样式 start

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: bold;
  line-height: 1.4;
  cursor: text;
}

h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
  text-decoration: none;
}

h1 tt,
h1 code {
  font-size: inherit !important;
}

h2 tt,
h2 code {
  font-size: inherit !important;
}

h3 tt,
h3 code {
  font-size: inherit !important;
}

h4 tt,
h4 code {
  font-size: inherit !important;
}

h5 tt,
h5 code {
  font-size: inherit !important;
}

h6 tt,
h6 code {
  font-size: inherit !important;
}

h2 a,
h3 a {
  color: #34495e;
}

h1 {
  padding-bottom: .4rem;
  font-size: 2.2rem;
  line-height: 1.3;
}

h2 {
  font-size: 1.75rem;
  line-height: 1.225;
  margin: 35px 0 15px;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #ddd;
}

h3 {
  font-size: 1.4rem;
  line-height: 1.43;
  margin: 20px 0 7px;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 1rem;
  color: #777;
}

h1 p,
h2 p,
h3 p,
h4 p,
h5 p,
h6 p {
  margin-top: 0;
}
//vue标题样式 end

a.header-anchor
  font-size 0.85em
  float left
  margin-left -0.87em
  padding-right 0.23em
  margin-top 0.125em
  opacity 0
  &:hover
    text-decoration none

code, kbd, .line-number
  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace

p, ul, ol
  line-height 2.2
  word-wrap: break-word

hr
  border 0
  border-top 1px solid var(--border-color)

table
  border-collapse collapse
  margin 1rem 0
  display: block
  overflow-x: auto

tr
  border-top 1px solid var(--border-color)
  &:nth-child(2n)
    background-color var(--code-color)

th, td
  border 1px solid var(--border-color)
  padding .6em 1em

.theme-container
  &.sidebar-open
    .sidebar-mask
      display: block
  &.no-navbar
    .content__default:not(.custom) > h1, h2, h3, h4, h5, h6
        margin-top 1.5rem
        padding-top 0
    .sidebar
      top 0

@media (min-width: ($MQMobile + 1px))
  .theme-container.no-sidebar
    .sidebar
      display none
    .page, .password-wrapper-in
      margin-left 0

@require 'mobile.styl'

.iconfont
  font-family: "iconfont",Ubuntu,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif !important
  font-size: 13px;
  color: var(--text-color-sub);

/************** 滚动条 **************/
::-webkit-scrollbar
  width: 5px;
  height: 5px;

::-webkit-scrollbar-track-piece
  // background-color: rgba(0, 0, 0, 0.2);

::-webkit-scrollbar-thumb:vertical
  height: 5px;
  background-color: $accentColor;

::-webkit-scrollbar-thumb:horizontal
  width: 5px;
  background-color: $accentColor;

/************** 流程图的滚动条 **************/
.vuepress-flowchart
  overflow: auto

/************** SW-Update Popup **************/

.sw-update-popup
  border-radius: $borderRadius!important;
  box-shadow: var(--box-shadow)!important;
  color: var(--text-color)!important;
  background: var(--background-color)!important;
  border: none!important;
  > button
    background: $accentColor;
    border-radius: $borderRadius;
    color: #fff;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0)
    border: none;