@testgorilla/tgo-typing-test 2.0.0 → 2.0.1

package/src/lib/styles/animations.scss

@@ -1,101 +0,0 @@
-@keyframes loader {
-  0% {
-    width: 0;
-    left: 0;
-  }
-
-  50% {
-    width: 100%;
-    left: 0;
-  }
-
-  100% {
-    width: 0;
-    left: 100%;
-  }
-}
-
-@keyframes caretFlashSmooth {
-  0%,
-  100% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
-@keyframes caretFlashHard {
-  0%,
-  50% {
-    opacity: 1;
-  }
-
-  51%,
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes flashKey {
-  from {
-    color: $--bg-color;
-    background-color: $--main-color;
-    border-color: $--main-color;
-  }
-
-  to {
-    color: $--sub-color;
-    background-color: $--bg-color;
-    border-color: $--sub-color;
-  }
-}
-
-@keyframes shake {
-  0% {
-    transform: translate(2px, 0) rotate(0deg);
-  }
-  50% {
-    transform: translate(-2px, 0) rotate(0deg);
-  }
-  100% {
-    transform: translate(2px, 0) rotate(0deg);
-  }
-}
-
-@keyframes flashHighlight {
-  0% {
-    background-color: $--bg-color;
-  }
-  10% {
-    background-color: $--main-color;
-  }
-  40% {
-    background-color: $--main-color;
-  }
-  100% {
-    background-color: $--bg-color;
-  }
-}
-
-@keyframes rgb-bg {
-  0% {
-    background: hsl(120, 39%, 49%);
-  }
-  20% {
-    background: hsl(192, 48%, 48%);
-  }
-  40% {
-    background: hsl(264, 90%, 58%);
-  }
-  60% {
-    background: hsl(357, 89%, 50%);
-  }
-  80% {
-    background: hsl(46, 100%, 51%);
-  }
-  100% {
-    background: hsl(120, 39%, 49%);
-  }
-}

package/src/lib/styles/caret.scss

@@ -1,108 +0,0 @@
-#caret {
-  height: 1.5rem;
-  background: $--caret-color;
-  animation: caretFlashSmooth 1s infinite;
-  position: absolute;
-  border-radius: $--roundness;
-  transform-origin: top left;
-}
-
-#paceCaret {
-  height: 1.5rem;
-  background: $--sub-color;
-  opacity: 0.5;
-  position: absolute;
-  border-radius: $--roundness;
-  transform-origin: top left;
-  width: 2px;
-}
-
-#caret,
-#paceCaret {
-  &.off {
-    width: 0;
-  }
-
-  &.default {
-    width: 2px;
-  }
-
-  &.block {
-    width: 0.7em;
-    border-radius: 0;
-    z-index: -1;
-  }
-
-  &.outline {
-    @extend #caret, .block;
-    animation-name: none;
-    background: transparent;
-    border: 1px solid $--caret-color;
-  }
-
-  &.block,
-  &.outline,
-  &.underline {
-    margin-left: 0.1rem;
-
-    &.size15 {
-      margin-left: 0.15rem;
-    }
-
-    &.size2 {
-      margin-left: 0.2rem;
-    }
-
-    &.size3 {
-      margin-left: 0.25em;
-    }
-    &.size4 {
-      margin-left: 0.3rem;
-    }
-  }
-
-  &.underline {
-    height: 2px;
-    width: 0.8em;
-    margin-top: 1.3em;
-
-    &.size125 {
-      margin-top: 1.8em;
-    }
-
-    &.size15 {
-      margin-top: 2.1em;
-    }
-
-    &.size2 {
-      margin-top: 2.7em;
-    }
-
-    &.size3 {
-      margin-top: 3.9em;
-    }
-    &.size4 {
-      margin-top: 5em;
-    }
-  }
-
-  &.size125 {
-    transform: scale(1.25);
-  }
-
-  &.size15 {
-    transform: scale(1.45);
-  }
-
-  &.size2 {
-    transform: scale(1.9);
-  }
-
-  &.size3 {
-    transform: scale(2.8);
-  }
-
-  &.size4 {
-    transform: scale(3.7);
-  }
-}

