/*
 * vilimpoc.org theme for gitweb.
 *
 * Loaded *after* the stock static/gitweb.css (see @stylesheets in
 * gitweb_config.perl), so this file only overrides; the vendored stylesheet is
 * left untouched and can be replaced wholesale when gitweb is upgraded.
 *
 * The palette is lifted from https://vilimpoc.org/index.css (a Tailwind v1
 * build): gray-700 page, warm off-white text, orange-300 links going red-500 on
 * hover. gitweb ships a light theme, so this is a full inversion - every rule
 * below exists because the stock sheet hard-codes a light-mode colour there.
 */

:root {
	--bg: #4a5568;          /* gray-700  - site background */
	--chrome: #2d3748;      /* gray-800  - header, footer, title bars */
	--chrome-alt: #3c4759;  /* between the two - nav and striping */
	--border: #718096;      /* gray-600 */
	--text: #fff5f5;        /* site body text */
	--muted: #cbd5e0;       /* gray-400  - ages, metadata */
	--faint: #a0aec0;       /* gray-500  - de-emphasised chrome text */
	--link: #fbd38d;        /* orange-300 - site link colour */
	--link-hover: #f56565;  /* red-500    - site hover colour */
	--add: #9ae6b4;         /* green-300 */
	--rem: #feb2b2;         /* red-300 */
	--chunk: #d6bcfa;       /* purple-300 */
	--sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 1.25rem;   /* ~125% of gitweb's default; matches the site body */
	font-weight: 300;
	border: 0;
	margin: 0;
	padding: 10px;
}

a { color: var(--link); }
a:visited, a:active { color: var(--link); }
a:hover { color: var(--link-hover); }

/* Page chrome: header, nav, path bar, footer. */
div.page_header {
	background-color: var(--chrome);
	color: var(--text);
	height: auto;
	padding: 10px 8px;
	border-radius: .25rem;
	/* Anchor + reserve space for the absolutely-centred logo (see img.logo). */
	position: relative;
	padding-right: 7rem;
}
div.page_header a:visited, a.header { color: var(--link); }
div.page_header a:hover { color: var(--link-hover); }

div.page_nav {
	background-color: transparent;
	padding: 10px 8px;
	/* A line box as tall as the search control centres the single line of links
	 * on the same axis as the floated search. It also makes gitweb's <br/>
	 * spacer/pagination lines a touch taller, which is fine. */
	line-height: 34px;
}
div.page_nav a:visited { color: var(--link); }

/* The search form (floated into the nav row) baseline-aligns its controls -
 * select, "?", "search:", the input and the "re" checkbox - so their differing
 * heights don't line up. inline-flex + align-items:center centres them with
 * each other; the 34px height matches the nav line-height so the two groups
 * share one middle axis. */
div.search {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 34px;
	margin: 10px 8px;
}

div.page_path {
	background-color: var(--chrome-alt);
	border-color: var(--border);
	color: var(--text);
	border-radius: .25rem;
}

div.page_footer {
	background-color: var(--chrome);
	/* Flex both contains the (stock) floated RSS/OPML buttons - so the coloured
	 * bar doesn't collapse behind just its text - and vertically centres the
	 * footer text against those taller buttons. */
	display: flex;
	align-items: center;
	/* flex-end keeps the buttons right-aligned on pages with no footer text
	 * (e.g. the project list's OPML/TXT), matching the stock float:right. */
	justify-content: flex-end;
	gap: 6px;
	min-height: 24px;
	padding: 8px;
	border-radius: .25rem;
}
/* Keep the buttons intact and on the right; don't let flex shrink them. */
div.page_footer a.rss_logo { margin-top: 0; flex: 0 0 auto; }
/* Fill the row (pushing the buttons right) but stay shrinkable (min-width:0) so
 * a long description ellipsises to one line instead of wrapping or bumping the
 * buttons to a new line. */
