[design] improve link add preview

This commit is contained in:
zombieFox 2020-07-25 08:28:44 +01:00
parent dbfa3b4e75
commit 0a822a296a
5 changed files with 46 additions and 6 deletions

2
package-lock.json generated
View File

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

View File

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

View File

@ -870,14 +870,14 @@
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 .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-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 .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(0 0, 100% 0, 100% 0, 0 0);
}
.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(0 100%, 100% 100%, 100% 100%, 0 100%);
}
.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(0 0, 100% 0, 100% var(--layout-line-width), 0 var(--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(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-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(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-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(0 calc(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%, 0 100%);
}

View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "5.67.0";
var current = "5.68.0";
var name = "Jaded Raven";

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