[refactor] move link item padding to variable file

This commit is contained in:
zombieFox 2020-04-20 10:03:40 +01:00
parent c0d1c373fe
commit 01dc2c2fb3
6 changed files with 17 additions and 16 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "nightTab",
"version": "5.12.0",
"version": "5.13.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -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": {

View File

@ -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.5em 1.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(0 0, 100% 0, 100% calc(0% + var(--link-item-padding)), 0 calc(0% + var(--link-item-padding)));
clip-path: polygon(0 0, 100% 0, 100% calc(0% + var(--link-item-clip-padding)), 0 calc(0% + var(--link-item-clip-padding)));
}
.is-link-orientation-bottom .link-panel-back {
clip-path: polygon(0 calc(100% - var(--link-item-padding)), 100% calc(100% - var(--link-item-padding)), 100% 100%, 0 100%);
clip-path: polygon(0 calc(100% - var(--link-item-clip-padding)), 100% calc(100% - var(--link-item-clip-padding)), 100% 100%, 0 100%);
}
.is-link-orientation-top.is-link-item-line-show .link-panel-back {
clip-path: polygon(0 0, 100% 0, 100% calc(var(--layout-line-width) + var(--link-item-padding)), 0 calc(var(--layout-line-width) + var(--link-item-padding)));
clip-path: polygon(0 0, 100% 0, 100% calc(var(--layout-line-width) + var(--link-item-clip-padding)), 0 calc(var(--layout-line-width) + var(--link-item-clip-padding)));
}
.is-link-orientation-bottom.is-link-item-line-show .link-panel-back {
clip-path: polygon(0 calc(100% - var(--layout-line-width) - var(--link-item-padding)), 100% calc(100% - var(--layout-line-width) - var(--link-item-padding)), 100% 100%, 0 100%);
clip-path: polygon(0 calc(100% - var(--layout-line-width) - var(--link-item-clip-padding)), 100% calc(100% - var(--layout-line-width) - var(--link-item-clip-padding)), 100% 100%, 0 100%);
}
.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(0 0, 100% 0, 100% calc(var(--link-item-url-height) + var(--link-item-padding)), 0 calc(var(--link-item-url-height) + var(--link-item-padding)));
clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-url-height) + var(--link-item-clip-padding)), 0 calc(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(0 calc(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%, 0 100%);
clip-path: polygon(0 calc(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%, 0 100%);
}
.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(0 0, 100% 0, 100% calc(var(--link-item-edit-height) + var(--link-item-padding)), 0 calc(var(--link-item-edit-height) + var(--link-item-padding)));
clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-edit-height) + var(--link-item-clip-padding)), 0 calc(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(0 calc(100% - var(--link-item-edit-height) - var(--link-item-padding)), 100% calc(100% - var(--link-item-edit-height) - var(--link-item-padding)), 100% 100%, 0 100%);
clip-path: polygon(0 calc(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%, 0 100%);
}
.link-control {

View File

@ -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) {

View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "5.12.0";
var current = "5.13.0";
var name = "Zonked Tarsier";

View File

@ -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"