move ui to using trunk

cargo install trunk

html/ui/style.css

@@ -1,195 +0,0 @@
-:root {
-    --bg: #eee;
-    --color: black;
-    --bevel-dark:  darkgray;
-    --bevel-light: lightgray;
-    --link: blue;
-    --input-bg: #ddd;
-    --input-text: white;
-    --btn-bg: #eee;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: black;
-    --color: orange;
-    --bevel-dark:  #402900;
-    --bevel-light: #805300;
-    --link: #31b0fa;
-    --input-bg: #111;
-    --input-text: #ddd;
-    --btn-bg: #222;
-  }
-}
-
-body {
-    background: var(--bg);
-    color: var(--color);
-}
-
-button[disabled] {
-    opacity: 0.5;
-}
-
-a[href], a[href]:visited, button.link {
-    border: none;
-    color: var(--link);
-    background: none;
-    cursor: pointer;
-    text-decoration: none;
-}
-
-table {
-    border-collapse: collapse;
-}
-th, td {
-    border-left:   dotted 1pt;
-    border-right:  dotted 1pt;
-    border-bottom: dotted 1pt;
-    padding: 2pt 4pt;
-}
-tr:first-child > th {
-    border-top: dotted 1pt;
-}
-th, tr:last-child > td {
-    border-bottom: solid 1pt;
-}
-
-.flat > * { margin-left: 1ex; }
-.flat > *:first-child { margin-left: 0; }
-
-.green { color: green; }
-.red   { color: red; }
-
-@media (prefers-color-scheme: dark) {
-  .red { color: #c00; }
-}
-
-textarea, select, input {
-    background: var(--input-bg);
-    color: var(--input-text);
-    border: solid 1pt;
-    border-color:  var(--bevel-light);
-    border-top-color:  var(--bevel-dark);
-    border-left-color: var(--bevel-dark);
-    margin: 1pt;
-
-    &:focus {
-      outline: solid 1pt var(--color);
-    }
-  }
-
-button, input[type=button], input[type=submit], ::file-selector-button {
-    background: var(--btn-bg);
-    color: var(--color);
-    border: solid 2pt;
-    border-color:  var(--bevel-dark);
-    border-top-color:  var(--bevel-light);
-    border-left-color: var(--bevel-light);
-
-    &:hover {
-      background: var(--bevel-dark);
-    }
-    &:active {
-      background: var(--bevel-dark);
-      border-color: var(--bevel-light);
-    }
-}
-
-header {
-    display: flex;
-    align-items: center;
-    border-bottom: 2pt solid;
-    margin: 0 0 1em 0;
-    padding: 1ex;
-    justify-content: space-between;
-}
-#logo > img {
-    vertical-align: middle;
-}
-header .utils > * {
-    margin-left: 1ex;
-}
-
-.error {
-    display: flex;
-    position: relative;
-    background: rgba(255,0,0,0.2);
-    border: 1pt solid red;
-    justify-content: space-between;
-    align-items: center;
-}
-.error .btn-close,
-.error .code {
-    background: #600;
-    color: white;
-    font-weight: bold;
-    border: none;
-    align-self: stretch;
-    padding: 1ex 1em;
-}
-.error .code {
-    order: 1;
-
-    display: flex;
-    align-items: center;
-    text-align: center;
-}
-.error .message {
-    order: 2;
-    padding: 1ex 2em;
-}
-.error .btn-close {
-    order: 3;
-}
-
-.sheets {
-    display: flex;
-    align-items: stretch;
-}
-.sheets > div {
-    margin: 0 1ex;
-    border: 1pt solid;
-    border-radius: 6pt;
-}
-.sheets .title {
-    text-align: center;
-    font-weight: bold;
-    font-size: large;
-    padding: 2pt 6pt;
-    background: rgba(127,127,127,0.5);
-}
-.sheets .section {
-    padding: 2pt 6pt 2pt 6pt;
-    font-weight: bold;
-    border-top: 1px dotted;
-}
-.sheets section {
-    margin: 2pt 6pt 6pt 6pt;
-}
-.sheets > *:last-child > table:last-child > tr:last-child > td {
-    border-bottom: none;
-}
-
-.notif {
-    display: inline-block;
-    position: relative;
-}
-.notif > div:first-child {
-    position: absolute;
-    min-width: 100%; height: 100%;
-    background: white;
-    opacity: 75%;
-    text-align: center;
-}
-
-.links > * { margin-left: 1ex; }
-.links > *:first-child { margin-left: 0; }
-
-@media (prefers-color-scheme: dark) {
-  .notif > div:first-child {
-    background: black;
-  }
-}
-
-.copy { font-size: small; }