package/src/lib/styles/core.scss

@@ -1,498 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@600&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Itim:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Coming+Soon:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Lalezar:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@300;400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700&display=swap");
-
-$--roundness: 0.5rem;
-$--font: "Roboto Mono", "Vazirmatn";
-::ng-deep {
-  :host {
-    scroll-padding-top: 2rem;
-    font-weight: 600;
-  }
-
-  ::placeholder {
-    color: $--sub-color;
-    opacity: 1;
-    /* Firefox */
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1000px) auto;
-    justify-items: center;
-    &.wide125 {
-      grid-template-columns: auto minmax(0, 1250px) auto;
-    }
-    &.wide150 {
-      grid-template-columns: auto minmax(0, 1500px) auto;
-    }
-    &.wide200 {
-      grid-template-columns: auto minmax(0, 2000px) auto;
-    }
-    &.widemax {
-      grid-template-columns: auto minmax(0, 1fr) auto;
-    }
-  }
-
-  #nocss {
-    display: none !important;
-    pointer-events: none;
-  }
-
-  .ffscroll {
-    scrollbar-width: thin;
-    scrollbar-color: $--sub-color transparent;
-  }
-
-  html {
-    @extend .ffscroll;
-    overflow-y: scroll;
-  }
-
-  a {
-    display: inline-block;
-    color: $--sub-color;
-    transition: 0.25s;
-    &:hover {
-      color: $--text-color;
-    }
-  }
-
-  a[data-link] * {
-    pointer-events: none;
-  }
-
-  a.button {
-    text-decoration: none;
-  }
-
-  #centerContent {
-    margin: 0;
-    padding: 0;
-    min-height: 300px;
-    font-family: $--font;
-    color: $--text-color;
-    overflow-x: hidden;
-    border: 1px solid $--border-color;
-  }
-
-  .customBackground {
-    content: "";
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    left: 0;
-    top: 0;
-    background-position: center center;
-    background-repeat: no-repeat;
-    z-index: -999;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-  }
-
-  #backgroundLoader {
-    height: 3px;
-    position: fixed;
-    width: 100%;
-    background: $--main-color;
-    animation: loader 2s cubic-bezier(0.38, 0.16, 0.57, 0.82) infinite;
-    z-index: 9999;
-  }
-
-  label.checkbox {
-    span {
-      display: block;
-      font-size: 0.76rem;
-      color: $--sub-color;
-      margin-left: 1.5rem;
-    }
-
-    input {
-      margin: 0 !important;
-      cursor: pointer;
-      width: 0;
-      height: 0;
-      display: none;
-      user-select: none;
-
-      & ~ .customTextCheckbox {
-        width: 1.25rem;
-        height: 1.25rem;
-        background: $--sub-alt-color;
-        border-radius: calc($--roundness / 2);
-        display: inline-grid;
-        margin: 0 0.5rem 0 0;
-        user-select: none;
-        cursor: pointer;
-        & .check {
-          opacity: 0;
-          color: $--main-color;
-          transition: 0.125s;
-        }
-      }
-
-      &:checked ~ .customTextCheckbox .check {
-        opacity: 1;
-      }
-    }
-  }
-
-  #centerContent {
-    display: grid;
-    grid-auto-flow: row;
-    padding-left: 2rem;
-    padding-right: 2rem;
-    padding-top: 10rem;
-    padding-bottom: 2rem;
-    gap: 2rem;
-    align-items: center;
-    z-index: 999;
-    grid-template-rows: auto 1fr auto;
-    width: 100%;
-    transition: padding-top 0.125s;
-    &.wide125 {
-      max-width: 1250px;
-    }
-    &.wide150 {
-      max-width: 1500px;
-    }
-    &.wide200 {
-      max-width: 2000px;
-    }
-    &.widemax {
-      max-width: unset;
-    }
-  }
-
-  #key {
-    color: $--bg-color;
-    background-color: $--sub-color;
-    padding: 0.3rem;
-    margin: 0rem 0.5rem;
-    border-radius: 0.1rem;
-    display: inline-block;
-    font-size: 0.7rem;
-    line-height: 0.7rem;
-  }
-
-  .pageLoading {
-    display: grid;
-    justify-content: center;
-  }
-
-  .pageLoading,
-  .pageAccount {
-    .preloader {
-      text-align: center;
-      justify-self: center;
-      display: grid;
-      .barWrapper {
-        display: grid;
-        gap: 1rem;
-        grid-row: 1;
-        grid-column: 1;
-        .bar {
-          width: 20rem;
-          height: 0.5rem;
-          background: $--sub-alt-color;
-          border-radius: $--roundness;
-          .fill {
-            height: 100%;
-            width: 0%;
-            background: $--main-color;
-            border-radius: $--roundness;
-          }
-        }
-      }
-      .icon {
-        grid-row: 1;
-        grid-column: 1;
-        font-size: 2rem;
-        color: $--main-color;
-        margin-bottom: 1rem;
-      }
-    }
-  }
-
-  .devIndicator {
-    position: fixed;
-    font-size: 3rem;
-    color: $--sub-color;
-    opacity: 0.25;
-    z-index: -1;
-
-    &.tl {
-      top: 2rem;
-      left: 2rem;
-    }
-
-    &.tr {
-      top: 2rem;
-      right: 2rem;
-    }
-
-    &.bl {
-      bottom: 2rem;
-      left: 2rem;
-    }
-
-    &.br {
-      bottom: 2rem;
-      right: 2rem;
-    }
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  .hidden {
-    display: none !important;
-  }
-
-  .invisible {
-    opacity: 0 !important;
-    pointer-events: none !important;
-  }
-
-  .button {
-    color: $--text-color;
-    cursor: pointer;
-    transition: background 0.125s, color 0.125s;
-    padding: 0.5rem;
-    border-radius: $--roundness;
-    background: $--sub-alt-color;
-    text-align: center;
-    user-select: none;
-    -webkit-user-select: none;
-    align-content: center;
-    height: min-content;
-    height: -moz-min-content;
-    line-height: 1.25rem;
-    appearance: none;
-    border: none;
-    font-family: inherit;
-    font-size: 1rem;
-
-    &.active {
-      background: $--main-color;
-      color: $--bg-color;
-      &:hover {
-        background: $--text-color;
-      }
-      &:active {
-        background: $--sub-color;
-        color: $--bg-color;
-      }
-    }
-
-    &.disabled {
-      opacity: 0.33;
-      cursor: default;
-      pointer-events: none;
-      &:hover {
-        background: $--text-color;
-        outline: none;
-      }
-      &:active {
-        background: $--sub-color;
-        color: $--bg-color;
-      }
-    }
-
-    &:hover {
-      color: $--bg-color;
-      background: $--text-color;
-      outline: none;
-    }
-    &:focus {
-      outline: 2px solid $--text-color;
-    }
-    &:active {
-      background: $--sub-color;
-      color: $--bg-color;
-    }
-  }
-
-  .textButton {
-    color: $--sub-color;
-    cursor: pointer;
-    transition: background 0.125s, color 0.125s;
-    padding: 0.5rem;
-    border-radius: $--roundness;
-    text-align: center;
-    user-select: none;
-    -webkit-user-select: none;
-    align-content: center;
-    height: min-content;
-    height: -moz-min-content;
-    line-height: 1.25rem;
-    appearance: none;
-    border: none;
-    font-family: inherit;
-    font-size: 1rem;
-    width: max-content;
-    width: -moz-max-content;
-    display: grid;
-    grid-auto-flow: column;
-    gap: 0.25rem;
-    text-decoration: none;
-
-    .fas,
-    .far {
-      display: grid;
-      place-content: center center;
-    }
-
-    &.active {
-      color: $--main-color;
-      &:hover {
-        color: $--text-color;
-      }
-      &:active {
-        color: $--sub-color;
-      }
-    }
-
-    &.disabled {
-      opacity: 0.33;
-      cursor: default;
-      pointer-events: none;
-      &:hover {
-        background: $--text-color;
-        outline: none;
-      }
-      &:active {
-        background: $--sub-color;
-        color: $--bg-color;
-      }
-    }
-
-    &:hover {
-      color: $--text-color;
-    }
-    &:focus {
-      color: $--text-color;
-      outline: none;
-    }
-    &:active {
-      color: $--sub-color;
-    }
-  }
-
-  .scrollToTopButton {
-    bottom: 2rem;
-    right: 2rem;
-    position: fixed;
-    font-size: 2rem;
-    width: 4rem;
-    height: 4rem;
-    text-align: center;
-    line-height: 4rem;
-    background: $--sub-alt-color;
-    border-radius: 99rem;
-    z-index: 99;
-    cursor: pointer;
-    color: $--sub-color;
-    transition: 0.25s;
-    &:hover {
-      background: $--text-color;
-      color: $--bg-color;
-    }
-  }
-
-  .inputAndIndicator {
-    input {
-      width: 100%;
-    }
-    position: relative;
-    .statusIndicator {
-      width: 2.25rem;
-      height: 2.25rem;
-      position: absolute;
-      right: 0;
-      top: 0;
-      display: grid;
-      grid-template-columns: 2.25rem;
-      grid-template-rows: 2.25rem;
-      place-items: center center;
-      cursor: pointer;
-
-      .indicator {
-        grid-column: 1/2;
-        grid-row: 1/2;
-        &.level-1 {
-          color: $--error-color;
-        }
-        &.level0 {
-          color: $--sub-color;
-        }
-        &.level1 {
-          color: $--main-color;
-        }
-      }
-    }
-  }
-
-  .configureAPI.button {
-    position: fixed;
-    left: 2rem;
-    bottom: 2rem;
-    display: grid;
-    grid-auto-flow: column;
-    gap: 0.5rem;
-    text-decoration: none;
-    z-index: 999999999;
-  }
-
-  .avatar {
-    transition: opacity 0.125s, filter 0.125s, webkit-filter 0.125s;
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: 100%;
-    background-position: center center;
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-
-  .badge {
-    background: $--sub-color;
-    color: $--text-color;
-    border-radius: calc($--roundness / 2);
-    user-select: none;
-    display: grid;
-    grid-template-columns: max-content auto;
-    align-items: baseline;
-    .fas,
-    .far {
-      margin-right: 0.3rem;
-      margin-left: 0.3rem;
-      margin-top: 0.15rem;
-      margin-bottom: 0.15rem;
-      font-size: 0.9em;
-    }
-    .text {
-      margin-top: 0.15rem;
-      margin-bottom: 0.15rem;
-      margin-right: 0.3rem;
-    }
-  }
-}

package/src/lib/styles/index.scss

@@ -1,19 +0,0 @@
-
-$--bg-color: #F6F6F6;
-$--main-color: #888888;
-$--caret-color: #dc322f;
-$--sub-color: #888888;
-$--sub-alt-color: #e2d8be;
-$--text-color: #181819;
-$--error-color: #d33682;
-$--error-extra-color: #9b225c;
-$--colorful-error-color: #d33682;
-$--colorful-error-extra-color: #9b225c;
-$--border-color: #E0E0E0;
-$--timer-color: rgba(0, 0, 0, 0.5);
-
-$--roundness: 0.5rem;
-$--font: "Roboto Mono", "Vazirmatn";
-
-@import "animations", "caret", "core", "inputs",
-"popups", "test", "z_media-queries";