[refactor] move link item padding to variable file

Author: zombieFox

package-lock.json

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

@@ -191,11 +191,11 @@
 }
 
 .is-link-style-block .link-panel-front{
-padding:1em;
+padding:calc(1em*var(--link-item-padding));
 }
 
 .is-link-style-list .link-panel-front{
-padding:0.5em1.5em;
+padding:calc(0.5em*var(--link-item-padding)) calc(1.5em*var(--link-item-padding));
 }
 
 .is-theme-radius .link-panel-front{
@@ -770,19 +770,19 @@
 }
 
 .is-link-orientation-top .link-panel-back{
-clip-path:polygon(00,100%0,100%calc(0%+var(--link-item-padding)),0calc(0%+var(--link-item-padding)));
+clip-path:polygon(00,100%0,100%calc(0%+var(--link-item-clip-padding)),0calc(0%+var(--link-item-clip-padding)));
 }
 
 .is-link-orientation-bottom .link-panel-back{
-clip-path:polygon(0calc(100%-var(--link-item-padding)),100%calc(100%-var(--link-item-padding)),100%100%,0100%);
+clip-path:polygon(0calc(100%-var(--link-item-clip-padding)),100%calc(100%-var(--link-item-clip-padding)),100%100%,0100%);
 }
 
 .is-link-orientation-top.is-link-item-line-show .link-panel-back{
-clip-path:polygon(00,100%0,100%calc(var(--layout-line-width) +var(--link-item-padding)),0calc(var(--layout-line-width) +var(--link-item-padding)));
+clip-path:polygon(00,100%0,100%calc(var(--layout-line-width) +var(--link-item-clip-padding)),0calc(var(--layout-line-width) +var(--link-item-clip-padding)));
 }
 
 .is-link-orientation-bottom.is-link-item-line-show .link-panel-back{
-clip-path:polygon(0calc(100%-var(--layout-line-width) -var(--link-item-padding)),100%calc(100%-var(--layout-line-width) -var(--link-item-padding)),100%100%,0100%);
+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-link-orientation-top .link-item:focus .link-panel-back,
@@ -798,27 +798,27 @@
 .is-link-item-url-show.is-link-orientation-top .link-item:focus .link-panel-back,
 .is-link-item-url-show.is-link-orientation-top .link-item:focus-within .link-panel-back,
 .is-link-item-url-show.is-link-orientation-top .link-item:hover .link-panel-back{
-clip-path:polygon(00,100%0,100%calc(var(--link-item-url-height) +var(--link-item-padding)),0calc(var(--link-item-url-height) +var(--link-item-padding)));
+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-link-item-url-show.is-link-orientation-bottom .link-item:focus .link-panel-back,
 .is-link-item-url-show.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
 .is-link-item-url-show.is-link-orientation-bottom .link-item:hover .link-panel-back{
-clip-path:polygon(0calc(100%-calc(var(--link-item-url-height) +var(--link-item-padding))),100%calc(100%-calc(var(--link-item-url-height) +var(--link-item-padding))),100%100%,0100%);
+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: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-padding)),0calc(var(--link-item-edit-height) +var(--link-item-padding)));
+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: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{
-clip-path:polygon(0calc(100%-var(--link-item-edit-height) -var(--link-item-padding)),100%calc(100%-var(--link-item-edit-height) -var(--link-item-padding)),100%100%,0100%);
+clip-path:polygon(0calc(100%-var(--link-item-edit-height) -var(--link-item-clip-padding)),100%calc(100%-var(--link-item-edit-height) -var(--link-item-clip-padding)),100%100%,0100%);
 }
 
 .link-control{

src/css/link.css

@@ -122,7 +122,8 @@
 --link-item-display-name-size:0.9em;
 --link-item-border:0;
 --link-item-opacity:1;
---link-item-padding:1em;
+--link-item-padding:1;
+--link-item-clip-padding:1em;
 /* layout */
 --layout-size:1;
 --layout-width:80%;
@@ -346,7 +347,7 @@
 }
 
 .is-link-item-opacity{
---link-item-padding:calc(0*1em);
+--link-item-clip-padding:calc(0*1em);
 }
 
 @media (min-width:700px){

src/css/variables.css

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="5.12.0";
+varcurrent="5.13.0";
 
 varname="Zonked Tarsier";
 

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