davejansen/system.css
1
0
Fork 0
mirror of https://github.com/sakofchit/system.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

first

Browse Source
This commit is contained in:
sakofchit
2022-08-05 16:14:02 -04:00
commit 6934e67217
35 changed files with 5199 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

18
.editorconfig Normal file
View File

@@ -0,0 +1,18 @@
# https://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 80
trim_trailing_whitespace = true
[*.md]
max_line_length = 0
trim_trailing_whitespace = false
[COMMIT_EDITMSG]
max_line_length = 0

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
node_modules/
dist/

1
.npmignore Normal file
View File

@@ -0,0 +1 @@
node_modules/

21
LICENSE Normal file
View File

@@ -0,0 +1,21 @@
Copyright (c) 2022 Sakun Acharige
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

3
README.md Normal file
View File

@@ -0,0 +1,3 @@
## System.css
hi

81
build.js Normal file
View File

@@ -0,0 +1,81 @@
#!/usr/bin/env node
const dedent = require("dedent");
const ejs = require("ejs");
const fs = require("fs");
const glob = require("glob");
const hljs = require("highlight.js");
const mkdirp = require("mkdirp");
const path = require("path");
const postcss = require("postcss");
const { homepage, version } = require("./package.json");
function buildCSS() {
const input =
`/*! system.css v${version} - ${homepage} */\n` + fs.readFileSync("style.css");
return postcss()
.use(require("postcss-inline-svg"))
.use(require("postcss-css-variables"))
.use(require("postcss-calc"))
.use(require("postcss-copy")({ dest: "dist", template: "[name].[ext]" }))
.use(require("cssnano"))
.process(input, {
from: "style.css",
to: "dist/system.css",
map: { inline: false },
})
.then((result) => {
mkdirp.sync("dist");
fs.writeFileSync("dist/system.css", result.css);
fs.writeFileSync("dist/system.css.map", result.map.toString());
});
}
function buildDocs() {
let id = 0;
function getNewId() {
return ++id;
}
function getCurrentId() {
return id;
}
const template = fs.readFileSync("docs/index.html.ejs", "utf-8");
function example(code) {
const magicBrackets = /\[\[(.*)\]\]/g;
const dedented = dedent(code);
const inline = dedented.replace(magicBrackets, "$1");
const escaped = hljs.highlight("html", dedented.replace(magicBrackets, ""))
.value;
return `<div class="example">
${inline}
<details>
<summary>Show code</summary>
<pre><code>${escaped}</code></pre>
</details>
</div>`;
}
glob("docs/*", (err, files) => {
if (!err) {
files.forEach((srcFile) =>
fs.copyFileSync(srcFile, path.join("dist", path.basename(srcFile)))
);
} else throw "error globbing dist directory.";
});
fs.writeFileSync(
path.join(__dirname, "/dist/index.html"),
ejs.render(template, { getNewId, getCurrentId, example })
);
}
function build() {
buildCSS()
.then(buildDocs)
.catch((err) => console.log(err));
}
module.exports = build;
build();

119
docs/docs.css Normal file
View File

