extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-23 08:33:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] move link item padding to variable file

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

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

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "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.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

20
src/css/link.css
View File

@ -191,11 +191,11 @@
} }
.is-link-style-block .link-panel-front { .is-link-style-block .link-panel-front {
padding: 1em; padding: calc(1em * var(--link-item-padding));
} }
.is-link-style-list .link-panel-front { .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 { .is-theme-radius .link-panel-front {
@ -770,19 +770,19 @@
} }
.is-link-orientation-top .link-panel-back { .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 { .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 { .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 { .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, .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 .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:focus-within .link-panel-back,
.is-link-item-url-show.is-link-orientation-top .link-item:hover .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 .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:focus-within .link-panel-back,
.is-link-item-url-show.is-link-orientation-bottom .link-item:hover .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-panel-back,
.is-edit.is-link-orientation-top .link-item:focus .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:focus-within .link-panel-back,
.is-edit.is-link-orientation-top .link-item:hover .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-panel-back,
.is-edit.is-link-orientation-bottom .link-item:focus .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:focus-within .link-panel-back,
.is-edit.is-link-orientation-bottom .link-item:hover .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 { .link-control {

5
src/css/variables.css
View File

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

2
src/js/version.js
View File

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

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_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.", "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, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"