mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-01-17 12:48:32 +01:00
Code Issues Releases Wiki Activity

rename output to 98.css and add css-variable post-processing

Browse Source
This commit is contained in:
Jordan Scales 2020-04-21 15:18:38 -04:00
parent 2075ff3a60
commit 23a00f1dcb
8 changed files with 397 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
build.js
View File

@ -32,11 +32,11 @@ function example(code) {
} }
function buildDocs() { function buildDocs() {
const template = fs.readFileSync("./docs/index.html.ejs", "utf-8"); const template = fs.readFileSync("docs/index.html.ejs", "utf-8");
fs.copyFileSync("./build/style.css", "./docs/style.css"); fs.copyFileSync("build/98.css", "docs/98.css");
fs.writeFileSync( fs.writeFileSync(
"./docs/index.html", "docs/index.html",
ejs.render(template, { getNewId, getCurrentId, example }) ejs.render(template, { getNewId, getCurrentId, example })
); );
} }
@ -44,13 +44,14 @@ function buildDocs() {
function buildCSS() { function buildCSS() {
return postcss() return postcss()
.use(require("postcss-inline-svg")) .use(require("postcss-inline-svg"))
.process(fs.readFileSync("./style.css"), { .use(require("postcss-css-variables")({ preserve: "computed" }))
.process(fs.readFileSync("style.css"), {
from: "style.css", from: "style.css",
to: "./build/style.css", to: "build/98.css",
}) })
.then((result) => { .then((result) => {
mkdirp.sync("./build"); mkdirp.sync("build");
fs.writeFileSync("./build/style.css", result.css); fs.writeFileSync("build/98.css", result.css);
}); });
} }

252
build/style.css → build/98.css
View File

@ -18,30 +18,32 @@
--radio-label-spacing: 6px; --radio-label-spacing: 6px;
/* Some detailed computations for radio buttons and checkboxes */ /* Some detailed computations for radio buttons and checkboxes */
--radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing); --radio-total-width-precalc: 12px + 6px;
--radio-total-width: calc(var(--radio-total-width-precalc)); --radio-total-width: calc(12px + 6px);
--radio-left: calc(-1 * var(--radio-total-width-precalc)); --radio-left: calc(-1 * 12px + 6px);
--checkbox-total-width-precalc: var(--checkbox-width) + --checkbox-total-width-precalc: 13px +
var(--radio-label-spacing); 6px;
--checkbox-total-width: calc(var(--checkbox-total-width-precalc)); --checkbox-total-width: calc(13px +
--checkbox-left: calc(-1 * var(--checkbox-total-width-precalc)); 6px);
--checkbox-left: calc(-1 * 13px +
6px);
/* Borders */ /* Borders */
--border-width: 1px; --border-width: 1px;
--border-raised-outer: inset -1px -1px var(--window-frame), --border-raised-outer: inset -1px -1px #0a0a0a,
inset 1px 1px var(--button-highlight); inset 1px 1px #ffffff;
--border-raised-inner: inset -2px -2px var(--button-shadow), --border-raised-inner: inset -2px -2px #808080,
inset 2px 2px var(--button-face); inset 2px 2px #dfdfdf;
--border-sunken-outer: inset -1px -1px var(--button-highlight), --border-sunken-outer: inset -1px -1px #ffffff,
inset 1px 1px var(--window-frame); inset 1px 1px #0a0a0a;
--border-sunken-inner: inset -2px -2px var(--button-face), --border-sunken-inner: inset -2px -2px #dfdfdf,
inset 2px 2px var(--button-shadow); inset 2px 2px #808080;
/* Field borders (checkbox, input, etc) flip window-frame and button-shadow */ /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
--border-field: inset -1px -1px var(--button-highlight), --border-field: inset -1px -1px #ffffff,
inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face), inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px var(--window-frame); inset 2px 2px #0a0a0a;
} }
* { * {
@ -72,8 +74,10 @@ u {
button { button {
box-sizing: border-box; box-sizing: border-box;
border: none; border: none;
background: var(--surface); background: #c0c0c0;
box-shadow: var(--border-raised-outer), var(--border-raised-inner); box-shadow: inset -1px -1px #0a0a0a,
inset 1px 1px #ffffff, inset -2px -2px #808080,
inset 2px 2px #dfdfdf;
min-width: 75px; min-width: 75px;
min-height: 23px; min-height: 23px;
@ -81,7 +85,9 @@ button {
} }
button:active { button:active {
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner); box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf,
inset 2px 2px #808080;
} }
button:focus { button:focus {
@ -89,23 +95,29 @@ button:focus {
outline-offset: -4px; outline-offset: -4px;
} }
:disabled, :disabled {
color: #808080;
text-shadow: 1px 1px 0 #ffffff;
}
:disabled + label { :disabled + label {
color: var(--button-shadow); color: #808080;
text-shadow: 1px 1px 0 var(--button-highlight); text-shadow: 1px 1px 0 #ffffff;
} }
.dialog { .dialog {
box-shadow: var(--border-raised-outer), var(--border-raised-inner); box-shadow: inset -1px -1px #0a0a0a,
background: var(--surface); inset 1px 1px #ffffff, inset -2px -2px #808080,
inset 2px 2px #dfdfdf;
background: #c0c0c0;
padding: 3px; padding: 3px;
} }
.menubar { .menubar {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
var(--dialog-blue), #000080,
var(--dialog-blue-light) #1084d0
); );
padding: 2px; padding: 2px;
display: flex; display: flex;
@ -157,11 +169,11 @@ button:focus {
} }
.dialog-body { .dialog-body {
margin: var(--element-spacing); margin: 8px;
} }
.dialog-body > * + * { .dialog-body > * + * {
margin-top: var(--element-spacing); margin-top: 8px;
} }
.align-right { .align-right {
@ -170,14 +182,16 @@ button:focus {
fieldset { fieldset {
border: none; border: none;
box-shadow: var(--border-sunken-outer), var(--border-raised-inner); box-shadow: inset -1px -1px #ffffff,
padding: calc(2 * var(--border-width) + var(--element-spacing)); inset 1px 1px #0a0a0a, inset -2px -2px #808080,
padding-block-start: var(--element-spacing); inset 2px 2px #dfdfdf;
padding: calc(2 * 1px + 8px);
padding-block-start: 8px;
margin: 0; margin: 0;
} }
legend { legend {
background: var(--surface); background: #c0c0c0;
} }
.field-row { .field-row {
@ -186,11 +200,11 @@ legend {
} }
[class^="field-row"] + [class^="field-row"] { [class^="field-row"] + [class^="field-row"] {
margin-top: var(--grouped-element-spacing); margin-top: 6px;
} }
.field-row * + * { .field-row * + * {
margin-left: var(--grouped-element-spacing); margin-left: 6px;
} }
.field-row-stacked { .field-row-stacked {
@ -199,7 +213,7 @@ legend {
} }
.field-row-stacked * + * { .field-row-stacked * + * {
margin-top: var(--grouped-element-spacing); margin-top: 6px;
} }
label { label {
@ -219,39 +233,55 @@ input[type="checkbox"] {
input[type="radio"] + label { input[type="radio"] + label {
position: relative; position: relative;
margin-left: var(--radio-total-width); margin-left: calc(12px + 6px);
} }
input[type="radio"] + label::before { input[type="radio"] + label::before {
content: ""; content: "";
position: absolute; position: absolute;
left: calc(-1 * var(--radio-total-width)); left: calc(-1 * (12px + 6px));
display: inline-block; display: inline-block;
width: var(--radio-width); width: 12px;
height: var(--radio-width); height: 12px;
margin-right: var(--radio-label-spacing); margin-right: 6px;
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"); 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 { input[type="radio"]:checked + label::after {
--radio-dot-width: 4px; --radio-dot-width: 4px;
--radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2); --radio-dot-top: undefined;
--radio-dot-left: calc( --radio-dot-left: undefined;
-1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
--radio-dot-width
) / 2
);
content: ""; content: "";
display: block; display: block;
width: var(--radio-dot-width); width: undefined;
height: var(--radio-dot-width); height: undefined;
top: var(--radio-dot-top); top: undefined;
left: var(--radio-dot-left); left: undefined;
position: absolute; 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"); 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"]:checked + label::after::after {
left: undefined;
}
input[type="radio"]:checked + label::after::after {
top: undefined;
}
input[type="radio"]:checked + label::after::after {
top: undefined;
}
input[type="radio"]:checked + label::after::after {
height: 4px;
}
input[type="radio"]:checked + label::after::after {
width: 4px;
}
input[type="radio"]:focus + label, input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label { input[type="checkbox"]:focus + label {
outline: 1px dotted #000000; outline: 1px dotted #000000;
@ -267,19 +297,23 @@ input[type="radio"][disabled]:checked + label::after {
input[type="checkbox"] + label { input[type="checkbox"] + label {
position: relative; position: relative;
margin-left: var(--checkbox-total-width); margin-left: calc(13px +
6px);
} }
input[type="checkbox"] + label::before { input[type="checkbox"] + label::before {
content: ""; content: "";
position: absolute; position: absolute;
left: calc(-1 * var(--checkbox-total-width)); left: calc(-1 * (13px +
6px));
display: inline-block; display: inline-block;
width: var(--checkbox-width); width: 13px;
height: var(--checkbox-width); height: 13px;
background: var(--button-highlight); background: #ffffff;
box-shadow: var(--border-field); box-shadow: inset -1px -1px #ffffff,
margin-right: var(--radio-label-spacing); inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
margin-right: 6px;
} }
input[type="checkbox"]:checked + label::after { input[type="checkbox"]:checked + label::after {
@ -289,31 +323,75 @@ input[type="checkbox"]:checked + label::after {
content: ""; content: "";
display: block; display: block;
width: var(--checkmark-width); width: undefined;
height: var(--checkmark-width); height: undefined;
position: absolute; position: absolute;
top: var(--checkmark-top); top: undefined;
left: calc( left: undefined;
-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"); 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"]:checked + label::after::after {
left: calc(
-1 * (13px +
6px) + 3px
);
}
input[type="checkbox"]:checked + label::after::after {
left: calc(
-1 * (13px +
6px) + 3px
);
}
input[type="checkbox"]:checked + label::after::after {
top: 3px;
}
input[type="checkbox"]:checked + label::after::after {
height: 7px;
}
input[type="checkbox"]:checked + label::after::after {
width: 7px;
}
input[type="checkbox"][disabled] + label::before { input[type="checkbox"][disabled] + label::before {
background: var(--surface); background: #c0c0c0;
} }
input[type="checkbox"][disabled]:checked + label::after { 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"); 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"], input[type="text"] {
select, padding: 3px 4px;
border: none;
box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
background-color: #ffffff;
box-sizing: border-box;
}
select {
padding: 3px 4px;
border: none;
box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
background-color: #ffffff;
box-sizing: border-box;
}
textarea { textarea {
padding: 3px 4px; padding: 3px 4px;
border: none; border: none;
box-shadow: var(--border-field); box-shadow: inset -1px -1px #ffffff,
background-color: var(--button-highlight); inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
background-color: #ffffff;
box-sizing: border-box; box-sizing: border-box;
} }
@ -344,8 +422,8 @@ textarea:focus {
} }
select:focus { select:focus {
color: var(--button-highlight); color: #ffffff;
background-color: var(--dialog-blue); background-color: #000080;
} }
select:focus option { select:focus option {
color: #000; color: #000;
@ -357,17 +435,19 @@ select:active {
} }
a { a {
color: var(--link-blue); color: #0000ff;
} }
a:focus { a:focus {
outline: 1px dotted var(--link-blue); outline: 1px dotted #0000ff;
} }
ul.treeview { ul.treeview {
display: block; display: block;
background: var(--button-highlight); background: #ffffff;
box-shadow: var(--border-field); box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
padding: 6px; padding: 6px;
margin: 0; margin: 0;
} }
@ -382,8 +462,8 @@ ul.treeview a {
} }
ul.treeview a:focus { ul.treeview a:focus {
background-color: var(--dialog-blue); background-color: #000080;
color: var(--button-highlight); color: #ffffff;
} }
ul.treeview ul, ul.treeview ul,
@ -420,13 +500,15 @@ ul.treeview ul > li:last-child::after {
top: 7px; top: 7px;
bottom: 0px; bottom: 0px;
width: 8px; width: 8px;
background: var(--button-highlight); background: #ffffff;
} }
pre { pre {
display: block; display: block;
background: var(--button-highlight); background: #ffffff;
box-shadow: var(--border-field); box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
padding: 12px 8px; padding: 12px 8px;
margin: 0; margin: 0;
font-family: monospace; font-family: monospace;
@ -448,7 +530,7 @@ summary:focus {
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: var(--button-face); background: #dfdfdf;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@ -456,8 +538,10 @@ summary:focus {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--button-face); background-color: #dfdfdf;
box-shadow: var(--border-raised-outer), var(--border-raised-inner); box-shadow: inset -1px -1px #0a0a0a,
inset 1px 1px #ffffff, inset -2px -2px #808080,
inset 2px 2px #dfdfdf;
} }
::-webkit-scrollbar-button:vertical:start { ::-webkit-scrollbar-button:vertical:start {

252
docs/style.css → docs/98.css
View File

@ -18,30 +18,32 @@
--radio-label-spacing: 6px; --radio-label-spacing: 6px;
/* Some detailed computations for radio buttons and checkboxes */ /* Some detailed computations for radio buttons and checkboxes */
--radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing); --radio-total-width-precalc: 12px + 6px;
--radio-total-width: calc(var(--radio-total-width-precalc)); --radio-total-width: calc(12px + 6px);
--radio-left: calc(-1 * var(--radio-total-width-precalc)); --radio-left: calc(-1 * 12px + 6px);
--checkbox-total-width-precalc: var(--checkbox-width) + --checkbox-total-width-precalc: 13px +
var(--radio-label-spacing); 6px;
--checkbox-total-width: calc(var(--checkbox-total-width-precalc)); --checkbox-total-width: calc(13px +
--checkbox-left: calc(-1 * var(--checkbox-total-width-precalc)); 6px);
--checkbox-left: calc(-1 * 13px +
6px);
/* Borders */ /* Borders */
--border-width: 1px; --border-width: 1px;
--border-raised-outer: inset -1px -1px var(--window-frame), --border-raised-outer: inset -1px -1px #0a0a0a,
inset 1px 1px var(--button-highlight); inset 1px 1px #ffffff;
--border-raised-inner: inset -2px -2px var(--button-shadow), --border-raised-inner: inset -2px -2px #808080,
inset 2px 2px var(--button-face); inset 2px 2px #dfdfdf;
--border-sunken-outer: inset -1px -1px var(--button-highlight), --border-sunken-outer: inset -1px -1px #ffffff,
inset 1px 1px var(--window-frame); inset 1px 1px #0a0a0a;
--border-sunken-inner: inset -2px -2px var(--button-face), --border-sunken-inner: inset -2px -2px #dfdfdf,
inset 2px 2px var(--button-shadow); inset 2px 2px #808080;
/* Field borders (checkbox, input, etc) flip window-frame and button-shadow */ /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
--border-field: inset -1px -1px var(--button-highlight), --border-field: inset -1px -1px #ffffff,
inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face), inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px var(--window-frame); inset 2px 2px #0a0a0a;
} }
* { * {
@ -72,8 +74,10 @@ u {
button { button {
box-sizing: border-box; box-sizing: border-box;
border: none; border: none;
background: var(--surface); background: #c0c0c0;
box-shadow: var(--border-raised-outer), var(--border-raised-inner); box-shadow: inset -1px -1px #0a0a0a,
inset 1px 1px #ffffff, inset -2px -2px #808080,
inset 2px 2px #dfdfdf;
min-width: 75px; min-width: 75px;
min-height: 23px; min-height: 23px;
@ -81,7 +85,9 @@ button {
} }
button:active { button:active {
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner); box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf,
inset 2px 2px #808080;
} }
button:focus { button:focus {
@ -89,23 +95,29 @@ button:focus {
outline-offset: -4px; outline-offset: -4px;
} }
:disabled, :disabled {
color: #808080;
text-shadow: 1px 1px 0 #ffffff;
}
:disabled + label { :disabled + label {
color: var(--button-shadow); color: #808080;
text-shadow: 1px 1px 0 var(--button-highlight); text-shadow: 1px 1px 0 #ffffff;
} }
.dialog { .dialog {
box-shadow: var(--border-raised-outer), var(--border-raised-inner); box-shadow: inset -1px -1px #0a0a0a,
background: var(--surface); inset 1px 1px #ffffff, inset -2px -2px #808080,
inset 2px 2px #dfdfdf;
background: #c0c0c0;
padding: 3px; padding: 3px;
} }
.menubar { .menubar {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
var(--dialog-blue), #000080,
var(--dialog-blue-light) #1084d0
); );
padding: 2px; padding: 2px;
display: flex; display: flex;
@ -157,11 +169,11 @@ button:focus {
} }
.dialog-body { .dialog-body {
margin: var(--element-spacing); margin: 8px;
} }
.dialog-body > * + * { .dialog-body > * + * {
margin-top: var(--element-spacing); margin-top: 8px;
} }
.align-right { .align-right {
@ -170,14 +182,16 @@ button:focus {
fieldset { fieldset {
border: none; border: none;
box-shadow: var(--border-sunken-outer), var(--border-raised-inner); box-shadow: inset -1px -1px #ffffff,
padding: calc(2 * var(--border-width) + var(--element-spacing)); inset 1px 1px #0a0a0a, inset -2px -2px #808080,
padding-block-start: var(--element-spacing); inset 2px 2px #dfdfdf;
padding: calc(2 * 1px + 8px);
padding-block-start: 8px;
margin: 0; margin: 0;
} }
legend { legend {
background: var(--surface); background: #c0c0c0;
} }
.field-row { .field-row {
@ -186,11 +200,11 @@ legend {
} }
[class^="field-row"] + [class^="field-row"] { [class^="field-row"] + [class^="field-row"] {
margin-top: var(--grouped-element-spacing); margin-top: 6px;
} }
.field-row * + * { .field-row * + * {
margin-left: var(--grouped-element-spacing); margin-left: 6px;
} }
.field-row-stacked { .field-row-stacked {
@ -199,7 +213,7 @@ legend {
} }
.field-row-stacked * + * { .field-row-stacked * + * {
margin-top: var(--grouped-element-spacing); margin-top: 6px;
} }
label { label {
@ -219,39 +233,55 @@ input[type="checkbox"] {
input[type="radio"] + label { input[type="radio"] + label {
position: relative; position: relative;
margin-left: var(--radio-total-width); margin-left: calc(12px + 6px);
} }
input[type="radio"] + label::before { input[type="radio"] + label::before {
content: ""; content: "";
position: absolute; position: absolute;
left: calc(-1 * var(--radio-total-width)); left: calc(-1 * (12px + 6px));
display: inline-block; display: inline-block;
width: var(--radio-width); width: 12px;
height: var(--radio-width); height: 12px;
margin-right: var(--radio-label-spacing); margin-right: 6px;
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"); 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 { input[type="radio"]:checked + label::after {
--radio-dot-width: 4px; --radio-dot-width: 4px;
--radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2); --radio-dot-top: undefined;
--radio-dot-left: calc( --radio-dot-left: undefined;
-1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
--radio-dot-width
) / 2
);
content: ""; content: "";
display: block; display: block;
width: var(--radio-dot-width); width: undefined;
height: var(--radio-dot-width); height: undefined;
top: var(--radio-dot-top); top: undefined;
left: var(--radio-dot-left); left: undefined;
position: absolute; 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"); 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"]:checked + label::after::after {
left: undefined;
}
input[type="radio"]:checked + label::after::after {
top: undefined;
}
input[type="radio"]:checked + label::after::after {
top: undefined;
}
input[type="radio"]:checked + label::after::after {
height: 4px;
}
input[type="radio"]:checked + label::after::after {
width: 4px;
}
input[type="radio"]:focus + label, input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label { input[type="checkbox"]:focus + label {
outline: 1px dotted #000000; outline: 1px dotted #000000;
@ -267,19 +297,23 @@ input[type="radio"][disabled]:checked + label::after {
input[type="checkbox"] + label { input[type="checkbox"] + label {
position: relative; position: relative;
margin-left: var(--checkbox-total-width); margin-left: calc(13px +
6px);
} }
input[type="checkbox"] + label::before { input[type="checkbox"] + label::before {
content: ""; content: "";
position: absolute; position: absolute;
left: calc(-1 * var(--checkbox-total-width)); left: calc(-1 * (13px +
6px));
display: inline-block; display: inline-block;
width: var(--checkbox-width); width: 13px;
height: var(--checkbox-width); height: 13px;
background: var(--button-highlight); background: #ffffff;
box-shadow: var(--border-field); box-shadow: inset -1px -1px #ffffff,
margin-right: var(--radio-label-spacing); inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
margin-right: 6px;
} }
input[type="checkbox"]:checked + label::after { input[type="checkbox"]:checked + label::after {
@ -289,31 +323,75 @@ input[type="checkbox"]:checked + label::after {
content: ""; content: "";
display: block; display: block;
width: var(--checkmark-width); width: undefined;
height: var(--checkmark-width); height: undefined;
position: absolute; position: absolute;
top: var(--checkmark-top); top: undefined;
left: calc( left: undefined;
-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"); 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"]:checked + label::after::after {
left: calc(
-1 * (13px +
6px) + 3px
);
}
input[type="checkbox"]:checked + label::after::after {
left: calc(
-1 * (13px +
6px) + 3px
);
}
input[type="checkbox"]:checked + label::after::after {
top: 3px;
}
input[type="checkbox"]:checked + label::after::after {
height: 7px;
}
input[type="checkbox"]:checked + label::after::after {
width: 7px;
}
input[type="checkbox"][disabled] + label::before { input[type="checkbox"][disabled] + label::before {
background: var(--surface); background: #c0c0c0;
} }
input[type="checkbox"][disabled]:checked + label::after { 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"); 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"], input[type="text"] {
select, padding: 3px 4px;
border: none;
box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
background-color: #ffffff;
box-sizing: border-box;
}
select {
padding: 3px 4px;
border: none;
box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
background-color: #ffffff;
box-sizing: border-box;
}
textarea { textarea {
padding: 3px 4px; padding: 3px 4px;
border: none; border: none;
box-shadow: var(--border-field); box-shadow: inset -1px -1px #ffffff,
background-color: var(--button-highlight); inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
background-color: #ffffff;
box-sizing: border-box; box-sizing: border-box;
} }
@ -344,8 +422,8 @@ textarea:focus {
} }
select:focus { select:focus {
color: var(--button-highlight); color: #ffffff;
background-color: var(--dialog-blue); background-color: #000080;
} }
select:focus option { select:focus option {
color: #000; color: #000;
@ -357,17 +435,19 @@ select:active {
} }
a { a {
color: var(--link-blue); color: #0000ff;
} }
a:focus { a:focus {
outline: 1px dotted var(--link-blue); outline: 1px dotted #0000ff;
} }
ul.treeview { ul.treeview {
display: block; display: block;
background: var(--button-highlight); background: #ffffff;
box-shadow: var(--border-field); box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
padding: 6px; padding: 6px;
margin: 0; margin: 0;
} }
@ -382,8 +462,8 @@ ul.treeview a {
} }
ul.treeview a:focus { ul.treeview a:focus {
background-color: var(--dialog-blue); background-color: #000080;
color: var(--button-highlight); color: #ffffff;
} }
ul.treeview ul, ul.treeview ul,
@ -420,13 +500,15 @@ ul.treeview ul > li:last-child::after {
top: 7px; top: 7px;
bottom: 0px; bottom: 0px;
width: 8px; width: 8px;
background: var(--button-highlight); background: #ffffff;
} }
pre { pre {
display: block; display: block;
background: var(--button-highlight); background: #ffffff;
box-shadow: var(--border-field); box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #808080, inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
padding: 12px 8px; padding: 12px 8px;
margin: 0; margin: 0;
font-family: monospace; font-family: monospace;
@ -448,7 +530,7 @@ summary:focus {
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: var(--button-face); background: #dfdfdf;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@ -456,8 +538,10 @@ summary:focus {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--button-face); background-color: #dfdfdf;
box-shadow: var(--border-raised-outer), var(--border-raised-inner); box-shadow: inset -1px -1px #0a0a0a,
inset 1px 1px #ffffff, inset -2px -2px #808080,
inset 2px 2px #dfdfdf;
} }
::-webkit-scrollbar-button:vertical:start { ::-webkit-scrollbar-button:vertical:start {

2
docs/index.html
View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="style.css"></style> <link rel="stylesheet" href="98.css"></style>
<link rel="stylesheet" href="docs.css"></style> <link rel="stylesheet" href="docs.css"></style>
</head> </head>
<body> <body>

2
docs/index.html.ejs
View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="style.css"></style> <link rel="stylesheet" href="98.css"></style>
<link rel="stylesheet" href="docs.css"></style> <link rel="stylesheet" href="docs.css"></style>
</head> </head>
<body> <body>

46
package-lock.json generated
View File

@ -19,6 +19,12 @@
"color-convert": "^1.9.0" "color-convert": "^1.9.0"
} }
}, },
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
"dev": true
},
"boolbase": { "boolbase": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@ -139,6 +145,12 @@
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
"dev": true "dev": true
}, },
"extend": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
"dev": true
},
"has-ansi": { "has-ansi": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
@ -212,6 +224,40 @@
"supports-color": "^6.1.0" "supports-color": "^6.1.0"
} }
}, },
"postcss-css-variables": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.14.0.tgz",
"integrity": "sha512-fEdksFdcvn/vvTddy4KoPDojZt9hQZx3oXHAIgoYJHsnk97ZTP08unM2UAqksiqdytv93415kBwP+c3/jcopyg==",
"dev": true,
"requires": {
"balanced-match": "^1.0.0",
"escape-string-regexp": "^1.0.3",
"extend": "^3.0.1",
"postcss": "^6.0.8"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
},
"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"
}
}
}
},
"postcss-inline": { "postcss-inline": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/postcss-inline/-/postcss-inline-1.2.0.tgz", "resolved": "https://registry.npmjs.org/postcss-inline/-/postcss-inline-1.2.0.tgz",

4
package.json
View File

@ -28,7 +28,9 @@
"dedent": "^0.7.0", "dedent": "^0.7.0",
"ejs": "^3.0.2", "ejs": "^3.0.2",
"mkdirp": "^1.0.4", "mkdirp": "^1.0.4",
"postcss-css-variables": "^0.14.0",
"postcss-inline": "^1.2.0", "postcss-inline": "^1.2.0",
"postcss-inline-svg": "^4.1.0" "postcss-inline-svg": "^4.1.0"
} },
"dependencies": {}
} }

4
style.css
View File

@ -225,7 +225,7 @@ input[type="radio"] + label {
input[type="radio"] + label::before { input[type="radio"] + label::before {
content: ""; content: "";
position: absolute; position: absolute;
left: calc(-1 * var(--radio-total-width)); left: calc(-1 * (var(--radio-total-width-precalc)));
display: inline-block; display: inline-block;
width: var(--radio-width); width: var(--radio-width);
height: var(--radio-width); height: var(--radio-width);
@ -273,7 +273,7 @@ input[type="checkbox"] + label {
input[type="checkbox"] + label::before { input[type="checkbox"] + label::before {
content: ""; content: "";
position: absolute; position: absolute;
left: calc(-1 * var(--checkbox-total-width)); left: calc(-1 * (var(--checkbox-total-width-precalc)));
display: inline-block; display: inline-block;
width: var(--checkbox-width); width: var(--checkbox-width);
height: var(--checkbox-width); height: var(--checkbox-width);