pixel-react 1.13.43 → 1.13.44

package/lib/styles/MentionUser.scss

@@ -1,37 +0,0 @@
-.select-section {
-  background: var(--base-bg-color);
-  border: 1px solid var(--ff-mini-modal-border);
-  border-radius: 8px;
-  padding: 5px 0;
-  width: 200px;
-  z-index: 99999;
-  position: absolute;
-  top: var(--top);
-  left: var(--left);
-  box-shadow: 0 4px 12px var(--toggle-strip-color);
-
-  .select-group {
-    max-height: 38vh;
-    width: 100%;
-    border: none;
-    overflow-y: auto;
-
-    .mention-option {
-      display: block;
-      padding: 8px 12px;
-      cursor: pointer;
-      transition: background 0.2s;
-    }
-
-    .user-not-found {
-      display: block;
-      padding: 8px 12px;
-      transition: background 0.2s;
-      cursor: not-allowed;
-    }
-
-    .mention-option.hovered {
-      background: var(--ff-progress-bar-bg-color);
-    }
-  }
-}

package/lib/styles/MenuOption.scss

@@ -1,142 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.ff-menu-option-container {
-  cursor: pointer;
-  position: relative;
-  .ff-icon-label {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    .ff-menuicon-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      &:hover {
-        background-color: var(--hover-color);
-        .ff-menuicon-container-add-resource {
-          box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
-        }
-      }
-      &.dark {
-        background-color: var(--brand-color);
-        &:hover {
-          background-color: var(--menu-variant-dark-icon-color);
-          svg {
-            path {
-              fill: var(--brand-color);
-            }
-          }
-        }
-      }
-    }
-
-    .ff-menuicon-container-clicked {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: var(--brand-color);
-      cursor: pointer;
-      &:hover {
-        background-color: var(--brand-color);
-      }
-      &.dark {
-        background-color: var(--menu-variant-dark-icon-color);
-      }
-    }
-  }
-}
-
-.ff-option-card {
-  position: absolute;
-  margin: 4px;
-  border: 1px solid var(--option-card-border-color);
-  background: var(--option-card-bg-color);
-  overflow: hidden;
-  min-height: 32px;
-  min-width: 110px;
-  width: max-content;
-  border-radius: 4px;
-  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
-  .ff-options {
-    width: 100%;
-    cursor: pointer;
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    padding: 4px;
-    gap: 8px;
-    &:hover {
-      background-color: var(--hover-color);
-    }
-    label {
-      cursor: pointer;
-    }
-    &.no_icon {
-      justify-content: center;
-    }
-
-    &.align-left {
-      justify-content: flex-start;
-    }
-
-    &.align-center {
-      justify-content: center;
-    }
-
-    &.align-right {
-      justify-content: flex-end;
-    }
-  }
-  &--primary {
-    background: var(--brand-color);
-    color: var(--primary-button-text-color);
-    svg {
-      path {
-        fill: var(--primary-icon-color);
-      }
-    }
-    :hover {
-      color: var(--brand-color);
-      svg {
-        path {
-          fill: var(--brand-color);
-        }
-      }
-    }
-  }
-  &--default {
-    background: var(--brand-color);
-    color: var(--primary-button-text-color);
-    svg {
-      path {
-        fill: var(--primary-icon-color);
-      }
-    }
-    :hover {
-      color: var(--brand-color);
-      svg {
-        path {
-          fill: var(--brand-color);
-        }
-      }
-    }
-    .ff-options {
-      &:hover {
-        background-color: var(--base-bg-color);
-      }
-    }
-  }
-
-  .ff-disable-option {
-    opacity: 0.5;
-    cursor: no-drop;
-    label {
-      cursor: no-drop;
-    }
-  }
-}
-
-.ff-menu-parent-hover {
-  background-color: var(--hover-color) !important;
-}

package/lib/styles/MessageBox.scss

