mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-11-23 00:23:28 +01:00
[design] improve link item control animation
This commit is contained in:
parent
2aa076990e
commit
b03f2c2b54
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "nightTab",
|
"name": "nightTab",
|
||||||
"version": "5.46.0",
|
"version": "5.47.0",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "nightTab",
|
"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.",
|
"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": {
|
||||||
|
@ -881,16 +881,21 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
|
height: var(--link-item-edit-height);
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(-1 * var(--link-item-edit-height));
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: height var(--layout-timing-extra-fast);
|
transition: bottom var(--layout-timing-extra-fast);
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-edit .link-control {
|
.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 {
|
.link-control-item {
|
||||||
@ -1019,13 +1024,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.link-url {
|
.link-url {
|
||||||
padding: 0 1em;
|
height: var(--link-item-url-height);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0;
|
position: absolute;
|
||||||
|
bottom: calc(-1 * var(--link-item-url-height));
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: none;
|
display: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
transition: all var(--layout-timing-extra-fast);
|
transition: bottom var(--layout-timing-extra-fast);
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-link-item-url-show .link-url {
|
.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-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:focus .link-url,
|
||||||
.is-link-item-url-show:not(.is-edit) .link-item:hover .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 {
|
.link-url-text {
|
||||||
margin: 0;
|
margin: 0 1em;
|
||||||
font-size: 0.7em;
|
font-size: 0.75em;
|
||||||
font-family: var(--theme-font-ui-name);
|
font-family: var(--theme-font-ui-name);
|
||||||
font-weight: var(--theme-font-ui-weight);
|
font-weight: var(--theme-font-ui-weight);
|
||||||
font-style: var(--theme-font-ui-style);
|
font-style: var(--theme-font-ui-style);
|
||||||
@ -1076,7 +1082,7 @@
|
|||||||
|
|
||||||
.is-edit .link-item:hover .link-url,
|
.is-edit .link-item:hover .link-url,
|
||||||
.is-edit .link-item:focus .link-url {
|
.is-edit .link-item:focus .link-url {
|
||||||
height: 0;
|
bottom: calc(-1 * var(--link-item-url-height));
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-form-text-icon {
|
.link-form-text-icon {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
var version = (function() {
|
var version = (function() {
|
||||||
|
|
||||||
var current = "5.46.0";
|
var current = "5.47.0";
|
||||||
|
|
||||||
var name = "Macabre Caterpillar";
|
var name = "Macabre Caterpillar";
|
||||||
|
|
||||||
|
@ -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.46.0",
|
"version": "5.47.0",
|
||||||
"manifest_version": 2,
|
"manifest_version": 2,
|
||||||
"chrome_url_overrides": {
|
"chrome_url_overrides": {
|
||||||
"newtab": "index.html"
|
"newtab": "index.html"
|
||||||
|
Loading…
Reference in New Issue
Block a user