@@ -0,0 +1,119 @@
@font-face {
font-family: Geneva9;
src: url("fonts/converted/FindersKeepers.ttf")
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
main {
width: 95rem;
margin-left: 240px;
margin-bottom: 60px;
margin-top: 25px;
}
.container{
width: 80%;
}
aside {
width: 200px;
position: fixed;
top: 0;
bottom: 0;
padding: 8px;
display: flex;
align-items: stretch;
}
html {
font-family: "Inconsolata", Menlo, Chicago, Geneva;
font-size: 18px;
letter-spacing: -0.025em;
min-height: 100vh;
}
h3 {
font-family: Chicago;
font-size: 1.5em;
}
.heading {
font-size: 3rem;
}
.desc {
font-family: Geneva_9;
font-size: 2em;
}
.center {
text-align: center;
}
.component {
display: flex;
margin-top: 24px;
font-family: Geneva;
font-size: 1em;
}
.dialog-text {
font-family: Chicago_12;
font-size: 1.5em;
margin-top: 30px;
vertical-align: center;
}
p {
font-family: Geneva;
font-size: 0.9em;
}
blockquote {
margin: 0 0 20px;
padding: 20px;
width: 80%;
background: rgb(250, 250, 250);
font-size: 16px;
}
blockquote footer {
margin: 12px 0 0 12px;
}
.example {
margin: 16px;
padding: 12px 24px;
border-left: 1px solid #000000;
}
summary {
font-size: 14px;
padding-top: 10px;
}
pre {
font-size: 13px;
}
.btn.active {
background: black;
border-radius:6px;
color: white;
font-family: Chicago_12;
}

BIN
docs/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

498
docs/index.html.ejs Normal file
View File

@@ -0,0 +1,498 @@
<!doctype html>
<html>
<head>
<title>system.css | A design system for building retro Apple-inspired interfaces</title>
<link rel="Shortcut Icon" type="image/x-icon" href="icon.png" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="system.css" />
<meta name="Description" content="A design system for building retro Apple interfaces" />
<meta property="og:description" content="A design system for building retro Apple interfaces" />
<link rel="stylesheet" href="system.css">
<link rel="stylesheet" href="docs.css">
</head>
<body ontouchstart>
<aside>
<div class="window">
<div class="title-bar">
<button class="close"><span class="hidden">Close</span></button>
<h1 class="title">Docs</h1>
<button class="resize"><span class="hidden">Resize</span></button>
</div>
<div class="separator"></div>
<div class="window-pane">
<ul class="files">
<li>Intro</li>
<li>Buttons</li>
<li>Windows</li>
<li>Typography</li>
<li>Contributing</li>
</ul>
</div>
</div>
</aside>
<main>
<div class="container">
<div class="standard-dialog">
<p class="heading center">System.css</p>
<p class="desc center">A design system for building retro <img class="apple"> inspired interfaces</p>
<h2 class="subheading">Intro</h2>
<p>System.css is a CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.</p>
<p>Fortunately, this library does not use any JavaScript and is compatible with any front-end framework of your choice. Most styles can also be overwritten to allow for deeper customization.</p>
<h3 class="subheading">Usage</h3>
<h2 class="subheading">Components</h2>
<section class="component">
<h3 class="subheading" id="buttons">Buttons</h3>
<div style="padding-left: 20px;">
<blockquote>
A button is a rounded rectangle that is named with text. Clicking a button performs the action described by the button's name.
<footer>&mdash; Apple HI Guidelines, p. 204</footer>
</blockquote>
<p>A standard button measures 59px wide and 20px tall. We use the <code>btn</code> class for these buttons</p>
<%- example(`
<button class="btn">Cancel</button>
<button class="btn">Submit</button>
`)%>
<p>When pressed, buttons invert. The button below is stimulated to be in the active state.</p>
<%- example(`
<button [[class="btn active"]] class="btn">Active</button>
`)%>
<p>Buttons can also have dynamic widths.</p>
<%- example(`
<button class="btn">Buttons can be long!!</button>
`)%>
<p>Disabled buttons look the same as standard buttons, but with grey button text. Add the <code>disabled</code> attribute to use it.</p>
<%- example(`
<button class="btn" disabled>Disabled</button>
`)%>
<!--<p>Default buttons have an extra border around them. Add the <code>disabled</code> attribute to use it.</p>
<div class="example">
<span class="default">
<button [[ class="btn"]]>Default</button>
</span>
</div> -->
</div>
</section>
<section class="component">
<h3 class="subheading" id="textbox">Radio Buttons</h3>
<div style="padding-left: 20px;">
<blockquote>
A radio button is a Macintosh control that displays a setting, either on or off, and is part of a group in which only one button can be on at a time.
<footer>&mdash; Apple HI Guidelines, p. 210</footer>
</blockquote>
<p>Radio Buttons can be rendered by specifying a <code>radio</code> type on an <code>input</code> tag and assigning it a name.</p>
<%- example(`
<div class="field-row">
<input id="radio1" type="radio" name="first-example">
<label for="radio1">Left</label>
</div>
<div class="field-row">
<input id="radio2" type="radio" name="first-example">
<label for="radio2">Center</label>
</div>
<div class="field-row">
<input id="radio3" type="radio" name="first-example">
<label for="radio3">Right</label>
</div>
`)%>
</div>
</section>
<section class="component">
<h3 class="subheading" id="dialogs">Dialogs</h3>
<div style="padding-left: 20px;">
<blockquote>
Dialog boxes are windows that provide a standard framework in which the
computer can present alternatives from which the user can choose.
<footer>&mdash; Apple HI Guidelines, p. 176</footer>
</blockquote>
<p>
A basic dialog is just a box with text in it.
</p>
<%- example(`
<div class="standard-dialog center">
<p class="dialog-text">The Macintosh Finder, Version 1.0 (18 Jan 84)</p>
<p class="dialog-text">&copy; 1984 Apple Computer</p>
</div>
`)%>
<p>
We can also have a bordered dialog, which typically has some interactive component within it.
</p>
<%- example(`
<div class="outer-border">
<div class="inner-border center">
<p class="dialog-text">The Macintosh Finder, Version 1.0 (18 Jan 84)</p>
<p class="dialog-text">&copy; 1984 Apple Computer</p>
</div>
</div>
`)%>
<blockquote>
Alert boxes appear when the system software or an application needs to
communicate information to the user. Alert boxes provide messages about
error conditions and warn users about potentially hazardous situations or
actions
<footer>&mdash; Apple HI Guidelines, p. 176</footer>
</blockquote>
</div>
</section>
<section class="component">
<h3 class="subheading" id="dropdown">Dropdown</h3>
<div style="padding-left: 20px;">
<blockquote>
A dropdown is a menu that offers a list of options.
</blockquote>
<p>Apply the <code>dd-toggle</code> class to what you want to serve as a dropdown</p>
<%- example(`
<label class="dropdown">
<div class="dd-toggle">
File
</div>
<input type="checkbox" class="dd-input" id="test">
<ul class="dd-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>
<a href="https://twitter.com/sakofchit">sakun's twitter</a>
</li>
</ul>
</label>
<label class="dropdown">
<div class="dd-toggle">
Edit
</div>
<input type="checkbox" class="dd-input" id="test">
<ul class="dd-menu">
<li>Woah</li>
<li class="divider"></li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>
<a href="https://sakun.co">sakun's projects</a>
</li>
</ul>
</label>
<label class="dropdown">
<div class="dd-toggle">
View
</div>
<input type="checkbox" class="dd-input" id="test">
<ul class="dd-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>
<a href="https://apple.com">Apple</a>
</li>
</ul>
</label>
<label class="dropdown">
<div class="dd-toggle">
Special
</div>
<input type="checkbox" class="dd-input" id="test">
<ul class="dd-menu">
<li>You probably</li>
<li>Get the</li>
<li class="divider"></li>
<li>Idea</li>
</ul>
</label>
`)%>
</div>
</section>
<section class="component">
<h3 class="subheading" id="textbox">Text Box</h3>
<div style="padding-left: 20px;">
<blockquote>
The place or places in a dialog box where information can be typed. Also called text entry field.
<footer>&mdash; Apple HI Guidelines, p. 372</footer>
</blockquote>
<p>Text Boxes can be rendered by specifying a <code>text</code> type on an <code>input</code> tag</p>
<%- example(`
<input type="text" placeholder="some cool text"/>
`)%>
<p>Other types of text are also supported</p>
<%- example(`
<form>
<label for="email">Email</label><br>
<input type="email" placeholder="panic@thedis.co"/><br>
<label for="password">Password</label><br>
<input type="password" placeholder="password"/><br><br>
</form>
`)%>
</div>
</section>
<section class="component">
<h2 class="subheading" id="windows">Windows</h2>
<div style="padding-left: 20px;">
<blockquote>
Standard document windows have standard structural components.
These components include the title bar, size box, close box, zoom box,
and scroll bars. Windows are designed for visual consistency across all monitors
<footer>&mdash; Apple HI Guidelines, p. 134, 159</footer>
</blockquote>
</div>
</section>
<section class="component">
<h3 class="subheading" id="title-bar">Title Bar</h3>
<div style="padding-left: 20px;">
<blockquote>
A standard title bar is at least 19px tall, has a close button, caption, and racing stripes.
</blockquote>
<p>They're usually a part of a window. Title bars use the Chicago 12pt font.</p>
<%- example(`
<div class="window">
<div class="title-bar">
<button class="close"></button>
<h1 class="title">A Title Bar</h1>
<button class="hidden"></button>
</div>
</div>
`)%>
<p>Title bars can look different depending on what they're intended for.</p>
<%- example(`
<div class="window">
<div class="title-bar">
<button class="close"></button>
<h1 class="title">Also a Title Bar</h1>
<button class="resize"></button>
</div>
</div>
<div class="window">
<div class="title-bar">
<h1 class="title">Dialog Title</h1>
</div>
</div>
`)%>
<p>You can also set a title bar to be inactive by applying the <code>.inactive-title-bar</code> class</p>
<%- example(`
<div class="window">
<div class="inactive-title-bar">
<h1 class="title">Inactive Title Bar</h1>
</div>
</div>
`)%>
</div>
</section>
<section class="component">
<h3 class="subheading" id="title-bar">Window Contents</h3>
<div style="padding-left: 20px;">
<blockquote>
Document windows present a view into the content that people create and store.
<footer>&mdash; Apple HI Guidelines, p. 134</footer>
</blockquote>
<p>This is a window (without stuff in it)</p>
<%- example(`
<div class="window">
<div class="title-bar">
<button class="close"></button>
<h1 class="title">Window Without Stuff</h1>
<button class="resize"></button>
</div>
</div>
`)%>
<p>This is a window with stuff in it. We can achieve this by simply adding a div with the <code>.window-pane</code> below the title bar.</p>
<%- example(`
<div class="window">
<div class="title-bar">
<button class="close"></button>
<h1 class="title">Window With Stuff</h1>
<button class="resize"></button>
</div>
<div class="separator"></div>
<div class="window-pane">
Woo I got stuff in me!
</div>
</div>
`)%>
<p>You can also add a details bar to a window by adding<code>.details__bar</code> below the title bar.</p>
<%- example(`
<div class="window">
<div class="title-bar">
<button class="close"></button>
<h1 class="title">Window With Details</h1>
<button class="resize"></button>
</div>
<div class="details__bar">
<span>some</span>
<span>more</span>
<span>details</span>
</div>
<div class="window-pane">
Woo I got a details bar.
</div>
</div>
`)%>
<p>You can also create an inactive window using an inactive title bar.</p>
<%- example(`
<div class="window">
<div class="inactive-title-bar">
<h1 class="title">Inactive Window</h1>
</div>
<div class="details__bar">
<span>some</span>
<span>more</span>
<span>details</span>
</div>
<div class="window-pane">
not active :(
</div>
</div>
`)%>
</div>
</section>
<h2 class="subheading">Contributing, Credits, etc.</h2>
<section class="component">
<div>
<p>Thanks for checking this project out! This library was made in good fun and was largely inspired by <a href="https://github.com/jdan/98.css">98.css</a>.</p>
<p>It's also still in beta! I recreated components based on Apple's Human Interface Guidelines. However, there's still a pretty good chance that I've might've missed/overlooked something essential. I've also had to recreate most of the assets, which can also be found here.</p>
<p>If you find a bug, consider opening an issue here. If there's something that you'd like to add, please feel free to create a PR!</p>
<p>If you'd like to see what else I'm up to, consider following me on <a href="https://twitter.com/sakofchit">Twitter</a> or checking out my <a href="https://sakun.co">personal site</a> :)</p>
</div>
</section>
</div>
</div>
</main>
</body>
</html>

