This wiki's CSS

As a live document of the custom CSS used, this documentation makes replicating the look-and-feel after a fresh installation relatively easy.

The /conf/tpl/dokuwiki/style.ini file as follows, for each component listed in the sections below:

[stylesheets]
code.css = all
scroll.css = all

Hints for Python syntax highlighting from Atom's One Light syntax highlighting and ReadTheDocs. The rest were lifted wholesale from the suggested syntax highlighting.

/* manual universal Dokuwiki overrides */
 
/* bash overrides */
.code.bash .re1 { color: #0000ff; }
.code.bash .re2 { color: #0000ff; }
.code.bash .re3 { color: #808080; font-style: italic; }
.code.bash .re4 { color: #0000ff; }
 
/* c overrides */
.code.c .co2 { color: #339933; }
.code.c .me1 { color: #202020; }
.code.c .me2 { color: #202020; }
 
/* cpp overrides */
.code.cpp .br0 { color: #000000; }
.code.cpp .co1 { color: #ff0000; }
.code.cpp .co2 { color: #339900; }
.code.cpp .coMULTI { color: #ff0000; font-style: italic; }
.code.cpp .es0 { color: #666666; font-weight: bold; }
.code.cpp .kw1 { color: #0000ff; }
.code.cpp .kw2 { color: #0000ff; }
.code.cpp .kw3 { color: #0000dd; }
.code.cpp .kw4 { color: #0000ff; }
.code.cpp .me1 { color: #00eeff; }
.code.cpp .me2 { color: #00eeff; }
.code.cpp .nu0 { color: #0000dd; }
.code.cpp .st0 { color: #666666; }
.code.cpp .sy0 { color: #000000; }
 
/* css overrides */
.code.css .co1 { color: #a1a100; }
.code.css .kw1 { color: #000000; font-weight: bold; }
.code.css .kw2 { color: #993333; }
.code.css .re0 { color: #cc00cc; }
.code.css .re1 { color: #6666ff; }
.code.css .re2 { color: #3333ff; }
.code.css .re3 { color: #933; }
.code.css .re4 { color: #933; }
 
/* ini overrides */
.code.ini .co0 { color: #666666; font-style: italic; }
.code.ini .re0 { color: #000066; font-weight: bold; }
.code.ini .re1 { color: #000099; }
.code.ini .re2 { color: #660066; }
.code.ini .st0 { color: #933; }
.code.ini .sy0 { color: #000066; font-weight: bold; }
 
/* javascript overrides */
.code.javascript .co1 { color: #009900; font-style: italic; }
.code.javascript .coMULTI { color: #009900; font-style: italic; }
.code.javascript .kw1 { color: #000066; font-weight: bold; }
.code.javascript .kw2 { color: #003366; font-weight: bold; }
.code.javascript .nu0 { color: #CC0000; }
.code.javascript .re0 { color: #0066FF; }
.code.javascript .st0 { color: #3366CC; }
 
/* mysql overrides */
.code.mysql .kw1 { color: #993333; font-weight: bold; }
.code.mysql .kw2 { color: #aa9933; font-weight: bold; }
.code.mysql .kw3 { color: #aa3399; font-weight: bold; }
.code.mysql .kw4 { color: #33aa99; font-weight: bold; }
.code.mysql .kw5 { color: #993333; font-weight: bold; }
 
/* php overrides */
.code.php .re1 { color: #ff0000; }
 
/* python overrides */
/* note that Geshi 1.0.9.1 syntax highlighting is very outdated,
 * last updated in 2008 for Python 3.0, e.g. 'print' is a reserved word,
 * string methods are treated differently...
 */
:root {
    --syntax-black: black;
    --syntax-purple: #A626A4;
    --syntax-orange: #FF7700;
    --syntax-grey: #A0A1A7;
    --syntax-blue: #4078F2;
    --syntax-green: #50A14F;
    --syntax-red: #E45649;
    --syntax-yellow: #B76B01;
    --syntax-teal: #0184BC;
}
.code.python .co1 { color: var(--syntax-grey); font-style: italic; } /* comments */
.code.python .br0 { color: var(--syntax-black); } /* brackets */
.code.python .sy0 { color: var(--syntax-black); } /* symbols */
.code.python .kw1 { color: var(--syntax-orange); } /* reserved words */
.code.python .kw2 { color: var(--syntax-purple); font-weight: 100; } /* builtins, self */
.code.python .kw3 { color: var(--syntax-black); } /* stdlib, e.g. struct, datetime */
.code.python .kw4 { color: var(--syntax-black); } /* next, magic methods, string methods */
.code.python .me1 { color: var(--syntax-blue); } /* methods references */
.code.python .nu0 { color: var(--syntax-red); } /* numbers */
.code.python .st0 { color: var(--syntax-green); } /* strings, docstrings */
 
/* sql overrides */
.code.sql .kw1 { color: #993333; font-weight: bold; }
 
/* xml overrides */
.code.xml .re0 { color: #000066; }
.code.xml .re1 { font-weight: bold; color: black; }
.code.xml .re2 { font-weight: bold; color: black; }
.code.xml .sc0 { color: #00bbdd; }
.code.xml .sc1 { color: #ddbb00; }
.code.xml .sc2 { color: #339933; }
.code.xml .sc3 { color: #009900; }

p, ul, ol, dl, pre,
table, hr, blockquote, figure,
details, fieldset, address {
    margin: 0 0 1.2em 0;
}
pre, code, samp, kbd {
    font-size: .85em;
    background-color: #fafafa;
}
pre {
    border: 1px solid #e1e4e5;
    border-radius: 8px;
    box-shadow: none;
}
code {
    color: #e74c3c;
    background-color: #fff;
    box-shadow: none;
    border: 1px solid #e1e4e5;
    padding: 2px 5px;
}

Because scrollbars are intuitive enough in the 21st century, so doing away with the arrows.
Note that these scrollbars apply to the ones in the editor as well.

/* https://stackoverflow.com/q/44334106 */
/* Also from Stackoverflow styled scrollbars */
::-webkit-scrollbar {
  height: 6px;
  width: 8px;
}
 
::-webkit-scrollbar-track {
  border-radius: 0px 0px 10px 10px;
  background: #fafafa;
}
 
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #ddd;
}