:root {
	--cell-padding: 8px;
	--color-border: #ccc;
	--color-active: blue;
	--fg-add: #298629;
	--fg-del: #a44;
}
body {
	font-family: sans-serif;
	font-size: 14px;
	max-width: 1000px;
	margin:auto;
}
a {
	color: inherit;
	text-decoration-skip-ink: none;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	&:hover {
		color: var(--color-active);
	}
}
button,input,select {
	font-family: inherit;
	padding: 4px;
}
select {
	min-width: 100px;
	background: #efefef;
	box-shadow: none;
	border:1px solid var(--color-border);
	border-radius: 4px;
}
table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 20px;
	th,td {
		padding: var(--cell-padding);
		text-align: left;
	}
}
#cgit {
	table#header {
		--cell-padding: 2px;
		.main{
			font-size: 2em;
		}
		.logo{
			display: none;
		}
		form {
			float: right;
		}
		.right {
			float: right;
		}
	}

	/*menu (tabs)*/
	table.tabs {
		margin-inline: calc(var(--cell-padding) * -1);
		background: #f9f9f9;
		border-radius: 8px;
		border:1px solid #eee;

		/*individual menu items*/
		tbody>tr>td a {
			padding: var(--cell-padding);
			&.active {/*the current tab we're on*/
				text-decoration: none;
				border-radius: 8px;
				font-style: italic;
			}
		}

		form {
			float: right;
		}
	}

	table.list{
		tr:not(.nohover), tr.nohover:has(th) {
			border: 1px solid var(--color-border);
		}
		tr:has(th) {
			background: #eee;
		}
		a:not(:hover){
			text-decoration: none;
		}
		a.button{
			float: right;
		}
	}

	table.commit-info {
		th,td {
			border: 1px solid var(--color-border);
		}
		th {
			background: #eee;
		}
	}

	table.diffstat {
		font-size: 12px;
		--cell-padding: 2px 8px;
		th,td {
			margin:0;
			border: 1px solid var(--color-border);
		}
		.mov {
			color: rgb(94,94,94);
		}
		.add {
			color: var(--fg-add);
		}
		.upd {
			color: #886013;
		}
		.graph {
			--cell-padding: 0 8px;
			min-width: 25px;
			table {
				margin-block: 0;
				height:1em;
				td {
					border:2px solid white;
				}
			}
			.add {
				background: var(--fg-add);
			}
			.rem {
				background: var(--fg-del);
			}
			.none {
				background: #ccc;
			}
		}
	}

	table.diff {
		white-space: pre;
		font-family: monospace;
		font-size: 12px;
		border:1px solid var(--color-border);
		padding: 8px;
		.head,.hunk{
			margin-block: .67em;
		}
		.add {
			background: #eefcee;
			color: var(--fg-add);
		}
		.del {
			background: #faf4f4;
			color: var(--fg-del);
		}
		td>div {
			overflow: hidden;
		}
	}
	.mode,.ls-mode {
		white-space: pre;
		font-family: monospace;
	}
	.diffstat-header {
		font-size: 1.8em;
		margin-block: 2em 1em;
	}
	.diffstat-summary {
		font-weight: bold;
		background: beige ;
	}
	/*commit sha*/
	.sha1 a {
		font-family: monospace;
		font-size: 13px;
		padding:2px;
	}
	.decoration {
		margin-inline: 8px;
	}
	a.button,a.deco,a.branch-deco {
		border-radius: 3px;
		padding: 2px 4px;
		text-decoration: none;
		margin-inline: 2px;
		border: .7px solid currentColor;
	}
	a.deco {
		background: #ffecc8;

	}
	a.branch-deco {
		background: #ffebfa;
	}
	a.button {
		background: #eee;
		padding: 4px 8px;
		&:hover{
			color: inherit;
			background: #ccc;
		}
	}
	.cgit-panel {
		border:1px solid var(--color-border);
		background: #f9f9f9;
		padding:8px;
		width: fit-content;
		form table {
			margin-block: 0;
			--cell-padding: 4px;
		}
	}

	/*cgit outputs commit's subject and message
	as two consecutive DIV elements.
	Below rules format them to look "related"*/
	.commit-subject,.commit-msg {
		--color-border: #ddb66e;
		border-left: 3px solid var(--color-border);
		padding-left: 20px;
	}
	.commit-subject {
		margin-block: 40px 0;
		padding-top:20px;
		font-weight: bold;
		.decoration {
			font-weight: normal;
		}
		border-radius: 8px 8px 0 0;
		background: #f8f8ee;
	}
	.commit-msg {
		padding-top: .5em;
		border-radius: 0 0 8px 8px;
		background: #f8f8ee;
		padding-bottom: 20px;
		white-space:pre;
	}
	/**/
	.footer {
		margin-block: 20px;
	}
}