[refactor] improve css variable names

zombieFox · zombieFox · commit 1d06a1409f6e · 2019-06-25T23:24:39.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-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +34,15 @@
 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{
 max-width: 100%;
 }
 
 .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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"

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-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;`
	`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;`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`.auto-suggest-link:link,`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`height:100vh;`
`7`	`7`	`pointer-events: none;`
`8`	`8`	`z-index:var(--z-index-background);`
`9`		`-animation: appear var(--layout-animation-speed-slow) 1;`
	`9`	`+animation: appear var(--layout-transition-speed-slow) 1;`
`10`	`10`	`display: none;`
`11`	`11`	`}`
`12`	`12`
Original file line number	Diff line number	Diff line change
`@@ -18,5 +18,5 @@ body{`
`18`	`18`	`justify-content: center;`
`19`	`19`	`align-items: center;`
`20`	`20`	`min-height:100vh;`
`21`		`-transition: background-color var(--layout-animation-speed-fast) ease-in-out;`
	`21`	`+transition: background-color var(--layout-transition-speed-fast) ease-in-out;`
`22`	`22`	`}`
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-animation-speed-fast) ease-in-out;`
	`13`	`+transition: opacity var(--layout-transition-speed-fast) ease-in-out;`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@`
`46`	`46`	`left:0;`
`47`	`47`	`opacity:0;`
`48`	`48`	`pointer-events: none;`
`49`		`-transition: background-color var(--layout-animation-speed-slow) ease-in-out, border-radius var(--layout-animation-speed-fast) ease-in-out;`
	`49`	`+transition: background-color var(--layout-transition-speed-slow) ease-in-out, border-radius var(--layout-transition-speed-fast) ease-in-out;`
`50`	`50`	`}`
`51`	`51`
`52`	`52`	`.is-header-radius .header-shade{`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`transform:translate(-50%,-50%);`
`10`	`10`	`opacity:0;`
`11`	`11`	`perspective:1000px;`
`12`		`-transition: opacity var(--layout-animation-speed-fast) ease-in-out;`
	`12`	`+transition: opacity var(--layout-transition-speed-fast) ease-in-out;`
`13`	`13`	`z-index:var(--z-index-modal);`
`14`	`14`	`}`
`15`	`15`
`@@ -34,15 +34,15 @@`
`34`	`34`	`grid-template-rows:1fr auto;`
`35`	`35`	`justify-items: stretch;`
`36`	`36`	`align-items: stretch;`
`37`		`-transition: opacity var(--layout-animation-speed-fast);`
	`37`	`+transition: opacity var(--layout-transition-speed-fast);`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`.modal-wrapper .container{`
`41`	`41`	`max-width:100%;`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`.is-transition-end .modal-wrapper{`
`45`		`-transition: opacity var(--layout-animation-speed-fast) ease-in-out;`
	`45`	`+transition: opacity var(--layout-transition-speed-fast) ease-in-out;`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`.modal-body{`