mirror of
https://github.com/jdan/98.css.git
synced 2025-09-01 18:03:10 +02:00
inline svg and reference style.css appropriately
This commit is contained in:
Jordan Scales
18
build.js
18
build.js
@@ -2,6 +2,8 @@
|
||||
const dedent = require("dedent");
|
||||
const ejs = require("ejs");
|
||||
const fs = require("fs");
|
||||
const mkdirp = require("mkdirp");
|
||||
const postcss = require("postcss");
|
||||
|
||||
let id = 0;
|
||||
function getNewId() {
|
||||
@@ -32,10 +34,24 @@ function example(code) {
|
||||
function buildDocs() {
|
||||
const template = fs.readFileSync("./docs/index.html.ejs", "utf-8");
|
||||
|
||||
fs.copyFileSync("./build/style.css", "./docs/style.css");
|
||||
fs.writeFileSync(
|
||||
"./docs/index.html",
|
||||
ejs.render(template, { getNewId, getCurrentId, example })
|
||||
);
|
||||
}
|
||||
|
||||
buildDocs();
|
||||
function buildCSS() {
|
||||
return postcss()
|
||||
.use(require("postcss-inline-svg"))
|
||||
.process(fs.readFileSync("./style.css"), {
|
||||
from: "style.css",
|
||||
to: "./build/style.css",
|
||||
})
|
||||
.then((result) => {
|
||||
mkdirp.sync("./build");
|
||||
fs.writeFileSync("./build/style.css", result.css);
|
||||
});
|
||||
}
|
||||
|
||||
buildCSS().then(buildDocs);
|
||||
|
||||
478
build/style.css
Normal file
478
build/style.css
Normal file
@@ -0,0 +1,478 @@
|
||||
:root {
|
||||
/* Color */
|
||||
--surface: #c0c0c0;
|
||||
--button-highlight: #ffffff;
|
||||
--button-face: #dfdfdf;
|
||||
--button-shadow: #808080;
|
||||
--window-frame: #0a0a0a;
|
||||
--dialog-blue: #000080;
|
||||
--dialog-blue-light: #1084d0;
|
||||
--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;
|
||||
|
||||
/* 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));
|
||||
|
||||
--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));
|
||||
|
||||
/* 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);
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: -0.03ch;
|
||||
-webkit-font-smoothing: none;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration: none;
|
||||
border-bottom: 0.5px solid #222222;
|
||||
}
|
||||
|
||||
button {
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
|
||||
min-width: 75px;
|
||||
min-height: 23px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
button:active {
|
||||
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted #000000;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
:disabled,
|
||||
:disabled + label {
|
||||
color: var(--button-shadow);
|
||||
text-shadow: 1px 1px 0 var(--button-highlight);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
background: var(--surface);
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.menubar {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--dialog-blue),
|
||||
var(--dialog-blue-light)
|
||||
);
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menubar-title {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
letter-spacing: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.menubar-controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menubar-controls button {
|
||||
padding: 0;
|
||||
display: block;
|
||||
min-width: 14px;
|
||||
min-height: 12px;
|
||||
}
|
||||
|
||||
.menubar-controls button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Minimize"] {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' viewBox='0 0 6 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='6' height='2' fill='black'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom 2px left 3px;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Maximize"] {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2V7V8H1H8H9V7V2V0H8H1H0V2ZM8 7V2H1V7H8Z' fill='black'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
/* Off by 1px because contents can't go above the inner shadow */
|
||||
/* Should be 9px by 9px, with top 1px */
|
||||
background-position: top 2px left 2px;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Close"] {
|
||||
margin-left: 2px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z' fill='black'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top 2px center;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
margin: var(--element-spacing);
|
||||
}
|
||||
|
||||
.dialog-body > * + * {
|
||||
margin-top: var(--element-spacing);
|
||||
}
|
||||
|
||||
.align-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
box-shadow: var(--border-sunken-outer), var(--border-raised-inner);
|
||||
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;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type="radio"] + label {
|
||||
position: relative;
|
||||
margin-left: var(--radio-total-width);
|
||||
}
|
||||
|
||||
input[type="radio"] + label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--radio-total-width));
|
||||
display: inline-block;
|
||||
width: var(--radio-width);
|
||||
height: var(--radio-width);
|
||||
margin-right: var(--radio-label-spacing);
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z' fill='%23808080'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z' fill='white'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + label::after {
|
||||
--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
|
||||
);
|
||||
|
||||
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: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="radio"]:focus + label,
|
||||
input[type="checkbox"]:focus + label {
|
||||
outline: 1px dotted #000000;
|
||||
}
|
||||
|
||||
input[type="radio"][disabled] + label::before {
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z' fill='%23808080'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z' fill='%23C0C0C0'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="radio"][disabled]:checked + label::after {
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z' fill='%23808080'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
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));
|
||||
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"]:checked + label::after {
|
||||
--checkmark-width: 7px;
|
||||
--checkmark-top: 3px;
|
||||
--checkmark-left: 3px;
|
||||
|
||||
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: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled] + label::before {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]:checked + label::after {
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z' fill='%23808080'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
select,
|
||||
textarea {
|
||||
padding: 3px 4px;
|
||||
border: none;
|
||||
box-shadow: var(--border-field);
|
||||
background-color: var(--button-highlight);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
select {
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
/* For some reason descenders are getting cut off without this */
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
position: relative;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z' fill='black'/%3E %3C/svg%3E");
|
||||
background-position: top 2px right 2px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:focus,
|
||||
input[type="text"]:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
color: var(--button-highlight);
|
||||
background-color: var(--dialog-blue);
|
||||
}
|
||||
select:focus option {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
select:active {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0H15H16V17H15H0V16V1V0ZM1 16H15V1H1V16Z' fill='%23808080'/%3E %3Crect x='1' y='1' width='14' height='15' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5V8H6V9H7V10H8V11H9V10H10V9H11V8H12V7Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-blue);
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 1px dotted var(--link-blue);
|
||||
}
|
||||
|
||||
ul.treeview {
|
||||
display: block;
|
||||
background: var(--button-highlight);
|
||||
box-shadow: var(--border-field);
|
||||
padding: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.treeview li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul.treeview a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
ul.treeview a:focus {
|
||||
background-color: var(--dialog-blue);
|
||||
color: var(--button-highlight);
|
||||
}
|
||||
|
||||
ul.treeview ul,
|
||||
ul.treeview li {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
ul.treeview ul {
|
||||
margin-left: 16px;
|
||||
padding-left: 16px;
|
||||
/* Goes down too far */
|
||||
border-left: 1px dotted #808080;
|
||||
}
|
||||
|
||||
ul.treeview ul > li {
|
||||
position: relative;
|
||||
}
|
||||
ul.treeview 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.treeview ul > li:last-child::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 7px;
|
||||
bottom: 0px;
|
||||
width: 8px;
|
||||
background: var(--button-highlight);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
background: var(--button-highlight);
|
||||
box-shadow: var(--border-field);
|
||||
padding: 12px 8px;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
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: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' viewBox='0 0 2 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0V1H1V2H2V1H1V0Z' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1V1H0V2H1V1H2V0Z' fill='white'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--button-face);
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:vertical:start {
|
||||
height: 17px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
::-webkit-scrollbar-button:vertical:end {
|
||||
height: 17px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
::-webkit-scrollbar-button:horizontal:start {
|
||||
width: 16px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8V5H7V6H6V7H5V8H6V9H7V10H8V11H9V4Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
::-webkit-scrollbar-button:horizontal:end {
|
||||
width: 16px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6V11H7V10H8V9H9V8H10V7H9V6H8V5H7V4Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/style.css"></style>
|
||||
<link rel="stylesheet" href="style.css"></style>
|
||||
<link rel="stylesheet" href="docs.css"></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
478
docs/style.css
Normal file
478
docs/style.css
Normal file
@@ -0,0 +1,478 @@
|
||||
:root {
|
||||
/* Color */
|
||||
--surface: #c0c0c0;
|
||||
--button-highlight: #ffffff;
|
||||
--button-face: #dfdfdf;
|
||||
--button-shadow: #808080;
|
||||
--window-frame: #0a0a0a;
|
||||
--dialog-blue: #000080;
|
||||
--dialog-blue-light: #1084d0;
|
||||
--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;
|
||||
|
||||
/* 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));
|
||||
|
||||
--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));
|
||||
|
||||
/* 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);
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: -0.03ch;
|
||||
-webkit-font-smoothing: none;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration: none;
|
||||
border-bottom: 0.5px solid #222222;
|
||||
}
|
||||
|
||||
button {
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
|
||||
min-width: 75px;
|
||||
min-height: 23px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
button:active {
|
||||
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted #000000;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
:disabled,
|
||||
:disabled + label {
|
||||
color: var(--button-shadow);
|
||||
text-shadow: 1px 1px 0 var(--button-highlight);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
background: var(--surface);
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.menubar {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--dialog-blue),
|
||||
var(--dialog-blue-light)
|
||||
);
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menubar-title {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
letter-spacing: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.menubar-controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menubar-controls button {
|
||||
padding: 0;
|
||||
display: block;
|
||||
min-width: 14px;
|
||||
min-height: 12px;
|
||||
}
|
||||
|
||||
.menubar-controls button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Minimize"] {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' viewBox='0 0 6 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='6' height='2' fill='black'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom 2px left 3px;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Maximize"] {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2V7V8H1H8H9V7V2V0H8H1H0V2ZM8 7V2H1V7H8Z' fill='black'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
/* Off by 1px because contents can't go above the inner shadow */
|
||||
/* Should be 9px by 9px, with top 1px */
|
||||
background-position: top 2px left 2px;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Close"] {
|
||||
margin-left: 2px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z' fill='black'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top 2px center;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
margin: var(--element-spacing);
|
||||
}
|
||||
|
||||
.dialog-body > * + * {
|
||||
margin-top: var(--element-spacing);
|
||||
}
|
||||
|
||||
.align-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
box-shadow: var(--border-sunken-outer), var(--border-raised-inner);
|
||||
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;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type="radio"] + label {
|
||||
position: relative;
|
||||
margin-left: var(--radio-total-width);
|
||||
}
|
||||
|
||||
input[type="radio"] + label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--radio-total-width));
|
||||
display: inline-block;
|
||||
width: var(--radio-width);
|
||||
height: var(--radio-width);
|
||||
margin-right: var(--radio-label-spacing);
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z' fill='%23808080'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z' fill='white'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + label::after {
|
||||
--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
|
||||
);
|
||||
|
||||
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: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="radio"]:focus + label,
|
||||
input[type="checkbox"]:focus + label {
|
||||
outline: 1px dotted #000000;
|
||||
}
|
||||
|
||||
input[type="radio"][disabled] + label::before {
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z' fill='%23808080'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z' fill='%23C0C0C0'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="radio"][disabled]:checked + label::after {
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z' fill='%23808080'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
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));
|
||||
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"]:checked + label::after {
|
||||
--checkmark-width: 7px;
|
||||
--checkmark-top: 3px;
|
||||
--checkmark-left: 3px;
|
||||
|
||||
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: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled] + label::before {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]:checked + label::after {
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z' fill='%23808080'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
select,
|
||||
textarea {
|
||||
padding: 3px 4px;
|
||||
border: none;
|
||||
box-shadow: var(--border-field);
|
||||
background-color: var(--button-highlight);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
select {
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
/* For some reason descenders are getting cut off without this */
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
position: relative;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z' fill='black'/%3E %3C/svg%3E");
|
||||
background-position: top 2px right 2px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
select:focus,
|
||||
input[type="text"]:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
color: var(--button-highlight);
|
||||
background-color: var(--dialog-blue);
|
||||
}
|
||||
select:focus option {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
select:active {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0H15H16V17H15H0V16V1V0ZM1 16H15V1H1V16Z' fill='%23808080'/%3E %3Crect x='1' y='1' width='14' height='15' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5V8H6V9H7V10H8V11H9V10H10V9H11V8H12V7Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-blue);
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 1px dotted var(--link-blue);
|
||||
}
|
||||
|
||||
ul.treeview {
|
||||
display: block;
|
||||
background: var(--button-highlight);
|
||||
box-shadow: var(--border-field);
|
||||
padding: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.treeview li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul.treeview a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
ul.treeview a:focus {
|
||||
background-color: var(--dialog-blue);
|
||||
color: var(--button-highlight);
|
||||
}
|
||||
|
||||
ul.treeview ul,
|
||||
ul.treeview li {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
ul.treeview ul {
|
||||
margin-left: 16px;
|
||||
padding-left: 16px;
|
||||
/* Goes down too far */
|
||||
border-left: 1px dotted #808080;
|
||||
}
|
||||
|
||||
ul.treeview ul > li {
|
||||
position: relative;
|
||||
}
|
||||
ul.treeview 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.treeview ul > li:last-child::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 7px;
|
||||
bottom: 0px;
|
||||
width: 8px;
|
||||
background: var(--button-highlight);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
background: var(--button-highlight);
|
||||
box-shadow: var(--border-field);
|
||||
padding: 12px 8px;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
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: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' viewBox='0 0 2 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0V1H1V2H2V1H1V0Z' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1V1H0V2H1V1H2V0Z' fill='white'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--button-face);
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:vertical:start {
|
||||
height: 17px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
::-webkit-scrollbar-button:vertical:end {
|
||||
height: 17px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
::-webkit-scrollbar-button:horizontal:start {
|
||||
width: 16px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8V5H7V6H6V7H5V8H6V9H7V10H8V11H9V4Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
::-webkit-scrollbar-button:horizontal:end {
|
||||
width: 16px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6V11H7V10H8V9H9V8H10V7H9V6H8V5H7V4Z' fill='black'/%3E %3C/svg%3E");
|
||||
}
|
||||
|
Before Width: | Height: | Size: 381 B After Width: | Height: | Size: 381 B |
|
Before Width: | Height: | Size: 630 B After Width: | Height: | Size: 630 B |
|
Before Width: | Height: | Size: 628 B After Width: | Height: | Size: 628 B |
|
Before Width: | Height: | Size: 629 B After Width: | Height: | Size: 629 B |
|
Before Width: | Height: | Size: 629 B After Width: | Height: | Size: 629 B |
|
Before Width: | Height: | Size: 228 B After Width: | Height: | Size: 228 B |
|
Before Width: | Height: | Size: 226 B After Width: | Height: | Size: 226 B |
|
Before Width: | Height: | Size: 273 B After Width: | Height: | Size: 273 B |
|
Before Width: | Height: | Size: 210 B After Width: | Height: | Size: 210 B |
|
Before Width: | Height: | Size: 144 B After Width: | Height: | Size: 144 B |
|
Before Width: | Height: | Size: 744 B After Width: | Height: | Size: 744 B |
|
Before Width: | Height: | Size: 743 B After Width: | Height: | Size: 743 B |
|
Before Width: | Height: | Size: 200 B After Width: | Height: | Size: 200 B |
|
Before Width: | Height: | Size: 198 B After Width: | Height: | Size: 198 B |
|
Before Width: | Height: | Size: 275 B After Width: | Height: | Size: 275 B |
343
package-lock.json
generated
343
package-lock.json
generated
@@ -4,17 +4,360 @@
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
|
||||
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
|
||||
"dev": true
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"boolbase": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
|
||||
"dev": true
|
||||
},
|
||||
"chalk": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
|
||||
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^3.2.1",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"supports-color": "^5.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
},
|
||||
"css-select": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
|
||||
"integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"boolbase": "^1.0.0",
|
||||
"css-what": "^3.2.1",
|
||||
"domutils": "^1.7.0",
|
||||
"nth-check": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"css-what": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
|
||||
"integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
|
||||
"dev": true
|
||||
},
|
||||
"dedent": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
|
||||
"integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
|
||||
"dev": true
|
||||
},
|
||||
"dom-serializer": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
|
||||
"integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"domelementtype": "^1.3.0",
|
||||
"entities": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"domelementtype": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
|
||||
"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
|
||||
"dev": true
|
||||
},
|
||||
"domhandler": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
|
||||
"integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"domelementtype": "1"
|
||||
}
|
||||
},
|
||||
"domutils": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
|
||||
"integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"dom-serializer": "0",
|
||||
"domelementtype": "1"
|
||||
}
|
||||
},
|
||||
"ejs": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/ejs/-/ejs-3.0.2.tgz",
|
||||
"integrity": "sha512-IncmUpn1yN84hy2shb0POJ80FWrfGNY0cxO9f4v+/sG7qcBvAtVWUA1IdzY/8EYUmOVhoKJVdJjNd3AZcnxOjA==",
|
||||
"dev": true
|
||||
},
|
||||
"entities": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
|
||||
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
|
||||
"dev": true
|
||||
},
|
||||
"escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
|
||||
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
|
||||
"dev": true
|
||||
},
|
||||
"has-ansi": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
|
||||
"integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
|
||||
"dev": true
|
||||
},
|
||||
"htmlparser2": {
|
||||
"version": "3.10.1",
|
||||
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
|
||||
"integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"domelementtype": "^1.3.1",
|
||||
"domhandler": "^2.3.0",
|
||||
"domutils": "^1.5.1",
|
||||
"entities": "^1.1.1",
|
||||
"inherits": "^2.0.1",
|
||||
"readable-stream": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||
"dev": true
|
||||
},
|
||||
"js-base64": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
|
||||
"integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==",
|
||||
"dev": true
|
||||
},
|
||||
"mime": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
|
||||
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
|
||||
"dev": true
|
||||
},
|
||||
"mkdirp": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
|
||||
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
|
||||
"dev": true
|
||||
},
|
||||
"nth-check": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
|
||||
"integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"boolbase": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"version": "7.0.27",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
|
||||
"integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.2",
|
||||
"source-map": "^0.6.1",
|
||||
"supports-color": "^6.1.0"
|
||||
}
|
||||
},
|
||||
"postcss-inline": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-inline/-/postcss-inline-1.2.0.tgz",
|
||||
"integrity": "sha1-mH9QqSTwhvN/4yQR+YezuLXy3yg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"mime": "^1.3.4",
|
||||
"postcss": "^5.0.14"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
|
||||
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
|
||||
"dev": true
|
||||
},
|
||||
"chalk": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
|
||||
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^2.2.1",
|
||||
"escape-string-regexp": "^1.0.2",
|
||||
"has-ansi": "^2.0.0",
|
||||
"strip-ansi": "^3.0.0",
|
||||
"supports-color": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"supports-color": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
|
||||
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
|
||||
"integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "5.2.18",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
|
||||
"integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^1.1.3",
|
||||
"js-base64": "^2.1.9",
|
||||
"source-map": "^0.5.6",
|
||||
"supports-color": "^3.2.3"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
|
||||
"integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-inline-svg": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-inline-svg/-/postcss-inline-svg-4.1.0.tgz",
|
||||
"integrity": "sha512-0pYBJyoQ9/sJViYRc1cNOOTM7DYh0/rmASB0TBeRmWkG8YFK2tmgdkfjHkbRma1iFtBFKFHZFsHwRTDZTMKzSQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"css-select": "^2.0.2",
|
||||
"dom-serializer": "^0.1.1",
|
||||
"htmlparser2": "^3.10.1",
|
||||
"postcss": "^7.0.17",
|
||||
"postcss-value-parser": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"postcss-value-parser": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
|
||||
"integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==",
|
||||
"dev": true
|
||||
},
|
||||
"readable-stream": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
|
||||
"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"inherits": "^2.0.3",
|
||||
"string_decoder": "^1.1.1",
|
||||
"util-deprecate": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",
|
||||
"integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
|
||||
"integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "~5.2.0"
|
||||
}
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
|
||||
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
|
||||
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"name": "98.css",
|
||||
"version": "0.0.1",
|
||||
"description": "A design system for building faithful recreations of old UIs",
|
||||
"main": "style.css",
|
||||
"main": "build/style.css",
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
},
|
||||
@@ -26,6 +26,9 @@
|
||||
"homepage": "https://github.com/jdan/windows98.css#readme",
|
||||
"devDependencies": {
|
||||
"dedent": "^0.7.0",
|
||||
"ejs": "^3.0.2"
|
||||
"ejs": "^3.0.2",
|
||||
"mkdirp": "^1.0.4",
|
||||
"postcss-inline": "^1.2.0",
|
||||
"postcss-inline-svg": "^4.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
32
style.css
32
style.css
@@ -136,13 +136,13 @@ button:focus {
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Minimize"] {
|
||||
background-image: url("./minimize.svg");
|
||||
background-image: svg-load("./icon/minimize.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom 2px left 3px;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Maximize"] {
|
||||
background-image: url("./maximize.svg");
|
||||
background-image: svg-load("./icon/maximize.svg");
|
||||
background-repeat: no-repeat;
|
||||
/* Off by 1px because contents can't go above the inner shadow */
|
||||
/* Should be 9px by 9px, with top 1px */
|
||||
@@ -151,7 +151,7 @@ button:focus {
|
||||
|
||||
.menubar-controls button[aria-label="Close"] {
|
||||
margin-left: 2px;
|
||||
background-image: url("./close.svg");
|
||||
background-image: svg-load("./icon/close.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top 2px center;
|
||||
}
|
||||
@@ -230,7 +230,7 @@ input[type="radio"] + label::before {
|
||||
width: var(--radio-width);
|
||||
height: var(--radio-width);
|
||||
margin-right: var(--radio-label-spacing);
|
||||
background: url("./radio-border.svg");
|
||||
background: svg-load("./icon/radio-border.svg");
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + label::after {
|
||||
@@ -249,7 +249,7 @@ input[type="radio"]:checked + label::after {
|
||||
top: var(--radio-dot-top);
|
||||
left: var(--radio-dot-left);
|
||||
position: absolute;
|
||||
background: url("./radio-dot.svg");
|
||||
background: svg-load("./icon/radio-dot.svg");
|
||||
}
|
||||
|
||||
input[type="radio"]:focus + label,
|
||||
@@ -258,11 +258,11 @@ input[type="checkbox"]:focus + label {
|
||||
}
|
||||
|
||||
input[type="radio"][disabled] + label::before {
|
||||
background: url("./radio-border-disabled.svg");
|
||||
background: svg-load("./icon/radio-border-disabled.svg");
|
||||
}
|
||||
|
||||
input[type="radio"][disabled]:checked + label::after {
|
||||
background: url("./radio-dot-disabled.svg");
|
||||
background: svg-load("./icon/radio-dot-disabled.svg");
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label {
|
||||
@@ -296,7 +296,7 @@ input[type="checkbox"]:checked + label::after {
|
||||
left: calc(
|
||||
-1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
|
||||
);
|
||||
background: url("./checkmark.svg");
|
||||
background: svg-load("./icon/checkmark.svg");
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled] + label::before {
|
||||
@@ -304,7 +304,7 @@ input[type="checkbox"][disabled] + label::before {
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]:checked + label::after {
|
||||
background: url("./checkmark-disabled.svg");
|
||||
background: svg-load("./icon/checkmark-disabled.svg");
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
@@ -332,7 +332,7 @@ select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
position: relative;
|
||||
background-image: url("./button-down.svg");
|
||||
background-image: svg-load("./icon/button-down.svg");
|
||||
background-position: top 2px right 2px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@@ -353,7 +353,7 @@ select:focus option {
|
||||
}
|
||||
|
||||
select:active {
|
||||
background-image: url("./button-down-active.svg");
|
||||
background-image: svg-load("./icon/button-down-active.svg");
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -452,7 +452,7 @@ summary:focus {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-image: url("./scrollbar-background.svg");
|
||||
background-image: svg-load("./icon/scrollbar-background.svg");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@@ -462,17 +462,17 @@ summary:focus {
|
||||
|
||||
::-webkit-scrollbar-button:vertical:start {
|
||||
height: 17px;
|
||||
background-image: url("./button-up.svg");
|
||||
background-image: svg-load("./icon/button-up.svg");
|
||||
}
|
||||
::-webkit-scrollbar-button:vertical:end {
|
||||
height: 17px;
|
||||
background-image: url("./button-down.svg");
|
||||
background-image: svg-load("./icon/button-down.svg");
|
||||
}
|
||||
::-webkit-scrollbar-button:horizontal:start {
|
||||
width: 16px;
|
||||
background-image: url("./button-left.svg");
|
||||
background-image: svg-load("./icon/button-left.svg");
|
||||
}
|
||||
::-webkit-scrollbar-button:horizontal:end {
|
||||
width: 16px;
|
||||
background-image: url("./button-right.svg");
|
||||
background-image: svg-load("./icon/button-right.svg");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user