@testgorilla/tgo-typing-test 1.0.0 → 2.0.0

package/src/lib/styles/animations.scss

@@ -0,0 +1,101 @@
+@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

@@ -0,0 +1,108 @@
+#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

@@ -0,0 +1,498 @@
+@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

@@ -0,0 +1,19 @@
+
+$--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";