BIN
fonts/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
fonts/converted/ChiKareGo2.ttf Normal file
View File

Binary file not shown.

BIN
fonts/converted/ChicagoFLF.ttf Normal file
View File

Binary file not shown.

BIN
fonts/converted/FindersKeepers.ttf Normal file
View File

Binary file not shown.

BIN
fonts/converted/monaco.ttf Normal file
View File

Binary file not shown.

BIN
icon/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
icon/apple.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 380 B

19
icon/apple.svg Normal file
View File

@@ -0,0 +1,19 @@
<svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="9.6087" y="0.26088" width="3.69565" height="0.73913" fill="black"/>
<rect x="9.6087" y="1" width="2.21739" height="0.73913" fill="black"/>
<rect x="9.6087" y="1" width="2.21739" height="2.95652" fill="black"/>
<rect x="2.21741" y="5.43478" width="5.91304" height="1.47826" fill="black"/>
<rect width="5.91304" height="0.73913" transform="matrix(1 0 0 -1 2.21741 7.65218)" fill="black"/>
<rect width="5.17391" height="0.73913" transform="matrix(1 0 0 -1 9.6087 7.65218)" fill="black"/>
<rect x="9.6087" y="5.43478" width="5.17391" height="1.47826" fill="black"/>
<rect width="7.3913" height="0.73913" transform="matrix(1 0 0 -1 9.6087 9.13043)" fill="black"/>
<rect width="6.65217" height="0.73913" transform="matrix(1 0 0 -1 9.6087 8.39131)" fill="black"/>
<rect x="1.47827" y="7.65218" width="11.087" height="9.6087" fill="black"/>
<rect x="1.47827" y="13.5652" width="15.5217" height="3.69565" fill="black"/>
<rect x="2.21741" y="14.3044" width="13.3043" height="5.17391" fill="black"/>
<rect x="4.43481" y="19.4783" width="3.69565" height="1.47826" fill="black"/>
<rect x="9.6087" y="19.4783" width="3.69565" height="1.47826" fill="black"/>
<rect x="8.13043" y="1.73914" width="1.47826" height="3.69565" fill="black"/>
<rect x="0.739136" y="7.65218" width="1.47826" height="9.6087" fill="black"/>
<rect y="8.39131" width="1.47826" height="8.86957" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
icon/button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 502 B

