monkeytype/public/css/style.css

@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
:root {
  --roundness: .25rem;
}

::-webkit-input-placeholder {
  color: var(--sub-color);
  opacity: 1;
  /* Firefox */
}

:-ms-input-placeholder {
  color: var(--sub-color);
  opacity: 1;
  /* Firefox */
}

::-ms-input-placeholder {
  color: var(--sub-color);
  opacity: 1;
  /* Firefox */
}

::placeholder {
  color: var(--sub-color);
  opacity: 1;
  /* Firefox */
}

input {
  outline: none;
  border: none;
  border-radius: var(--roundness);
  background: rgba(0, 0, 0, 0.1);
  color: var(--main-color);
  padding: .5rem;
  font-size: 1rem;
  line-height: 1rem;
  font-family: "Roboto Mono";
}

body {
  margin: 0;
  padding: 2rem 2rem 0 2rem;
  height: 100vh;
  background: var(--bg-color);
  font-family: "Roboto Mono";
  color: var(--main-color);
}

html {
  overflow-y: scroll;
}

a {
  color: var(--sub-color);
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

a:hover {
  color: var(--main-color);
}

.notification {
  position: fixed;
  background: var(--main-color);
  color: var(--bg-color);
  padding: .5rem 1rem;
  border-radius: var(--roundness);
  left: 50%;
  z-index: 9999;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: -5rem;
}

#commandLineWrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  padding: 5rem 0;
}

#commandLineWrapper #commandInput {
  width: 50vw;
  background: var(--bg-color);
  border-radius: var(--roundness);
}

#commandLineWrapper #commandInput textarea {
  background: var(--bg-color);
  padding: 1rem;
  color: var(--main-color);
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: "Roboto Mono";
  width: 100%;
  border-radius: var(--roundness);
  resize: vertical;
  height: 200px;
}

#commandLineWrapper #commandInput .shiftEnter {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: var(--sub-color);
  text-align: center;
}

#commandLineWrapper #commandLine {
  width: 50vw;
  background: var(--bg-color);
  border-radius: var(--roundness);
}

#commandLineWrapper #commandLine input {
  background: var(--bg-color);
  padding: 1rem;
  color: var(--main-color);
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: "Roboto Mono";
  width: 100%;
  border-radius: var(--roundness);
}

#commandLineWrapper #commandLine .separator {
  background: black;
  width: 100%;
  height: 1px;
  margin-bottom: 0.5rem;
}

#commandLineWrapper #commandLine .listTitle {
  color: var(--main-color);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  line-height: 0.75rem;
}

#commandLineWrapper #commandLine .suggestions {
  display: -ms-grid;
  display: grid;
}

#commandLineWrapper #commandLine .suggestions .entry {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: var(--sub-color);
}

#commandLineWrapper #commandLine .suggestions .entry:last-child {
  border-radius: 0 0 var(--roundness) var(--roundness);
}

#commandLineWrapper #commandLine .suggestions .entry.active {
  color: var(--bg-color);
  background: var(--main-color);
}

#resultScreenshot {
  display: none;
  position: absolute;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  white-space: nowrap;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background: var(--bg-color);
}

#resultScreenshot .logo .top {
  color: var(--sub-color);
  font-size: 0.42rem;
  line-height: 0.42rem;
  margin-bottom: -0.3rem;
  margin-left: 0.05rem;
  margin: 0.5rem;
}

#resultScreenshot .logo .bottom {
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: var(--sub-color);
  padding: 0 0.5rem 0.5rem 0.5rem;
}

#resultScreenshot .stats {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#resultScreenshot .stats .group {
  padding: 0.5rem;
}

#resultScreenshot .stats .group .top {
  color: var(--sub-color);
  line-height: 1rem;
}

#resultScreenshot .stats .group .bottom {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

#timerWrapper {
  opacity: 0;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  z-index: -1;
}

#timer {
  position: fixed;
  top: 0;
  right: 0;
  width: 0vw;
  /*   height: 0.5rem; */
  height: 0.5rem;
  background: var(--sub-color);
  /*   background: #0f0f0f; */
  /*   background: red; */
  -webkit-transition: 1s linear;
  transition: 1s linear;
  z-index: -1;
}

#liveWpm {
  font-size: 10rem;
  color: black;
  opacity: 0;
  width: 100%;
  text-align: center;
  z-index: -1;
  height: 0;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

#centerContent {
  max-width: 800px;
  min-width: 600px;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  grid-auto-flow: row;
  /* grid-template-rows: 2rem auto 1rem; */
  height: 100%;
  gap: 1rem;
  /* margin-top: 1rem; */
  /* margin-bottom: 1rem; */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 999;
  -ms-grid-rows: auto 1fr auto;
      grid-template-rows: auto 1fr auto;
}

#caret {
  width: 2px;
  height: 1.5rem;
  background: var(--caret-color);
  -webkit-animation-name: caretFlash;
          animation-name: caretFlash;
  /* animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); */
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  position: absolute;
  border-radius: var(--roundness);
}

