Tridactyl dark theme

commandline-dark.css

body {
  overflow: hidden;
  margin: 0;
}

input {
  width: 100%;
  padding: 0;
  font-family: monospace;
  font-size: 9pt;
  line-height: 1.5;
  color: #fff;
  background: #111;
  border: unset;
  /* we currently have a border from the completions */
  /* border-top: solid 1px lightgray; */
  padding-left: 0.5ex;
}

/* COMPLETIONS */

#completions {
  --option-height: 1.4em;
  background: #474749;
  color: #ccc;
  display: inline-block;
  font-size: 10pt;
  font-family: monospace;
  overflow: hidden;
  width: 100%;
  border-top: 0.5px solid #333;
}

/* Olie doesn't know how CSS inheritance works */
#completions .HistoryCompletionSource {
  max-height: calc(20 * var(--option-height));
  min-height: calc(10 * var(--option-height));
}

#completions .HistoryCompletionSource table {
  width: 100%;
  font-size: 9pt;
  border-spacing: 0;
  table-layout: fixed;
}

/* redundancy 2: redundancy 2: more redundancy */
#completions .BmarkCompletionSource {
  max-height: calc(20 * var(--option-height));
  min-height: calc(10 * var(--option-height));
}

#completions .BmarkCompletionSource table {
  width: 100%;
  font-size: 9pt;
  border-spacing: 0;
  table-layout: fixed;
}
/* redundancy ends */

#completions .BufferCompletionSource {
  max-height: calc(20 * var(--option-height));
  min-height: calc(10 * var(--option-height));
}

#completions .BufferCompletionSource table {
  width: 100%;
  font-size: 9pt;
  border-spacing: 0;
  table-layout: fixed;
}

#completions table tr td:nth-of-type(1) { width: 1.5em; padding-left: 0.5em}
#completions table tr td:nth-of-type(2) { width: 1.5em; }
/* #completions table tr td:nth-of-type(3) { width: 5em; } */
#completions table tr td:nth-of-type(4) { width: 50%; }

#completions table tr {
  white-space: nowrap;
  overflow: hidden;
}

#completions table tr td {
  overflow: hidden;
  color: #ccc;
}

#completions img {
  display: inline;
  vertical-align: middle;
  height: 1em;
  width: 1em;
}

#completions .sectionHeader {
  background: linear-gradient(#333, #222, #111);
  font-weight: bold;
  border-bottom: 0.5px solid bottom;
  padding-left: 0.5ex;
}

#completions .sectionHeader, #completions .option {
  height: var(--option-height);
  line-height: var(--option-height);
}

.url {
  text-decoration: none;
  padding-left: 7px;
}

.option:not(.focused) .url {
  color: #ccc;
  background: #333;
}

a.url:hover {
  cursor: pointer;
  text-decoration: underline;
}

/* Hide the URLs if the screen is small */
@media all and (max-width: 500px) {
    .url {
        display: none;
    }
}

/* .BufferCompletionOption span { */
/*   white-space: pre; */
/*   margin: 0 .5em; */
/* } */

.hidden {
  display: none;
}

/* Pick the .url out especially because otherwise its link styles dominate. */
.focused, .focused .url {
  background: #204e8a;
  color: #fff;
}