From e8d87ed52fedcb1e59ecf304a1169f91716d6e5e Mon Sep 17 00:00:00 2001 From: Jordan Scales Date: Thu, 23 Apr 2020 12:48:46 -0400 Subject: [PATCH] remove windows line-endings --- build/98.css | 1052 ++++++++++++++++++------------------ docs/98.css | 1052 ++++++++++++++++++------------------ docs/index.html | 894 +++++++++++++++--------------- docs/index.html.ejs | 1252 +++++++++++++++++++++---------------------- icon/close.svg | 6 +- icon/maximize.svg | 6 +- icon/minimize.svg | 6 +- style.css | 968 ++++++++++++++++----------------- 8 files changed, 2618 insertions(+), 2618 deletions(-) diff --git a/build/98.css b/build/98.css index d2bdd94..032ce35 100644 --- a/build/98.css +++ b/build/98.css @@ -1,526 +1,526 @@ -/** - * 98.css - * Copyright (c) 2020 Jordan Scales - * https://github.com/jdan/98.css/blob/master/LICENSE - */ - -: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: 12px + 6px; - --radio-total-width: 18px; - --radio-left: -6px; - --radio-dot-width: 4px; - --radio-dot-top: 4px; - --radio-dot-left: -14px; - - --checkbox-total-width-precalc: 13px + - 6px; - --checkbox-total-width: 19px; - --checkbox-left: -7px; - --checkmark-width: 7px; - --checkmark-top: 3px; - --checkmark-left: 3px; - - /* Borders */ - --border-width: 1px; - --border-raised-outer: inset -1px -1px #0a0a0a, - inset 1px 1px #ffffff; - --border-raised-inner: inset -2px -2px #808080, - inset 2px 2px #dfdfdf; - --border-sunken-outer: inset -1px -1px #ffffff, - inset 1px 1px #0a0a0a; - --border-sunken-inner: inset -2px -2px #dfdfdf, - inset 2px 2px #808080; - - /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */ - --border-field: inset -1px -1px #ffffff, - inset 1px 1px #808080, inset -2px -2px #dfdfdf, - inset 2px 2px #0a0a0a; -} - -* { - font-family: Arial; - font-size: 12px; - -webkit-font-smoothing: none; - color: #222222; -} - -h1 { - font-size: 5rem; -} - -h2 { - font-size: 2.5rem; -} - -h3 { - font-size: 2rem; -} - -h4 { - font-size: 1.5rem; -} - -u { - text-decoration: none; - border-bottom: 0.5px solid #222222; -} - -button { - box-sizing: border-box; - border: none; - background: #c0c0c0; - box-shadow: inset -1px -1px #0a0a0a, - inset 1px 1px #ffffff, inset -2px -2px #808080, - inset 2px 2px #dfdfdf; - border-radius: 0; - - min-width: 75px; - min-height: 23px; - padding: 0 12px; -} - -button:not(:disabled):active { - box-shadow: inset -1px -1px #ffffff, - inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, - inset 2px 2px #808080; -} - -button:focus { - outline: 1px dotted #000000; - outline-offset: -4px; -} - -:disabled { - color: #808080; - text-shadow: 1px 1px 0 #ffffff; -} - -:disabled + label { - color: #808080; - text-shadow: 1px 1px 0 #ffffff; -} - -.window { - box-shadow: inset -1px -1px #0a0a0a, - inset 1px 1px #ffffff, inset -2px -2px #808080, - inset 2px 2px #dfdfdf; - background: #c0c0c0; - padding: 3px; -} - -.title-bar { - background: linear-gradient( - 90deg, - #000080, - #1084d0 - ); - padding: 2px; - display: flex; - justify-content: space-between; - align-items: center; -} - -.title-bar-text { - font-weight: bold; - color: white; - letter-spacing: 0; - margin-right: 24px; -} - -.title-bar-controls { - display: flex; -} - -.title-bar-controls button { - padding: 0; - display: block; - min-width: 14px; - min-height: 12px; -} - -.title-bar-controls button:focus { - outline: none; -} - -.title-bar-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; -} - -.title-bar-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; -} - -.title-bar-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; -} - -.window-body { - margin: 8px; -} - -fieldset { - border: none; - box-shadow: inset -1px -1px #ffffff, - inset 1px 1px #0a0a0a, inset -2px -2px #808080, - inset 2px 2px #dfdfdf; - padding: 10px; - padding-block-start: 8px; - margin: 0; -} - -legend { - background: #c0c0c0; -} - -.field-row { - display: flex; - align-items: center; -} - -[class^="field-row"] + [class^="field-row"] { - margin-top: 6px; -} - -.field-row * + * { - margin-left: 6px; -} - -.field-row-stacked { - display: flex; - flex-direction: column; -} - -.field-row-stacked * + * { - margin-top: 6px; -} - -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: 18px; -} - -input[type="radio"] + label::before { - content: ""; - position: absolute; - left: -18px; - display: inline-block; - width: 12px; - height: 12px; - 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"); -} - -input[type="radio"]:checked + label::after { - content: ""; - display: block; - width: 4px; - height: 4px; - top: 4px; - left: -14px; - 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: 19px; -} - -input[type="checkbox"] + label::before { - content: ""; - position: absolute; - left: -19px; - display: inline-block; - width: 13px; - height: 13px; - background: #ffffff; - box-shadow: inset -1px -1px #ffffff, - inset 1px 1px #808080, inset -2px -2px #dfdfdf, - inset 2px 2px #0a0a0a; - margin-right: 6px; -} - -input[type="checkbox"]:checked + label::after { - content: ""; - display: block; - width: 7px; - height: 7px; - position: absolute; - top: 3px; - left: -16px; - 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: #c0c0c0; -} - -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"] { - 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; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0; -} - -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; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0; -} - -textarea { - 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; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0; -} - -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; - padding-right: 32px; - 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; - border-radius: 0; -} - -select:focus, -input[type="text"]:focus, -textarea:focus { - outline: none; -} - -select:focus { - color: #ffffff; - background-color: #000080; -} -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: #0000ff; -} - -a:focus { - outline: 1px dotted #0000ff; -} - -ul.tree-view { - display: block; - background: #ffffff; - box-shadow: inset -1px -1px #ffffff, - inset 1px 1px #808080, inset -2px -2px #dfdfdf, - inset 2px 2px #0a0a0a; - padding: 6px; - margin: 0; -} - -ul.tree-view li { - list-style-type: none; -} - -ul.tree-view a { - text-decoration: none; - color: #000; -} - -ul.tree-view a:focus { - background-color: #000080; - color: #ffffff; -} - -ul.tree-view ul, -ul.tree-view li { - margin-top: 3px; -} - -ul.tree-view ul { - margin-left: 16px; - padding-left: 16px; - /* Goes down too far */ - border-left: 1px dotted #808080; -} - -ul.tree-view ul > li { - position: relative; -} -ul.tree-view ul > li::before { - content: ""; - display: block; - position: absolute; - left: -16px; - top: 6px; - width: 12px; - border-bottom: 1px dotted #808080; -} - -/* Cover the bottom of the left dotted border */ -ul.tree-view ul > li:last-child::after { - content: ""; - display: block; - position: absolute; - left: -20px; - top: 7px; - bottom: 0px; - width: 8px; - background: #ffffff; -} - -pre { - display: block; - background: #ffffff; - box-shadow: inset -1px -1px #ffffff, - inset 1px 1px #808080, inset -2px -2px #dfdfdf, - inset 2px 2px #0a0a0a; - padding: 12px 8px; - margin: 0; -} - -code, -code * { - font-family: monospace; -} - -summary:focus { - outline: 1px dotted #000000; -} - -::-webkit-scrollbar { - width: 16px; -} -::-webkit-scrollbar:horizontal { - height: 17px; -} - -::-webkit-scrollbar-corner { - background: #dfdfdf; -} - -::-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: #dfdfdf; - box-shadow: inset -1px -1px #0a0a0a, - inset 1px 1px #ffffff, inset -2px -2px #808080, - inset 2px 2px #dfdfdf; -} - -::-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"); -} +/** + * 98.css + * Copyright (c) 2020 Jordan Scales + * https://github.com/jdan/98.css/blob/master/LICENSE + */ + +: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: 12px + 6px; + --radio-total-width: 18px; + --radio-left: -6px; + --radio-dot-width: 4px; + --radio-dot-top: 4px; + --radio-dot-left: -14px; + + --checkbox-total-width-precalc: 13px + + 6px; + --checkbox-total-width: 19px; + --checkbox-left: -7px; + --checkmark-width: 7px; + --checkmark-top: 3px; + --checkmark-left: 3px; + + /* Borders */ + --border-width: 1px; + --border-raised-outer: inset -1px -1px #0a0a0a, + inset 1px 1px #ffffff; + --border-raised-inner: inset -2px -2px #808080, + inset 2px 2px #dfdfdf; + --border-sunken-outer: inset -1px -1px #ffffff, + inset 1px 1px #0a0a0a; + --border-sunken-inner: inset -2px -2px #dfdfdf, + inset 2px 2px #808080; + + /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */ + --border-field: inset -1px -1px #ffffff, + inset 1px 1px #808080, inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; +} + +* { + font-family: Arial; + font-size: 12px; + -webkit-font-smoothing: none; + color: #222222; +} + +h1 { + font-size: 5rem; +} + +h2 { + font-size: 2.5rem; +} + +h3 { + font-size: 2rem; +} + +h4 { + font-size: 1.5rem; +} + +u { + text-decoration: none; + border-bottom: 0.5px solid #222222; +} + +button { + box-sizing: border-box; + border: none; + background: #c0c0c0; + box-shadow: inset -1px -1px #0a0a0a, + inset 1px 1px #ffffff, inset -2px -2px #808080, + inset 2px 2px #dfdfdf; + border-radius: 0; + + min-width: 75px; + min-height: 23px; + padding: 0 12px; +} + +button:not(:disabled):active { + box-shadow: inset -1px -1px #ffffff, + inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, + inset 2px 2px #808080; +} + +button:focus { + outline: 1px dotted #000000; + outline-offset: -4px; +} + +:disabled { + color: #808080; + text-shadow: 1px 1px 0 #ffffff; +} + +:disabled + label { + color: #808080; + text-shadow: 1px 1px 0 #ffffff; +} + +.window { + box-shadow: inset -1px -1px #0a0a0a, + inset 1px 1px #ffffff, inset -2px -2px #808080, + inset 2px 2px #dfdfdf; + background: #c0c0c0; + padding: 3px; +} + +.title-bar { + background: linear-gradient( + 90deg, + #000080, + #1084d0 + ); + padding: 2px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.title-bar-text { + font-weight: bold; + color: white; + letter-spacing: 0; + margin-right: 24px; +} + +.title-bar-controls { + display: flex; +} + +.title-bar-controls button { + padding: 0; + display: block; + min-width: 14px; + min-height: 12px; +} + +.title-bar-controls button:focus { + outline: none; +} + +.title-bar-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; +} + +.title-bar-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; +} + +.title-bar-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; +} + +.window-body { + margin: 8px; +} + +fieldset { + border: none; + box-shadow: inset -1px -1px #ffffff, + inset 1px 1px #0a0a0a, inset -2px -2px #808080, + inset 2px 2px #dfdfdf; + padding: 10px; + padding-block-start: 8px; + margin: 0; +} + +legend { + background: #c0c0c0; +} + +.field-row { + display: flex; + align-items: center; +} + +[class^="field-row"] + [class^="field-row"] { + margin-top: 6px; +} + +.field-row * + * { + margin-left: 6px; +} + +.field-row-stacked { + display: flex; + flex-direction: column; +} + +.field-row-stacked * + * { + margin-top: 6px; +} + +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: 18px; +} + +input[type="radio"] + label::before { + content: ""; + position: absolute; + left: -18px; + display: inline-block; + width: 12px; + height: 12px; + 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"); +} + +input[type="radio"]:checked + label::after { + content: ""; + display: block; + width: 4px; + height: 4px; + top: 4px; + left: -14px; + 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: 19px; +} + +input[type="checkbox"] + label::before { + content: ""; + position: absolute; + left: -19px; + display: inline-block; + width: 13px; + height: 13px; + background: #ffffff; + box-shadow: inset -1px -1px #ffffff, + inset 1px 1px #808080, inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + margin-right: 6px; +} + +input[type="checkbox"]:checked + label::after { + content: ""; + display: block; + width: 7px; + height: 7px; + position: absolute; + top: 3px; + left: -16px; + 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: #c0c0c0; +} + +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"] { + 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; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; +} + +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; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; +} + +textarea { + 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; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; +} + +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; + padding-right: 32px; + 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; + border-radius: 0; +} + +select:focus, +input[type="text"]:focus, +textarea:focus { + outline: none; +} + +select:focus { + color: #ffffff; + background-color: #000080; +} +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: #0000ff; +} + +a:focus { + outline: 1px dotted #0000ff; +} + +ul.tree-view { + display: block; + background: #ffffff; + box-shadow: inset -1px -1px #ffffff, + inset 1px 1px #808080, inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + padding: 6px; + margin: 0; +} + +ul.tree-view li { + list-style-type: none; +} + +ul.tree-view a { + text-decoration: none; + color: #000; +} + +ul.tree-view a:focus { + background-color: #000080; + color: #ffffff; +} + +ul.tree-view ul, +ul.tree-view li { + margin-top: 3px; +} + +ul.tree-view ul { + margin-left: 16px; + padding-left: 16px; + /* Goes down too far */ + border-left: 1px dotted #808080; +} + +ul.tree-view ul > li { + position: relative; +} +ul.tree-view ul > li::before { + content: ""; + display: block; + position: absolute; + left: -16px; + top: 6px; + width: 12px; + border-bottom: 1px dotted #808080; +} + +/* Cover the bottom of the left dotted border */ +ul.tree-view ul > li:last-child::after { + content: ""; + display: block; + position: absolute; + left: -20px; + top: 7px; + bottom: 0px; + width: 8px; + background: #ffffff; +} + +pre { + display: block; + background: #ffffff; + box-shadow: inset -1px -1px #ffffff, + inset 1px 1px #808080, inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + padding: 12px 8px; + margin: 0; +} + +code, +code * { + font-family: monospace; +} + +summary:focus { + outline: 1px dotted #000000; +} + +::-webkit-scrollbar { + width: 16px; +} +::-webkit-scrollbar:horizontal { + height: 17px; +} + +::-webkit-scrollbar-corner { + background: #dfdfdf; +} + +::-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: #dfdfdf; + box-shadow: inset -1px -1px #0a0a0a, + inset 1px 1px #ffffff, inset -2px -2px #808080, + inset 2px 2px #dfdfdf; +} + +::-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"); +} diff --git a/docs/98.css b/docs/98.css index d2bdd94..032ce35 100644 --- a/docs/98.css +++ b/docs/98.css @@ -1,526 +1,526 @@ -/** - * 98.css - * Copyright (c) 2020 Jordan Scales - * https://github.com/jdan/98.css/blob/master/LICENSE - */ - -: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: 12px + 6px; - --radio-total-width: 18px; - --radio-left: -6px; - --radio-dot-width: 4px; - --radio-dot-top: 4px; - --radio-dot-left: -14px; - - --checkbox-total-width-precalc: 13px + - 6px; - --checkbox-total-width: 19px; - --checkbox-left: -7px; - --checkmark-width: 7px; - --checkmark-top: 3px; - --checkmark-left: 3px; - - /* Borders */ - --border-width: 1px; - --border-raised-outer: inset -1px -1px #0a0a0a, - inset 1px 1px #ffffff; - --border-raised-inner: inset -2px -2px #808080, - inset 2px 2px #dfdfdf; - --border-sunken-outer: inset -1px -1px #ffffff, - inset 1px 1px #0a0a0a; - --border-sunken-inner: inset -2px -2px #dfdfdf, - inset 2px 2px #808080; - - /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */ - --border-field: inset -1px -1px #ffffff, - inset 1px 1px #808080, inset -2px -2px #dfdfdf, - inset 2px 2px #0a0a0a; -} - -* { - font-family: Arial; - font-size: 12px; - -webkit-font-smoothing: none; - color: #222222; -} - -h1 { - font-size: 5rem; -} - -h2 { - font-size: 2.5rem; -} - -h3 { - font-size: 2rem; -} - -h4 { - font-size: 1.5rem; -} - -u { - text-decoration: none; - border-bottom: 0.5px solid #222222; -} - -button { - box-sizing: border-box; - border: none; - background: #c0c0c0; - box-shadow: inset -1px -1px #0a0a0a, - inset 1px 1px #ffffff, inset -2px -2px #808080, - inset 2px 2px #dfdfdf; - border-radius: 0; - - min-width: 75px; - min-height: 23px; - padding: 0 12px; -} - -button:not(:disabled):active { - box-shadow: inset -1px -1px #ffffff, - inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, - inset 2px 2px #808080; -} - -button:focus { - outline: 1px dotted #000000; - outline-offset: -4px; -} - -:disabled { - color: #808080; - text-shadow: 1px 1px 0 #ffffff; -} - -:disabled + label { - color: #808080; - text-shadow: 1px 1px 0 #ffffff; -} - -.window { - box-shadow: inset -1px -1px #0a0a0a, - inset 1px 1px #ffffff, inset -2px -2px #808080, - inset 2px 2px #dfdfdf; - background: #c0c0c0; - padding: 3px; -} - -.title-bar { - background: linear-gradient( - 90deg, - #000080, - #1084d0 - ); - padding: 2px; - display: flex; - justify-content: space-between; - align-items: center; -} - -.title-bar-text { - font-weight: bold; - color: white; - letter-spacing: 0; - margin-right: 24px; -} - -.title-bar-controls { - display: flex; -} - -.title-bar-controls button { - padding: 0; - display: block; - min-width: 14px; - min-height: 12px; -} - -.title-bar-controls button:focus { - outline: none; -} - -.title-bar-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; -} - -.title-bar-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; -} - -.title-bar-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; -} - -.window-body { - margin: 8px; -} - -fieldset { - border: none; - box-shadow: inset -1px -1px #ffffff, - inset 1px 1px #0a0a0a, inset -2px -2px #808080, - inset 2px 2px #dfdfdf; - padding: 10px; - padding-block-start: 8px; - margin: 0; -} - -legend { - background: #c0c0c0; -} - -.field-row { - display: flex; - align-items: center; -} - -[class^="field-row"] + [class^="field-row"] { - margin-top: 6px; -} - -.field-row * + * { - margin-left: 6px; -} - -.field-row-stacked { - display: flex; - flex-direction: column; -} - -.field-row-stacked * + * { - margin-top: 6px; -} - -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: 18px; -} - -input[type="radio"] + label::before { - content: ""; - position: absolute; - left: -18px; - display: inline-block; - width: 12px; - height: 12px; - 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"); -} - -input[type="radio"]:checked + label::after { - content: ""; - display: block; - width: 4px; - height: 4px; - top: 4px; - left: -14px; - 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: 19px; -} - -input[type="checkbox"] + label::before { - content: ""; - position: absolute; - left: -19px; - display: inline-block; - width: 13px; - height: 13px; - background: #ffffff; - box-shadow: inset -1px -1px #ffffff, - inset 1px 1px #808080, inset -2px -2px #dfdfdf, - inset 2px 2px #0a0a0a; - margin-right: 6px; -} - -input[type="checkbox"]:checked + label::after { - content: ""; - display: block; - width: 7px; - height: 7px; - position: absolute; - top: 3px; - left: -16px; - 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: #c0c0c0; -} - -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"] { - 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; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0; -} - -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; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0; -} - -textarea { - 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; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0; -} - -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; - padding-right: 32px; - 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; - border-radius: 0; -} - -select:focus, -input[type="text"]:focus, -textarea:focus { - outline: none; -} - -select:focus { - color: #ffffff; - background-color: #000080; -} -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: #0000ff; -} - -a:focus { - outline: 1px dotted #0000ff; -} - -ul.tree-view { - display: block; - background: #ffffff; - box-shadow: inset -1px -1px #ffffff, - inset 1px 1px #808080, inset -2px -2px #dfdfdf, - inset 2px 2px #0a0a0a; - padding: 6px; - margin: 0; -} - -ul.tree-view li { - list-style-type: none; -} - -ul.tree-view a { - text-decoration: none; - color: #000; -} - -ul.tree-view a:focus { - background-color: #000080; - color: #ffffff; -} - -ul.tree-view ul, -ul.tree-view li { - margin-top: 3px; -} - -ul.tree-view ul { - margin-left: 16px; - padding-left: 16px; - /* Goes down too far */ - border-left: 1px dotted #808080; -} - -ul.tree-view ul > li { - position: relative; -} -ul.tree-view ul > li::before { - content: ""; - display: block; - position: absolute; - left: -16px; - top: 6px; - width: 12px; - border-bottom: 1px dotted #808080; -} - -/* Cover the bottom of the left dotted border */ -ul.tree-view ul > li:last-child::after { - content: ""; - display: block; - position: absolute; - left: -20px; - top: 7px; - bottom: 0px; - width: 8px; - background: #ffffff; -} - -pre { - display: block; - background: #ffffff; - box-shadow: inset -1px -1px #ffffff, - inset 1px 1px #808080, inset -2px -2px #dfdfdf, - inset 2px 2px #0a0a0a; - padding: 12px 8px; - margin: 0; -} - -code, -code * { - font-family: monospace; -} - -summary:focus { - outline: 1px dotted #000000; -} - -::-webkit-scrollbar { - width: 16px; -} -::-webkit-scrollbar:horizontal { - height: 17px; -} - -::-webkit-scrollbar-corner { - background: #dfdfdf; -} - -::-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: #dfdfdf; - box-shadow: inset -1px -1px #0a0a0a, - inset 1px 1px #ffffff, inset -2px -2px #808080, - inset 2px 2px #dfdfdf; -} - -::-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"); -} +/** + * 98.css + * Copyright (c) 2020 Jordan Scales + * https://github.com/jdan/98.css/blob/master/LICENSE + */ + +: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: 12px + 6px; + --radio-total-width: 18px; + --radio-left: -6px; + --radio-dot-width: 4px; + --radio-dot-top: 4px; + --radio-dot-left: -14px; + + --checkbox-total-width-precalc: 13px + + 6px; + --checkbox-total-width: 19px; + --checkbox-left: -7px; + --checkmark-width: 7px; + --checkmark-top: 3px; + --checkmark-left: 3px; + + /* Borders */ + --border-width: 1px; + --border-raised-outer: inset -1px -1px #0a0a0a, + inset 1px 1px #ffffff; + --border-raised-inner: inset -2px -2px #808080, + inset 2px 2px #dfdfdf; + --border-sunken-outer: inset -1px -1px #ffffff, + inset 1px 1px #0a0a0a; + --border-sunken-inner: inset -2px -2px #dfdfdf, + inset 2px 2px #808080; + + /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */ + --border-field: inset -1px -1px #ffffff, + inset 1px 1px #808080, inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; +} + +* { + font-family: Arial; + font-size: 12px; + -webkit-font-smoothing: none; + color: #222222; +} + +h1 { + font-size: 5rem; +} + +h2 { + font-size: 2.5rem; +} + +h3 { + font-size: 2rem; +} + +h4 { + font-size: 1.5rem; +} + +u { + text-decoration: none; + border-bottom: 0.5px solid #222222; +} + +button { + box-sizing: border-box; + border: none; + background: #c0c0c0; + box-shadow: inset -1px -1px #0a0a0a, + inset 1px 1px #ffffff, inset -2px -2px #808080, + inset 2px 2px #dfdfdf; + border-radius: 0; + + min-width: 75px; + min-height: 23px; + padding: 0 12px; +} + +button:not(:disabled):active { + box-shadow: inset -1px -1px #ffffff, + inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, + inset 2px 2px #808080; +} + +button:focus { + outline: 1px dotted #000000; + outline-offset: -4px; +} + +:disabled { + color: #808080; + text-shadow: 1px 1px 0 #ffffff; +} + +:disabled + label { + color: #808080; + text-shadow: 1px 1px 0 #ffffff; +} + +.window { + box-shadow: inset -1px -1px #0a0a0a, + inset 1px 1px #ffffff, inset -2px -2px #808080, + inset 2px 2px #dfdfdf; + background: #c0c0c0; + padding: 3px; +} + +.title-bar { + background: linear-gradient( + 90deg, + #000080, + #1084d0 + ); + padding: 2px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.title-bar-text { + font-weight: bold; + color: white; + letter-spacing: 0; + margin-right: 24px; +} + +.title-bar-controls { + display: flex; +} + +.title-bar-controls button { + padding: 0; + display: block; + min-width: 14px; + min-height: 12px; +} + +.title-bar-controls button:focus { + outline: none; +} + +.title-bar-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; +} + +.title-bar-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; +} + +.title-bar-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; +} + +.window-body { + margin: 8px; +} + +fieldset { + border: none; + box-shadow: inset -1px -1px #ffffff, + inset 1px 1px #0a0a0a, inset -2px -2px #808080, + inset 2px 2px #dfdfdf; + padding: 10px; + padding-block-start: 8px; + margin: 0; +} + +legend { + background: #c0c0c0; +} + +.field-row { + display: flex; + align-items: center; +} + +[class^="field-row"] + [class^="field-row"] { + margin-top: 6px; +} + +.field-row * + * { + margin-left: 6px; +} + +.field-row-stacked { + display: flex; + flex-direction: column; +} + +.field-row-stacked * + * { + margin-top: 6px; +} + +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: 18px; +} + +input[type="radio"] + label::before { + content: ""; + position: absolute; + left: -18px; + display: inline-block; + width: 12px; + height: 12px; + 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"); +} + +input[type="radio"]:checked + label::after { + content: ""; + display: block; + width: 4px; + height: 4px; + top: 4px; + left: -14px; + 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: 19px; +} + +input[type="checkbox"] + label::before { + content: ""; + position: absolute; + left: -19px; + display: inline-block; + width: 13px; + height: 13px; + background: #ffffff; + box-shadow: inset -1px -1px #ffffff, + inset 1px 1px #808080, inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + margin-right: 6px; +} + +input[type="checkbox"]:checked + label::after { + content: ""; + display: block; + width: 7px; + height: 7px; + position: absolute; + top: 3px; + left: -16px; + 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: #c0c0c0; +} + +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"] { + 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; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; +} + +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; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; +} + +textarea { + 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; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; +} + +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; + padding-right: 32px; + 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; + border-radius: 0; +} + +select:focus, +input[type="text"]:focus, +textarea:focus { + outline: none; +} + +select:focus { + color: #ffffff; + background-color: #000080; +} +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: #0000ff; +} + +a:focus { + outline: 1px dotted #0000ff; +} + +ul.tree-view { + display: block; + background: #ffffff; + box-shadow: inset -1px -1px #ffffff, + inset 1px 1px #808080, inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + padding: 6px; + margin: 0; +} + +ul.tree-view li { + list-style-type: none; +} + +ul.tree-view a { + text-decoration: none; + color: #000; +} + +ul.tree-view a:focus { + background-color: #000080; + color: #ffffff; +} + +ul.tree-view ul, +ul.tree-view li { + margin-top: 3px; +} + +ul.tree-view ul { + margin-left: 16px; + padding-left: 16px; + /* Goes down too far */ + border-left: 1px dotted #808080; +} + +ul.tree-view ul > li { + position: relative; +} +ul.tree-view ul > li::before { + content: ""; + display: block; + position: absolute; + left: -16px; + top: 6px; + width: 12px; + border-bottom: 1px dotted #808080; +} + +/* Cover the bottom of the left dotted border */ +ul.tree-view ul > li:last-child::after { + content: ""; + display: block; + position: absolute; + left: -20px; + top: 7px; + bottom: 0px; + width: 8px; + background: #ffffff; +} + +pre { + display: block; + background: #ffffff; + box-shadow: inset -1px -1px #ffffff, + inset 1px 1px #808080, inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + padding: 12px 8px; + margin: 0; +} + +code, +code * { + font-family: monospace; +} + +summary:focus { + outline: 1px dotted #000000; +} + +::-webkit-scrollbar { + width: 16px; +} +::-webkit-scrollbar:horizontal { + height: 17px; +} + +::-webkit-scrollbar-corner { + background: #dfdfdf; +} + +::-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: #dfdfdf; + box-shadow: inset -1px -1px #0a0a0a, + inset 1px 1px #ffffff, inset -2px -2px #808080, + inset 2px 2px #dfdfdf; +} + +::-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"); +} diff --git a/docs/index.html b/docs/index.html index 3ae893c..371a180 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,203 +1,203 @@ - - - - 98.css - A design system for building faithful recreations of old UIs - - - - - - - - - - - - - - - - -
-

