[refactor] improve style transition variables

zombieFox · zombieFox · commit 8bff840c04c6 · 2019-07-28T14:09:17.000+01:00
diff --git 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-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,
diff --git a/src/css/base.css b/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{
diff --git 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-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;
diff --git 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-transition-speed-fast) ease-in-out;
+ transition: opacity var(--layout-transition-fast);
 }
diff --git 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-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,
diff --git a/src/css/header.css b/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{
diff --git 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-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{
diff --git 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-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{
diff --git 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-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{
diff --git 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-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);
 }
 
diff --git 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-transition-speed-fast) ease-in-out;
+ transition: opacity var(--layout-transition-fast);
 transform-origin: bottom center;
 pointer-events: none;
 }
diff --git 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-transition-speed-fast: 0.2s;
- --layout-transition-speed-medium: 0.4s;
- --layout-transition-speed-slow: 0.6s;
+ --layout-transition-fast: 0.2s ease-in-out;
+ --layout-transition-medium: 0.4s ease-in-out;
+ --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);
diff --git a/src/js/version.js b/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(".");
diff --git 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.62.0",
+ "version": "3.63.0",
 "manifest_version": 2,
 "chrome_url_overrides":{
 "newtab": "index.html"

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@`
`42`	`42`	`flex-direction: column;`
`43`	`43`	`justify-content: flex-start;`
`44`	`44`	`align-items: center;`
`45`		`-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;`
	`45`	`+transition: background-color var(--layout-transition-fast), color var(--layout-transition-fast), border-color var(--layout-transition-fast), box-shadow var(--layout-transition-fast);`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`.auto-suggest-link:link,`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ body{`
`18`	`18`	`justify-content: center;`
`19`	`19`	`align-items: center;`
`20`	`20`	`min-height:100vh;`
`21`		`-transition: background-color var(--layout-transition-speed-fast) ease-in-out;`
	`21`	`+transition: background-color var(--layout-transition-fast);`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.is-layout-scrollpastendbody{`
Original file line number	Diff line number	Diff line change
`@@ -10,5 +10,5 @@`
`10`	`10`	`box-shadow: inset 000var(--layout-line-width) rgb(var(--theme-accent)), inset 000calc(var(--layout-line-width) 4) rgba(var(--theme-accent),0.1), inset 000calc(var(--layout-line-width) 8) rgba(var(--theme-accent),0.1);`
`11`	`11`	`z-index:var(--z-index-edge);`
`12`	`12`	`pointer-events: none;`
`13`		`-transition: opacity var(--layout-transition-speed-fast) ease-in-out;`
	`13`	`+transition: opacity var(--layout-transition-fast);`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@`
`45`	`45`	`top:0;`
`46`	`46`	`left:0;`
`47`	`47`	`pointer-events: none;`
`48`		`-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;`
	`48`	`+transition: background-color var(--layout-transition-slow), opacity var(--layout-transition-slow), border-radius var(--layout-transition-fast);`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`.is-header-radius .header-shade{`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`width:calc(100%+2em);`
`7`	`7`	`height:calc(100%+2em);`
`8`	`8`	`opacity:0;`
`9`		`-transition: opacity var(--layout-transition-speed-fast) ease-in-out, background-color var(--layout-transition-speed-fast) ease-in-out;`
	`9`	`+transition: opacity var(--layout-transition-fast), background-color var(--layout-transition-fast);`
`10`	`10`	`z-index:var(--z-index-shade);`
`11`	`11`	`}`
`12`	`12`