@testgorilla/tgo-typing-test 1.0.0 → 2.0.0

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

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