98.css

-
-

A design system for building faithful recreations of old UIs.

- -

Intro

-

- 98.css is a CSS library for building interfaces that look like Windows 98. - See more on GitHub. -

- -
-
-
- My First VB4 Program -
- -
- - - -
-
-
-

Hello, world!

-
- - -
-
-
- -

- This library relies on the usage of semantic HTML. To make a button, you'll need - to use a <button>. Input elements require labels. Icon buttons rely on - aria-label. This page will guide you through that process, but accessibility is a primary - goal of this project. -

- -

- You can override many of the styles of your elements while maintaining the appearance provided by - this library. Need more padding on your buttons? Go for it. Need to add some color to your input labels? - Be our guest. -

- -

- This library does not contain any JavaScript, it merely styles your HTML with some CSS. - This means 98.css is compatible with your frontend framework of choice. -

- -

- Here is an example of 98.css used with React, and - an example with vanilla JavaScript. The fastest way to use 98.css is to import it from unpkg. -

- - 
<link
-  rel="stylesheet"
-  href="https://unpkg.com/98.css"
->
- -

- You can install 98.css from the GitHub releases page, or from npm. -

- 
npm install 98.css
- -

Components

- -
-

Button

-
-
- A command button, also referred to as a push button, is a control - that causes the application to perform some action when the user clicks it. - -
— Microsoft Windows User Experience p. 160
-
- -