div.page_footer_text {
	color: var(--faint);
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

div.page_body { color: var(--text); }
div#generating_info { color: var(--faint); }

/* Section titles ("summary", "shortlog", ...) and the project search box. */
div.title, a.title {
	background-color: var(--chrome);
	color: var(--text);
	border-radius: .25rem;
}
a.title:hover { background-color: var(--chrome-alt); }
div.title_text { border-color: var(--border); }
div.readme { color: var(--text); }

/* On the summary page gitweb emits an empty title bar (just "&nbsp;",
 * gitweb.cgi:6618) above the description/owner/last-change table, which our
 * theme paints as a blank strip. It's uniquely the title div immediately
 * before that metadata table, so label it "summary" to match the other section
 * bars. font-size:0 collapses the stray &nbsp; the ::after supplies the text. */
div.title:has(+ table.projects_list) { font-size: 0; }
div.title:has(+ table.projects_list)::after {
	content: "summary";
	font-size: 1.25rem;
}

div.log_body { color: var(--text); }
span.age { color: var(--muted); }
div.list_head { color: var(--faint); }
.author_date, .author { color: var(--muted); }

/* Link-ish text that the stock sheet renders as near-black body copy. */
a.list, a.subject, a.name, table.tags a.subject { color: var(--text); }
a.list:hover, a.subject:hover, a.name:hover { color: var(--link-hover); }
a.text { color: var(--link); }
a.text:visited { color: var(--link); }
a.text:hover { color: var(--link-hover); }

/* Tables: striping has to be re-derived for a dark background - the stock
 * near-white row colours are unreadable here. */
th {
	color: var(--text);
	background-color: var(--chrome);
}
td { color: var(--text); }

tr.light, table.blame .light:hover { background-color: transparent; }
tr.dark, table.blame .dark:hover { background-color: rgba(255, 255, 255, .05); }
tr.light:hover, tr.dark:hover { background-color: rgba(255, 255, 255, .1); }

tr.color1 { background-color: rgba(154, 230, 180, .12); }
tr.color2 { background-color: rgba(144, 205, 244, .12); }
tr.color3 { background-color: rgba(254, 178, 178, .12); }

td.link, td.selflink { font-family: var(--sans); }
td.sha1 { font-family: var(--mono); }
/* Stock top-aligns every cell, so the small (70%) td.link cells
   ("shortlog | log | tree", "commit | commitdiff | tree", ...) float above the
   full-size name/subject/description beside them. Centre the row's cells
   against each other across the listing tables that share this markup. */
table.heads td,
table.tags td,
table.shortlog td,
table.project_list td,
table.diff_tree td,
table.history td { vertical-align: middle; }
td.current_head { color: var(--add); }
td.category { background-color: var(--chrome); }
.error { color: var(--rem); background-color: transparent; font-weight: 500; }

table.combined.diff_tree td.nochange a { color: var(--faint); }
table.combined.diff_tree td.nochange a:visited { color: var(--faint); }

/* Project list layout: keep Project / Owner / Last Change / links on a single
 * line each, and let the Description (2nd column) be the flexible column that
 * soaks up the remaining width, ellipsised so every row stays one line. */
table.project_list { width: 100%; }
table.project_list th,
table.project_list td { white-space: nowrap; }
table.project_list th:nth-child(2),
table.project_list td:nth-child(2) {
	/* max-width:0 + width:100% makes this the column that absorbs leftover
	 * width; overflow + text-overflow then clip the description to one line. */
	width: 100%;
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Shortlog: the same one-line treatment - age / author / links stay put and the
 * subject is the flexible, ellipsised column. Shared by the summary page's
 * shortlog and the dedicated shortlog page (both table.shortlog). The subject
 * cell is the one holding a.subject. */
table.shortlog { width: 100%; }
table.shortlog td { white-space: nowrap; }
table.shortlog td:has(a.subject) {
	width: 100%;
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;     /* anchor for the pinned ref badge */
}
/* Keep the ref badges (branch/tag chips) visible: pin them to the right of the
 * subject cell and reserve room so the subject ellipsises in the space before
 * them instead of being clipped away with the overflow. Only cells that carry a
 * badge reserve the space, so badge-less rows use the full width. */
table.shortlog td:has(span.refs) { padding-right: 5.5em; }
table.shortlog td:has(span.refs) span.refs {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

/* Repo ages in the project list, and blame gutters. */
table.project_list td.noage { color: var(--faint); }
table.project_list td.age2, table.blame td.age2 { color: var(--muted); }
table.project_list td.age1, table.blame td.age1 { color: var(--add); }
table.project_list td.age0, table.blame td.age0 { color: var(--add); }
table.blame td.age0, table.blame td.age1 { background: transparent; }

table.diff_tree span.file_status.new { color: var(--add); }
table.diff_tree span.file_status.deleted { color: var(--rem); }
table.diff_tree span.file_status.mode_chnge { color: var(--faint); }
table.diff_tree span.file_status.copied { color: var(--chunk); }

td.pre, div.pre, div.diff { font-family: var(--mono); font-size: 1rem; }
td.mode { font-family: var(--mono); }
td.size { font-family: var(--mono); }

/* Diffs. Stock uses dark ink on white; these are the same hues re-lit for a
 * dark ground, so added/removed stay green/red at readable contrast. */
div.diff.header {
	background-color: var(--chrome);
	color: var(--text);
	border-color: var(--border);
}
div.diff.extended_header {
	background-color: var(--chrome-alt);
	color: var(--muted);
}
div.diff.extended_header a.path,
div.diff.extended_header a.hash { color: var(--muted); }
div.diff.extended_header .info { color: var(--faint); }

div.diff.to_file a.path, div.diff.to_file, div.diff.add { color: var(--add); }
div.diff.add span.marked { background-color: rgba(154, 230, 180, .25); color: var(--text); }
div.diff.from_file a.path, div.diff.from_file, div.diff.rem { color: var(--rem); }
div.diff.rem span.marked { background-color: rgba(254, 178, 178, .25); color: var(--text); }

div.diff.chunk_header, div.diff.chunk_header a { color: var(--chunk); }
div.diff.chunk_header { border-color: var(--border); }
div.diff.chunk_header span.chunk_info { background-color: rgba(214, 188, 250, .15); }
div.diff.chunk_header span.section { color: var(--chunk); }
div.diff.incomplete { color: var(--faint); }
div.diff.nodifferences { color: var(--add); }

/* Side-by-side diff panes. */
div.chunk_block.rem div.old div.diff.rem { background-color: rgba(254, 178, 178, .1); }
div.chunk_block.add div.new div.diff.add { background-color: rgba(154, 230, 180, .1); }
div.chunk_block.chg div div.diff { background-color: rgba(251, 211, 141, .1); }
div.chunk_block.ctx div div.diff.ctx { color: var(--muted); }

/* Form controls - the stock sheet leaves these to the browser, which renders a
 * white box on the dark page. */
input, select, textarea, button {
	background-color: var(--chrome);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: .25rem;
	padding: 2px 6px;
	font-family: var(--sans);
	font-size: inherit;   /* browsers don't inherit page font onto form
	                         controls, so the search box/dropdown came out
	                         off-size; match surrounding text. */
}
input[type="submit"], button { cursor: pointer; }
input[type="submit"]:hover, button:hover { border-color: var(--link); color: var(--link); }
/* Native checkboxes/radios don't scale with font-size, so they look small
   next to the enlarged body text; size them relative to it. */
input[type="checkbox"], input[type="radio"] {
	border: 0;
	width: 1.1em;
	height: 1.1em;
	vertical-align: -0.15em;
}

/* Branch/tag/remote badges on the summary and shortlog. The stock sheet gives
 * these pale pastel fills meant for dark ink; against our near-white text they
 * are unreadable, so they become tinted chips instead. */
span.refs span {
	color: var(--muted);
	border-color: rgba(255, 255, 255, .12);
}
span.refs span a { color: var(--muted); }
span.refs span a:hover { color: var(--link-hover); }
span.refs span.ref { background-color: rgba(144, 205, 244, .1); }
span.refs span.tag { background-color: rgba(251, 211, 141, .1); }
span.refs span.head { background-color: rgba(154, 230, 180, .1); }

/* Light 1px borders the stock sheet scatters around; they glow on a dark page. */
span.cntrl,
div.author_date,
div.index_include,
div.remote,
.popup,
.close-button {
	border-color: var(--border);
}
.popup, .close-button { background-color: var(--chrome); color: var(--text); }
div#progress_bar { background-color: var(--chrome-alt); }

a.linenr { color: var(--faint); }
span.signoff { color: var(--muted); }
span.atnight { color: var(--rem); }
span.match { color: var(--bg); background-color: var(--link); border-radius: .125rem; }
table.diff_tree span.file_status.moved { color: var(--faint); }
table.combined.diff_tree td.nochange a:hover { color: var(--link-hover); }

/* The git logo's size is fixed in px by HTML width/height attributes, so it
   didn't grow with the enlarged body font. Size it in rem (not em: the header
   sets font-size:150%, against which em would double it). It floats right and
   so pins to the top of the header content; sizing it to the title's line box
   leaves the header's equal top/bottom padding as balanced blue above/below. */
img.logo {
	border-radius: .25rem;
	height: 2.25rem;
	width: auto;
	/* Stock floats the logo, which top-pins it: it only looks centred while its
	 * height happens to match the header text's line box. With larger fonts
	 * (e.g. on Windows) the header grows taller and the pinned logo drifts off
	 * centre. Absolute + translateY(-50%) centres it at any header height. */
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
}

/* The RSS/Atom badges' text scales (font-size is %), but their line-height and
   padding are fixed px, leaving the box cramped around the larger text. Make
   the box metrics em-relative so the badge grows with its text. */
a.rss_logo {
	line-height: 1.3em;
	padding: .2em .5em;
}

/* Not themed: the syntax-highlighting classes (.kwa, .str, .num, ...), which
 * are light-mode and would be near-invisible here. They are unused - the
 * 'highlight' feature is off in gitweb_config.perl because the host has no
 * highlight binary. Enabling it means theming those too. */