+
+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
+
+
+
+ 98.css
++
A design system for building faithful recreations of old UIs.
+ + + +Intro
++ 98.css is a CSS library for building interfaces that look like Windows 98. + See more on GitHub. +
+ +
+
+
+
+
+
+
+
+
+
+ Hello, world!
+
+ This library relies on the usage of semantic HTML. To make a button, you'll need
+ to use a <button>. Input elements require labels. Icon buttons rely on
+ aria-label. This page will guide you through that process, but accessibility is a primary
+ goal of this project.
+
+ You can override many of the styles of your elements while maintaining the appearance provided by + this library. Need more padding on your buttons? Go for it. Need to add some color to your input labels? + Be our guest. +
+ ++ This library does not contain any JavaScript, it merely styles your HTML with some CSS. + This means 98.css is compatible with your frontend framework of choice. +
+ ++ Here is an example of 98.css used with React, and + an example with vanilla JavaScript. The fastest way to use 98.css is to import it from unpkg. +
+ +<link
+ rel="stylesheet"
+ href="https://unpkg.com/98.css"
+>+ You can install 98.css from the GitHub releases page, or from npm. +
+npm install 98.cssComponents
+ +Button
+
+ I am being pressed`) %>
+
+ I am focused`) %>
+
+ + A command button, also referred to as a push button, is a control + that causes the application to perform some action when the user clicks it. + + ++ +
+ A standard button measures 75px wide and 23px tall, with a raised outer and inner border. + They are given 12px of horizontal padding by default. +
+ + <%- example(` + + `)%> + +
+ You can add the class default to any button to apply additional styling,
+ useful when communicating to the user what default action would happen in the active window if
+ the Enter key was pressed on Windows 98.
+
+ When buttons are clicked, the raised borders become sunken. + The following button is simulated to be in the pressed (active) state. +
+ + <% /* [[ ... ]] is used to render contents that + will not appear in the "Show code" section */ + %> + <%- example(`+ Disabled buttons maintain the same raised border, but have a "washed out" + appearance in their label. +
+ + <%- example(``) %> + ++ Button focus is communicated with a dotted border, set 4px within the contents of the button. + The following example is simulated to be focused. +
+ + <%- example(`Checkbox
+
+
+ + A check box represents an independent or non-exclusive choice. + ++ +
+ Checkboxes are represented with a sunken panel, populated with a "check" icon when + selected, next to a label indicating the choice. +
+ +
+ Note: You must include a corresponding label after
+ your checkbox, using the <label> element with a for attribute
+ pointed at the id of your input. This ensures the checkbox is easy to use with
+ assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key,
+ being able to click the entire label to select the box).
+
+ Checkboxes can be selected and disabled with the standard checked and disabled
+ attributes.
+
+ When grouping inputs, wrap each input in a container with the field-row class. This ensures
+ a consistent spacing between inputs.
+
+
+
+
+
+
+
+
+
+
+
+
+ `) %>
+ OptionButton
+
+
+ + An option button, also referred to as a radio button, represents a single + choice within a limited set of mutually exclusive choices. That is, the user can choose only + one set of options. + + ++ +
+ Option buttons can be used via the radio type on an input element.
+
+ Option buttons can be grouped by specifying a shared name attribute on each
+ input. Just as before: when grouping inputs, wrap each input in a container with the
+ field-row class to ensure a consistent spacing between inputs.
+
+
+
+
+
+
+
+
+ `) %>
+
+
+ Option buttons can also be checked and disabled with their corresponding
+ HTML attributes.
+
+
+
+
+
+
+
+
+
+
+
+
+ `) %>
+ GroupBox
+
+
+ + A group box is a special control you can use to organize a set of + controls. A group box is a rectangular frame with an optional label that surrounds + a set of controls. + + ++ +
+ A group box can be used by wrapping your elements with the fieldset tag.
+ It contains a sunken outer border and a raised inner border, resembling an engraved box
+ around your controls.
+
+ You can provide your group with a label by placing a legend element
+ within the fieldset.
+
TextBox
+
+
+
+
+ + A text box (also referred to as an edit control) is a + rectangular control where the user enters or edits text. It can + be defined to support a single line or multiple lines of text. + + ++ +
+ Text boxes can rendered by specifying a text type on an
+ input element. As with checkboxes and radio buttons, you
+ should provide a corresponding label with a properly set for
+ attribute, and wrap both in a container with the field-row class.
+
+
+
+
+ `) %>
+
+
+ Additionally, you can make use of the field-row-stacked class
+ to position your label above the input instead of beside it.
+
+
+
+
+
+
+
+
+ `) %>
+
+
+ To support multiple lines in the user's input, use the textarea
+ element instead.
+
+
+
+
+ `) %>
+
+ + Text boxes can also be disabled and have value with their corresponding HTML attributes. +
+ + <%- example(` +
+
+
+
+ `) %>
+ Slider
+
+
+ + A slider, sometimes called a trackbar control, consists of a bar that + defines the extent or range of the adjustment and an indicator that + shows the current value for the control... + + ++ +
+ Sliders can rendered by specifying a range type on an
+ input element.
+
+
+
+
+
+
+ `) %>
+
+
+ You can make use of the has-box-indicator class replace the
+ default indicator with a box indicator, furthermore the slider can be wrapped
+ with a div using is-vertical to display the input vertically.
+
+ Note: To change the length of a vertical slider, the input width
+ and div height.
+
+
+
+ `) %>
+
+
+
+ Dropdown
+
+
+ + A drop-down list box allows the selection of only a + single item from a list. In its closed state, the control displays + the current value for the control. The user opens the list to change + the value. + + ++ +
+ Dropdowns can be rendered by using the select and option
+ elements.
+
+ By default, the first option will be selected. You can change this by
+ giving one of your option elements the selected
+ attribute.
+
Window
++ The following components illustrate how to build complete windows using + 98.css. +
+ +Title Bar
+
+
+ + + +
+ + + `) %> + +
+ + + +
+ + + `) %> + +
+ + At the top edge of the window, inside its border, is the title bar + (also reffered to as the caption or caption bar), which extends across + the width of the window. The title bar identifies the contents of the + window. + + ++ +
+ Include command buttons associated with the common commands of the + primary window in the title bar. These buttons act as shortcuts to specific + window commands. + + ++ +
+ You can build a complete title bar by making use of three classes,
+ title-bar, title-bar-text, and title-bar-controls.
+
+ We make use of aria-label to render the Close button, to let
+ assistive technologies know the intent of this button. You may also use
+ "Minimize", "Maximize", "Restore" and "Help" like so:
+
+ + + +
+ + + `) %> + +
+ Each aria-label also has a corresponding styling class to render the title bar buttons,
+ to let the aria-label text be in other languages without causing rendering, accessibility, or localization issues.
+
+ + + +
+ + + `) %> + +
+ Maximize buttons can be disabled, useful when making a window appear as if it cannot be maximized. +
+ + <%- example(` + + `) %> + +
+ You can make a title bar "inactive" by adding inactive class,
+ useful when making more than one window.
+
Window contents
+
+
+ + Every window has a boundary that defines its shape. + + ++ +
+ To give our title bar a home, we make use of the window
+ class. This provides a raised outer and inner border, as well as some
+ padding. We can freely resize the window by specifying a width in the
+ container style.
+
+
+
+ `) %>
+
+
+ To draw the contents of the window, we use the window-body
+ class under the title bar.
+
+
+
+ `) %>
+
+
+ There's so much room for activities!
+Status Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+*/
+.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;
+}
diff --git a/packages/webapp/public/98.css/docs/window.png b/packages/webapp/public/98.css/docs/window.png
new file mode 100644
index 0000000..5862735
Binary files /dev/null and b/packages/webapp/public/98.css/docs/window.png differ
diff --git a/packages/webapp/public/98.css/docs/zoom.png b/packages/webapp/public/98.css/docs/zoom.png
new file mode 100644
index 0000000..a3bd3fa
Binary files /dev/null and b/packages/webapp/public/98.css/docs/zoom.png differ
diff --git a/packages/webapp/public/98.css/fonts/converted/ms_sans_serif.woff b/packages/webapp/public/98.css/fonts/converted/ms_sans_serif.woff
new file mode 100644
index 0000000..a8df7f1
Binary files /dev/null and b/packages/webapp/public/98.css/fonts/converted/ms_sans_serif.woff differ
diff --git a/packages/webapp/public/98.css/fonts/converted/ms_sans_serif.woff2 b/packages/webapp/public/98.css/fonts/converted/ms_sans_serif.woff2
new file mode 100644
index 0000000..83ea806
Binary files /dev/null and b/packages/webapp/public/98.css/fonts/converted/ms_sans_serif.woff2 differ
diff --git 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
new file mode 100644
index 0000000..44064b3
Binary files /dev/null and b/packages/webapp/public/98.css/fonts/converted/ms_sans_serif_bold.woff differ
diff --git 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
new file mode 100644
index 0000000..610c091
Binary files /dev/null and b/packages/webapp/public/98.css/fonts/converted/ms_sans_serif_bold.woff2 differ
diff --git a/packages/webapp/public/98.css/fonts/src/ms-sans-serif-bold/MS Sans Serif Bold.ttf b/packages/webapp/public/98.css/fonts/src/ms-sans-serif-bold/MS Sans Serif Bold.ttf
new file mode 100644
index 0000000..b91b8fa
Binary files /dev/null and b/packages/webapp/public/98.css/fonts/src/ms-sans-serif-bold/MS Sans Serif Bold.ttf differ
diff --git 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
new file mode 100644
index 0000000..9d25b93
--- /dev/null
+++ 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/).
diff --git 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
new file mode 100644
index 0000000..624cb66
--- /dev/null
+++ 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.
diff --git a/packages/webapp/public/98.css/fonts/src/ms-sans-serif/MS Sans Serif.ttf b/packages/webapp/public/98.css/fonts/src/ms-sans-serif/MS Sans Serif.ttf
new file mode 100644
index 0000000..fa521b2
Binary files /dev/null and b/packages/webapp/public/98.css/fonts/src/ms-sans-serif/MS Sans Serif.ttf differ
diff --git 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
new file mode 100644
index 0000000..fa4925d
--- /dev/null
+++ 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/).
diff --git 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
new file mode 100644
index 0000000..63472f4
--- /dev/null
+++ 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.
diff --git a/packages/webapp/public/98.css/icon/button-down-active.svg b/packages/webapp/public/98.css/icon/button-down-active.svg
new file mode 100644
index 0000000..0ef5732
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/button-down-active.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/webapp/public/98.css/icon/button-down.svg b/packages/webapp/public/98.css/icon/button-down.svg
new file mode 100644
index 0000000..2d0b52b
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/button-down.svg
@@ -0,0 +1,8 @@
+
diff --git a/packages/webapp/public/98.css/icon/button-left.svg b/packages/webapp/public/98.css/icon/button-left.svg
new file mode 100644
index 0000000..f31b886
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/button-left.svg
@@ -0,0 +1,8 @@
+
diff --git a/packages/webapp/public/98.css/icon/button-right.svg b/packages/webapp/public/98.css/icon/button-right.svg
new file mode 100644
index 0000000..ddab662
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/button-right.svg
@@ -0,0 +1,8 @@
+
diff --git a/packages/webapp/public/98.css/icon/button-up.svg b/packages/webapp/public/98.css/icon/button-up.svg
new file mode 100644
index 0000000..91f8d4f
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/button-up.svg
@@ -0,0 +1,8 @@
+
diff --git a/packages/webapp/public/98.css/icon/checkmark-disabled.svg b/packages/webapp/public/98.css/icon/checkmark-disabled.svg
new file mode 100644
index 0000000..ac065de
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/checkmark-disabled.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/webapp/public/98.css/icon/checkmark.svg b/packages/webapp/public/98.css/icon/checkmark.svg
new file mode 100644
index 0000000..6a3bbb4
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/checkmark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/webapp/public/98.css/icon/close.svg b/packages/webapp/public/98.css/icon/close.svg
new file mode 100644
index 0000000..419a57a
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/close.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/webapp/public/98.css/icon/groupbox-border.svg b/packages/webapp/public/98.css/icon/groupbox-border.svg
new file mode 100644
index 0000000..38a6221
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/groupbox-border.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/webapp/public/98.css/icon/help.svg b/packages/webapp/public/98.css/icon/help.svg
new file mode 100644
index 0000000..20a3fda
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/help.svg
@@ -0,0 +1,8 @@
+
diff --git a/packages/webapp/public/98.css/icon/indicator-horizontal.svg b/packages/webapp/public/98.css/icon/indicator-horizontal.svg
new file mode 100644
index 0000000..f6db8b0
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/indicator-horizontal.svg
@@ -0,0 +1,6 @@
+
diff --git a/packages/webapp/public/98.css/icon/indicator-rectangle-horizontal.svg b/packages/webapp/public/98.css/icon/indicator-rectangle-horizontal.svg
new file mode 100644
index 0000000..7d0d9b1
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/indicator-rectangle-horizontal.svg
@@ -0,0 +1,6 @@
+
diff --git a/packages/webapp/public/98.css/icon/maximize-disabled.svg b/packages/webapp/public/98.css/icon/maximize-disabled.svg
new file mode 100644
index 0000000..8a65ef5
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/maximize-disabled.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/webapp/public/98.css/icon/maximize.svg b/packages/webapp/public/98.css/icon/maximize.svg
new file mode 100644
index 0000000..e9d4982
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/maximize.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/webapp/public/98.css/icon/minimize.svg b/packages/webapp/public/98.css/icon/minimize.svg
new file mode 100644
index 0000000..a676778
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/minimize.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/webapp/public/98.css/icon/radio-border-disabled.svg b/packages/webapp/public/98.css/icon/radio-border-disabled.svg
new file mode 100644
index 0000000..fd003cd
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/radio-border-disabled.svg
@@ -0,0 +1,7 @@
+
diff --git a/packages/webapp/public/98.css/icon/radio-border.svg b/packages/webapp/public/98.css/icon/radio-border.svg
new file mode 100644
index 0000000..633be90
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/radio-border.svg
@@ -0,0 +1,8 @@
+
+
diff --git a/packages/webapp/public/98.css/icon/radio-dot-disabled.svg b/packages/webapp/public/98.css/icon/radio-dot-disabled.svg
new file mode 100644
index 0000000..7d59f52
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/radio-dot-disabled.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/webapp/public/98.css/icon/radio-dot.svg b/packages/webapp/public/98.css/icon/radio-dot.svg
new file mode 100644
index 0000000..61b884d
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/radio-dot.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/webapp/public/98.css/icon/restore.svg b/packages/webapp/public/98.css/icon/restore.svg
new file mode 100644
index 0000000..9d17f27
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/restore.svg
@@ -0,0 +1,10 @@
+
diff --git a/packages/webapp/public/98.css/icon/scrollbar-background.svg b/packages/webapp/public/98.css/icon/scrollbar-background.svg
new file mode 100644
index 0000000..3770071
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/scrollbar-background.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/webapp/public/98.css/icon/sunken-panel-border.svg b/packages/webapp/public/98.css/icon/sunken-panel-border.svg
new file mode 100644
index 0000000..1f09c91
--- /dev/null
+++ b/packages/webapp/public/98.css/icon/sunken-panel-border.svg
@@ -0,0 +1,10 @@
+
diff --git a/packages/webapp/public/98.css/now.json b/packages/webapp/public/98.css/now.json
new file mode 100644
index 0000000..ad0e88c
--- /dev/null
+++ b/packages/webapp/public/98.css/now.json
@@ -0,0 +1,4 @@
+{
+ "version": 2,
+ "public": true
+}
diff --git a/packages/webapp/public/98.css/package.json b/packages/webapp/public/98.css/package.json
new file mode 100644
index 0000000..1a4a01b
--- /dev/null
+++ 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 ",
+ "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"
+ }
+}
diff --git a/packages/webapp/public/98.css/server.js b/packages/webapp/public/98.css/server.js
new file mode 100644
index 0000000..13edc80
--- /dev/null
+++ 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" });
diff --git a/packages/webapp/public/98.css/style.css b/packages/webapp/public/98.css/style.css
new file mode 100644
index 0000000..8c74873
--- /dev/null
+++ b/packages/webapp/public/98.css/style.css
@@ -0,0 +1,994 @@
+/**
+ * 98.css
+ * Copyright (c) 2020 Jordan Scales
+ * 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;
+}
diff --git a/packages/webapp/src/routes/__root.tsx b/packages/webapp/src/routes/__root.tsx
index b53751f..7b6ad40 100644
--- a/packages/webapp/src/routes/__root.tsx
+++ b/packages/webapp/src/routes/__root.tsx
@@ -3,6 +3,7 @@ import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
import { useTranslation } from "react-i18next"
import { DiGit } from "react-icons/di"
import { FaCode } from "react-icons/fa"
+import root from "react-shadow"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
@@ -16,6 +17,24 @@ function RootComponent() {
const { t, i18n } = useTranslation()
return <>
+
+
+
+
+
+ A status bar is a special area within a window, typically the bottom, that displays information + about the current state of what is being viewed in the window or any other contextual information, such as keyboard + state. + + ++ +
+ You can render a status bar with the status-bar class,
+ and status-bar-field for every child text element.
+
+
+
+ `) %>
+
+
+
+
+
+
+
+ There are just so many possibilities:
+-
+
- A Task Manager +
- A Notepad +
- Or even a File Explorer! +
TreeView
+
+
+ + A tree view control is a special list box control + that displays a set of objects as an indented outline based + on their logical hierarchical relationship. + + ++ +
+ To render a tree view, use an ul element with the
+ tree-view class. The children of this list (li
+ elements), can contain whatever you'd like.
+
-
+
- We can put +
- ✨ Whatever ✨ +
- We want in here +
+ To make this a tree, we can nest further ul elements
+ (no class needed on these). This will provide them with a nice dotted
+ border and indentation to illustrate the structure of the tree.
+
+ To create expandable sections, wrap child lists inside of
+ details elements.
+
-
+
- Table of Contents +
- What is web development? +
-
+ CSS
+
-
+
- Selectors +
- Specificity +
- Properties +
+ -
+ ++
JavaScript
+-
+
- Avoid at all costs +
-
+ ++
Unless
+-
+
- Avoid +
-
+ ++
At
+-
+
- Avoid +
- At +
- All +
- Cost +
+ - All +
- Cost +
+
+ - HTML +
- Special Thanks +
Tabs
+
+
+ + A tab control is analogous to a divider in a file cabinet or notebook. + You can use this control to define multiple logical pages or sections of information within the same window. + + ++ +
+ To render a tab list, use a menu element with the
+ [role=tablist] attribute. The children of this menu (li
+ elements), should get a [role=tab] attribute.
+
+ Tabs should be managed by adding custom javascript code.
+ All you need is to add the [aria-selected=true] attribute to the active tab.
+
+
+ `) %>
+
+ Hello, world!
+ + +
+
+
+
+ the tab content
+
+ To create multirows tabs, add a multirows
+ class to the menu tag.
+
+
+ `) %>
+ Hello, world!
+ + + +
+
+
+
+ the tab content
+TableView
+
+
+
+ To render a table view, use a table element. Wrap it with a div element with sunken-panel class to provide proper border and overflow container.
+
+ With a bit of extra scripting you can make table view interactive. Give interactive class to
+ table element to show pointer cursor when hovering over body rows. Table rows can be given
+ highlighted class to appear selected.
+
+
+
+
+
+
+ `) %>
+ | Name | +Version | +Company | +
|---|---|---|
| MySQL ODBC 3.51 Driver | +3.51.11.00 | +MySQL AB | +
| SQL Server | +3.70.06.23 | +Microsoft Corporation | +
| SQL Server | +3.70.06.23 | +Microsoft Corporation | +
| SQL Server | +3.70.06.23 | +Microsoft Corporation | +
| SQL Server | +3.70.06.23 | +Microsoft Corporation | +
| SQL Server | +3.70.06.23 | +Microsoft Corporation | +
| SQL Server | +3.70.06.23 | +Microsoft Corporation | +
| SQL Server | +3.70.06.23 | +Microsoft Corporation | +
| SQL Server | +3.70.06.23 | +Microsoft Corporation | +
| SQL Server | +3.70.06.23 | +Microsoft Corporation | +
Progress Indicator
+
+
+ + You can use a progress indicator, also known as a progress bar control, to show the percentage of completion of a lengthy operation. + + ++ +
+ There are two types of progress bars: solid and segmented. The solid version is the default. To declare a segmented bar, you should use the segmented class.
+
+
+
+ `) %>
+
+ <%- example(`
+
+
+
+ `) %>
+ Field borders
+
+
+ + Text boxes, check boxes, drop-down list boxes, spin boxes and list + boxes use the field border style. You can also use the style + for define the work area within a window. It uses the sunken outer and + sunken inner basic border styles. + + For most controls, the interior of the field uses the button highlight + color. For text fields, such as text boxes and combo boxes, the + interior uses the button face color when the field is read-only or + disabled. + + ++ +
+ Status fields use the status field border style. This style + uses only the sunken outer basic border style. You use the status + field style in status bars and other read-only fields where the + content of the file can change dynamically. + + ++ + As mentioned in these guidelines, these styles are used in other + contexts than just form elements and status fields such as to indicate + work areas and dynamic content. For that reason, we provide three + classes for these generic usages,
field-border,
+ field-border-disabled, and
+ status-field-border. These classes only define the border
+ and background color and minimal padding, so you will typically need to
+ at least provide some extra padding yourself.
+
+ <%- example(`
+
+ Work area
+
+ `) %>
+
+
+ <%- example(`
+
+ Disabled work area
+
+ `) %>
+
+ <%- example(`
+
+ Dynamic content
+
+ `) %>
+ Issues, Contributing, etc.
+ ++ 98.css is MIT licensed. +
+ ++ Refer to the GitHub issues page 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 and maybe + subscribing to more fun things on my twitter. 👋 +
+ + + diff --git a/packages/webapp/public/98.css/docs/vs.css b/packages/webapp/public/98.css/docs/vs.css new file mode 100644 index 0000000..6703b64 --- /dev/null +++ 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
+
+
+
+ A Window With Stuff In It
+
+
+
+
+
+
+
+ There's so much room for activities!
+