BIN
icon/default_button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 634 B

14
icon/radio-border.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.90698" width="4.18605" height="1.06667" fill="black"/>
<rect y="8" width="4" height="1.11628" transform="rotate(-90 0 8)" fill="black"/>
<rect x="10.8837" y="8" width="4" height="1.11628" transform="rotate(-90 10.8837 8)" fill="black"/>
<rect x="1.95349" y="1.06667" width="1.95349" height="1.06667" fill="black"/>
<rect x="8.09302" y="1.06667" width="1.95349" height="1.06667" fill="black"/>
<rect x="10.0465" y="4" width="1.86667" height="0.837209" transform="rotate(-90 10.0465 4)" fill="black"/>
<rect x="1.11627" y="4" width="1.86667" height="0.837209" transform="rotate(-90 1.11627 4)" fill="black"/>
<rect width="4.18605" height="1.06667" transform="matrix(1 0 0 -1 3.90698 12)" fill="black"/>
<rect width="1.95349" height="1.06667" transform="matrix(1 0 0 -1 1.95349 10.9333)" fill="black"/>
<rect width="1.95349" height="1.06667" transform="matrix(1 0 0 -1 8.09302 10.9333)" fill="black"/>
<rect width="1.86667" height="0.837209" transform="matrix(0 1 1 0 10.0465 8)" fill="black"/>
<rect width="1.86667" height="0.837209" transform="matrix(0 1 1 0 1.11627 8)" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

5
icon/radio-dot.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.06616" width="3.99783" height="1.06609" fill="black"/>
<rect x="1.06616" y="5.0639" width="3.99783" height="1.06609" fill="black"/>
<rect y="1.06609" width="6.13" height="3.99783" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 305 B

22
icon/scrollbar-down-active.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="-0.5" width="21" height="22.38" transform="matrix(1 0 0 -1 0 22.38)" fill="white" stroke="black"/>
<rect x="1" y="0.37508" width="20" height="2.00043" fill="black"/>
<rect x="1.375" y="11.0024" width="5.5" height="1.37529" fill="black"/>
<rect x="6.875" y="5.50117" width="6.875" height="11.0024" fill="black"/>
<rect x="6.875" y="5.50117" width="5.50118" height="1.375" transform="rotate(90 6.875 5.50117)" fill="black"/>
<rect x="9.625" y="17.8788" width="1.37529" height="1.375" transform="rotate(90 9.625 17.8788)" fill="black"/>
<rect x="11" y="19.2541" width="1.37529" height="1.375" transform="rotate(90 11 19.2541)" fill="black"/>
<rect x="19.25" y="11.0024" width="1.37529" height="1.375" transform="rotate(90 19.25 11.0024)" fill="black"/>
<rect x="17.875" y="12.3776" width="1.37529" height="4.125" transform="rotate(90 17.875 12.3776)" fill="black"/>
<rect x="16.5" y="13.7529" width="1.37529" height="2.75" transform="rotate(90 16.5 13.7529)" fill="black"/>
<rect x="15.125" y="15.1282" width="1.37529" height="1.375" transform="rotate(90 15.125 15.1282)" fill="black"/>
<rect x="13.75" y="16.5035" width="1.37529" height="1.375" transform="rotate(90 13.75 16.5035)" fill="black"/>
<rect x="12.375" y="17.8788" width="1.37529" height="2.75" transform="rotate(90 12.375 17.8788)" fill="black"/>
<rect x="12.375" y="16.5035" width="1.37529" height="5.5" transform="rotate(90 12.375 16.5035)" fill="black"/>
<rect x="6.875" y="15.1282" width="1.37529" height="1.375" transform="rotate(90 6.875 15.1282)" fill="black"/>
<rect x="6.875" y="13.7529" width="1.37529" height="2.75" transform="rotate(90 6.875 13.7529)" fill="black"/>
<rect x="6.875" y="12.3776" width="1.37529" height="4.125" transform="rotate(90 6.875 12.3776)" fill="black"/>
<rect x="2.75" y="11.0024" width="1.37529" height="1.375" transform="rotate(90 2.75 11.0024)" fill="black"/>
<rect x="15.125" y="5.50117" width="5.50118" height="1.375" transform="rotate(90 15.125 5.50117)" fill="black"/>
<rect x="13.75" y="11.0024" width="5.5" height="1.37529" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

