[refactor] improve style transition variables

src/css/auto-suggest.css

@@ -42,7 +42,7 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  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;
+  transition: background-color var(--layout-transition-fast), color var(--layout-transition-fast), border-color var(--layout-transition-fast), box-shadow var(--layout-transition-fast);
 }
 
 .auto-suggest-link:link,

src/css/base.css

@@ -18,7 +18,7 @@ body {
   justify-content: center;
   align-items: center;
   min-height: 100vh;
-  transition: background-color var(--layout-transition-speed-fast) ease-in-out;
+  transition: background-color var(--layout-transition-fast);
 }
 
 .is-layout-scrollpastend body {

src/css/button.css

@@ -22,7 +22,7 @@ input[type="submit"] {
   white-space: nowrap;
   cursor: pointer;
   box-shadow: none;
-  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;
+  transition: background-color var(--layout-transition-fast), color var(--layout-transition-fast), border var(--layout-transition-fast);
   display: inline-flex;
   flex-direction: row;
   justify-content: center;

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-transition-speed-fast) ease-in-out;
+  transition: opacity var(--layout-transition-fast);
 }

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-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;
+  transition: background-color var(--layout-transition-fast), color var(--layout-transition-fast), border-color var(--layout-transition-fast), box-shadow var(--layout-transition-fast);
   -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-transition-speed-fast) ease-in-out;
+  transition: color var(--layout-transition-fast);
 }
 
 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: color var(--layout-transition-speed-fast) ease-in-out;
+  transition: color var(--layout-transition-fast);
 }
 
 input[type="checkbox"]+label,
@@ -181,7 +181,7 @@ input[type="radio"]+label {
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
-  transition: transform var(--layout-transition-speed-fast) ease-in-out, color var(--layout-transition-speed-fast) ease-in-out;
+  transition: transform var(--layout-transition-fast), color var(--layout-transition-fast);
 }
 
 input[type="checkbox"]+label:before,
