/*
 * x11twm: X11 and twm in a browser.
 *
 * Everything here is drawn, not imaged: the root window is the black and white stipple X
 * put up when nothing else claimed it, the cursors are the real X shapes (X_cursor on the
 * root, left_ptr over a window, xterm over a terminal), and the window frames follow twm,
 * which means a title bar with an iconify box on the left, a resize box on the right, and
 * the highlight stipple showing on the focused window only.
 */

:root {
  --face:   #b8b8b8;   /* the gray everything was made of */
  --lit:    #e4e4e4;   /* top and left bevel */
  --dim:    #6f6f6f;   /* bottom and right bevel */
  --ink:    #000;
  --dimink: #4a4a4a;
  --menu:   #c6c6c6;
  --tt:     12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #808080;
  font-family: "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Helvetica, Arial, sans-serif;
  font-size: var(--tt);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ---- the root window ---------------------------------------------------------------
   The default X root: a two by two black and white stipple. Up close it is a weave, from
   a foot away it is gray. xsetroot in the terminal replaces it with a solid colour. */
#root {
  position: fixed; inset: 0; outline: none;
  background-color: #9a9a9a;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'>\
<rect width='2' height='2' fill='%23c8c8c8'/>\
<rect width='1' height='1' fill='%23545454'/>\
<rect x='1' y='1' width='1' height='1' fill='%23545454'/>\
</svg>");
  background-size: 2px 2px;
  cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'>\
<path d='M3 3L19 19M19 3L3 19' stroke='%23fff' stroke-width='8'/>\
<path d='M3 3L19 19M19 3L3 19' stroke='%23000' stroke-width='3.6'/>\
</svg>") 11 11, crosshair;
}
#root.solid { background-image: none; }

/* left_ptr: the hollow X11 arrow, not the filled one from the other operating system */
.win, .menu { cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='22'>\
<path d='M3 2 L3 17.5 L7.2 13.4 L10 19.5 L12.9 18.3 L10.2 12.4 L15.6 12.2 Z'\
 fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/>\
</svg>") 3 2, default; }

/* ---- bevels ------------------------------------------------------------------------ */
.out { border: 2px solid; border-color: var(--lit) var(--dim) var(--dim) var(--lit); }
.in  { border: 2px solid; border-color: var(--dim) var(--lit) var(--lit) var(--dim); }

/* ---- windows ----------------------------------------------------------------------- */
#windows, #icons, #menus { position: absolute; inset: 0; pointer-events: none; }
#windows > *, #icons > *, #menus > * { pointer-events: auto; }

.win {
  position: absolute;
  background: var(--face);
  border: 1px solid var(--ink);
  padding: 2px;
  display: flex; flex-direction: column;
  min-width: 120px; min-height: 60px;
  box-shadow: 1px 1px 0 rgba(0,0,0,.35);
}
.win.iconified { display: none; }

.titlebar {
  height: 19px; flex: none;
  display: flex; align-items: stretch; gap: 0;
  background: var(--face);
  border: 1px solid var(--ink);
  margin-bottom: 2px;
  cursor: move;
}
.tb-btn {
  width: 17px; flex: none; margin: 1px; padding: 0;
  background: var(--face); border: 1px solid var(--ink);
  display: grid; place-items: center; cursor: pointer;
  font: inherit; color: inherit;
}
.tb-btn i { display: block; width: 8px; height: 8px; border: 1px solid var(--ink); background: var(--face); }
.tb-resize i { width: 10px; height: 10px; border-width: 1px 1px 3px 3px; }
.tb-btn:active { background: var(--dim); }

/* The twm highlight: the stipple beside the name, and only while the window has focus. */
.tb-hl { flex: 1; margin: 3px 2px; min-width: 6px; }
.win.focus .tb-hl {
  background-image: repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 2px);
  opacity: .55;
}
.tb-name {
  flex: none; padding: 0 6px; align-self: center;
  font-weight: bold; color: var(--dimink); white-space: nowrap;
  max-width: 60%; overflow: hidden; text-overflow: clip;
}
.win.focus .tb-name { color: var(--ink); }
.win.focus { border-color: var(--ink); }
.win:not(.focus) { border-color: #3d3d3d; }

.client {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--ink);
}
.grip {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 40%, var(--dim) 40% 52%, transparent 52% 62%, var(--dim) 62% 74%, transparent 74%);
}

/* the outline twm drags around instead of the window itself */
#rubber {
  position: absolute; pointer-events: none; z-index: 9999;
  border: 2px dashed #fff; mix-blend-mode: difference;
}
#sizebox {
  position: absolute; z-index: 10000; pointer-events: none;
  background: var(--face); border: 1px solid var(--ink); padding: 3px 7px;
  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace; font-weight: bold;
}