- A standard button measures 75px wide and 23px tall, with a raised outer and inner border. - They are given 12px of horizontal padding by default. -

- + + + + 98.css - A design system for building faithful recreations of old UIs + + + + + + + + + + + + + + + + +
+

98.css

+
+

A design system for building faithful recreations of old UIs.

+ +

Intro

+

+ 98.css is a CSS library for building interfaces that look like Windows 98. + See more on GitHub. +

+ +
+
+
+ My First VB4 Program +
+ +
+ + + +
+
+
+

Hello, world!

+
+ + +
+
+
+ +

+ This library relies on the usage of semantic HTML. To make a button, you'll need + to use a <button>. Input elements require labels. Icon buttons rely on + aria-label. This page will guide you through that process, but accessibility is a primary + goal of this project. +

+ +

+ You can override many of the styles of your elements while maintaining the appearance provided by + this library. Need more padding on your buttons? Go for it. Need to add some color to your input labels? + Be our guest. +

+ +

+ This library does not contain any JavaScript, it merely styles your HTML with some CSS. + This means 98.css is compatible with your frontend framework of choice. +

+ +

+ Here is an example of 98.css used with React, and + an example with vanilla JavaScript. The fastest way to use 98.css is to import it from unpkg. +

+ + 
<link
+  rel="stylesheet"
+  href="https://unpkg.com/98.css"
+>
+ +