22
icon/scrollbar-down.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="-0.5" width="21" height="22.375" transform="matrix(1 0 0 -1 0 22.375)" fill="white" stroke="black"/>
<rect x="1" y="0.375" width="20" height="2" fill="black"/>
<rect x="1.375" y="11" width="5.5" height="1.375" fill="black"/>
<rect x="6.875" y="5.5" width="6.875" height="1.375" fill="black"/>
<rect x="6.875" y="5.5" width="5.5" height="1.375" transform="rotate(90 6.875 5.5)" fill="black"/>
<rect x="9.625" y="17.875" width="1.375" height="1.375" transform="rotate(90 9.625 17.875)" fill="black"/>
<rect x="11" y="19.25" width="1.375" height="1.375" transform="rotate(90 11 19.25)" fill="black"/>
<rect x="19.25" y="11" width="1.375" height="1.375" transform="rotate(90 19.25 11)" fill="black"/>
<rect x="17.875" y="12.375" width="1.375" height="1.375" transform="rotate(90 17.875 12.375)" fill="black"/>
<rect x="16.5" y="13.75" width="1.375" height="1.375" transform="rotate(90 16.5 13.75)" fill="black"/>
<rect x="15.125" y="15.125" width="1.375" height="1.375" transform="rotate(90 15.125 15.125)" fill="black"/>
<rect x="13.75" y="16.5" width="1.375" height="1.375" transform="rotate(90 13.75 16.5)" fill="black"/>
<rect x="12.375" y="17.875" width="1.375" height="1.375" transform="rotate(90 12.375 17.875)" fill="black"/>
<rect x="8.25" y="16.5" width="1.375" height="1.375" transform="rotate(90 8.25 16.5)" fill="black"/>
<rect x="6.875" y="15.125" width="1.375" height="1.375" transform="rotate(90 6.875 15.125)" fill="black"/>
<rect x="5.5" y="13.75" width="1.375" height="1.375" transform="rotate(90 5.5 13.75)" fill="black"/>
<rect x="4.125" y="12.375" width="1.375" height="1.375" transform="rotate(90 4.125 12.375)" fill="black"/>
<rect x="2.75" y="11" width="1.375" height="1.375" transform="rotate(90 2.75 11)" fill="black"/>
<rect x="15.125" y="5.5" width="5.5" height="1.375" transform="rotate(90 15.125 5.5)" fill="black"/>
<rect x="13.75" y="11" width="5.5" height="1.375" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

22
icon/scrollbar-left-active.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.809998" y="22.19" width="21" height="22.38" transform="rotate(-90 0.809998 22.19)" fill="white" stroke="black"/>
<rect width="20" height="2.00043" transform="matrix(0 -1 -1 0 23.3149 21.69)" fill="black"/>
<rect width="5.5" height="1.37529" transform="matrix(0 -1 -1 0 12.6876 21.315)" fill="black"/>
<rect width="6.875" height="11.0024" transform="matrix(0 -1 -1 0 18.1888 15.815)" fill="black"/>
<rect width="5.50118" height="1.375" transform="matrix(-1 0 0 1 18.1888 15.815)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 5.81116 13.065)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 4.43585 11.69)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 12.6876 3.44)" fill="black"/>
<rect width="1.37529" height="4.125" transform="matrix(-1 0 0 1 11.3124 4.815)" fill="black"/>
<rect width="1.37529" height="2.75" transform="matrix(-1 0 0 1 9.93707 6.19)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 8.56177 7.565)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 7.18646 8.94)" fill="black"/>
<rect width="1.37529" height="2.75" transform="matrix(-1 0 0 1 5.81116 10.315)" fill="black"/>
<rect width="1.37529" height="5.5" transform="matrix(-1 0 0 1 7.18646 10.315)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 8.56177 15.815)" fill="black"/>
<rect width="1.37529" height="2.75" transform="matrix(-1 0 0 1 9.93707 15.815)" fill="black"/>
<rect width="1.37529" height="4.125" transform="matrix(-1 0 0 1 11.3124 15.815)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 12.6876 19.94)" fill="black"/>
<rect width="5.50118" height="1.375" transform="matrix(-1 0 0 1 18.1888 7.565)" fill="black"/>
<rect width="5.5" height="1.37529" transform="matrix(0 -1 -1 0 12.6876 8.94)" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

22
icon/scrollbar-left.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.8125" y="22.1875" width="21" height="22.375" transform="rotate(-90 0.8125 22.1875)" fill="white" stroke="black"/>
<rect width="20" height="2" transform="matrix(0 -1 -1 0 23.3125 21.6875)" fill="black"/>
<rect width="5.5" height="1.375" transform="matrix(0 -1 -1 0 12.6875 21.3125)" fill="black"/>
<rect width="6.875" height="1.375" transform="matrix(0 -1 -1 0 18.1875 15.8125)" fill="black"/>
<rect width="5.5" height="1.375" transform="matrix(-1 0 0 1 18.1875 15.8125)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 5.8125 13.0625)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 4.4375 11.6875)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 12.6875 3.4375)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 11.3125 4.8125)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 9.9375 6.1875)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 8.5625 7.5625)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 7.1875 8.9375)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 5.8125 10.3125)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 7.1875 14.4375)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 8.5625 15.8125)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 9.9375 17.1875)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 11.3125 18.5625)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 12.6875 19.9375)" fill="black"/>
<rect width="5.5" height="1.375" transform="matrix(-1 0 0 1 18.1875 7.5625)" fill="black"/>
<rect width="5.5" height="1.375" transform="matrix(0 -1 -1 0 12.6875 8.9375)" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

