@chrryai/chrry 1.1.78

package/App.module.scss

@@ -0,0 +1,283 @@
+@use "./breakpoints.scss";
+@use "./utils.scss";
+@use "./toRem.scss";
+
+.container {
+  display: flex;
+  gap: toRem.toRem(8.5);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  & > div:last-child {
+    margin-top: toRem.toRem(5);
+  }
+}
+
+.title {
+  font-display: swap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: clamp(1.2rem, 4vw, 1.625rem);
+  margin: 0 0 0 0;
+  gap: toRem.toRem(5);
+  margin-bottom: toRem.toRem(7.5);
+  animation: fadeInScale 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.appsGrid {
+  position: relative;
+  width: 100%;
+  max-width: toRem.toRem(300);
+  padding: 0 toRem.toRem(10);
+}
+.apps {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: toRem.toRem(10);
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.spaceInvader {
+  position: relative;
+  right: toRem.toRem(-5);
+  animation: float 2.5s ease-in-out forwards;
+  @include utils.respect-reduced-motion;
+}
+
+.appItem {
+  animation: slideUp 0.2s ease;
+  @include utils.respect-reduced-motion;
+}
+
+.pacMan {
+  position: absolute;
+  left: toRem.toRem(-2.5) !important;
+  bottom: toRem.toRem(2) !important;
+  animation: slideInFromLeft 0.5s ease-out forwards;
+  @include utils.respect-reduced-motion;
+}
+
+.chrry {
+  position: relative;
+  left: toRem.toRem(-5) !important;
+  animation: slideInFromLeft 0.5s ease-out forwards;
+  @include utils.respect-reduced-motion;
+}
+
+@keyframes slideInFromLeft {
+  0% {
+    left: -20px;
+    opacity: 0;
+  }
+  100% {
+    left: -2.5px;
+    opacity: 1;
+  }
+}
+
+.grip {
+  animation: slideUp 0.2s ease;
+  @include utils.respect-reduced-motion;
+}
+
+.instructions {
+}
+
+.section {
+  display: flex;
+  flex-direction: row;
+  gap: toRem.toRem(10);
+  flex-wrap: wrap;
+
+  &.last {
+    display: none;
+
+    @media (min-height: toRem.toRem(650)) {
+      display: flex;
+    }
+  }
+}
+
+.field {
+  display: flex;
+}
+
+.nameField {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  position: relative;
+  background-color: var(--foreground);
+  color: var(--background);
+  padding: toRem.toRem(2.5) toRem.toRem(12.5);
+  border-radius: toRem.toRem(25);
+
+  .infoIcon {
+    position: relative;
+    top: toRem.toRem(1.5);
+  }
+
+  .nameInput {
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--text-1);
+    font-size: toRem.toRem(16);
+    padding-left: toRem.toRem(5);
+    width: 100%;
+    max-width: toRem.toRem(95);
+    // padding: toRem.toRem(7.5) inherit;
+
+    &:hover {
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+    }
+  }
+}
+
+.icons {
+}
+
+.titleInput {
+  padding-top: toRem.toRem(11.5) !important;
+  padding-bottom: toRem.toRem(11.5) !important;
+  min-width: toRem.toRem(250) !important;
+  border-radius: toRem.toRem(25) !important;
+  border-style: dashed !important;
+}
+
+.appImage {
+  border-radius: 20%;
+}
+
+.appImageWrapper {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(10);
+  position: relative;
+  cursor: pointer;
+}
+
+.editImageButton {
+  padding: toRem.toRem(3) !important;
+  position: absolute;
+  bottom: toRem.toRem(-4);
+  right: toRem.toRem(-5);
+}
+.agentNameForm,
+.titleForm,
+.nameForm {
+  display: flex;
+  align-items: center;
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: toRem.toRem(5);
+  }
+
+  gap: toRem.toRem(7.5);
+
+  & > div {
+    display: flex;
+
+    align-items: center;
+    flex-direction: column;
+    gap: toRem.toRem(7.5);
+    > div {
+      display: flex;
+      align-items: center;
+      gap: toRem.toRem(7.5);
+    }
+  }
+
+  .error {
+    color: var(--accent-0);
+    font-size: toRem.toRem(12);
+  }
+
+  .info {
+    color: var(--shade-7);
+    font-size: toRem.toRem(12);
+
+    &.error {
+      color: var(--accent-0);
+    }
+
+    position: absolute;
+    top: toRem.toRem(-25);
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    text-align: center;
+
+    min-width: toRem.toRem(250);
+    transform: translateX(toRem.toRem(-85));
+  }
+}
+
+.namePreview,
+.agentNameForm {
+  margin-bottom: toRem.toRem(3.5);
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(7.5);
+}
+
+.appTitle {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(7.5);
+}
+
+.titleFormContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: toRem.toRem(10);
+  position: relative;
+}
+
+.titleFormTitle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: toRem.toRem(5);
+  position: relative;
+}
+
+.validationFeedback {
+  color: var(--shade-7);
+  font-size: toRem.toRem(12);
+  font-weight: normal;
+  max-width: toRem.toRem(250);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.appImageContainer {
+  position: relative;
+}
+
+.removeImageButton {
+  position: absolute;
+  top: toRem.toRem(-15);
+  left: toRem.toRem(-15);
+}
+
+.nameImage {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(7.5);
+}

package/Bookmark.module.scss

@@ -0,0 +1,15 @@
+@use "./toRem.scss";
+
+.star {
+  display: inline-flex;
+  &.active {
+    display: inline-flex !important;
+  }
+  font-size: toRem.toRem(12);
+  & {
+    color: var(--shade-6);
+  }
+  &:hover {
+    color: var(--accent-1);
+  }
+}