+ You can install 98.css from the GitHub releases page, or from npm. +

+ 
npm install 98.css
+ +

Components

+ +
+

Button

+
+
+ A command button, also referred to as a push button, is a control + that causes the application to perform some action when the user clicks it. + +
— Microsoft Windows User Experience p. 160
+
+ +

+ A standard button measures 75px wide and 23px tall, with a raised outer and inner border. + They are given 12px of horizontal padding by default. +

+
Show code 
<button>Click me</button>
-
- -

- When buttons are clicked, the raised borders become sunken. - The following button is simulated to be in the pressed (active) state. -

- - +
+ +

+ When buttons are clicked, the raised borders become sunken. + The following button is simulated to be in the pressed (active) state. +

+ +
Show code 
<button>I am being pressed</button>
-
- -

- Disabled buttons maintain the same raised border, but have a "washed out" - appearance in their label. -

- +
+ +

+ Disabled buttons maintain the same raised border, but have a "washed out" + appearance in their label. +

+
Show code 
<button disabled>I cannot be clicked</button>
-
- -

- Button focus is communicated with a dotted border, set 4px within the contents of the button. - The following example is simulated to be focused. -

- + + +

+ Button focus is communicated with a dotted border, set 4px within the contents of the button. + The following example is simulated to be focused. +

+
Show code 
<button>I am focused</button>
-
- -
- -
-

Checkbox

-
-
- A check box represents an independent or non-exclusive choice. -
— Microsoft Windows User Experience p. 167
-
- -

- Checkboxes are represented with a sunken panel, populated with a "check" icon when - selected, next to a label indicating the choice. -

- -

- Note: You must include a corresponding label after - your checkbox, using the <label> element with a for attribute - pointed at the id of your input. This ensures the checkbox is easy to use with - assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key, - being able to click the entire label to select the box). -

- +
+ +
+ +
+

Checkbox

+
+
+ A check box represents an independent or non-exclusive choice. +
— Microsoft Windows User Experience p. 167
+
+ +

+ Checkboxes are represented with a sunken panel, populated with a "check" icon when + selected, next to a label indicating the choice. +

+ +

+ Note: You must include a corresponding label after + your checkbox, using the <label> element with a for attribute + pointed at the id of your input. This ensures the checkbox is easy to use with + assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key, + being able to click the entire label to select the box). +

+
@@ -206,18 +206,18 @@ 
<input type="checkbox" id="example1">
 <label for="example1">This is a checkbox</label>
-
- -

- Checkboxes can be selected and disabled with the standard checked and disabled - attributes. -

- -

- When grouping inputs, wrap each input in a container with the field-row class. This ensures - a consistent spacing between inputs. -

- +
+ +

+ Checkboxes can be selected and disabled with the standard checked and disabled + attributes. +

+ +

+ When grouping inputs, wrap each input in a container with the field-row class. This ensures + a consistent spacing between inputs. +

+
@@ -246,31 +246,31 @@ <label for="example4">I am inactive but still checked</label> </div> -
-
-
- -
-

OptionButton

-
-
- An option button, also referred to as a radio button, represents a single - choice within a limited set of mutually exclusive choices. That is, the user can choose only - one set of options. - -
— Microsoft Windows User Experience p. 164
-
- -

- Option buttons can be used via the radio type on an input element. -

- -

- Option buttons can be grouped by specifying a shared name attribute on each - input. Just as before: when grouping inputs, wrap each input in a container with the - field-row class to ensure a consistent spacing between inputs. -

- +
+ +
+ +
+

OptionButton

+
+
+ An option button, also referred to as a radio button, represents a single + choice within a limited set of mutually exclusive choices. That is, the user can choose only + one set of options. + +
— Microsoft Windows User Experience p. 164
+
+ +

+ Option buttons can be used via the radio type on an input element. +

+ +

+ Option buttons can be grouped by specifying a shared name attribute on each + input. Just as before: when grouping inputs, wrap each input in a container with the + field-row class to ensure a consistent spacing between inputs. +

+
@@ -291,13 +291,13 @@ <label for="radio6">No</label> </div> -
- -

- Option buttons can also be checked and disabled with their corresponding - HTML attributes. -

- +
+ +

+ Option buttons can also be checked and disabled with their corresponding + HTML attributes. +

+
@@ -326,27 +326,27 @@ <label for="radio9">Crunchy peanut butter is good</label> </div> -
-
-
- -
-

GroupBox

-
-
- A group box is a special control you can use to organize a set of - controls. A group box is a rectangular frame with an optional label that surrounds - a set of controls. - -
— Microsoft Windows User Experience p. 189
-
- -

- A group box can be used by wrapping your elements with the fieldset tag. - It contains a sunken outer border and a raised inner border, resembling an engraved box - around your controls. -

- +
+ +
+ +
+

GroupBox

+
+
+ A group box is a special control you can use to organize a set of + controls. A group box is a rectangular frame with an optional label that surrounds + a set of controls. + +
— Microsoft Windows User Experience p. 189
+
+ +

+ A group box can be used by wrapping your elements with the fieldset tag. + It contains a sunken outer border and a raised inner border, resembling an engraved box + around your controls. +

+
Select one:
@@ -381,13 +381,13 @@ </div> </fieldset> -
- -

- You can provide your group with a label by placing a legend element - within the fieldset. -

- +
+ +

+ You can provide your group with a label by placing a legend element + within the fieldset. +

+
Today's mood @@ -430,28 +430,28 @@ </div> </fieldset> -
- -
- -
-

TextBox

-
-
- A text box (also referred to as an edit control) is a - rectangular control where the user enters or edits text. It can - be defined to support a single line or multiple lines of text. - -
— Microsoft Windows User Experience p. 181
-
- -

- Text boxes can rendered by specifying a text type on an - input element. As with checkboxes and radio buttons, you - should provide a corresponding label with a properly set for - attribute, and wrap both in a container with the field-row class. -

- +
+ +
+ +
+

TextBox

+
+
+ A text box (also referred to as an edit control) is a + rectangular control where the user enters or edits text. It can + be defined to support a single line or multiple lines of text. + +
— Microsoft Windows User Experience p. 181
+
+ +

+ Text boxes can rendered by specifying a text type on an + input element. As with checkboxes and radio buttons, you + should provide a corresponding label with a properly set for + attribute, and wrap both in a container with the field-row class. +

+
@@ -464,13 +464,13 @@ <input id="text17" type="text" /> </div> -
- -

- Additionally, you can make use of the field-row-stacked class - to position your label above the input instead of beside it. -

- +
+ +

+ Additionally, you can make use of the field-row-stacked class + to position your label above the input instead of beside it. +

+
@@ -491,13 +491,13 @@ <input id="text19" type="text" /> </div> -
- -

- To support multiple lines in the user's input, use the textarea - element instead. -

- +
+ +

+ To support multiple lines in the user's input, use the textarea + element instead. +

