Add 98.css

2025-10-16 04:32:26 +02:00
parent 64a564b6cc
commit 1b1f88cf76
50 changed files with 2834 additions and 0 deletions
--- a/packages/webapp/public/98.css/.editorconfig
+++ b/packages/webapp/public/98.css/.editorconfig
@@ -0,0 +1,18 @@
+# https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0
--- a/packages/webapp/public/98.css/.github/workflows/npm-publish.yml
+++ b/packages/webapp/public/98.css/.github/workflows/npm-publish.yml
@@ -0,0 +1,23 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Publish to NPM
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm run release
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
--- a/packages/webapp/public/98.css/LICENSE
+++ b/packages/webapp/public/98.css/LICENSE
@@ -0,0 +1,7 @@
+Copyright 2020 Jordan Scales
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/packages/webapp/public/98.css/README.md
+++ b/packages/webapp/public/98.css/README.md
@@ -0,0 +1,76 @@
+## 98.css
+
+[![npm](https://98badges.now.sh/api/version)](http://npm.im/98.css)
+[![gzip size](https://98badges.now.sh/api/size)](https://unpkg.com/98.css)
+
+A design system for building faithful recreations of old UIs.
+
+<img alt="a screenshot of a window with the title 'My First VB4 Program' and two buttons OK and Cancel, styled like a Windows 98 dialog" src="https://github.com/jdan/98.css/blob/main/docs/window.png?raw=true" height="133"> <img alt="a magnified view showing pixel-perfect borders on a scrollbar and button element" src="https://github.com/jdan/98.css/blob/main/docs/zoom.png?raw=true?raw=true" height="133">
+
+98.css is a CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.
+
+Be sure to check out [XP.css](https://botoxparty.github.io/XP.css/) and [7.css](https://khang-nd.github.io/7.css/) as well.
+
+### Installation / Usage
+
+The easiest way to use 98.css is to import it from [unpkg](https://unpkg.com/).
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>98.css example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="https://unpkg.com/98.css" />
+</head>
+
+<body>
+  <div class="window" style="margin: 32px; width: 250px">
+    <div class="title-bar">
+      <div class="title-bar-text">
+        My First VB4 Program
+      </div>
+    </div>
+    <div class="window-body">
+      <p>Hello, world!</p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+Alternatively, you can grab 98.css for [the releases page](https://github.com/jdan/98.css/releases) or [npm](https://www.npmjs.com/package/98.css).
+
+```
+npm install 98.css
+```
+
+Here is an example of [98.css being used with React](https://codesandbox.io/s/objective-chandrasekhar-t5t6h?file=/src/index.js), and [an example with vanilla JavaScript](https://codesandbox.io/s/late-sound-miqho?file=/index.html).
+
+Refer to the [documentation page](https://jdan.github.io/98.css/) for specific instructions on this library's components.
+
+### Developing
+
+First, run `npm install`.
+
+[`style.css`](https://github.com/jdan/98.css/blob/main/style.css) is where everything happens.
+
+You can use `npm start` to start a development environment that will watch for file changes and rebuild 98.css, reloading your browser in the process.
+
+You can run a build manually with `npm run build`. This will write to the `dist/` directory.
+
+### Issues, Contributing, etc.
+
+Refer to [the GitHub issues page](https://github.com/jdan/98.css/issues) to see bugs in my CSS or report new ones. I'd really like to see your pull requests (especially those new to open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like to make it a fun place to build your open-source muscle.
+
+Thank you for checking my little project out, I hope it brought you some joy today. Consider [starring/following along on GitHub](https://github.com/jdan/98.css/stargazers) and maybe subscribing to more fun things on [my twitter](https://twitter.com/jdan). 👋
+
+### Publishing
+
+Building the docs site: `npm run deploy:docs`
+
+Publishing to npm: `npm run release`
+
+### License
+
+[MIT](https://github.com/jdan/98.css/blob/main/LICENSE)
--- a/packages/webapp/public/98.css/build.js
+++ b/packages/webapp/public/98.css/build.js
@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+const dedent = require("dedent");
+const ejs = require("ejs");
+const fs = require("fs");
+const glob = require("glob");
+const hljs = require("highlight.js");
+const mkdirp = require("mkdirp");
+const path = require("path");
+const postcss = require("postcss");
+
+const { homepage, version } = require("./package.json");
+
+function buildCSS() {
+  const input =
+    `/*! 98.css v${version} - ${homepage} */\n` + fs.readFileSync("style.css");
+
+  return postcss()
+    .use(require("postcss-inline-svg"))
+    .use(require("postcss-css-variables"))
+    .use(require("postcss-calc"))
+    .use(require("postcss-copy")({ dest: "dist", template: "[name].[ext]" }))
+    .use(require("cssnano"))
+    .process(input, {
+      from: "style.css",
+      to: "dist/98.css",
+      map: { inline: false },
+    })
+    .then((result) => {
+      mkdirp.sync("dist");
+      fs.writeFileSync("dist/98.css", result.css);
+      fs.writeFileSync("dist/98.css.map", result.map.toString());
+    });
+}
+
+function buildDocs() {
+  let id = 0;
+  function getNewId() {
+    return ++id;
+  }
+  function getCurrentId() {
+    return id;
+  }
+
+  const template = fs.readFileSync("docs/index.html.ejs", "utf-8");
+  function example(code) {
+    const magicBrackets = /\[\[(.*)\]\]/g;
+    const dedented = dedent(code);
+    const inline = dedented.replace(magicBrackets, "$1");
+    const escaped = hljs.highlight("html", dedented.replace(magicBrackets, ""))
+      .value;
+
+    return `<div class="example">
+      ${inline}
+      <details>
+        <summary>Show code</summary>
+        <pre><code>${escaped}</code></pre>
+      </details>
+    </div>`;
+  }
+
+  glob("docs/*", (err, files) => {
+    if (!err) {
+      files.forEach((srcFile) =>
+        fs.copyFileSync(srcFile, path.join("dist", path.basename(srcFile)))
+      );
+    } else throw "error globbing dist directory.";
+  });
+  fs.writeFileSync(
+    path.join(__dirname, "/dist/index.html"),
+    ejs.render(template, { getNewId, getCurrentId, example })
+  );
+}
+
+function build() {
+  buildCSS()
+    .then(buildDocs)
+    .catch((err) => console.log(err));
+}
+module.exports = build;
+
+build();
--- a/packages/webapp/public/98.css/docs/docs.css
+++ b/packages/webapp/public/98.css/docs/docs.css
@@ -0,0 +1,152 @@
+body {
+  margin: 0;
+  padding: 0;
+  background: #c0c0c0;
+}
+
+main {
+  width: 65rem;
+  margin-left: 240px;
+  margin-bottom: 60px;
+}
+
+aside {
+  width: 200px;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  padding: 8px;
+  display: flex;
+  align-items: stretch;
+}
+
+aside .tree-view {
+  width: 100%;
+  /* TODO: Move scrollbar into the recessed region? */
+  overflow-y: scroll;
+}
+
+h1 {
+  margin: 12px 0;
+}
+
+hr {
+  margin: 0;
+  border: none;
+  width: 400px;
+  height: 1px;
+  opacity: 0.5;
+  background: linear-gradient(
+    to right,
+    red 20%,
+    yellow 20%,
+    yellow 36%,
+    green 36%,
+    green 60%,
+    blue 60%,
+    blue 100%
+  );
+}
+
+h2 {
+  margin-bottom: 12px;
+}
+
+h3 {
+  font-size: 1.6rem;
+}
+
+h3,
+h4 {
+  /* Swap the margin for a top-padding so linking to this section
+     results in a better scroll position */
+  padding-top: 20px;
+  margin-top: 0;
+  display: block;
+  flex: 0 0 180px;
+}
+
+p {
+  max-width: 50rem;
+  line-height: 1.5;
+}
+
+.component {
+  display: flex;
+  margin-top: 24px;
+}
+
+blockquote {
+  margin: 0 0 20px;
+  padding: 20px;
+  background: #dfdfdf;
+}
+
+blockquote footer {
+  margin: 12px 0 0 12px;
+}
+
+.example {
+  margin: 16px 0;
+  padding: 12px 24px;
+  border-left: 1px solid #808080;
+}
+
+details {
+  margin-top: 12px;
+}
+
+summary {
+  user-select: none;
+  cursor: pointer;
+  display: inline;
+}
+
+details[open] summary {
+  margin-bottom: 8px;
+}
+
+button.focused {
+  outline: 1px dotted #000000;
+  outline-offset: -4px;
+}
+
+button.active {
+  box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a,
+    inset -2px -2px #dfdfdf, inset 2px 2px #808080;
+}
+
+@media (max-width: 480px) {
+  aside {
+    display: none;
+  }
+
+  main {
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: 16px;
+  }
+
+  hr {
+    width: 100%;
+  }
+
+  p {
+    width: 100%;
+  }
+
+  h3,
+  h4 {
+    flex: 0;
+  }
+
+  .component {
+    display: block;
+    margin-top: 24px;
+  }
+
+  pre {
+    overflow-x: scroll;
+  }
+}
--- a/packages/webapp/public/98.css/docs/icon.png
+++ b/packages/webapp/public/98.css/docs/icon.png
--- a/packages/webapp/public/98.css/docs/index.html.ejs
+++ b/packages/webapp/public/98.css/docs/index.html.ejs
--- a/packages/webapp/public/98.css/docs/vs.css
+++ b/packages/webapp/public/98.css/docs/vs.css
@@ -0,0 +1,67 @@
+/*
+
+Visual Studio-like style based on original C# coloring by Jason Diamond <jason@diamond.name>
+
+*/
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: white;
+  color: black;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-variable {
+  color: #008000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-built_in,
+.hljs-name,
+.hljs-tag {
+  color: #00f;
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-section,
+.hljs-attribute,
+.hljs-literal,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-addition {
+  color: #a31515;
+}
+
+.hljs-deletion,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-meta {
+  color: #2b91af;
+}
+
+.hljs-doctag {
+  color: #808080;
+}
+
+.hljs-attr {
+  color: #f00;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link {
+  color: #00b0e8;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
--- a/packages/webapp/public/98.css/docs/window.png
+++ b/packages/webapp/public/98.css/docs/window.png
--- a/packages/webapp/public/98.css/docs/zoom.png
+++ b/packages/webapp/public/98.css/docs/zoom.png
--- a/packages/webapp/public/98.css/fonts/converted/ms_sans_serif.woff
+++ b/packages/webapp/public/98.css/fonts/converted/ms_sans_serif.woff
--- a/packages/webapp/public/98.css/fonts/converted/ms_sans_serif.woff2
+++ b/packages/webapp/public/98.css/fonts/converted/ms_sans_serif.woff2
--- a/packages/webapp/public/98.css/fonts/converted/ms_sans_serif_bold.woff
+++ b/packages/webapp/public/98.css/fonts/converted/ms_sans_serif_bold.woff
--- a/packages/webapp/public/98.css/fonts/converted/ms_sans_serif_bold.woff2
+++ b/packages/webapp/public/98.css/fonts/converted/ms_sans_serif_bold.woff2
--- a/packages/webapp/public/98.css/fonts/src/ms-sans-serif-bold/MS
+++ b/packages/webapp/public/98.css/fonts/src/ms-sans-serif-bold/MS
--- a/packages/webapp/public/98.css/fonts/src/ms-sans-serif-bold/license.txt
+++ b/packages/webapp/public/98.css/fonts/src/ms-sans-serif-bold/license.txt
@@ -0,0 +1,4 @@
+The FontStruction “MS Sans Serif Bold”
+(https://fontstruct.com/fontstructions/show/1384862) by “lou” is licensed
+under a Creative Commons Attribution Share Alike license
+(http://creativecommons.org/licenses/by-sa/3.0/).
--- a/packages/webapp/public/98.css/fonts/src/ms-sans-serif-bold/readme.txt
+++ b/packages/webapp/public/98.css/fonts/src/ms-sans-serif-bold/readme.txt
@@ -0,0 +1,26 @@
+The font file in this archive was created using Fontstruct the free, online
+font-building tool.
+This font was created by “lou”.
+This font has a homepage where this archive and other versions may be found:
+https://fontstruct.com/fontstructions/show/1384862
+
+Try Fontstruct at http://fontstruct.com
+It’s easy and it’s fun.
+
+NOTE FOR FLASH USERS: Fontstruct fonts (fontstructions) are optimized for Flash.
+If the font in this archive is a pixel font, it is best displayed at a font-size
+of 11.
+
+Fontstruct is sponsored by FontShop.
+Visit them at https://fontshop.com
+FontShop is the original independent font retailer. We’ve been around since
+the dawn of digital type. Whether you need the right font or need to create the
+right font from scratch, let our 26 years of experience work for you.
+
+Fontstruct is copyright ©2017 Rob Meek
+
+LEGAL NOTICE:
+In using this font you must comply with the licensing terms described in the
+file “license.txt” included with this archive.
+If you redistribute the font file in this archive, it must be accompanied by all
+the other files from this archive, including this one.
--- a/packages/webapp/public/98.css/fonts/src/ms-sans-serif/MS
+++ b/packages/webapp/public/98.css/fonts/src/ms-sans-serif/MS
--- a/packages/webapp/public/98.css/fonts/src/ms-sans-serif/license.txt
+++ b/packages/webapp/public/98.css/fonts/src/ms-sans-serif/license.txt
@@ -0,0 +1,4 @@
+The FontStruction “MS Sans Serif”
+(https://fontstruct.com/fontstructions/show/1384746) by “lou” is licensed
+under a Creative Commons Attribution Share Alike license
+(http://creativecommons.org/licenses/by-sa/3.0/).
--- a/packages/webapp/public/98.css/fonts/src/ms-sans-serif/readme.txt
+++ b/packages/webapp/public/98.css/fonts/src/ms-sans-serif/readme.txt
@@ -0,0 +1,26 @@
+The font file in this archive was created using Fontstruct the free, online
+font-building tool.
+This font was created by “lou”.
+This font has a homepage where this archive and other versions may be found:
+https://fontstruct.com/fontstructions/show/1384746
+
+Try Fontstruct at http://fontstruct.com
+It’s easy and it’s fun.
+
+NOTE FOR FLASH USERS: Fontstruct fonts (fontstructions) are optimized for Flash.
+If the font in this archive is a pixel font, it is best displayed at a font-size
+of 11.
+
+Fontstruct is sponsored by FontShop.
+Visit them at https://fontshop.com
+FontShop is the original independent font retailer. We’ve been around since
+the dawn of digital type. Whether you need the right font or need to create the
+right font from scratch, let our 26 years of experience work for you.
+
+Fontstruct is copyright ©2017 Rob Meek
+
+LEGAL NOTICE:
+In using this font you must comply with the licensing terms described in the
+file “license.txt” included with this archive.
+If you redistribute the font file in this archive, it must be accompanied by all
+the other files from this archive, including this one.
--- a/packages/webapp/public/98.css/icon/button-down-active.svg
+++ b/packages/webapp/public/98.css/icon/button-down-active.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15H16V17H15H0V16V1V0ZM1 16H15V1H1V16Z" fill="#808080"/>
+<rect x="1" y="1" width="14" height="15" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7H5V8H6V9H7V10H8V11H9V10H10V9H11V8H12V7Z" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/button-down.svg
+++ b/packages/webapp/public/98.css/icon/button-down.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/button-left.svg
+++ b/packages/webapp/public/98.css/icon/button-left.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 4H8V5H7V6H6V7H5V8H6V9H7V10H8V11H9V4Z" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/button-right.svg
+++ b/packages/webapp/public/98.css/icon/button-right.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4H6V11H7V10H8V9H9V8H10V7H9V6H8V5H7V4Z" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/button-up.svg
+++ b/packages/webapp/public/98.css/icon/button-up.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
+<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/checkmark-disabled.svg
+++ b/packages/webapp/public/98.css/icon/checkmark-disabled.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z" fill="#808080"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/checkmark.svg
+++ b/packages/webapp/public/98.css/icon/checkmark.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/close.svg
+++ b/packages/webapp/public/98.css/icon/close.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/groupbox-border.svg
+++ b/packages/webapp/public/98.css/icon/groupbox-border.svg
@@ -0,0 +1,4 @@
+<svg width="5" height="5" viewBox="0 0 5 5" fill="grey" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H5V5H0V2H2V3H3V2H0" fill="white" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H4V4H0V1H1V3H3V1H0" fill="#808080" />
+</svg>
--- a/packages/webapp/public/98.css/icon/help.svg
+++ b/packages/webapp/public/98.css/icon/help.svg
@@ -0,0 +1,8 @@
+<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="1" width="2" height="2" fill="black"/>
+<rect x="1" width="4" height="1" fill="black"/>
+<rect x="4" y="1" width="2" height="2" fill="black"/>
+<rect x="3" y="3" width="2" height="1" fill="black"/>
+<rect x="2" y="4" width="2" height="2" fill="black"/>
+<rect x="2" y="7" width="2" height="2" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/indicator-horizontal.svg
+++ b/packages/webapp/public/98.css/icon/indicator-horizontal.svg
@@ -0,0 +1,6 @@
+<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V16H2V18H4V20H5V19H3V17H1V1H10V0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1V16H2V17H3V18H4V19H6V18H7V17H8V16H9V1Z" fill="#C0C7C8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V16H8V18H6V20H5V19H7V17H9Z" fill="#87888F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V16H9V18H7V20H5V21H6V19H8V17H10Z" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/indicator-rectangle-horizontal.svg
+++ b/packages/webapp/public/98.css/icon/indicator-rectangle-horizontal.svg
@@ -0,0 +1,6 @@
+<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V20H1V1H10V0Z" fill="white"/>
+<rect x="1" y="1" width="8" height="18" fill="#C0C7C8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V20H1V19H9Z" fill="#87888F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V21H0V20H10Z" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/maximize-disabled.svg
+++ b/packages/webapp/public/98.css/icon/maximize-disabled.svg
@@ -0,0 +1,4 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1H1V3V9V10H2H9H10V9V3V1ZM9 3H2V9H9V3Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="#808080"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/maximize.svg
+++ b/packages/webapp/public/98.css/icon/maximize.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/minimize.svg
+++ b/packages/webapp/public/98.css/icon/minimize.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="2" viewBox="0 0 6 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="6" height="2" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/radio-border-disabled.svg
+++ b/packages/webapp/public/98.css/icon/radio-border-disabled.svg
@@ -0,0 +1,7 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="#C0C0C0"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/radio-border.svg
+++ b/packages/webapp/public/98.css/icon/radio-border.svg
@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="white"/>
+</svg>
+
--- a/packages/webapp/public/98.css/icon/radio-dot-disabled.svg
+++ b/packages/webapp/public/98.css/icon/radio-dot-disabled.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="#808080"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/radio-dot.svg
+++ b/packages/webapp/public/98.css/icon/radio-dot.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/restore.svg
+++ b/packages/webapp/public/98.css/icon/restore.svg
@@ -0,0 +1,10 @@
+<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" width="6" height="2" fill="black"/>
+<rect x="7" y="2" width="1" height="4" fill="black"/>
+<rect x="2" y="2" width="1" height="1" fill="black"/>
+<rect x="6" y="5" width="1" height="1" fill="black"/>
+<rect y="3" width="6" height="2" fill="black"/>
+<rect x="5" y="5" width="1" height="4" fill="black"/>
+<rect y="5" width="1" height="4" fill="black"/>
+<rect x="1" y="8" width="4" height="1" fill="black"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/scrollbar-background.svg
+++ b/packages/webapp/public/98.css/icon/scrollbar-background.svg
@@ -0,0 +1,4 @@
+<svg width="2" height="2" viewBox="0 0 2 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0H0V1H1V2H2V1H1V0Z" fill="#C0C0C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H1V1H0V2H1V1H2V0Z" fill="white"/>
+</svg>
--- a/packages/webapp/public/98.css/icon/sunken-panel-border.svg
+++ b/packages/webapp/public/98.css/icon/sunken-panel-border.svg
@@ -0,0 +1,10 @@
+<svg width="5" height="5" viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
+  <rect width="4" height="1" x="0" y="0" fill="#808080"/>
+  <rect width="1" height="4" x="0" y="0" fill="#808080"/>
+  <rect width="2" height="1" x="1" y="1" fill="#0a0a0a"/>
+  <rect width="1" height="2" x="1" y="1" fill="#0a0a0a"/>
+  <rect width="5" height="1" x="0" y="4" fill="#fff"/>
+  <rect width="1" height="5" x="4" y="0" fill="#fff"/>
+  <rect width="1" height="3" x="3" y="1" fill="#dfdfdf"/>
+  <rect width="3" height="1" x="1" y="3" fill="#dfdfdf"/>
+</svg>
--- a/packages/webapp/public/98.css/now.json
+++ b/packages/webapp/public/98.css/now.json
@@ -0,0 +1,4 @@
+{
+  "version": 2,
+  "public": true
+}
--- a/packages/webapp/public/98.css/package.json
+++ b/packages/webapp/public/98.css/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "98.css",
+  "version": "0.1.21",
+  "description": "A design system for building faithful recreations of old UIs",
+  "main": "dist/98.css",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "build": "node build.js",
+    "deploy:docs": "npm run build && gh-pages -d dist",
+    "release": "npm run build && npm publish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jdan/98.css.git"
+  },
+  "keywords": [
+    "css",
+    "windows98"
+  ],
+  "author": "Jordan Scales <scalesjordan@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jdan/98.css/issues"
+  },
+  "homepage": "https://github.com/jdan/98.css",
+  "devDependencies": {
+    "chokidar": "^3.3.1",
+    "cssnano": "^5.0.1",
+    "dedent": "^0.7.0",
+    "ejs": "^3.0.2",
+    "gh-pages": "^2.2.0",
+    "glob": "^7.1.6",
+    "highlight.js": "^10.4.1",
+    "live-server": "^1.2.1",
+    "mkdirp": "^1.0.4",
+    "postcss": "^8.2.12",
+    "postcss-calc": "^7.0.2",
+    "postcss-copy": "^7.1.0",
+    "postcss-css-variables": "^0.14.0",
+    "postcss-inline": "^1.2.0",
+    "postcss-inline-svg": "^4.1.0"
+  }
+}
--- a/packages/webapp/public/98.css/server.js
+++ b/packages/webapp/public/98.css/server.js
@@ -0,0 +1,16 @@
+const chokidar = require("chokidar");
+const build = require("./build");
+
+chokidar
+  .watch(["style.css", "build.js", "docs", "fonts", "icon"], {
+    usePolling: true,
+  })
+  .on("change", (file) => {
+    console.log(
+      `[${new Date().toLocaleTimeString()}] ${file} changed -- rebuilding...`
+    );
+    build();
+  });
+
+var liveServer = require("live-server");
+liveServer.start({ port: 3000, root: "dist" });
--- a/packages/webapp/public/98.css/style.css
+++ b/packages/webapp/public/98.css/style.css
@@ -0,0 +1,994 @@
+/**
+ * 98.css
+ * Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>
+ * https://github.com/jdan/98.css/blob/main/LICENSE
+ */
+
+:root {
+  /* Color */
+  --text-color: #222222;
+  --surface: #c0c0c0;
+  --button-highlight: #ffffff;
+  --button-face: #dfdfdf;
+  --button-shadow: #808080;
+  --window-frame: #0a0a0a;
+  --dialog-blue: #000080;
+  --dialog-blue-light: #1084d0;
+  --dialog-gray: #808080;
+  --dialog-gray-light: #b5b5b5;
+  --link-blue: #0000ff;
+
+  /* Spacing */
+  --element-spacing: 8px;
+  --grouped-button-spacing: 4px;
+  --grouped-element-spacing: 6px;
+  --radio-width: 12px;
+  --checkbox-width: 13px;
+  --radio-label-spacing: 6px;
+  --range-track-height: 4px;
+  --range-spacing: 10px;
+
+  /* Some detailed computations for radio buttons and checkboxes */
+  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
+  --radio-total-width: calc(var(--radio-total-width-precalc));
+  --radio-left: calc(-1 * var(--radio-total-width-precalc));
+  --radio-dot-width: 4px;
+  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
+  --radio-dot-left: calc(
+    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
+        --radio-dot-width
+      ) / 2
+  );
+
+  --checkbox-total-width-precalc: var(--checkbox-width) +
+    var(--radio-label-spacing);
+  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
+  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
+  --checkmark-width: 7px;
+  --checkmark-left: 3px;
+
+  /* Borders */
+  --border-width: 1px;
+  --border-raised-outer: inset -1px -1px var(--window-frame),
+    inset 1px 1px var(--button-highlight);
+  --border-raised-inner: inset -2px -2px var(--button-shadow),
+    inset 2px 2px var(--button-face);
+  --border-sunken-outer: inset -1px -1px var(--button-highlight),
+    inset 1px 1px var(--window-frame);
+  --border-sunken-inner: inset -2px -2px var(--button-face),
+    inset 2px 2px var(--button-shadow);
+  --default-button-border-raised-outer: inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame);
+  --default-button-border-raised-inner: inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow), inset 3px 3px var(--button-face);
+  --default-button-border-sunken-outer: inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame);
+  --default-button-border-sunken-inner: inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow), inset -3px -3px var(--button-face);
+
+
+  /* Window borders flip button-face and button-highlight */
+  --border-window-outer: inset -1px -1px var(--window-frame),
+    inset 1px 1px var(--button-face);
+  --border-window-inner: inset -2px -2px var(--button-shadow),
+    inset 2px 2px var(--button-highlight);
+
+  /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
+  --border-field: inset -1px -1px var(--button-highlight),
+    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
+    inset 2px 2px var(--window-frame);
+  --border-status-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);
+
+  /* Tabs */
+  --border-tab: inset -1px 0 var(--window-frame),
+    inset 1px 1px var(--button-face),
+    inset -2px 0 var(--button-shadow),
+    inset 2px 2px var(--button-highlight)
+}
+
+@font-face {
+  font-family: "Pixelated MS Sans Serif";
+  src: url("fonts/converted/ms_sans_serif.woff") format("woff");
+  src: url("fonts/converted/ms_sans_serif.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Pixelated MS Sans Serif";
+  src: url("fonts/converted/ms_sans_serif_bold.woff") format("woff");
+  src: url("fonts/converted/ms_sans_serif_bold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+}
+
+body {
+  font-family: Arial;
+  font-size: 12px;
+  color: var(--text-color);
+}
+
+button,
+label,
+input,
+legend,
+textarea,
+select,
+option,
+table,
+ul.tree-view,
+.window,
+.title-bar,
+li[role=tab] {
+  font-family: "Pixelated MS Sans Serif", Arial;
+  -webkit-font-smoothing: none;
+  font-size: 11px;
+}
+
+h1 {
+  font-size: 5rem;
+}
+
+h2 {
+  font-size: 2.5rem;
+}
+
+h3 {
+  font-size: 2rem;
+}
+
+h4 {
+  font-size: 1.5rem;
+}
+
+u {
+  text-decoration: none;
+  border-bottom: 0.5px solid #222222;
+}
+
+button,
+input[type="submit"],
+input[type="reset"] {
+  box-sizing: border-box;
+  border: none;
+  color: transparent;
+  text-shadow: 0 0 var(--text-color);
+  background: var(--surface);
+  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+  border-radius: 0;
+
+  min-width: 75px;
+  min-height: 23px;
+  padding: 0 12px;
+}
+
+button.default,
+input[type="submit"].default,
+input[type="reset"].default {
+  box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
+}
+
+.vertical-bar {
+  width: 4px;
+  height: 20px;
+  background: #c0c0c0;
+  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+}
+
+button:not(:disabled):active,
+input[type="submit"]:not(:disabled):active,
+input[type="reset"]:not(:disabled):active {
+  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
+  text-shadow: 1px 1px var(--text-color);
+}
+
+button.default:not(:disabled):active,
+input[type="submit"].default:not(:disabled):active,
+input[type="reset"].default:not(:disabled):active {
+  box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner);
+}
+
+@media (not(hover)) {
+  button:not(:disabled):hover,
+  input[type="submit"]:not(:disabled):hover,
+  input[type="reset"]:not(:disabled):hover {
+    box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
+  }
+}
+
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus {
+  outline: 1px dotted #000000;
+  outline-offset: -4px;
+}
+
+button::-moz-focus-inner,
+input[type="submit"]::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner {
+  border: 0;
+}
+
+:disabled,
+:disabled + label,
+input[readonly],
+input[readonly] + label {
+  color: var(--button-shadow);
+}
+
+button:disabled,
+input[type="submit"]:disabled,
+input[type="reset"]:disabled,
+:disabled + label {
+  text-shadow: 1px 1px 0 var(--button-highlight);
+}
+
+.window {
+  box-shadow: var(--border-window-outer), var(--border-window-inner);
+  background: var(--surface);
+  padding: 3px;
+}
+
+.title-bar {
+  background: linear-gradient(
+    90deg,
+    var(--dialog-blue),
+    var(--dialog-blue-light)
+  );
+  padding: 3px 2px 3px 3px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-bar.inactive {
+  background: linear-gradient(
+    90deg,
+    var(--dialog-gray),
+    var(--dialog-gray-light)
+  );
+}
+
+.title-bar-text {
+  font-weight: bold;
+  color: white;
+  letter-spacing: 0;
+  margin-right: 24px;
+}
+
+.title-bar-controls {
+  display: flex;
+}
+
+.title-bar-controls button {
+  padding: 0;
+  display: block;
+  min-width: 16px;
+  min-height: 14px;
+}
+
+.title-bar-controls button:active {
+  padding: 0;
+}
+
+.title-bar-controls button:focus {
+  outline: none;
+}
+
+.title-bar-controls button[aria-label="Minimize"],
+.title-bar-controls button[aria-label].minimize {
+  background-image: svg-load("./icon/minimize.svg");
+  background-repeat: no-repeat;
+  background-position: bottom 3px left 4px;
+}
+
+.title-bar-controls button[aria-label="Maximize"],
+.title-bar-controls button[aria-label].maximize {
+  background-image: svg-load("./icon/maximize.svg");
+  background-repeat: no-repeat;
+  background-position: top 2px left 3px;
+}
+
+.title-bar-controls button[aria-label="Maximize"]:disabled,
+.title-bar-controls button[aria-label].maximize:disabled {
+  background-image: svg-load("./icon/maximize-disabled.svg");
+  background-repeat: no-repeat;
+  background-position: top 2px left 3px;
+}
+
+.title-bar-controls button[aria-label="Restore"],
+.title-bar-controls button[aria-label].restore {
+  background-image: svg-load("./icon/restore.svg");
+  background-repeat: no-repeat;
+  background-position: top 2px left 3px;
+}
+
+.title-bar-controls button[aria-label="Help"],
+.title-bar-controls button[aria-label].help {
+  background-image: svg-load("./icon/help.svg");
+  background-repeat: no-repeat;
+  background-position: top 2px left 5px;
+}
+
+.title-bar-controls button[aria-label="Close"],
+.title-bar-controls button[aria-label].close {
+  margin-left: 2px;
+  background-image: svg-load("./icon/close.svg");
+  background-repeat: no-repeat;
+  background-position: top 3px left 4px;
+}
+
+.status-bar {
+  margin: 0px 1px;
+  display: flex;
+  gap: 1px;
+}
+
+.status-bar-field {
+  box-shadow: var(--border-status-field);
+  flex-grow: 1;
+  padding: 2px 3px;
+  margin: 0;
+}
+
+.window-body {
+  margin: var(--element-spacing);
+}
+
+fieldset {
+  border-image: svg-load("./icon/groupbox-border.svg") 2;
+  padding: calc(2 * var(--border-width) + var(--element-spacing));
+  padding-block-start: var(--element-spacing);
+  margin: 0;
+}
+
+legend {
+  background: var(--surface);
+}
+
+.field-row {
+  display: flex;
+  align-items: center;
+}
+
+[class^="field-row"] + [class^="field-row"] {
+  margin-top: var(--grouped-element-spacing);
+}
+
+.field-row > * + * {
+  margin-left: var(--grouped-element-spacing);
+}
+
+.field-row-stacked {
+  display: flex;
+  flex-direction: column;
+}
+
+.field-row-stacked * + * {
+  margin-top: var(--grouped-element-spacing);
+}
+
+label {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  margin: 0;
+  background: 0;
+  position: fixed;
+  opacity: 0;
+  border: none;
+}
+
+input[type="radio"] + label,
+input[type="checkbox"] + label {
+  line-height: 13px;
+}
+
+input[type="radio"] + label {
+  position: relative;
+  margin-left: var(--radio-total-width);
+}
+
+input[type="radio"] + label::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: calc(-1 * (var(--radio-total-width-precalc)));
+  display: inline-block;
+  width: var(--radio-width);
+  height: var(--radio-width);
+  margin-right: var(--radio-label-spacing);
+  background: svg-load("./icon/radio-border.svg");
+}
+
+input[type="radio"]:active + label::before {
+  background: svg-load("./icon/radio-border-disabled.svg");
+}
+
+input[type="radio"]:checked + label::after {
+  content: "";
+  display: block;
+  width: var(--radio-dot-width);
+  height: var(--radio-dot-width);
+  top: var(--radio-dot-top);
+  left: var(--radio-dot-left);
+  position: absolute;
+  background: svg-load("./icon/radio-dot.svg");
+}
+
+input[type="radio"]:focus + label,
+input[type="checkbox"]:focus + label {
+  outline: 1px dotted #000000;
+}
+
+input[type="radio"][disabled] + label::before {
+  background: svg-load("./icon/radio-border-disabled.svg");
+}
+
+input[type="radio"][disabled]:checked + label::after {
+  background: svg-load("./icon/radio-dot-disabled.svg");
+}
+
+input[type="checkbox"] + label {
+  position: relative;
+  margin-left: var(--checkbox-total-width);
+}
+
+input[type="checkbox"] + label::before {
+  content: "";
+  position: absolute;
+  left: calc(-1 * (var(--checkbox-total-width-precalc)));
+  display: inline-block;
+  width: var(--checkbox-width);
+  height: var(--checkbox-width);
+  background: var(--button-highlight);
+  box-shadow: var(--border-field);
+  margin-right: var(--radio-label-spacing);
+}
+
+input[type="checkbox"]:active + label::before {
+  background: var(--surface);
+}
+
+input[type="checkbox"]:checked + label::after {
+  content: "";
+  display: block;
+  width: var(--checkmark-width);
+  height: var(--checkmark-width);
+  position: absolute;
+  left: calc(
+    -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
+  );
+  background: svg-load("./icon/checkmark.svg");
+}
+
+input[type="checkbox"][disabled] + label::before {
+  background: var(--surface);
+}
+
+input[type="checkbox"][disabled]:checked + label::after {
+  background: svg-load("./icon/checkmark-disabled.svg");
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="number"],
+input[type="search"],
+select,
+textarea {
+  padding: 3px 4px;
+  border: none;
+  box-shadow: var(--border-field);
+  background-color: var(--button-highlight);
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: 0;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="search"],
+select {
+  height: 21px;
+}
+input[type="number"] {
+  /* need this 1 pixel to fit the spinner controls in box */
+  height: 22px;
+}
+/* clears the ‘X’ from Internet Explorer */
+input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
+input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
+/* clears the ‘X’ from Chrome */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration { display: none; }
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="number"],
+input[type="search"] {
+  /* For some reason descenders are getting cut off without this */
+  line-height: 2;
+}
+
+input[type="email"]:disabled,
+input[type="url"]:disabled,
+input[type="tel"]:disabled,
+input[type="password"]:disabled,
+input[type="text"]:disabled,
+input[type="number"]:disabled,
+input[type="search"]:disabled,
+input[type="email"]:read-only,
+input[type="url"]:read-only,
+input[type="tel"]:read-only,
+input[type="password"]:read-only,
+input[type="text"]:read-only,
+input[type="number"]:read-only,
+input[type="search"]:read-only,
+textarea:disabled {
+  background-color: var(--surface);
+}
+
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  position: relative;
+  padding-right: 32px;
+  background-image: svg-load("./icon/button-down.svg");
+  background-position: top 2px right 2px;
+  background-repeat: no-repeat;
+  border-radius: 0;
+}
+
+select:focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="tel"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+textarea:focus {
+  outline: none;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  width: 100%;
+  background: transparent;
+}
+
+input[type="range"]:focus {
+  outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 21px;
+  width: 11px;
+  background: svg-load("./icon/indicator-horizontal.svg");
+  transform: translateY(-8px);
+  box-shadow: none;
+  border: none;
+}
+
+input[type="range"].has-box-indicator::-webkit-slider-thumb {
+  background: svg-load("./icon/indicator-rectangle-horizontal.svg");
+  transform: translateY(-10px);
+}
+
+input[type="range"]::-moz-range-thumb {
+  height: 21px;
+  width: 11px;
+  border: 0;
+  border-radius: 0;
+  background: svg-load("./icon/indicator-horizontal.svg");
+  transform: translateY(2px);
+}
+
+input[type="range"].has-box-indicator::-moz-range-thumb {
+  background: svg-load("./icon/indicator-rectangle-horizontal.svg");
+  transform: translateY(0px);
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 2px;
+  box-sizing: border-box;
+  background: black;
+  border-right: 1px solid grey;
+  border-bottom: 1px solid grey;
+  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
+    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
+}
+
+input[type="range"]::-moz-range-track {
+  width: 100%;
+  height: 2px;
+  box-sizing: border-box;
+  background: black;
+  border-right: 1px solid grey;
+  border-bottom: 1px solid grey;
+  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
+    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
+}
+
+.is-vertical {
+  display: inline-block;
+  width: 4px;
+  height: 150px;
+  transform: translateY(50%);
+}
+
+.is-vertical > input[type="range"] {
+  width: 150px;
+  height: 4px;
+  margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0
+    var(--range-spacing);
+  transform-origin: left;
+  transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));
+}
+
+.is-vertical > input[type="range"]::-webkit-slider-runnable-track {
+  border-left: 1px solid grey;
+  border-right: 0;
+  border-bottom: 1px solid grey;
+  box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
+    1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
+}
+
+.is-vertical > input[type="range"]::-moz-range-track {
+  border-left: 1px solid grey;
+  border-right: 0;
+  border-bottom: 1px solid grey;
+  box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
+    1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
+}
+
+.is-vertical > input[type="range"]::-webkit-slider-thumb {
+  transform: translateY(-8px) scaleX(-1);
+}
+
+.is-vertical > input[type="range"].has-box-indicator::-webkit-slider-thumb {
+  transform: translateY(-10px) scaleX(-1);
+}
+
+.is-vertical > input[type="range"]::-moz-range-thumb {
+  transform: translateY(2px) scaleX(-1);
+}
+
+.is-vertical > input[type="range"].has-box-indicator::-moz-range-thumb {
+  transform: translateY(0px) scaleX(-1);
+}
+
+select:focus {
+  color: var(--button-highlight);
+  background-color: var(--dialog-blue);
+}
+select:focus option {
+  color: #000;
+  background-color: #fff;
+}
+
+select:active {
+  background-image: svg-load("./icon/button-down-active.svg");
+}
+
+a {
+  color: var(--link-blue);
+}
+
+a:focus {
+  outline: 1px dotted var(--link-blue);
+}
+
+ul.tree-view {
+  display: block;
+  background: var(--button-highlight);
+  box-shadow: var(--border-field);
+  padding: 6px;
+  margin: 0;
+}
+
+ul.tree-view li {
+  list-style-type: none;
+}
+
+ul.tree-view a {
+  text-decoration: none;
+  color: #000;
+}
+
+ul.tree-view a:focus {
+  background-color: var(--dialog-blue);
+  color: var(--button-highlight);
+}
+
+ul.tree-view ul,
+ul.tree-view li {
+  margin-top: 3px;
+}
+
+ul.tree-view ul {
+  margin-left: 16px;
+  padding-left: 16px;
+  /* Goes down too far */
+  border-left: 1px dotted #808080;
+}
+
+ul.tree-view ul > li {
+  position: relative;
+}
+ul.tree-view ul > li::before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: -16px;
+  top: 6px;
+  width: 12px;
+  border-bottom: 1px dotted #808080;
+}
+
+/* Cover the bottom of the left dotted border */
+ul.tree-view ul > li:last-child::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: -20px;
+  top: 7px;
+  bottom: 0px;
+  width: 8px;
+  background: var(--button-highlight);
+}
+
+ul.tree-view details {
+  margin-top: 0;
+}
+
+ul.tree-view details[open] summary {
+  margin-bottom: 0;
+}
+
+ul.tree-view ul details > summary:before {
+  margin-left: -22px;
+  position: relative;
+  z-index: 1;
+}
+
+ul.tree-view details > summary:before {
+  text-align: center;
+  display: block;
+  float: left;
+  content: "+";
+  border: 1px solid #808080;
+  width: 8px;
+  height: 9px;
+  line-height: 8px;
+  margin-right: 5px;
+  padding-left: 1px;
+  background-color: #fff;
+}
+
+ul.tree-view details[open] > summary:before {
+  content: "-";
+}
+
+ul.tree-view details > summary::marker,
+ul.tree-view details > summary::-webkit-details-marker {
+  content: "";
+}
+
+pre {
+  display: block;
+  background: var(--button-highlight);
+  box-shadow: var(--border-field);
+  padding: 12px 8px;
+  margin: 0;
+}
+
+code,
+code * {
+  font-family: monospace;
+}
+
+summary:focus {
+  outline: 1px dotted #000000;
+}
+
+::-webkit-scrollbar {
+  width: 16px;
+}
+::-webkit-scrollbar:horizontal {
+  height: 17px;
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--button-face);
+}
+
+::-webkit-scrollbar-track {
+  background-image: svg-load("./icon/scrollbar-background.svg");
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--button-face);
+  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+}
+
+::-webkit-scrollbar-button:horizontal:start:decrement,
+::-webkit-scrollbar-button:horizontal:end:increment,
+::-webkit-scrollbar-button:vertical:start:decrement,
+::-webkit-scrollbar-button:vertical:end:increment {
+  display: block;
+}
+
+::-webkit-scrollbar-button:vertical:start {
+  height: 17px;
+  background-image: svg-load("./icon/button-up.svg");
+}
+::-webkit-scrollbar-button:vertical:end {
+  height: 17px;
+  background-image: svg-load("./icon/button-down.svg");
+}
+::-webkit-scrollbar-button:horizontal:start {
+  width: 16px;
+  background-image: svg-load("./icon/button-left.svg");
+}
+::-webkit-scrollbar-button:horizontal:end {
+  width: 16px;
+  background-image: svg-load("./icon/button-right.svg");
+}
+
+.window[role=tabpanel] {
+  position: relative;
+  z-index: 2;
+}
+
+menu[role=tablist] {
+  position: relative;
+  margin: 0 0 -2px 0;
+  text-indent: 0;
+  list-style-type: none;
+  display: flex;
+  padding-left: 3px;
+}
+
+menu[role=tablist] > li {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  box-shadow: var(--border-tab);
+  z-index: 1;
+}
+
+menu[role=tablist] > li[aria-selected=true] {
+  padding-bottom: 2px;
+  margin-top: -2px;
+  background-color: var(--surface);
+  position: relative;
+  z-index: 8;
+  margin-left: -3px;
+}
+
+menu[role=tablist] > li > a {
+  display: block;
+  color: #222;
+  margin: 6px;
+  text-decoration: none;
+}
+menu[role=tablist] > li[aria-selected=true] > a:focus {
+  outline: none;
+}
+menu[role=tablist] > li > a:focus {
+  outline: 1px dotted #222;
+}
+
+menu[role=tablist].multirows > li {
+  flex-grow: 1;
+  text-align: center;
+}
+.sunken-panel {
+  box-sizing: border-box;
+  border: 2px groove transparent;
+  border-image: svg-load("./icon/sunken-panel-border.svg") 2;
+  overflow: auto;
+  background-color: #fff;
+}
+
+table {
+  border-collapse: collapse;
+  position: relative;
+  text-align: left;
+  white-space: nowrap;
+  background-color: #fff;
+}
+
+table > thead > tr > * {
+  position: sticky;
+  top: 0;
+  height: 17px;
+  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+  background: var(--surface);
+  box-sizing: border-box;
+  font-weight: normal;
+  padding: 0 var(--grouped-element-spacing);
+}
+
+table.interactive > tbody > tr {
+  cursor: pointer;
+}
+
+table > tbody > tr.highlighted {
+  color: #fff;
+  background-color: var(--dialog-blue);
+}
+
+table > tbody > tr > * {
+  padding: 0 var(--grouped-element-spacing);
+  height: 14px;
+}
+
+.progress-indicator {
+	height: 32px;
+	position: relative;
+  box-shadow: var(--border-sunken-inner);
+  padding: 4px 4px;
+  border: none;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: 0;
+}
+
+
+.progress-indicator > .progress-indicator-bar {
+  height: 100%;
+  display: block;
+  background-color: var(--dialog-blue);
+}
+
+.progress-indicator.segmented > .progress-indicator-bar {
+  width: 100%;
+  background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */
+  background-image: linear-gradient(
+    90deg,
+    var(--dialog-blue) 0 16px,
+    transparent 0 2px
+  );
+  background-repeat: repeat;
+  background-size: 18px 100%;
+}
+
+.field-border {
+  background: var(--button-highlight);
+  box-shadow: var(--border-field);
+  padding: 2px;
+}
+
+.field-border-disabled {
+  background: var(--surface);
+  box-shadow: var(--border-field);
+  padding: 2px;
+}
+
+.status-field-border {
+  background: var(--surface);
+  box-shadow: var(--border-status-field);
+  padding: 1px;
+}