Control surface API user style

[Dozius]

I've been playing around with the API and the bright red text on grey in the docs was killing my eyes. I threw this user style together to save myself. I thought it might be useful for others, so I am posting it here.

It's a bit of a mess. I just needed something quickly. However, you can probably get pretty far just changing the colour variables at the top if you want to change the colour scheme.

Code: Select all

:root {
  --background: #282828;
  --background-light: #343434;
  --border: #888888;
  --text: #F8F8F0;
  --highlight: #A6E22E;
  --selected: #AE81FF;
}

/* Search result font size */
.SRPage .SREntry {
  font-size: 12pt;
}

/* Add background to class hierarchy images */
html body div#doc-content div.contents table tbody tr td img,
html body div#doc-content div.contents div.dyncontent div.center img {
  background-color: var(--text);
}

/* Fix up various borders and horizontal rules */
#top,
div.qindex:first-child,
div.summary {
  border-bottom-color: var(--border);
}

.navpath ul,
div.qindex:last-child {
  border-top-color: var(--border);
}

#nav-tree {
  border-right-color: var(--border);
}

.memItemLeft,
.memItemRight,
hr {
  border-color: var(--border);
}

table.directory {
  border-color: var(--border);
}

.directory td.desc {
  border-left-color: var(--border);
}

/* Elements */
body,
div,
.navpath ul,
.navpath li.footer,
table.memberdecls tr,
.memdoc,
div.fragment,
span.lineno {
  background-color: var(--background);
  color: var(--text);
}

div.toc li {
  background-image: none;
}

div.toc {
  background-color: var(--background);
  color: var(--text);
  border-color: var(--border);
}

.memproto,
dl.reflist dt {
  background-color: var(--background-light);
  color: var(--text);
  border-color: var(--background-light);
}

.memdoc,
dl.reflist dd {
  border-color: var(--background-light);
  border-width: 2px;
}

.title,
div.ah,
div.toc h3,
h2.groupheader {
  color: var(--text);
}

a,
.tablist a,
div.toc a,
.arrow,
.directory .levels span,
.navpath li,
.SRSymbol {
  color: var(--highlight);
}

#nav-tree .selected a,
.tablist li.current a,
.navpath li.navelem a {
  color: var(--selected);
}

.directory tr {
  background-color: var(--background);
}

.directory tr.even {
  background-color: var(--background-light);
}

.icon {
  background-color: var(--highlight);
  color: var(--background);
}