+
@@ -510,29 +510,29 @@ <textarea id="text20" rows="8"></textarea> </div> -
-
-
- -
- -
-
- A drop-down list box allows the selection of only a - single item from a list. In its closed state, the control displays - the current value for the control. The user opens the list to change - the value. - -
- — Microsoft Windows User Experience p. 175 -
-
- -

- Dropdowns can be rendered by using the select and option - elements. -

- +
+ +
+ +
+ +
+
+ A drop-down list box allows the selection of only a + single item from a list. In its closed state, the control displays + the current value for the control. The user opens the list to change + the value. + +
+ — Microsoft Windows User Experience p. 175 +
+
+ +

+ Dropdowns can be rendered by using the select and option + elements. +

+
@@ -577,45 +577,45 @@ <option>1 - Unfortunate</option> </select> -
-
-
- -

Window

-

- The following components illustrate how to build complete windows using - 98.css. -

- -
-

Title Bar

-
-
- At the top edge of the window, inside its border, is the title bar - (also reffered to as the caption or caption bar), which extends across - the width of the window. The title bar identifies the contents of the - window. - -
- — Microsoft Windows User Experience p. 118 -
-
- -
- Include command buttons associated with the common commands of the - primary window in the title bar. These buttons act as shortcuts to specific - window commands. - -
- — Microsoft Windows User Experience p. 122 -
-
- -

- You can build a complete title bar by making use of three classes, - title-bar, title-bar-text, and title-bar-controls. -

- +
+ +
+ +

Window

+

+ The following components illustrate how to build complete windows using + 98.css. +

+ +
+

Title Bar

+
+
+ At the top edge of the window, inside its border, is the title bar + (also reffered to as the caption or caption bar), which extends across + the width of the window. The title bar identifies the contents of the + window. + +
+ — Microsoft Windows User Experience p. 118 +
+
+ +
+ Include command buttons associated with the common commands of the + primary window in the title bar. These buttons act as shortcuts to specific + window commands. + +
+ — Microsoft Windows User Experience p. 122 +
+
+ +

+ You can build a complete title bar by making use of three classes, + title-bar, title-bar-text, and title-bar-controls. +

+
A Title Bar
@@ -632,14 +632,14 @@ </div> </div> -
- -

- We make use of aria-label to render the Close button, to let - assistive technologies know the intent of this button. You may also use - "Minimize" and "Maximize" like so: -

- +
+ +

+ We make use of aria-label to render the Close button, to let + assistive technologies know the intent of this button. You may also use + "Minimize" and "Maximize" like so: +

+
A Title Bar
@@ -660,28 +660,28 @@ </div> </div> -
-
-
- -
-

Window contents

-
-
- Every window has a boundary that defines its shape. - -
- — Microsoft Windows User Experience p. 118 -
-
- -

- To give our title bar a home, we make use of the window - class. This provides a raised outer and inner border, as well as some - padding. We can freely resize the window by specifying a width in the - container style. -

- +
+ +
+ +
+

Window contents

+
+
+ Every window has a boundary that defines its shape. + +
+ — Microsoft Windows User Experience p. 118 +
+
+ +

+ To give our title bar a home, we make use of the window + class. This provides a raised outer and inner border, as well as some + padding. We can freely resize the window by specifying a width in the + container style. +

+
@@ -706,13 +706,13 @@ </div> </div> -
- -

- To draw the contents of the window, we use the window-body - class under the title bar. -

- +
+ +

+ To draw the contents of the window, we use the window-body + class under the title bar. +

+
@@ -743,29 +743,29 @@ </div> </div> -
-
-
- -
-

TreeView

-
-
- A tree view control is a special list box control - that displays a set of objects as an indented outline based - on their logical hierarchical relationship. - -
- — Microsoft Windows User Experience p. 178 -
-
- -

- To render a tree view, use an ul element with the - tree-view class. The children of this list (li - elements), can contain whatever you'd like. -

- +
+ +
+ +
+

TreeView

+
+
+ A tree view control is a special list box control + that displays a set of objects as an indented outline based + on their logical hierarchical relationship. + +
+ — Microsoft Windows User Experience p. 178 +
+
+ +

+ To render a tree view, use an ul element with the + tree-view class. The children of this list (li + elements), can contain whatever you'd like. +

+
  • We can put
    • @@ -780,14 +780,14 @@ <li>We want in here</li> </ul> -
- -

- To make this a tree, we can nest further ul elements - (no class needed on these). This will provide them with a nice dotted - border and indentation to illustrate the structure of the tree. -

- +
+ +

+ To make this a tree, we can nest further ul elements + (no class needed on these). This will provide them with a nice dotted + border and indentation to illustrate the structure of the tree. +

+
  • Table of Contents
    • @@ -832,28 +832,28 @@ <li>Special Thanks</li> </ul> -
- -
- -

Issues, Contributing, etc.

- -

- 98.css is MIT licensed. -

- -

- Refer to the GitHub issues page to see bugs - in my CSS or report new ones. I'd really like to see your pull requests (especially those new to - open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like - to make it a fun place to build your open-source muscle. -

- -

- Thank you for checking my little project out, I hope it brought you some joy today. Consider - starring/following along on GitHub and maybe - subscribing to more fun things on my twitter. 👋 -

-
- - + + + + +

Issues, Contributing, etc.

+ +

+ 98.css is MIT licensed. +

+ +

+ Refer to the GitHub issues page to see bugs + in my CSS or report new ones. I'd really like to see your pull requests (especially those new to + open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like + to make it a fun place to build your open-source muscle. +

+ +

+ Thank you for checking my little project out, I hope it brought you some joy today. Consider + starring/following along on GitHub and maybe + subscribing to more fun things on my twitter. 👋 +

+ + + diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 87778d2..01a629b 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -1,626 +1,626 @@ - - - - 98.css - A design system for building faithful recreations of old UIs - - - - - - - - - - - - - - - - -
-

98.css

-
-

A design system for building faithful recreations of old UIs.

- -

Intro

-

- 98.css is a CSS library for building interfaces that look like Windows 98. - See more on GitHub. -

- -
-
-
- My First VB4 Program -
- -
- - - -
-
-
-

Hello, world!

-
- - -
-
-
- -

- This library relies on the usage of semantic HTML. To make a button, you'll need - to use a <button>. Input elements require labels. Icon buttons rely on - aria-label. This page will guide you through that process, but accessibility is a primary - goal of this project. -

- -

- You can override many of the styles of your elements while maintaining the appearance provided by - this library. Need more padding on your buttons? Go for it. Need to add some color to your input labels? - Be our guest. -

- -

- This library does not contain any JavaScript, it merely styles your HTML with some CSS. - This means 98.css is compatible with your frontend framework of choice. -

- -

- Here is an example of 98.css used with React, and - an example with vanilla JavaScript. The fastest way to use 98.css is to import it from unpkg. -

- - 
<link
-  rel="stylesheet"
-  href="https://unpkg.com/98.css"
->
- -

- You can install 98.css from the GitHub releases page, or from npm. -

- 
npm install 98.css
- -

Components

- -
-

Button

-
-
- A command button, also referred to as a push button, is a control - that causes the application to perform some action when the user clicks it. - -
— Microsoft Windows User Experience p. 160
-
- -

- A standard button measures 75px wide and 23px tall, with a raised outer and inner border. - They are given 12px of horizontal padding by default. -

- - <%- example(``) %> - -

- When buttons are clicked, the raised borders become sunken. - The following button is simulated to be in the pressed (active) state. -

- - <% /* [[ ... ]] is used to render contents that - will not appear in the "Show code" section */ - %> - <%- example(`I am being pressed`) %> - -

- Disabled buttons maintain the same raised border, but have a "washed out" - appearance in their label. -

- - <%- example(``) %> - -

- Button focus is communicated with a dotted border, set 4px within the contents of the button. - The following example is simulated to be focused. -

- - <%- example(`I am focused`) %> -
-
- -
-

Checkbox

-
-
- A check box represents an independent or non-exclusive choice. -
— Microsoft Windows User Experience p. 167
-
- -

- Checkboxes are represented with a sunken panel, populated with a "check" icon when - selected, next to a label indicating the choice. -

- -

- Note: You must include a corresponding label after - your checkbox, using the <label> element with a for attribute - pointed at the id of your input. This ensures the checkbox is easy to use with - assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key, - being able to click the entire label to select the box). -

- - <%- example(` - - - `) %> - -

- Checkboxes can be selected and disabled with the standard checked and disabled - attributes. -

- -

- When grouping inputs, wrap each input in a container with the field-row class. This ensures - a consistent spacing between inputs. -

- - <%- example(` -
- - -
-
- - -
-
- - -
- `) %> -
-
- -
-

OptionButton

-
-
- An option button, also referred to as a radio button, represents a single - choice within a limited set of mutually exclusive choices. That is, the user can choose only - one set of options. - -
— Microsoft Windows User Experience p. 164
-
- -

- Option buttons can be used via the radio type on an input element. -

- -

- Option buttons can be grouped by specifying a shared name attribute on each - input. Just as before: when grouping inputs, wrap each input in a container with the - field-row class to ensure a consistent spacing between inputs. -

- - <%- example(` -
- - -
-
- - -
- `) %> - -

- Option buttons can also be checked and disabled with their corresponding - HTML attributes. -

- - <%- example(` -
- - -
-
- - -
-
- - -
- `) %> -
-
- -
-

GroupBox

-
-
- A group box is a special control you can use to organize a set of - controls. A group box is a rectangular frame with an optional label that surrounds - a set of controls. - -
— Microsoft Windows User Experience p. 189
-
- -

- A group box can be used by wrapping your elements with the fieldset tag. - It contains a sunken outer border and a raised inner border, resembling an engraved box - around your controls. -

