proto-plugin 0.1.0

package/src/lib/prototype-comments/ui/annotation-popup/styles.module.scss

@@ -0,0 +1,469 @@
+// Annotation Popup - CSS-only version (no framer-motion)
+// Uses CSS animations for all transitions
+
+// Protect stroke-based icons from host page `svg { fill: currentColor }` rules.
+// Scoped to prototype comment system's own containers to avoid breaking host SVGs that use
+// fill="none" with CSS-based fills (e.g. Tailwind's fill-current).
+// See: https://github.com/prototype-comments/issues/58
+.popup {
+  svg[fill="none"] {
+    fill: none !important;
+  }
+
+  svg[fill="none"] :not([fill]) {
+    fill: none !important;
+  }
+}
+
+// =============================================================================
+// Animation Keyframes
+// =============================================================================
+
+@keyframes popupEnter {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes popupExit {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+  }
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(-50%) scale(1) translateY(0) translateX(0);
+  }
+  20% {
+    transform: translateX(-50%) scale(1) translateY(0) translateX(-3px);
+  }
+  40% {
+    transform: translateX(-50%) scale(1) translateY(0) translateX(3px);
+  }
+  60% {
+    transform: translateX(-50%) scale(1) translateY(0) translateX(-2px);
+  }
+  80% {
+    transform: translateX(-50%) scale(1) translateY(0) translateX(2px);
+  }
+}
+
+// =============================================================================
+// Popup Container
+// =============================================================================
+
+.popup {
+  position: fixed;
+  transform: translateX(-50%);
+  width: 280px;
+  padding: 0.75rem 1rem 14px;
+  background: #1e1e1e;
+  border-radius: 16px;
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.35),
+    0 8px 32px rgba(0, 0, 0, 0.18),
+    0 0 0 1px #333333;
+  z-index: 100001;
+  font-family:
+    var(--tool-font-body, "DM Sans", ui-sans-serif, system-ui, sans-serif);
+  will-change: transform, opacity;
+
+  // Initial state (before animation)
+  opacity: 0;
+
+  &.enter {
+    animation: popupEnter 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
+  }
+
+  // After enter animation completes, set stable state
+  &.entered {
+    opacity: 1;
+    transform: translateX(-50%) scale(1) translateY(0);
+  }
+
+  &.exit {
+    animation: popupExit 0.15s ease-in forwards;
+  }
+
+  // Shake needs entered state to be stable first
+  &.entered.shake {
+    animation: shake 0.25s ease-out;
+  }
+}
+
+// =============================================================================
+// Header
+// =============================================================================
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5625rem;
+}
+
+.element {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.5);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.headerToggle {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+
+  .element {
+    flex: 1;
+  }
+}
+
+// Chevron icon that rotates when computed styles are expanded
+.chevron {
+  color: rgba(255, 255, 255, 0.5);
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); // Matches FAQ accordion easing
+  flex-shrink: 0;
+
+  &.expanded {
+    transform: rotate(90deg);
+  }
+}
+
+// =============================================================================
+// Computed Styles Block
+// =============================================================================
+
+// Accordion animation using grid-template-rows technique for smooth height transitions
+// See: https://css-tricks.com/css-grid-can-do-auto-height-transitions/
+.stylesWrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1); // Matches FAQ accordion easing
+
+  &.expanded {
+    grid-template-rows: 1fr;
+  }
+}
+
+// Inner container with overflow:hidden is required for the grid animation to work
+.stylesInner {
+  overflow: hidden;
+}
+
+// Code-block styling for computed CSS properties display
+.stylesBlock {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.625rem;
+  margin-bottom: 0.5rem;
+  font-family:
+    var(--tool-font-body, "DM Sans", ui-sans-serif, system-ui, sans-serif);
+  font-size: 0.6875rem;
+  line-height: 1.5;
+}
+
+.styleLine {
+  color: rgba(255, 255, 255, 0.85);
+  word-break: break-word;
+}
+
+// Syntax highlighting colors (purple for properties, light for values)
+.styleProperty {
+  color: #c792ea;
+}
+
+.styleValue {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.timestamp {
+  font-size: 0.625rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.35);
+  font-variant-numeric: tabular-nums;
+  margin-left: 0.5rem;
+  flex-shrink: 0;
+}
+
+// =============================================================================
+// Quote
+// =============================================================================
+
+.quote {
+  font-size: 12px;
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 0.5rem;
+  padding: 0.4rem 0.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.25rem;
+  line-height: 1.45;
+}
+
+// =============================================================================
+// Read-only comment text
+// =============================================================================
+
+.commentText {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.9);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+// =============================================================================
+// Textarea
+// =============================================================================
+
+.textarea {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  resize: none;
+  outline: none;
+  transition: border-color 0.15s ease;
+
+  &:focus {
+    border-color: var(--prototype-comment-color-blue);
+  }
+
+  &.green:focus {
+    border-color: var(--prototype-comment-color-green);
+  }
+
+  &.readOnly {
+    cursor: default;
+    resize: none;
+  }
+
+  &::placeholder {
+    color: rgba(255, 255, 255, 0.35);
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+  }
+}
+
+// =============================================================================
+// Actions
+// =============================================================================
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.375rem;
+  margin-top: 0.5rem;
+}
+
+.cancel,
+.submit {
+  padding: 0.4rem 0.875rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 1rem;
+  border: none;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.cancel {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.8);
+  }
+}
+
+.submit {
+  color: white;
+
+  &:hover:not(:disabled) {
+    filter: brightness(0.9);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+// Delete button wrapper
+.deleteWrapper {
+  margin-right: auto;
+}
+
+.deleteButton {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.4);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    transform 0.1s ease;
+
+  &:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--prototype-comment-color-red) 25%,
+      transparent
+    );
+    color: var(--prototype-comment-color-red);
+  }
+
+  &:active {
+    transform: scale(0.92);
+  }
+}
+
+// =============================================================================
+// Light Mode
+// =============================================================================
+
+.light {
+  &.popup {
+    background: #fff;
+    box-shadow:
+      0 4px 24px rgba(0, 0, 0, 0.12),
+      0 0 0 1px rgba(0, 0, 0, 0.06);
+  }
+
+  .element {
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .timestamp {
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  .chevron {
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  .stylesBlock {
+    background: rgba(0, 0, 0, 0.03);
+  }
+
+  .styleLine {
+    color: rgba(0, 0, 0, 0.75);
+  }
+
+  .styleProperty {
+    color: #7c3aed;
+  }
+
+  .styleValue {
+    color: rgba(0, 0, 0, 0.75);
+  }
+
+  .quote {
+    color: rgba(0, 0, 0, 0.55);
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  .commentText {
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  .textarea {
+    background: rgba(0, 0, 0, 0.03);
+    color: #121212;
+    border-color: rgba(0, 0, 0, 0.12);
+
+    &::placeholder {
+      color: rgba(0, 0, 0, 0.4);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  .cancel {
+    color: rgba(0, 0, 0, 0.5);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.06);
+      color: rgba(0, 0, 0, 0.75);
+    }
+  }
+
+  .submit {
+    background: transparent;
+    color: rgba(0, 0, 0, 0.5);
+
+    &:hover:not(:disabled) {
+      background: rgba(0, 0, 0, 0.06);
+      filter: none;
+    }
+
+    &:disabled {
+      color: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  .deleteButton {
+    color: rgba(0, 0, 0, 0.4);
+
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--prototype-comment-color-red) 25%,
+        transparent
+      );
+      color: var(--prototype-comment-color-red);
+    }
+  }
+}