if hexo-config('readmode')
  [data-theme='light']
    $light-redmode-bg = #fff

    .read-mode
      background: $light-redmode-bg

      #page-header.post-bg
        a
          color: $font-black !important

      #article-container
        pre,
        .highlight:not(.js-file-line-container)
          background: #f7f7f7 !important

          *
            color: $font-black !important

        figure.highlight
          .line:before
            color: $font-black !important

          .hljs
            background: #f7f7f7 !important

        code
          color: #4c4948

        blockquote
          border-left: .2rem solid #ddd
          background-color: $light-redmode-bg

        ol,
        li
          &:before
            background: $light-redmode-bg
            color: #4c4948

        ul
          >li
            &:before
              border: .2rem solid #90a4ae

        hr
          border: 2px dashed #d6dbdf
          background: $light-redmode-bg

          &:before
            color: darken(#d6dbdf, 10)

        .hide-toggle
          border: 1px solid darken(#d6dbdf, 10) !important

        .hide-button,
        .btn-beautify
          background: $light-redmode-bg !important
          color: #4c4948 !important

        .btn-beautify
          border: 1px solid darken(#d6dbdf, 10)

          &.button--animated:before
            background: $light-redmode-bg

        .hide-inline,
        .hide-block
          & >.hide-button
            border: 1px solid darken(#d6dbdf, 10)

          & > .button--animated:before
            background: $light-redmode-bg

        .note
          border: 2px solid #eee
          background-color: $light-redmode-bg

        .tabs
          border: 1px solid darken(#d6dbdf, 10)

      #rightside button
        background: darken(#d6dbdf, 20) !important

  [data-theme='dark']
    $dark-readmode-bg = #0d0d0d

    .read-mode
      background: $dark-readmode-bg

      #article-container
        pre,
        .highlight:not(.js-file-line-container)
          *
            color: rgba(255, 255, 255, .6) !important

        code
          color: rgba(255, 255, 255, .6)

        blockquote
          border-left: .2rem solid rgba(255, 255, 255, .6)
          background-color: $dark-readmode-bg

        ol,
        li
          &:before
            background: $dark-readmode-bg
            color: rgba(255, 255, 255, .6)

        ul
          >li
            &:before
              border: .15rem solid rgba(255, 255, 255, .6)

        .hide-toggle
          border: 1px solid rgba(255, 255, 255, .6) !important

        .hide-button,
        .btn-beautify
          background: $dark-readmode-bg !important
          filter: none
          color: rgba(255, 255, 255, .6) !important

        .btn-beautify
          border: 1px solid rgba(255, 255, 255, .6)

          &.button--animated:before
            background: $dark-readmode-bg !important

        .hide-inline,
        .hide-block
          & >.hide-button
            border: 1px solid rgba(255, 255, 255, .6)

          & > .button--animated:before
            background: $dark-readmode-bg !important

        .note
          border: 2px solid rgba(255, 255, 255, .6)
          filter: none
          background-color: $dark-readmode-bg
          color: rgba(255, 255, 255, .6)

        .tabs
          border: 2px solid rgba(255, 255, 255, .6)

  .read-mode
    #body-wrap
      padding-left: 0 !important

    #page-header.post-bg
      background-color: transparent
      background-image: none !important

      a
        text-shadow: none !important

      &:before
        opacity: 0

      & > #post-info
        padding: 0
        color: $font-black
        text-align: center

    .layout_post
      > #post
        background: transparent
        box-shadow: none

        &:hover
          box-shadow: none

    figure.highlight
      border-radius: 0 !important
      box-shadow: none !important

      & > :not(.highlight-tools)
        display: block !important

    & > canvas
      display: none !important

    .highlight-tools,
    #footer,
    #post > *:not(:first-child),
    #to_comment,
    #sidebar,
    #toggle-sidebar,
    #mobile-toc-button,
    #nav,
    .post-outdate-notice
      display: none !important

    #web_bg
      background: none

    if !hexo-config('chat_btn')
      #chatra,
      #tidio-chat-code,
      #tidio-chat,
      #daodream-container,
      .gitter-chat-embed,
      .gitter-open-chat-button
        display: none !important

    #article-container
      h1,
      h2,
      h3,
      h4,
      h5,
      h6
        padding: 0

        &:before
          content: ''

        &:hover
          padding: 0

      ul,
      li,
      ol
        &:hover:before
          transform: none !important

      .tabs
        > .nav-tabs
          background: transparent

          > .tab
            border-bottom: 0

            button
              border-top: none !important
              background: transparent

              &:hover
                background: none !important

            &.active
              button
                text-decoration: underline

        > .tab-contents .tab-item-content.active
          animation: none