@@ -200,7 +200,7 @@ input[type="radio"]+label:before {
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
-  transition: transform var(--layout-transition-speed-fast) ease-in-out, color var(--layout-transition-speed-fast) ease-in-out;
+  transition: transform var(--layout-transition-fast), color var(--layout-transition-fast);
 }
 
 input[type="checkbox"]+label:before {
@@ -297,7 +297,7 @@ input[type="color"] {
   border-radius: var(--theme-radius);
   overflow: hidden;
   cursor: pointer;
-  transition: border-color var(--layout-transition-speed-fast) ease-in-out, box-shadow var(--layout-transition-speed-fast) ease-in-out;
+  transition: border-color var(--layout-transition-fast), box-shadow var(--layout-transition-fast);
 }
 
 input[type="color"]:hover {
@@ -368,7 +368,7 @@ input[type="range"]:before {
   border: 0;
   border-radius: var(--theme-radius);
   transform: translate(0, -50%);
-  transition: all var(--layout-transition-speed-fast) ease-in-out;
+  transition: all var(--layout-transition-fast);
 }
 
 input[type="range"]:focus {
@@ -412,7 +412,7 @@ input[type="range"]::-webkit-slider-thumb {
   box-sizing: border-box;
   /* z-index: 2; */
   transform: scale(1);
-  transition: all var(--layout-transition-speed-fast) ease-in-out;
+  transition: all var(--layout-transition-fast);
   -webkit-appearance: none;
 }
 
@@ -456,7 +456,7 @@ input[type="range"]::-moz-range-track {
   width: 100%;
   border: 0;
   border-radius: var(--theme-radius);
-  transition: all var(--layout-transition-speed-fast) ease-in-out;
+  transition: all var(--layout-transition-fast);
   -webkit-appearance: none;
 }
 
@@ -484,7 +484,7 @@ input[type="range"]::-moz-range-thumb {
   box-sizing: border-box;
   /* z-index: 2; */
   transform: scale(1);
-  transition: all var(--layout-transition-speed-fast) ease-in-out;
+  transition: all var(--layout-transition-fast);
   -webkit-appearance: none;
 }
 
@@ -537,7 +537,7 @@ input[type="range"][disabled]::-moz-range-progress {
 .form-helper {
   padding: 0.5em 0;
   color: rgb(var(--form-helper));
-  transition: color var(--layout-transition-speed-fast) ease-in-out;
+  transition: color var(--layout-transition-fast);
 }
 
 .form-helper.disabled {
@@ -583,7 +583,7 @@ input[type="range"][disabled]::-moz-range-progress {
   white-space: nowrap;
   cursor: pointer;
   box-shadow: none;
-  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;
+  transition: background-color var(--layout-transition-fast), color var(--layout-transition-fast), border var(--layout-transition-fast);
   display: inline-flex;
   flex-direction: row;
   justify-content: center;
@@ -768,7 +768,7 @@ input[type="range"][disabled]::-moz-range-progress {
   border-width: var(--layout-line-width);
   border-style: solid;
   border-color: rgb(var(--form-checkbox-radio-label));
-  transition: border-color var(--layout-transition-speed-fast) ease-in-out;
+  transition: border-color var(--layout-transition-fast);
 }
 
 .form-grid:focus,
@@ -826,7 +826,7 @@ input[type="range"][disabled]::-moz-range-progress {
   border-color: transparent;
   position: relative;
   transition: none;
-  transition: border-color var(--layout-transition-speed-fast) ease-in-out;
+  transition: border-color var(--layout-transition-fast);
 }
 
 .form-grid input[type="checkbox"]:focus+label,
@@ -885,7 +885,7 @@ input[type="range"][disabled]::-moz-range-progress {
   left: calc(var(--layout-line-width) * 2);
   display: block;
   transform: scale(1);
-  transition: transform var(--layout-transition-speed-fast) ease-in-out, background-color var(--layout-transition-speed-fast) ease-in-out;
+  transition: transform var(--layout-transition-fast), background-color var(--layout-transition-fast);
 }
 
 .form-grid input[type="checkbox"]:focus+label:before,
@@ -1007,7 +1007,7 @@ input[type="range"][disabled]::-moz-range-progress {
   border-style: solid;
   border-color: transparent;
   border-radius: var(--theme-radius);
-  transition: background-color var(--layout-transition-speed-fast) ease-in-out, border-color var(--layout-transition-speed-fast) ease-in-out;
+  transition: background-color var(--layout-transition-fast), border-color var(--layout-transition-fast);
 }
 
 .form-group-text:hover,

src/css/header.css

@@ -45,7 +45,7 @@
   top: 0;
   left: 0;
   pointer-events: none;
-  transition: background-color var(--layout-transition-speed-slow) ease-in-out, opacity var(--layout-transition-speed-slow) ease-in-out, border-radius var(--layout-transition-speed-fast) ease-in-out;
+  transition: background-color var(--layout-transition-slow), opacity var(--layout-transition-slow), border-radius var(--layout-transition-fast);
 }
 
 .is-header-radius .header-shade {

src/css/link.css

@@ -57,7 +57,7 @@
   height: var(--link-item-height);
   display: block;
   transform: scale(1);
-  transition: transform var(--layout-transition-speed-fast) ease-in-out;
+  transition: transform var(--layout-transition-fast);
   z-index: 1;
 }
 
@@ -102,7 +102,7 @@
   overflow: hidden;
   position: relative;
   user-select: none;
-  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;
+  transition: background-color var(--layout-transition-fast), height var(--layout-transition-fast), box-shadow var(--layout-transition-fast);
 }
 
 .is-link-item-line-show .link-panel-front {
@@ -244,7 +244,7 @@
   justify-content: flex-end;
   align-items: stretch;
   z-index: 2;
-  transition: height var(--layout-transition-speed-fast) ease-in-out, top var(--layout-transition-speed-fast) ease-in-out;
+  transition: height var(--layout-transition-fast), top var(--layout-transition-fast);
 }
 
 .is-link-item-line-show .link-panel-back {
@@ -269,7 +269,7 @@
   flex-direction: row;
   align-items: stretch;
   justify-content: center;
-  transition: all var(--layout-transition-speed-fast) ease-in-out;
+  transition: all var(--layout-transition-fast);
 }
 
 .link-control-item {
@@ -328,7 +328,7 @@
   overflow: hidden;
   display: none;
   align-items: center;
-  transition: all var(--layout-transition-speed-fast) ease-in-out;
+  transition: all var(--layout-transition-fast);
 }
 
 .is-link-url-show .link-url {
@@ -396,12 +396,12 @@
   color: rgb(var(--theme-accent));
   line-height: 1;
   white-space: nowrap;
-  transition: color var(--layout-transition-speed-fast) ease-in-out;
+  transition: color var(--layout-transition-fast);
 }
 
 .link-display-icon {
   color: rgb(var(--theme-accent));
-  transition: color var(--layout-transition-speed-fast) ease-in-out;
+  transition: color var(--layout-transition-fast);
 }
 
 .is-link-style-block .link-display-letter,
@@ -440,7 +440,7 @@
   font-family: var(--font-regular);
   color: rgb(var(--theme-gray-12));
   display: none;
-  transition: color var(--layout-transition-speed-fast) ease-in-out;
+  transition: color var(--layout-transition-fast);
 }
 
 .link-name,
@@ -539,7 +539,7 @@
 
 .link-form-text-icon .link-form-icon {
   transform: scale(1) rotate(0deg);
-  transition: transform var(--layout-transition-speed-fast) ease-in-out;
+  transition: transform var(--layout-transition-fast);
 }
 
 .link-form-text-icon:not([disabled]):hover .link-form-icon {

src/css/menu.css

@@ -6,7 +6,7 @@
   width: 100%;
   height: 80vh;
   transform: translateY(calc(-100% - 2em));
-  transition: transform var(--layout-transition-speed-fast) ease-in-out;
+  transition: transform var(--layout-transition-fast);
   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-transition-speed-fast) ease-in-out, opacity var(--layout-transition-speed-fast) ease-in-out;
+  transition: background-color var(--layout-transition-fast), opacity var(--layout-transition-fast);
 }
 
 .is-edge .menu-area {

src/css/modal.css

@@ -9,7 +9,7 @@
   transform: translate(-50%, -50%);
   opacity: 0;
   perspective: 1000px;
-  transition: opacity var(--layout-transition-speed-fast) ease-in-out;
+  transition: opacity var(--layout-transition-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-transition-speed-fast) ease-in-out;
+  transition: opacity var(--layout-transition-fast);
 }
 
 .modal-wrapper .container {

src/css/shade.css

@@ -6,7 +6,7 @@
   width: calc(100% + 2em);
   height: calc(100% + 2em);
   opacity: 0;
-  transition: opacity var(--layout-transition-speed-fast) ease-in-out, background-color var(--layout-transition-speed-fast) ease-in-out;
+  transition: opacity var(--layout-transition-fast), background-color var(--layout-transition-fast);
   z-index: var(--z-index-shade);
 }
 

src/css/tip.css

@@ -6,7 +6,7 @@
   top: 0;
   opacity: 1;
   z-index: var(--z-index-tip);
-  transition: opacity var(--layout-transition-speed-fast) ease-in-out;
+  transition: opacity var(--layout-transition-fast);
   transform-origin: bottom center;
   pointer-events: none;
 }

src/css/variables.css

@@ -51,9 +51,9 @@
   --layout-width: 80%;
   --layout-padding-multiplier: 4;
   --layout-gutter-multiplier: 4;
-  --layout-transition-speed-fast: 0.2s;
+  --layout-transition-fast: 0.2s ease-in-out;
-  --layout-transition-speed-medium: 0.4s;
+  --layout-transition-medium: 0.4s ease-in-out;
-  --layout-transition-speed-slow: 0.6s;
+  --layout-transition-slow: 0.6s ease-in-out;
   --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);

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.62.0";
+  var current = "3.63.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");

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