<commit_before>
@import "bower_components/compass-sass-mixins/lib/compass";
@import "bower_components/css-ripple-effect/src/ripple.less";
@import "partials/variables";
@import "partials/mixins";
@import "partials/inheritance";

@include google-font("Inconsolata", "400,700");
@include google-font("Roboto", "100,300,400,700");

* {
  box-sizing: border-box;
}


body {
  @include background-size(cover);
  background: url(../../dist/img/background.jpg) no-repeat center center fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

section.calculator{
  width: 100vw;
  height: 100vh;
  @include display-flex;
  @include flex-direction(row);
  @include align-items(center);
  @include justify-content(center);


  .calculator-init{
    width: 315px;
    height: 414px;
    background-color: $calculator-back-color;
    border: 1px solid #999;
    position: absolute;

    @media (max-width: 800px) and (orientation: landscape) {
      top: 30px;
      margin: auto;
    }

    @include border-radius(7px);
    @include box-shadow(rgba(black, 0.4) 0 0 25px, rgba(black, 0.2) 0 0 3px 1px);
    @include text-noselect;


    .frame-display{
      width: 100%;
      height: 98px;
      position: relative;
      cursor: move;

      .backspace{
        width: 35px;
        position: absolute;
        top: 35px;
        left: -10px;
        cursor: pointer;
        opacity: 0.8;
        @include transitionCustom(all 0.2s linear);
        @extend .ripple;

        &:hover{
          opacity: 1;
        }
      }

      .real-display{
        width: calc(100% - 30px);
        height: 100%;
        position: absolute;
        right: 0;
        text-align: right;
        padding: 0 10px 0 10px;
        overflow: hidden;
        cursor: all-scroll;

        .history-digits{
          height: 38px;
          width: 100%;
          line-height: 38px;
          font-size: 22px;
          font-family: $commom-digits-font;
          font-weight: 100;
          color: $light-font-color;
          outline: none;
          border: 0;
          padding: 0;
          margin: 0;
          text-align: right;
          cursor: move;
        }

        .current-digits{
          height: 60px;
          width: 100%;
          line-height: 60px;
          font-size: 50px;
          font-family: $commom-digits-font;
          font-weight: 300;
          color: $darken-font-color;
          border: 0;
          margin: 0;
          text-align: right;
          cursor: move;
        }

        .error-display{
          height: 100px;
          width: 100%;
          line-height: 105px;
          font-size: 20px;
          font-family: $commom-digits-font;
          font-weight: 300;
          color: $red-error-color;
          border: 0;
          margin: 0;
          text-align: center;
          cursor: move;
        }

      }
    }


    ul.frame-top-operators{
      height: $operator-line-height;
      width: 100%;
      background-color: $operators-back-color;
      margin: 0;
      padding: 0;
      list-style: none;

      li{
        @extend .digits-line-commom;
        font-family: $operatores-top-font;
        font-size: $operator-font-size;
        color: $darken-font-color;
        @include transitionCustom(all 0.2s linear);
        @extend .ripple;

        &:hover{
          @include box-shadow($shadow-color-darken 1px 1px 10px inset);
        }

        &:nth-child(odd){
          background-color: darken($operators-back-color, 3%);
        }
      }
    }

    ul.digits-commom-line{
      height: $commom-line-height;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;

      li{
        @extend .digits-line-commom;
        line-height: $commom-line-height;
        font-family: $commom-digits-font;
        font-size: $digit-font-size;
        font-weight: 100;
        color: $commom-digits-color;
        border-bottom: 1px solid $border-digits-color;
        border-right: 1px solid $border-digits-color;
        @include transitionCustom(all 0.2s linear);
        @extend .ripple;

        &:hover{
          @include box-shadow($shadow-color-light 1px 1px 10px inset);
        }

        &:last-child{
          border-right: 0;
        }
      }
    }

    ul.digits-small-line{
      height: $commom-line-height;
      width: 75%;
      margin: 0;
      padding: 0;
      list-style: none;

      li{
        @extend .digits-line-commom;
        width: 33.33333%;
        line-height: $commom-line-height;
        font-family: $commom-digits-font;
        font-size: $digit-font-size;
        font-weight: 100;
        color: $commom-digits-color;
        border-bottom: 1px solid $border-digits-color;
        border-right: 1px solid $border-digits-color;
        @include transitionCustom(all 0.2s linear);
        @extend .ripple;

        &:hover{
          @include box-shadow($shadow-color-light 1px 1px 10px inset);
        }
      }

      li.double-x{
        width: 66.666666%;
      }

    }

    ul.last-line{
      li{
        border-bottom: 0;
      }
    }

    .operator-equal{
      position: absolute;
      width: 25%;
      height: $commom-line-height*2;
      right: 0;
      bottom: 0;
      cursor: pointer;
      line-height: $commom-line-height*2;
      text-align: center;
      font-weight: 100;
      font-family: $operatores-top-font;
      font-size: $operator-font-size;
      color: $darken-font-color;
      background-color: $operators-back-color;
      @include border-bottom-right-radius(7px);
      @include transitionCustom(all 0.2s linear);

      animation: beat .4s infinite alternate;

      @extend .ripple;


      &:hover{
        @include box-shadow($shadow-color-light 1px 1px 10px inset);
      }
    }


    .align-right{
      text-align: right;
    }

    .align-left{
      text-align: left;
    }

  }

}

.ripple:after{
  background-image: radial-gradient(circle, #d2d1d1 10%, transparent 10.01%) !important;
}<commit_msg>This closes #1<commit_after>
@import "bower_components/compass-sass-mixins/lib/compass";
@import "bower_components/css-ripple-effect/src/ripple.less";
@import "partials/variables";
@import "partials/mixins";
@import "partials/inheritance";

@include google-font("Inconsolata", "400,700");
@include google-font("Roboto", "100,300,400,700");

* {
  box-sizing: border-box;
}


body {
  @include background-size(cover);
  background: url(../../dist/img/background.jpg) no-repeat center center fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

section.calculator{
  width: 100vw;
  height: 100vh;
  @include display-flex;
  @include flex-direction(row);
  @include align-items(center);
  @include justify-content(center);


  .calculator-init{
    width: 315px;
    height: 414px;
    background-color: $calculator-back-color;
    border: 1px solid #999;
    position: absolute;
    top: calc(50% - 207px);
    left: calc(50% - 157px);


    @media (max-width: 800px) and (orientation: landscape) {
      top: 30px;
      margin: auto;
    }

    @media (max-height: 300px) and (orientation: landscape) {
      top: 20px;
      margin-bottom: 50px;
    }


    @include border-radius(7px);
    @include box-shadow(rgba(black, 0.4) 0 0 25px, rgba(black, 0.2) 0 0 3px 1px);
    @include text-noselect;


    .frame-display{
      width: 100%;
      height: 98px;
      position: relative;
      cursor: move;

      .backspace{
        width: 35px;
        position: absolute;
        top: 35px;
        left: -10px;
        cursor: pointer;
        opacity: 0.8;
        @include transitionCustom(all 0.2s linear);
        @extend .ripple;

        &:hover{
          opacity: 1;
        }
      }

      .real-display{
        width: calc(100% - 30px);
        height: 100%;
        position: absolute;
        right: 0;
        text-align: right;
        padding: 0 10px 0 10px;
        overflow: hidden;
        cursor: all-scroll;

        .history-digits{
          height: 38px;
          width: 100%;
          line-height: 38px;
          font-size: 22px;
          font-family: $commom-digits-font;
          font-weight: 100;
          color: $light-font-color;
          outline: none;
          border: 0;
          padding: 0;
          margin: 0;
          text-align: right;
          cursor: move;
        }

        .current-digits{
          height: 60px;
          width: 100%;
          line-height: 60px;
          font-size: 50px;
          font-family: $commom-digits-font;
          font-weight: 300;
          color: $darken-font-color;
          border: 0;
          margin: 0;
          text-align: right;
          cursor: move;
        }

        .error-display{
          height: 100px;
          width: 100%;
          line-height: 105px;
          font-size: 20px;
          font-family: $commom-digits-font;
          font-weight: 300;
          color: $red-error-color;
          border: 0;
          margin: 0;
          text-align: center;
          cursor: move;
        }

      }
    }


    ul.frame-top-operators{
      height: $operator-line-height;
      width: 100%;
      background-color: $operators-back-color;
      margin: 0;
      padding: 0;
      list-style: none;

      li{
        @extend .digits-line-commom;
        font-family: $operatores-top-font;
        font-size: $operator-font-size;
        color: $darken-font-color;
        @include transitionCustom(all 0.2s linear);
        @extend .ripple;

        &:hover{
          @include box-shadow($shadow-color-darken 1px 1px 10px inset);
        }

        &:nth-child(odd){
          background-color: darken($operators-back-color, 3%);
        }
      }
    }

    ul.digits-commom-line{
      height: $commom-line-height;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;

      li{
        @extend .digits-line-commom;
        line-height: $commom-line-height;
        font-family: $commom-digits-font;
        font-size: $digit-font-size;
        font-weight: 100;
        color: $commom-digits-color;
        border-bottom: 1px solid $border-digits-color;
        border-right: 1px solid $border-digits-color;
        @include transitionCustom(all 0.2s linear);
        @extend .ripple;

        &:hover{
          @include box-shadow($shadow-color-light 1px 1px 10px inset);
        }

        &:last-child{
          border-right: 0;
        }
      }
    }

    ul.digits-small-line{
      height: $commom-line-height;
      width: 75%;
      margin: 0;
      padding: 0;
      list-style: none;

      li{
        @extend .digits-line-commom;
        width: 33.33333%;
        line-height: $commom-line-height;
        font-family: $commom-digits-font;
        font-size: $digit-font-size;
        font-weight: 100;
        color: $commom-digits-color;
        border-bottom: 1px solid $border-digits-color;
        border-right: 1px solid $border-digits-color;
        @include transitionCustom(all 0.2s linear);
        @extend .ripple;

        &:hover{
          @include box-shadow($shadow-color-light 1px 1px 10px inset);
        }
      }

      li.double-x{
        width: 66.666666%;
      }

    }

    ul.last-line{
      li{
        border-bottom: 0;
      }
    }

    .operator-equal{
      position: absolute;
      width: 25%;
      height: $commom-line-height*2;
      right: 0;
      bottom: 0;
      cursor: pointer;
      line-height: $commom-line-height*2;
      text-align: center;
      font-weight: 100;
      font-family: $operatores-top-font;
      font-size: $operator-font-size;
      color: $darken-font-color;
      background-color: $operators-back-color;
      @include border-bottom-right-radius(7px);
      @include transitionCustom(all 0.2s linear);

      animation: beat .4s infinite alternate;

      @extend .ripple;


      &:hover{
        @include box-shadow($shadow-color-light 1px 1px 10px inset);
      }
    }


    .align-right{
      text-align: right;
    }

    .align-left{
      text-align: left;
    }

  }

}

.ripple:after{
  background-image: radial-gradient(circle, #d2d1d1 10%, transparent 10.01%) !important;
}
{'fraction_non_alphanumeric': 0.13001406004466132, 'fraction_numerical': 0.03821023902075924, 'mean_word_length': 1.806870937790158, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6940943', 'n_tokens_mistral': 4476, 'n_tokens_neox': 3948, 'n_words': 848}