feat: improved copy paste support

Author: devvaannsh

src/nls/root/strings.js

@@ -830,8 +830,10 @@ define({
     "LIVE_PREVIEW_LAYERS_INSERT_ELEMENT": "Insert Element",
     "LIVE_PREVIEW_LAYERS_CHANGE_COLOR": "Change color",
     "LIVE_PREVIEW_LAYERS_COPY_DECLARATION": "Copy property",
-    "LIVE_PREVIEW_LAYERS_COPY_RULE": "Copy selector and properties",
-    "LIVE_PREVIEW_LAYERS_PASTE_HINT": "Paste properties or a CSS rule here",
+    "LIVE_PREVIEW_LAYERS_COPY_RULE": "Copy rule",
+    "LIVE_PREVIEW_LAYERS_PASTE_PROPERTIES": "Paste properties",
+    "LIVE_PREVIEW_LAYERS_PASTE": "Paste",
+    "LIVE_PREVIEW_LAYERS_STYLES_MENU_HINT": "Right-click to copy or paste styles",
     "LIVE_PREVIEW_LAYERS_PASTE_INVALID": "Paste CSS properties or one complete selector at a time.",
     "LIVE_PREVIEW_LAYERS_PASTE_FAILED": "Couldn’t paste these properties. Try again.",
     "LIVE_PREVIEW_LAYERS_PASTED": "Properties pasted into {0}",

src/styles/Extn-LayersPanel.less

@@ -1087,10 +1087,56 @@
         display: flex;
     }
 
-    .layers-decl.layers-editing .layers-decl-actions {
+    .layers-decl.layers-editing .layers-decl-actions,
+    .layers-decl.layers-copied .layers-decl-actions {
         display: none;
     }
 
+    .layers-decl.layers-menu-target,
+    .layers-rule-header.layers-menu-target {
+        background: @layers-hover-bg;
+    }
+
+    .layers-decl.layers-copied {
+        animation: layers-flash-row 800ms ease-out;
+    }
+
+    .layers-rule-header.layers-copied {
+        border-radius: 3px;
+        animation: layers-flash-row 800ms ease-out;
+    }
+
+    .layers-copied-tip {
+        position: fixed;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        box-sizing: border-box;
+        height: 20px;
+        margin-top: -10px;
+        padding: 0 8px 0 6px;
+        border: 1px solid fade(@layers-accent, 55%);
+        border-radius: 10px;
+        background: #2a2a2a;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+        color: @project-panel-text-1;
+        font-size: @sidebar-xs-font-size;
+        white-space: nowrap;
+        pointer-events: none;
+        animation: layers-copied-tip 1400ms ease-out forwards;
+
+        .layers-copied-icon {
+            display: flex;
+            color: @layers-accent;
+
+            svg {
+                width: 12px;
+                height: 12px;
+            }
+        }
+    }
+
     .layers-decl.layers-overridden {
         .layers-decl-field {
             text-decoration: line-through;
@@ -1130,15 +1176,6 @@
         min-height: 20px;
     }
 
-    .layers-rule-copy {
-        opacity: 0;
-    }
-
-    .layers-rule-header:hover .layers-rule-copy,
-    .layers-rule-header:focus-within .layers-rule-copy {
-        opacity: 1;
-    }
-
     .layers-rule-header:focus-visible {
         outline: 1px solid @layers-accent;
         outline-offset: 2px;
@@ -1819,6 +1856,23 @@ body.layers-dnd-invalid {
     }
 }
 
+@keyframes layers-copied-tip {
+    0% {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+
+    12%, 80% {
+        opacity: 1;
+        transform: none;
+    }
+
+    100% {
+        opacity: 0;
+        transform: none;
+    }
+}
+
 @keyframes layers-notice-in {
     0% {
         opacity: 0;