@@ -1,75 +0,0 @@
-@use '../../assets/styles/colors';
-@use '../../assets/styles/mixins';
-
-.ff-chat-msg-box {
-  position: relative;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 5px 6px;
-  border: 0.5px solid var(--arrows-button-border-color);
-  border-radius: 8px;
-  background: var(--prompt-bg-color);
-  box-shadow: 0px 1px 4px 0px var(--prompt-shadow-color);
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--text-color);
-
-  &.chat-arrow-right::before {
-    padding-left: 16px;
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: calc(var(--triangle-position, -12px));
-    transform: translateY(-50%);
-    border-style: solid;
-    border-width: 6px 0 6px 8px;
-    border-color: transparent transparent transparent var(--prompt-bg-color);
-    filter: drop-shadow(2px 0px 0px var(--arrows-button-border-color));
-    z-index: 999;
-  }
-
-  &.chat-arrow-left::after {
-    padding-right: 16px;
-    content: '';
-    position: absolute;
-    top: 50%;
-    right: calc(var(--triangle-position, -12px));
-    transform: translateY(-50%);
-    border-style: solid;
-    border-width: 6px 8px 6px 0;
-    border-color: transparent var(--prompt-bg-color) transparent transparent;
-    filter: drop-shadow(-2px 0px 0px var(--arrows-button-border-color));
-    z-index: 999;
-  }
-
-  &.hidden {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-
-  &.visible {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  &.pointer {
-    cursor: pointer;
-  }
-
-  &.default {
-    cursor: default;
-  }
-
-  .content {
-    &.arrow-left {
-      padding-right: 16px;
-    }
-
-    &.arrow-right {
-      padding-left: 16px;
-    }
-  }
-}

package/lib/styles/MiniModal.scss

@@ -1,172 +0,0 @@
-@mixin arrow-before($width, $height, $top, $left) {
-  content: '';
-  position: absolute;
-  width: $width;
-  height: $height;
-  border-radius: 50px;
-  background-color: var(--ff-mini-modal-border);
-  top: $top;
-  left: $left;
-}
-.ff-mini-modal-overlay {
-  position: fixed;
-  inset: 0;
-  width: 100vw;
-  height: 100vh;
-}
-.ff-mini-edit-modal-container {
-  width: fit-content;
-  padding: 0;
-  position: absolute;
-  visibility: hidden;
-  &.modalVisible {
-    visibility: visible;
-  }
-  &.animatedModal {
-    animation: slideDown 0.5s ease, opacity 0.5s ease;
-  }
-
-  .popover-arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    z-index: 102;
-    &.popover-arrow-top {
-      bottom: 100%;
-      left: 30px;
-      padding: 0 3px 0 0;
-      border-color: transparent transparent var(--ff-mini-modal-border)
-        transparent;
-      filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));
-      &::before {
-        @include arrow-before(3px, 4px, -0.5px, 0);
-      }
-    }
-    &.popover-arrow-left {
-      left: -15px; //align the arrow with modal for the right side modal
-      border-color: transparent var(--ff-mini-modal-border) transparent
-        transparent;
-      filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
-      padding: 3px 1px 0 0;
-      &::before {
-        @include arrow-before(4px, 3px, 0, 0);
-      }
-    }
-    &.popover-arrow-bottom {
-      top: 100%;
-      left: 30px;
-      border-color: var(--ff-mini-modal-border) transparent transparent
-        transparent; // Bottom part of the arrow with the correct color
-      filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
-      padding: 0 3px 0 0;
-      &::before {
-        @include arrow-before(3px, 3px, -2px, 0);
-      }
-    }
-    &.popover-arrow-right {
-      top: 66px;
-      border-color: transparent transparent transparent
-        var(--ff-mini-modal-border);
-      filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));
-      padding: 3px 1px 0 0;
-      &::before {
-        @include arrow-before(3px, 3px, 0, -2px);
-      }
-    }
-
-    &.left-top-arrow {
-      top: 10%;
-    }
-    &.left-middle-arrow {
-      top: 45%;
-    }
-  }
-  .wrapped-div {
-    outline-offset: -8px;
-    position: absolute;
-    border-radius: 7px 7px 0 0;
-
-    &::before,
-    &::after {
-      position: absolute;
-      content: '';
-      width: 13px;
-      height: 13px;
-      background: transparent;
-      border-radius: 50%;
-      bottom: 0;
-      box-shadow: 8px 4px 0 var(--ff-mini-modal-border);
-    }
-    &::before {
-      left: -13px;
-      clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);
-    }
-    &::after {
-      right: -13px;
-      clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);
-      box-shadow: -8px 4px 0 var(--ff-mini-modal-border);
-    }
-  }
-  .mini-edit-modal {
-    background: var(--ff-mini-modal-border);
-    position: relative;
-    max-height: fit-content;
-    width: 100%;
-    margin: 0 0 0 -5px;
-    height: 100%;
-
-    &.mini-edit-modal-wrapper-shadow {
-      box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
-    }
-    &.mini-edit-modal-arrow-shadow {
-      box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);
-    }
-    header {
-      border-radius: 4px 4px 0 0;
-    }
-    footer {
-      border-radius: 0 0 4px 4px;
-    }
-    .modal-footer {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: 5px;
-      background-color: var(--ff-mini-modal-footer-background);
-      height: 24px;
-      padding: 0 10px 0 0;
-      transition: transform 0.3s ease-in-out;
-    }
-  }
-
-  @keyframes slideDown {
-    0% {
-      transform: translateY(-50px);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-}
-.ff-mini-modal-buttons-flex {
-  display: flex;
-}
-.ff-mini-modal-gap-10 {
-  gap: 10px;
-}
-.ff-mini-edit-model-icon {
-  color: var(--ff-mini-modal-box-shadow);
-  border: 2px solid var(--ff-mini-modal-box-shadow);
-  border-radius: 4px;
-}
-.ff-mini-modal-loop {
-  display: flex;
-  flex-wrap: wrap;
-}
-.ff-mini-modal-loop-div {
-  width: 500px;
-  height: 300px;
-}

package/lib/styles/MobileSkin.scss

@@ -1,67 +0,0 @@
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins' as *;
-
-.ff-mobileskin-wrapper {
-  @include center-content;
-  flex-direction: column;
-  transition: gap 0.3s ease-in-out;
-  &.portrait {
-    gap: 30px;
-
-    &.navbar-top {
-      margin-top: 18px;
-    }
-  }
-
-  &.landscape {
-    gap: 38px;
-  }
-
-  .ff-mobileskin-container {
-    @extend .ff-mobileskin-wrapper;
-    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
-    .ff-mobile-container {
-      @include center-content;
-      border: 8px solid var(--text-color);
-      border-radius: 30px;
-      position: relative;
-      overflow: hidden;
-      transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
-
-      &::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: transparent;
-      }
-      .ff-mobile-image-container {
-        @include center-content;
-        overflow: hidden;
-        transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
-      }
-    }
-  }
-
-  .ff-nav-bar {
-    height: 32px;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    border: 1px solid var(--brand-color);
-    border-radius: 24px;
-    transition: all 0.3s ease-in-out;
-  }
-  .ff-nav-bar-icon {
-    height: 16px;
-    padding: 8px;
-    border-right: 1px solid var(--brand-color);
-    @include center-content;
-    transition: all 0.3s ease-in-out;
-
-    &.last-icon {
-      border-right: none;
-    }
-  }
-}

