//=============================//
// 自定义样式 提供可复用的样式  //
//============================//



//======================================//
// 页脚自定义响应式处理
.footerMax560
  @media screen and (max-width: 560px)
    display: none

.footerMax490
  @media screen and (max-width: 490px)
    display: none
    
.footerMax380
  @media screen and (max-width: 380px)
    display: none
//======================================//



//======================================//
// 禁止选中
.not-select,
figcaption,
footer,
section,
details summary,
.new-meta-box,
.prev-next,
.atk-main-editor,
.atk-list-header,
.nav-tabs
  -webkit-touch-callout none
  -webkit-user-select none
  -khtml-user-select none
  -moz-user-select none
  -ms-user-select none
  user-select none
  & p,
  & span
    cursor: $default,default
  &.default-cursor
    cursor: $default,default !important
  & a span
    cursor: $pointer,pointer !important
.allow-select
  -webkit-touch-callout all
  -webkit-user-select all
  -khtml-user-select all
  -moz-user-select all
  -ms-user-select all
  user-select all
//======================================//



//======================================//
// 隐藏文本
// <span class="bb_spoiler" title="xxx">xxxx</span>
.bb_spoiler, .bb_spoiler a, a .bb_spoiler, .bb_spoiler a.new
  cursor: $pointer,pointer
  border-bottom 1px solid
  border-color var(--color-p)
  background-color var(--color-card)
  color var(--color-card)
  text-shadow none
  padding 0 2px
  margin 0 2px
.bb_spoiler:hover, .bb_spoiler:active,
  .bb_spoiler:hover .bb_spoiler, .bb_spoiler:active .bb_spoiler
  color var(--color-p) !important
.bb_spoiler
  &:hover
    opacity 1
    transition-duration 0.3s
//======================================//



//======================================//

// 文章页自定义背景
.cus-article-bkg
  @media screen and (max-width: $device-mobile)
    display: none
  background-size: cover
  background-position: center
  position: fixed
  top: 0
  bottom: 0
  right: 0
  left: 0
  z-index: -10
//======================================//



//======================================//
// 文章页导航栏修饰：剧中、加粗等
.fix-header-title
  margin: 0 auto
  font-size: 1.5rem
  overflow: hidden
  font-weight: 800 !important
  @media screen and (max-width: $device-mobile)
    margin: unset !important
    font-size: 1rem !important
//======================================//


//======================================//
// 自定义的淡入淡出
.content-in
  animation: content-fadeIn
  animation-duration: 1s
.content-out
  animation: content-fadeOut
  animation-duration: 1s
