diff --git a/package-lock.json b/package-lock.json index 04408bbd..c053da70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nightTab", - "version": "5.47.0", + "version": "5.48.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index bf88be47..c60f4389 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/css/auto-suggest.css b/src/css/auto-suggest.css index abc94ff8..508786b3 100644 --- a/src/css/auto-suggest.css +++ b/src/css/auto-suggest.css @@ -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 { diff --git a/src/css/base.css b/src/css/base.css index f8683d33..61dbc719 100755 --- a/src/css/base.css +++ b/src/css/base.css @@ -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 { diff --git a/src/css/button.css b/src/css/button.css index 8e22be41..289cade8 100755 --- a/src/css/button.css +++ b/src/css/button.css @@ -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, diff --git a/src/css/edge.css b/src/css/edge.css index 622a024c..0e06fa1f 100644 --- a/src/css/edge.css +++ b/src/css/edge.css @@ -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); } diff --git a/src/css/form.css b/src/css/form.css index 9ae9aea2..ffa5ccdf 100755 --- a/src/css/form.css +++ b/src/css/form.css @@ -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, diff --git a/src/css/group.css b/src/css/group.css index 36736187..6d07a16e 100644 --- a/src/css/group.css +++ b/src/css/group.css @@ -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 { diff --git a/src/css/header.css b/src/css/header.css index 15776142..50f18857 100755 --- a/src/css/header.css +++ b/src/css/header.css @@ -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 { diff --git a/src/css/link.css b/src/css/link.css index 28c46cd7..7ad01d70 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -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 { diff --git a/src/css/menu.css b/src/css/menu.css index 273fba6e..76c8fd6d 100755 --- a/src/css/menu.css +++ b/src/css/menu.css @@ -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 { diff --git a/src/css/modal.css b/src/css/modal.css index 5ab06522..10e9becf 100755 --- a/src/css/modal.css +++ b/src/css/modal.css @@ -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 { diff --git a/src/css/shade.css b/src/css/shade.css index 96451140..4f67046d 100755 --- a/src/css/shade.css +++ b/src/css/shade.css @@ -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 { diff --git a/src/css/theme.css b/src/css/theme.css index 7dd574fa..fbd65520 100644 --- a/src/css/theme.css +++ b/src/css/theme.css @@ -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, diff --git a/src/css/tip.css b/src/css/tip.css index 712690d6..af8fb8b2 100755 --- a/src/css/tip.css +++ b/src/css/tip.css @@ -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 { diff --git a/src/css/typography.css b/src/css/typography.css index 83fcd058..b40c22c8 100755 --- a/src/css/typography.css +++ b/src/css/typography.css @@ -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, diff --git a/src/css/utilities.css b/src/css/utilities.css index 632e36c6..64be311d 100755 --- a/src/css/utilities.css +++ b/src/css/utilities.css @@ -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 { diff --git a/src/css/variables.css b/src/css/variables.css index 74bd91c5..ccd28b10 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -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 */ diff --git a/src/js/theme.js b/src/js/theme.js index 0535ef9b..9620f554 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -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); diff --git a/src/js/version.js b/src/js/version.js index 7ebfb718..4e764497 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "5.47.0"; + var current = "5.48.0"; var name = "Macabre Caterpillar"; diff --git a/src/manifest.json b/src/manifest.json index 8ee8cc54..bc29e13c 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -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"