CutBox/docs/customized.css

:root {
  --red: #a6511987;  /* Red */
  --red-line-number: #FF8800EE;
  --red-file-name: #FF6600BB;
  --gray: #666666; /* Gray */
  --teal: #308080; /* Teal */

  --red-column-bg: #844F17;
  --green-column-bg: #00BB6633;
  --yellow-column-bg: #00FFFF33;

  --covered-line-row: #30907035;
  --uncovered-line-row: #000F;

  --bg: #2B2A33;
  --fg: #EFEAE8;
  --link-color: #26999CAA;

  --vert-border: #36799455;
  --title-border: #fff3;
  --code-title-color: #9ff7;
  --tint-black: #0002;
}

.column-entry-green {
  text-align: left;
  background-color: var(--green-column-bg);
}

.column-entry-yellow {
  text-align: left;
  background-color: var(--yellow-column-bg);
}

.column-entry-red {
  text-align: left;
  background-color: var(--red-column-bg);
}

.red {
  background-color: var(--red);
  color: white;
  font-weight: bold;
}

.cyan {
  background-color: var(--teal);
}

.blob.green { color: var(--teal); }
.blob.grey { color: var(--gray); }
.blob.red { color: var(--red); }
.blob { background-color: unset; }
.blob:nth-child(2) { padding: 0 5px; }
.blob:nth-child(3) { padding: 0 5px 0 0; }

body {
  font-family: "Helvetica Neue", -apple-system, sans-serif;
  background-color: var(--bg);
  color: var(--fg);
}

h1 { font-size: 35pt; letter-spacing: -2px; margin: 20px 0 10px 15px;}
h2 { font-size: 22pt; font-weight: lighter; margin: 3px 0 0 48px;}
h3 { font-size: 20pt; }
h4 { font-size: 14pt; font-weight: lighter; margin: 3px 0 10px 50px;}

h4 + p > a { color: var(--teal); filter: brightness(+1.9); }

h5 { font-size: 10pt; font-weight: lighter; margin: 20px 0 10px 0; filter: brightness(0.5);}

.source-name-title pre {
  padding: 4px 18px;
  border-bottom: 1px solid var(--title-border);
  line-height: 35px;
  color: var(--code-title-color);
  font-weight: lighter;
  font-size: 16pt;
  font-family: "Helvetica Neue", sans-serif !important;
}

.line-number pre {
  font-size: small;
  color: var(--code-title-color);
  filter: brightness(0.6);
}

.covered-line pre {
  font-size: small;
  color: var(--code-title-color);
  filter: brightness(0.6);
}

.uncovered-line pre {
  font-size: small;
  color: var(--red);
  filter: brightness(0.6);
}

.centered {
  display: table;
  margin-left: left;
  margin-right: auto;
  /*! border: 1px solid #367994; */
  /*! border-radius: 10pt; */
}
.expansion-view {
  background-color: var(--tint-black);
  margin-left: 0px;
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  /*! border: 1px solid #367994; */
  /*! border-radius: 3px; */
}
table {
  border-collapse: collapse;
}
.light-row {
  background: unset;
  border: 1px solid #36799444;
}
.light-row-bold {
  background: unset;
  border: 1px solid #36799444;
  font-weight: bold;
}
.column-entry {
  text-align: left;
}
.column-entry-bold, tr:last-child td:first-child {
  text-align: left;
  font-family: monospace;
  font-size: 16pt;
  padding: 10px 15px;
}

.line-number {
  text-align: right;
  color: #aaa;
}
.covered-line {
  text-align: right;
  color: #00cd9d;
}
.uncovered-line {
  text-align: right;
  color: #ff6600;
}
.tooltip {
  position: relative;
  display: inline;
  background-color: #b3e6ff;
  text-decoration: none;
}
.tooltip span.tooltip-content {
  position: absolute;
  width: 100px;
  margin-left: -50px;
  color: #FFFFFF;
  background: #000000;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
}
.tooltip span.tooltip-content:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 1px solid #367994;
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
}
:hover.tooltip span.tooltip-content {
  visibility: visible;
  opacity: 0.8;
  bottom: 30px;
  left: 50%;
  z-index: 999;
}
th, td {
  vertical-align: top;
  padding: 0px 10px;
  border-collapse: collapse;
  border-right: solid 1px var(--vert-border);
  border-left: solid 1px var(--vert-border);
  text-align: left;
}
td pre {
  display: inline-block;
}
td:first-child {
  border-left: none;
}
td:last-child {
  border-right: none;
}
tr:hover {
  background-color: #26415e87;
}
a {
  color: var(--link-color);
  text-decoration: unset;
}

tr:has(.covered-line) {
  background-color: var(--covered-line-row);
}

tr:has(.uncovered-line) {
  background-color: var(--uncovered-line-row);
}

tr:has(td.code .red) td.line-number pre {
  color: var(--red-line-number);
}

pre {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  font-size: 16pt;
  font-weight: lighter;
}

pre, code {
  font-family: monospace !important;
}

tr:first-child pre {
  font-family: "Helvetica Neue", sans-serif !important;
  font-size: 9pt;
  padding: 0 0 10pt 0;
  margin: -10pt 0 0 -4pt;
  font-weight: lighter;
}

tr:last-child td:first-child pre {
  font-family: "Helvetica Neue", sans-serif !important;
  font-size: 9pt;
  padding: 0 0 10pt 0;
  margin: -10pt 0 0 -4pt;
  font-weight: lighter;
  opacity: 0.7;
}

body > p:nth-child(4) {
  font-style: italic;
  font-weight: lighter;
  color: var(--fg);
  filter: brightness(0.50);
  margin: 0 0 10pt 40pt;
  font-size: small;
}

.column-entry-bold {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 10pt;
  font-weight: lighter;
}

tr:has(td:nth-child(2).column-entry-red) td:first-child() pre a
{
  color: var(--red-file-name);
}