@testgorilla/tgo-typing-test 1.0.0 → 2.0.0

package/src/lib/styles/test.scss

@@ -0,0 +1,1008 @@
+::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;
+    }
+  }
+}