fix: improve hot corner styles

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -3645,17 +3645,14 @@ function RemoteFunctions(config = {}) {
 
             const content = `
                 <div class="phoenix-hot-corner">
-                    <div class="hot-corner-indicator"></div>
-                    <div class="hot-corner-box">
-                        <button class="hot-corner-play-btn"> ${icons.playButton} </button>
-                    </div>
+                    <button class="hot-corner-btn">${icons.playButton}</button>
                 </div>`;
 
             shadow.innerHTML = `<style>${cssStyles.hotCorner}</style>${content}`;
 
             this.element = container;
-            this.button = shadow.querySelector(".hot-corner-play-btn");
-            this.box = shadow.querySelector(".hot-corner-box");
+            this.button = shadow.querySelector(".hot-corner-btn");
+            this.hotCorner = shadow.querySelector(".phoenix-hot-corner");
 
             this.button.addEventListener("click", () => {
                 window._Brackets_MessageBroker.send({ livePreviewEditEnabled: true, type: "hotCornerPreviewToggle" });
@@ -3668,12 +3665,12 @@ function RemoteFunctions(config = {}) {
             if (isPreviewMode) {
                 this.button.classList.add("selected");
 
-                if (!this.wasPreviewMode && showAnimation && this.box) {
-                    this.box.classList.add("peek-animation");
+                if (!this.wasPreviewMode && showAnimation && this.hotCorner) {
+                    this.hotCorner.classList.add("peek-animation");
 
                     setTimeout(() => {
-                        if (this.box) {
-                            this.box.classList.remove("peek-animation");
+                        if (this.hotCorner) {
+                            this.hotCorner.classList.remove("peek-animation");
                         }
                     }, 1200);
                 }
@@ -3689,7 +3686,7 @@ function RemoteFunctions(config = {}) {
             }
             this.element = null;
             this.button = null;
-            this.box = null;
+            this.hotCorner = null;
         }
     }
 

src/extensionsIntegrated/phoenix-pro/browser-css/hot-corners.css

@@ -4,70 +4,46 @@
 
 .phoenix-hot-corner {
     position: fixed !important;
-    top: 0 !important;
+    top: -35px !important;
     left: 50% !important;
     transform: translateX(-50%) !important;
-    z-index: 2147483646 !important;
-    pointer-events: none !important;
-}
-
-.hot-corner-indicator {
     width: 70px !important;
-    height: 5px !important;
-    background-color: rgba(160, 160, 160, 0.4) !important;
-    border-radius: 0 0 3px 3px !important;
-    margin: 0 auto !important;
-    pointer-events: auto !important;
-}
-
-.hot-corner-box {
-    position: absolute !important;
-    top: 0 !important;
-    left: 50% !important;
-    transform: translateX(-50%) translateY(-100%) !important;
-    width: 36px !important;
-    height: 28px !important;
+    height: 40px !important;
     background-color: rgba(60, 63, 65, 0.95) !important;
-    border-radius: 0 0 6px 6px !important;
+    border-radius: 0 0 8px 8px !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
-    opacity: 0 !important;
-    transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
-    pointer-events: auto !important;
+    z-index: 2147483646 !important;
+    transition: top 0.3s ease-out !important;
+    cursor: pointer !important;
 }
 
-.phoenix-hot-corner:hover .hot-corner-box {
-    transform: translateX(-50%) translateY(0) !important;
-    opacity: 1 !important;
+.phoenix-hot-corner:hover {
+    top: 0 !important;
 }
 
-.hot-corner-box.peek-animation {
+.phoenix-hot-corner.peek-animation {
     animation: peekDown 1.2s ease-in-out !important;
-    transition: none !important;
 }
 
 @keyframes peekDown {
     0% {
-        transform: translateX(-50%) translateY(-100%);
-        opacity: 0;
+        top: -35px;
     }
     25% {
-        transform: translateX(-50%) translateY(0);
-        opacity: 1;
+        top: 0;
     }
     75% {
-        transform: translateX(-50%) translateY(0);
-        opacity: 1;
+        top: 0;
     }
     100% {
-        transform: translateX(-50%) translateY(-100%);
-        opacity: 0;
+        top: -35px;
     }
 }
 
-.hot-corner-play-btn {
+.hot-corner-btn {
     background-color: transparent !important;
     border: none !important;
     color: #a0a0a0 !important;
@@ -82,19 +58,19 @@
     padding: 0 !important;
 }
 
-.hot-corner-play-btn:hover {
+.hot-corner-btn:hover {
     color: #c0c0c0 !important;
 }
 
-.hot-corner-play-btn.selected {
+.hot-corner-btn.selected {
     color: #FBB03B !important;
 }
 
-.hot-corner-play-btn.selected:hover {
+.hot-corner-btn.selected:hover {
     color: #FCC04B !important;
 }
 
-.hot-corner-play-btn svg {
-    width: 18px !important;
-    height: 18px !important;
+.hot-corner-btn svg {
+    width: 22px !important;
+    height: 22px !important;
 }