@testgorilla/tgo-typing-test 1.0.0 → 2.0.0

package/src/lib/styles/popups.scss

@@ -0,0 +1,1311 @@
+.popupWrapper {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem 0;
+}
+
+#customTextPopupWrapper {
+  #customTextPopup {
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    width: 60vw;
+
+    .buttonsTop {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 1rem;
+    }
+
+    .savedTexts {
+      display: grid;
+      gap: 0.5rem;
+      .title {
+        color: $--sub-color;
+      }
+      .buttons {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+      }
+    }
+
+    textarea {
+      background: $--sub-alt-color;
+      padding: 1rem;
+      color: $--main-color;
+      border: none;
+      outline: none;
+      font-size: 1rem;
+      font-family: $--font;
+      width: 100%;
+      border-radius: $--roundness;
+      resize: vertical;
+      height: 200px;
+      color: $--text-color;
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+
+    .inputs {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+      align-items: center;
+      justify-items: left;
+    }
+
+    .randomInputFields {
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      text-align: center;
+      align-items: center;
+      width: 100%;
+      gap: 1rem;
+    }
+  }
+}
+
+#savedTextsPopupWrapper {
+  #savedTextsPopup {
+    color: $--sub-color;
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    width: 400px;
+    max-height: 80vh;
+    overflow: auto;
+
+    .title {
+      font-size: 1.5rem;
+      color: $--sub-color;
+    }
+
+    .list {
+      display: grid;
+      gap: 1rem;
+      .savedText {
+        display: grid;
+        gap: 0.5rem;
+        grid-template-columns: 1fr 3rem;
+        .button .fas {
+          pointer-events: none;
+        }
+      }
+    }
+  }
+}
+
+#wordFilterPopupWrapper {
+  #wordFilterPopup {
+    color: $--sub-color;
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    width: 400px;
+
+    input {
+      width: 100%;
+    }
+
+    .group {
+      display: grid;
+      gap: 0.5rem;
+    }
+
+    .lengthgrid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto 1fr;
+      column-gap: 1rem;
+    }
+
+    .tip {
+      color: $--sub-color;
+      font-size: 0.8rem;
+    }
+
+    .loadingIndicator {
+      justify-self: center;
+    }
+  }
+}
+
+#quoteRatePopupWrapper {
+  #quoteRatePopup {
+    color: $--sub-color;
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 2rem;
+    width: 800px;
+
+    display: grid;
+    grid-template-areas: "warning warning warning" "spacer2 spacer2 spacer2" "ratingStats ratingStats submitButton" "spacer spacer spacer" "quote quote quote";
+    grid-template-columns: auto 1fr;
+
+    color: $--text-color;
+
+    .warning {
+      grid-area: warning;
+      span {
+        color: $--error-color;
+      }
+    }
+    .spacer,
+    .spacer2 {
+      grid-area: spacer;
+      width: 100%;
+      height: 0.1rem;
+      border-radius: $--roundness;
+      background: $--sub-color;
+      opacity: 0.25;
+    }
+
+    .spacer2 {
+      grid-area: spacer2;
+    }
+
+    .submitButton {
+      font-size: 2rem;
+      grid-area: submitButton;
+      color: $--sub-color;
+      &:hover {
+        color: $--text-color;
+      }
+    }
+
+    .top {
+      color: $--sub-color;
+      font-size: 0.8rem;
+    }
+
+    .ratingStats {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 1rem;
+      grid-area: ratingStats;
+      .top {
+        font-size: 1rem;
+      }
+      .val {
+        font-size: 2.25rem;
+      }
+    }
+
+    .quote {
+      display: grid;
+      grid-area: quote;
+      gap: 1rem;
+      grid-template-areas:
+        "text text text"
+        "id length source";
+      grid-template-columns: 1fr 1fr 3fr;
+      .text {
+        grid-area: text;
+      }
+      .id {
+        grid-area: id;
+      }
+      .length {
+        grid-area: length;
+      }
+      .source {
+        grid-area: source;
+      }
+    }
+
+    .stars {
+      display: grid;
+      color: $--sub-color;
+      font-size: 2rem;
+      grid-template-columns: auto auto auto auto auto;
+      justify-content: flex-start;
+      align-items: center;
+      cursor: pointer;
+    }
+    .star {
+      transition: 0.125s;
+    }
+    i {
+      pointer-events: none;
+    }
+    .star.active {
+      color: $--text-color;
+    }
+  }
+}
+
+#simplePopupWrapper {
+  #simplePopup {
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    width: 400px;
+
+    .title {
+      font-size: 1.5rem;
+      color: $--sub-color;
+    }
+
+    .inputs {
+      display: grid;
+      gap: 1rem;
+    }
+
+    .text {
+      font-size: 1rem;
+      color: $--text-color;
+    }
+  }
+}
+
+#mobileTestConfigPopupWrapper {
+  #mobileTestConfigPopup {
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 1rem;
+    display: grid;
+    gap: 1rem;
+    width: calc(100vw - 2rem);
+    max-width: 400px;
+
+    .title {
+      font-size: 1.5rem;
+      color: $--sub-color;
+    }
+
+    .inputs {
+      display: grid;
+      gap: 1rem;
+    }
+
+    .text {
+      font-size: 1rem;
+      color: $--text-color;
+    }
+
+    .group {
+      display: grid;
+      gap: 0.5rem;
+    }
+  }
+}
+
+#customWordAmountPopupWrapper,
+#customTestDurationPopupWrapper,
+#practiseWordsPopupWrapper,
+#pbTablesPopupWrapper {
+  #customWordAmountPopup,
+  #customTestDurationPopup,
+  #practiseWordsPopup,
+  #pbTablesPopup {
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    width: 400px;
+
+    .title {
+      font-size: 1.5rem;
+      color: $--sub-color;
+    }
+
+    .tip {
+      font-size: 0.75rem;
+      color: $--sub-color;
+    }
+
+    .text {
+      font-size: 1rem;
+      color: $--text-color;
+    }
+  }
+
+  #customTestDurationPopup {
+    .preview {
+      font-size: 0.75rem;
+      color: $--sub-color;
+    }
+  }
+}
+
+#googleSignUpPopup {
+  background: $--bg-color;
+  border-radius: $--roundness;
+  padding: 2rem;
+  display: grid;
+  gap: 1rem;
+  width: 400px;
+  .title {
+    font-size: 1.5rem;
+    color: $--sub-color;
+  }
+  .inputAndIndicator {
+    input {
+      width: 100%;
+    }
+    position: relative;
+    .checkStatus {
+      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;
+
+      .checking,
+      .available,
+      .unavailable,
+      .taken {
+        grid-column: 1/2;
+        grid-row: 1/2;
+      }
+      .checking {
+        color: $--sub-color;
+      }
+      .available {
+        color: $--main-color;
+      }
+      .unavailable,
+      .taken {
+        color: $--error-color;
+      }
+    }
+  }
+}
+
+#shareTestSettingsPopup {
+  background: $--bg-color;
+  border-radius: $--roundness;
+  padding: 2rem;
+  display: grid;
+  gap: 1rem;
+  width: 500px;
+  .title {
+    font-size: 1.5rem;
+    color: $--sub-color;
+  }
+  .subgroup {
+    padding-left: 2rem;
+  }
+  .tooLongWarning {
+    font-size: 0.75rem;
+    color: $--error-color;
+  }
+}
+#cookiePopupWrapper {
+  .extensionMessage {
+    position: fixed;
+    right: 2rem;
+    bottom: 2rem;
+    padding: 1rem;
+    width: 465px;
+    font-size: 0.75rem;
+  }
+  #cookiePopup {
+    position: fixed;
+    right: 2rem;
+    bottom: 2rem;
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    width: 465px;
+    z-index: 100000001;
+    user-select: none;
+    .main {
+      display: grid;
+      gap: 1rem;
+    }
+    .title {
+      font-size: 1.5rem;
+      color: $--sub-color;
+    }
+    .buttons {
+      margin-top: 0.25rem;
+      display: grid;
+      grid-auto-flow: column;
+      gap: 1rem;
+      grid-template-columns: 1fr 2.25rem;
+    }
+    .settings {
+      display: grid;
+      gap: 1rem;
+      .customTextCheckbox {
+        background: $--sub-color;
+      }
+      .cookie label {
+        display: grid;
+        gap: 0 1rem;
+        grid-template-columns: 1fr min-content;
+        grid-template-areas:
+          "title check"
+          "description check";
+        .title {
+          grid-area: title;
+          font-size: 1.25rem;
+        }
+        .description {
+          grid-area: description;
+        }
+        .customTextCheckbox {
+          place-self: center;
+          grid-area: check;
+        }
+      }
+      .cookie.ads label {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+          "title"
+          "description";
+        a {
+          margin-top: 0.25rem;
+        }
+      }
+    }
+  }
+}
+
+#videoAdPopupWrapper {
+  display: flex;
+  padding: 2rem;
+  #videoAdPopup {
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    width: 100%;
+    max-width: 1000px;
+    aspect-ratio: 16/9;
+    display: grid;
+    grid-template-areas: "middle";
+    .preloader {
+      grid-area: middle;
+      display: grid;
+      place-items: center center;
+      gap: 1rem;
+      font-size: 2rem;
+      color: $--main-color;
+      height: max-content;
+      align-self: center;
+    }
+    .video {
+      grid-area: middle;
+    }
+  }
+}
+
+#pbTablesPopupWrapper #pbTablesPopup {
+  .title {
+    color: $--text-color;
+  }
+  min-width: 50rem;
+  max-height: calc(100vh - 10rem);
+  overflow-y: scroll;
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    color: $--text-color;
+
+    td {
+      padding: 0.5rem 0.5rem;
+    }
+
+    thead {
+      color: $--sub-color;
+      font-size: 0.75rem;
+    }
+
+    tbody tr:nth-child(odd) td {
+      background: $--sub-alt-color;
+    }
+
+    td.infoIcons span {
+      margin: 0 0.1rem;
+    }
+    .miniResultChartButton {
+      opacity: 0.25;
+      transition: 0.25s;
+      cursor: pointer;
+      &:hover {
+        opacity: 1;
+      }
+    }
+    .sub {
+      opacity: 0.5;
+    }
+    td {
+      text-align: right;
+    }
+    td:nth-child(6),
+    td:nth-child(7) {
+      text-align: center;
+    }
+    tbody td:nth-child(1) {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+#customThemeShareWrapper {
+  #customThemeShare {
+    width: 50vw;
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    overflow-y: scroll;
+  }
+}
+
+#quoteSearchPopupWrapper {
+  .highlight {
+    color: $--main-color;
+  }
+
+  #quoteSearchPopup {
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    width: 80vw;
+    max-width: 1000px;
+    height: 80vh;
+    grid-template-rows: auto auto auto 1fr;
+
+    #quoteSearchTop {
+      display: flex;
+      justify-content: space-between;
+
+      .title {
+        font-size: 1.5rem;
+        color: $--sub-color;
+      }
+
+      .buttons {
+        width: 33%;
+        display: grid;
+        gap: 0.5rem;
+        .button {
+          width: 100%;
+        }
+      }
+    }
+
+    #quoteSearchControlsWrapper {
+      display: grid;
+      grid-template-columns: 1.5fr 1fr max-content;
+      gap: 1rem;
+
+      #searchBox {
+        width: 100%;
+      }
+
+      #toggleShowFavorites {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.4rem 1rem;
+      }
+    }
+
+    #extraResults {
+      text-align: center;
+      color: $--sub-color;
+    }
+    #quoteSearchResults {
+      display: grid;
+      gap: 0.5rem;
+      height: auto;
+      overflow-y: scroll;
+      align-content: baseline;
+
+      .searchResult {
+        display: grid;
+        grid-template-columns: 1fr 1fr 3fr 0fr 0fr;
+        grid-template-areas:
+          "text text text text text"
+          "id len source report favorite";
+        grid-auto-rows: auto;
+        width: 100%;
+        gap: 0.5rem;
+        transition: 0.25s;
+        padding: 1rem;
+        box-sizing: border-box;
+        user-select: none;
+        cursor: pointer;
+        height: min-content;
+
+        .text {
+          grid-area: text;
+          overflow: visible;
+          color: $--text-color;
+        }
+        .id {
+          grid-area: id;
+          font-size: 0.8rem;
+          color: $--sub-color;
+        }
+        .length {
+          grid-area: len;
+          font-size: 0.8rem;
+          color: $--sub-color;
+        }
+        .source {
+          grid-area: source;
+          font-size: 0.8rem;
+          color: $--sub-color;
+        }
+        .resultChevron {
+          grid-area: chevron;
+          display: flex;
+          align-items: center;
+          justify-items: center;
+          color: $--sub-color;
+          font-size: 2rem;
+        }
+        .report {
+          grid-area: report;
+          color: $--sub-color;
+          transition: 0.25s;
+          &:hover {
+            color: $--text-color;
+          }
+        }
+        .favorite {
+          grid-area: favorite;
+          color: $--sub-color;
+          transition: 0.25s;
+          &:hover {
+            color: $--text-color;
+          }
+        }
+        .sub {
+          opacity: 0.5;
+        }
+      }
+      .searchResult:hover {
+        background: $--sub-alt-color;
+        border-radius: 5px;
+      }
+    }
+  }
+}
+#settingsImportWrapper {
+  #settingsImport {
+    width: 50vw;
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    overflow-y: scroll;
+  }
+}
+
+#quoteSubmitPopup {
+  background: $--bg-color;
+  border-radius: $--roundness;
+  padding: 2rem;
+  display: grid;
+  gap: 1rem;
+  width: 1000px;
+  grid-template-rows: auto auto auto auto auto auto auto auto auto;
+  height: 100%;
+  max-height: 40rem;
+  overflow-y: scroll;
+
+  label {
+    color: $--sub-color;
+    margin-bottom: -1rem;
+  }
+
+  .title {
+    font-size: 1.5rem;
+    color: $--sub-color;
+  }
+  textarea {
+    resize: vertical;
+    width: 100%;
+    padding: 10px;
+    line-height: 1.2rem;
+    min-height: 5rem;
+  }
+  .characterCount {
+    position: absolute;
+    top: -1.25rem;
+    right: 0.25rem;
+    color: $--sub-color;
+    user-select: none;
+    &.red {
+      color: $--error-color;
+    }
+  }
+}
+
+#apeKeysPopup {
+  background: $--bg-color;
+  border-radius: $--roundness;
+  padding: 2rem;
+  display: grid;
+  gap: 1rem;
+  width: 1000px;
+  max-width: calc(100vw - 4rem);
+  min-height: 18rem;
+  overflow-y: scroll;
+  grid-template-rows: max-content auto;
+  align-items: baseline;
+  gap: 1rem;
+
+  .top {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    .title {
+      font-size: 1.5rem;
+      color: $--sub-color;
+    }
+    .button {
+      padding: 0.4rem 2rem;
+    }
+  }
+
+  .textButton {
+    justify-content: center;
+  }
+
+  .keyButtons {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 1rem;
+    .button {
+      width: 3rem;
+    }
+  }
+
+  table {
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+
+    tr td:first-child {
+      text-align: center;
+    }
+
+    tr.me {
+      td {
+        color: $--main-color;
+      }
+    }
+
+    td {
+      padding: 0.5rem 0.5rem;
+    }
+
+    thead {
+      color: $--sub-color;
+      font-size: 0.75rem;
+
+      td {
+        padding: 0.5rem;
+        background: $--bg-color;
+        position: -webkit-sticky;
+        position: sticky;
+        top: 0;
+        z-index: 99;
+      }
+    }
+
+    tbody {
+      color: $--text-color;
+
+      tr:nth-child(odd) td {
+        background: $--sub-alt-color;
+      }
+    }
+
+    tfoot {
+      td {
+        padding: 1rem 0.5rem;
+        position: -webkit-sticky;
+        position: sticky;
+        bottom: -5px;
+        background: $--bg-color;
+        color: $--main-color;
+        z-index: 4;
+      }
+    }
+
+    tr {
+      td:first-child {
+        padding-left: 1rem;
+      }
+      td:last-child {
+        padding-right: 1rem;
+      }
+    }
+  }
+}
+
+#quoteApprovePopup {
+  background: $--bg-color;
+  border-radius: $--roundness;
+  padding: 2rem;
+  display: grid;
+  gap: 1rem;
+  width: 1000px;
+  height: 80vh;
+  grid-template-rows: auto 1fr;
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+    .title {
+      font-size: 1.5rem;
+      color: $--sub-color;
+    }
+    .button {
+      width: 33%;
+    }
+  }
+
+  .quotes {
+    display: grid;
+    gap: 1rem;
+    height: auto;
+    overflow-y: scroll;
+    align-content: baseline;
+
+    .quote {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-auto-rows: auto 2rem;
+      width: 100%;
+      gap: 1rem;
+      transition: 0.25s;
+      box-sizing: border-box;
+      user-select: none;
+      height: min-content;
+      margin-bottom: 1rem;
+
+      .text {
+        grid-column: 1/2;
+        grid-row: 1/2;
+        overflow: visible;
+        color: $--text-color;
+        resize: vertical;
+        min-height: 4rem;
+      }
+      .source {
+        grid-column: 1/2;
+        grid-row: 2/3;
+        color: $--text-color;
+      }
+      .buttons {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-right: 1rem;
+        grid-column: 2/3;
+        grid-row: 1/4;
+        color: $--sub-color;
+      }
+
+      .bottom {
+        display: flex;
+        justify-content: space-around;
+        color: $--sub-color;
+        .length.red {
+          color: $--error-color;
+        }
+      }
+
+      .sub {
+        opacity: 0.5;
+      }
+    }
+    .searchResult:hover {
+      background: $--sub-alt-color;
+      border-radius: 5px;
+    }
+  }
+}
+
+#quoteReportPopupWrapper {
+  #quoteReportPopup {
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    grid-template-rows: auto auto auto auto auto auto auto auto auto;
+    height: auto;
+    max-height: 40rem;
+    overflow-y: scroll;
+    width: calc(100% - 4rem);
+    margin-left: 2rem;
+    max-width: 800px;
+
+    label {
+      color: $--sub-color;
+      margin-bottom: -1rem;
+    }
+
+    .quote {
+      font-size: 1.5rem;
+    }
+
+    .title {
+      font-size: 1.5rem;
+      color: $--sub-color;
+    }
+
+    textarea {
+      resize: vertical;
+      width: 100%;
+      padding: 10px;
+      line-height: 1.2rem;
+      min-height: 5rem;
+    }
+
+    .characterCount {
+      position: absolute;
+      top: -1.25rem;
+      right: 0.25rem;
+      color: $--sub-color;
+      user-select: none;
+      &.red {
+        color: $--error-color;
+      }
+    }
+  }
+}
+
+#resultEditTagsPanelWrapper {
+  #resultEditTagsPanel {
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    overflow-y: scroll;
+    width: 500px;
+
+    .buttons {
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+}
+
+#versionHistoryWrapper {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  display: grid;
+  justify-content: center;
+  align-items: start;
+  padding: 5rem 0;
+
+  #versionHistory {
+    width: 75vw;
+    height: 100%;
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    @extend .ffscroll;
+    overflow-y: scroll;
+
+    .tip {
+      text-align: center;
+      color: $--sub-color;
+    }
+
+    .releases {
+      display: grid;
+      gap: 4rem;
+
+      .release {
+        display: grid;
+        grid-template-areas:
+          "title date"
+          "body body";
+
+        .title {
+          grid-area: title;
+          font-size: 2rem;
+          color: $--sub-color;
+        }
+
+        .date {
+          grid-area: date;
+          text-align: right;
+          color: $--sub-color;
+          align-self: center;
+        }
+
+        .body {
+          grid-area: body;
+          color: $--text-color;
+        }
+
+        &:last-child {
+          margin-bottom: 2rem;
+        }
+      }
+    }
+  }
+}
+
+#supportMeWrapper {
+  #supportMe {
+    width: 900px;
+    overflow-y: scroll;
+    max-height: 100%;
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    grid-template-rows: auto auto auto;
+    gap: 1rem;
+    @extend .ffscroll;
+
+    .title {
+      font-size: 1.5rem;
+      color: $--sub-color;
+    }
+
+    .text {
+      color: $--text-color;
+    }
+
+    .subtext {
+      color: $--sub-color;
+      font-size: 0.75rem;
+    }
+
+    .buttons {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 1rem;
+
+      .button {
+        display: block;
+        width: 100%;
+        height: 100%;
+        padding: 1rem 0;
+        display: grid;
+        gap: 1rem;
+        text-decoration: none;
+        .text {
+          transition: 0.25s;
+        }
+        &:hover .text {
+          color: $--bg-color;
+        }
+        .icon {
+          font-size: 3rem;
+          line-height: 3rem;
+        }
+      }
+    }
+  }
+}
+
+#contactPopupWrapper {
+  #contactPopup {
+    overflow-y: scroll;
+    max-height: 100%;
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    grid-template-rows: auto auto auto;
+    gap: 1rem;
+    @extend .ffscroll;
+    margin: 0 2rem;
+    max-width: 900px;
+
+    .title {
+      font-size: 1.5rem;
+      line-height: 2rem;
+      color: $--sub-color;
+    }
+
+    .text {
+      color: $--text-color;
+      span {
+        color: $--error-color;
+      }
+    }
+
+    .subtext {
+      color: $--sub-color;
+      font-size: 0.75rem;
+      grid-area: subtext;
+    }
+
+    .buttons {
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: 1fr 1fr;
+
+      .button {
+        display: block;
+        width: 100%;
+        height: 100%;
+        padding: 1rem 0;
+        display: grid;
+        text-decoration: none;
+        grid-template-areas: "icon textgroup";
+        grid-template-columns: auto 1fr;
+        text-align: left;
+        align-items: center;
+        .textGroup {
+          grid-area: textgroup;
+        }
+        .text {
+          font-size: 1.5rem;
+          line-height: 2rem;
+          transition: 0.25s;
+        }
+        &:hover .text {
+          color: $--bg-color;
+        }
+        .icon {
+          grid-area: icon;
+          font-size: 2rem;
+          line-height: 2rem;
+          padding: 0 1rem;
+        }
+      }
+    }
+  }
+}
+
+#presetWrapper {
+  #presetEdit {
+    .title {
+      font-size: 1.5rem;
+      color: $--sub-color;
+    }
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    overflow-y: scroll;
+  }
+}
+
+#tagsWrapper,
+#newResultFilterPresetPopupWrapper,
+#editProfilePopupWrapper {
+  #tagsEdit,
+  #newResultFilterPresetPopup,
+  #editProfilePopup {
+    max-height: 90vh;
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    overflow-y: scroll;
+    .title {
+      font-size: 1.5rem;
+      color: $--sub-color;
+    }
+  }
+}
+
+#editProfilePopup {
+  width: 100%;
+  max-width: 600px;
+  label {
+    color: $--sub-color;
+  }
+  input {
+    width: 100%;
+  }
+  textarea {
+    resize: vertical;
+    width: 100%;
+    padding: 10px;
+    line-height: 1.2rem;
+    min-height: 5rem;
+    max-height: 10rem;
+  }
+
+  .socialURL {
+    display: flex;
+  }
+
+  .socialURL > p {
+    margin-block: 0.5rem;
+    margin-inline-end: 0.5rem;
+  }
+
+  .badgeSelectionContainer {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .badgeSelectionItem {
+    margin-bottom: 0.5rem;
+    width: max-content;
+    opacity: 25%;
+    cursor: pointer;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .badgeSelectionItem.selected,
+  .badgeSelectionItem:hover {
+    opacity: 100%;
+  }
+}
+
+#customThemesWrapper {
+  #customThemesEdit {
+    background: $--bg-color;
+    border-radius: $--roundness;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    overflow-y: scroll;
+  }
+}