@punkfairie/98.css 1.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/.devenv/load-exports +1 -0
  2. package/.devenv/root +1 -0
  3. package/.devenv/tasks.db +0 -0
  4. package/.devenv/tasks.db-shm +0 -0
  5. package/.devenv/tasks.db-wal +0 -0
  6. package/.direnv/bin/nix-direnv-reload +19 -0
  7. package/.direnv/flake-profile-a5d5b61aa8a61b7d9d765e1daf971a9a578f1cfa.rc +2228 -0
  8. package/.editorconfig +18 -0
  9. package/.envrc +17 -0
  10. package/LICENSE +7 -0
  11. package/README.md +76 -0
  12. package/build.js +81 -0
  13. package/dist/98.css +2 -0
  14. package/dist/98.css.map +1 -0
  15. package/dist/docs.css +152 -0
  16. package/dist/icon.png +0 -0
  17. package/dist/index.html +1673 -0
  18. package/dist/index.html.ejs +1129 -0
  19. package/dist/ms_sans_serif.woff +0 -0
  20. package/dist/ms_sans_serif.woff2 +0 -0
  21. package/dist/ms_sans_serif_bold.woff +0 -0
  22. package/dist/ms_sans_serif_bold.woff2 +0 -0
  23. package/dist/vs.css +67 -0
  24. package/dist/window.png +0 -0
  25. package/dist/zoom.png +0 -0
  26. package/docs/docs.css +152 -0
  27. package/docs/icon.png +0 -0
  28. package/docs/index.html.ejs +1129 -0
  29. package/docs/vs.css +67 -0
  30. package/docs/window.png +0 -0
  31. package/docs/zoom.png +0 -0
  32. package/flake.nix +60 -0
  33. package/fonts/converted/ms_sans_serif.woff +0 -0
  34. package/fonts/converted/ms_sans_serif.woff2 +0 -0
  35. package/fonts/converted/ms_sans_serif_bold.woff +0 -0
  36. package/fonts/converted/ms_sans_serif_bold.woff2 +0 -0
  37. package/fonts/src/ms-sans-serif/MS Sans Serif.ttf +0 -0
  38. package/fonts/src/ms-sans-serif/license.txt +4 -0
  39. package/fonts/src/ms-sans-serif/readme.txt +26 -0
  40. package/fonts/src/ms-sans-serif-bold/MS Sans Serif Bold.ttf +0 -0
  41. package/fonts/src/ms-sans-serif-bold/license.txt +4 -0
  42. package/fonts/src/ms-sans-serif-bold/readme.txt +26 -0
  43. package/icon/button-down-active.svg +5 -0
  44. package/icon/button-down.svg +8 -0
  45. package/icon/button-left.svg +8 -0
  46. package/icon/button-right.svg +8 -0
  47. package/icon/button-up.svg +8 -0
  48. package/icon/checkmark-disabled.svg +3 -0
  49. package/icon/checkmark.svg +3 -0
  50. package/icon/close.svg +3 -0
  51. package/icon/groupbox-border.svg +4 -0
  52. package/icon/help.svg +8 -0
  53. package/icon/indicator-horizontal.svg +6 -0
  54. package/icon/indicator-rectangle-horizontal.svg +6 -0
  55. package/icon/maximize-disabled.svg +4 -0
  56. package/icon/maximize.svg +3 -0
  57. package/icon/minimize.svg +3 -0
  58. package/icon/radio-border-disabled.svg +7 -0
  59. package/icon/radio-border.svg +8 -0
  60. package/icon/radio-dot-disabled.svg +3 -0
  61. package/icon/radio-dot.svg +3 -0
  62. package/icon/restore.svg +10 -0
  63. package/icon/scrollbar-background.svg +4 -0
  64. package/icon/sunken-panel-border.svg +10 -0
  65. package/now.json +4 -0
  66. package/package.json +48 -0
  67. package/server.js +16 -0
  68. package/style.css +1052 -0