package/lib/styles/ModuleChip.scss

@@ -1,66 +0,0 @@
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins';
-
-.ff-module-chip {
-  padding: 0 12px;
-  width: fit-content;
-  height: 30px;
-  color: var(--brand-color);
-  border: 1px solid var(--ff-editor-line-bg);
-  border-radius: 16px;
-  cursor: pointer;
-  @include mixins.center-content();
-  .module-typography {
-    color: var(--brand-color);
-  }
-  &--active {
-    border: 0.5px solid var(--brand-color);
-    background: var(--brand-color);
-    .module-typography {
-      color: var(--base-bg-color);
-      font-weight: 600;
-    }
-  }
-  &:hover {
-    background-color: var(--hover-color);
-    .module-typography {
-      color: var(--brand-color);
-    }
-  }
-}
-.ff-filter-chip {
-  height: 22px;
-  border: 0.5px solid var(--in-active-button-color);
-  &:hover {
-    background-color: var(--ff-icon-hover-fill-color);
-    .module-typography {
-      color: var(--brand-color);
-    }
-  }
-  &--active {
-    box-shadow: 0px 4px 4px 0px var(--toggle-strip-shadow) inset;
-    border: none;
-    background: linear-gradient(
-      90deg,
-      var(--brand-color) 0%,
-      var(--button-background-gradient-color) 100%
-    );
-    .module-typography {
-      color: var(--base-bg-color);
-      font-weight: 600;
-    }
-    &:hover {
-      border: none;
-      box-shadow: 0px 4px 4px 0px #00000040 inset;
-      background: linear-gradient(
-          90deg,
-          var(--brand-color) 0%,
-          var(--button-background-gradient-color) 100%
-        ),
-        linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
-      .module-typography {
-        color: var(--base-bg-color);
-      }
-    }
-  }
-}