mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-10 07:58:53 +01:00
[design] improve saved theme item control animation
This commit is contained in:
zombieFox
parent
e07aab5dca
commit
b239fcb510
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.47.0",
|
||||
"version": "5.48.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.47.0",
|
||||
"version": "5.48.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": {
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.auto-suggest-icon {
|
||||
|
||||
@ -21,7 +21,7 @@ body {
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
opacity: 0;
|
||||
transition: background-color var(--layout-timing-extra-fast), opacity var(--layout-duration-02) ease;
|
||||
transition: background-color var(--layout-transition-extra-fast), opacity var(--layout-duration-02) ease;
|
||||
}
|
||||
|
||||
.is-ready body {
|
||||
|
||||
@ -24,7 +24,7 @@ input[type="submit"] {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
button:focus,
|
||||
@ -92,7 +92,7 @@ button:disabled:active,
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
clip-path: polygon(0 calc(100% - var(--layout-line-width)), 100% calc(100% - var(--layout-line-width)), 100% 100%, 0% 100%);
|
||||
transition: background-color var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -119,7 +119,7 @@ button:disabled:active,
|
||||
}
|
||||
|
||||
.button-ring {
|
||||
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.button-ring:focus,
|
||||
|
||||
@ -10,5 +10,5 @@
|
||||
box-shadow: var(--edge-shadow);
|
||||
z-index: var(--z-index-edge);
|
||||
pointer-events: none;
|
||||
transition: opacity var(--layout-timing-extra-fast);
|
||||
transition: opacity var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
transition: background-color var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
/* label */
|
||||
@ -83,7 +83,7 @@ label {
|
||||
margin-bottom: 0;
|
||||
font-size: 1em;
|
||||
display: block;
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
transition: color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
label:not(:only-child):not(:last-child) {
|
||||
@ -121,7 +121,7 @@ select {
|
||||
border-width: 0;
|
||||
border-radius: var(--theme-radius);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast);
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
@ -182,7 +182,7 @@ textarea {
|
||||
cursor: text;
|
||||
resize: vertical;
|
||||
display: block;
|
||||
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast);
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
@ -216,7 +216,7 @@ textarea:disabled:focus {
|
||||
|
||||
textarea::placeholder {
|
||||
color: rgb(var(--form-placeholder));
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
transition: color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
textarea:hover::placeholder {
|
||||
@ -255,7 +255,7 @@ input[type="text"] {
|
||||
border-width: 0;
|
||||
border-radius: var(--theme-radius);
|
||||
cursor: text;
|
||||
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast);
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
@ -341,7 +341,7 @@ input[type="search"]::placeholder,
|
||||
input[type="tel"]::placeholder,
|
||||
input[type="text"]::placeholder {
|
||||
color: rgb(var(--form-placeholder));
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
transition: color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
input[type="email"]:hover::placeholder,
|
||||
@ -433,7 +433,7 @@ input[type="radio"] {
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
transition: color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label,
|
||||
@ -450,7 +450,7 @@ input[type="radio"]+label {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
transition: transform var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
|
||||
transition: transform var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover+label,
|
||||
@ -493,7 +493,7 @@ input[type="radio"]+label .label-icon {
|
||||
flex-shrink: 0;
|
||||
z-index: 1;
|
||||
box-shadow: none;
|
||||
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label .label-icon {
|
||||
@ -560,7 +560,7 @@ input[type="radio"]+label .label-icon:before {
|
||||
transform: scale(0.7);
|
||||
transform-origin: center;
|
||||
z-index: 2;
|
||||
transition: background-color var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), border-radius var(--layout-transition-extra-fast), transform var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label .label-icon:before {
|
||||
@ -622,7 +622,7 @@ input[type="checkbox"]+label .label-icon:after {
|
||||
transform: scale(0);
|
||||
transform-origin: center;
|
||||
z-index: 2;
|
||||
transition: transform var(--layout-timing-extra-fast);
|
||||
transition: transform var(--layout-transition-extra-fast);
|
||||
clip-path: polygon(7% 56%, 37% 86%, 95% 27%, 84% 16%, 37% 64%, 18% 45%);
|
||||
}
|
||||
|
||||
@ -651,7 +651,7 @@ input[type="checkbox"]:checked:disabled:active+label .label-icon:after {
|
||||
input[type="checkbox"]+label .label-block-item,
|
||||
input[type="radio"]+label .label-block-item {
|
||||
color: rgb(var(--form-label));
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
transition: color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover+label .label-block-item,
|
||||
@ -684,7 +684,7 @@ input[type="radio"]:disabled:focus+label .label-block-item {
|
||||
input[type="checkbox"]+label .label-block-item.muted,
|
||||
input[type="radio"]+label .label-block-item.muted {
|
||||
color: rgb(var(--utilities-muted));
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
transition: color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover+label .label-block-item.muted,
|
||||
@ -745,7 +745,7 @@ input[type="color"] {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
transition: box-shadow var(--layout-timing-extra-fast), opacity var(--layout-timing-extra-fast);
|
||||
transition: box-shadow var(--layout-transition-extra-fast), opacity var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
input[type="color"]:hover {
|
||||
@ -838,7 +838,7 @@ input[type="range"]:before {
|
||||
border: 0;
|
||||
border-radius: var(--theme-radius);
|
||||
transform: translate(0, -50%);
|
||||
transition: background-color var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
input[type="range"]:focus:before,
|
||||
@ -874,7 +874,7 @@ input[type="range"]::-webkit-slider-thumb {
|
||||
width: var(--form-thumb-size);
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast);
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@ -930,7 +930,7 @@ input[type="range"]::-moz-range-track {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: var(--theme-radius);
|
||||
transition: all var(--layout-timing-extra-fast);
|
||||
transition: all var(--layout-transition-extra-fast);
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@ -963,7 +963,7 @@ input[type="range"]::-moz-range-thumb {
|
||||
width: var(--form-thumb-size);
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast);
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
@ -1015,7 +1015,7 @@ input[type="range"]::-moz-range-progress {
|
||||
background-color: rgb(var(--form-range-progress-background));
|
||||
height: calc(var(--layout-line-width) * 2);
|
||||
border-radius: var(--theme-radius);
|
||||
transition: background-color var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
input[type="range"]:active::-moz-range-progress {
|
||||
@ -1030,7 +1030,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
.form-helper-item {
|
||||
font-size: 0.8em;
|
||||
color: rgb(var(--form-helper));
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
transition: color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.form-helper-item.disabled {
|
||||
@ -1070,7 +1070,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
box-shadow: none;
|
||||
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.form-input-button input[type="checkbox"]:focus+label,
|
||||
@ -1140,7 +1140,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
.form-input-button-ring input[type="radio"]+label,
|
||||
.form-input-button-ring input[type="color"]+label,
|
||||
.form-input-button-ring input[type="file"]+label {
|
||||
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.form-input-button-ring input[type="checkbox"]:focus+label,
|
||||
@ -1200,7 +1200,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
clip-path: polygon(0 calc(100% - var(--layout-line-width)), 100% calc(100% - var(--layout-line-width)), 100% 100%, 0% 100%);
|
||||
transition: background-color var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -1369,7 +1369,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
padding: calc(var(--form-thumb-size) / 2);
|
||||
display: inline-grid;
|
||||
overflow: hidden;
|
||||
transition: background-color var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.form-grid:hover {
|
||||
@ -1765,7 +1765,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
border-style: solid;
|
||||
border-radius: var(--theme-radius);
|
||||
white-space: nowrap;
|
||||
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.form-group-text:hover,
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
transition: padding var(--layout-timing-extra-fast) var(--layout-duration-04);
|
||||
transition: padding var(--layout-transition-extra-fast) var(--layout-duration-04);
|
||||
}
|
||||
|
||||
.group-header-item {
|
||||
@ -63,18 +63,18 @@
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
transition:
|
||||
width var(--layout-timing-extra-fast),
|
||||
height var(--layout-timing-extra-fast) var(--layout-duration-04),
|
||||
margin var(--layout-timing-extra-fast);
|
||||
width var(--layout-transition-extra-fast),
|
||||
height var(--layout-transition-extra-fast) var(--layout-duration-04),
|
||||
margin var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-edit .group-header-item-control {
|
||||
height: 2.5em;
|
||||
width: 15em;
|
||||
transition:
|
||||
width var(--layout-timing-extra-fast) var(--layout-duration-04),
|
||||
height var(--layout-timing-extra-fast),
|
||||
margin var(--layout-timing-extra-fast) var(--layout-duration-04);
|
||||
width var(--layout-transition-extra-fast) var(--layout-duration-04),
|
||||
height var(--layout-transition-extra-fast),
|
||||
margin var(--layout-transition-extra-fast) var(--layout-duration-04);
|
||||
}
|
||||
|
||||
.is-group-area-justify-center .group-header-item-control:not(:only-child):not(:last-child),
|
||||
@ -96,7 +96,7 @@
|
||||
}
|
||||
|
||||
.is-edit .group-header {
|
||||
transition: padding var(--layout-timing-extra-fast);
|
||||
transition: padding var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-group-area-justify-left .group-header {
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
|
||||
.header-area {
|
||||
background-color: transparent;
|
||||
transition: background-color var(--layout-timing-medium), opacity var(--layout-timing-medium), border-radius var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-medium), opacity var(--layout-transition-medium), border-radius var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-layout-direction-vertical .header-area {
|
||||
|
||||
@ -158,7 +158,7 @@
|
||||
height: 100%;
|
||||
display: block;
|
||||
transform: scale(1);
|
||||
transition: transform var(--layout-timing-extra-fast);
|
||||
transition: transform var(--layout-transition-extra-fast);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -216,7 +216,7 @@
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast), border-radius var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.link-image {
|
||||
@ -392,7 +392,7 @@
|
||||
font-size: 1em;
|
||||
z-index: 2;
|
||||
transform: rotate(var(--link-item-display-rotate));
|
||||
transition: font-size var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
|
||||
transition: font-size var(--layout-transition-extra-fast), top var(--layout-transition-extra-fast), left var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-edit .link-display {
|
||||
@ -678,12 +678,12 @@
|
||||
color: rgb(var(--theme-accent));
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
transition: color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.link-display-icon {
|
||||
color: rgb(var(--theme-accent));
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
transition: color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.link-display-image {
|
||||
@ -736,7 +736,7 @@
|
||||
font-style: var(--theme-font-ui-style);
|
||||
color: rgb(var(--theme-color-12));
|
||||
display: none;
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
transition: color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-link-item-display-name-show .link-display-name {
|
||||
@ -788,7 +788,7 @@
|
||||
align-items: stretch;
|
||||
justify-content: flex-end;
|
||||
z-index: 2;
|
||||
transition: height var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), clip-path var(--layout-timing-extra-fast);
|
||||
transition: height var(--layout-transition-extra-fast), border-radius var(--layout-transition-extra-fast), top var(--layout-transition-extra-fast), clip-path var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-edit .link-panel-back {
|
||||
@ -890,12 +890,12 @@
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
transition: bottom var(--layout-timing-extra-fast);
|
||||
transition: bottom var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-edit .link-control {
|
||||
bottom: 0;
|
||||
transition: bottom var(--layout-duration-05) cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
transition: bottom var(--layout-duration-05) var(--layout-timing-bounce);
|
||||
}
|
||||
|
||||
.link-control-item {
|
||||
@ -1031,7 +1031,7 @@
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
align-items: center;
|
||||
transition: bottom var(--layout-timing-extra-fast);
|
||||
transition: bottom var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-link-item-url-show .link-url {
|
||||
@ -1104,7 +1104,7 @@
|
||||
|
||||
.link-form-text-icon .link-form-icon {
|
||||
transform: scale(1) rotate(0deg);
|
||||
transition: transform var(--layout-timing-extra-fast);
|
||||
transition: transform var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.link-form-text-icon:not(.disabled):hover .link-form-icon {
|
||||
@ -1129,7 +1129,7 @@
|
||||
padding-bottom: 1em;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height var(--layout-timing-extra-fast);
|
||||
transition: height var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.link-form-collapse.active {
|
||||
@ -1137,7 +1137,7 @@
|
||||
}
|
||||
|
||||
.link-form-collapse-button-icon {
|
||||
transition: transform var(--layout-timing-extra-fast);
|
||||
transition: transform var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.link-form-collapse-button.active .link-form-collapse-button-icon {
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
user-select: none;
|
||||
z-index: var(--z-index-menu);
|
||||
pointer-events: none;
|
||||
transition: transform var(--layout-timing-extra-fast);
|
||||
transition: transform var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.menu:focus {
|
||||
@ -33,7 +33,7 @@
|
||||
align-items: stretch;
|
||||
overflow-y: auto;
|
||||
pointer-events: all;
|
||||
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-menu-open .menu-area {
|
||||
@ -117,7 +117,7 @@
|
||||
|
||||
.menu-content-item:not(:last-child) {
|
||||
border-bottom: var(--horizontal-rule-large);
|
||||
transition: border-color var(--layout-timing-extra-fast);
|
||||
transition: border-color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.menu-item-header {
|
||||
@ -165,7 +165,7 @@
|
||||
flex-wrap: nowrap;
|
||||
overflow-y: auto;
|
||||
z-index: 1;
|
||||
transition: background-color var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-edge .menu-nav {
|
||||
@ -223,7 +223,7 @@
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast);
|
||||
transition: background-color var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.menu-subnav.active {
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
perspective: 1000px;
|
||||
transition: opacity var(--layout-timing-extra-fast);
|
||||
transition: opacity var(--layout-transition-extra-fast);
|
||||
z-index: var(--z-index-modal);
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
grid-template-rows: 1fr auto;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
transition: opacity var(--layout-timing-extra-fast);
|
||||
transition: opacity var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.modal-wrapper .container {
|
||||
|
||||
@ -6,12 +6,12 @@
|
||||
width: calc(100% + 2em);
|
||||
height: calc(100% + 2em);
|
||||
opacity: 0;
|
||||
transition: opacity var(--layout-timing-extra-fast), background-color var(--layout-timing-extra-fast);
|
||||
transition: opacity var(--layout-transition-extra-fast), background-color var(--layout-transition-extra-fast);
|
||||
z-index: var(--z-index-shade);
|
||||
}
|
||||
|
||||
.is-theme-accent-cycle .shade {
|
||||
transition: opacity var(--layout-timing-extra-fast);
|
||||
transition: opacity var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-edge:not(.is-background-image-show) .shade {
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
left: 0;
|
||||
display: block;
|
||||
z-index: 2;
|
||||
transition: height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
|
||||
transition: height var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast), border-radius var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-theme-custom-edit .theme-custom-button {
|
||||
@ -40,38 +40,42 @@
|
||||
box-shadow: var(--form-ring-accent);
|
||||
}
|
||||
|
||||
.theme-custom-control {
|
||||
.theme-custom-control-wrap {
|
||||
background-color: rgb(var(--button-background));
|
||||
border-radius: var(--theme-radius);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
transition: background-color var(--layout-transition-extra-fast), border-radius var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.theme-custom-control {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: calc(-1 * var(--theme-custom-edit-height));
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
z-index: 1;
|
||||
transition: height var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
|
||||
transition: bottom var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-theme-custom-edit .theme-custom-control {
|
||||
bottom: 0;
|
||||
transition: bottom var(--layout-duration-05) var(--layout-timing-bounce);
|
||||
}
|
||||
|
||||
.theme-custom-control .theme-custom-control-item {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
min-height: initial;
|
||||
height: 0;
|
||||
transition: height var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.is-theme-custom-edit .theme-custom-control-item {
|
||||
height: var(--theme-custom-edit-height);
|
||||
padding: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.theme-custom-control-item .button-icon {
|
||||
font-size: 1em;
|
||||
position: relative;
|
||||
transition: bottom var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast), right var(--layout-timing-extra-fast);
|
||||
transition: bottom var(--layout-transition-extra-fast), left var(--layout-transition-extra-fast), right var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.theme-custom-control-item:first-child .button-icon {
|
||||
@ -93,7 +97,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
transition: border-radius var(--layout-timing-extra-fast);
|
||||
transition: border-radius var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.is-theme-custom-edit .theme-custom-preview {
|
||||
@ -116,7 +120,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
transition: clip-path var(--layout-timing-extra-fast);
|
||||
transition: clip-path var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.theme-preset-background-01,
|
||||
@ -212,7 +216,7 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: initial;
|
||||
transform: scale(1);
|
||||
transition: color var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast), max-width var(--layout-timing-extra-fast), max-height var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
|
||||
transition: color var(--layout-transition-extra-fast), transform var(--layout-transition-extra-fast), max-width var(--layout-transition-extra-fast), max-height var(--layout-transition-extra-fast), top var(--layout-transition-extra-fast), left var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
.theme-preset-button:focus .theme-preset-background-02,
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
z-index: var(--z-index-tip);
|
||||
transition: opacity var(--layout-timing-extra-fast);
|
||||
transition: opacity var(--layout-transition-extra-fast);
|
||||
transform-origin: bottom center;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -36,11 +36,11 @@
|
||||
}
|
||||
|
||||
.tip-intro {
|
||||
animation: grow var(--layout-timing-medium) 1;
|
||||
animation: grow var(--layout-transition-medium) 1;
|
||||
}
|
||||
|
||||
.tip-outro {
|
||||
animation: shirnk var(--layout-timing-medium) 1;
|
||||
animation: shirnk var(--layout-transition-medium) 1;
|
||||
}
|
||||
|
||||
.tip-message {
|
||||
|
||||
@ -70,7 +70,7 @@ hr {
|
||||
border-radius: var(--theme-radius);
|
||||
margin: calc(var(--form-wrap-space) * 1.5) 0;
|
||||
clear: both;
|
||||
transition: border-color var(--layout-timing-extra-fast);
|
||||
transition: border-color var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
b,
|
||||
@ -88,7 +88,7 @@ i {
|
||||
a {
|
||||
color: rgb(var(--theme-color-16));
|
||||
text-decoration: underline;
|
||||
transition: text-decoration var(--layout-timing-extra-fast);
|
||||
transition: text-decoration var(--layout-transition-extra-fast);
|
||||
}
|
||||
|
||||
a:link,
|
||||
|
||||
@ -36,15 +36,15 @@
|
||||
}
|
||||
|
||||
.is-shake {
|
||||
animation: shake var(--layout-timing-slow) 1;
|
||||
animation: shake var(--layout-transition-slow) 1;
|
||||
}
|
||||
|
||||
.is-pop {
|
||||
animation: pop var(--layout-timing-medium) 1;
|
||||
animation: pop var(--layout-transition-medium) 1;
|
||||
}
|
||||
|
||||
.is-jello {
|
||||
animation: jello var(--layout-timing-slow) 1;
|
||||
animation: jello var(--layout-transition-slow) 1;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
|
||||
@ -152,11 +152,13 @@
|
||||
--layout-duration-08: 0.8s;
|
||||
--layout-duration-09: 0.9s;
|
||||
--layout-duration-10: 1s;
|
||||
--layout-timing-extra-fast: var(--layout-duration-02) ease-in-out;
|
||||
--layout-timing-fast: var(--layout-duration-04) ease-in-out;
|
||||
--layout-timing-medium: var(--layout-duration-06) ease-in-out;
|
||||
--layout-timing-slow: var(--layout-duration-08) ease-in-out;
|
||||
--layout-timing-extra-slow: var(--layout-duration-10) ease-in-out;
|
||||
--layout-timing-ease: ease-in-out;
|
||||
--layout-timing-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
--layout-transition-extra-fast: var(--layout-duration-02) var(--layout-timing-ease);
|
||||
--layout-transition-fast: var(--layout-duration-04) var(--layout-timing-ease);
|
||||
--layout-transition-medium: var(--layout-duration-06) var(--layout-timing-ease);
|
||||
--layout-transition-slow: var(--layout-duration-08) var(--layout-timing-ease);
|
||||
--layout-transition-extra-slow: var(--layout-duration-10) var(--layout-timing-ease);
|
||||
--horizontal-rule-small: 1px solid rgb(var(--theme-color-02));
|
||||
--horizontal-rule-large: 2px solid rgb(var(--theme-color-02));
|
||||
/* background */
|
||||
|
||||
@ -2485,6 +2485,7 @@ var theme = (function() {
|
||||
var themeCustomTile = helper.node("div|class:theme-custom-tile");
|
||||
var themeCustomButton = helper.node("button|class:theme-custom-button button button-block button-ring,tabindex:-1");
|
||||
var themeCustomPreview = helper.node("span|class:theme-custom-preview");
|
||||
var themeCustomControlWrap = helper.node("div|class:theme-custom-control-wrap");
|
||||
var themeCustomControl = helper.node("div|class:theme-custom-control");
|
||||
var themeCustomEdit = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button,tabindex:-1");
|
||||
var themeCustomEditIcon = helper.node("span|class:button-icon icon-edit");
|
||||
@ -2544,8 +2545,9 @@ var theme = (function() {
|
||||
themeCustomRemove.appendChild(themeCustomRemoveIcon);
|
||||
themeCustomControl.appendChild(themeCustomEdit);
|
||||
themeCustomControl.appendChild(themeCustomRemove);
|
||||
themeCustomControlWrap.appendChild(themeCustomControl);
|
||||
themeCustomTile.appendChild(themeCustomButton);
|
||||
themeCustomTile.appendChild(themeCustomControl);
|
||||
themeCustomTile.appendChild(themeCustomControlWrap);
|
||||
themeCustomItem.appendChild(themeCustomTile);
|
||||
formInline.appendChild(themeCustomItem);
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "5.47.0";
|
||||
var current = "5.48.0";
|
||||
|
||||
var name = "Macabre Caterpillar";
|
||||
|
||||
|
||||
@ -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.47.0",
|
||||
"version": "5.48.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user