/* ---- menus ------------------------------------------------------------------------- */
.menu {
  position: absolute; z-index: 20000; min-width: 132px;
  background: var(--menu); border: 1px solid var(--ink); padding: 2px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
.menu-title {
  background: var(--ink); color: var(--menu); text-align: center;
  font-weight: bold; padding: 2px 8px; margin-bottom: 2px;
}
.menu-item { padding: 2px 10px; white-space: nowrap; color: var(--ink); }
.menu-item.on { background: var(--ink); color: var(--menu); }
.menu-item.sep { padding: 0; margin: 3px 2px; border-top: 1px solid var(--dim); border-bottom: 1px solid var(--lit); }
.menu-item.off { color: var(--dim); }

/* ---- icons (an iconified window lands on the root) --------------------------------- */
.icon {
  position: absolute; width: 74px; text-align: center; cursor: pointer;
  color: #fff; text-shadow: 1px 1px 0 #000;
}
.icon .box {
  width: 44px; height: 38px; margin: 0 auto 2px;
  background: var(--face); border: 1px solid var(--ink);
  display: grid; place-items: center;
}
.icon .box svg { width: 26px; height: 26px; }
.icon .cap { background: var(--face); color: var(--ink); border: 1px solid var(--ink); text-shadow: none; padding: 0 3px; display: inline-block; max-width: 100%; overflow: hidden; }

/* XC_pirate: the skull and crossbones xkill put on the pointer while you chose a victim */
body.picking #root, body.picking .win, body.picking .icon, body.picking .xterm {
  cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'>\
<g stroke='%23000' stroke-width='3.2' stroke-linecap='round'>\
<path d='M5 17L21 7M5 7l16 10' stroke='%23fff' stroke-width='6'/>\
<path d='M5 17L21 7M5 7l16 10'/></g>\
<circle cx='13' cy='11' r='7' fill='%23fff' stroke='%23000' stroke-width='1.6'/>\
<circle cx='10.4' cy='10.4' r='2' fill='%23000'/><circle cx='15.6' cy='10.4' r='2' fill='%23000'/>\
<path d='M10 16h6v3h-6z' fill='%23fff' stroke='%23000' stroke-width='1.4'/>\
</svg>") 13 11, crosshair !important;
}

/* ---- xterm ------------------------------------------------------------------------- */
.xterm {
  position: absolute; inset: 0; display: flex; background: #fff;
  cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='22'>\
<path d='M4 3h8M8 3v16M4 19h8' stroke='%23fff' stroke-width='4.5'/>\
<path d='M4.5 3.5h7M8 3.5v15M4.5 18.5h7' stroke='%23000' stroke-width='1.4'/>\
</svg>") 8 11, text;
}
/* the scrollbar lived on the left, and it looked like this */
.xsb { width: 14px; flex: none; background: #d6d6d6; border-right: 1px solid #000; position: relative; }
.xsb .thumb { position: absolute; left: 1px; right: 1px; background: var(--face); border: 1px solid #000; min-height: 12px; }
.xterm .screen {
  flex: 1; overflow: hidden; padding: 2px 4px; color: #000;
  font-family: "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
  /* A terminal has no idea what a word is: character 81 goes on the next line. */
  font-size: 13px; line-height: 15px; white-space: pre-wrap; word-break: break-all;
  user-select: text; -webkit-user-select: text;
}
.xterm .cur { background: #000; color: #fff; }
.xterm.unfocus .cur { background: transparent; color: #000; outline: 1px solid #000; }

/* ---- xclock, xeyes, xload, xlogo --------------------------------------------------- */
.pad { position: absolute; inset: 0; display: grid; place-items: center; background: var(--face); }
.pad canvas, .pad svg { display: block; width: 100%; height: 100%; }

/* ---- xcalc ------------------------------------------------------------------------- */
.calc { position: absolute; inset: 0; background: var(--face); display: flex; flex-direction: column; padding: 4px; gap: 4px; }
.calc .lcd {
  background: #9ead86; border: 2px solid; border-color: var(--dim) var(--lit) var(--lit) var(--dim);
  font-family: "DejaVu Sans Mono", monospace; font-size: 17px; text-align: right; padding: 3px 6px; color: #101a06;
  overflow: hidden; white-space: nowrap;
}
.calc .keys { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.calc button {
  font: inherit; font-size: 11px; background: var(--face); color: var(--ink);
  border: 2px solid; border-color: var(--lit) var(--dim) var(--dim) var(--lit); cursor: pointer;
}
.calc button:active { border-color: var(--dim) var(--lit) var(--lit) var(--dim); }
.calc button.op { font-weight: bold; }

/* ---- the hint on the root ---------------------------------------------------------- */
#hint {
  position: fixed; left: 8px; bottom: 8px; z-index: 5;
  color: var(--ink); background: var(--face); border: 1px solid var(--ink);
  padding: 2px 7px; pointer-events: none;
  transition: opacity .6s; font-size: 11px;
}
#hint.gone { opacity: 0; }

@media (max-width: 760px) {
  .tb-name { max-width: 45%; }
  #hint { max-width: 60%; }
}