hexo-theme-keep/source/css/layout/_partial/side-tools.styl

$tools-item-width = 32px;
$tools-item-font-size = 1.1rem;
$tools-item-border-radius = 1px;


.side-tools-container {
  position: relative;

  .tools-item {
    width: $tools-item-width;
    height: $tools-item-width;
    font-size: $tools-item-font-size;
    margin-bottom: 3px;
    cursor: pointer;
    border-right: none;
    border-radius: $tools-item-border-radius;
    box-shadow: 1px 1px 3px var(--shadow-color);
    color: var(--default-text-color);
    background: var(--background-color);

    i {
      color: var(--default-text-color);
    }

    &:hover {
      color: var(--background-color);
      background: var(--primary-color);
      box-shadow: 2px 2px 6px var(--shadow-color);

      i {
        color: var(--background-color);
      }
    }

    +keep-tablet() {
      width: $tools-item-width * 0.9;
      height: $tools-item-width * 0.9;
      font-size: $tools-item-font-size * 0.9;
      margin-bottom: 2px;
    }

    &.rss {

      a {
        border-radius: $tools-item-border-radius;
        width: 100%;
        height: 100%;

        &:hover {
          color: var(--background-color);
          background: var(--primary-color);
          box-shadow: 2px 2px 6px var(--shadow-color);
        }
      }
    }
  }


  .side-tools-list {
    opacity: 0;
    transform: translateX(100%);
    transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear");

    .tool-expand-width {
      +keep-tablet() {
        display: none;
      }
    }


    &.show {
      opacity: 1;
      transform: translateX(0);
    }
  }


  .exposed-tools-list {

    if (hexo-config('style.scroll.percent.enable') == true) {
      .tool-scroll-to-top {
        display: none;


        &:hover {

          .arrow-up {
            display: flex;
          }

          .percent {
            display: none;
          }
        }


        .arrow-up, .percent {
          transition-t("display", "0", "0.2", "linear");
        }


        .arrow-up {
          display: none;
        }


        .percent {
          display: flex;
          font-size: 1rem;
        }

      }

    }
  }
}