package/.editorconfig ADDED
@@ -0,0 +1,18 @@
1
+ # https://editorconfig.org
2
+ root = true
3
+
4
+ [*]
5
+ charset = utf-8
6
+ end_of_line = lf
7
+ indent_size = 2
8
+ indent_style = space
9
+ insert_final_newline = true
10
+ max_line_length = 80
11
+ trim_trailing_whitespace = true
12
+
13
+ [*.md]
14
+ max_line_length = 0
15
+ trim_trailing_whitespace = false
16
+
17
+ [COMMIT_EDITMSG]
18
+ max_line_length = 0
package/.envrc ADDED
@@ -0,0 +1,17 @@
1
+ #!/usr/bin/env bash
2
+
3
+ if ! has nix_direnv_version || ! nix_direnv_version 3.1.0; then
4
+ source_url "https://raw.githubusercontent.com/nix-community/nix-direnv/3.1.0/direnvrc" "sha256-yMJ2OVMzrFaDPn7q8nCBZFRYpL/f0RcHzhmw/i6btJM="
5
+ fi
6
+
7
+ export DEVENV_IN_DIRENV_SHELL=true
8
+
9
+ watch_file flake.nix
10
+ watch_file flake.lock
11
+
12
+ mkdir -p "$PWD/.devenv"
13
+ DEVENV_ROOT_FILE="$PWD/.devenv/root"
14
+ printf %s "$PWD" >"$DEVENV_ROOT_FILE"
15
+ if ! use flake . --override-input devenv-root "file+file://$DEVENV_ROOT_FILE"; then
16
+ echo "devenv could not be built. The devenv environment was not loaded. Make the necessary changes to devenv.nix and hit enter to try again." >&2
17
+ fi
package/LICENSE ADDED
@@ -0,0 +1,7 @@
1
+ Copyright 2020 Jordan Scales
2
+
3
+ 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:
4
+
5
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6
+
7
+ 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.
package/README.md ADDED
@@ -0,0 +1,76 @@
1
+ ## 98.css
2
+
3
+ <a href="https://npm.im/98.css"><img height="29" alt="npm" src="https://98badges.now.sh/api/version" /></a>
4
+ <a href="https://unpkg.com/98.css"><img height="29" alt="gzip size" src="https://98badges.now.sh/api/size" /></a>
5
+
6
+ A design system for building faithful recreations of old UIs.
7
+
8
+ <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">
9
+
10
+ 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.
11
+
12
+ 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.
13
+
14
+ ### Installation / Usage
15
+
16
+ The easiest way to use 98.css is to import it from [unpkg](https://unpkg.com/).
17
+
18
+ ```html
19
+ <!DOCTYPE html>
20
+ <html>
21
+ <head>
22
+ <title>98.css example</title>
23
+ <meta charset="UTF-8" />
24
+ <link rel="stylesheet" href="https://unpkg.com/98.css" />
25
+ </head>
26
+
27
+ <body>
28
+ <div class="window" style="margin: 32px; width: 250px">
29
+ <div class="title-bar">
30
+ <div class="title-bar-text">
31
+ My First VB4 Program
32
+ </div>
33
+ </div>
34
+ <div class="window-body">
35
+ <p>Hello, world!</p>
36
+ </div>
37
+ </div>
38
+ </body>
39
+ </html>
40
+ ```
41
+
42
+ 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).
43
+
44
+ ```
45
+ npm install 98.css
46
+ ```
47
+
48
+ 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).
49
+
50
+ Refer to the [documentation page](https://jdan.github.io/98.css/) for specific instructions on this library's components.
51
+
52
+ ### Developing
53
+
54
+ First, run `npm install`.
55
+
56
+ [`style.css`](https://github.com/jdan/98.css/blob/main/style.css) is where everything happens.
57
+
58
+ 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.
59
+
60
+ You can run a build manually with `npm run build`. This will write to the `dist/` directory.
61
+
62
+ ### Issues, Contributing, etc.
63
+
64
+ 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.
65
+
66
+ 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 reading my posts on [Bluesky](https://bsky.app/profile/jdan.me). 👋
67
+
68
+ ### Publishing
69
+
70
+ Building the docs site: `npm run deploy:docs`
71
+
72
+ Publishing to npm: `npm run release`
73
+
74
+ ### License
75
+
76
+ [MIT](https://github.com/jdan/98.css/blob/main/LICENSE)
package/build.js ADDED
@@ -0,0 +1,81 @@
1
+ #!/usr/bin/env node
2
+ const dedent = require("dedent");
3
+ const ejs = require("ejs");
4
+ const fs = require("fs");
5
+ const glob = require("glob");
6
+ const hljs = require("highlight.js");
7
+ const mkdirp = require("mkdirp");
8
+ const path = require("path");
9
+ const postcss = require("postcss");
10
+
11
+ const { homepage, version } = require("./package.json");
12
+
13
+ function buildCSS() {
14
+ const input =
15
+ `/*! 98.css v${version} - ${homepage} */\n` + fs.readFileSync("style.css");
16
+
17
+ return postcss()
18
+ .use(require("postcss-inline-svg"))
19
+ .use(require("postcss-css-variables"))
20
+ .use(require("postcss-calc"))
21
+ .use(require("postcss-copy")({ dest: "dist", template: "[name].[ext]" }))
22
+ .use(require("cssnano"))
23
+ .process(input, {
24
+ from: "style.css",
25
+ to: "dist/98.css",
26
+ map: { inline: false },
27
+ })
28
+ .then((result) => {
29
+ mkdirp.sync("dist");
30
+ fs.writeFileSync("dist/98.css", result.css);
31
+ fs.writeFileSync("dist/98.css.map", result.map.toString());
32
+ });
33
+ }
34
+
35
+ function buildDocs() {
36
+ let id = 0;
37
+ function getNewId() {
38
+ return ++id;
39
+ }
40
+ function getCurrentId() {
41
+ return id;
42
+ }
43
+
44
+ const template = fs.readFileSync("docs/index.html.ejs", "utf-8");
45
+ function example(code) {
46
+ const magicBrackets = /\[\[(.*)\]\]/g;
47
+ const dedented = dedent(code);
48
+ const inline = dedented.replace(magicBrackets, "$1");
49
+ const escaped = hljs.highlight("html", dedented.replace(magicBrackets, ""))
50
+ .value;
51
+
52
+ return `<div class="example">
53
+ ${inline}
54
+ <details>
55
+ <summary>Show code</summary>
56
+ <pre><code>${escaped}</code></pre>
57
+ </details>
58
+ </div>`;
59
+ }
60
+
61
+ glob("docs/*", (err, files) => {
62
+ if (!err) {
63
+ files.forEach((srcFile) =>
64
+ fs.copyFileSync(srcFile, path.join("dist", path.basename(srcFile)))
65
+ );
66
+ } else throw "error globbing dist directory.";
67
+ });
68
+ fs.writeFileSync(
69
+ path.join(__dirname, "/dist/index.html"),
70
+ ejs.render(template, { getNewId, getCurrentId, example })
71
+ );
72
+ }
73
+
74
+ function build() {
75
+ buildCSS()
76
+ .then(buildDocs)
77
+ .catch((err) => console.log(err));
78
+ }
79
+ module.exports = build;
80
+
81
+ build();
package/dist/98.css ADDED
@@ -0,0 +1,2 @@
1
+ /*! 98.css v1.1.21 - https://codewith.babesonthe.net/punkfairie/98.css */@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:400;src:url(ms_sans_serif.woff) format("woff");src:url(ms_sans_serif.woff2) format("woff2")}@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:700;src:url(ms_sans_serif_bold.woff) format("woff");src:url(ms_sans_serif_bold.woff2) format("woff2")}body{color:rgb(0 0 0);font-family:Arial,sans-serif;font-size:12px}.button,.title-bar,.window,button,input,label,legend,li[role=tab],option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial,sans-serif;font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid rgb(0 0 0);text-decoration:none}.button,button,input[type=reset],input[type=submit]{background:rgb(192 192 192);border:none;border-radius:0;box-shadow:inset -1px -1px rgb(64 64 64),inset 1px 1px rgb(255 255 255),inset -2px -2px rgb(128 128 128),inset 2px 2px rgb(192 192 192);box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 rgb(0 0 0)}.button.default,button.default,input[type=reset].default,input[type=submit].default{box-shadow:inset 0 0 0 1px rgb(0 0 0),inset -2px -2px rgb(64 64 64),inset 2px 2px rgb(255 255 255),inset -3px -3px rgb(128 128 128),inset 3px 3px rgb(192 192 192)}.vertical-bar{background:silver;box-shadow:inset -1px -1px rgb(64 64 64),inset 1px 1px rgb(255 255 255),inset -2px -2px rgb(128 128 128),inset 2px 2px rgb(192 192 192);height:20px;width:4px}.button:not(:disabled):active,button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{box-shadow:inset -1px -1px rgb(255 255 255),inset 1px 1px rgb(128 128 128),inset -2px -2px rgb(192 192 192),inset 2px 2px rgb(64 64 64);text-shadow:1px 1px rgb(0 0 0)}.button.default:not(:disabled):active,button.default:not(:disabled):active,input[type=reset].default:not(:disabled):active,input[type=submit].default:not(:disabled):active{box-shadow:inset 2px 2px rgb(64 64 64),inset -1px -1px rgb(64 64 64),inset -2px -2px rgb(255 255 255),inset -3px -3px rgb(192 192 192),inset 3px 3px rgb(64 64 64)}@media (not(hover)){.button:not(:disabled):hover,button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px rgb(255 255 255),inset 1px 1px rgb(128 128 128),inset -2px -2px rgb(192 192 192),inset 2px 2px rgb(64 64 64)}}.button:focus,button:focus,input[type=reset]:focus,input[type=submit]:focus{outline:1px dotted rgb(0 0 0);outline-offset:-4px}.button::-moz-focus-inner,button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:rgb(128 128 128)}.button:disabled,:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 rgb(255 255 255)}.window{background:rgb(192 192 192);box-shadow:inset -1px -1px rgb(64 64 64),inset 1px 1px rgb(192 192 192),inset -2px -2px rgb(128 128 128),inset 2px 2px rgb(255 255 255);padding:3px}.title-bar{align-items:center;background:linear-gradient(90deg,rgb(10 36 106),rgb(16 128 206));display:flex;justify-content:space-between;padding:3px 2px 3px 3px}.title-bar.inactive{background:linear-gradient(90deg,rgb(128 128 128),rgb(128 128 128))}.title-bar-text{color:#fff;font-weight:700;letter-spacing:0;margin-right:24px}.title-bar-controls{display:flex}.title-bar-controls button{display:block;min-height:14px;min-width:16px;padding:0}.title-bar-controls button:active{padding:0}.title-bar-controls button:focus{outline:none}.title-bar-controls button.minimize,.title-bar-controls button[aria-label=Minimize]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");background-position:bottom 3px left 4px;background-repeat:no-repeat}.title-bar-controls button.maximize,.title-bar-controls button[aria-label=Maximize]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px left 3px;background-repeat:no-repeat}.title-bar-controls button.maximize:disabled,.title-bar-controls button[aria-label=Maximize]:disabled{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 1H1v9h9V1zM9 3H2v6h7V3z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='gray'/%3E%3C/svg%3E");background-position:top 2px left 3px;background-repeat:no-repeat}.title-bar-controls button.restore,.title-bar-controls button[aria-label=Restore]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M2 0h6v2H2zM7 2h1v4H7zM2 2h1v1H2zM6 5h1v1H6zM0 3h6v2H0zM5 5h1v4H5zM0 5h1v4H0zM1 8h4v1H1z'/%3E%3C/svg%3E");background-position:top 2px left 3px;background-repeat:no-repeat}.title-bar-controls button.help,.title-bar-controls button[aria-label=Help]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 1h2v2H0zM1 0h4v1H1zM4 1h2v2H4zM3 3h2v1H3zM2 4h2v2H2zM2 7h2v2H2z'/%3E%3C/svg%3E");background-position:top 2px left 5px;background-repeat:no-repeat}.title-bar-controls button.close,.title-bar-controls button[aria-label=Close]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");background-position:top 3px left 4px;background-repeat:no-repeat;margin-left:2px}.status-bar{gap:1px;display:flex;margin:0 1px}.status-bar-field{box-shadow:inset -1px -1px rgb(255 255 255),inset 1px 1px rgb(128 128 128);flex-grow:1;margin:0;padding:2px 3px}.window-body{margin:8px}fieldset{border-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E");margin:0;padding:10px;padding-block-start:8px}legend{background:rgb(192 192 192)}.field-row{align-items:center;display:flex}[class^=field-row]+[class^=field-row]{margin-top:6px}.field-row>*+*{margin-left:6px}.field-row-stacked{display:flex;flex-direction:column}.field-row-stacked *+*{margin-top:6px}label{align-items:center;display:inline-flex;user-select:none}input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:0;border:none;margin:0;opacity:0;position:fixed}input[type=checkbox]+label,input[type=radio]+label{line-height:13px}input[type=radio]+label{margin-left:18px;position:relative}input[type=radio]+label:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='%23fff'/%3E%3C/svg%3E");content:"";display:inline-block;height:12px;left:-18px;margin-right:6px;position:absolute;top:0;width:12px}input[type=radio]:active+label:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E")}input[type=radio]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='%23000'/%3E%3C/svg%3E");content:"";display:block;height:4px;left:-14px;position:absolute;top:4px;width:4px}input[type=checkbox]:focus+label,input[type=radio]:focus+label{outline:1px dotted rgb(0 0 0)}input[type=radio][disabled]+label:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E")}input[type=radio][disabled]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='gray'/%3E%3C/svg%3E")}input[type=checkbox]+label{margin-left:19px;position:relative}input[type=checkbox]+label:before{background:rgb(255 255 255);box-shadow:inset -1px -1px rgb(255 255 255),inset 1px 1px rgb(128 128 128),inset -2px -2px rgb(192 192 192),inset 2px 2px rgb(64 64 64);content:"";display:inline-block;height:13px;left:-19px;margin-right:6px;position:absolute;width:13px}input[type=checkbox]:active+label:before{background:rgb(192 192 192)}input[type=checkbox]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='%23000'/%3E%3C/svg%3E");content:"";display:block;height:7px;left:-16px;position:absolute;width:7px}input[type=checkbox][disabled]+label:before{background:rgb(192 192 192)}input[type=checkbox][disabled]:checked+label:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='gray'/%3E%3C/svg%3E")}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:0}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select{background-color:rgb(255 255 255);box-shadow:inset -1px -1px rgb(255 255 255),inset 1px 1px rgb(128 128 128),inset -2px -2px rgb(192 192 192),inset 2px 2px rgb(64 64 64);box-sizing:border-box;padding:3px 4px}select,textarea{border:none}textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:rgb(255 255 255);border-radius:0;box-shadow:inset -1px -1px rgb(255 255 255),inset 1px 1px rgb(128 128 128),inset -2px -2px rgb(192 192 192),inset 2px 2px rgb(64 64 64);box-sizing:border-box;padding:3px 4px}input[type=email],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select{height:21px}input[type=number]{height:22px}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{display:none;height:0;width:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url]{line-height:2}input[type=email]:disabled,input[type=email]:read-only,input[type=number]:disabled,input[type=number]:read-only,input[type=password]:disabled,input[type=password]:read-only,input[type=search]:disabled,input[type=search]:read-only,input[type=tel]:disabled,input[type=tel]:read-only,input[type=text]:disabled,input[type=text]:read-only,input[type=url]:disabled,input[type=url]:read-only,textarea:disabled{background-color:rgb(192 192 192)}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px right 2px;background-repeat:no-repeat;border-radius:0;padding-right:32px;position:relative}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{outline:none}input[type=range]{-webkit-appearance:none;background:transparent;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");border:none;box-shadow:none;height:21px;transform:translateY(-8px);width:11px}input[type=range].has-box-indicator::-webkit-slider-thumb{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E");transform:translateY(-10px)}input[type=range]::-moz-range-thumb{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");border:0;border-radius:0;height:21px;transform:translateY(2px);width:11px}input[type=range].has-box-indicator::-moz-range-thumb{background:url(../images/icon/indicator-rectangle-horizontal.svg);transform:translateY(0)}input[type=range]::-webkit-slider-runnable-track{background:rgb(64 64 64);border-bottom:1px solid rgb(192 192 192);border-right:1px solid rgb(192 192 192);box-shadow:1px 0 0 rgb(255 255 255),1px 1px 0 rgb(255 255 255),0 1px 0 rgb(255 255 255),-1px 0 0 rgb(128 128 128),-1px -1px 0 rgb(128 128 128),0 -1px 0 rgb(128 128 128),-1px 1px 0 rgb(255 255 255),1px -1px rgb(255 255 255);box-sizing:border-box;height:2px;width:100%}input[type=range]::-moz-range-track{background:rgb(64 64 64);border-bottom:1px solid rgb(192 192 192);border-right:1px solid rgb(192 192 192);box-shadow:1px 0 0 rgb(255 255 255),1px 1px 0 rgb(255 255 255),0 1px 0 rgb(255 255 255),-1px 0 0 rgb(128 128 128),-1px -1px 0 rgb(128 128 128),0 -1px 0 rgb(128 128 128),-1px 1px 0 rgb(255 255 255),1px -1px rgb(255 255 255);box-sizing:border-box;height:2px;width:100%}.is-vertical{display:inline-block;height:150px;transform:translateY(50%);width:4px}.is-vertical>input[type=range]{height:4px;margin:0 16px 0 10px;transform:rotate(270deg) translateX(calc(-50% + 8px));transform-origin:left;width:150px}.is-vertical>input[type=range]::-webkit-slider-runnable-track{border-bottom:1px solid rgb(192 192 192);border-left:1px solid rgb(192 192 192);border-right:0;box-shadow:-1px 0 0 rgb(255 255 255),-1px 1px 0 rgb(255 255 255),0 1px 0 rgb(255 255 255),1px 0 0 rgb(128 128 128),1px -1px 0 rgb(128 128 128),0 -1px 0 rgb(128 128 128),1px 1px 0 rgb(255 255 255),-1px -1px rgb(255 255 255)}.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(0) scaleX(-1)}select:focus{background-color:rgb(10 36 106);color:rgb(255 255 255)}select:focus option{background-color:rgb(255 255 255);color:rgb(0 0 0)}select:active{background-image:url(../images/icon/button-down-active.svg)}a{color:rgb(0 0 128)}a:focus{outline:1px dotted rgb(0 0 0)}ul.tree-view{background:rgb(255 255 255);box-shadow:inset -1px -1px rgb(255 255 255),inset 1px 1px rgb(128 128 128),inset -2px -2px rgb(192 192 192),inset 2px 2px rgb(64 64 64);display:block;margin:0;padding:6px}ul.tree-view li{list-style-type:none}ul.tree-view a{color:rgb(0 0 0);text-decoration:none}ul.tree-view a:focus{background-color:rgb(10 36 106);color:rgb(255 255 255)}ul.tree-view li,ul.tree-view ul{margin-top:3px}ul.tree-view ul{border-left:1px dotted rgb(128 128 128);margin-left:16px;padding-left:16px}ul.tree-view ul>li{position:relative}ul.tree-view ul>li:before{border-bottom:1px dotted rgb(128 128 128);content:"";display:block;left:-16px;position:absolute;top:6px;width:12px}ul.tree-view ul>li:last-child:after{background:rgb(255 255 255);bottom:0;content:"";display:block;left:-20px;position:absolute;top:7px;width:8px}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{background-color:rgb(255 255 255);border:1px solid rgb(128 128 128);content:"+";display:block;float:left;height:9px;line-height:8px;margin-right:5px;padding-left:1px;text-align:center;width:8px}ul.tree-view details[open]>summary:before{content:"-"}ul.tree-view details>summary::-webkit-details-marker,ul.tree-view details>summary::marker{content:""}pre{background:rgb(255 255 255);box-shadow:inset -1px -1px rgb(255 255 255),inset 1px 1px rgb(128 128 128),inset -2px -2px rgb(192 192 192),inset 2px 2px rgb(64 64 64);display:block;margin:0;padding:12px 8px}code,code *{font-family:monospace}summary:focus{outline:1px dotted rgb(0 0 0)}::-webkit-scrollbar{width:16px}::-webkit-scrollbar:horizontal{height:17px}::-webkit-scrollbar-corner{background:rgb(192 192 192)}::-webkit-scrollbar-track{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E")}::-webkit-scrollbar-thumb{background-color:rgb(192 192 192);box-shadow:inset -1px -1px rgb(64 64 64),inset 1px 1px rgb(255 255 255),inset -2px -2px rgb(128 128 128),inset 2px 2px rgb(192 192 192)}::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement{display:block}::-webkit-scrollbar-button:vertical:start{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E");height:17px}::-webkit-scrollbar-button:vertical:end{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");height:17px}::-webkit-scrollbar-button:horizontal:start{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E");width:16px}::-webkit-scrollbar-button:horizontal:end{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E");width:16px}.window[role=tabpanel]{position:relative;z-index:2}menu[role=tablist]{display:flex;list-style-type:none;margin:0 0 -2px;padding-left:3px;position:relative;text-indent:0}menu[role=tablist]>li{border-top-left-radius:3px;border-top-right-radius:3px;box-shadow:inset -1px 0 rgb(64 64 64),inset 1px 1px rgb(255 255 255),inset -2px 0 rgb(128 128 128),inset 2px 2px rgb(192 192 192);z-index:1}menu[role=tablist]>li[aria-selected=true]{background-color:rgb(192 192 192);margin-left:-3px;margin-top:-2px;padding-bottom:2px;position:relative;z-index:8}menu[role=tablist]>li>a{color:rgb(0 0 0);display:block;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 rgb(0 0 0)}menu[role=tablist].multirows>li{flex-grow:1;text-align:center}.sunken-panel{border:2px groove transparent;border-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;box-sizing:border-box;overflow:auto}.sunken-panel,table{background-color:rgb(255 255 255)}table{border-collapse:collapse;position:relative;text-align:left;white-space:nowrap}table>thead>tr>*{background:rgb(192 192 192);box-shadow:inset -1px -1px rgb(64 64 64),inset 1px 1px rgb(255 255 255),inset -2px -2px rgb(128 128 128),inset 2px 2px rgb(192 192 192);box-sizing:border-box;font-weight:400;height:17px;padding:0 6px;position:sticky;top:0}table.interactive>tbody>tr{cursor:pointer}table>tbody>tr.highlighted{background-color:rgb(10 36 106);color:rgb(255 255 255)}table>tbody>tr>*{height:14px;padding:0 6px}.progress-indicator{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:0;box-shadow:inset -2px -2px rgb(192 192 192),inset 2px 2px rgb(64 64 64);box-sizing:border-box;height:32px;padding:4px;position:relative}.progress-indicator>.progress-indicator-bar{background-color:rgb(10 36 106);display:block;height:100%}.progress-indicator.segmented>.progress-indicator-bar{background-color:transparent;background-image:linear-gradient(90deg,rgb(10 36 106) 16px,transparent 0 2px);background-repeat:repeat;background-size:18px 100%;width:100%}.field-border{background:rgb(255 255 255)}.field-border,.field-border-disabled{box-shadow:inset -1px -1px rgb(255 255 255),inset 1px 1px rgb(128 128 128),inset -2px -2px rgb(192 192 192),inset 2px 2px rgb(64 64 64);padding:2px}.field-border-disabled,.status-field-border{background:rgb(192 192 192)}.status-field-border{box-shadow:inset -1px -1px rgb(255 255 255),inset 1px 1px rgb(128 128 128);padding:1px}
2
+ /*# sourceMappingURL=98.css.map */
package/dist/98.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../style.css"],"names":[],"mappings":"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","file":"98.css","sourcesContent":["/*! 98.css v1.1.21 - https://codewith.babesonthe.net/punkfairie/98.css */\n/**\n * 98.css\n * Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>\n * https://github.com/jdan/98.css/blob/main/LICENSE\n */\n\n:root {\n /* Color */\n --active-border: rgb(192 192 192);\n --active-title: rgb(10 36 106);\n --app-workspace: rgb(128 128 128);\n --background: rgb(58 110 165);\n --button-alternate-face: rgb(181 181 181);\n --button-dk-shadow: rgb(64 64 64);\n --button-face: rgb(192 192 192);\n --button-hilight: rgb(255 255 255);\n --button-light: rgb(192 192 192);\n --button-shadow: rgb(128 128 128);\n --button-text: rgb(0 0 0);\n --gradient-active-title: rgb(16 128 206);\n --gradient-inactive-title: rgb(128 128 128);\n --gray-text: rgb(128 128 128);\n --hilight: rgb(10 36 106);\n --hilight-text: rgb(255 255 255);\n --hot-tracking-color: rgb(0 0 128);\n --inactive-border: rgb(192 192 192);\n --inactive-title: rgb(128 128 128);\n --inactive-title-text: rgb(192 192 192);\n --info-text: rgb(0 0 0);\n --info-window: rgb(255 255 255);\n --menu: rgb(192 192 192);\n --menu-hilight: rgb(10 36 106);\n --menu-text: rgb(0 0 0);\n --scrollbar: rgb(192 192 192);\n --title-text: rgb(255 255 255);\n --window: rgb(255 255 255);\n --window-frame: rgb(0 0 0);\n --window-text: rgb(0 0 0);\n\n /* Spacing */\n --element-spacing: 8px;\n --grouped-button-spacing: 4px;\n --grouped-element-spacing: 6px;\n --radio-width: 12px;\n --checkbox-width: 13px;\n --radio-label-spacing: 6px;\n --range-track-height: 4px;\n --range-spacing: 10px;\n\n /* Some detailed computations for radio buttons and checkboxes */\n --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);\n --radio-total-width: calc(var(--radio-total-width-precalc));\n --radio-left: calc(-1 * var(--radio-total-width-precalc));\n --radio-dot-width: 4px;\n --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);\n --radio-dot-left: calc(\n -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(--radio-dot-width) / 2\n );\n\n --checkbox-total-width-precalc: var(--checkbox-width) + var(--radio-label-spacing);\n --checkbox-total-width: calc(var(--checkbox-total-width-precalc));\n --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));\n --checkmark-width: 7px;\n --checkmark-left: 3px;\n\n /* Borders */\n --border-width: 1px;\n\n --border-raised-outer: inset -1px -1px var(--button-dk-shadow),\n inset 1px 1px var(--button-hilight);\n --border-raised-inner: inset -2px -2px var(--button-shadow),\n inset 2px 2px var(--button-light);\n\n --border-sunken-outer: inset -1px -1px var(--button-hilight),\n inset 1px 1px var(--button-shadow);\n --border-sunken-inner: inset -2px -2px var(--button-light),\n inset 2px 2px var(--button-dk-shadow);\n\n --default-button-border-raised-outer: inset -2px -2px var(--button-dk-shadow),\n inset 2px 2px var(--button-hilight);\n --default-button-border-raised-inner: inset -3px -3px var(--button-shadow),\n inset 3px 3px var(--button-light);\n\n --default-button-border-sunken-outer: inset 2px 2px var(--button-dk-shadow),\n inset -1px -1px var(--button-dk-shadow);\n --default-button-border-sunken-inner: inset -2px -2px var(--button-hilight),\n inset -3px -3px var(--button-light),\n inset 3px 3px var(--button-dk-shadow);\n\n\n /* Window borders flip button-light and button-hilight */\n --border-window-outer: inset -1px -1px var(--button-dk-shadow),\n inset 1px 1px var(--button-light);\n --border-window-inner: inset -2px -2px var(--button-shadow),\n inset 2px 2px var(--button-hilight);\n\n /* Field borders (checkbox, input, etc) flip button-dk-shadow and button-shadow of sunken */\n --border-field: inset -1px -1px var(--button-hilight),\n inset 1px 1px var(--button-shadow),\n inset -2px -2px var(--button-light),\n inset 2px 2px var(--button-dk-shadow);\n --border-status-field: inset -1px -1px var(--button-hilight),\n inset 1px 1px var(--button-shadow);\n\n /* Tabs */\n --border-tab: inset -1px 0 var(--button-dk-shadow),\n inset 1px 1px var(--button-hilight),\n inset -2px 0 var(--button-shadow),\n inset 2px 2px var(--button-light);\n}\n\n@font-face {\n font-family: \"Pixelated MS Sans Serif\";\n src: url(\"fonts/converted/ms_sans_serif.woff\") format(\"woff\");\n src: url(\"fonts/converted/ms_sans_serif.woff2\") format(\"woff2\");\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Pixelated MS Sans Serif\";\n src: url(\"fonts/converted/ms_sans_serif_bold.woff\") format(\"woff\");\n src: url(\"fonts/converted/ms_sans_serif_bold.woff2\") format(\"woff2\");\n font-weight: bold;\n font-style: normal;\n}\n\nbody {\n font-family: Arial, sans-serif;\n font-size: 12px;\n color: var(--window-text);\n}\n\nbutton,\n.button,\nlabel,\ninput,\nlegend,\ntextarea,\nselect,\noption,\ntable,\nul.tree-view,\n.window,\n.title-bar,\nli[role=tab] {\n font-family: \"Pixelated MS Sans Serif\", Arial, sans-serif;\n -webkit-font-smoothing: none;\n font-size: 11px;\n}\n\nh1 {\n font-size: 5rem;\n}\n\nh2 {\n font-size: 2.5rem;\n}\n\nh3 {\n font-size: 2rem;\n}\n\nh4 {\n font-size: 1.5rem;\n}\n\nu {\n text-decoration: none;\n /*noinspection CssNonIntegerLengthInPixels*/\n border-bottom: 0.5px solid var(--window-text);\n}\n\nbutton,\n.button,\ninput[type=\"submit\"],\ninput[type=\"reset\"] {\n box-sizing: border-box;\n border: none;\n color: transparent;\n text-shadow: 0 0 var(--window-text);\n background: var(--button-face);\n box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n border-radius: 0;\n\n min-width: 75px;\n min-height: 23px;\n padding: 0 12px;\n}\n\nbutton.default,\n.button.default,\ninput[type=\"submit\"].default,\ninput[type=\"reset\"].default {\n box-shadow: inset 0 0 0 1px var(--button-text), var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);\n}\n\n.vertical-bar {\n width: 4px;\n height: 20px;\n background: #c0c0c0;\n box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n}\n\nbutton:not(:disabled):active,\n.button:not(:disabled):active,\ninput[type=\"submit\"]:not(:disabled):active,\ninput[type=\"reset\"]:not(:disabled):active {\n box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);\n text-shadow: 1px 1px var(--window-text);\n}\n\nbutton.default:not(:disabled):active,\n.button.default:not(:disabled):active,\ninput[type=\"submit\"].default:not(:disabled):active,\ninput[type=\"reset\"].default:not(:disabled):active {\n box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner);\n}\n\n/* @formatter:off */\n@media (not(hover)) {\n button:not(:disabled):hover,\n .button:not(:disabled):hover,\n input[type=\"submit\"]:not(:disabled):hover,\n input[type=\"reset\"]:not(:disabled):hover {\n /*noinspection CssUnknownProperty*/\n box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);\n }\n}\n/* @formatter:on */\n\nbutton:focus,\n.button:focus,\ninput[type=\"submit\"]:focus,\ninput[type=\"reset\"]:focus {\n outline: 1px dotted var(--window-frame);\n outline-offset: -4px;\n}\n\nbutton::-moz-focus-inner,\n.button::-moz-focus-inner,\ninput[type=\"submit\"]::-moz-focus-inner,\ninput[type=\"reset\"]::-moz-focus-inner {\n border: 0;\n}\n\n:disabled,\n:disabled + label,\ninput[readonly],\ninput[readonly] + label {\n color: var(--button-shadow);\n}\n\nbutton:disabled,\n.button:disabled,\ninput[type=\"submit\"]:disabled,\ninput[type=\"reset\"]:disabled,\n:disabled + label {\n text-shadow: 1px 1px 0 var(--button-hilight);\n}\n\n.window {\n box-shadow: var(--border-window-outer), var(--border-window-inner);\n background: var(--button-face);\n padding: 3px;\n}\n\n.title-bar {\n background: linear-gradient(\n 90deg,\n var(--active-title),\n var(--gradient-active-title)\n );\n padding: 3px 2px 3px 3px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.title-bar.inactive {\n background: linear-gradient(\n 90deg,\n var(--inactive-title),\n var(--gradient-inactive-title)\n );\n}\n\n.title-bar-text {\n font-weight: bold;\n color: white;\n letter-spacing: 0;\n margin-right: 24px;\n}\n\n.title-bar-controls {\n display: flex;\n}\n\n.title-bar-controls button {\n padding: 0;\n display: block;\n min-width: 16px;\n min-height: 14px;\n}\n\n.title-bar-controls button:active {\n padding: 0;\n}\n\n.title-bar-controls button:focus {\n outline: none;\n}\n\n.title-bar-controls button[aria-label=\"Minimize\"],\n.title-bar-controls button.minimize {\n background-image: svg-load(\"./icon/minimize.svg\");\n background-repeat: no-repeat;\n background-position: bottom 3px left 4px;\n}\n\n.title-bar-controls button[aria-label=\"Maximize\"],\n.title-bar-controls button.maximize {\n background-image: svg-load(\"./icon/maximize.svg\");\n background-repeat: no-repeat;\n background-position: top 2px left 3px;\n}\n\n.title-bar-controls button[aria-label=\"Maximize\"]:disabled,\n.title-bar-controls button.maximize:disabled {\n background-image: svg-load(\"./icon/maximize-disabled.svg\");\n background-repeat: no-repeat;\n background-position: top 2px left 3px;\n}\n\n.title-bar-controls button[aria-label=\"Restore\"],\n.title-bar-controls button.restore {\n background-image: svg-load(\"./icon/restore.svg\");\n background-repeat: no-repeat;\n background-position: top 2px left 3px;\n}\n\n.title-bar-controls button[aria-label=\"Help\"],\n.title-bar-controls button.help {\n background-image: svg-load(\"./icon/help.svg\");\n background-repeat: no-repeat;\n background-position: top 2px left 5px;\n}\n\n.title-bar-controls button[aria-label=\"Close\"],\n.title-bar-controls button.close {\n margin-left: 2px;\n background-image: svg-load(\"./icon/close.svg\");\n background-repeat: no-repeat;\n background-position: top 3px left 4px;\n}\n\n.status-bar {\n margin: 0 1px;\n display: flex;\n gap: 1px;\n}\n\n.status-bar-field {\n box-shadow: var(--border-status-field);\n flex-grow: 1;\n padding: 2px 3px;\n margin: 0;\n}\n\n.window-body {\n margin: var(--element-spacing);\n}\n\nfieldset {\n /*noinspection CssInvalidFunction*/\n border-image: svg-load(\"./icon/groupbox-border.svg\");\n padding: calc(2 * var(--border-width) + var(--element-spacing));\n padding-block-start: var(--element-spacing);\n margin: 0;\n}\n\nlegend {\n background: var(--button-face);\n}\n\n.field-row {\n display: flex;\n align-items: center;\n}\n\n[class^=\"field-row\"] + [class^=\"field-row\"] {\n margin-top: var(--grouped-element-spacing);\n}\n\n.field-row > * + * {\n margin-left: var(--grouped-element-spacing);\n}\n\n.field-row-stacked {\n display: flex;\n flex-direction: column;\n}\n\n.field-row-stacked * + * {\n margin-top: var(--grouped-element-spacing);\n}\n\nlabel {\n display: inline-flex;\n align-items: center;\n user-select: none;\n}\n\ninput[type=\"radio\"],\ninput[type=\"checkbox\"] {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n margin: 0;\n background: 0;\n position: fixed;\n opacity: 0;\n border: none;\n}\n\ninput[type=\"radio\"] + label,\ninput[type=\"checkbox\"] + label {\n line-height: 13px;\n}\n\ninput[type=\"radio\"] + label {\n position: relative;\n margin-left: var(--radio-total-width);\n}\n\ninput[type=\"radio\"] + label::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(-1 * (var(--radio-total-width-precalc)));\n display: inline-block;\n width: var(--radio-width);\n height: var(--radio-width);\n margin-right: var(--radio-label-spacing);\n background: svg-load(\"./icon/radio-border.svg\");\n}\n\ninput[type=\"radio\"]:active + label::before {\n background: svg-load(\"./icon/radio-border-disabled.svg\");\n}\n\ninput[type=\"radio\"]:checked + label::after {\n content: \"\";\n display: block;\n width: var(--radio-dot-width);\n height: var(--radio-dot-width);\n top: var(--radio-dot-top);\n left: var(--radio-dot-left);\n position: absolute;\n background: svg-load(\"./icon/radio-dot.svg\");\n}\n\ninput[type=\"radio\"]:focus + label,\ninput[type=\"checkbox\"]:focus + label {\n outline: 1px dotted var(--window-frame);\n}\n\ninput[type=\"radio\"][disabled] + label::before {\n background: svg-load(\"./icon/radio-border-disabled.svg\");\n}\n\ninput[type=\"radio\"][disabled]:checked + label::after {\n background: svg-load(\"./icon/radio-dot-disabled.svg\");\n}\n\ninput[type=\"checkbox\"] + label {\n position: relative;\n margin-left: var(--checkbox-total-width);\n}\n\ninput[type=\"checkbox\"] + label::before {\n content: \"\";\n position: absolute;\n left: calc(-1 * (var(--checkbox-total-width-precalc)));\n display: inline-block;\n width: var(--checkbox-width);\n height: var(--checkbox-width);\n background: var(--window);\n box-shadow: var(--border-field);\n margin-right: var(--radio-label-spacing);\n}\n\ninput[type=\"checkbox\"]:active + label::before {\n background: var(--button-face);\n}\n\ninput[type=\"checkbox\"]:checked + label::after {\n content: \"\";\n display: block;\n width: var(--checkmark-width);\n height: var(--checkmark-width);\n position: absolute;\n left: calc(\n -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)\n );\n background: svg-load(\"./icon/checkmark.svg\");\n}\n\ninput[type=\"checkbox\"][disabled] + label::before {\n background: var(--button-face);\n}\n\ninput[type=\"checkbox\"][disabled]:checked + label::after {\n background: svg-load(\"./icon/checkmark-disabled.svg\");\n}\n\ninput[type=\"text\"],\ninput[type=\"password\"],\ninput[type=\"email\"],\ninput[type=\"url\"],\ninput[type=\"tel\"],\ninput[type=\"number\"],\ninput[type=\"search\"],\nselect,\ntextarea {\n padding: 3px 4px;\n border: none;\n box-shadow: var(--border-field);\n background-color: var(--window);\n box-sizing: border-box;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: 0;\n}\n\ninput[type=\"text\"],\ninput[type=\"password\"],\ninput[type=\"email\"],\ninput[type=\"url\"],\ninput[type=\"tel\"],\ninput[type=\"search\"],\nselect {\n height: 21px;\n}\n\ninput[type=\"number\"] {\n /* need this 1 pixel to fit the spinner controls in box */\n height: 22px;\n}\n\n/* clears the ‘X’ from Internet Explorer */\ninput[type=search]::-ms-clear {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type=search]::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\n/* clears the ‘X’ from Chrome */\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\ninput[type=\"text\"],\ninput[type=\"password\"],\ninput[type=\"email\"],\ninput[type=\"url\"],\ninput[type=\"tel\"],\ninput[type=\"number\"],\ninput[type=\"search\"] {\n /* For some reason descenders are getting cut off without this */\n line-height: 2;\n}\n\ninput[type=\"email\"]:disabled,\ninput[type=\"url\"]:disabled,\ninput[type=\"tel\"]:disabled,\ninput[type=\"password\"]:disabled,\ninput[type=\"text\"]:disabled,\ninput[type=\"number\"]:disabled,\ninput[type=\"search\"]:disabled,\ninput[type=\"email\"]:read-only,\ninput[type=\"url\"]:read-only,\ninput[type=\"tel\"]:read-only,\ninput[type=\"password\"]:read-only,\ninput[type=\"text\"]:read-only,\ninput[type=\"number\"]:read-only,\ninput[type=\"search\"]:read-only,\ntextarea:disabled {\n background-color: var(--button-face);\n}\n\nselect {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n position: relative;\n padding-right: 32px;\n background-image: svg-load(\"./icon/button-down.svg\");\n background-position: top 2px right 2px;\n background-repeat: no-repeat;\n border-radius: 0;\n}\n\nselect:focus,\ninput[type=\"text\"]:focus,\ninput[type=\"password\"]:focus,\ninput[type=\"email\"]:focus,\ninput[type=\"url\"]:focus,\ninput[type=\"tel\"]:focus,\ninput[type=\"number\"]:focus,\ninput[type=\"search\"]:focus,\ntextarea:focus {\n outline: none;\n}\n\ninput[type=\"range\"] {\n -webkit-appearance: none;\n width: 100%;\n background: transparent;\n}\n\ninput[type=\"range\"]:focus {\n outline: none;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 21px;\n width: 11px;\n background: svg-load(\"./icon/indicator-horizontal.svg\");\n transform: translateY(-8px);\n box-shadow: none;\n border: none;\n}\n\ninput[type=\"range\"].has-box-indicator::-webkit-slider-thumb {\n background: svg-load(\"./icon/indicator-rectangle-horizontal.svg\");\n transform: translateY(-10px);\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n height: 21px;\n width: 11px;\n border: 0;\n border-radius: 0;\n background: svg-load(\"./icon/indicator-horizontal.svg\");\n transform: translateY(2px);\n}\n\ninput[type=\"range\"].has-box-indicator::-moz-range-thumb {\n background: url(\"../images/./icon/indicator-rectangle-horizontal.svg\");\n transform: translateY(0px);\n}\n\ninput[type=\"range\"]::-webkit-slider-runnable-track,\ninput[type=\"range\"]::-moz-range-track {\n width: 100%;\n height: 2px;\n box-sizing: border-box;\n background: var(--button-dk-shadow);\n border-right: 1px solid var(--button-light);\n border-bottom: 1px solid var(--button-light);\n box-shadow: 1px 0 0 var(--button-hilight),\n 1px 1px 0 var(--button-hilight),\n 0 1px 0 var(--button-hilight),\n -1px 0 0 var(--button-shadow),\n -1px -1px 0 var(--button-shadow),\n 0 -1px 0 var(--button-shadow),\n -1px 1px 0 var(--button-hilight),\n 1px -1px var(--button-hilight);\n}\n\n.is-vertical {\n display: inline-block;\n width: 4px;\n height: 150px;\n transform: translateY(50%);\n}\n\n.is-vertical > input[type=\"range\"] {\n width: 150px;\n height: 4px;\n margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0 var(--range-spacing);\n transform-origin: left;\n transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));\n}\n\n.is-vertical > input[type=\"range\"]::-webkit-slider-runnable-track,\n.is-vertical > input[type=\"range\"]::-webkit-slider-runnable-track {\n border-left: 1px solid var(--button-light);\n border-right: 0;\n border-bottom: 1px solid var(--button-light);\n box-shadow: -1px 0 0 var(--button-hilight),\n -1px 1px 0 var(--button-hilight),\n 0 1px 0 var(--button-hilight),\n 1px 0 0 var(--button-shadow),\n 1px -1px 0 var(--button-shadow),\n 0 -1px 0 var(--button-shadow),\n 1px 1px 0 var(--button-hilight),\n -1px -1px var(--button-hilight);\n}\n\n.is-vertical > input[type=\"range\"]::-webkit-slider-thumb {\n transform: translateY(-8px) scaleX(-1);\n}\n\n.is-vertical > input[type=\"range\"].has-box-indicator::-webkit-slider-thumb {\n transform: translateY(-10px) scaleX(-1);\n}\n\n.is-vertical > input[type=\"range\"]::-moz-range-thumb {\n transform: translateY(2px) scaleX(-1);\n}\n\n.is-vertical > input[type=\"range\"].has-box-indicator::-moz-range-thumb {\n transform: translateY(0px) scaleX(-1);\n}\n\nselect:focus {\n color: var(--hilight-text);\n background-color: var(--hilight);\n}\n\nselect:focus option {\n color: var(--menu-text);\n background-color: var(--window);\n}\n\nselect:active {\n background-image: url(\"../images/./icon/button-down-active.svg\");\n}\n\na {\n color: var(--hot-tracking-color);\n}\n\na:focus {\n outline: 1px dotted var(--window-frame);\n}\n\nul.tree-view {\n display: block;\n background: var(--window);\n box-shadow: var(--border-field);\n padding: 6px;\n margin: 0;\n}\n\nul.tree-view li {\n list-style-type: none;\n}\n\nul.tree-view a {\n text-decoration: none;\n color: var(--window-text);\n}\n\nul.tree-view a:focus {\n background-color: var(--hilight);\n color: var(--hilight-text);\n}\n\nul.tree-view ul,\nul.tree-view li {\n margin-top: 3px;\n}\n\nul.tree-view ul {\n margin-left: 16px;\n padding-left: 16px;\n /* Goes down too far */\n border-left: 1px dotted var(--button-shadow);\n}\n\nul.tree-view ul > li {\n position: relative;\n}\n\nul.tree-view ul > li::before {\n content: \"\";\n display: block;\n position: absolute;\n left: -16px;\n top: 6px;\n width: 12px;\n border-bottom: 1px dotted var(--button-shadow);\n}\n\n/* Cover the bottom of the left dotted border */\nul.tree-view ul > li:last-child::after {\n content: \"\";\n display: block;\n position: absolute;\n left: -20px;\n top: 7px;\n bottom: 0;\n width: 8px;\n background: var(--window);\n}\n\nul.tree-view details {\n margin-top: 0;\n}\n\nul.tree-view details[open] summary {\n margin-bottom: 0;\n}\n\nul.tree-view ul details > summary:before {\n margin-left: -22px;\n position: relative;\n z-index: 1;\n}\n\nul.tree-view details > summary:before {\n text-align: center;\n display: block;\n float: left;\n content: \"+\";\n border: 1px solid var(--button-shadow);\n width: 8px;\n height: 9px;\n line-height: 8px;\n margin-right: 5px;\n padding-left: 1px;\n background-color: var(--window);\n}\n\nul.tree-view details[open] > summary:before {\n content: \"-\";\n}\n\nul.tree-view details > summary::marker,\nul.tree-view details > summary::-webkit-details-marker {\n content: \"\";\n}\n\npre {\n display: block;\n background: var(--window);\n box-shadow: var(--border-field);\n padding: 12px 8px;\n margin: 0;\n}\n\ncode,\ncode * {\n font-family: monospace;\n}\n\nsummary:focus {\n outline: 1px dotted var(--window-frame);\n}\n\n::-webkit-scrollbar {\n width: 16px;\n}\n\n::-webkit-scrollbar:horizontal {\n height: 17px;\n}\n\n::-webkit-scrollbar-corner {\n background: var(--button-face);\n}\n\n::-webkit-scrollbar-track {\n background-image: svg-load(\"./icon/scrollbar-background.svg\");\n}\n\n::-webkit-scrollbar-thumb {\n background-color: var(--button-face);\n box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n}\n\n::-webkit-scrollbar-button:horizontal:start:decrement,\n::-webkit-scrollbar-button:horizontal:end:increment,\n::-webkit-scrollbar-button:vertical:start:decrement,\n::-webkit-scrollbar-button:vertical:end:increment {\n display: block;\n}\n\n::-webkit-scrollbar-button:vertical:start {\n height: 17px;\n background-image: svg-load(\"./icon/button-up.svg\");\n}\n\n::-webkit-scrollbar-button:vertical:end {\n height: 17px;\n background-image: svg-load(\"./icon/button-down.svg\");\n}\n\n::-webkit-scrollbar-button:horizontal:start {\n width: 16px;\n background-image: svg-load(\"./icon/button-left.svg\");\n}\n\n::-webkit-scrollbar-button:horizontal:end {\n width: 16px;\n background-image: svg-load(\"./icon/button-right.svg\");\n}\n\n.window[role=tabpanel] {\n position: relative;\n z-index: 2;\n}\n\nmenu[role=tablist] {\n position: relative;\n margin: 0 0 -2px 0;\n text-indent: 0;\n list-style-type: none;\n display: flex;\n padding-left: 3px;\n}\n\nmenu[role=tablist] > li {\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n box-shadow: var(--border-tab);\n z-index: 1;\n}\n\nmenu[role=tablist] > li[aria-selected=true] {\n padding-bottom: 2px;\n margin-top: -2px;\n background-color: var(--button-face);\n position: relative;\n z-index: 8;\n margin-left: -3px;\n}\n\nmenu[role=tablist] > li > a {\n display: block;\n color: var(--window-text);\n margin: 6px;\n text-decoration: none;\n}\n\nmenu[role=tablist] > li[aria-selected=true] > a:focus {\n outline: none;\n}\n\nmenu[role=tablist] > li > a:focus {\n outline: 1px dotted var(--window-frame);\n}\n\nmenu[role=tablist].multirows > li {\n flex-grow: 1;\n text-align: center;\n}\n\n.sunken-panel {\n box-sizing: border-box;\n border: 2px groove transparent;\n border-image: svg-load(\"./icon/sunken-panel-border.svg\") 2;\n overflow: auto;\n background-color: var(--window);\n}\n\ntable {\n border-collapse: collapse;\n position: relative;\n text-align: left;\n white-space: nowrap;\n background-color: var(--window);\n}\n\ntable > thead > tr > * {\n position: sticky;\n top: 0;\n height: 17px;\n box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n background: var(--button-face);\n box-sizing: border-box;\n font-weight: normal;\n padding: 0 var(--grouped-element-spacing);\n}\n\ntable.interactive > tbody > tr {\n cursor: pointer;\n}\n\ntable > tbody > tr.highlighted {\n color: var(--hilight-text);\n background-color: var(--hilight);\n}\n\ntable > tbody > tr > * {\n padding: 0 var(--grouped-element-spacing);\n height: 14px;\n}\n\n.progress-indicator {\n height: 32px;\n position: relative;\n box-shadow: var(--border-sunken-inner);\n padding: 4px 4px;\n border: none;\n box-sizing: border-box;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: 0;\n}\n\n\n.progress-indicator > .progress-indicator-bar {\n height: 100%;\n display: block;\n background-color: var(--hilight);\n}\n\n.progress-indicator.segmented > .progress-indicator-bar {\n width: 100%;\n background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */\n background-image: linear-gradient(\n 90deg,\n var(--hilight) 0 16px,\n transparent 0 2px\n );\n background-repeat: repeat;\n background-size: 18px 100%;\n}\n\n.field-border {\n background: var(--button-hilight);\n box-shadow: var(--border-field);\n padding: 2px;\n}\n\n.field-border-disabled {\n background: var(--button-face);\n box-shadow: var(--border-field);\n padding: 2px;\n}\n\n.status-field-border {\n background: var(--button-face);\n box-shadow: var(--border-status-field);\n padding: 1px;\n}\n"]}
package/dist/docs.css ADDED
@@ -0,0 +1,152 @@
1
+ body {
2
+ margin: 0;
3
+ padding: 0;
4
+ background: #c0c0c0;
5
+ }
6
+
7
+ main {
8
+ width: 65rem;
9
+ margin-left: 240px;
10
+ margin-bottom: 60px;
11
+ }
12
+
13
+ aside {
14
+ width: 200px;
15
+ position: fixed;
16
+ top: 0;
17
+ bottom: 0;
18
+ padding: 8px;
19
+ display: flex;
20
+ align-items: stretch;
21
+ }
22
+
23
+ aside .tree-view {
24
+ width: 100%;
25
+ /* TODO: Move scrollbar into the recessed region? */
26
+ overflow-y: scroll;
27
+ }
28
+
29
+ h1 {
30
+ margin: 12px 0;
31
+ }
32
+
33
+ hr {
34
+ margin: 0;
35
+ border: none;
36
+ width: 400px;
37
+ height: 1px;
38
+ opacity: 0.5;
39
+ background: linear-gradient(
40
+ to right,
41
+ red 20%,
42
+ yellow 20%,
43
+ yellow 36%,
44
+ green 36%,
45
+ green 60%,
46
+ blue 60%,
47
+ blue 100%
48
+ );
49
+ }
50
+
51
+ h2 {
52
+ margin-bottom: 12px;
53
+ }
54
+
55
+ h3 {
56
+ font-size: 1.6rem;
57
+ }
58
+
59
+ h3,
60
+ h4 {
61
+ /* Swap the margin for a top-padding so linking to this section
62
+ results in a better scroll position */
63
+ padding-top: 20px;
64
+ margin-top: 0;
65
+ display: block;
66
+ flex: 0 0 180px;
67
+ }
68
+
69
+ p {
70
+ max-width: 50rem;
71
+ line-height: 1.5;
72
+ }
73
+
74
+ .component {
75
+ display: flex;
76
+ margin-top: 24px;
77
+ }
78
+
79
+ blockquote {
80
+ margin: 0 0 20px;
81
+ padding: 20px;
82
+ background: #dfdfdf;
83
+ }
84
+
85
+ blockquote footer {
86
+ margin: 12px 0 0 12px;
87
+ }
88
+
89
+ .example {
90
+ margin: 16px 0;
91
+ padding: 12px 24px;
92
+ border-left: 1px solid #808080;
93
+ }
94
+
95
+ details {
96
+ margin-top: 12px;
97
+ }
98
+
99
+ summary {
100
+ user-select: none;
101
+ cursor: pointer;
102
+ display: inline;
103
+ }
104
+
105
+ details[open] summary {
106
+ margin-bottom: 8px;
107
+ }
108
+
109
+ button.focused {
110
+ outline: 1px dotted #000000;
111
+ outline-offset: -4px;
112
+ }
113
+
114
+ button.active {
115
+ box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a,
116
+ inset -2px -2px #dfdfdf, inset 2px 2px #808080;
117
+ }
118
+
119
+ @media (max-width: 480px) {
120
+ aside {
121
+ display: none;
122
+ }
123
+
124
+ main {
125
+ box-sizing: border-box;
126
+ width: 100%;
127
+ margin: 0;
128
+ padding: 16px;
129
+ }
130
+
131
+ hr {
132
+ width: 100%;
133
+ }
134
+
135
+ p {
136
+ width: 100%;
137
+ }
138
+
139
+ h3,
140
+ h4 {
141
+ flex: 0;
142
+ }
143
+
144
+ .component {
145
+ display: block;
146
+ margin-top: 24px;
147
+ }
148
+
149
+ pre {
150
+ overflow-x: scroll;
151
+ }
152
+ }
package/dist/icon.png ADDED
Binary file