[feature] make header items sortable

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
 "name": "nightTab",
-"version": "4.36.0",
+"version": "4.37.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

@@ -144,8 +144,8 @@ button [class^="icon-"],
 button [class*=" icon-"],
 .button [class^="icon-"],
 .button [class*=" icon-"]{
-font-size:1.5em;
 line-height:1;
+font-size:1.5em;
 }
 
 .button.active{

src/css/button.css

@@ -6,24 +6,26 @@
 font-weight:var(--theme-font-display-weight);
 font-style:var(--theme-font-display-style);
 color:rgb(var(--theme-style-text));
-width:100%;
 min-height:2.5em;
-display: flex;
+display:inline-flex;
 flex-direction: row;
 justify-content: flex-start;
 flex-wrap: wrap;
 }
 
 .is-header-item-alignment-left .clock{
 justify-content: flex-start;
+text-align: left;
 }
 
 .is-header-item-alignment-center .clock{
 justify-content: center;
+text-align: center;
 }
 
 .is-header-item-alignment-right .clock{
 justify-content: flex-end;
+text-align: right;
 }
 
 .clock-separator,
@@ -48,7 +50,7 @@
 .clock-seconds,
 .clock-meridiem{
 justify-content: center;
-min-width:1.25em;
+/* min-width: 1.25em; */
 }
 
 .is-header-item-alignment-left .clock-item:not(:last-child){

src/css/clock.css

@@ -6,24 +6,26 @@
 font-weight:var(--theme-font-display-weight);
 font-style:var(--theme-font-display-style);
 color:rgb(var(--theme-style-text));
-width:100%;
 min-height:2.5em;
-display: flex;
+display:inline-flex;
 flex-direction: row;
 justify-content: flex-start;
 flex-wrap: wrap;
 }
 
 .is-header-item-alignment-left .date{
 justify-content: flex-start;
+text-align: left;
 }
 
 .is-header-item-alignment-center .date{
 justify-content: center;
+text-align: center;
 }
 
 .is-header-item-alignment-right .date{
 justify-content: flex-end;
+text-align: right;
 }
 
 .date-separator,

src/css/date.css

@@ -72,7 +72,7 @@
 padding:1.5em1em1em1em;
 position: sticky;
 top:0;
-z-index:2;
+z-index:4;
 }
 
 /* label */
@@ -390,6 +390,44 @@ input[type="text"]:disabled:focus::placeholder{
 color:rgb(var(--form-placeholder-disabled));
 }
 
+.input-clear[type="email"],
+.input-clear[type="number"],
+.input-clear[type="password"],
+.input-clear[type="search"],
+.input-clear[type="tel"],
+.input-clear[type="text"]{
+background-color: transparent;
+border-color: transparent;
+}
+
+.input-clear[type="email"]:hover,
+.input-clear[type="number"]:hover,
+.input-clear[type="password"]:hover,
+.input-clear[type="search"]:hover,
+.input-clear[type="tel"]:hover,
+.input-clear[type="text"]:hover{
+background-color: transparent;
+border-color: transparent;
+box-shadow: none;
+}
+
+.input-clear[type="email"]:focus,
+.input-clear[type="email"]:active,
+.input-clear[type="number"]:focus,
+.input-clear[type="number"]:active,
+.input-clear[type="password"]:focus,
+.input-clear[type="password"]:active,
+.input-clear[type="search"]:focus,
+.input-clear[type="search"]:active,
+.input-clear[type="tel"]:focus,
+.input-clear[type="tel"]:active,
+.input-clear[type="text"]:focus,
+.input-clear[type="text"]:active{
+background-color: transparent;
+border-color: transparent;
+box-shadow:var(--form-ring-accent);
+}
+
 /* checkbox and radio */
 input[type="checkbox"],
 input[type="radio"]{
@@ -1324,7 +1362,6 @@ input[type="range"]:disabled::-moz-range-progress{
 flex-direction: row;
 justify-content: flex-start;
 align-items: stretch;
-z-index:1;
 }
 
 .form-group .form-wrap{
@@ -1508,7 +1545,7 @@ input[type="range"]:disabled::-moz-range-progress{
 }
 
 .form-group-border{
-border-radius:calc(var(--theme-radius) *2);
+border-radius:var(--theme-radius);
 border-width:var(--layout-line-width);
 border-color:rgb(var(--form-group-text-border));
 border-style: solid;
@@ -1587,17 +1624,6 @@ input[type="range"]:disabled::-moz-range-progress{
 cursor: default;
 }
 
-.form-group-text-transparent,
-.form-group-text-transparent:hover,
-.form-group-text-transparent:focus,
-.form-group-text-transparent:active,
-.form-group-text-transparent.disabled,
-.form-group-text-transparent.disabled:hover,
-.form-group-text-transparent.disabled:focus,
-.form-group-text-transparent.disable:active{
-background-color: transparent;
-}
-
 .form-group-item-small,
 .form-group-item-medium,
 .form-group-item-large,
@@ -1662,6 +1688,17 @@ input[type="range"]:disabled::-moz-range-progress{
 min-width: inherit;
 }
 
+.form-group-text-transparent,
+.form-group-text-transparent:hover,
+.form-group-text-transparent:focus,
+.form-group-text-transparent:active,
+.form-group-text-transparent.disabled,
+.form-group-text-transparent.disabled:hover,
+.form-group-text-transparent.disabled:focus,
+.form-group-text-transparent.disable:active{
+background-color: transparent;
+}
+
 /* form dropdown */
 .form-dropdown{
 position: relative;

src/css/form.css

@@ -6,23 +6,25 @@
 font-weight:var(--theme-font-display-weight);
 font-style:var(--theme-font-display-style);
 color:rgb(var(--theme-style-text));
-width:100%;
 min-height:2.5em;
-display: flex;
+display:inline-flex;
 flex-direction: row;
 justify-content: center;
 flex-wrap: nowrap;
 }
 
 .is-header-item-alignment-left .greeting{
+justify-content: flex-start;
 text-align: left;
 }
 
 .is-header-item-alignment-center .greeting{
+justify-content: center;
 text-align: center;
 }
 
 .is-header-item-alignment-right .greeting{
+justify-content: flex-end;
 text-align: right;
 }