ui: don't inline style

It's used in other custom pages too

html/ui/app.css

@@ -0,0 +1,42 @@
+
+.view-links > span {
+    display: inline-block;
+    white-space: nowrap;
+    margin-right: 1ex;
+    margin-bottom: 1ex;
+    padding: 0.5ex;
+    border: 1pt solid;
+    border-radius: 1ex;
+    cursor: pointer;
+}
+
+.downloads, .download-links {
+  & > * {
+    display: inline-block;
+    margin-right: 1ex;
+    margin-bottom: 1ex;
+    padding: 0.5ex;
+    border: 1px solid;
+    border-radius: 1ex;
+    cursor: pointer;
+  }
+}
+
+.downloads, .view-links {
+  & > .selected {
+    color: var(--link);
+  }
+}
+
+.text-and-file {
+  position:relative;
+
+  textarea {
+    width: 64em;
+  }
+
+  input[type="file"] {
+    position:absolute;
+    bottom:0;right:0;
+  }
+}

html/ui/index.html

@@ -6,245 +6,9 @@
 
 <link rel="icon" href="favicon.ico" />
 
-<style>: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 {
+<style>@import url('/ui/style.css');@import url('/ui/app.css');</style>
-    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; }
-</style>
-<style>
-.view-links > span {
-    display: inline-block;
-    white-space: nowrap;
-    margin-right: 1ex;
-    margin-bottom: 1ex;
-    padding: 0.5ex;
-    border: 1pt solid;
-    border-radius: 1ex;
-    cursor: pointer;
-}
-
-.downloads, .download-links {
-  & > * {
-    display: inline-block;
-    margin-right: 1ex;
-    margin-bottom: 1ex;
-    padding: 0.5ex;
-    border: 1px solid;
-    border-radius: 1ex;
-    cursor: pointer;
-  }
-}
-
-.downloads, .view-links {
-  & > .selected {
-    color: var(--link);
-  }
-}
-
-.text-and-file {
-  position:relative;
-
-  textarea {
-    width: 64em;
-  }
-
-  input[type="file"] {
-    position:absolute;
-    bottom:0;right:0;
-  }
-}
-</style>
 <script src="/ui/jsonpatch.min-942279a1c4209cc2.js" integrity="sha384-GcPrkRS12jtrElEkbJcrZ8asvvb9s3mc+CUq9UW/8bL4L0bpkmh9M+oFnWN6qLq2"></script>
 <script src="/ui/app-7f4645e84eaae7ce.js" defer integrity="sha384-31uiQnXVSPLDq61o+chfyKRkSdkmzv023M7KafOo+0xRw5AM70BUFyYO6yo0kPiZ" type="module"></script>
 <script src="/ui/Downloads-c9374f19f52c46d.js" integrity="sha384-WQIkCSxlUkvu4jFIWwS3bESMaazGwwnBn9dyvB7nItz3L8BmusRMsJACzfJa7sC4"></script>

html/ui/style.css

@@ -0,0 +1,195 @@
+: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; }

ui/index.html

@@ -6,8 +6,9 @@
 <link data-trunk rel="copy-file" href="favicon.ico" />
 <link rel="icon" href="favicon.ico" />
 <link data-trunk rel="copy-file" href="js/vue.esm-browser.js" />
-<link data-trunk rel="inline" href="style.css" />
+<link data-trunk rel="copy-file" href="style.css" />
-<link data-trunk rel="inline" href="app.css" />
+<link data-trunk rel="copy-file" href="app.css" />
+<style>@import url('/ui/style.css');@import url('/ui/app.css');</style>
 <script data-trunk src="js/jsonpatch.min.js"></script>
 <script data-trunk src="js/app.js" type="module" defer></script>
 <script data-trunk src="js/Downloads.js"></script>