@-webkit-keyframes caretFlash {
  0% {
    background: transparent;
  }
  50% {
    background: var(--caret-color);
  }
  100% {
    background: transparent;
  }
}

@keyframes caretFlash {
  0% {
    background: transparent;
  }
  50% {
    background: var(--caret-color);
  }
  100% {
    background: transparent;
  }
}

#menu {
  font-size: 1rem;
  line-height: 1rem;
  color: var(--sub-color);
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  gap: .5rem;
  margin-bottom: -0.4rem;
  width: -webkit-fit-content;
  width: fit-content;
  width: -moz-fit-content;
  /*   transition: 0.25s; */
}

#menu .button {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  padding: 0.5rem;
  border-radius: var(--roundness);
}

#menu .button:focus {
  background: var(--sub-color);
  color: var(--main-color);
  border: none;
  outline: none;
}

#menu .button .icon {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  text-align: center;
  width: 1.25rem;
  height: 1.25rem;
}

#menu .button:hover {
  cursor: pointer;
  color: var(--main-color);
}

#menu .button .text {
  width: 0;
  overflow: hidden;
  /*   transition: .25s; */
}

/* #menu .button:hover .text{
  width: auto;
} */
#top.focus #menu {
  color: transparent !important;
}

#top.focus #menu .button {
  color: transparent !important;
}

#menu .separator {
  width: 2px;
  height: 1rem;
  background-color: var(--sub-color);
}

#top {
  line-height: 2.3rem;
  font-size: 2.3rem;
  /* text-align: center; */
  -webkit-transition: 0.5s;
  transition: 0.5s;
  padding: 0 5px;
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  -ms-grid-columns: auto 1fr auto;
      grid-template-columns: auto 1fr auto;
  margin-bottom: 1rem;
  z-index: 2;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

#top .logo {
  margin-bottom: -0.12rem;
  white-space: nowrap;
}

#top .logo .top {
  font-size: 0.65rem;
  line-height: 0.65rem;
  margin-bottom: -0.4rem;
  margin-left: -0.1rem;
  color: var(--sub-color);
}

#top .logo .bottom {
  margin-left: -0.15rem;
}

#top .config {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: row;
  grid-gap: 0.2rem;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  /*   margin-bottom: 0.1rem; */
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}

#top .config .group {
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

#top .config .punctuationMode {
  margin-bottom: -0.1rem;
}

#top .config .group .buttons {
  font-size: 0.7rem;
  line-height: 0.7rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#top .config .group .buttons .button {
  -webkit-transition: 0.25s;
  transition: 0.25s;
  color: var(--sub-color);
  cursor: pointer;
  margin-right: 0.25rem;
}

#top .config .group .buttons .button:last-child {
  margin-right: 0;
}

#top .config .group .buttons .button:hover {
  color: var(--main-color);
}

#top .config .group .buttons .button.active:hover {
  cursor: default;
}

#top .config .group .buttons .toggleButton.active:hover {
  cursor: pointer;
}

#top .config .group .buttons .button.active {
  color: var(--main-color);
}

#top .config .group .title {
  color: var(--sub-color);
  font-size: 0.5rem;
  line-height: 0.5rem;
  margin-bottom: 0.15rem;
}

#top .result {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1rem;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}

#top.focus .result {
  opacity: 0 !important;
}

#top .result .group .title {
  font-size: 0.65rem;
  line-height: 0.65rem;
  color: var(--sub-color);
}

#top .result .group .val {
  font-size: 1.7rem;
  line-height: 1.7rem;
  color: var(--main-color);
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

#tip {
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: var(--sub-color);
  text-align: center;
  /*   margin-top: 1rem; */
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  margin-top: 1rem;
  opacity: 0;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

key {
  color: var(--bg-color);
  background-color: var(--sub-color);
  /* font-weight: bold; */
  padding: .1rem .3rem;
  margin: 3px 0;
  border-radius: 0.1rem;
  display: inline-block;
  font-size: .7rem;
  line-height: .7rem;
}

#bottom {
  text-align: center;
  line-height: 1rem;
  font-size: 0.75rem;
  color: var(--sub-color);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  margin-bottom: 2rem;
}

#bottom .keyTips {
  margin-bottom: 1rem;
}

#top.focus {
  color: var(--sub-color) !important;
}

#top.focus .config {
  opacity: 0 !important;
}

#bottom.focus {
  opacity: 0 !important;
}

#middle {
  /* display:grid; */
  /* align-items: center; */
  /* justify-content: center; */
  z-index: 999;
}

#result {
  display: -ms-grid;
  display: grid;
  gap: 1rem;
  -ms-grid-columns: auto 1fr;
      grid-template-columns: auto 1fr;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#result .chart {
  max-height: 200px;
  height: 100%;
}

#result .chart chart {
  max-height: 150px;
}

#result .chart .title {
  color: var(--sub-color);
  margin-bottom: 1rem;
}

#result .loginTip {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  text-align: center;
  margin-top: 3rem;
  color: var(--sub-color);
}

#result .stats {
  display: -ms-grid;
  display: grid;
  gap: .5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
      grid-template-areas: "wpm acc" "wpm key" "info info";
}

