[design] improve link add preview

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
 "name": "nightTab",
-"version": "5.67.0",
+"version": "5.68.0",
 "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
 "main": "index.js",
 "scripts":{

package.json

@@ -870,14 +870,14 @@
 clip-path:polygon(0calc(100%-calc(var(--link-item-url-height) +var(--link-item-clip-padding))),100%calc(100%-calc(var(--link-item-url-height) +var(--link-item-clip-padding))),100%100%,0100%);
 }
 
-.is-edit.is-link-orientation-top .link-panel-back,
+.is-edit.is-link-orientation-top .link-item .link-panel-back,
 .is-edit.is-link-orientation-top .link-item:focus .link-panel-back,
 .is-edit.is-link-orientation-top .link-item:focus-within .link-panel-back,
 .is-edit.is-link-orientation-top .link-item:hover .link-panel-back{
 clip-path:polygon(00,100%0,100%calc(var(--link-item-edit-height) +var(--link-item-clip-padding)),0calc(var(--link-item-edit-height) +var(--link-item-clip-padding)));
 }
 
-.is-edit.is-link-orientation-bottom .link-panel-back,
+.is-edit.is-link-orientation-bottom .link-item .link-panel-back,
 .is-edit.is-link-orientation-bottom .link-item:focus .link-panel-back,
 .is-edit.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
 .is-edit.is-link-orientation-bottom .link-item:hover .link-panel-back{
@@ -1447,3 +1447,43 @@
 .is-link-orientation-bottom.is-link-item-url-show .link-item-preview:hover .link-url{
 bottom:0;
 }
+
+.is-edit.is-link-orientation-top .link-item-preview .link-panel-back,
+.is-edit.is-link-orientation-top .link-item-preview:focus .link-panel-back,
+.is-edit.is-link-orientation-top .link-item-preview:focus-within .link-panel-back,
+.is-edit.is-link-orientation-top .link-item-preview:hover .link-panel-back{
+clip-path:polygon(00,100%0,100%0,00);
+}
+
+.is-edit.is-link-orientation-bottom .link-item-preview .link-panel-back,
+.is-edit.is-link-orientation-bottom .link-item-preview:focus .link-panel-back,
+.is-edit.is-link-orientation-bottom .link-item-preview:focus-within .link-panel-back,
+.is-edit.is-link-orientation-bottom .link-item-preview:hover .link-panel-back{
+clip-path:polygon(0100%,100%100%,100%100%,0100%);
+}
+
+.is-edit.is-link-item-line-show.is-link-orientation-top .link-item-preview .link-panel-back,
+.is-edit.is-link-item-line-show.is-link-orientation-top .link-item-preview:focus .link-panel-back,
+.is-edit.is-link-item-line-show.is-link-orientation-top .link-item-preview:focus-within .link-panel-back,
+.is-edit.is-link-item-line-show.is-link-orientation-top .link-item-preview:hover .link-panel-back{
+clip-path:polygon(00,100%0,100%var(--layout-line-width),0var(--layout-line-width));
+}
+
+.is-edit.is-link-item-line-show.is-link-orientation-bottom .link-item-preview .link-panel-back,
+.is-edit.is-link-item-line-show.is-link-orientation-bottom .link-item-preview:focus .link-panel-back,
+.is-edit.is-link-item-line-show.is-link-orientation-bottom .link-item-preview:focus-within .link-panel-back,
+.is-edit.is-link-item-line-show.is-link-orientation-bottom .link-item-preview:hover .link-panel-back{
+clip-path:polygon(0calc(100%-var(--layout-line-width) -var(--link-item-clip-padding)),100%calc(100%-var(--layout-line-width) -var(--link-item-clip-padding)),100%100%,0100%);
+}
+
+.is-edit.is-link-item-url-show.is-link-orientation-top .link-item-preview:focus .link-panel-back,
+.is-edit.is-link-item-url-show.is-link-orientation-top .link-item-preview:focus-within .link-panel-back,
+.is-edit.is-link-item-url-show.is-link-orientation-top .link-item-preview:hover .link-panel-back{
+clip-path:polygon(00,100%0,100%calc(var(--link-item-url-height) +var(--link-item-clip-padding)),0calc(var(--link-item-url-height) +var(--link-item-clip-padding)));
+}
+
+.is-edit.is-link-item-url-show.is-link-orientation-bottom .link-item-preview:focus .link-panel-back,
+.is-edit.is-link-item-url-show.is-link-orientation-bottom .link-item-preview:focus-within .link-panel-back,
+.is-edit.is-link-item-url-show.is-link-orientation-bottom .link-item-preview:hover .link-panel-back{
+clip-path:polygon(0calc(100%-var(--link-item-url-height) -var(--link-item-clip-padding)),100%calc(100%-var(--link-item-url-height) -var(--link-item-clip-padding)),100%100%,0100%);
+}

src/css/link.css

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="5.67.0";
+varcurrent="5.68.0";
 
 varname="Jaded Raven";
 

src/js/version.js

@@ -2,7 +2,7 @@
 "name": "nightTab",
 "short_name": "nightTab",
 "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-"version": "5.67.0",
+"version": "5.68.0",
 "manifest_version": 2,
 "chrome_url_overrides":{
 "newtab": "index.html"