@keyframes content-fadeIn {
  0% {opacity: 0;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes content-fadeOut {
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}
//======================================//


//======================================//
// 插件 侧边栏 Tab 标签支持
.widget 
  div.tabs
    margin 0
    border none
    .nav-tabs
      border-top 1px solid rgba(68,68,68,0.2)
      border-left 1px solid rgba(68,68,68,0.2)
      border-right 1px solid rgba(68,68,68,0.2)
      border-top-left-radius 8px
      border-top-right-radius 8px
      li.tab
        flex 1
        &:last-child
          padding-right 0
    .tab-content
      font-size 14px
      p
        text-align center
        span
          font-weight bold
          padding 0 8px
      .tab-pane-content
        text-align center
        margin-top 0.5rem
    ul, p
      margin 0
//======================================//
// 插件 侧边栏 Artalk
.tab-artalk-line
  ul
    li
      margin-top: 5px;
      display: inline-flex;
      align-items: center;
      width: 100%;
      span
        background-color: #bebebe;
        color: #fff;
        width: 20px;
        min-width: 20px;
        line-height: 20px;
        display: inline-table;
        text-align: center;
        border-radius: 2px;
        margin-right: 5px;
      &:nth-child(-n+3)
        span
          background-color #f00
      a
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
.tab-artalk-comment
  max-height: 340px;
  overflow: auto;
  li
    margin-top: 5px !important;
    display: inline-flex;
    align-items: center;
    width: 100%;
  .avatar
    width: 20%;
    margin-right: 5px;
    img
      width: 36px;
      height: 36px;
      border-radius: 50%;
  .main
    width: 80%
    p
      cursor: pointer;
      font-size: 14px;
      text-align: left !important;
      color: var(--color-p);
      word-break: break-all;
      &:first-child
        font-weight: bold;


//======================================//
// 插件 侧边栏 Next 导航
.nextsite
  font-size: 0.875rem;
  .site-brand-wrapper
    background-color: rgba(0,0,0,0.8);
    box-shadow: 0 2px 15px 0 rgb(0 0 0 / 60%);
    transition: all 0.2s linear;
    position: relative;
    @media screen and (min-width: $device-mobile)
      &:hover
        background: rgba(0,0,0,0.9);
        border-radius: 0 0 70px 70px;
        box-shadow: 0 8px 20px -3px rgb(0 0 0 / 60%);
    .site-meta 
      text-align: center;
      font-size: 1em;
      line-height: 2;
      min-height: 100%;
      transition: padding .2s ease-in-out;
      padding: 20px 0;
      .brand
        display: inline-block;
      .site-title
        line-height: 1.5;
        color: #f9a972;
        font-size: 1.8em;
        text-shadow: 0 1px 4px #fff;
        margin: .67em 0;
        display: inline-block;
      .site-subtitle
        font-size: .85rem;
        color: var(--color-meta);
    .site-nav-toggle
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: none;
      position: absolute;
      @media screen and (max-width: $device-mobile)
        display: block
      button
        margin-top: 2px;
        padding: 9px 10px;
        background: transparent;
        border: none;
        .btn-bar
          display: block;
          width: 22px;
          height: 2px;
          background: #555;
          border-radius: 1px;
          background-color: #fff;
        .btn-bar+.btn-bar
          margin-top: 4px;
  .site-nav
    @media screen and (max-width: $device-mobile)
      display: none
      animation: header-effect 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)
    @media screen and (min-width: $device-mobile)
      display: block !important
    margin-top: 15px;
    margin-bottom: 10px;
    padding-left: 5px;
    .next-main
      .menu-item-active
          a
            border-radius: 50px 0 0 50px;
            border-color: transparent;
            box-shadow: 0 4px 20px -4px #00000040;
            &:after
              content: " ";
              position: absolute;
              top: 50%;
              margin-top: -3px;
              right: 15px;
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background-color: #f9a972;
      .next-main-item
        &:hover
          a
            border-radius: 50px 0 0 50px;
            border-color: transparent;
            box-shadow: 0 4px 20px -4px #00000040;
            color: #f9a972;
        a
          display: block;
          color: var(--color-list);
          padding: 5px 10px;
          position: relative;
        .menu-item-icon
          margin-right: 8px;

//======================================//
// 插件 侧边栏 Next 身份介绍
.nextblogger
  padding: 20px 10px 10px;
  .site-author-image
    display: block;
    margin: 0 auto;
    padding: 2px;
    max-width: 120px;
    height: auto;
    border: 1px solid #eee;
    opacity: 1;
    border-radius: 100%;
  .site-author-box
    margin-top: 15px;
    text-align: center;
    .site-author-name
      font-weight: 600;
      font-size: 1rem;
      color: var(--color-text);
      margin: 0;
    .site-author-description
      color: var(--color-list);
      margin-top: 2px;
      text-align: center;
      font-size: 13px;
  .links-of-author
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    a
      color: var(--color-list);
      &:hover
        color: #f9a972;
  .links-of-author-item
    margin: 0 4px;
    font-size: 1.05rem;
    color: var(--text-color);

//HTTP 451 错误
.note.quote.cus451:after
  @media screen and (min-width: 900px)
    background: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjU2MzYxNjY1MjQ2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE2NTgxIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTkwMi4xIDMxOC43M0wxMTMuNzUgODc4Ljc5Yy05IDYuNC0xMS4xMiAxOC44OC00LjcyIDI3Ljg5IDMuOSA1LjQ5IDEwLjA2IDguNDIgMTYuMzIgOC40MiA0LjAxIDAgOC4wNS0xLjIgMTEuNTctMy43bDc4OC4zNS01NjAuMDZjOS02LjQgMTEuMTItMTguODggNC43Mi0yNy44OXMtMTguODktMTEuMTItMjcuODktNC43MnpNMTEwLjMyIDU4NC4zNWwxMjEuNDQgMTYxLjU0IDMyLjYyLTIzLjE3LTEyMi4yNy0xNjIuNjRjLTAuMTMtMC4xNy0wLjI2LTAuMzMtMC4zOS0wLjUtMTQuNzItMTguMzQtMTEuNzgtNDUuMjQgNi41Ni01OS45NiA4Ljg4LTcuMTMgMjAuMDEtMTAuMzggMzEuMzQtOS4xNCAxMS4xOSAxLjIzIDIxLjI1IDYuNjggMjguMzYgMTUuMzhsODQuOTEgMTE2LjA4YTE5Ljk5OCAxOS45OTggMCAwIDAgMjIuMzUgNy4yIDIwLjAxIDIwLjAxIDAgMCAwIDEzLjc5LTE5LjAxVjIyNi43OWMwLTIzLjUyIDE5LjEzLTQyLjY1IDQyLjY1LTQyLjY1czQyLjY1IDE5LjEzIDQyLjY1IDQyLjY1djMxNy41MmMwIDExLjA1IDguOTUgMjAgMjAgMjBzMjAtOC45NSAyMC0yMFYxMjQuODJjMC0yMy41MiAxOS4xMy00Mi42NSA0Mi42NS00Mi42NXM0Mi42NSAxOS4xMyA0Mi42NSA0Mi42NVY1MjcuMTZsNDAtMjguNDJWMjI2Ljc5YzAtMjMuNTIgMTkuMTMtNDIuNjUgNDIuNjUtNDIuNjVzNDIuNjUgMTkuMTMgNDIuNjUgNDIuNjV2MjExLjM0bDQwLTI4LjQydi0xNS45NGMwLTIzLjUyIDE5LjEzLTQyLjY1IDQyLjY1LTQyLjY1IDEwLjA3IDAgMTkuMzIgMy41MSAyNi42MyA5LjM3bDMzLjI0LTIzLjYxYy0xNS4wNy0xNS44NS0zNi4zMi0yNS43Ni01OS44Ny0yNS43Ni0xNS41OSAwLTMwLjE5IDQuMzQtNDIuNjUgMTEuODh2LTk2LjIxYzAtNDUuNTctMzcuMDgtODIuNjUtODIuNjUtODIuNjUtMTUuNTkgMC0zMC4xOSA0LjM0LTQyLjY1IDExLjg4di0zMS4yYzAtNDUuNTctMzcuMDgtODIuNjUtODIuNjUtODIuNjUtNDUuNTcgMC04Mi42NSAzNy4wOC04Mi42NSA4Mi42NXYzMS4yYy0xMi40Ni03LjU0LTI3LjA2LTExLjg4LTQyLjY1LTExLjg4LTQ1LjU3IDAtODIuNjUgMzcuMDgtODIuNjUgODIuNjV2MzIyLjEzbC00OS4wNi02Ny4wN2MtMC4xOC0wLjI0LTAuMzYtMC40OC0wLjU1LTAuNzEtMTMuODItMTcuMjItMzMuNTItMjguMDItNTUuNDYtMzAuNDItMjEuOTQtMi40LTQzLjUxIDMuODktNjAuNzMgMTcuNy0zNS40NCAyOC40Ni00MS4yIDgwLjQtMTIuOTEgMTE1Ljkzek02NTUuMTcgOTgyLjE3Yzk2LjU0IDAgMTc1LjA4LTc4LjU0IDE3NS4wOC0xNzUuMDhWNDY3LjlsLTQwIDI4LjQydjMxMC43N2MwIDc0LjQ4LTYwLjYgMTM1LjA4LTEzNS4wOCAxMzUuMDhINDI5LjA1Yy02MS4zMiAwLTExMy4yMS00MS4wNy0xMjkuNjUtOTcuMTRsLTM0LjA0IDI0LjE4YzI1LjEyIDY1Ljk2IDg5LjAxIDExMi45NiAxNjMuNjggMTEyLjk2aDIyNi4xM3oiIHAtaWQ9IjE2NTgyIiBmaWxsPSIjNDQ0NDQ0Ij48L3BhdGg+PC9zdmc+")
    content: " ";
    height: 160px;
    right: 5px;
    top: 5px;
    width: 160px;
    position: absolute;
    background-size: 160px;
    background-repeat: no-repeat;