@testgorilla/tgo-typing-test 2.0.0 → 2.0.1

package/src/lib/styles/test.scss

@@ -1,1008 +0,0 @@
-::ng-deep {
-  #timerWrapper {
-    opacity: 0;
-    transition: 0.25s;
-    z-index: -1;
-    position: relative;
-    z-index: 99;
-    #timer {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 0.5rem;
-      background: black;
-      z-index: -1;
-
-      &.timerMain {
-        background: $--main-color;
-      }
-
-      &.timerSub {
-        background: $--sub-color;
-      }
-
-      &.timerText {
-        background: $--text-color;
-      }
-    }
-  }
-
-  .pageTest {
-    position: relative;
-
-    .ssWatermark {
-      font-size: 1.25rem;
-      color: $--sub-color;
-      line-height: 1rem;
-      text-align: right;
-    }
-
-    #timerNumber {
-      pointer-events: none;
-      transition: 0.25s;
-      height: 0;
-      color: black;
-      line-height: 0;
-      z-index: -1;
-      text-align: center;
-      left: 0;
-      width: 100%;
-      position: relative;
-      font-size: 10rem;
-      opacity: 0;
-      width: 0;
-      height: 0;
-      margin: 0 auto;
-      display: grid;
-      justify-content: center;
-      bottom: 6rem;
-      transition: none;
-    }
-
-    #largeLiveWpmAndAcc {
-      font-size: 10rem;
-      color: black;
-      width: 100%;
-      left: 0;
-      text-align: center;
-      z-index: -1;
-      height: 0;
-      line-height: 0;
-      top: 5rem;
-      position: relative;
-      display: grid;
-      grid-auto-flow: column;
-      justify-content: center;
-      gap: 5rem;
-      width: 0;
-      margin: 0 auto;
-
-      #liveWpm {
-        opacity: 0;
-      }
-
-      #liveAcc {
-        opacity: 0;
-      }
-
-      #liveBurst {
-        opacity: 0;
-      }
-    }
-
-    #largeLiveWpmAndAcc.timerMain,
-    #timerNumber.timerMain {
-      color: $--main-color;
-    }
-
-    #timer.timerMain {
-      background: $--main-color;
-    }
-
-    #largeLiveWpmAndAcc.timerSub,
-    #timerNumber.timerSub {
-      color: $--sub-color;
-    }
-
-    #timer.timerSub {
-      background: $--sub-color;
-    }
-
-    #largeLiveWpmAndAcc.timerText,
-    #timerNumber.timerText {
-      color: $--text-color;
-    }
-
-    #timer.timerText {
-      background: $--text-color;
-    }
-  }
-
-  #words, .words {
-    height: fit-content;
-    height: -moz-fit-content;
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    align-content: flex-start;
-    user-select: none;
-    padding-bottom: 1em;
-
-    .newline {
-      width: inherit;
-    }
-
-    letter {
-      border-bottom-style: solid;
-      border-bottom-width: 0.05em;
-      border-bottom-color: transparent;
-      &.dead {
-        border-bottom-width: 0.05em;
-        border-bottom-color: $--sub-color;
-      }
-      &.tabChar,
-      &.nlChar {
-        margin: 0 0.25rem;
-        opacity: 0.2;
-      }
-    }
-
-    /* a little hack for right-to-left languages */
-    &.rightToLeftTest {
-      direction: rtl;
-      .word {
-        direction: rtl;
-      }
-    }
-    &.withLigatures {
-      letter {
-        display: inline;
-      }
-    }
-    &.blurred {
-      opacity: 0.25;
-      filter: blur(4px);
-      -webkit-filter: blur(4px);
-    }
-
-    &.flipped {
-      .word {
-        color: $--text-color;
-
-        & letter.dead {
-          border-bottom-color: $--sub-color !important;
-        }
-
-        & letter.correct {
-          color: $--sub-color;
-        }
-
-        & letter.corrected {
-          color: $--sub-color;
-          border-bottom: 2px dotted $--main-color;
-        }
-
-        & letter.extraCorrected {
-          border-right: 2px dotted $--main-color;
-        }
-      }
-    }
-
-    &.colorfulMode {
-      .word {
-        & letter.dead {
-          border-bottom-color: $--main-color !important;
-        }
-
-        & letter.correct {
-          color: $--main-color;
-        }
-
-        & letter.corrected {
-          color: $--main-color;
-          border-bottom: 2px dotted $--text-color;
-        }
-
-        & letter.extraCorrected {
-          border-right: 2px dotted $--text-color;
-        }
-
-        & letter.incorrect {
-          color: $--colorful-error-color;
-        }
-
-        & letter.incorrect.extra {
-          color: $--colorful-error-extra-color;
-        }
-      }
-    }
-
-    &.flipped.colorfulMode {
-      .word {
-        color: $--main-color;
-
-        & letter.dead {
-          border-bottom-color: $--sub-color !important;
-        }
-
-        & letter.correct {
-          color: $--sub-color;
-        }
-
-        & letter.corrected {
-          color: $--sub-color;
-          border-bottom: 2px dotted $--main-color;
-        }
-
-        & letter.extraCorrected {
-          border-right: 2px dotted $--main-color;
-        }
-
-        & letter.incorrect {
-          color: $--colorful-error-color;
-        }
-
-        & letter.incorrect.extra {
-          color: $--colorful-error-extra-color;
-        }
-      }
-    }
-
-    &.tape {
-      &.size125 .word {
-        margin: 0.31rem 0.62rem 0.31rem 0;
-      }
-
-      &.size15 .word {
-        margin: 0.37rem 0.74rem 0.37rem 0;
-      }
-
-      &.size2 .word {
-        margin: 0.5rem 1rem 0.5rem 0;
-      }
-
-      &.size3 .word {
-        margin: 0.75rem 1.5rem 0.75rem 0;
-      }
-
-      &.size4 .word {
-        margin: 1rem 2rem 1rem 0;
-      }
-    }
-
-    &.tape.indicateTyposBelow {
-      &.size125 .word {
-        margin: 0.31rem 0.62rem 0.93rem 0;
-      }
-
-      &.size15 .word {
-        margin: 0.37rem 0.74rem 1.11rem 0;
-      }
-
-      &.size2 .word {
-        margin: 0.5rem 1rem 1.5rem 0;
-      }
-
-      &.size3 .word {
-        margin: 0.75rem 1.5rem 2.25rem 0;
-      }
-
-      &.size4 .word {
-        margin: 1rem 2rem 3rem 0;
-      }
-    }
-  }
-
-  .word {
-    margin: 0.25rem;
-    color: $--sub-color;
-    font-variant: no-common-ligatures;
-    border-bottom: 2px solid transparent;
-    line-height: 1rem;
-    letter {
-      display: inline-block;
-    }
-
-    &.lastbeforenewline::after {
-      font-family: "Font Awesome 5 Free";
-      font-weight: 600;
-      content: "\f107";
-      margin-left: 0.5rem;
-      opacity: 0.25;
-    }
-
-    .wordInputAfter {
-      opacity: 1;
-      position: absolute;
-      background: $--sub-color;
-      color: $--bg-color;
-      padding: 0.5rem;
-      margin-left: -0.5rem;
-      border-radius: $--roundness;
-      transition: 0.25s;
-      text-shadow: none;
-      top: -0.5rem;
-      z-index: 10;
-      cursor: text;
-      .speed {
-        font-size: 0.75rem;
-      }
-    }
-  }
-
-  #words.size125 .word {
-    line-height: 1.25rem;
-    font-size: max(1.25rem, 24px);
-    margin: 0.31rem;
-  }
-
-  #words.size15 .word {
-    line-height: 1.5rem;
-    font-size: max(1.5rem, 24px);
-    margin: 0.37rem;
-  }
-
-  #words.size2 .word {
-    line-height: 2rem;
-    font-size: max(2rem, 24px);
-    margin: 0.5rem;
-  }
-
-  #words.size3 .word {
-    line-height: 3rem;
-    font-size: max(3rem, 24px);
-    margin: 0.75rem;
-  }
-
-  #words.size4 .word {
-    line-height: 4rem;
-    font-size: max(4rem, 24px);
-    margin: 1rem;
-  }
-
-  #words.nospace {
-    .word {
-      margin: 0.5rem 0;
-    }
-  }
-
-  #words.arrows {
-    .word {
-      margin: 0.5rem 0;
-      letter {
-        margin: 0 0.25rem;
-      }
-    }
-  }
-
-  .word.error {
-    border-bottom: 2px solid $--error-color;
-    text-shadow: 1px 0px 0px $--bg-color,
-      -1px 0px 0px $--bg-color,
-      0px 1px 0px $--bg-color,
-      1px 1px 0px $--bg-color, -1px 1px 0px $--bg-color;
-  }
-
-  #words.noErrorBorder,
-  #resultWordsHistory.noErrorBorder {
-    .word.error {
-      text-shadow: none;
-    }
-  }
-
-  .word letter.correct {
-    color: $--text-color;
-  }
-
-  .word letter.corrected {
-    color: $--text-color;
-    border-bottom: 2px dotted $--main-color;
-  }
-
-  .word letter.extraCorrected {
-    border-right: 2px dotted $--main-color;
-  }
-
-  .word letter.incorrect {
-    color: $--error-color;
-    position: relative;
-  }
-
-  .word letter.incorrect hint {
-    position: absolute;
-    bottom: -1em;
-    color: $--text-color;
-    line-height: initial;
-    font-size: 0.75em;
-    text-shadow: none;
-    padding: 1px;
-    left: 0;
-    opacity: 0.5;
-    text-align: center;
-    width: 100%;
-    display: grid;
-    justify-content: center;
-  }
-
-  .word letter.incorrect.extra {
-    color: $--error-extra-color;
-  }
-
-  .word letter.missing {
-    opacity: 0.5;
-  }
-
-  #words.flipped.colorfulMode .word.error,
-  #words.colorfulMode .word.error {
-    border-bottom: 2px solid $--colorful-error-color;
-  }
-
-  #wordsInput {
-    opacity: 0;
-    padding: 0;
-    margin: 0;
-    border: none;
-    outline: none;
-    display: block;
-    resize: none;
-    position: fixed;
-    z-index: -1;
-    cursor: default;
-    pointer-events: none;
-  }
-
-  #capsWarning {
-    background: $--main-color;
-    color: $--bg-color;
-    display: table;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    padding: 1rem;
-    border-radius: $--roundness;
-    transition: 0.125s;
-    z-index: 999;
-    pointer-events: none;
-    top: -2.5rem;
-
-    i {
-      margin-right: 0.5rem;
-    }
-  }
-
-  #result {
-    display: grid;
-    gap: 1rem;
-    align-items: center;
-    grid-template-columns: auto 1fr;
-    grid-template-areas:
-      "stats chart"
-      "morestats morestats";
-
-    &:focus {
-      outline: none;
-    }
-
-    .buttons {
-      display: grid;
-      grid-auto-flow: column;
-      gap: 1rem;
-      justify-content: center;
-      grid-column: 1/3;
-    }
-
-    .ssWatermark {
-      grid-column: 1/3;
-    }
-
-    #resultWordsHistory,
-    #resultReplay {
-      color: $--sub-color;
-      margin-bottom: 1rem;
-      .textButton {
-        padding: 0;
-        margin-left: 0.5rem;
-      }
-      .heatmapLegend {
-        margin-left: 0.5rem;
-        display: inline-grid;
-        grid-template-columns: auto auto auto;
-        gap: 1rem;
-        font-size: 0.75rem;
-        color: $--sub-color;
-        width: min-content;
-        .boxes {
-          display: grid;
-          grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-          .box {
-            height: 1rem;
-            color: $--bg-color;
-            padding: 0.1rem 0.5rem;
-            white-space: nowrap;
-            line-height: 0.75rem;
-            display: grid;
-            place-content: center center;
-          }
-          .box:nth-child(1) {
-            background: $--colorful-error-color;
-            border-radius: $--roundness 0 0 $--roundness;
-          }
-          .box:nth-child(2) {
-            background: $--colorful-error-color;
-            filter: opacity(0.6);
-          }
-          .box:nth-child(3) {
-            background: $--sub-color;
-          }
-          .box:nth-child(4) {
-            background: $--main-color;
-            filter: opacity(0.6);
-          }
-          .box:nth-child(5) {
-            background: $--main-color;
-            border-radius: 0 $--roundness $--roundness 0;
-          }
-        }
-      }
-      .title {
-        user-select: none;
-        margin-bottom: 0.25rem;
-      }
-      .words {
-        display: flex;
-        flex-wrap: wrap;
-        width: 100%;
-        align-content: flex-start;
-        user-select: none;
-        .word {
-          position: relative;
-          margin: 0.18rem 0.6rem 0.15rem 0;
-          letter.correct {
-            color: $--text-color;
-          }
-          letter.incorrect {
-            color: $--error-color;
-          }
-          letter.incorrect.extra {
-            color: $--error-extra-color;
-          }
-          &.heatmap0 letter {
-            color: $--colorful-error-color;
-          }
-          &.heatmap1 letter {
-            color: $--colorful-error-color;
-            filter: opacity(0.6);
-          }
-          &.heatmap2 letter {
-            color: $--sub-color;
-          }
-          &.heatmap3 letter {
-            color: $--main-color;
-            filter: opacity(0.6);
-          }
-          &.heatmap4 letter {
-            color: $--main-color;
-          }
-        }
-        &.rightToLeftTest {
-          direction: rtl;
-          .word {
-            direction: rtl;
-          }
-        }
-        &.withLigatures {
-          letter {
-            display: inline;
-          }
-        }
-      }
-    }
-
-    .chart {
-      grid-area: chart;
-      width: 100%;
-
-      canvas {
-        width: 100% !important;
-        height: 100%;
-      }
-
-      max-height: 200px;
-      height: 200px;
-
-      .title {
-        color: $--sub-color;
-        margin-bottom: 1rem;
-      }
-    }
-
-    .loginTip {
-      grid-column: 1/3;
-      text-align: center;
-      color: $--sub-color;
-      .link {
-        text-decoration: underline;
-        display: inline-block;
-        cursor: pointer;
-      }
-    }
-
-    .stats {
-      grid-area: stats;
-      display: grid;
-      gap: 0.5rem;
-      justify-content: center;
-      align-items: center;
-      grid-template-areas:
-        "wpm"
-        "acc";
-
-      &.morestats {
-        display: grid;
-        grid-auto-flow: column;
-        grid-template-areas: none;
-        align-items: flex-start;
-        justify-content: space-between;
-        column-gap: 2rem;
-        grid-area: morestats;
-
-        .subgroup {
-          display: grid;
-          gap: 0.5rem;
-        }
-      }
-
-      .group {
-        .top {
-          color: $--sub-color;
-          font-size: 1rem;
-          line-height: 1rem;
-          margin-bottom: 0.25rem;
-        }
-
-        .bottom {
-          color: $--main-color;
-          font-size: 2rem;
-          line-height: 2rem;
-        }
-
-        &.time {
-          .afk,
-          .timeToday {
-            color: $--sub-color;
-            font-size: 0.75rem;
-            line-height: 0.75rem;
-            margin-left: 0.2rem;
-          }
-        }
-
-        &.source {
-          #rateQuoteButton,
-          #reportQuoteButton,
-          #favoriteQuoteButton {
-            padding: 0 0.25rem;
-          }
-          #rateQuoteButton {
-            display: inline-grid;
-            gap: 0.25rem;
-          }
-        }
-      }
-
-      .info,
-      .tags,
-      .source {
-        .top {
-          font-size: 1rem;
-          line-height: 1rem;
-        }
-
-        .bottom {
-          font-size: 1rem;
-          line-height: 1rem;
-        }
-      }
-
-      .source {
-        max-width: 30rem;
-      }
-
-      .tags .bottom .fas {
-        margin-left: 0.5rem;
-      }
-
-      .wpm {
-        grid-area: wpm;
-
-        .top {
-          font-size: 2rem;
-          line-height: 1.5rem;
-          display: flex;
-
-          .crown {
-            height: 1.7rem;
-            width: 1.7rem;
-            margin-left: 0.5rem;
-            margin-top: -0.2rem;
-            font-size: 0.7rem;
-            line-height: 1.7rem;
-            background: $--main-color;
-            color: $--bg-color;
-            border-radius: 0.6rem;
-            text-align: center;
-            align-self: center;
-            width: 1.7rem;
-            height: 1.7rem;
-          }
-        }
-
-        .bottom {
-          font-size: 4rem;
-          line-height: 4rem;
-        }
-      }
-
-      .testType,
-      .leaderboards {
-        .bottom {
-          font-size: 1rem;
-          line-height: 1rem;
-          .lbChange .fas {
-            margin-right: 0.15rem;
-          }
-        }
-      }
-
-      .acc {
-        grid-area: acc;
-
-        .top {
-          font-size: 2rem;
-          line-height: 1.5rem;
-        }
-
-        .bottom {
-          font-size: 4rem;
-          line-height: 4rem;
-        }
-      }
-
-      .burst {
-        grid-area: burst;
-
-        .top {
-          font-size: 2rem;
-          line-height: 1.5rem;
-        }
-
-        .bottom {
-          font-size: 4rem;
-          line-height: 4rem;
-        }
-      }
-    }
-  }
-
-  #restartTestButton,
-  #showWordHistoryButton,
-  #saveScreenshotButton,
-  #restartTestButtonWithSameWordset,
-  #nextTestButton,
-  #practiseWordsButton,
-  #watchReplayButton,
-  #watchVideoAdButton {
-    position: relative;
-    border-radius: $--roundness;
-    padding: 1rem 2rem;
-    width: min-content;
-    width: -moz-min-content;
-    color: $--sub-color;
-    transition: 0.125s;
-    cursor: pointer;
-
-    &:hover,
-    &:focus {
-      color: $--text-color;
-      outline: none;
-    }
-
-    &:focus {
-      background: $--text-color;
-      color: $--bg-color;
-    }
-  }
-
-  #retrySavingResultButton {
-    position: relative;
-    border-radius: $--roundness;
-    padding: 1rem 2rem;
-    color: $--error-color;
-    transition: 0.25s;
-    cursor: pointer;
-    width: max-content;
-    width: -moz-max-content;
-    background: $--colorful-error-color;
-    color: $--bg-color;
-    justify-self: center;
-    justify-content: center;
-    margin: 0 auto 1rem auto;
-    user-select: none;
-
-    &:hover,
-    &:focus {
-      background: $--text-color;
-      outline: none;
-    }
-
-    &:focus {
-      background: $--text-color;
-    }
-  }
-
-  #showWordHistoryButton {
-    opacity: 1;
-  }
-
-  #replayWords {
-    cursor: pointer;
-  }
-
-  #replayStopwatch {
-    color: $--main-color;
-    display: inline-block;
-    margin: 0;
-    margin-left: 0.5em;
-  }
-
-  #restartTestButton {
-    margin: 0 auto;
-    margin-top: 1rem;
-  }
-
-  .pageTest {
-    #wordsWrapper {
-      position: relative;
-      &.tape {
-        -webkit-mask-image: linear-gradient(
-          90deg,
-          rgba(0, 0, 0, 0) 1%,
-          rgb(0, 0, 0) 10%,
-          rgb(0, 0, 0) 90%,
-          rgba(0, 0, 0, 0) 99%
-        );
-        mask-image: linear-gradient(
-          90deg,
-          rgba(0, 0, 0, 0) 1%,
-          rgb(0, 0, 0) 10%,
-          rgb(0, 0, 0) 90%,
-          rgba(0, 0, 0, 0) 99%
-        );
-      }
-    }
-    #memoryTimer {
-      background: $--main-color;
-      color: $--bg-color;
-      padding: 1rem;
-      border-radius: $--roundness;
-      text-align: center;
-      width: max-content;
-      left: 50%;
-      position: absolute;
-      transform: translateX(-50%);
-      top: -6rem;
-      user-select: none;
-      pointer-events: none;
-      opacity: 0;
-    }
-    .outOfFocusWarning {
-      text-align: center;
-      height: 0;
-      line-height: 150px;
-      z-index: 999;
-      position: relative;
-      user-select: none;
-      pointer-events: none;
-    }
-
-    .errorWarning {
-      text-align: center;
-      height: 0;
-      line-height: 150px;
-      z-index: 999;
-      position: relative;
-      user-select: auto;
-    }
-
-    #testModesNotice {
-      display: flex;
-      flex-wrap: wrap;
-      color: $--sub-color;
-      text-align: center;
-      margin-bottom: 0.5rem;
-      transition: 0.125s;
-      justify-content: center;
-      user-select: none;
-
-      .textButton {
-        margin: 0 0.5rem;
-      }
-
-      .fas {
-        margin-right: 0.5rem;
-      }
-    }
-    #miniTimerAndLiveWpm {
-      height: 0;
-      margin-left: 0.37rem;
-      display: flex;
-      font-size: 1rem;
-      line-height: 1.13rem;
-      margin-top: -1.5rem;
-      position: absolute;
-      color: black;
-      font-weight: bold;
-
-      .time {
-        margin-right: 2rem;
-        margin-top: -2rem;
-      }
-
-      .wpm,
-      .acc {
-        margin-right: 2rem;
-      }
-
-      .time,
-      .wpm,
-      .acc,
-      .burst {
-        opacity: 0;
-      }
-
-      &.timerMain {
-        color: $--timer-color;
-      }
-
-      &.timerSub {
-        color: $--sub-color;
-      }
-
-      &.timerText {
-        color: $--text-color;
-      }
-
-      &.size125 {
-        margin-top: -1.75rem;
-        font-size: 1.38rem;
-        line-height: 1.25rem;
-      }
-      &.size15 {
-        margin-top: -2rem;
-        font-size: 1.63rem;
-        line-height: 1.5rem;
-      }
-      &.size2 {
-        margin-top: -2.5rem;
-        font-size: 2.13rem;
-        line-height: 2rem;
-      }
-      &.size3 {
-        margin-top: -3.5rem;
-        font-size: 3.13rem;
-        line-height: 3rem;
-      }
-      &.size4 {
-        margin-top: -4.5rem;
-        font-size: 4.13rem;
-        line-height: 4rem;
-      }
-    }
-  }
-
-  #middle.focus .pageTest {
-    #testModesNotice {
-      opacity: 0 !important;
-    }
-  }
-}