index.scss

$primaryColor: rgba(0, 153, 255, .8);
.base-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 8px 10px;
  background: #2B2B33;
  color: #CFDBE5;
  font-size: 12px;

  button {
    font-size: 12px;
    color: #fff;
    background-color: $primaryColor;
    border: 0;
    border-radius: 4px;
    -webkit-appearance: none;
    outline: 0;
    padding: 8px 12px;
  }
}

.first {
  .tip {
    width: 169px;
  }

  .am-button {
    font-size: 12px;
  }
}

.normal {
  justify-content: flex-end;

  .check-answer {
    margin-right: 18px;
    border: 1px solid $primaryColor;
    border-radius: 4px;
    font-size: 12px;
    color: $primaryColor;
    background-color: transparent;
  }
}

.pass {
  justify-content: flex-start;
  align-items: center;
  color: #74c27c;
  background: rgba(116, 193, 124, .3);

  .iconfont {
    font-size: 18px;
    margin-right: 10px;
  }
}

.only-execute {
  justify-content: flex-end;
}

.error {
  align-items: center;

  .left {
    color: #C24E55;

    a {
      color: #fff;
      text-decoration: underline;
      margin-left: 15px;
    }
  }

  .iconfont {
    font-size: 18px;
    margin-right: 10px;
  }

  span {
    font-size: 15px;
  }
}

.input-tip {
  .tip {
    font-size: 12px;
    color: #CFDBE5;
  }

  button {
    border: 1px solid #09f;
    background: transparent;
    color: #09f;
  }
}

.complete {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .iconfont {
    font-size: 18px;

  }

  a {
    font-size: 12px;
    color: #CFDBE5;
    text-decoration: underline;
  }

  img {
    width: 18px;
    height: 18px;
  }

  .tip {
    margin-left: 11px;
    font-size: 15px;
  }

  &.finish {
    color: #74C17C;
  }

  &.skipped {
    color: #CFDBE6;
  }
}