[design] improve link item control animation

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
 "name": "nightTab",
-"version": "5.46.0",
+"version": "5.47.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

@@ -881,16 +881,21 @@
 margin:0;
 padding:0;
 height:0;
+height:var(--link-item-edit-height);
+width:100%;
+position: absolute;
+bottom:calc(-1*var(--link-item-edit-height));
 display: flex;
 overflow: hidden;
 flex-direction: row;
 align-items: stretch;
 justify-content: center;
-transition:heightvar(--layout-timing-extra-fast);
+transition:bottomvar(--layout-timing-extra-fast);
 }
 
 .is-edit .link-control{
-height:var(--link-item-edit-height);
+bottom:0;
+transition: bottom var(--layout-duration-05) cubic-bezier(0.68,-0.55,0.27,1.55);
 }
 
 .link-control-item{
@@ -1019,13 +1024,14 @@
 }
 
 .link-url{
-padding:01em;
+height:var(--link-item-url-height);
 width:100%;
-height:0;
+position: absolute;
+bottom:calc(-1*var(--link-item-url-height));
 overflow: hidden;
 display: none;
 align-items: center;
-transition:allvar(--layout-timing-extra-fast);
+transition:bottomvar(--layout-timing-extra-fast);
 }
 
 .is-link-item-url-show .link-url{
@@ -1053,12 +1059,12 @@
 .is-link-item-url-show:not(.is-edit) .link-item:focus-within .link-url,
 .is-link-item-url-show:not(.is-edit) .link-item:focus .link-url,
 .is-link-item-url-show:not(.is-edit) .link-item:hover .link-url{
-height:var(--link-item-url-height);
+bottom:0;
 }
 
 .link-url-text{
-margin:0;
-font-size:0.7em;
+margin:01em;
+font-size:0.75em;
 font-family:var(--theme-font-ui-name);
 font-weight:var(--theme-font-ui-weight);
 font-style:var(--theme-font-ui-style);
@@ -1076,7 +1082,7 @@
 
 .is-edit .link-item:hover .link-url,
 .is-edit .link-item:focus .link-url{
-height:0;
+bottom:calc(-1*var(--link-item-url-height));
 }
 
 .link-form-text-icon{

src/css/link.css

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="5.46.0";
+varcurrent="5.47.0";
 
 varname="Macabre Caterpillar";
 

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.46.0",
+"version": "5.47.0",
 "manifest_version": 2,
 "chrome_url_overrides":{
 "newtab": "index.html"