chips, toggle buttons, transitions, modal

.gitignore

@@ -0,0 +1,7 @@
+# vim
+*.swp
+*.swo
+
+# ctags
+tags
+TAGS

css/digui.css

@@ -1,65 +1,76 @@
 /**
- * digui structure
+ * digui structure and theming
- * v0.0.1
+ * v0.0.2
+ *
+ * Created by: Michiel Scholten
+ * Source: https://github.com/aquatix/digui
  */
 
-/* Main structure */
+/** Colours and themes */
 
 :root {
+    --padding: .5rem;
+
+    color-scheme: only light;
+
     /* Default is nebula-light */
     --font-family: sans-serif;
     --background-color: #fff;
-    --secondary-background-color: #ccc;
+    --background-color-secondary: #ccc;
     --button-color: #eee;
     --button-text: var(--text-color);
     --text-color: #121416d8;
-    --secondary-text-color: #121416d8;
+    --text-color-secondary: #121416d8;
+    --text-color-muted: #d5d9d9;
     --link-color: #543fd7;
 
     --nav-background-color: #FFF;
     --nav-color: var(--text-color);
 
-    --highlight-color: #fb8c00;
     --border-color: #d5d9d9;
     --border-width: 1px;
     --border-radius: 8px;
+    --chip-border-radius: 2rem;
     --shadow-color: rgba(213, 217, 217, .5);
     --global-theme-toggle-content: ' 🌞';
 
-    --danger-color: #e03131;
+    /* E.g., an active button */
-    --warning-color: orange;
+    --color-highlight: #fb8c00;
-    --error-color: var(--danger-color);
+    /* Generic colors */
+    /*--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'] {
-    --background-color: #fff;
+    /* Default theme, see :root element */
-    --secondary-background-color: #ccc;
-    --text-color: #121416d8;
-    --secondary-text-color: #121416d8;
-    --link-color: #543fd7;
-    --highlight-color: #fb8c00;
-
-    --nav-background-color: #FFF;
-    --nav-color: var(--text-color);
-
-    --border-color: #d5d9d9;
-    --border-width: 1px;
-    --border-radius: 8px;
-    --shadow-color: rgba(213, 217, 217, .5);
-    --global-theme-toggle-content: ' 🌞';
 }
 
 html[data-theme='nebula-dark'] {
+    color-scheme: dark;
+
     --background-color: #29292c;
-    --secondary-background-color: #29292c;
+    --background-color-secondary: #29292c;
     --button-color: #29292c;
     --button-text: var(--text-color);
     --text-color: #F7F8F8;
-    --secondary-text-color: #ddd;
+    --text-color-secondary: #ddd;
+    --text-color-muted: #F7F8F8;
     --link-color: #ffe7a3;
-    --highlight-color: #e03131;
+    --color-highlight: #e03131;
 
     --nav-background-color: #FF9800;
     --nav-color: var(--text-color);
@@ -67,6 +78,7 @@ html[data-theme='nebula-dark'] {
     --border-color: #333;
     --border-width: 1px;
     --border-radius: 8px;
+    --chip-border-radius: 2rem;
     --shadow-color: rgba(3, 3, 3, .5);
     --global-theme-toggle-content: ' 🌝';
 }
@@ -74,13 +86,14 @@ html[data-theme='nebula-dark'] {
 html[data-theme='bbs'] {
     --font-family: monospace;
     --background-color: #FFF;
-    --secondary-background-color: #ccc;
+    --background-color-secondary: #ccc;
     --button-color: #FFFFFF;
     --button-text: var(--text-color);
     --text-color: #000;
-    --secondary-text-color: #000;
+    --text-color-secondary: #000;
+    --text-color-muted: #000;
     --link-color: #543fd7;
-    --highlight-color: #e03131;
+    --color-highlight: #e03131;
 
     /*--nav-background-color: #ccc;*/
     /*--nav-color: var(--text-color);*/
@@ -88,6 +101,7 @@ html[data-theme='bbs'] {
     --border-color: #333;
     --border-width: 2px;
     --border-radius: 0;
+    --chip-border-radius: 0;
     --global-theme-toggle-content: ' 🖥️';
 }
 
@@ -95,13 +109,14 @@ html[data-theme='silo'] {
     --font-family: monospace;
     /*--background-color: #003eaa;*/
     --background-color: #1d212c;
-    --secondary-background-color: var(--highlight-color);
+    --background-color-secondary: var(--color-highlight);
     --button-color: #FFFFFF;
     --button-text: var(--text-color);
     --text-color: #FFF;
-    --secondary-text-color: #29292c;
+    --text-color-secondary: #29292c;
+    --text-color-muted: #FFF;
     --link-color: #FF9800;
-    --highlight-color: #23B0FF;
+    --color-highlight: #23B0FF;
 
     /*--nav-background-color: #003eaa;*/
     /*--nav-background-color: #23B0FF;*/
@@ -112,6 +127,7 @@ html[data-theme='silo'] {
     /*--border-color: #003eaa;*/
     --border-width: 2px;
     --border-radius: 0;
+    --chip-border-radius: 0;
     --global-theme-toggle-content: ' ⌨️';
 }
 
@@ -120,6 +136,8 @@ html[data-theme='silo'] {
     display: none !important;
 }
 
+/** Main structure */
+
 body {
     background: var(--background-color);
     color: var(--text-color);
@@ -134,6 +152,8 @@ main {
     padding-top: .5em;
 }
 
+/* Navigation */
+
 header {
     background-color: var(--nav-background-color);
     position: fixed;
@@ -143,6 +163,10 @@ header {
     height: 3rem;
     display: flex;
     align-items: center;
+}
+
+[data-theme='nebula'] header,
+[data-theme='nebula-dark'] header {
     /*box-shadow: 0 0 5px 0 rgba(213, 217, 217, .5);*/
     /*box-shadow: 0 0 5px 0 #999;*/
     box-shadow: 0 0 5px var(--shadow-color);
@@ -180,7 +204,15 @@ header li h1 {
     border-bottom: 3px dotted #23B0FF;
 }
 
-a, a:hover, a:visited, a:active {
+/** 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, a.button, a.button:hover, a.button:active, a.button:visited {
     text-decoration: none;
 }
 
@@ -193,10 +225,15 @@ a:hover {
     filter: brightness(80%);
 }
 
+ol li::marker, ul li::marker {
+    color: var(--text-color-muted);
+}
+
 /* Active element, e.g. a button */
 .active {
-    background-color: var(--highlight-color);
+    background-color: var(--color-highlight);
     color: var(--text-color);
+    transition-duration: 0.2s;
 }
 
 /* Special button */
@@ -205,17 +242,16 @@ a:hover {
 }
 
 /* Buttons */
-button, input {
+
-    border: var(--border-width) solid var(--border-color);
+button, .button, input, select, textarea {
-    border-radius: var(--border-radius);
     box-sizing: border-box;
-    color: var(--secondary-text-color);
+    color: var(--text-color-secondary);
     background-color: var(--button-color);
     cursor: pointer;
     display: inline-block;
     font-size: 13px;
-    line-height: 29px;
+    /*line-height: 29px;*/
-    padding: 0 10px 0 11px;
+    /*padding: 0 10px 0 11px;*/
     position: relative;
     text-align: left;
     text-decoration: none;
@@ -223,23 +259,85 @@ button, input {
     -webkit-user-select: none;
     touch-action: manipulation;
     vertical-align: middle;
+    transition-duration: 0.2s;
 }
 
-button:hover {
+button, .button, input, select, textarea, table {
+    border: var(--border-width) solid var(--border-color);
+    border-radius: var(--border-radius);
+    padding: .5rem .5rem;
+}
+
+button:hover, .button:hover {
     /*background-color: #f7fafa;*/
     /*background-color: #d57803;*/
-    background-color: var(--highlight-color);
+    background-color: var(--color-highlight);
     filter: brightness(80%);
+    transition-duration: 0.2s;
 }
 
-button:focus {
+button:focus, .button:focus {
     /*border-color: #008296;*/
     /*box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;*/
     outline: 0;
     /*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%);
+}
+
+/* Toggle buttons */
+
+.button-group {
+    display: inline-flex;
+    overflow: hidden;
+    border: var(--border-width) solid var(--border-color);
+    border-radius: var(--border-radius);
+}
+
+.button-group button {
+    /* Reset borders because the buttons are mashed together and the group has its own border */
+    border: none;
+    border-radius: 0;
+    box-shadow: none !important;
+}
+
+/* Table */
+
+th {
+    text-align: left;
+}
+
+th, td {
+    padding: 0 0.3rem;
+}
+
 /* Cards */
+
 .cards {
     display: grid;
     grid-column-gap: 1rem;
@@ -255,10 +353,24 @@ button:focus {
     /*padding: 1em;*/
 }
 
+[data-theme='nebula'] :modal,
 [data-theme='nebula'] .card,
 [data-theme='nebula'] button,
+[data-theme='nebula'] .button,
+[data-theme='nebula'] .button-group,
+[data-theme='nebula'] input,
+[data-theme='nebula'] select,
+[data-theme='nebula'] textarea,
+[data-theme='nebula'] table,
+[data-theme='nebula-dark'] :modal,
 [data-theme='nebula-dark'] .card,
-[data-theme='nebula-dark'] button {
+[data-theme='nebula-dark'] button,
+[data-theme='nebula-dark'] .button,
+[data-theme='nebula-dark'] .button-group,
+[data-theme='nebula-dark'] input,
+[data-theme='nebula-dark'] select,
+[data-theme='nebula-dark'] textarea,
+[data-theme='nebula-dark'] table {
     box-shadow: var(--shadow-color) 0 2px 5px 0;
 }
 
@@ -317,6 +429,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;
@@ -324,27 +440,48 @@ button:focus {
 }
 */
 
-/** Tags/chips */
+/* Tags/chips */
+
 .chip {
     font-size: .8rem;
-    border-radius: var(--border-radius);
+    border-radius: var(--chip-border-radius);
-    background-color: var(--secondary-background-color);
+    background-color: var(--background-color-secondary);
-    color: var(--secondary-text-color);
+    color: var(--text-color-secondary);
     /*color: var(--text-color);*/
     padding: .2rem .5rem;
     margin-left: .5rem;
 }
 
 .chip .button {
-    border-radius: var(--border-radius);
+    border-radius: var(--chip-border-radius);
 }
 
-/** Status */
+/* Status */
 .error {
-    color: var(--error-color);
+    color: var(--color-error);
 }
 
 
+/** Modal, e.g. for showing info or filling in a form; on top of the other content */
+
+dialog:modal {
+    color: var(--text-color);
+    background-color: var(--background-color);
+    /*background-color: var(--nav-background-color);*/
+    border: 2px solid var(--border-color);
+    border-radius: var(--border-radius);
+    width: 90%;
+    /*height: 90%;*/
+    overflow: auto;
+}
+
+/* The umwelt of the modal, on top of the regular content */
+dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+/** Footer */
+
 footer {
     /*background-color: var(--secondary-background-color);*/
     margin-top: 1rem;
@@ -363,4 +500,4 @@ footer .column {
 footer h2 {
     text-align: left;
     margin-bottom: 0;
-}
+}