[desing] add input button line and ring support

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
 "name": "nightTab",
-"version": "5.21.1",
+"version": "5.22.0",
 "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
 "main": "index.js",
 "scripts":{

package.json

@@ -55,6 +55,11 @@ input[type="submit"]:active{
 transition: none;
 }
 
+button.active,
+.button.active{
+color:rgb(var(--button-text-focus-active));
+}
+
 button.disabled,
 button.disabled:hover,
 button.disabled:focus,
@@ -96,7 +101,8 @@ button:disabled:active,
 background-color:rgb(var(--button-border-focus-hover));
 }
 
-.button-line:active:after{
+.button-line:active:after,
+.button-line.active:after{
 background-color:rgb(var(--button-border-active));
 transition: none;
 }
@@ -112,6 +118,31 @@ button:disabled:active,
 background-color:rgb(var(--button-border-disabled));
 }
 
+.button-ring{
+transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+}
+
+.button-ring:focus,
+.button-ring:hover{
+box-shadow:var(--form-ring-hover);
+}
+
+.button-ring:active,
+.button-ring.active{
+box-shadow:var(--form-ring-accent);
+}
+
+.button-ring.disabled,
+.button-ring:disabled,
+.button-ring.disabled:focus,
+.button-ring:disabled:focus,
+.button-ring.disabled:hover,
+.button-ring:disabled:hover,
+.button-ring.disabled:active,
+.button-ring:disabled:active{
+box-shadow: none;
+}
+
 .button-text{
 pointer-events: none;
 }
@@ -124,14 +155,6 @@ button [class*=" icon-"],
 font-size:1.5em;
 }
 
-.button.active{
-color:rgb(var(--button-text-focus-active));
-}
-
-.button-line.active:after{
-background-color:rgb(var(--theme-accent));
-}
-
 .button-small{
 font-size:0.8em;
 }
@@ -167,19 +190,6 @@ button [class*=" button-"]:last-child,
 margin-right:0;
 }
 
