/* hledger-anywhere — the whole stylesheet.
 *
 * There is one thing on screen, so there is almost nothing to style: xterm.js
 * draws the terminal, and this file only makes sure it has the window to itself
 * and that the page itself never scrolls.
 */

:root {
  color-scheme: dark;
  /* Black and amber, the colours the terminal is themed in; kept here too so the
   * page background matches before xterm has painted. */
  --term-bg: #000000;
  --term-accent: #ff9f1c;
  --term-dim: #8a8a8a;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--term-bg);
  /* The terminal has its own scrollback: the page must never scroll, or a
   * resize and a wheel gesture would fight over which one moves. */
  overflow: hidden;
}

#terminal {
  position: fixed;
  inset: 0;
  background: var(--term-bg);
}

/* xterm paints its own background, but the scroll container inside it does not
 * inherit a colour, and a sticky scrollbar would show the light default. */
.xterm .xterm-viewport {
  background: var(--term-bg) !important;
}

.xterm .xterm-viewport::-webkit-scrollbar {
  width: 8px;
}

.xterm .xterm-viewport::-webkit-scrollbar-thumb {
  background: #2a2a2a;
}

/* Selection and cursor come from the terminal's own theme (see
 * src/terminal/view.rs); this is only the focus outline, which xterm draws on
 * the helper textarea and which should not be visible. */
.xterm .xterm-helper-textarea {
  outline: none;
}