Default sizes for H1 per spec; argnonaut palette; dropshadows and coloured buttons

css/digui.css

@@ -9,6 +9,8 @@
 /* Main structure */
 
 :root {
+    --padding: .5rem;
+
     /* Default is nebula-light */
     --font-family: sans-serif;
     --background-color: #fff;
@@ -32,11 +34,22 @@
     /* E.g., an active button */
     --color-highlight: #fb8c00;
     /* Generic colors */
-    --color-danger: #e03131;
-    --color-warning: orange;
+    /*--color-danger: #e03131;*/
+    --color-danger: var(--color-red);
+    --color-warning: var(--color-yellow);
     --color-error: var(--color-danger);
+    /*--color-ok: #31e031;*/
+    --color-ok: var(--color-green);
 
-    --padding: .5rem;
+    /* Argonaut colours */
+    --color-black: #000000;
+    --color-red: #FF000F;
+    --color-green: #8CE10B;
+    --color-yellow: #FFB900;
+    --color-blue: #008DF8;
+    --color-purple: #6D43A6;
+    --color-cyan: #00D8EB;
+    --color-white: #FFFFFF;
 }
 
 html[data-theme='nebula'] {
@@ -180,6 +193,12 @@ header li h1 {
 
 /* Generic elements */
 
+/* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */
+h1 {
+    margin-block: 0.67em;
+    font-size: 2em;
+}
+
 a, a:hover, a:visited, a:active {
     text-decoration: none;
 }
@@ -209,7 +228,7 @@ ol li::marker, ul li::marker {
 }
 
 /* Buttons */
-button, input {
+button, input, select, textarea {
     border: var(--border-width) solid var(--border-color);
     border-radius: var(--border-radius);
     box-sizing: border-box;
@@ -218,8 +237,9 @@ button, input {
     cursor: pointer;
     display: inline-block;
     font-size: 13px;
-    line-height: 29px;
-    padding: 0 10px 0 11px;
+    /*line-height: 29px;*/
+    /*padding: 0 10px 0 11px;*/
+    padding: .5rem .5rem;
     position: relative;
     text-align: left;
     text-decoration: none;
@@ -243,6 +263,33 @@ button:focus {
     /*border-color: #d57803;*/
 }
 
+.btn-dangerous {
+    background: var(--color-danger);
+}
+
+.btn-dangerous:hover {
+    background: var(--color-danger);
+    filter: brightness(80%);
+}
+
+.btn-warning {
+    background-color: var(--color-warning);
+}
+
+.btn-warning:hover {
+    background-color: var(--color-warning);
+    filter: brightness(80%);
+}
+
+.btn-ok {
+    background: var(--color-ok);
+}
+
+.btn-ok:hover {
+    background: var(--color-ok);
+    filter: brightness(80%);
+}
+
 /* Cards */
 .cards {
     display: grid;
@@ -261,8 +308,14 @@ button:focus {
 
 [data-theme='nebula'] .card,
 [data-theme='nebula'] button,
+[data-theme='nebula'] input,
+[data-theme='nebula'] select,
+[data-theme='nebula'] textarea,
 [data-theme='nebula-dark'] .card,
-[data-theme='nebula-dark'] button {
+[data-theme='nebula-dark'] button,
+[data-theme='nebula-dark'] input,
+[data-theme='nebula-dark'] select,
+[data-theme='nebula-dark'] textarea {
     box-shadow: var(--shadow-color) 0 2px 5px 0;
 }
 
@@ -321,6 +374,10 @@ button:focus {
     padding: .3em;
 }
 
+.card-footer h1, .card-footer h2, .card-footer h3, .card-footer h4, .card-footer h5, .card-footer h6 {
+    margin: 0;
+}
+
 /*
 .card button {
     border: none;