log-streamer/public/styles.css

:root {
  color-scheme: dark;
  --background: #101112;
  --surface: #17191b;
  --surface-2: #202326;
  --border: #33383d;
  --text: #eceff1;
  --muted: #a7adb4;
  --muted-2: #727982;
  --accent: #13c07b;
  --warning: #d59c36;
  --danger: #e15e5e;
  --control: #24282c;
  --control-hover: #2d3237;
  --mono: "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
}

button,
input {
  font: inherit;
}

.shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 100%;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 14px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.identity {
  min-width: 0;
}

h1 {
  margin: 0 0 5px;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
}

.file-path {
  max-width: min(74vw, 920px);
  overflow: hidden;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  background: var(--surface-2);
  white-space: nowrap;
}

.status::before {
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--muted-2);
  content: "";
}

.status[data-state="connected"]::before {
  background: var(--accent);
}

.status[data-state="reconnecting"]::before,
.status[data-state="connecting"]::before {
  background: var(--warning);
}

.status[data-state="error"]::before,
.status[data-state="disconnected"]::before {
  background: var(--danger);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  color: var(--muted);
  white-space: nowrap;
  user-select: none;
}

.toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  background: var(--control);
  cursor: pointer;
}

button:hover {
  background: var(--control-hover);
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.meta {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 38px;
  padding: 0 18px;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.meta strong {
  color: var(--text);
  font-weight: 650;
}

.log-output {
  min-height: 0;
  margin: 0;
  padding: 16px 18px 28px;
  overflow: auto;
  background: #0b0c0d;
  color: #d7dbdf;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre-wrap;
  word-break: break-word;
}

.log-output:empty::before {
  color: var(--muted-2);
  content: "No log lines yet.";
}

.ansi-bold {
  font-weight: 700;
}

.ansi-dim {
  opacity: 0.72;
}

.ansi-italic {
  font-style: italic;
}

.ansi-underline {
  text-decoration: underline;
}

.ansi-fg-black {
  color: #777d85;
}

.ansi-fg-red {
  color: #e86f6f;
}

.ansi-fg-green {
  color: #6fcf97;
}

.ansi-fg-yellow {
  color: #d8b75f;
}

.ansi-fg-blue {
  color: #7aa7e8;
}

.ansi-fg-magenta {
  color: #cf8ee8;
}

.ansi-fg-cyan {
  color: #68c8d3;
}

.ansi-fg-white {
  color: #d7dbdf;
}

.ansi-fg-bright-black {
  color: #9aa1aa;
}

.ansi-fg-bright-red {
  color: #ff8a8a;
}

.ansi-fg-bright-green {
  color: #8ee6ad;
}

.ansi-fg-bright-yellow {
  color: #f0d47b;
}

.ansi-fg-bright-blue {
  color: #9dc1ff;
}

.ansi-fg-bright-magenta {
  color: #e5a6ff;
}

.ansi-fg-bright-cyan {
  color: #8fe6ef;
}

.ansi-fg-bright-white {
  color: #ffffff;
}

.ansi-bg-black,
.ansi-bg-bright-black {
  background-color: #25282c;
}

.ansi-bg-red,
.ansi-bg-bright-red {
  background-color: #5c2323;
}

.ansi-bg-green,
.ansi-bg-bright-green {
  background-color: #1f4a35;
}

.ansi-bg-yellow,
.ansi-bg-bright-yellow {
  background-color: #4f4120;
}

.ansi-bg-blue,
.ansi-bg-bright-blue {
  background-color: #203c5f;
}

.ansi-bg-magenta,
.ansi-bg-bright-magenta {
  background-color: #4b2b59;
}

.ansi-bg-cyan,
.ansi-bg-bright-cyan {
  background-color: #20484f;
}

.ansi-bg-white,
.ansi-bg-bright-white {
  background-color: #d7dbdf;
  color: #101112;
}

@media (max-width: 760px) {
  .toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .file-path {
    max-width: 100%;
  }

  .controls {
    justify-content: flex-start;
  }

  .status,
  button {
    min-height: 34px;
  }
}