-.button-ring{
-transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
-}
-
-.button-ring:focus,
-.button-ring:hover{
-box-shadow:var(--form-ring-hover);
-}
-
-.button-ring:active{
-box-shadow:var(--form-ring-accent);
-}
-
 .button-link{
 background-color: transparent;
 border:0;

src/css/button.css

@@ -113,7 +113,7 @@ select{
 font-family:var(--theme-font-ui-name);
 font-weight:var(--theme-font-ui-weight);
 font-style:var(--theme-font-ui-style);
-line-height:2;
+line-height:2.5;
 min-height:2.5em;
 min-width:0;
 width:100%;
@@ -247,7 +247,7 @@ input[type="text"]{
 font-family:var(--theme-font-ui-name);
 font-weight:var(--theme-font-ui-weight);
 font-style:var(--theme-font-ui-style);
-line-height:1.6em;
+line-height:1.6;
 height:2.5em;
 min-width:0;
 width:100%;
@@ -1037,6 +1037,57 @@ input[type="range"]:disabled::-moz-range-progress{
 top: inherit;
 }
 
+.form-input-button-ringinput[type="checkbox"]+label,
+.form-input-button-ringinput[type="radio"]+label,
+.form-input-button-ringinput[type="color"]+label,
+.form-input-button-ringinput[type="file"]+label{
+transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+}
+
+.form-input-button-ringinput[type="checkbox"]:focus+label,
+.form-input-button-ringinput[type="checkbox"]:hover+label,
+.form-input-button-ringinput[type="radio"]:focus+label,
+.form-input-button-ringinput[type="radio"]:hover+label,
+.form-input-button-ringinput[type="color"]:focus+label,
+.form-input-button-ringinput[type="color"]:hover+label,
+.form-input-button-ringinput[type="file"]:focus+label,
+.form-input-button-ringinput[type="file"]:hover+label{
+box-shadow:var(--form-ring-hover);
+}
+
+.form-input-button-ringinput[type="checkbox"]:active+label,
+.form-input-button-ringinput[type="radio"]:active+label,
+.form-input-button-ringinput[type="color"]:active+label,
+.form-input-button-ringinput[type="file"]:active+label{
+box-shadow:var(--form-ring-accent);
+}
+
+.form-input-button-ringinput[type="checkbox"]:checked+label,
+.form-input-button-ringinput[type="radio"]:checked+label,
+.form-input-button-ringinput[type="color"]:checked+label,
+.form-input-button-ringinput[type="file"]:checked+label{
+box-shadow:var(--form-ring-accent);
+}
+
+.form-input-button-ringinput[type="checkbox"]:disabled+label,
+.form-input-button-ringinput[type="checkbox"]:disabled:hover+label,
+.form-input-button-ringinput[type="checkbox"]:disabled:focus+label,
+.form-input-button-ringinput[type="checkbox"]:disabled:active+label,
+.form-input-button-ringinput[type="radio"]:disabled+label,
+.form-input-button-ringinput[type="radio"]:disabled:hover+label,
+.form-input-button-ringinput[type="radio"]:disabled:focus+label,
+.form-input-button-ringinput[type="radio"]:disabled:active+label,
+.form-input-button-ringinput[type="color"]:disabled+label,
+.form-input-button-ringinput[type="color"]:disabled:hover+label,
+.form-input-button-ringinput[type="color"]:disabled:focus+label,
+.form-input-button-ringinput[type="color"]:disabled:active+label,
+.form-input-button-ringinput[type="file"]:disabled+label,
+.form-input-button-ringinput[type="file"]:disabled:hover+label,
+.form-input-button-ringinput[type="file"]:disabled:focus+label,
+.form-input-button-ringinput[type="file"]:disabled:active+label{
+box-shadow: none;
+}
+
 .form-input-button-lineinput[type="checkbox"]+label:after,
 .form-input-button-lineinput[type="radio"]+label:after,
 .form-input-button-lineinput[type="color"]+label:after,
@@ -1349,11 +1400,10 @@ input[type="range"]:disabled::-moz-range-progress{
 
 .form-group .form-group-text,
 .form-group .button,
-.form-group .button-line:after,
-.form-group .form-input-button-lineinput[type="checkbox"]+label:after,
-.form-group .form-input-button-lineinput[type="radio"]+label:after,
-.form-group .form-input-button-lineinput[type="color"]+label:after,
-.form-group .form-input-button-lineinput[type="file"]+label:after,
+.form-group .form-input-buttoninput[type="checkbox"]+label,
+.form-group .form-input-buttoninput[type="radio"]+label,
+.form-group .form-input-buttoninput[type="color"]+label,
+.form-group .form-input-buttoninput[type="file"]+label,
 .form-group>select,
 .form-group>input[type="email"],
 .form-group>input[type="number"],
@@ -1373,12 +1423,24 @@ input[type="range"]:disabled::-moz-range-progress{
 z-index:1;
 }
 
+.form-group .button-line:after,
+.form-group .form-input-button-lineinput[type="checkbox"]+label:after,
+.form-group .form-input-button-lineinput[type="radio"]+label:after,
+.form-group .form-input-button-lineinput[type="color"]+label:after,
+.form-group .form-input-button-lineinput[type="file"]+label:after{
+border-radius:0;
+}
+
 .form-group .form-group-text{
 flex-shrink:0;
 }
 
 .form-group .form-group-text:focus,
 .form-group .button:focus,
+.form-group .form-input-buttoninput[type="checkbox"]:focus+label,
+.form-group .form-input-buttoninput[type="radio"]:focus+label,
+.form-group .form-input-buttoninput[type="color"]:focus+label,
+.form-group .form-input-buttoninput[type="file"]:focus+label,
 .form-group>select:focus,
 .form-group>input[type="email"]:focus,
 .form-group>input[type="number"]:focus,
@@ -1392,22 +1454,52 @@ input[type="range"]:disabled::-moz-range-progress{
 }
 
 .form-group .form-group-text:hover,
+.form-group .form-group-text:active,
 .form-group .button:hover,
+.form-group .button:active,
+.form-group .form-input-buttoninput[type="checkbox"]:hover+label,
+.form-group .form-input-buttoninput[type="checkbox"]:active+label,
+.form-group .form-input-buttoninput[type="radio"]:hover+label,
+.form-group .form-input-buttoninput[type="radio"]:active+label,
+.form-group .form-input-buttoninput[type="color"]:hover+label,
+.form-group .form-input-buttoninput[type="color"]:active+label,
+.form-group .form-input-buttoninput[type="file"]:hover+label,
+.form-group .form-input-buttoninput[type="file"]:active+label,
 .form-group>select:hover,
+.form-group>select:active,
 .form-group>input[type="email"]:hover,
+.form-group>input[type="email"]:active,
 .form-group>input[type="number"]:hover,
+.form-group>input[type="number"]:active,
 .form-group>input[type="password"]:hover,
+.form-group>input[type="password"]:active,
 .form-group>input[type="search"]:hover,
+.form-group>input[type="search"]:active,
 .form-group>input[type="tel"]:hover,
+.form-group>input[type="tel"]:active,
 .form-group>input[type="text"]:hover,
+.form-group>input[type="text"]:active,
 .form-group>input[type="color"]:hover,
-.form-group>input[type="range"]:hover{
+.form-group>input[type="color"]:active,
+.form-group>input[type="range"]:hover,
+.form-group>input[type="range"]:active{
+z-index:3;
+}
+
+.form-group .form-input-buttoninput[type="checkbox"]:checked+label,
+.form-group .form-input-buttoninput[type="radio"]:checked+label,
+.form-group .form-input-buttoninput[type="color"]:checked+label,
+.form-group .form-input-buttoninput[type="file"]:checked+label{
 z-index:3;
 }
 
 .form-group .form-group-text:first-child,
 .form-group .button:first-child,
 .form-group .button-line:first-child:after,
+.form-group .form-input-button:first-childinput[type="checkbox"]+label,
+.form-group .form-input-button:first-childinput[type="radio"]+label,
+.form-group .form-input-button:first-childinput[type="color"]+label,
+.form-group .form-input-button:first-childinput[type="file"]+label,
 .form-group .form-input-button-line:first-childinput[type="checkbox"]+label:after,
 .form-group .form-input-button-line:first-childinput[type="radio"]+label:after,
 .form-group .form-input-button-line:first-childinput[type="color"]+label:after,
@@ -1427,6 +1519,10 @@ input[type="range"]:disabled::-moz-range-progress{
 .form-group .form-group-text:last-child,
 .form-group .button:last-child,
 .form-group .button-line:last-child:after,
+.form-group .form-input-button:last-childinput[type="checkbox"]+label,
+.form-group .form-input-button:last-childinput[type="radio"]+label,
+.form-group .form-input-button:last-childinput[type="color"]+label,
+.form-group .form-input-button:last-childinput[type="file"]+label,
 .form-group .form-input-button-line:last-childinput[type="checkbox"]+label:after,
 .form-group .form-input-button-line:last-childinput[type="radio"]+label:after,
 .form-group .form-input-button-line:last-childinput[type="color"]+label:after,

src/css/form.css

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="5.21.1";
+varcurrent="5.22.0";
 
 varname="Zonked Tarsier";
 

src/js/version.js

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