Update hotspot link layout

tjek · Mar 20, 2024 · bffab8a · bffab8a
1 parent 27c2153
commit bffab8a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/lib/kits/core-ui/page-decorations.styl b/lib/kits/core-ui/page-decorations.styl
@@ -36,16 +36,7 @@
         text-decoration none
         font-size 14px
 
-    .sgn-pagedecoration-hotspot-link-content
-        display flex
-        align-items flex-end
-        padding 0.5rem
-
-        &:hover
-            background-color rgba(#fff, 0.1)
-            box-shadow 0 0 15px rgba(#000, 0.3)
-            border-radius 4px
-            border 2px solid rgba(#fff, 0.8)
+
 
     .sgn-pagedecoration-hotspot-link-label
         outline 0
@@ -59,6 +50,37 @@
         text-overflow ellipsis
         margin-left auto
         margin-right auto
+        opacity 0
+
+    .sgn-pagedecoration-hotspot-link-content
+        display flex
+        align-items flex-end
+        padding 0.5rem
+
+        &:hover
+            background-color rgba(#fff, 0.1)
+            box-shadow 0 0 15px rgba(#000, 0.3)
+            border-radius 4px
+            border 2px solid rgba(#fff, 0.8)
+
+            .sgn-pagedecoration-hotspot-link-label
+                animation-name sgn-animate-pagedecoration
+                animation-timing-function ease
+                animation-duration .1s
+                opacity 1
+
+    .sgn-pagedecoration-hotspot-link-icon
+        position absolute
+        right 4px
+        top 4px
+        color #3e3e3e
+        border-radius 6px
+        padding 6px
+        background-color #fff
+        box-shadow rgba(0, 0, 0,  0.4) 0px 5px 16px, rgba(0, 0, 0, 0.2) 0px 0px 1px
+
+        svg
+            width 20px
 
 
 

diff --git a/lib/kits/core-ui/page-decorations.ts b/lib/kits/core-ui/page-decorations.ts
@@ -12,6 +12,11 @@ const defaultTemplate = `\
     {{^link_embed}}
     <a href="{{link}}" class="sgn-pagedecoration-hotspot-link" rel="noreferrer noopener" target="_blank">
         <div class="sgn-pagedecoration-hotspot-link-content" style="width:100%;height:100%;">
+                <div class="sgn-pagedecoration-hotspot-link-icon">
+                    <svg class="sgn-pagedecoration-link-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                        <path d="M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/>
+                    </svg>
+                </div>
                 <div class="sgn-pagedecoration-hotspot-link-label">
                     <span>{{hostname}}</span>
                 </div>