hexo-theme-keep/source/css/layout/_partial/comment/valine.styl

@require '../../common/variables.styl'
@require '../../common/animated.styl'

.valine-container {

  #vcomments {

    .vwrap {

      border: 1px solid var(--third-text-color);

      .vheader {

        .vinput {

          color: var(--normal-text-color);
          border-color: var(--third-text-color);

          &:focus {
            border-bottom: 1px dashed var(--primary-color) !important;
          }
        }
      }


      .vedit {

        .veditor {
          color: var(--normal-text-color);
        }

        .vctrl {

          .vicon {

            fill: var(--normal-text-color);

            &.actived {
              fill: var(--primary-color);
            }
          }
        }

      }

      button.vsubmit {

        background: transparent !important;
        color: var(--normal-text-color) !important;
        border: 1px solid var(--normal-text-color) !important;

        &:hover {
          color: var(--primary-color) !important;
          border: 1px solid var(--primary-color) !important;
        }
      }


    }


    .vcount {
      color: var(--normal-text-color);

      .vnum {
        color: var(--second-text-color);
      }
    }

    .vcard {

      // author

      &.author {
        .vnick {
          font-weight: bold;

          &::after {
            font-weight: 500;
            font-size: 12px;
            content: '博主';
            padding: 2px;
            background: -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
            background: linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
            color: #fff;
            margin-left: 5px;
            border-radius: 2px;
          }
        }
      }

      .vhead {

        .vnick {
          color: var(--primary-color);
        }

        .vsys {
          color: var(--normal-text-color);
          background: var(--fourth-text-color) !important;
        }
      }


      .vcontent {
        P {
          color: var(--normal-text-color);
        }
      }

      .vh {
        border-bottom-color: var(--border-color);
      }
    }


    .vcopy {
      color: var(--third-text-color);
    }

  }


}