98.css/style.css

:root {
  /* Color */
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #000080;
  --dialog-blue-light: #1084d0;

  /* Spacing */
  --element-spacing: 8px;
  --grouped-button-spacing: 4px;
  --grouped-element-spacing: 6px;
  --radio-width: 12px;
  --checkbox-width: 13px;
  --radio-label-spacing: 6px;

  /* Some detailed computations for radio buttons and checkboxes */
  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
  --radio-total-width: calc(var(--radio-total-width-precalc));
  --radio-left: calc(-1 * var(--radio-total-width-precalc));

  --checkbox-total-width-precalc: var(--checkbox-width) +
    var(--radio-label-spacing);
  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));

  /* Borders */
  --border-width: 1px;
  --border-raised-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-highlight);
  --border-raised-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-face);
  --border-sunken-outer: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face),
    inset 2px 2px var(--button-shadow);

  /* Checkbox borders flip window-frame and button-shadow */
  --border-checkbox: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
    inset 2px 2px var(--window-frame);
}

* {
  /* Hmmmm... how can I make these a webfont */
  font-family: "MS Sans Serif", Arial;
  font-size: 11px;
  -webkit-font-smoothing: none;
  color: #222222;
}

u {
  text-decoration: none;
  border-bottom: 0.5px solid #222222;
}

button {
  box-sizing: border-box;
  border: none;
  background: var(--surface);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);

  min-width: 75px;
  min-height: 23px;
}

button:active {
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
}

button:focus {
  outline: 1px dotted #000000;
  outline-offset: -4px;
}

:disabled,
:disabled + label {
  color: var(--button-shadow);
  text-shadow: 1px 1px 0 var(--button-highlight);
}

.dialog {
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  background: var(--surface);
}

.menubar {
  background: linear-gradient(
    90deg,
    var(--dialog-blue),
    var(--dialog-blue-light)
  );
  margin: 2px;
  padding: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menubar-title {
  font-weight: bold;
  color: white;
  letter-spacing: 0.1ch;
  margin-right: 24px;
}

.menubar-controls {
  display: flex;
}

.menubar-controls button {
  display: block;
  min-width: 14px;
  min-height: 12px;
}

.menubar-controls button:focus {
  outline: none;
}

.menubar-controls button[aria-label="Minimize"] {
  background-image: url("./minimize.svg");
  background-repeat: no-repeat;
  background-position: bottom 2px left 3px;
}

.menubar-controls button[aria-label="Maximize"] {
  background-image: url("./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;
}

.menubar-controls button[aria-label="Close"] {
  margin-left: 2px;
  background-image: url("./close.svg");
  background-repeat: no-repeat;
  background-position: top 2px center;
}

.dialog-body {
  margin: var(--element-spacing);
}

.dialog-body > * + * {
  margin-top: var(--element-spacing);
}

.align-right {
  justify-content: flex-end;
}

fieldset {
  border: none;
  box-shadow: var(--border-sunken-outer), var(--border-raised-inner);
  padding: calc(2 * var(--border-width) + var(--element-spacing));
  padding-block-start: var(--element-spacing);
  margin: 0;
}

legend {
  background: var(--surface);
}

.field-row {
  display: flex;
  align-items: center;
}

[class^="field-row"] + [class^="field-row"] {
  margin-top: var(--grouped-element-spacing);
}

.field-row * + * {
  margin-left: var(--grouped-element-spacing);
}

.field-row-stacked {
  display: flex;
  flex-direction: column;
}

.field-row-stacked * + * {
  margin-top: var(--grouped-element-spacing);
}

label {
  display: flex;
  align-items: center;
}

input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  border: none;
}

input[type="radio"] + label {
  position: relative;
  margin-left: var(--radio-total-width);
}

input[type="radio"] + label::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--radio-total-width));
  display: inline-block;
  width: var(--radio-width);
  height: var(--radio-width);
  margin-right: var(--radio-label-spacing);
  background: url("./radio-border.svg");
}

input[type="radio"]:checked + label::after {
  --radio-dot-width: 4px;
  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
  --radio-dot-left: calc(
    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
        --radio-dot-width
      ) / 2
  );

  content: "";
  display: block;
  width: var(--radio-dot-width);
  height: var(--radio-dot-width);
  top: var(--radio-dot-top);
  left: var(--radio-dot-left);
  position: absolute;
  background: url("./radio-dot.svg");
}

input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label {
  outline: 1px dotted #000000;
}

input[type="radio"][disabled] + label::before {
  background: url("./radio-border-disabled.svg");
}

input[type="radio"][disabled]:checked + label::after {
  background: url("./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));
  display: inline-block;
  width: var(--checkbox-width);
  height: var(--checkbox-width);
  background: var(--button-highlight);
  box-shadow: var(--border-checkbox);
  margin-right: var(--radio-label-spacing);
}

input[type="checkbox"]:checked + label::after {
  --checkmark-width: 7px;
  --checkmark-top: 3px;
  --checkmark-left: 3px;

  content: "";
  display: block;
  width: var(--checkmark-width);
  height: var(--checkmark-width);
  position: absolute;
  top: var(--checkmark-top);
  left: calc(
    -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
  );
  background: url("./checkmark.svg");
}

input[type="checkbox"][disabled] + label::before {
  background: var(--surface);
}

input[type="checkbox"][disabled]:checked + label::after {
  background: url("./checkmark-disabled.svg");
}