[design] improve form group elements

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
 "name": "nighttab",
-"version": "4.25.0",
+"version": "4.26.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

@@ -1021,14 +1021,17 @@ input[type="range"]:disabled::-moz-range-progress{
 .form-input-buttoninput[type="radio"]+label:after,
 .form-input-buttoninput[type="color"]+label:after,
 .form-input-buttoninput[type="file"]+label:after{
+content:"";
 background:rgb(var(--button-border));
+border-radius:var(--theme-radius);
 position: absolute;
-content:"";
 bottom:0;
 left:0;
 width:100%;
-height:var(--layout-line-width);
+height:100%;
+clip-path:polygon(0calc(100%-var(--layout-line-width)),100%calc(100%-var(--layout-line-width)),100%100%,0%100%);
 transition: background-color var(--layout-timing-extra-fast);
+pointer-events: none;
 }
 
 .form-input-buttoninput[type="checkbox"]:focus+label:after,
@@ -1335,6 +1338,10 @@ input[type="range"]:disabled::-moz-range-progress{
 .form-group .form-group-text,
 .form-group .button,
 .form-group .button:after,
+.form-group .form-input-buttoninput[type="checkbox"]+label:after,
+.form-group .form-input-buttoninput[type="radio"]+label:after,
+.form-group .form-input-buttoninput[type="color"]+label:after,
+.form-group .form-input-buttoninput[type="file"]+label:after,
 .form-group>select,
 .form-group>input[type="email"],
 .form-group>input[type="number"],
@@ -1389,6 +1396,10 @@ input[type="range"]:disabled::-moz-range-progress{
 .form-group .form-group-text:first-child,
 .form-group .button:first-child,
 .form-group .button:first-child:after,
+.form-group .form-input-button:first-childinput[type="checkbox"]+label:after,
+.form-group .form-input-button:first-childinput[type="radio"]+label:after,
+.form-group .form-input-button:first-childinput[type="color"]+label:after,
+.form-group .form-input-button:first-childinput[type="file"]+label:after,
 .form-group>select:first-child,
 .form-group>input[type="email"]:first-child,
 .form-group>input[type="number"]:first-child,
@@ -1404,6 +1415,10 @@ input[type="range"]:disabled::-moz-range-progress{
 .form-group .form-group-text:last-child,
 .form-group .button:last-child,
 .form-group .button:last-child:after,
+.form-group .form-input-button:last-childinput[type="checkbox"]+label:after,
+.form-group .form-input-button:last-childinput[type="radio"]+label:after,
+.form-group .form-input-button:last-childinput[type="color"]+label:after,
+.form-group .form-input-button:last-childinput[type="file"]+label:after,
 .form-group>select:last-child,
 .form-group>input[type="email"]:last-child,
 .form-group>input[type="number"]:last-child,
@@ -1432,7 +1447,7 @@ input[type="range"]:disabled::-moz-range-progress{
 }
 
 .form-group.form-group-nested-button* .button,
-.form-group.form-group-nested-button*:first-child .button:after,
+.form-group.form-group-nested-button* .button:after,
 .form-group.form-group-nested-button*input[type="checkbox"]+label,
 .form-group.form-group-nested-button*input[type="radio"]+label,
 .form-group.form-group-nested-button*input[type="color"]+label{

src/css/form.css

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="4.25.0";
+varcurrent="4.26.0";
 
 varname="Naughty Goose";
 

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