/* Transfiguration colours for cgit.
 *
 * Drop the generated file into cgit's docroot and point cgitrc at it:
 *
 *     css=/cgit-transfiguration.css
 *
 * Selectors follow cgit 1.3's own markup. Tokens are named for their ROLE,
 * so this file never says what colour anything is -- change the palette,
 * not this template.
 */

:root {
	--fg:        #e6dec6;
	--fg-bright: #f0e9d2;
	--fg-muted:  #99a18c;
	--bg:        #262e28;
	--surface:   #2b342c;
	--surface-2: #303a31;
	--raised:    #3a463b;
	--border:    #4a5347;
	--border-2:  #565f52;
	--accent:    #d3b380;
	--link:      #97ad6e;
	--link-hover:#aec288;
	--sel:       #6e7d54;
	--sel-fg:    #eae0c8;
	--add:       #6e7d54;
	--del:       #c05c48;
	--field:     #1f2621;
	--field-bd:  #565f52;
}

* { box-sizing: border-box; }

body {
	background: var(--bg);
	color: var(--fg);
	font-family: "Terminus", "Terminus (TTF)", monospace;
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	padding: 1.5rem 2rem 3rem;
}

a          { color: var(--link); text-decoration: none; }
a:hover    { color: var(--link-hover); text-decoration: underline; }
img        { border: none; }

/* ---------------------------------------------------------------- header */
table#header             { width: 100%; margin-bottom: .75rem; }
table#header td.logo     { display: none; }
table#header td.main     { font-size: 1.35rem; font-weight: bold; color: var(--fg-bright); }
table#header td.main a   { color: var(--accent); }
table#header td.sub      { color: var(--fg-muted); padding-top: .25rem; }

/* ------------------------------------------------------------------ tabs */
table.tabs {
	width: 100%;
	border-bottom: 2px solid var(--border-2);
	margin: .5rem 0 1.25rem;
	padding-bottom: .35rem;
}
table.tabs td a {
	color: var(--fg-muted);
	padding: .25rem .7rem;
	display: inline-block;
}
table.tabs td a:hover   { color: var(--fg-bright); text-decoration: none; }
table.tabs td a.active  {
	color: var(--bg);
	background: var(--accent);
	border-radius: 2px;
	font-weight: bold;
}
table.tabs td.form select,
table.tabs td.form input {
	background: var(--field);
	color: var(--fg);
	border: 1px solid var(--field-bd);
	padding: .15rem .3rem;
	font-family: inherit;
	font-size: .9em;
}

/* ----------------------------------------------------------------- lists */
table.list {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}
table.list th {
	background: var(--surface-2);
	color: var(--fg-bright);
	text-align: left;
	font-weight: bold;
	padding: .4rem .6rem;
	border-bottom: 1px solid var(--border-2);
}
table.list td {
	padding: .3rem .6rem;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
table.list tr:hover td            { background: var(--surface); }
table.list tr.nohover:hover td    { background: none; }

/* Author column on one line. cgit marks these tables nowrap but ships no
   rule for it, so without this a two-word name doubles every row's height. */
table.list.nowrap td:nth-child(3) { white-space: nowrap; }

td.logsubject { color: var(--fg); }
td.logmsg     { color: var(--fg-muted); }

/* --------------------------------------------------------------- content */
div.content       { border: none; padding: 0; }
div.content > h1,
div.content > h2,
div.content > h3  { color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: .2rem; }

pre, code, tt {
	font-family: "Terminus", "Terminus (TTF)", monospace;
}
div.content pre, div.content code {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 2px;
}
div.content pre  { padding: .75rem 1rem; overflow-x: auto; }
div.content code { padding: .05rem .3rem; }
div.content pre code { background: none; border: none; padding: 0; }

div.content blockquote {
	border-left: 3px solid var(--accent);
	margin-left: 0;
	padding-left: 1rem;
	color: var(--fg-muted);
}
div.content table { border-collapse: collapse; }
div.content table th,
div.content table td { border: 1px solid var(--border); padding: .3rem .6rem; }

/* ------------------------------------------------------------ blob, diff */
table.blob td.linenumbers a { color: var(--fg-muted); }
table.blob td.lines pre     { color: var(--fg); }
div.diffstat-header         { color: var(--fg-bright); }
table.diff td div.add, .add { color: var(--add); }
table.diff td div.del, .del { color: var(--del); }
table.diff td div.hunk      { color: var(--accent); }

table.commit-info, table.commit-msg {
	background: var(--surface);
	border: 1px solid var(--border);
	padding: .5rem;
}

/* --------------------------------------------------------------- footer */
div#cgit div.footer {
	color: var(--fg-muted);
	border-top: 1px solid var(--border);
	margin-top: 2rem;
	padding-top: .6rem;
	font-size: .85em;
}