- - <%- example(` -
-
Select one:
-
- - -
-
- - -
-
- - -
-
- `) %> - -

- You can provide your group with a label by placing a legend element - within the fieldset. -

- - <%- example(` -
- Today's mood -
- - -
-
- - -
-
- - -
-
- - -
-
- `) %> -
-
- -
-

TextBox

-
-
- A text box (also referred to as an edit control) is a - rectangular control where the user enters or edits text. It can - be defined to support a single line or multiple lines of text. - -
— Microsoft Windows User Experience p. 181
-
- -

- Text boxes can rendered by specifying a text type on an - input element. As with checkboxes and radio buttons, you - should provide a corresponding label with a properly set for - attribute, and wrap both in a container with the field-row class. -

- - <%- example(` -
- - -
- `) %> - -

- Additionally, you can make use of the field-row-stacked class - to position your label above the input instead of beside it. -

- - <%- example(` -
- - -
-
- - -
- `) %> - -

- To support multiple lines in the user's input, use the textarea - element instead. -

- - <%- example(` -
- - -
- `) %> -
-
- -
- -
-
- A drop-down list box allows the selection of only a - single item from a list. In its closed state, the control displays - the current value for the control. The user opens the list to change - the value. - -
- — Microsoft Windows User Experience p. 175 -
-
- -

- Dropdowns can be rendered by using the select and option - elements. -

- - <%- example(` - - `) %> - -

- By default, the first option will be selected. You can change this by - giving one of your option elements the selected - attribute. -

- - <%- example(` - - `) %> -
-
- -

Window

-

- The following components illustrate how to build complete windows using - 98.css. -

- -
-

Title Bar

-
-
- At the top edge of the window, inside its border, is the title bar - (also reffered to as the caption or caption bar), which extends across - the width of the window. The title bar identifies the contents of the - window. - -
- — Microsoft Windows User Experience p. 118 -
-
- -
- Include command buttons associated with the common commands of the - primary window in the title bar. These buttons act as shortcuts to specific - window commands. - -
- — Microsoft Windows User Experience p. 122 -
-
- -

- You can build a complete title bar by making use of three classes, - title-bar, title-bar-text, and title-bar-controls. -

- - <%- example(` -
-
A Title Bar
-
- -
-
- `) %> - -

- We make use of aria-label to render the Close button, to let - assistive technologies know the intent of this button. You may also use - "Minimize" and "Maximize" like so: -

- - <%- example(` -
-
A Title Bar
-
- - - -
-
- `) %> -
-
- -
-

Window contents

-
-
- Every window has a boundary that defines its shape. - -
- — Microsoft Windows User Experience p. 118 -
-
- -

- To give our title bar a home, we make use of the window - class. This provides a raised outer and inner border, as well as some - padding. We can freely resize the window by specifying a width in the - container style. -

- - <%- example(` -
-
-
A Complete Window
-
- - - -
-
-
- `) %> - -

- To draw the contents of the window, we use the window-body - class under the title bar. -

- - <%- example(` -
-
-
A Window With Stuff In It
-
- - - -
-
-
-

There's so much room for activities!

-
-
- `) %> -
-
- -
-

TreeView

-
-
- A tree view control is a special list box control - that displays a set of objects as an indented outline based - on their logical hierarchical relationship. - -
- — Microsoft Windows User Experience p. 178 -
-
- -

- To render a tree view, use an ul element with the - tree-view class. The children of this list (li - elements), can contain whatever you'd like. -

- - <%- example(` -
    -
  • We can put
    • -
  • ✨ Whatever ✨
    • -
  • We want in here
    • -
- `) %> - -

- To make this a tree, we can nest further ul elements - (no class needed on these). This will provide them with a nice dotted - border and indentation to illustrate the structure of the tree. -

- - <%- example(` -
    -
  • Table of Contents
    • -
  • What is web development?
    • -
  • - CSS -
      -
    • Selectors
      • -
    • Specificity
      • -
    • Properties
      • -
    -
    • -
  • - JavaScript -
      -
    • Avoid at all costs
      • -
    -
    • -
  • HTML
    • -
  • Special Thanks
    • -
- `) %> -
-
- -

Issues, Contributing, etc.

- -

- 98.css is MIT licensed. -

- -

- Refer to the GitHub issues page to see bugs - in my CSS or report new ones. I'd really like to see your pull requests (especially those new to - open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like - to make it a fun place to build your open-source muscle. -

- -

- Thank you for checking my little project out, I hope it brought you some joy today. Consider - starring/following along on GitHub and maybe - subscribing to more fun things on my twitter. 👋 -

-
- - + + + + 98.css - A design system for building faithful recreations of old UIs + + + + + + + + + + + + + + + + +
+

98.css

+
+

A design system for building faithful recreations of old UIs.

+ +

Intro

+

+ 98.css is a CSS library for building interfaces that look like Windows 98. + See more on GitHub. +

+ +
+
+
+ My First VB4 Program +
+ +
+ + + +
+
+
+

Hello, world!

+
+ + +
+
+
+ +

+ This library relies on the usage of semantic HTML. To make a button, you'll need + to use a <button>. Input elements require labels. Icon buttons rely on + aria-label. This page will guide you through that process, but accessibility is a primary + goal of this project. +

+ +

+ You can override many of the styles of your elements while maintaining the appearance provided by + this library. Need more padding on your buttons? Go for it. Need to add some color to your input labels? + Be our guest. +

+ +

+ This library does not contain any JavaScript, it merely styles your HTML with some CSS. + This means 98.css is compatible with your frontend framework of choice. +

+ +

+ Here is an example of 98.css used with React, and + an example with vanilla JavaScript. The fastest way to use 98.css is to import it from unpkg. +

+ + 
<link
+  rel="stylesheet"
+  href="https://unpkg.com/98.css"
+>
+ +

+ You can install 98.css from the GitHub releases page, or from npm. +

+ 
npm install 98.css
+ +

Components

+ +
+

Button

+
+
+ A command button, also referred to as a push button, is a control + that causes the application to perform some action when the user clicks it. + +
— Microsoft Windows User Experience p. 160
+
+ +

+ A standard button measures 75px wide and 23px tall, with a raised outer and inner border. + They are given 12px of horizontal padding by default. +

+ + <%- example(``) %> + +

+ When buttons are clicked, the raised borders become sunken. + The following button is simulated to be in the pressed (active) state. +

+ + <% /* [[ ... ]] is used to render contents that + will not appear in the "Show code" section */ + %> + <%- example(`I am being pressed`) %> + +

+ Disabled buttons maintain the same raised border, but have a "washed out" + appearance in their label. +

+ + <%- example(``) %> + +

+ Button focus is communicated with a dotted border, set 4px within the contents of the button. + The following example is simulated to be focused. +

+ + <%- example(`I am focused`) %> +
+
+ +
+

Checkbox

+
+
+ A check box represents an independent or non-exclusive choice. +
— Microsoft Windows User Experience p. 167
+
+ +

+ Checkboxes are represented with a sunken panel, populated with a "check" icon when + selected, next to a label indicating the choice. +

+ +

+ Note: You must include a corresponding label after + your checkbox, using the <label> element with a for attribute + pointed at the id of your input. This ensures the checkbox is easy to use with + assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key, + being able to click the entire label to select the box). +

+ + <%- example(` + + + `) %> + +

+ Checkboxes can be selected and disabled with the standard checked and disabled + attributes. +

+ +

+ When grouping inputs, wrap each input in a container with the field-row class. This ensures + a consistent spacing between inputs. +

+ + <%- example(` +
+ + +
+
+ + +
+
+ + +
+ `) %> +
+
+ +
+

OptionButton

+
+
+ An option button, also referred to as a radio button, represents a single + choice within a limited set of mutually exclusive choices. That is, the user can choose only + one set of options. + +
— Microsoft Windows User Experience p. 164
+
+ +

+ Option buttons can be used via the radio type on an input element. +

+ +

+ Option buttons can be grouped by specifying a shared name attribute on each + input. Just as before: when grouping inputs, wrap each input in a container with the + field-row class to ensure a consistent spacing between inputs. +

+ + <%- example(` +
+ + +
+
+ + +
+ `) %> + +

+ Option buttons can also be checked and disabled with their corresponding + HTML attributes. +

+ + <%- example(` +
+ + +
+
+ + +
+
+ + +
+ `) %> +
+
+ +
+

GroupBox

+
+
+ A group box is a special control you can use to organize a set of + controls. A group box is a rectangular frame with an optional label that surrounds + a set of controls. + +
— Microsoft Windows User Experience p. 189
+
+ +

+ A group box can be used by wrapping your elements with the fieldset tag. + It contains a sunken outer border and a raised inner border, resembling an engraved box + around your controls. +

+ + <%- example(` +
+
Select one:
+
+ + +
+
+ + +
+
+ + +
+
+ `) %> + +

+ You can provide your group with a label by placing a legend element + within the fieldset. +

+ + <%- example(` +
+ Today's mood +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ `) %> +
+
+ +
+

TextBox

+
+
+ A text box (also referred to as an edit control) is a + rectangular control where the user enters or edits text. It can + be defined to support a single line or multiple lines of text. + +
— Microsoft Windows User Experience p. 181
+
+ +

+ Text boxes can rendered by specifying a text type on an + input element. As with checkboxes and radio buttons, you + should provide a corresponding label with a properly set for + attribute, and wrap both in a container with the field-row class. +

+ + <%- example(` +
+ + +
+ `) %> + +

+ Additionally, you can make use of the field-row-stacked class + to position your label above the input instead of beside it. +

+ + <%- example(` +
+ + +
+
+ + +
+ `) %> + +

+ To support multiple lines in the user's input, use the textarea + element instead. +

