[feature] display date in words or numbers and control month date order

Author: zombieFox

css/button.css

@@ -96,37 +96,6 @@ button [class*=" icon-"],
 width:100%;
 }
 
-.button-group{
-margin:001em0;
-display: inline-flex;
-justify-content: center;
-align-items: stretch;
-}
-
-.button-groupbutton,
-.button-group .button{
-margin:0;
-border-radius:0;
-}
-
-.button-group>button:first-child,
-.button-group>.button:first-child{
-border-radius:var(--radius) 00var(--radius);
-}
-
-.button-group>button:last-child,
-.button-group>.button:last-child{
-border-radius:0var(--radius) var(--radius) 0;
-}
-
-.button-group.nested-button*:first-child .button{
-border-radius:var(--radius) 00var(--radius);
-}
-
-.button-group.nested-button*:last-child .button{
-border-radius:0var(--radius) var(--radius) 0;
-}
-
 button [class^="button-"],
 button [class*=" button-"],
 .button [class^="button-"],

css/clock.css

@@ -9,8 +9,8 @@
 min-height:2.5em;
 display: flex;
 flex-direction: row;
-justify-content:center;
-flex-wrap:nowrap;
+justify-content:flex-start;
+flex-wrap:wrap;
 }
 
 .clock-separator,
@@ -22,11 +22,12 @@
 display: flex;
 justify-content: center;
 align-items: center;
+white-space: nowrap;
 }
 
 .clock-separator{
 justify-content: center;
-min-width:0.5em;
+/* min-width: 0.5em; */
 color:rgb(var(--accent));
 }
 
@@ -55,5 +56,5 @@
 .clock-minutes,
 .clock-seconds,
 .clock-meridiem{
-color:rgb(var(--gray-19));
+color:rgb(var(--gray-16));
 }

css/date.css

@@ -10,7 +10,7 @@
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
-flex-wrap:nowrap;
+flex-wrap:wrap;
 }
 
 .date-separator,
@@ -22,11 +22,12 @@
 display: flex;
 justify-content: flex-start;
 align-items: center;
+white-space: nowrap;
 }
 
 .date-separator{
 justify-content: center;
-min-width:0.5em;
+/* min-width: 0.5em; */
 color:rgb(var(--accent));
 }
 
@@ -54,5 +55,5 @@
 .date-date,
 .date-month,
 .date-year{
-color:rgb(var(--gray-19));
+color:rgb(var(--gray-16));
 }

css/form.css

@@ -22,6 +22,16 @@ input[type="text"]{
 -moz-appearance: textfield;
 }
 