/* ------------------------------------------------- markdown / pygments
 * cgit's about-filter (md2html) injects a 12 KB stylesheet of its own: a
 * GitHub-LIGHT markdown theme plus Pygments' default light syntax colours.
 * It is emitted with the page content, so it lands AFTER this file and wins
 * every tie on order. Beating it needs both higher specificity and, where
 * it already qualifies with div#cgit itself, !important. That is not
 * decoration here -- without it every code block on an about page renders
 * near-white with pale text on a dark page.
 */
div#cgit .markdown-body,
div#cgit .markdown-body p,
div#cgit .markdown-body li          { color: var(--fg) !important; }

div#cgit .markdown-body h1,
div#cgit .markdown-body h2,
div#cgit .markdown-body h3,
div#cgit .markdown-body h4,
div#cgit .markdown-body h5,
div#cgit .markdown-body h6          { color: var(--accent) !important; border-color: var(--border) !important; }
div#cgit .markdown-body h1 a.toclink,
div#cgit .markdown-body h2 a.toclink,
div#cgit .markdown-body h3 a.toclink,
div#cgit .markdown-body h4 a.toclink,
div#cgit .markdown-body h5 a.toclink,
div#cgit .markdown-body h6 a.toclink { color: var(--accent) !important; }

div#cgit .markdown-body hr          { border-color: var(--border) !important; }
div#cgit .markdown-body blockquote  { border-left-color: var(--accent) !important; color: var(--fg-muted) !important; }

div#cgit .markdown-body table th,
div#cgit .markdown-body table td    { border-color: var(--border) !important; }
div#cgit .markdown-body table tr,
div#cgit .markdown-body table tr:nth-child(2n) { background-color: transparent !important; }
div#cgit .markdown-body table tr:nth-child(2n) td { background-color: var(--surface) !important; }

div#cgit .markdown-body code,
div#cgit .markdown-body tt {
	background-color: var(--surface) !important;
	border: 1px solid var(--border) !important;
	color: var(--fg-bright) !important;
}
div#cgit .markdown-body pre,
div#cgit .markdown-body .highlight pre,
div#cgit .markdown-body .highlight {
	background-color: var(--surface) !important;
	border-color: var(--border) !important;
	color: var(--fg) !important;
}
div#cgit .markdown-body pre code,
div#cgit .markdown-body pre tt      { background: transparent !important; border: none !important; }

/* Pygments tokens, by role rather than by the colour they happen to be. */
div#cgit .highlight .c,  div#cgit .highlight .c1,
div#cgit .highlight .cm, div#cgit .highlight .cs   { color: var(--fg-muted) !important; font-style: italic; }
div#cgit .highlight .k,  div#cgit .highlight .kd,
div#cgit .highlight .kn, div#cgit .highlight .kt,
div#cgit .highlight .kr, div#cgit .highlight .kc   { color: var(--accent) !important; }
/* EVERY string-family token in the injected theme carries a light
   background-color, not just a colour -- .s .sa .sb .sc .dl .sd .se .sh
   .si .sx .sr .ss, and .cs .gd .gi too. Setting the colour alone leaves a
   pale box round every quoted string on a dark page, which is exactly how
   this looked before the backgrounds were cleared as well. */
div#cgit .highlight .s,  div#cgit .highlight .s1, div#cgit .highlight .s2,
div#cgit .highlight .sa, div#cgit .highlight .sb, div#cgit .highlight .sc,
div#cgit .highlight .dl, div#cgit .highlight .sd, div#cgit .highlight .sh,
div#cgit .highlight .ss                            { color: var(--add) !important; }
div#cgit .highlight .se, div#cgit .highlight .si   { color: var(--accent) !important; }
div#cgit .highlight .sx, div#cgit .highlight .sr   { color: var(--link) !important; }
div#cgit .highlight .cs                            { color: var(--fg-muted) !important; font-weight: normal; }

