/* cgit local overrides — DOC-2608-009. * * Installs to /usr/share/webapps/cgit/cgitCremonde.css and is loaded AFTER the * pacman-owned /cgit.css via a second `css=` line in both cgitrcs (cgitrc * accepts `css` more than once; each is appended to in order). The * packaged stylesheet is therefore never edited and pacman -Syu cannot revert * any of this. * * Both nginx faces — f3rr3t.com and enclave — share `root * /usr/share/webapps/cgit` with `try_files $uri`, so this one file serves both * and they stay in visual lockstep with no nginx change. * * Part 1 applies at every width: syntax colours, and the line-box rule that * syntaxHighlighting.py depends on. * Part 2 is entirely inside a media query, so desktop layout is untouched. */ /* ==== Part 1: applies at every width ==================================== */ /* Pygments 'pastie' style defs, generated with * pygmentize -S pastie -f html -a .highlight * and filtered to .highlight-scoped rules only. The five rules dropped were * `pre { line-height: 125% }` — which would otherwise hit cgit's line-number * gutter and every other 
 on the site — and four td.linenos/span.linenos
 * rules for pygments' own gutter, which we do not use.
 *
 * Regenerate if syntaxHighlighting.py's style= ever changes.
 */
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888 } /* Comment */
.highlight .err { color: #A61717; background-color: #E3D2D2 } /* Error */
.highlight .k { color: #080; font-weight: bold } /* Keyword */
.highlight .ch { color: #888 } /* Comment.Hashbang */
.highlight .cm { color: #888 } /* Comment.Multiline */
.highlight .cp { color: #C00; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888 } /* Comment.Single */
.highlight .cs { color: #C00; font-weight: bold; background-color: #FFF0F0 } /* Comment.Special */
.highlight .gd { color: #000; background-color: #FDD } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.highlight .gr { color: #A00 } /* Generic.Error */
.highlight .gh { color: #333 } /* Generic.Heading */
.highlight .gi { color: #000; background-color: #DFD } /* Generic.Inserted */
.highlight .go { color: #888 } /* Generic.Output */
.highlight .gp { color: #555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666 } /* Generic.Subheading */
.highlight .gt { color: #A00 } /* Generic.Traceback */
.highlight .kc { color: #080; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #080; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #080; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #080 } /* Keyword.Pseudo */
.highlight .kr { color: #080; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #00D; font-weight: bold } /* Literal.Number */
.highlight .s { color: #D20; background-color: #FFF0F0 } /* Literal.String */
.highlight .na { color: #369 } /* Name.Attribute */
.highlight .nb { color: #038 } /* Name.Builtin */
.highlight .nc { color: #B06; font-weight: bold } /* Name.Class */
.highlight .no { color: #036; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555 } /* Name.Decorator */
.highlight .ne { color: #B06; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #06B; font-weight: bold } /* Name.Function */
.highlight .nl { color: #369; font-style: italic } /* Name.Label */
.highlight .nn { color: #B06; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #369; font-weight: bold } /* Name.Property */
.highlight .nt { color: #B06; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #369 } /* Name.Variable */
.highlight .ow { color: #080 } /* Operator.Word */
.highlight .w { color: #BBB } /* Text.Whitespace */
.highlight .mb { color: #00D; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #00D; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #00D; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #00D; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #00D; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #D20; background-color: #FFF0F0 } /* Literal.String.Affix */
.highlight .sb { color: #D20; background-color: #FFF0F0 } /* Literal.String.Backtick */
.highlight .sc { color: #D20; background-color: #FFF0F0 } /* Literal.String.Char */
.highlight .dl { color: #D20; background-color: #FFF0F0 } /* Literal.String.Delimiter */
.highlight .sd { color: #D20; background-color: #FFF0F0 } /* Literal.String.Doc */
.highlight .s2 { color: #D20; background-color: #FFF0F0 } /* Literal.String.Double */
.highlight .se { color: #04D; background-color: #FFF0F0 } /* Literal.String.Escape */
.highlight .sh { color: #D20; background-color: #FFF0F0 } /* Literal.String.Heredoc */
.highlight .si { color: #33B; background-color: #FFF0F0 } /* Literal.String.Interpol */
.highlight .sx { color: #2B2; background-color: #F0FFF0 } /* Literal.String.Other */
.highlight .sr { color: #080; background-color: #FFF0FF } /* Literal.String.Regex */
.highlight .s1 { color: #D20; background-color: #FFF0F0 } /* Literal.String.Single */
.highlight .ss { color: #A60; background-color: #FFF0F0 } /* Literal.String.Symbol */
.highlight .bp { color: #038 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #06B; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #369 } /* Name.Variable.Class */
.highlight .vg { color: #D70 } /* Name.Variable.Global */
.highlight .vi { color: #33B } /* Name.Variable.Instance */
.highlight .vm { color: #369 } /* Name.Variable.Magic */
.highlight .il { color: #00D; font-weight: bold } /* Literal.Number.Integer.Long */

/* syntaxHighlighting.py emits no newlines between lines (lineseparator=''),
   so the spans themselves have to be the line boxes. */

/* The gutter is a single 
 for the whole file while the code column is now
   one block per line, so the two columns have to agree on line height exactly
   or the numbering drifts further out the further down the file you read. Pin
   both rather than letting them inherit `normal`, which is font-dependent. */
div#cgit table.blob td.linenumbers pre,
div#cgit table.blob td.lines div.highlight pre {
	line-height: 1.25;
}

div#cgit table.blob td.lines div.highlight pre > span[id^="ln-"] {
	display: block;
	/* A blank source line is an empty span, and an empty block collapses to
	   zero height — which would silently swallow every blank line and let the
	   gutter run ahead of the code. min-height matches the line-height above
	   exactly (1.25em == 1.25 × font-size), so blank lines hold their place. */
	min-height: 1.25em;
}


/* ==== Part 2: mobile legibility ========================================= */

@media (max-width: 700px) {

	/* cgit emits the line-number gutter as a sibling  holding one 
	   for the whole file, so wrapping the code grows its visual line count
	   while the gutter's stays fixed and the two desynchronise irreparably.
	   No CSS can resync them. So below this breakpoint the gutter is dropped
	   and the numbers are rebuilt inside td.lines, where each source line is
	   its own . A number inside its line cannot drift from
	   it. */
	div#cgit table.blob td.linenumbers {
		display: none;
	}

	div#cgit table.blob td.lines div.highlight pre {
		counter-reset: cgitln;
	}

	div#cgit table.blob td.lines div.highlight pre > span[id^="ln-"] {
		counter-increment: cgitln;
		white-space: pre-wrap;
		overflow-wrap: anywhere;  /* folds minified lines, base64, bare hashes */
		word-break: break-word;   /* older-engine fallback */
		padding-left: 4.5ch;      /* continuation fragments indent under the code */
		text-indent: -4.5ch;      /* first line pulls back under the number */
	}

	div#cgit table.blob td.lines div.highlight pre > span[id^="ln-"]::before {
		content: counter(cgitln);
		display: inline-block;
		width: 3.5ch;
		margin-right: 1ch;
		text-align: right;
		color: gray;
		-webkit-user-select: none;
		        user-select: none;  /* keeps numbers out of copied text */
	}

	/* Fallback for anything reaching td.lines without per-line spans: the
	   >512 KB bail-out in the filter, and the un-filtered path. */
	div#cgit table.blob td.lines pre,
	div#cgit table.blob td.lines pre code {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	div#cgit table.blob td.lines,
	div#cgit table.blob td.lines pre {
		tab-size: 4;
		font-size: 14px;
	}

	/* Looser leading for reading on a phone. The gutter is hidden here, so
	   nothing needs to stay in lockstep with it — but min-height must still
	   track line-height so blank lines keep their place. */
	div#cgit table.blob td.lines div.highlight pre {
		line-height: 1.5;
	}

	div#cgit table.blob td.lines div.highlight pre > span[id^="ln-"] {
		min-height: 1.5em;
	}

	/* Diff view. cgit.css sets `table.diff td { white-space: pre }`, and every
	   diff line is already its own 
, so there is no gutter problem here
	   at all — wrapping is free. */
	div#cgit table.diff td,
	div#cgit table.diff td div {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* cgit.css hard-codes this at 500px, which on its own widens every commit
	   page past a phone viewport. */
	div#cgit table.diffstat td.graph {
		width: auto;
		max-width: 40%;
	}

	/* Log/tree/index tables are wide by nature: let them scroll inside the
	   content box rather than widening the page. And cgit.css's 2em of padding
	   is most of a 360px screen. */
	div#cgit div.content {
		overflow-x: auto;
		padding: 0.5em;
	}

	div#cgit table.list {
		width: 100%;
	}

	/* The masthead has the same shape of problem as the tab bar below, and it
	   also sits outside div.content. cgit.css gives td.main and td.form
	   `white-space: nowrap`, td.main `font-size: 250%`, and td.logo a fixed
	   96px — between them the branch-switch form is pushed clean off a phone
	   screen. Stack the cells and bring the title down to a readable size. */
	div#cgit table#header,
	div#cgit table#header tbody,
	div#cgit table#header tr,
	div#cgit table#header td {
		display: block;
		width: auto;
	}

	/* 96px of a 360px screen for a decorative image whose link duplicates the
	   "index" link in the title line. The rowspan also makes it stack badly. */
	div#cgit table#header td.logo {
		display: none;
	}

	div#cgit table#header td.main {
		white-space: normal;
		font-size: 150%;
		padding-left: 0;
	}

	div#cgit table#header td.sub {
		white-space: normal;
		padding-left: 0;
	}

	div#cgit table#header td.form {
		text-align: left;
		padding-right: 0;
	}

	div#cgit table#header td.form select {
		max-width: 55vw;
	}

	div#cgit table#header td.sub.right {
		text-align: left;
	}

	/* The tab bar sits OUTSIDE div.content, so the content box's overflow-x
	   never contains it. cgit.css puts `white-space: nowrap` on td.form's form
	   (the log-search select + text input + submit), which alone holds the row
	   at ~590px and widens the whole page — the one thing this file exists to
	   prevent. Stacking the two cells drops the search form onto its own line
	   and lets the tab links wrap. */
	div#cgit table.tabs,
	div#cgit table.tabs tbody,
	div#cgit table.tabs tr,
	div#cgit table.tabs td {
		display: block;
		width: auto;
	}

	div#cgit table.tabs td {
		padding: 0 0.25em;
	}

	div#cgit table.tabs td.form {
		text-align: left;
	}

	div#cgit table.tabs td.form form {
		white-space: normal;
	}

	/* The search input is sized in columns and can still outrun a narrow
	   screen once the form is on its own line. */
	div#cgit table.tabs td.form input.txt {
		max-width: 60vw;
	}
}