diff --git a/src/css/auto-suggest.css b/src/css/auto-suggest.css index ed8556fa..d7afc890 100644 --- a/src/css/auto-suggest.css +++ b/src/css/auto-suggest.css @@ -42,7 +42,7 @@ flex-direction: column; justify-content: flex-start; align-items: center; - transition: background-color var(--layout-animation-speed-fast) ease-in-out, color var(--layout-animation-speed-fast) ease-in-out, border-color var(--layout-animation-speed-fast) ease-in-out, box-shadow var(--layout-animation-speed-fast) ease-in-out; + transition: background-color var(--layout-transition-speed-fast) ease-in-out, color var(--layout-transition-speed-fast) ease-in-out, border-color var(--layout-transition-speed-fast) ease-in-out, box-shadow var(--layout-transition-speed-fast) ease-in-out; } .auto-suggest-link:link, diff --git a/src/css/background.css b/src/css/background.css index 83ee24a4..e1284629 100755 --- a/src/css/background.css +++ b/src/css/background.css @@ -6,7 +6,7 @@ height: 100vh; pointer-events: none; z-index: var(--z-index-background); - animation: appear var(--layout-animation-speed-slow) 1; + animation: appear var(--layout-transition-speed-slow) 1; display: none; } diff --git a/src/css/base.css b/src/css/base.css index 4446bb06..82807a7f 100755 --- a/src/css/base.css +++ b/src/css/base.css @@ -18,5 +18,5 @@ body { justify-content: center; align-items: center; min-height: 100vh; - transition: background-color var(--layout-animation-speed-fast) ease-in-out; + transition: background-color var(--layout-transition-speed-fast) ease-in-out; } diff --git a/src/css/button.css b/src/css/button.css index 089922cd..86074178 100755 --- a/src/css/button.css +++ b/src/css/button.css @@ -22,7 +22,7 @@ input[type="submit"] { white-space: nowrap; cursor: pointer; box-shadow: none; - transition: background-color var(--layout-animation-speed-fast) ease-in-out, color var(--layout-animation-speed-fast) ease-in-out, border var(--layout-animation-speed-fast) ease-in-out; + transition: background-color var(--layout-transition-speed-fast) ease-in-out, color var(--layout-transition-speed-fast) ease-in-out, border var(--layout-transition-speed-fast) ease-in-out; display: inline-flex; flex-direction: row; justify-content: center; diff --git a/src/css/edge.css b/src/css/edge.css index 83822c9e..ad0943c1 100644 --- a/src/css/edge.css +++ b/src/css/edge.css @@ -10,5 +10,5 @@ box-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1); z-index: var(--z-index-edge); pointer-events: none; - transition: opacity var(--layout-animation-speed-fast) ease-in-out; + transition: opacity var(--layout-transition-speed-fast) ease-in-out; } diff --git a/src/css/form.css b/src/css/form.css index 1d851045..debedb06 100755 --- a/src/css/form.css +++ b/src/css/form.css @@ -19,7 +19,7 @@ input[type="text"] { border-color: transparent; border-radius: var(--theme-radius); cursor: text; - transition: background-color var(--layout-animation-speed-fast) ease-in-out, color var(--layout-animation-speed-fast) ease-in-out, border-color var(--layout-animation-speed-fast) ease-in-out, box-shadow var(--layout-animation-speed-fast) ease-in-out; + transition: background-color var(--layout-transition-speed-fast) ease-in-out, color var(--layout-transition-speed-fast) ease-in-out, border-color var(--layout-transition-speed-fast) ease-in-out, box-shadow var(--layout-transition-speed-fast) ease-in-out; -moz-appearance: textfield; } @@ -93,7 +93,7 @@ input[type="search"]::placeholder, input[type="tel"]::placeholder, input[type="text"]::placeholder { color: rgb(var(--form-input-placeholder)); - transition: color var(--layout-animation-speed-fast) ease-in-out; + transition: color var(--layout-transition-speed-fast) ease-in-out; } input[type="email"]:hover::placeholder, @@ -168,7 +168,7 @@ input[type="radio"] { pointer-events: none; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - /* transition: all var(--layout-animation-speed-fast) ease-in-out; */ + /* transition: all var(--layout-transition-speed-fast) ease-in-out; */ } input[type="checkbox"]+label, @@ -181,7 +181,7 @@ input[type="radio"]+label { flex-direction: row; justify-content: flex-start; align-items: flex-start; - transition: all var(--layout-animation-speed-fast) ease-in-out; + transition: all var(--layout-transition-speed-fast) ease-in-out; } input[type="checkbox"]+label:before, @@ -301,7 +301,7 @@ input[type="color"] { border-radius: var(--theme-radius); overflow: hidden; cursor: pointer; - transition: border-color var(--layout-animation-speed-fast) ease-in-out, box-shadow var(--layout-animation-speed-fast) ease-in-out; + transition: border-color var(--layout-transition-speed-fast) ease-in-out, box-shadow var(--layout-transition-speed-fast) ease-in-out; } input[type="color"]:hover { @@ -372,7 +372,7 @@ input[type="range"]:before { border: 0; border-radius: var(--theme-radius); transform: translate(0, -50%); - transition: all var(--layout-animation-speed-fast) ease-in-out; + transition: all var(--layout-transition-speed-fast) ease-in-out; } input[type="range"]:focus { @@ -416,7 +416,7 @@ input[type="range"]::-webkit-slider-thumb { box-sizing: border-box; /* z-index: 2; */ transform: scale(1); - transition: all var(--layout-animation-speed-fast) ease-in-out; + transition: all var(--layout-transition-speed-fast) ease-in-out; -webkit-appearance: none; } @@ -460,7 +460,7 @@ input[type="range"]::-moz-range-track { width: 100%; border: 0; border-radius: var(--theme-radius); - transition: all var(--layout-animation-speed-fast) ease-in-out; + transition: all var(--layout-transition-speed-fast) ease-in-out; -webkit-appearance: none; } @@ -480,7 +480,7 @@ input[type="range"]::-moz-range-thumb { box-sizing: border-box; /* z-index: 2; */ transform: scale(1); - transition: all var(--layout-animation-speed-fast) ease-in-out; + transition: all var(--layout-transition-speed-fast) ease-in-out; -webkit-appearance: none; } @@ -586,7 +586,7 @@ input[type="range"][disabled]~.input-helper { white-space: nowrap; cursor: pointer; box-shadow: none; - transition: background-color var(--layout-animation-speed-fast) ease-in-out, color var(--layout-animation-speed-fast) ease-in-out, border var(--layout-animation-speed-fast) ease-in-out; + transition: background-color var(--layout-transition-speed-fast) ease-in-out, color var(--layout-transition-speed-fast) ease-in-out, border var(--layout-transition-speed-fast) ease-in-out; display: inline-flex; flex-direction: row; justify-content: center; @@ -785,7 +785,7 @@ input[type="range"][disabled]~.input-helper { border-style: solid; border-color: transparent; border-radius: var(--theme-radius); - transition: background-color var(--layout-animation-speed-fast) ease-in-out, border-color var(--layout-animation-speed-fast) ease-in-out; + transition: background-color var(--layout-transition-speed-fast) ease-in-out, border-color var(--layout-transition-speed-fast) ease-in-out; } .form-group-text:hover, diff --git a/src/css/header.css b/src/css/header.css index 220458b6..09b6de4e 100755 --- a/src/css/header.css +++ b/src/css/header.css @@ -46,7 +46,7 @@ left: 0; opacity: 0; pointer-events: none; - transition: background-color var(--layout-animation-speed-slow) ease-in-out, border-radius var(--layout-animation-speed-fast) ease-in-out; + transition: background-color var(--layout-transition-speed-slow) ease-in-out, border-radius var(--layout-transition-speed-fast) ease-in-out; } .is-header-radius .header-shade { diff --git a/src/css/link.css b/src/css/link.css index 2649e141..cbfc69cc 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -57,7 +57,7 @@ height: var(--link-item-height); display: block; transform: scale(1); - transition: transform var(--layout-animation-speed-fast) ease-in-out; + transition: transform var(--layout-transition-speed-fast) ease-in-out; z-index: 1; } @@ -102,7 +102,7 @@ overflow: hidden; position: relative; user-select: none; - transition: background-color var(--layout-animation-speed-fast) ease-in-out, height var(--layout-animation-speed-fast) ease-in-out, box-shadow var(--layout-animation-speed-fast) ease-in-out; + transition: background-color var(--layout-transition-speed-fast) ease-in-out, height var(--layout-transition-speed-fast) ease-in-out, box-shadow var(--layout-transition-speed-fast) ease-in-out; } .is-link-item-line .link-panel-front { @@ -202,7 +202,7 @@ justify-content: flex-end; align-items: stretch; z-index: 2; - transition: height var(--layout-animation-speed-fast) ease-in-out, top var(--layout-animation-speed-fast) ease-in-out; + transition: height var(--layout-transition-speed-fast) ease-in-out, top var(--layout-transition-speed-fast) ease-in-out; } .is-link-item-line .link-panel-back { @@ -227,7 +227,7 @@ flex-direction: row; align-items: stretch; justify-content: center; - transition: all var(--layout-animation-speed-fast) ease-in-out; + transition: all var(--layout-transition-speed-fast) ease-in-out; } .link-control-item { @@ -286,7 +286,7 @@ overflow: hidden; display: none; align-items: center; - transition: all var(--layout-animation-speed-fast) ease-in-out; + transition: all var(--layout-transition-speed-fast) ease-in-out; } .is-link-url-show .link-url { @@ -348,12 +348,12 @@ color: rgb(var(--theme-accent)); line-height: 1; white-space: nowrap; - transition: color var(--layout-animation-speed-fast) ease-in-out; + transition: color var(--layout-transition-speed-fast) ease-in-out; } .link-display-icon { color: rgb(var(--theme-accent)); - transition: color var(--layout-animation-speed-fast) ease-in-out; + transition: color var(--layout-transition-speed-fast) ease-in-out; } .is-link-style-block .link-display-letter, @@ -393,7 +393,7 @@ color: rgb(var(--theme-gray-12)); display: none; text-align: center; - transition: color var(--layout-animation-speed-fast) ease-in-out; + transition: color var(--layout-transition-speed-fast) ease-in-out; } .is-link-display-alignment-horizontal-left .link-name { @@ -481,7 +481,7 @@ .link-form-text-icon .link-form-icon { transform: scale(1) rotate(0deg); - transition: transform var(--layout-animation-speed-fast) ease-in-out; + transition: transform var(--layout-transition-speed-fast) ease-in-out; } .link-form-text-icon:not([disabled]):hover .link-form-icon { diff --git a/src/css/menu.css b/src/css/menu.css index 802a8ca8..1fa4f8ac 100755 --- a/src/css/menu.css +++ b/src/css/menu.css @@ -6,7 +6,7 @@ width: 100%; height: 80vh; transform: translateY(calc(-100% - 2em)); - transition: transform var(--layout-animation-speed-fast) ease-in-out; + transition: transform var(--layout-transition-speed-fast) ease-in-out; z-index: var(--z-index-menu); pointer-events: none; } @@ -28,7 +28,7 @@ overflow-y: auto; pointer-events: all; opacity: 1; - transition: background-color var(--layout-animation-speed-fast) ease-in-out, opacity var(--layout-animation-speed-fast) ease-in-out; + transition: background-color var(--layout-transition-speed-fast) ease-in-out, opacity var(--layout-transition-speed-fast) ease-in-out; } .is-edge .menu-area { diff --git a/src/css/modal.css b/src/css/modal.css index 7b557ae1..5aab15c6 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-animation-speed-fast) ease-in-out; + transition: opacity var(--layout-transition-speed-fast) ease-in-out; 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-animation-speed-fast); + transition: opacity var(--layout-transition-speed-fast); } .modal-wrapper .container { @@ -42,7 +42,7 @@ } .is-transition-end .modal-wrapper { - transition: opacity var(--layout-animation-speed-fast) ease-in-out; + transition: opacity var(--layout-transition-speed-fast) ease-in-out; } .modal-body { diff --git a/src/css/shade.css b/src/css/shade.css index 9cda9621..a6af4994 100755 --- a/src/css/shade.css +++ b/src/css/shade.css @@ -6,7 +6,7 @@ width: calc(100% + 2em); height: calc(100% + 2em); opacity: 0; - transition: opacity var(--layout-animation-speed-fast) ease-in-out, background-color var(--layout-animation-speed-fast) ease-in-out; + transition: opacity var(--layout-transition-speed-fast) ease-in-out, background-color var(--layout-transition-speed-fast) ease-in-out; z-index: var(--z-index-shade); } diff --git a/src/css/tip.css b/src/css/tip.css index 4eedfe65..32fc006b 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-animation-speed-fast) ease-in-out; + transition: opacity var(--layout-transition-speed-fast) ease-in-out; transform-origin: bottom center; pointer-events: none; } @@ -36,11 +36,11 @@ } .tip-intro { - animation: grow var(--layout-animation-speed-slow) 1; + animation: grow var(--layout-transition-speed-slow) 1; } .tip-outro { - animation: shirnk var(--layout-animation-speed-slow) 1; + animation: shirnk var(--layout-transition-speed-slow) 1; } .tip-message { diff --git a/src/css/typography.css b/src/css/typography.css index bbab9b74..85b6b194 100755 --- a/src/css/typography.css +++ b/src/css/typography.css @@ -102,7 +102,7 @@ a:active { border-bottom-width: calc(var(--layout-line-width) / 2); border-bottom-style: solid; border-bottom-color: rgb(var(--theme-gray-06)); - transition: color var(--layout-animation-speed-fast), border-color var(--layout-animation-speed-fast); + transition: color var(--layout-transition-speed-fast), border-color var(--layout-transition-speed-fast); } .a-underline:hover { diff --git a/src/css/utilities.css b/src/css/utilities.css index ea5ffe5c..758b0f38 100755 --- a/src/css/utilities.css +++ b/src/css/utilities.css @@ -32,9 +32,9 @@ } .is-shake { - animation: shake var(--layout-animation-speed-slow) 1; + animation: shake var(--layout-transition-speed-slow) 1; } .is-pop { - animation: pop var(--layout-animation-speed-fast) 1; + animation: pop var(--layout-transition-speed-fast) 1; } diff --git a/src/css/variables.css b/src/css/variables.css index 6874a5d7..2bfe6ab6 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -51,9 +51,9 @@ --layout-width: 80%; --layout-padding-multiplier: 4; --layout-gutter-multiplier: 4; - --layout-animation-speed-fast: 0.2s; - --layout-animation-speed-medium: 0.4s; - --layout-animation-speed-slow: 0.6s; + --layout-transition-speed-fast: 0.2s; + --layout-transition-speed-medium: 0.4s; + --layout-transition-speed-slow: 0.6s; --layout-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2); --layout-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2); --layout-shadow-large: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2); diff --git a/src/js/version.js b/src/js/version.js index a8a3776d..cb669bcb 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "3.24.0"; + var current = "3.25.0"; var compare = function(a, b) { var pa = a.split("."); diff --git a/src/manifest.json b/src/manifest.json index 5f8684ca..30673b7a 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": "3.24.0", + "version": "3.25.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"