From 4674ef949fae33b269407d243d5aef1fd5b8f02b Mon Sep 17 00:00:00 2001 From: Frankie Robertson Date: Wed, 7 Aug 2024 14:02:06 +0300 Subject: [PATCH 1/9] Add classes for generic usages of (status) field borders --- docs/index.html.ejs | 61 +++++++++++++++++++++++++++++++++++++++++++++ style.css | 21 +++++++++++++++- 2 files changed, 81 insertions(+), 1 deletion(-) diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 088064a..e17934b 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -44,6 +44,7 @@
  • Tabs
  • TableView
  • Progress Indicator
    • +
  • Field borders
  • Issues, Contributing, etc.
    • @@ -1073,6 +1074,66 @@ +
    +

    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. + +
    + — Microsoft Windows User Experience p. 421 +
    +
    + +
    + 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. + +
    + — Microsoft Windows User Experience p. 422 +
    +
    + + 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.

    diff --git a/style.css b/style.css index 5abea5a..ff82a09 100644 --- a/style.css +++ b/style.css @@ -73,6 +73,7 @@ --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), @@ -320,7 +321,7 @@ input[type="reset"]:disabled, } .status-bar-field { - box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080; + box-shadow: var(--border-status-field); flex-grow: 1; padding: 2px 3px; margin: 0; @@ -966,3 +967,21 @@ table > tbody > tr > * { 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; +} From c28706f2650c6188321a72ea87882037a897017d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=A1=A5=E1=A0=A0=E1=A1=B3=E1=A1=A4=E1=A1=B3=E1=A0=B6?= =?UTF-8?q?=E1=A0=A0=20=E1=A1=A5=E1=A0=A0=E1=A0=AF=E1=A0=A0=C2=B7=E1=A0=A8?= =?UTF-8?q?=E1=A1=9D=E1=A1=B4=E1=A0=A3=20=E7=8C=AB?= Date: Fri, 13 Sep 2024 12:21:57 +0800 Subject: [PATCH 2/9] Add support for input type url --- style.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/style.css b/style.css index 5abea5a..3ce8602 100644 --- a/style.css +++ b/style.css @@ -474,6 +474,7 @@ input[type="checkbox"][disabled]:checked + label::after { input[type="text"], input[type="password"], input[type="email"], +input[type="url"], input[type="tel"], input[type="number"], input[type="search"], @@ -493,6 +494,7 @@ textarea { input[type="text"], input[type="password"], input[type="email"], +input[type="url"], input[type="tel"], input[type="search"], select { @@ -514,6 +516,7 @@ 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"] { @@ -522,12 +525,14 @@ input[type="search"] { } 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, @@ -553,6 +558,7 @@ 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, From d5e607a73c46c9f640d7fa38f179b1e6f1f09aa7 Mon Sep 17 00:00:00 2001 From: henrik2000 <167223091+henrik2000@users.noreply.github.com> Date: Wed, 6 Nov 2024 08:42:44 +0100 Subject: [PATCH 3/9] Disable text selection on form labels When double-clicking on a form label it currently gets a text selection which can be confusing. This is not the Windows 98 behaviour. Fixed with this change. --- style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/style.css b/style.css index 5abea5a..74eabdd 100644 --- a/style.css +++ b/style.css @@ -366,6 +366,7 @@ legend { label { display: inline-flex; align-items: center; + user-select: none; } input[type="radio"], From 82ba586bc392811d4a7a07de76e8b58341da1c14 Mon Sep 17 00:00:00 2001 From: Jordan Scales Date: Wed, 6 Nov 2024 08:40:34 -0500 Subject: [PATCH 4/9] Remove username/password from docs Password managers do weird things for these :( --- docs/index.html.ejs | 28 ---------------------------- 1 file changed, 28 deletions(-) diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 088064a..ccc007b 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -413,34 +413,6 @@ `) %> - -

    - Other types of HTML5 text inputs are also supported. -

    - - <%- example(` -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    - `) %> - From 517d174b30392d39e068ef4eca457da66a189f8f Mon Sep 17 00:00:00 2001 From: Jordan Scales Date: Mon, 28 Apr 2025 17:58:50 -0400 Subject: [PATCH 5/9] bump to 0.1.21 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 148f9f8..1a4a01b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "98.css", - "version": "0.1.20", + "version": "0.1.21", "description": "A design system for building faithful recreations of old UIs", "main": "dist/98.css", "directories": { From e8302a52ba910497bf36509e84fa30d42adfc968 Mon Sep 17 00:00:00 2001 From: Jordan Scales Date: Sun, 7 Sep 2025 09:28:04 -0400 Subject: [PATCH 6/9] I don't use twitter anymore --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3fa4de2..ec194b8 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,7 @@ You can run a build manually with `npm run build`. This will write to the `dist/ Refer to [the GitHub issues page](https://github.com/jdan/98.css/issues) to see bugs in my CSS or report new ones. I'd really like to see your pull requests (especially those new to open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like to make it a fun place to build your open-source muscle. -Thank you for checking my little project out, I hope it brought you some joy today. Consider [starring/following along on GitHub](https://github.com/jdan/98.css/stargazers) and maybe subscribing to more fun things on [my twitter](https://twitter.com/jdan). 👋 +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). 👋 ### Publishing From 7240fe4bcc484602dffac658f0dc25b2d03cf95c Mon Sep 17 00:00:00 2001 From: Jordan Scales Date: Sun, 7 Sep 2025 09:34:38 -0400 Subject: [PATCH 7/9] add heights to github badges so the screen doesn't jank --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ec194b8..8aaac9a 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ ## 98.css -[![npm](https://98badges.now.sh/api/version)](http://npm.im/98.css) -[![gzip size](https://98badges.now.sh/api/size)](https://unpkg.com/98.css) +npm +gzip size A design system for building faithful recreations of old UIs. From b1d7a907371bbe523d6f64e3af97f714fdbd6d6a Mon Sep 17 00:00:00 2001 From: Jordan Scales Date: Sun, 7 Sep 2025 09:40:26 -0400 Subject: [PATCH 8/9] make badges in docs/ 29px tall so the screen doesn't jank --- docs/index.html.ejs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 442af08..be5a9a8 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -58,10 +58,10 @@

    - npm + npm - gzip size + gzip size

    @@ -147,8 +147,8 @@ `)%>

    - 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 + 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.

    From 592eb87c9eb1fe0812cac722434415789da457fd Mon Sep 17 00:00:00 2001 From: Errilaz Date: Wed, 13 May 2026 01:29:09 +0200 Subject: [PATCH 9/9] feat: .button --- .github/workflows/npm-publish.yml | 23 ----------------------- package-lock.json | 4 ++-- style.css | 28 ++++++++++++++++++---------- 3 files changed, 20 insertions(+), 35 deletions(-) delete mode 100644 .github/workflows/npm-publish.yml diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml deleted file mode 100644 index 17a83f5..0000000 --- a/.github/workflows/npm-publish.yml +++ /dev/null @@ -1,23 +0,0 @@ -# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created -# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages - -name: Publish to NPM - -on: - workflow_dispatch: - release: - types: [published] - -jobs: - publish-npm: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - registry-url: https://registry.npmjs.org/ - - run: npm ci - - run: npm run release - env: - NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} diff --git a/package-lock.json b/package-lock.json index 97cc4ab..ea55b69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "98.css", - "version": "0.1.20", + "version": "0.1.21", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "98.css", - "version": "0.1.20", + "version": "0.1.21", "license": "MIT", "devDependencies": { "chokidar": "^3.3.1", diff --git a/style.css b/style.css index 8c74873..606d933 100644 --- a/style.css +++ b/style.css @@ -105,6 +105,7 @@ body { } button, +.button, label, input, legend, @@ -143,6 +144,7 @@ u { } button, +.button, input[type="submit"], input[type="reset"] { box-sizing: border-box; @@ -159,6 +161,7 @@ input[type="reset"] { } button.default, +.button.default, input[type="submit"].default, input[type="reset"].default { box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner); @@ -172,27 +175,30 @@ input[type="reset"].default { } button:not(:disabled):active, +button:not(:disabled).active, +.button:not(:disabled):active, +.button:not(:disabled).active, input[type="submit"]:not(:disabled):active, -input[type="reset"]:not(:disabled):active { +input[type="submit"]:not(:disabled).active, +input[type="reset"]: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, +.button.default:not(:disabled):active, input[type="submit"].default:not(:disabled):active, -input[type="reset"].default:not(:disabled):active { +input[type="reset"].default:not(:disabled):active, +button.default:not(:disabled).active, +.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, +.button:focus, input[type="submit"]:focus, input[type="reset"]:focus { outline: 1px dotted #000000; @@ -200,6 +206,7 @@ input[type="reset"]:focus { } button::-moz-focus-inner, +.button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { border: 0; @@ -213,6 +220,7 @@ input[readonly] + label { } button:disabled, +.button:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, :disabled + label {