22
icon/scrollbar-right-active.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="-0.5" y="-0.5" width="21" height="22.38" transform="matrix(0 -1 -1 0 22.69 21.69)" fill="white" stroke="black"/>
<rect x="0.685059" y="21.69" width="20" height="2.00043" transform="rotate(-90 0.685059 21.69)" fill="black"/>
<rect x="11.3124" y="21.315" width="5.5" height="1.37529" transform="rotate(-90 11.3124 21.315)" fill="black"/>
<rect x="5.81116" y="15.815" width="6.875" height="11.0024" transform="rotate(-90 5.81116 15.815)" fill="black"/>
<rect x="5.81116" y="15.815" width="5.50118" height="1.375" fill="black"/>
<rect x="18.1888" y="13.065" width="1.37529" height="1.375" fill="black"/>
<rect x="19.5641" y="11.69" width="1.37529" height="1.375" fill="black"/>
<rect x="11.3124" y="3.44" width="1.37529" height="1.375" fill="black"/>
<rect x="12.6876" y="4.815" width="1.37529" height="4.125" fill="black"/>
<rect x="14.0629" y="6.19" width="1.37529" height="2.75" fill="black"/>
<rect x="15.4382" y="7.565" width="1.37529" height="1.375" fill="black"/>
<rect x="16.8135" y="8.94" width="1.37529" height="1.375" fill="black"/>
<rect x="18.1888" y="10.315" width="1.37529" height="2.75" fill="black"/>
<rect x="16.8135" y="10.315" width="1.37529" height="5.5" fill="black"/>
<rect x="15.4382" y="15.815" width="1.37529" height="1.375" fill="black"/>
<rect x="14.0629" y="15.815" width="1.37529" height="2.75" fill="black"/>
<rect x="12.6876" y="15.815" width="1.37529" height="4.125" fill="black"/>
<rect x="11.3124" y="19.94" width="1.37529" height="1.375" fill="black"/>
<rect x="5.81116" y="7.565" width="5.50118" height="1.375" fill="black"/>
<rect x="11.3124" y="8.94" width="5.5" height="1.37529" transform="rotate(-90 11.3124 8.94)" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

22
icon/scrollbar-right.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="-0.5" y="-0.5" width="21" height="22.375" transform="matrix(0 -1 -1 0 22.6875 21.6875)" fill="white" stroke="black"/>
<rect x="0.6875" y="21.6875" width="20" height="2" transform="rotate(-90 0.6875 21.6875)" fill="black"/>
<rect x="11.3125" y="21.3125" width="5.5" height="1.375" transform="rotate(-90 11.3125 21.3125)" fill="black"/>
<rect x="5.8125" y="15.8125" width="6.875" height="1.375" transform="rotate(-90 5.8125 15.8125)" fill="black"/>
<rect x="5.8125" y="15.8125" width="5.5" height="1.375" fill="black"/>
<rect x="18.1875" y="13.0625" width="1.375" height="1.375" fill="black"/>
<rect x="19.5625" y="11.6875" width="1.375" height="1.375" fill="black"/>
<rect x="11.3125" y="3.4375" width="1.375" height="1.375" fill="black"/>
<rect x="12.6875" y="4.8125" width="1.375" height="1.375" fill="black"/>
<rect x="14.0625" y="6.1875" width="1.375" height="1.375" fill="black"/>
<rect x="15.4375" y="7.5625" width="1.375" height="1.375" fill="black"/>
<rect x="16.8125" y="8.9375" width="1.375" height="1.375" fill="black"/>
<rect x="18.1875" y="10.3125" width="1.375" height="1.375" fill="black"/>
<rect x="16.8125" y="14.4375" width="1.375" height="1.375" fill="black"/>
<rect x="15.4375" y="15.8125" width="1.375" height="1.375" fill="black"/>
<rect x="14.0625" y="17.1875" width="1.375" height="1.375" fill="black"/>
<rect x="12.6875" y="18.5625" width="1.375" height="1.375" fill="black"/>
<rect x="11.3125" y="19.9375" width="1.375" height="1.375" fill="black"/>
<rect x="5.8125" y="7.5625" width="5.5" height="1.375" fill="black"/>
<rect x="11.3125" y="8.9375" width="5.5" height="1.375" transform="rotate(-90 11.3125 8.9375)" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

22
icon/scrollbar-up-active.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="21" height="22.38" fill="white" stroke="black"/>
<rect width="20" height="2.00043" transform="matrix(1 0 0 -1 1 23.0049)" fill="black"/>
<rect width="5.5" height="1.37529" transform="matrix(1 0 0 -1 1.375 12.3776)" fill="black"/>
<rect width="6.875" height="11.0024" transform="matrix(1 0 0 -1 6.875 17.8788)" fill="black"/>
<rect width="5.50118" height="1.375" transform="matrix(0 -1 -1 0 6.875 17.8788)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 9.625 5.50118)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 11 4.12588)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 19.25 12.3776)" fill="black"/>
<rect width="1.37529" height="4.125" transform="matrix(0 -1 -1 0 17.875 11.0024)" fill="black"/>
<rect width="1.37529" height="2.75" transform="matrix(0 -1 -1 0 16.5 9.62706)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 15.125 8.25176)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 13.75 6.87647)" fill="black"/>
<rect width="1.37529" height="2.75" transform="matrix(0 -1 -1 0 12.375 5.50118)" fill="black"/>
<rect width="1.37529" height="5.5" transform="matrix(0 -1 -1 0 12.375 6.87647)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 6.875 8.25176)" fill="black"/>
<rect width="1.37529" height="2.75" transform="matrix(0 -1 -1 0 6.875 9.62706)" fill="black"/>
<rect width="1.37529" height="4.125" transform="matrix(0 -1 -1 0 6.875 11.0024)" fill="black"/>
<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 2.75 12.3776)" fill="black"/>
<rect width="5.50118" height="1.375" transform="matrix(0 -1 -1 0 15.125 17.8788)" fill="black"/>
<rect width="5.5" height="1.37529" transform="matrix(1 0 0 -1 13.75 12.3776)" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

22
icon/scrollbar-up.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="21" height="22.375" fill="white" stroke="black"/>
<rect width="20" height="2" transform="matrix(1 0 0 -1 1 23)" fill="black"/>
<rect width="5.5" height="1.375" transform="matrix(1 0 0 -1 1.375 12.375)" fill="black"/>
<rect width="6.875" height="1.375" transform="matrix(1 0 0 -1 6.875 17.875)" fill="black"/>
<rect width="5.5" height="1.375" transform="matrix(0 -1 -1 0 6.875 17.875)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 9.625 5.5)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 11 4.125)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 19.25 12.375)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 17.875 11)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 16.5 9.625)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 15.125 8.25)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 13.75 6.875)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 12.375 5.5)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 8.25 6.875)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 6.875 8.25)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 5.5 9.625)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 4.125 11)" fill="black"/>
<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 2.75 12.375)" fill="black"/>
<rect width="5.5" height="1.375" transform="matrix(0 -1 -1 0 15.125 17.875)" fill="black"/>
<rect width="5.5" height="1.375" transform="matrix(1 0 0 -1 13.75 12.375)" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

