@testgorilla/tgo-typing-test 2.0.0 → 2.0.1

package/src/lib/styles/z_media-queries.scss

@@ -1,848 +0,0 @@
-@media only screen and (max-width: 1330px) {
-  .ad.ad-v {
-    display: none;
-  }
-  #app {
-    grid-template-columns: auto;
-  }
-}
-
-@media only screen and (max-width: 1250px) {
-  #leaderboardsWrapper #leaderboards {
-    .mainTitle {
-      font-size: 2rem;
-    }
-    .title {
-      font-size: 1rem;
-    }
-    .leaderboardsTop {
-      grid-template-columns: auto 1fr max-content;
-      .buttonGroup {
-        grid-auto-flow: row;
-        gap: 0.5rem;
-      }
-    }
-    .tables table {
-      .avatarNameBadge .badge .text {
-        display: none;
-      }
-      tr td:first-child {
-        padding-left: 0.25rem;
-      }
-      tr td:last-child {
-        padding-right: 0.25rem;
-      }
-      td {
-        padding: 0.25rem 0.5rem;
-      }
-    }
-  }
-  #quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchControlsWrapper {
-    grid-template-columns: 1fr 1fr max-content;
-  }
-}
-
-@media only screen and (max-width: 1050px) {
-  .profile .pbsWords,
-  .profile .pbsTime {
-    font-size: 0.8rem;
-  }
-  .profile .details.bioAndKey {
-    .bioAndKeyboard .value {
-      font-size: 0.75rem;
-    }
-  }
-  .pageSettings .section.fullWidth .buttons {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-  #quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchControlsWrapper {
-    grid-template-columns: 1fr;
-  }
-  #result .morestats {
-    gap: 1rem;
-    grid-template-rows: 1fr 1fr;
-  }
-  #supportMe {
-    width: 90vw !important;
-    .buttons {
-      .button {
-        .icon {
-          font-size: 3rem !important;
-          line-height: 3rem !important;
-        }
-      }
-    }
-  }
-  #customTextPopup {
-    width: 80vw !important;
-
-    .wordfilter.button {
-      width: 50% !important;
-    }
-  }
-}
-
-@media only screen and (max-width: 1000px) {
-  #quoteRatePopup {
-    width: 90vw !important;
-  }
-  #bottom {
-    .leftright {
-      .left {
-        gap: 0.25rem 1rem;
-        display: grid;
-        grid-template-rows: 1fr 1fr;
-        grid-auto-flow: row;
-        grid-template-columns: auto auto auto auto;
-      }
-      .right {
-        display: grid;
-        grid-template-rows: 1fr 1fr;
-        gap: 0.25rem 1rem;
-      }
-    }
-  }
-  #leaderboardsWrapper #leaderboards {
-    .tables table {
-      tr td:nth-child(5) {
-        display: none;
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 900px) {
-  .ad.ad-h {
-    display: none;
-  }
-  .ad.ad-h-s {
-    display: grid;
-  }
-  .profile .pbsWords,
-  .profile .pbsTime {
-    font-size: 1rem;
-  }
-  .profile {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
-    grid-template-areas:
-      "info"
-      "pbsTime"
-      "pbsWords";
-    .details.soc {
-      grid-template-columns: 1.25fr auto 1fr auto auto;
-      .typingStats {
-        grid-template-columns: 1fr;
-      }
-    }
-    .details.bioAndKey {
-      grid-template-columns: 1.25fr auto auto auto 1fr;
-      .typingStats {
-        grid-template-columns: 1fr;
-      }
-    }
-    .details.both {
-      grid-template-columns: 1.25fr auto 1.25fr auto;
-      grid-template-areas:
-        "avAndName sep2 bioAndKey bioAndKey"
-        "typingStats typingStats typingStats socials";
-      .sep1,
-      .sep3 {
-        display: none;
-      }
-      .typingStats {
-        grid-template-columns: 1fr 1fr 1fr;
-        width: 100%;
-      }
-      .socials {
-        justify-content: start;
-        .title {
-          display: block;
-        }
-        .value {
-          grid-auto-flow: column;
-        }
-      }
-    }
-    .details.none {
-      grid-template-columns: 1fr auto 1fr;
-      .typingStats {
-        grid-template-columns: 1fr;
-      }
-    }
-  }
-  #leaderboards {
-    .mainTitle {
-      font-size: 1.5rem !important;
-    }
-  }
-  #bannerCenter .banner .container {
-    grid-template-columns: 1fr auto;
-    .image {
-      display: none;
-    }
-    .lefticon,
-    .righticon {
-      display: none;
-    }
-    .text {
-      margin-left: 1.5rem;
-      text-align: left;
-      justify-self: start;
-    }
-  }
-  .merchBanner {
-    img {
-      display: none;
-    }
-    .text {
-      padding: 0.25rem 0;
-    }
-  }
-  .pageSettings {
-    .section.autoSwitchThemeInputs {
-      grid-template-columns: 1fr 3fr;
-    }
-  }
-  .pageAccount {
-    .group.personalBestTables {
-      .tables {
-        grid-template-columns: 1fr;
-      }
-    }
-    .group.history {
-      table {
-        thead,
-        tbody {
-          td:nth-child(1),
-          td:nth-child(8),
-          td:nth-child(9) {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 800px) {
-  .pageSettings .settingsGroup.quickNav .links {
-    grid-auto-flow: unset;
-    grid-template-columns: 1fr 1fr 1fr;
-    justify-items: center;
-  }
-  #centerContent {
-    #top {
-      grid-template-areas:
-        "logo config"
-        "menu config";
-      grid-template-columns: auto auto;
-      .logo {
-        margin-bottom: 0;
-      }
-    }
-
-    #menu {
-      gap: 0.5rem;
-      font-size: 0.8rem;
-      line-height: 0.8rem;
-      margin-top: -0.5rem;
-
-      .textButton {
-        padding: 0.25rem;
-      }
-    }
-  }
-
-  #contactPopupWrapper #contactPopup .buttons {
-    grid-template-columns: 1fr;
-  }
-
-  .pageAbout .section {
-    .contributors,
-    .supporters {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-    .contactButtons,
-    .supportButtons {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  .pageSettings .section.customBackgroundFilter {
-    .groups {
-      grid-template-columns: 1fr;
-    }
-    .saveContainer {
-      grid-column: -1/-2;
-    }
-  }
-
-  .pageSettings {
-    .section.themes .tabContent.customTheme {
-    }
-  }
-
-  #commandLine,
-  #commandLineInput {
-    width: 600px !important;
-  }
-  #leaderboardsWrapper {
-    #leaderboards {
-      .leaderboardsTop {
-        flex-direction: column;
-        align-items: baseline;
-        grid-template-areas:
-          "title title"
-          "subtitle subtitle"
-          "yesterday yesterday"
-          "buttons buttons";
-        grid-template-columns: 1fr;
-        .buttons {
-          margin-top: 0.5rem;
-        }
-        .buttonGroup {
-          grid-auto-flow: column;
-        }
-        .showYesterdayButton {
-          margin-left: 0;
-        }
-      }
-      .tables {
-        grid-template-columns: unset;
-        table {
-          .avatarNameBadge .badge .text {
-            display: block;
-          }
-          tr td:last-child {
-            width: 30%;
-          }
-        }
-      }
-      .tables .rightTableWrapper,
-      .tables .leftTableWrapper {
-        height: calc(50vh - 10rem);
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 700px) {
-  .pageAccount .presetFilterButtons .buttons {
-    grid-template-columns: 1fr;
-  }
-  .pageAccount {
-    .triplegroup {
-      grid-template-columns: 1fr 1fr;
-      .emptygroup {
-        display: none;
-      }
-    }
-    .group.chart .below {
-      grid-template-columns: 1fr;
-      gap: 0.5rem;
-    }
-    .group.topFilters .buttonsAndTitle .buttons {
-      display: grid;
-      justify-content: unset;
-    }
-    .group.history {
-      table {
-        thead,
-        tbody {
-          td:nth-child(6) {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-  .badge::after,
-  .badge::before {
-    display: none;
-  }
-}
-
-@media only screen and (max-width: 650px) {
-  .profile {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
-    grid-template-areas:
-      "info"
-      "pbsTime"
-      "pbsWords";
-    .details.none {
-      grid-template-areas:
-        "avAndName"
-        "typingStats";
-      grid-template-columns: 1fr;
-      .separator {
-        display: none;
-      }
-      .typingStats {
-        grid-template-columns: 1fr 1fr 1fr;
-      }
-    }
-    .details.bioAndKey {
-      grid-template-areas:
-        "avAndName bioAndKey"
-        "typingStats typingStats";
-      grid-template-columns: 1fr 1fr;
-      .separator {
-        display: none;
-      }
-      .typingStats {
-        grid-template-columns: 1fr 1fr 1fr;
-      }
-    }
-    .details.soc {
-      grid-template-areas:
-        "avAndName"
-        "typingStats"
-        "socials";
-      grid-template-columns: 1fr;
-      .separator {
-        display: none;
-      }
-      .typingStats {
-        grid-template-columns: 1fr 1fr 1fr;
-      }
-      .socials {
-        justify-content: start;
-        .title {
-          display: block;
-        }
-        .value {
-          grid-auto-flow: column;
-        }
-      }
-    }
-    .details.both {
-      grid-template-areas:
-        "avAndName bioAndKey"
-        "typingStats typingStats"
-        "socials socials";
-      grid-template-columns: 1fr 1fr;
-      .separator {
-        display: none;
-      }
-      .typingStats {
-        grid-template-columns: 1fr 1fr 1fr;
-      }
-      .socials {
-        justify-content: start;
-        .title {
-          display: block;
-        }
-        .value {
-          grid-auto-flow: column;
-        }
-      }
-    }
-  }
-  #quoteRatePopup {
-    .ratingStats {
-      grid-template-columns: 1fr 1fr !important;
-    }
-    .quote {
-      grid-template-areas:
-        "text text text"
-        "source source source"
-        "id length length" !important;
-    }
-  }
-  .pageSettings .section {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "title"
-      "text"
-      "buttons";
-
-    & > .text {
-      margin-bottom: 1rem;
-    }
-  }
-
-  #result {
-    .buttons {
-      grid-template-rows: 1fr 1fr 1fr;
-      #nextTestButton {
-        grid-column: 1/5;
-        width: 100%;
-        text-align: center;
-      }
-    }
-  }
-
-  #supportMe {
-    width: 80vw !important;
-    .buttons {
-      grid-template-columns: none !important;
-      .button {
-        grid-template-columns: auto 1fr;
-        align-items: center;
-        .icon {
-          font-size: 2rem !important;
-          line-height: 2rem !important;
-          margin-left: 2rem;
-        }
-      }
-    }
-  }
-
-  .pageSettings .section.fullWidth .buttons {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  .pageAbout .section .supporters,
-  .pageAbout .section .contributors {
-    grid-template-columns: 1fr 1fr;
-  }
-  #top .logo .bottom {
-    margin-top: 0;
-  }
-  .pageLogin {
-    display: grid;
-    gap: 5rem;
-    grid-auto-flow: unset;
-  }
-  #middle {
-    #result {
-      grid-template-areas:
-        "stats stats"
-        "chart chart"
-        "morestats morestats";
-      .stats {
-        grid-template-areas: "wpm acc";
-        gap: 2rem;
-      }
-      .stats.morestats {
-        grid-template-rows: 1fr 1fr 1fr;
-        gap: 1rem;
-      }
-    }
-  }
-  #leaderboardsWrapper #leaderboards .leaderboardsTop .buttonGroup {
-    grid-auto-flow: row;
-  }
-  #commandLine,
-  #commandLineInput {
-    width: 500px !important;
-  }
-  #customTextPopupWrapper {
-    #customTextPopup {
-      .wordfilter.button {
-        width: 100% !important;
-        justify-self: auto;
-      }
-
-      .inputs {
-        display: flex !important;
-        flex-direction: column;
-        justify-content: flex-start;
-      }
-    }
-  }
-
-  .pageAccount {
-    .group.history {
-      table {
-        thead,
-        tbody {
-          td:nth-child(7),
-          td:nth-child(5) {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 550px) {
-  .profile .pbsWords,
-  .profile .pbsTime {
-    font-size: 0.9rem;
-  }
-  .profile {
-    .pbsWords,
-    .pbsTime {
-      grid-template-columns: 1fr 1fr;
-    }
-    .details.none .typingStats {
-      grid-template-columns: 1fr;
-    }
-    .details.bioAndKey {
-      grid-template-areas:
-        "avAndName"
-        "bioAndKey"
-        "typingStats";
-      grid-template-columns: 1fr;
-      .typingStats {
-        grid-template-columns: 1fr;
-      }
-    }
-    .details.both {
-      grid-template-areas:
-        "avAndName"
-        "bioAndKey"
-        "typingStats"
-        "socials";
-      grid-template-columns: 1fr;
-      .typingStats {
-        grid-template-columns: 1fr;
-      }
-    }
-  }
-  #cookiePopupWrapper {
-    #cookiePopup,
-    .extensionMessage {
-      right: 1rem;
-      bottom: 1rem;
-      width: calc(100vw - 2rem);
-    }
-  }
-
-  #contactPopupWrapper #contactPopup .buttons .button .text {
-    font-size: 1rem;
-  }
-  #contactPopupWrapper #contactPopup .buttons .button .icon {
-    font-size: 1.5rem;
-    line-height: 1.5rem;
-  }
-  #contactPopupWrapper #contactPopup {
-    padding: 1rem;
-  }
-  .pageAbout .section .supporters,
-  .pageAbout .section .contributors {
-    grid-template-columns: 1fr;
-  }
-
-  #simplePopupWrapper #simplePopup {
-    width: 90vw;
-  }
-
-  #quoteReportPopup {
-    width: calc(100% - 2rem);
-    margin-left: 1rem;
-    max-width: 800px;
-    padding: 1rem;
-  }
-
-  .pageSettings {
-    .settingsGroup.quickNav {
-      display: none;
-    }
-    .section.fullWidth .buttons {
-      grid-template-columns: 1fr;
-    }
-    .section .buttons {
-      grid-auto-flow: row;
-    }
-    .section.customBackgroundFilter .groups .group {
-      grid-template-columns: auto 1fr;
-      .title {
-        grid-column: 1/3;
-      }
-    }
-  }
-
-  .pageAbout .section {
-    .contactButtons,
-    .supportButtons {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  .pageAccount {
-    .triplegroup {
-      grid-template-columns: 1fr;
-    }
-    .group.history {
-      table {
-        thead,
-        tbody {
-          td:nth-child(3) {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-
-  #top {
-    align-items: self-end;
-    .logo {
-      .icon {
-        width: 1.5rem !important;
-      }
-      .text {
-        font-size: 1.5rem !important;
-        margin-bottom: 0.3rem !important;
-      }
-      .bottom {
-        font-size: 1.75rem;
-        line-height: 1.75rem;
-        margin-top: 0;
-      }
-      .top {
-        display: none;
-      }
-    }
-    #menu {
-      .textButton {
-        padding: 0;
-      }
-    }
-  }
-  #bottom {
-    .leftright {
-      .left {
-        gap: 0.25rem 1rem;
-        display: grid;
-        grid-template-rows: 1fr 1fr 1fr;
-        grid-template-columns: auto auto auto;
-        grid-auto-flow: row;
-      }
-      .right {
-        display: grid;
-        grid-template-rows: 1fr 1fr 1fr;
-        gap: 0.25rem 1rem;
-      }
-    }
-  }
-  #centerContent {
-    #top {
-      grid-template-columns: 1fr auto;
-      .desktopConfig {
-        display: none;
-      }
-      .mobileConfig {
-        display: block;
-      }
-    }
-    padding: 1rem;
-  }
-  #middle {
-    #result {
-      .stats {
-        grid-template-areas:
-          "wpm"
-          "acc";
-        gap: 1rem;
-      }
-    }
-  }
-  #result {
-    .buttons {
-      grid-template-rows: 1fr 1fr 1fr 1fr;
-      #nextTestButton {
-        grid-column: 1/3;
-        width: 100%;
-        text-align: center;
-      }
-    }
-  }
-  #commandLine,
-  #commandLineInput {
-    width: 400px !important;
-  }
-  #leaderboardsWrapper #leaderboards {
-    width: 85vw;
-    .tables .rightTableWrapper,
-    .tables .leftTableWrapper {
-      height: calc(50vh - 10rem);
-    }
-    .tables {
-      grid-template-columns: unset;
-      table {
-        .avatarNameBadge .badge .text {
-          display: block;
-        }
-        tr td:nth-child(4) {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 400px) {
-  #top .config {
-    grid-gap: 0.25rem;
-    .group .buttons {
-      font-size: 0.65rem;
-      line-height: 0.65rem;
-    }
-  }
-
-  #bottom {
-    font-size: 0.65rem;
-    .leftright {
-      grid-template-columns: 1fr 1fr;
-      .left {
-        grid-template-rows: 1fr 1fr 1fr 1fr;
-        grid-template-columns: 1fr 1fr;
-        grid-auto-flow: row;
-      }
-      .right {
-        grid-template-rows: 1fr 1fr 1fr 1fr;
-        gap: 0.25rem 1rem;
-      }
-    }
-  }
-
-  #commandLine,
-  #commandLineInput {
-    width: 300px !important;
-  }
-  #leaderboardsWrapper #leaderboards {
-    .tables .titleAndTable .titleAndButtons {
-      grid-template-columns: unset;
-    }
-    .tables table {
-      tr td:first-child {
-        padding-left: 0.25rem;
-      }
-      tr td:last-child {
-        padding-right: 0.25rem;
-      }
-      td {
-        padding: 0.25rem;
-      }
-    }
-    .tables .rightTableWrapper,
-    .tables .leftTableWrapper {
-      height: calc(50vh - 9rem);
-    }
-  }
-}
-
-@media only screen and (max-width: 350px) {
-  .ad.ad-h-s {
-    display: none;
-  }
-  .pageLogin .side input {
-    width: 90vw;
-  }
-  .page404 {
-    .content {
-      width: 100%;
-      .image {
-        width: 100%;
-      }
-      .big {
-        font-size: 7rem;
-        line-height: 7rem;
-      }
-    }
-  }
-}
-
-@media (hover: none) and (pointer: coarse) {
-  #commandLineMobileButton {
-    display: block !important;
-  }
-}