pushfeedback 0.1.70 → 0.1.72

package/dist/collection/components/feedback-modal/feedback-modal.css

@@ -0,0 +1,547 @@
+.text-center {
+  flex-grow: 1;
+  text-align: center;
+}
+
+.feedback-modal-wrapper * {
+  font-family: var(--feedback-font-family);
+}
+
+.feedback-modal-wrapper--custom-font * {
+  font-family: inherit;
+
+}
+
+.feedback-modal-wrapper {
+  position: absolute;
+  z-index: var(--feedback-modal-modal-wrapper-z-index);
+}
+
+.feedback-overlay {
+  background-color: var(--feedback-modal-screenshot-bg-color);
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: var(--feedback-modal-screnshot-z-index);
+  transition: opacity 0.2s ease-out;
+}
+
+.feedback-overlay--visible {
+  opacity: 1;
+}
+
+.feedback-modal {
+  display: inline-block;
+  position: relative;
+}
+
+.feedback-modal-content {
+  background-color: var(--feedback-modal-content-bg-color);
+  border-color: 1px solid var(--feedback-modal-header-text-color);
+  border-radius: var(--feedback-modal-content-border-radius);
+  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);
+  box-sizing: border-box;
+  color: var(--feedback-modal-content-text-color);
+  display: flex;
+  flex-direction: column;
+  left: 50%;
+  max-width: 90%;
+  padding: 20px;
+  position: fixed;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0.95);
+  opacity: 0;
+  width: 100%;
+  z-index: var(--feedback-modal-content-z-index);
+  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+}
+
+.feedback-modal-content--open {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+
+.feedback-modal-header {
+  align-items: center;
+  color: var(--feedback-modal-header-text-color);
+  display: flex;
+  font-size: var(--feedback-header-font-size);
+  font-weight: var(--feedback-modal-header-font-weight);
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.feedback-modal-rating-buttons {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.feedback-modal-rating-button {
+  padding: 0;
+  background-color: transparent;
+  border: transparent;
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button {
+  border: 1px solid var(--feedback-modal-button-border-color);
+  border-radius: var(--feedback-modal-button-border-radius);
+  color: var(--feedback-modal-button-text-color);
+  font-size: var(--feedback-modal-button-font-size);
+
+  font-weight: 500;
+  margin-right: 10px;
+  justify-content: center;
+  padding: 5px 10px;
+}
+
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover,
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected {
+  background-color: var(--feedback-modal-button-bg-color-active);
+  border: 1px solid var(--feedback-modal-button-border-color-active);
+  color: var(--feedback-modal-button-text-color-active);
+}
+
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button:hover svg,
+.feedback-modal-rating-buttons--thumbs .feedback-modal-rating-button--selected svg {
+  stroke: var(--feedback-modal-rating-button-selected-color);
+}
+
+.feedback-modal-rating-buttons svg {
+  stroke: var(--feedback-modal-rating-button-color);
+  cursor: pointer;
+}
+
+.feedback-modal-rating-buttons--stars .feedback-modal-rating-button--selected svg {
+  fill: var(--feedback-modal-rating-button-stars-selected-color);
+  stroke: var(--feedback-modal-rating-button-stars-selected-color);
+}
+
+.feedback-modal-text textarea {
+  background-color: var(--feedback-modal-input-bg-color);
+  border: 1px solid var(--feedback-modal-input-border-color);
+  border-radius: var(--feedback-modal-input-border-radius);
+  box-sizing: border-box;
+  color: var(--feedback-modal-input-text-color);
+  font-size: var(--feedback-modal-input-font-size);
+  margin-bottom: 20px;
+  height: 100px;
+  min-height: 100px;
+  padding: 10px;
+  resize: vertical;
+  width: 100%;
+}
+
+
+.feedback-modal-email input {
+  background-color: var(--feedback-modal-input-bg-color);
+  border: 1px solid var(--feedback-modal-input-border-color);
+  border-radius: var(--feedback-modal-input-border-radius);
+  box-sizing: border-box;
+  color: var(--feedback-modal-input-text-color);
+  font-size: var(--feedback-modal-input-font-size);
+  margin-bottom: 20px;
+  height: 40px;
+  padding: 10px;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.feedback-modal-privacy {
+  font-size: var(--feedback-modal-input-font-size);
+  margin-bottom: 20px;
+}
+
+
+.feedback-modal-text textarea:focus, .feedback-modal-email input:focus {
+  border: 1px solid var(--feedback-modal-input-border-color-focused);
+  outline: none;
+}
+
+.feedback-modal-buttons {
+  display: flex;
+  flex-direction: column;
+}
+
+.feedback-modal-buttons .feedback-modal-button {
+  margin-bottom: 20px;
+}
+
+.feedback-modal-button {
+  align-items: center;
+  background-color: transparent;
+  border: 1px solid var(--feedback-modal-button-border-color);
+  border-radius: var(--feedback-modal-button-border-radius);
+  color: var(--feedback-modal-button-text-color);
+  cursor: pointer;
+  display: flex;
+  font-size: var(--feedback-modal-button-font-size);
+  font-weight: 500;
+  justify-content: center;
+  min-height: 40px;
+  padding: 5px 10px;
+}
+
+.feedback-modal-button svg {
+  margin-right: 6px;
+}
+
+.feedback-modal-button path {
+  fill: var(--feedback-modal-button-icon-color);
+}
+
+.feedback-modal-button:hover path,
+.feedback-modal-button--active path  {
+  fill: var(--feedback-modal-button-icon-color-active);
+}
+
+.feedback-modal-button--submit {
+  background-color: var(--feedback-modal-button-submit-bg-color);
+  border: 1px solid var(--feedback-modal-button-border-color-active);
+  color: var(--feedback-modal-button-submit-text-color);
+}
+
+.feedback-modal-button:hover,
+.feedback-modal-button--active {
+  background-color: var(--feedback-modal-button-bg-color-active);
+  border: 1px solid var(--feedback-modal-button-border-color-active);
+  color: var(--feedback-modal-button-text-color-active);
+}
+
+.feedback-modal-button--submit:hover{
+  background-color: var(--feedback-modal-button-submit-bg-color-hover);
+  border: 1px solid var(--feedback-modal-button-submit-border-color-hover);
+  color: var(--feedback-modal-button-submit-text-color-hover);
+}
+
+
+.feedback-modal-input-heading{
+  display: block;
+  font-size: 14px;
+  font-weight: 300;
+  padding-bottom: 10px;
+}
+
+.feedback-modal-footer {
+  font-size: 12px;
+  text-align: center;
+}
+
+.feedback-modal-footer a {
+  color: var(--feedback-modal-footer-link);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.feedback-logo,
+.feedback-footer-text {
+  display: block;
+  text-align: center;
+  margin-top: 5px;
+}
+
+.feedback-footer-text {
+  margin-top: 10px;
+  line-height: 1.5;
+}
+
+.feedback-modal-close {
+  background-color: var(--feedback-modal-close-bg-color);
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  height: 22px;
+  margin-left: auto;
+  padding: 0;
+  width: 22px;
+}
+
+.feedback-modal-close svg {
+  stroke: var(--feedback-modal-close-color);
+}
+
+
+.feedback-modal-screenshot {
+  background-color: var(--feedback-modal-screenshot-bg-color);
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: var(--feedback-modal-screnshot-z-index);
+}
+
+.feedback-modal-screenshot-header {
+  align-items: center;
+  background-color: var(--feedback-modal-screenshot-header-bg-color);
+  border-radius: var(--feedback-modal-content-border-radius);
+  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);
+  box-sizing: border-box;
+  color: var(--feedback-modal-screenshot-header-text-color);
+  cursor: pointer;
+  display: flex;
+  left: 50%;
+  top: 20px;
+  transform: translateX(-50%);
+  padding: 10px;
+  position: fixed;
+  width: max-content; 
+  z-index: var(--feedback-modal-screenshot-header-z-index);
+}
+
+.feedback-modal-screenshot-close {
+  height: 24px;
+  padding-left: 10px;
+  width: 24px;
+}
+
+.feedback-modal-screenshot-close svg {
+  stroke: var(--feedback-modal-close-color);
+}
+
+.feedback-modal-message {
+  font-size: var(--feedback-modal-message-font-size);
+  margin-top: 0;
+}
+
+
+.feedback-modal-element-hover {
+  background-color: transparent;  
+  cursor: pointer;
+  border: 1px solid var(--feedback-modal-element-hover-border-color); 
+}
+
+
+.feedback-modal-element-selected {
+  background-color: transparent;  
+  border: 3px solid var(--feedback-modal-element-selected-border-color) !important;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3) !important;
+}
+
+.screenshot-preview {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  overflow: hidden;
+  border-radius: 4px;
+  margin-right: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.screenshot-preview:hover {
+  transform: scale(1.1);
+}
+
+.screenshot-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+
+
+.screenshot-loading {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 8px;
+}
+
+/* Responsive Design */
+@media screen and (min-width: 768px) {
+  .feedback-modal-content {
+    max-width: var(--feedback-modal-content-max-width);
+  }
+  
+  .feedback-modal-content.feedback-modal-content--bottom-right {
+    bottom: var(--feedback-modal-content-position-bottom);
+    left: initial;
+    right: var(--feedback-modal-content-position-right);
+    top: initial;
+    transform: initial;
+  }
+
+  .feedback-modal-content.feedback-modal-content--bottom-left {
+    bottom: var(--feedback-modal-content-position-bottom);
+    left: var(--feedback-modal-content-position-left);
+    top: initial;
+    transform: initial;
+  }
+
+  .feedback-modal-content.feedback-modal-content--top-right {
+    right: var(--feedback-modal-content-position-right);
+    top: var(--feedback-modal-content-position-top);
+    transform: initial;
+  }
+
+  .feedback-modal-content.feedback-modal-content--top-left {
+    left: var(--feedback-modal-content-position-left);
+    top: var(--feedback-modal-content-position-top);
+    transform: initial;
+  } 
+
+  .feedback-modal-content.feedback-modal-content--center-left {
+    left: 5px;
+    right: auto;
+    top: 50%;
+    transform: translateY(-50%);
+  } 
+
+  .feedback-modal-content.feedback-modal-content--center-right {
+    left: auto;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .feedback-modal-content.feedback-modal-content--sidebar-left.feedback-modal-content--open,
+  .feedback-modal-content.feedback-modal-content--sidebar-right.feedback-modal-content--open{
+    transform: translateX(0);
+  }
+
+  .feedback-modal-content.feedback-modal-content--sidebar-left {
+    max-width: var(--feedback-modal-content-sidebar-max-width);
+    left: 0;
+    right: auto;
+    height: 100vh;
+    top: 0;
+    transform: translateX(-100%);
+    transition: transform 0.5s ease-in-out; 
+    border-radius: 0;
+  }
+
+  .feedback-modal-content.feedback-modal-content--sidebar-right {
+    max-width: var(--feedback-modal-content-sidebar-max-width);
+    left: auto;
+    right: 0;
+    height: 100vh;
+    top: 0;
+    transform: translateX(100%);
+    transition: transform 0.5s ease-in-out; 
+    border-radius: 0;
+  }
+
+  .feedback-modal-text textarea {
+    height: 150px;
+    min-height: 150px;
+  }
+
+  /* Animations */
+  .feedback-modal-content.feedback-modal-content--bottom-right {
+    transform: translateY(20px);
+  }
+
+  .feedback-modal-content.feedback-modal-content--bottom-right.feedback-modal-content--open {
+    transform: translateY(0);
+  }
+
+  .feedback-modal-content.feedback-modal-content--bottom-left {
+    transform: translateY(20px);
+  }
+
+  .feedback-modal-content.feedback-modal-content--bottom-left.feedback-modal-content--open {
+    transform: translateY(0);
+  }
+
+  .feedback-modal-content.feedback-modal-content--top-right {
+    transform: translateY(-20px);
+  }
+
+  .feedback-modal-content.feedback-modal-content--top-right.feedback-modal-content--open {
+    transform: translateY(0);
+  }
+
+  .feedback-modal-content.feedback-modal-content--top-left {
+    transform: translateY(-20px);
+  }
+
+  .feedback-modal-content.feedback-modal-content--top-left.feedback-modal-content--open {
+    transform: translateY(0);
+  }
+}
+
+
+
+/* Feather loader animation */
+@keyframes feather-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.feather-loader {
+  animation: feather-spin 1s linear infinite;
+  display: block;
+}
+
+/* Screenshot Error Notification */
+.screenshot-error-notification {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10001;
+  max-width: 500px;
+  width: 90%;
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+.screenshot-error-content {
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 8px;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  color: #c53030;
+}
+
+.screenshot-error-content svg:first-child {
+  color: #e53e3e;
+  flex-shrink: 0;
+}
+
+.screenshot-error-content span {
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.4;
+  font-weight: 500;
+}
+
+.error-close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  color: #c53030;
+  flex-shrink: 0;
+  transition: background-color 0.2s ease;
+}
+
+.error-close-btn:hover {
+  background: rgba(197, 48, 48, 0.1);
+}
+
+