+ + <%- example(` +
+ + +
+ `) %> +
+
+ +
+ +
+
+ A drop-down list box allows the selection of only a + single item from a list. In its closed state, the control displays + the current value for the control. The user opens the list to change + the value. + +
+ — Microsoft Windows User Experience p. 175 +
+
+ +

+ Dropdowns can be rendered by using the select and option + elements. +

+ + <%- example(` + + `) %> + +

+ By default, the first option will be selected. You can change this by + giving one of your option elements the selected + attribute. +

+ + <%- example(` + + `) %> +
+
+ +

Window

+

+ The following components illustrate how to build complete windows using + 98.css. +

+ +
+

Title Bar

+
+
+ At the top edge of the window, inside its border, is the title bar + (also reffered to as the caption or caption bar), which extends across + the width of the window. The title bar identifies the contents of the + window. + +
+ — Microsoft Windows User Experience p. 118 +
+
+ +
+ Include command buttons associated with the common commands of the + primary window in the title bar. These buttons act as shortcuts to specific + window commands. + +
+ — Microsoft Windows User Experience p. 122 +
+
+ +

+ You can build a complete title bar by making use of three classes, + title-bar, title-bar-text, and title-bar-controls. +

+ + <%- example(` +
+
A Title Bar
+
+ +
+
+ `) %> + +

+ We make use of aria-label to render the Close button, to let + assistive technologies know the intent of this button. You may also use + "Minimize" and "Maximize" like so: +

+ + <%- example(` +
+
A Title Bar
+
+ + + +
+
+ `) %> +
+
+ +
+

Window contents

+
+
+ Every window has a boundary that defines its shape. + +
+ — Microsoft Windows User Experience p. 118 +
+
+ +

+ To give our title bar a home, we make use of the window + class. This provides a raised outer and inner border, as well as some + padding. We can freely resize the window by specifying a width in the + container style. +

+ + <%- example(` +
+
+
A Complete Window
+
+ + + +
+
+
+ `) %> + +

+ To draw the contents of the window, we use the window-body + class under the title bar. +

+ + <%- example(` +
+
+
A Window With Stuff In It
+
+ + + +
+
+
+

There's so much room for activities!

+
+
+ `) %> +
+
+ +
+

TreeView

+
+
+ A tree view control is a special list box control + that displays a set of objects as an indented outline based + on their logical hierarchical relationship. + +
+ — Microsoft Windows User Experience p. 178 +
+
+ +

+ To render a tree view, use an ul element with the + tree-view class. The children of this list (li + elements), can contain whatever you'd like. +

+ + <%- example(` +
    +
  • We can put
    • +
  • ✨ Whatever ✨
    • +
  • We want in here
    • +
+ `) %> + +

+ To make this a tree, we can nest further ul elements + (no class needed on these). This will provide them with a nice dotted + border and indentation to illustrate the structure of the tree. +

+ + <%- example(` +
    +
  • Table of Contents
    • +
  • What is web development?
    • +
  • + CSS +
      +
    • Selectors
      • +
    • Specificity
      • +
    • Properties
      • +
    +
    • +
  • + JavaScript +
      +
    • Avoid at all costs
      • +
    +
    • +
  • HTML
    • +
  • Special Thanks
    • +
+ `) %> +
+
+ +

Issues, Contributing, etc.

+ +

+ 98.css is MIT licensed. +

+ +

+ Refer to the GitHub issues page to see bugs + in my CSS or report new ones. I'd really like to see your pull requests (especially those new to + open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like + to make it a fun place to build your open-source muscle. +

+ +

+ Thank you for checking my little project out, I hope it brought you some joy today. Consider + starring/following along on GitHub and maybe + subscribing to more fun things on my twitter. 👋 +