#result .stats .group .top {
  color: var(--sub-color);
  font-size: 1rem;
  line-height: 1rem;
}

#result .stats .group .bottom {
  color: var(--main-color);
  font-size: 2rem;
  line-height: 2rem;
}

#result .stats .info {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: info;
  color: var(--sub-color);
}

#result .stats .info .top {
  font-size: 1rem;
  line-height: 1.25rem;
}

#result .stats .info .bottom {
  font-size: 1rem;
  line-height: 1rem;
}

#result .stats .wpm {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: wpm;
}

#result .stats .wpm .top {
  font-size: 3rem;
  line-height: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: -.5rem;
}

#result .stats .wpm .top .crownWrapper {
  width: 1.7rem;
  overflow: hidden;
  height: 1.7rem;
  margin-left: .5rem;
  margin-top: .98rem;
}

#result .stats .wpm .top .crownWrapper .crown {
  font-size: .7rem;
  line-height: 1.7rem;
  background: var(--main-color);
  color: var(--bg-color);
  border-radius: .6rem;
  text-align: center;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  width: 1.7rem;
  height: 1.7rem;
}

#result .stats .wpm .bottom {
  font-size: 4rem;
  line-height: 4rem;
}

#result .stats .acc {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: acc;
}

#result .stats .key {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: key;
}

#wordsInput {
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  display: block;
}

#words {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#restartTestButton {
  opacity: 0;
  border-radius: var(--roundness);
  padding: 1rem 5rem;
  width: -webkit-min-content;
  width: min-content;
  width: -moz-min-content;
  color: var(--sub-color);
  -webkit-transition: 0.25s;
  transition: 0.25s;
  margin: 1rem auto 0 auto;
  cursor: pointer;
}

#restartTestButton:hover, #restartTestButton:focus {
  color: var(--main-color);
  outline: none;
}

#restartTestButton:focus {
  background: var(--sub-color);
}

.word {
  margin: 5px 5px;
  color: var(--sub-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  /*   margin-bottom: 1px; */
  border-bottom: 2px solid transparent;
}

.word.error {
  /*   margin-bottom: 1px; */
  border-bottom: 2px solid #da3333;
  text-shadow: 1px 0px 0px var(--bg-color), -1px 0px 0px var(--bg-color), 0px 1px 0px var(--bg-color), 1px 1px 0px var(--bg-color), -1px 1px 0px var(--bg-color);
}

.word.active {
  color: var(--active-word-color);
}

.word letter {
  height: 1rem;
  line-height: 1rem;
  /* margin: 0 1px; */
}

.word letter.correct {
  color: var(--main-color);
}

.word letter.incorrect {
  color: #da3333;
}

.word letter.incorrect.extra {
  color: #791717;
}

.word letter.missing {
  opacity: 0.5;
}

.pageLogin {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-auto-flow: column;
  gap: 1rem;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.pageLogin .side {
  display: -ms-grid;
  display: grid;
  gap: .5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pageLogin form {
  display: -ms-grid;
  display: grid;
  gap: .5rem;
  width: 100%;
}

.pageLogin .preloader {
  position: fixed;
  left: 50%;
  top: 50%;
  font-size: 2rem;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: var(--main-color);
  -webkit-transition: .25s;
  transition: .25s;
}

.pageAbout {
  display: -ms-grid;
  display: grid;
  gap: 2rem;
}

.pageAbout .section {
  display: -ms-grid;
  display: grid;
  gap: .5rem;
}

.pageAbout .section h1 {
  font-size: 1rem;
  line-height: 1rem;
  color: var(--sub-color);
  margin: 0;
}

.pageAbout .section p {
  margin: 0;
  padding: 0;
}

.pageAccount {
  display: -ms-grid;
  display: grid;
  gap: 1rem;
}

.pageAccount .content {
  display: -ms-grid;
  display: grid;
  gap: 1rem;
}

.pageAccount .preloader {
  font-size: 2rem;
  -ms-grid-column-align: center;
      justify-self: center;
}

.pageAccount .signOut {
  -ms-grid-column-align: end;
      justify-self: end;
  color: var(--sub-color);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: .5rem;
  border-radius: var(--roundness);
  cursor: pointer;
  -webkit-transition: .25s;
  transition: .25s;
  float: right;
}

.pageAccount .signOut:hover {
  color: var(--main-color);
}

.pageAccount .signOut .fas {
  margin-right: .5rem;
}

.pageAccount .triplegroup {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
}

.pageAccount .group .title {
  color: var(--sub-color);
}

.pageAccount .group .val {
  font-size: 3rem;
  line-height: 3rem;
}

.pageAccount table {
  border-spacing: 0;
  border-collapse: collapse;
}

.pageAccount table td {
  padding: .5rem .25rem;
}

.pageAccount table thead {
  color: var(--sub-color);
  font-size: .75rem;
}

.pageAccount table tbody tr:nth-child(odd) td {
  background: rgba(0, 0, 0, 0.1);
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.hidden {
  display: none !important;
}
/*# sourceMappingURL=style.css.map */