[design] add more background colour transitions

This commit is contained in:
zombieFox 2020-04-23 22:02:53 +01:00
parent 11f46ebb41
commit 67a1be8a3e
8 changed files with 11 additions and 7 deletions

2
package-lock.json generated
View File

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

View File

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

View File

@ -21,7 +21,7 @@ body {
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
opacity: 0; opacity: 0;
transition: opacity var(--layout-duration-03) ease-in; transition: background-color var(--layout-timing-extra-fast), opacity var(--layout-duration-03) ease-in;
} }
.is-ready body { .is-ready body {

View File

@ -73,6 +73,7 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 4; z-index: 4;
transition: background-color var(--layout-timing-extra-fast);
} }
/* label */ /* label */

View File

@ -33,7 +33,7 @@
align-items: stretch; align-items: stretch;
overflow-y: auto; overflow-y: auto;
pointer-events: all; pointer-events: all;
transition: box-shadow var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
} }
.is-menu-open .menu-area { .is-menu-open .menu-area {
@ -117,6 +117,7 @@
.menu-content-item:not(:last-child) { .menu-content-item:not(:last-child) {
border-bottom: var(--horizontal-rule-large); border-bottom: var(--horizontal-rule-large);
transition: border-color var(--layout-timing-extra-fast);
} }
.menu-item-header { .menu-item-header {
@ -164,6 +165,7 @@
flex-wrap: nowrap; flex-wrap: nowrap;
overflow-y: auto; overflow-y: auto;
z-index: 1; z-index: 1;
transition: background-color var(--layout-timing-extra-fast);
} }
.menu-content { .menu-content {
@ -217,7 +219,7 @@
flex-wrap: nowrap; flex-wrap: nowrap;
overflow: hidden; overflow: hidden;
height: 0; height: 0;
transition: height var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast);
} }
.menu-subnav.active { .menu-subnav.active {

View File

@ -70,6 +70,7 @@ hr {
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
margin: calc(var(--form-wrap-space) * 1.5) 0; margin: calc(var(--form-wrap-space) * 1.5) 0;
clear: both; clear: both;
transition: border-color var(--layout-timing-extra-fast);
} }
b, b,

View File

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

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