+
+ + diff --git a/icon/close.svg b/icon/close.svg index f63f894..419a57a 100644 --- a/icon/close.svg +++ b/icon/close.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/icon/maximize.svg b/icon/maximize.svg index ae54e68..fa75444 100644 --- a/icon/maximize.svg +++ b/icon/maximize.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/icon/minimize.svg b/icon/minimize.svg index 5483a34..a676778 100644 --- a/icon/minimize.svg +++ b/icon/minimize.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/style.css b/style.css index 3669d49..8c74a1d 100644 --- a/style.css +++ b/style.css @@ -1,484 +1,484 @@ -/** - * 98.css - * Copyright (c) 2020 Jordan Scales - * https://github.com/jdan/98.css/blob/master/LICENSE - */ - -: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)); - --radio-dot-width: 4px; - --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2); - --radio-dot-left: calc( - -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var( - --radio-dot-width - ) / 2 - ); - - --checkbox-total-width-precalc: var(--checkbox-width) + - var(--radio-label-spacing); - --checkbox-total-width: calc(var(--checkbox-total-width-precalc)); - --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc)); - --checkmark-width: 7px; - --checkmark-top: 3px; - --checkmark-left: 3px; - - /* Borders */ - --border-width: 1px; - --border-raised-outer: inset -1px -1px var(--window-frame), - inset 1px 1px var(--button-highlight); - --border-raised-inner: inset -2px -2px var(--button-shadow), - inset 2px 2px var(--button-face); - --border-sunken-outer: inset -1px -1px var(--button-highlight), - inset 1px 1px var(--window-frame); - --border-sunken-inner: inset -2px -2px var(--button-face), - inset 2px 2px var(--button-shadow); - - /* 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; - -webkit-font-smoothing: none; - color: #222222; -} - -h1 { - font-size: 5rem; -} - -h2 { - font-size: 2.5rem; -} - -h3 { - font-size: 2rem; -} - -h4 { - font-size: 1.5rem; -} - -u { - text-decoration: none; - border-bottom: 0.5px solid #222222; -} - -button { - box-sizing: border-box; - border: none; - background: var(--surface); - box-shadow: var(--border-raised-outer), var(--border-raised-inner); - border-radius: 0; - - min-width: 75px; - min-height: 23px; - padding: 0 12px; -} - -button:not(:disabled):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); -} - -.window { - box-shadow: var(--border-raised-outer), var(--border-raised-inner); - background: var(--surface); - padding: 3px; -} - -.title-bar { - background: linear-gradient( - 90deg, - var(--dialog-blue), - var(--dialog-blue-light) - ); - padding: 2px; - display: flex; - justify-content: space-between; - align-items: center; -} - -.title-bar-text { - font-weight: bold; - color: white; - letter-spacing: 0; - margin-right: 24px; -} - -.title-bar-controls { - display: flex; -} - -.title-bar-controls button { - padding: 0; - display: block; - min-width: 14px; - min-height: 12px; -} - -.title-bar-controls button:focus { - outline: none; -} - -.title-bar-controls button[aria-label="Minimize"] { - background-image: svg-load("./icon/minimize.svg"); - background-repeat: no-repeat; - background-position: bottom 2px left 3px; -} - -.title-bar-controls button[aria-label="Maximize"] { - 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 */ - background-position: top 2px left 2px; -} - -.title-bar-controls button[aria-label="Close"] { - margin-left: 2px; - background-image: svg-load("./icon/close.svg"); - background-repeat: no-repeat; - background-position: top 2px center; -} - -.window-body { - margin: var(--element-spacing); -} - -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-precalc))); - display: inline-block; - width: var(--radio-width); - height: var(--radio-width); - margin-right: var(--radio-label-spacing); - background: svg-load("./icon/radio-border.svg"); -} - -input[type="radio"]:checked + label::after { - content: ""; - display: block; - width: var(--radio-dot-width); - height: var(--radio-dot-width); - top: var(--radio-dot-top); - left: var(--radio-dot-left); - position: absolute; - background: svg-load("./icon/radio-dot.svg"); -} - -input[type="radio"]:focus + label, -input[type="checkbox"]:focus + label { - outline: 1px dotted #000000; -} - -input[type="radio"][disabled] + label::before { - background: svg-load("./icon/radio-border-disabled.svg"); -} - -input[type="radio"][disabled]:checked + label::after { - background: svg-load("./icon/radio-dot-disabled.svg"); -} - -input[type="checkbox"] + label { - position: relative; - margin-left: var(--checkbox-total-width); -} - -input[type="checkbox"] + label::before { - content: ""; - position: absolute; - left: calc(-1 * (var(--checkbox-total-width-precalc))); - display: inline-block; - width: var(--checkbox-width); - height: var(--checkbox-width); - background: var(--button-highlight); - box-shadow: var(--border-field); - margin-right: var(--radio-label-spacing); -} - -input[type="checkbox"]:checked + label::after { - content: ""; - display: block; - width: var(--checkmark-width); - height: var(--checkmark-width); - position: absolute; - top: var(--checkmark-top); - left: calc( - -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left) - ); - background: svg-load("./icon/checkmark.svg"); -} - -input[type="checkbox"][disabled] + label::before { - background: var(--surface); -} - -input[type="checkbox"][disabled]:checked + label::after { - background: svg-load("./icon/checkmark-disabled.svg"); -} - -input[type="text"], -select, -textarea { - padding: 3px 4px; - border: none; - box-shadow: var(--border-field); - background-color: var(--button-highlight); - box-sizing: border-box; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0; -} - -input[type="text"], -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; - padding-right: 32px; - background-image: svg-load("./icon/button-down.svg"); - background-position: top 2px right 2px; - background-repeat: no-repeat; - border-radius: 0; -} - -select:focus, -input[type="text"]:focus, -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: svg-load("./icon/button-down-active.svg"); -} - -a { - color: var(--link-blue); -} - -a:focus { - outline: 1px dotted var(--link-blue); -} - -ul.tree-view { - display: block; - background: var(--button-highlight); - box-shadow: var(--border-field); - padding: 6px; - margin: 0; -} - -ul.tree-view li { - list-style-type: none; -} - -ul.tree-view a { - text-decoration: none; - color: #000; -} - -ul.tree-view a:focus { - background-color: var(--dialog-blue); - color: var(--button-highlight); -} - -ul.tree-view ul, -ul.tree-view li { - margin-top: 3px; -} - -ul.tree-view ul { - margin-left: 16px; - padding-left: 16px; - /* Goes down too far */ - border-left: 1px dotted #808080; -} - -ul.tree-view ul > li { - position: relative; -} -ul.tree-view ul > li::before { - content: ""; - display: block; - position: absolute; - left: -16px; - top: 6px; - width: 12px; - border-bottom: 1px dotted #808080; -} - -/* Cover the bottom of the left dotted border */ -ul.tree-view ul > li:last-child::after { - content: ""; - display: block; - position: absolute; - left: -20px; - top: 7px; - bottom: 0px; - width: 8px; - background: var(--button-highlight); -} - -pre { - display: block; - background: var(--button-highlight); - box-shadow: var(--border-field); - padding: 12px 8px; - margin: 0; -} - -code, -code * { - font-family: monospace; -} - -summary:focus { - outline: 1px dotted #000000; -} - -::-webkit-scrollbar { - width: 16px; -} -::-webkit-scrollbar:horizontal { - height: 17px; -} - -::-webkit-scrollbar-corner { - background: var(--button-face); -} - -::-webkit-scrollbar-track { - background-image: svg-load("./icon/scrollbar-background.svg"); -} - -::-webkit-scrollbar-thumb { - background-color: var(--button-face); - box-shadow: var(--border-raised-outer), var(--border-raised-inner); -} - -::-webkit-scrollbar-button:vertical:start { - height: 17px; - background-image: svg-load("./icon/button-up.svg"); -} -::-webkit-scrollbar-button:vertical:end { - height: 17px; - background-image: svg-load("./icon/button-down.svg"); -} -::-webkit-scrollbar-button:horizontal:start { - width: 16px; - background-image: svg-load("./icon/button-left.svg"); -} -::-webkit-scrollbar-button:horizontal:end { - width: 16px; - background-image: svg-load("./icon/button-right.svg"); -} +/** + * 98.css + * Copyright (c) 2020 Jordan Scales + * https://github.com/jdan/98.css/blob/master/LICENSE + */ + +: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)); + --radio-dot-width: 4px; + --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2); + --radio-dot-left: calc( + -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var( + --radio-dot-width + ) / 2 + ); + + --checkbox-total-width-precalc: var(--checkbox-width) + + var(--radio-label-spacing); + --checkbox-total-width: calc(var(--checkbox-total-width-precalc)); + --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc)); + --checkmark-width: 7px; + --checkmark-top: 3px; + --checkmark-left: 3px; + + /* Borders */ + --border-width: 1px; + --border-raised-outer: inset -1px -1px var(--window-frame), + inset 1px 1px var(--button-highlight); + --border-raised-inner: inset -2px -2px var(--button-shadow), + inset 2px 2px var(--button-face); + --border-sunken-outer: inset -1px -1px var(--button-highlight), + inset 1px 1px var(--window-frame); + --border-sunken-inner: inset -2px -2px var(--button-face), + inset 2px 2px var(--button-shadow); + + /* 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; + -webkit-font-smoothing: none; + color: #222222; +} + +h1 { + font-size: 5rem; +} + +h2 { + font-size: 2.5rem; +} + +h3 { + font-size: 2rem; +} + +h4 { + font-size: 1.5rem; +} + +u { + text-decoration: none; + border-bottom: 0.5px solid #222222; +} + +button { + box-sizing: border-box; + border: none; + background: var(--surface); + box-shadow: var(--border-raised-outer), var(--border-raised-inner); + border-radius: 0; + + min-width: 75px; + min-height: 23px; + padding: 0 12px; +} + +button:not(:disabled):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); +} + +.window { + box-shadow: var(--border-raised-outer), var(--border-raised-inner); + background: var(--surface); + padding: 3px; +} + +.title-bar { + background: linear-gradient( + 90deg, + var(--dialog-blue), + var(--dialog-blue-light) + ); + padding: 2px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.title-bar-text { + font-weight: bold; + color: white; + letter-spacing: 0; + margin-right: 24px; +} + +.title-bar-controls { + display: flex; +} + +.title-bar-controls button { + padding: 0; + display: block; + min-width: 14px; + min-height: 12px; +} + +.title-bar-controls button:focus { + outline: none; +} + +.title-bar-controls button[aria-label="Minimize"] { + background-image: svg-load("./icon/minimize.svg"); + background-repeat: no-repeat; + background-position: bottom 2px left 3px; +} + +.title-bar-controls button[aria-label="Maximize"] { + 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 */ + background-position: top 2px left 2px; +} + +.title-bar-controls button[aria-label="Close"] { + margin-left: 2px; + background-image: svg-load("./icon/close.svg"); + background-repeat: no-repeat; + background-position: top 2px center; +} + +.window-body { + margin: var(--element-spacing); +} + +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-precalc))); + display: inline-block; + width: var(--radio-width); + height: var(--radio-width); + margin-right: var(--radio-label-spacing); + background: svg-load("./icon/radio-border.svg"); +} + +input[type="radio"]:checked + label::after { + content: ""; + display: block; + width: var(--radio-dot-width); + height: var(--radio-dot-width); + top: var(--radio-dot-top); + left: var(--radio-dot-left); + position: absolute; + background: svg-load("./icon/radio-dot.svg"); +} + +input[type="radio"]:focus + label, +input[type="checkbox"]:focus + label { + outline: 1px dotted #000000; +} + +input[type="radio"][disabled] + label::before { + background: svg-load("./icon/radio-border-disabled.svg"); +} + +input[type="radio"][disabled]:checked + label::after { + background: svg-load("./icon/radio-dot-disabled.svg"); +} + +input[type="checkbox"] + label { + position: relative; + margin-left: var(--checkbox-total-width); +} + +input[type="checkbox"] + label::before { + content: ""; + position: absolute; + left: calc(-1 * (var(--checkbox-total-width-precalc))); + display: inline-block; + width: var(--checkbox-width); + height: var(--checkbox-width); + background: var(--button-highlight); + box-shadow: var(--border-field); + margin-right: var(--radio-label-spacing); +} + +input[type="checkbox"]:checked + label::after { + content: ""; + display: block; + width: var(--checkmark-width); + height: var(--checkmark-width); + position: absolute; + top: var(--checkmark-top); + left: calc( + -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left) + ); + background: svg-load("./icon/checkmark.svg"); +} + +input[type="checkbox"][disabled] + label::before { + background: var(--surface); +} + +input[type="checkbox"][disabled]:checked + label::after { + background: svg-load("./icon/checkmark-disabled.svg"); +} + +input[type="text"], +select, +textarea { + padding: 3px 4px; + border: none; + box-shadow: var(--border-field); + background-color: var(--button-highlight); + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; +} + +input[type="text"], +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; + padding-right: 32px; + background-image: svg-load("./icon/button-down.svg"); + background-position: top 2px right 2px; + background-repeat: no-repeat; + border-radius: 0; +} + +select:focus, +input[type="text"]:focus, +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: svg-load("./icon/button-down-active.svg"); +} + +a { + color: var(--link-blue); +} + +a:focus { + outline: 1px dotted var(--link-blue); +} + +ul.tree-view { + display: block; + background: var(--button-highlight); + box-shadow: var(--border-field); + padding: 6px; + margin: 0; +} + +ul.tree-view li { + list-style-type: none; +} + +ul.tree-view a { + text-decoration: none; + color: #000; +} + +ul.tree-view a:focus { + background-color: var(--dialog-blue); + color: var(--button-highlight); +} + +ul.tree-view ul, +ul.tree-view li { + margin-top: 3px; +} + +ul.tree-view ul { + margin-left: 16px; + padding-left: 16px; + /* Goes down too far */ + border-left: 1px dotted #808080; +} + +ul.tree-view ul > li { + position: relative; +} +ul.tree-view ul > li::before { + content: ""; + display: block; + position: absolute; + left: -16px; + top: 6px; + width: 12px; + border-bottom: 1px dotted #808080; +} + +/* Cover the bottom of the left dotted border */ +ul.tree-view ul > li:last-child::after { + content: ""; + display: block; + position: absolute; + left: -20px; + top: 7px; + bottom: 0px; + width: 8px; + background: var(--button-highlight); +} + +pre { + display: block; + background: var(--button-highlight); + box-shadow: var(--border-field); + padding: 12px 8px; + margin: 0; +} + +code, +code * { + font-family: monospace; +} + +summary:focus { + outline: 1px dotted #000000; +} + +::-webkit-scrollbar { + width: 16px; +} +::-webkit-scrollbar:horizontal { + height: 17px; +} + +::-webkit-scrollbar-corner { + background: var(--button-face); +} + +::-webkit-scrollbar-track { + background-image: svg-load("./icon/scrollbar-background.svg"); +} + +::-webkit-scrollbar-thumb { + background-color: var(--button-face); + box-shadow: var(--border-raised-outer), var(--border-raised-inner); +} + +::-webkit-scrollbar-button:vertical:start { + height: 17px; + background-image: svg-load("./icon/button-up.svg"); +} +::-webkit-scrollbar-button:vertical:end { + height: 17px; + background-image: svg-load("./icon/button-down.svg"); +} +::-webkit-scrollbar-button:horizontal:start { + width: 16px; + background-image: svg-load("./icon/button-left.svg"); +} +::-webkit-scrollbar-button:horizontal:end { + width: 16px; + background-image: svg-load("./icon/button-right.svg"); +}