[refactor] improve css variable names

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,

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;
 }
 

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;
 }

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;

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;
 }

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,

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 {

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 {

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 {

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 {

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);
 }
 

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 {

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 {

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;
 }

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);

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(".");

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"