/* Clear the inherited backgrounds wholesale. */
div#cgit .highlight .s,  div#cgit .highlight .s1, div#cgit .highlight .s2,
div#cgit .highlight .sa, div#cgit .highlight .sb, div#cgit .highlight .sc,
div#cgit .highlight .dl, div#cgit .highlight .sd, div#cgit .highlight .se,
div#cgit .highlight .sh, div#cgit .highlight .si, div#cgit .highlight .sx,
div#cgit .highlight .sr, div#cgit .highlight .ss, div#cgit .highlight .cs,
div#cgit .highlight .gd, div#cgit .highlight .gi, div#cgit .highlight .err {
	background-color: transparent !important;
}
div#cgit .highlight .m,  div#cgit .highlight .mi,
div#cgit .highlight .mf, div#cgit .highlight .mh   { color: #c9a55e !important; }
div#cgit .highlight .nb, div#cgit .highlight .nf,
div#cgit .highlight .nc, div#cgit .highlight .nn,
div#cgit .highlight .nv, div#cgit .highlight .na   { color: var(--link) !important; }
div#cgit .highlight .o,  div#cgit .highlight .p,
div#cgit .highlight .w,  div#cgit .highlight .n    { color: var(--fg) !important; }
div#cgit .highlight .err                            { color: var(--del) !important; background: none !important; }
div#cgit .highlight .hll                            { background-color: var(--sel) !important; }
div#cgit .highlight .gh, div#cgit .highlight .gu     { color: var(--accent) !important; }
div#cgit .highlight .gd                             { color: var(--del) !important; }
div#cgit .highlight .gi                             { color: var(--add) !important; }

/* ------------------------------------------------- cgit's own classes
 * cgit 1.3 emits ~60 classes; a stylesheet that styles only the obvious
 * ones leaves the rest at browser defaults, which is how the tree view's
 * action links ended up reading as "logplainblame" -- cgit writes them as
 * </a><a> with NO whitespace between, relying entirely on .button having a
 * rule. These are the ones that carry meaning.
 */
table.list td a.button {
	display: inline-block;
	margin: 0 .12rem;
	padding: .02rem .4rem;
	border: 1px solid var(--border);
	border-radius: 2px;
	background: var(--surface);
	color: var(--fg-muted);
	font-size: .85em;
	line-height: 1.5;
}
table.list td a.button:hover {
	background: var(--raised);
	border-color: var(--accent);
	color: var(--fg-bright);
	text-decoration: none;
}

/* tree listing */
td.ls-mode { color: var(--fg-muted); font-family: inherit; }
td.ls-size { color: var(--fg-muted); text-align: right; padding-right: 1rem; }
a.ls-dir   { color: var(--accent); font-weight: bold; }
a.ls-blob  { color: var(--link); }

/* age is colour-coded by recency in cgit's own markup */
span.age-mins  { color: var(--accent); }
span.age-hours { color: var(--link-hover); }
span.age-days  { color: var(--fg-muted); }

/* ref decorations in the log */
a.branch-deco, a.tag-deco, a.tag-annotated-deco, a.remote-deco, a.deco {
	margin-left: .35rem;
	padding: 0 .3rem;
	border: 1px solid var(--border);
	border-radius: 2px;
	font-size: .8em;
}
a.branch-deco        { color: var(--link); }
a.tag-deco,
a.tag-annotated-deco { color: var(--accent); }
div.commit-subject   { color: var(--fg-bright); }
a.oid, .oid          { color: var(--fg-muted); font-family: inherit; }

/* diffstat */
div.diffstat-summary { color: var(--fg-muted); }
span.insertions      { color: var(--add); }
span.deletions       { color: var(--del); }
td.mode              { color: var(--fg-muted); }

/* alignment helpers cgit sets on cells */
.left  { text-align: left; }
.right { text-align: right; }

div.cgit-panel { border: 1px solid var(--border); background: var(--surface); padding: .4rem; }