4
now.json Normal file
View File

@@ -0,0 +1,4 @@
{
"version": 2,
"public": true
}

3543
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

45
package.json Normal file
View File

@@ -0,0 +1,45 @@
{
"name": "system.css",
"version": "0.1.0",
"description": "A design system for building retro Apple interfaces",
"main": "dist/system.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/sakofchit/system.css.git"
},
"keywords": [
"css",
"classic macos"
],
"author": "Sakun Acharige <hey@sakun.co>",
"license": "MIT",
"bugs": {
"url": "https://github.com/sakofchit/system.css/issues"
},
"homepage": "https://github.com/sakofchit/system.css",
"devDependencies": {
"chokidar": "^3.3.1",
"cssnano": "^5.0.1",
"dedent": "^0.7.0",
"ejs": "^3.1.8",
"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.4.14",
"postcss-calc": "^7.0.2",
"postcss-copy": "^7.1.0",
"postcss-css-variables": "^0.18.0",
"postcss-inline": "^1.2.0",
"postcss-inline-svg": "^4.1.0"
}
}

16
server.js Normal file
View File

@@ -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" });

634
style.css Normal file
View File

@@ -0,0 +1,634 @@
/**
* system.css
* Copyright (c) 2022 Sakun Acharige <sakun.co>
*/
:root {
--box-shadow: 2px 2px;
/* 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 (from 98.css) */
--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: 6.13px;
--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-top: 3px;
--checkmark-left: 3px;
}
@font-face {
font-family: Chicago;
src: url("fonts/converted/ChicagoFLF.ttf");
}
@font-face {
font-family: Monaco;
src: url("fonts/converted/monaco.ttf")
}
/* Fonts below are recreations by Giles Booth */
@font-face {
font-family: Chicago_12;
src: url("fonts/converted/ChiKareGo2.ttf");
}
@font-face {
font-family: Geneva_9;
src: url("fonts/converted/FindersKeepers.ttf")
}
::-webkit-scrollbar {
width: 22px;
background-color: #fff;
}
::-webkit-scrollbar-track {
background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000);
background-color: white;
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
width: 10px;
border-left: 3px solid black;
}
::-webkit-scrollbar-thumb {
width: 20px;
box-sizing: content-box;
background-color: #fff;
border: 2px solid black;
border-right: none;
}
::-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 {
background-repeat: no-repeat;
height: 23.38px;
background-image: svg-load("./icon/scrollbar-up.svg");
}
::-webkit-scrollbar-button:vertical:start:active {
background-repeat: no-repeat;
height: 23.38px;
background-image: svg-load("./icon/scrollbar-up-active.svg");
}
::-webkit-scrollbar-button:vertical:end {
height: 23.38px;
background-image: svg-load("./icon/scrollbar-down.svg");
}
::-webkit-scrollbar-button:vertical:end:active {
background-repeat: no-repeat;
height: 23.38px;
background-image: svg-load("./icon/scrollbar-down-active.svg");
}
::-webkit-scrollbar-button:horizontal:start {
background-repeat: no-repeat;
height: 23.38px;
background-image: svg-load("./icon/scrollbar-left.svg");
}
::-webkit-scrollbar-button:horizontal:start:active {
background-repeat: no-repeat;
height: 23.38px;
background-image: svg-load("./icon/scrollbar-left-active.svg");
}
::-webkit-scrollbar-button:horizontal:end {
height: 23.38px;
background-image: svg-load("./icon/scrollbar-right.svg");
}
::-webkit-scrollbar-button:horizontal:end:active {
background-repeat: no-repeat;
height: 23.38px;
background-image: svg-load("./icon/scrollbar-right-active.svg");
}
body {
background: linear-gradient(90deg, #ffffff 21px, transparent 1%) center, linear-gradient(#ffffff 21px, transparent 1%) center, #000000;
background-size: 22px 22px;
background-attachment: fixed;
}
a {
color: black;
text-decoration: underline;
}
hr {
border-top: 0.15em solid #000;
}
.container {
width: 50%;
margin: 0 auto;
display: block;
}
h1,
.heading {
font-family: Chicago;
font-size: 1em;
}
h2 {
font-family: Chicago;
font-size: 2em;
}
.standard-button {
display: block;
min-width: 59px;
min-height: 20px;
}
/*p {
font-family: Monaco;
font-size: 22px;
}*/
/* dialogs */
.standard-dialog {
border: 2px solid;
padding: 10px;
box-shadow: var(--box-shadow);
background-color: white;
}
.inner-border {
border-color: black;
border-top: 3.5px solid;
border-bottom: 3.5px solid;
border-left: 5px solid;
border-right: 5px solid;
}
.outer-border {
border-color: black;
border: 2px solid;
padding: 3px;
}
/* title bar */
.title-bar {
flex: none;
display: flex;
align-items: center;
height: 1.5rem;
margin: 0.1rem 0;
padding: 0.2rem 0.1rem;
background: linear-gradient(#000 50%, transparent 50%);
background-size: 6.6666666667% 13.3333333333%;
background-clip: content-box;
}
.title-bar .title {
padding: 0 0.5em;
margin: 0 auto;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.1;
text-align: center;
background: #fff;
cursor: default;
font-family: Chicago_12;
}
.inactive-title-bar {
flex: none;
display: flex;
align-items: center;
height: 1.5rem;
margin: 0.1rem 0;
padding: 0.2rem 0.1rem;
background-size: 6.6666666667% 13.3333333333%;
background-clip: content-box;
}
.inactive-title-bar .title {
padding: 0 0.5em;
margin: 0 auto;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.1;
text-align: center;
cursor: default;
font-family: Chicago_12;
color:#A5A5A5;
}
.title-bar button {
position: relative;
display: block;
width: 40px;
height: 40px;
margin: 0 0.2rem;
border: 4px solid #000;
background-color: #fff;
cursor: pointer;
transform: scale(0.5);
}
.title-bar button span {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.title-bar button.close::before, .title-bar button.close::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
.title-bar button.close::before {
background: linear-gradient(#000 0%, #000 100%) left center, linear-gradient(#000 0%, #000 100%) right center, linear-gradient(#000 0%, #000 100%) center top, linear-gradient(#000 0%, #000 100%) center bottom;
background-size: 30% 4px, 30% 4px, 4px 30%, 4px 30%;
background-repeat: no-repeat;
}
.title-bar button.close::after {
background: linear-gradient(#000 0%, #000 100%) left center, linear-gradient(#000 0%, #000 100%) right center, linear-gradient(#000 0%, #000 100%) center top, linear-gradient(#000 0%, #000 100%) center bottom;
background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, 3.6363636364px 22.5%, 3.6363636364px 22.5%;
background-repeat: no-repeat;
transform: rotate(45deg) scale(1.1);
}
.title-bar button.close:active::before, .title-bar button.close:active::after {
opacity: 1;
}
.title-bar button.resize {
background: linear-gradient(#000 0%, #000 100%) left 58%, linear-gradient(to bottom, #000 0%, #000 100%) 58% top;
background-size: 60% 4px, 4px 60%;
background-repeat: no-repeat;
background-color: #fff;
}
.title-bar button.resize:active {
background: #fff;
}
.title-bar button.hidden {
visibility: hidden;
}
.window {
flex-direction: column;
margin: 1rem;
min-width: 320px;
overflow: hidden;
background-color: #fff;
border: 0.1em solid #000;
font-family: "Inconsolata", Menlo, Chicago, Geneva;
}
.window-pane {
overflow-y: scroll;
height: 100%;
padding: 1rem 2rem;
font-size: 18px;
letter-spacing: -0.025em;
/*margin-bottom: 1rem;*/
}
.window-pane::-webkit-scrollbar {
width: 22px;
background-color: #fff;
}
.window-pane::-webkit-scrollbar-track {
background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000);
background-color: white;
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
width: 10px;
border-left: 4px solid black;
}
.window-pane::-webkit-scrollbar-thumb {
width: 20px;
box-sizing: content-box;
background-color: #fff;
border: 2px solid black;
border-right: none;
}
.separator {
flex: none;
display: flex;
flex-direction: row;
justify-content: space-between;
/*padding: 0.4rem 0.8rem;*/
border-top: 0.1rem solid black;
border-width: 0.1rem 0;
font-size: 1rem;
}
.details__bar {
flex: none;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0.4rem 0.8rem;
border: 0.1rem solid black;
border-width: 0.1rem 0;
font-size: 1rem;
font-weight: 100;
}
/* buttons */
.btn {
min-height: 20px;
min-width: 59px;
padding: 0 20px;
text-align:center;
background: white;
border-image: url("./icon/button.png") 30 stretch;
border: 5.5px solid transparent;
color: black;
text-align: center;
text-decoration: none;
font-size: 18px;
font-family: Chicago_12;
cursor: pointer;
}
.btn:active {
background: black;
border-radius:6px;
color: white;
font-family: Chicago_12;
}
.btn:disabled {
min-height: 20px;
min-width: 59px;
text-align:center;
background: white;
border-image: url("./icon/button.png") 30 stretch;
border: 5.5px solid transparent;
color: #B6B7B8;
text-align: center;
text-decoration: none;
font-size: 18px;
font-family: Chicago_12;
}
input {
border: 1.5px solid black;
font-family: Chicago_12;
font-size: 18px;
padding-left: 5px;
}
input:focus {
outline:none;
}
input[type="radio"] + label::before {
border-image: svg-load("./icon/radio-border.svg");
width: 20px;
height: 20px;
}
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;
top: var(--checkmark-top);
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");
}
.field-row {
display: flex;
align-items: center;
font-family: Chicago_12;
font-size: 1em;
}
[class^="field-row"] + [class^="field-row"] {
margin-top: var(--grouped-element-spacing);
}
.field-row > * + * {
margin-left: var(--grouped-element-spacing);
}
.apple {
background: svg-load("./icon/apple.svg");
height: 20.7px;
width: 17px;
background-repeat: no-repeat;
border: none;
}
form {
font-family: "Inconsolata", Menlo, Chicago, Geneva;
font-size:14px;
}
/* Dropdown */
.dropdown {
display: inline-block;
position: relative;
}
.dd-toggle {
display: inline-block;
padding: 5px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
font-family: Chicago_12;
font-size: 1em;
}
.dd-toggle:after {
content: '';
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
width: 0;
height: 0;
}
.dd-toggle:hover {
background-color: black;
color: white;
}
.dd-input {
display: none;
}
.dd-menu {
position: absolute;
top: 100%;
padding: 0;
margin: 2px 0 0 0;
box-shadow: var(--box-shadow);
border: 2px solid;
background-color: #ffffff;
list-style-type: none;
font-family: Chicago_12;
font-size: 1em;
}
.dd-input + .dd-menu {
display: none;
}
.dd-input:checked + .dd-menu {
display: block;
}
.dd-menu li {
padding: 5px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: black;
color: white;
}
.dd-menu a:hover {
background-color: black;
color: white;
}
.dd-menu li.divider{
padding: 0;
border-bottom: 1.5px dotted #000;
}
.text-center {
text-align: center;
}