+input[type="number"]{
+text-align: center;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button{
+-webkit-appearance: none;
+margin:0;
+}
+
 input[type="email"]:hover,
 input[type="number"]:hover,
 input[type="password"]:hover,
@@ -84,7 +94,8 @@ input[type="number"][disabled]~.input-helper,
 input[type="password"][disabled]~.input-helper,
 input[type="search"][disabled]~.input-helper,
 input[type="tel"][disabled]~.input-helper,
-input[type="text"][disabled]~.input-helper{
+input[type="text"][disabled]~.input-helper,
+input[type="range"][disabled]~.input-helper{
 color:rgb(var(--form-input-text-disabled-helper-text));
 }
 
@@ -197,22 +208,13 @@ input[type="color"]+.input-label-button:before{
 position: relative;
 }
 
-.form-indent-1,
-.form-indent-1,
-.form-indent-1{
+.form-indent{
 margin-left:2.25em;
 }
 
-.form-indent-2,
-.form-indent-2,
-.form-indent-2{
-margin-left:4.5em;
-}
-
-.form-indent-3,
-.form-indent-3,
-.form-indent-3{
-margin-left:6.75em;
+.form-inline{
+display: inline-block;
+margin-right:1.5em;
 }
 
 input[type="checkbox"],
@@ -460,7 +462,7 @@ input[type="range"]::-webkit-slider-thumb{
 width:1em;
 cursor: pointer;
 box-sizing: border-box;
-z-index:2;
+/* z-index: 2; */
 transform:scale(1);
 transition: all var(--animation-speed-fast) ease-in-out;
 -webkit-appearance: none;
@@ -524,7 +526,7 @@ input[type="range"]::-moz-range-thumb{
 width:1em;
 cursor: pointer;
 box-sizing: border-box;
-z-index:2;
+/* z-index: 2; */
 transform:scale(1);
 transition: all var(--animation-speed-fast) ease-in-out;
 -webkit-appearance: none;
@@ -574,3 +576,95 @@ input[type="range"][disabled]:focus::-moz-range-thumb{
 input[type="range"][disabled]::-moz-range-progress{
 background-color:rgb(var(--gray-08));
 }
+
+.form-group{
+margin:001em0;
+display: inline-flex;
+justify-content: center;
+align-items: stretch;
+width:100%;
+}
+
+.form-groupbutton,
+.form-group .button,
+.form-group>input[type="email"],
+.form-group>input[type="number"],
+.form-group>input[type="password"],
+.form-group>input[type="search"],
+.form-group>input[type="tel"],
+.form-group>input[type="text"]{
+margin:0;
+border-radius:0;
+}
+
+.form-group>input[type="email"],
+.form-group>input[type="number"],
+.form-group>input[type="password"],
+.form-group>input[type="search"],
+.form-group>input[type="tel"],
+.form-group>input[type="text"]{
+padding:00.5em;
+}
+
+.form-group>input[type="email"],
+.form-group>input[type="number"],
+.form-group>input[type="password"],
+.form-group>input[type="search"],
+.form-group>input[type="tel"],
+.form-group>input[type="text"]{
+z-index:1;
+}
+
+.form-group>input[type="email"]:hover,
+.form-group>input[type="number"]:hover,
+.form-group>input[type="password"]:hover,
+.form-group>input[type="search"]:hover,
+.form-group>input[type="tel"]:hover,
+.form-group>input[type="text"]:hover{
+z-index:2;
+}
+
+.form-group>input[type="email"]:active,
+.form-group>input[type="email"]:focus,
+.form-group>input[type="number"]:active,
+.form-group>input[type="number"]:focus,
+.form-group>input[type="password"]:active,
+.form-group>input[type="password"]:focus,
+.form-group>input[type="search"]:active,
+.form-group>input[type="search"]:focus,
+.form-group>input[type="tel"]:active,
+.form-group>input[type="tel"]:focus,
+.form-group>input[type="text"]:active,
+.form-group>input[type="text"]:focus{
+z-index:3;
+}
+
+.form-group>button:first-child,
+.form-group>.button:first-child,
+.form-group>input[type="email"]:first-child,
+.form-group>input[type="number"]:first-child,
+.form-group>input[type="password"]:first-child,
+.form-group>input[type="search"]:first-child,
+.form-group>input[type="tel"]:first-child,
+.form-group>input[type="text"]:first-child{
+border-radius:var(--radius) 00var(--radius);
+}
+
+.form-group>button:last-child,
+.form-group>.button:last-child,
+.form-group>input[type="email"]:last-child,
+.form-group>input[type="number"]:last-child,
+.form-group>input[type="password"]:last-child,
+.form-group>input[type="search"]:last-child,
+.form-group>input[type="tel"]:last-child,
+.form-group>input[type="text"]:last-child{
+border-radius:0var(--radius) var(--radius) 0;
+}
+
+.form-group.nested-button*:first-child .button{
+border-radius:var(--radius) 00var(--radius);
+}
+
+.form-group.nested-button*:last-child .button{
+border-radius:0var(--radius) var(--radius) 0;
+}

css/header.css

@@ -124,6 +124,7 @@
 .header-edit-add,
 .header-accent,
 .header-greeting,
+.header-transitional,
 .header-menu{
 display: none;
 }
@@ -134,6 +135,7 @@
 .is-header-edit-add .header-edit-add,
 .is-header-accent .header-accent,
 .is-header-greeting .header-greeting,
+.is-header-transitional .header-transitional,
 .is-menu .header-menu{
 display: flex;
 }