X-Git-Url: https://git.chrismorgan.info/gitweb/blobdiff_plain/a21510b946408b22da99ab135f676e9972ca9455..1e764923eb029c7fbe20af5935905f7ab173cf3e:/static/gitweb.css?ds=sidebyside

diff --git a/static/gitweb.css b/static/gitweb.css
index 3212601..e549474 100644
--- a/static/gitweb.css
+++ b/static/gitweb.css
@@ -1,11 +1,35 @@
+html,
+body {
+	height: 100%;
+}
+
 body {
 	font-family: sans-serif;
-	font-size: small;
-	border: solid #d9d8d1;
-	border-width: 1px;
-	margin: 10px;
+	margin: 0;
 	background-color: #ffffff;
 	color: #000000;
+	/*display: flex;
+	flex-direction: column;*/
+}
+
+.cards {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin: 1rem;
+}
+
+.cards > article {
+	border: 1px solid #ddd;
+}
+
+.cards > article > .header > .title {
+	--card-title-pad-left: 0.5rem;
+	padding: 0.25rem 0.5rem;
+}
+
+.cards > article > table {
+	padding: 0;
 }
 
 a {
@@ -41,67 +65,85 @@ a.list img.avatar {
 	border-style: none;
 }
 
-div.page_header {
-	height: 25px;
-	padding: 8px;
+.page_header {
+	/* Subtracting the border-top, because otherwise the underlines on/below links start to unbalance it. */
+	padding: 0.75rem 1rem 1rem;
 	font-size: 150%;
+	border-top: 0.25rem solid #f71;
+	background-color: #f716;
+}
+
+.page_header a {
 	font-weight: bold;
-	background-color: #d9d8d1;
 }
 
-div.page_header a:visited, a.header {
+.page_header a:visited, a.header {
 	color: #0000cc;
 }
 
-div.page_header a:hover {
+.page_header a:hover {
 	color: #880000;
 }
 
+/* .page_header + nav.page_subhead now wraps .page_nav and the search form, which is reduced from <form><div class=search> to <form role=search>; and both it and .page_nav are optional; and page_nav comes first rather than last. */
+.page_subhead {
+	display: flex;
+	background: #eee;
+	margin-bottom: 1em;
+}
+
 div.page_nav {
-	padding: 8px;
+	padding: 0.5rem 1em;
 }
 
 div.page_nav a:visited {
 	color: #0000cc;
 }
 
+.page_nav .current {
+	font-weight: bold;
+}
+
 div.page_path {
-	padding: 8px;
+	padding: 0.5rem 1rem;
 	font-weight: bold;
-	border: solid #d9d8d1;
+	border: solid #ddd;
 	border-width: 0px 0px 1px;
 }
 
-div.page_footer {
-	height: 22px;
-	padding: 4px 8px;
-	background-color: #d9d8d1;
+.page_footer {
+	margin-top: auto;
+	margin-top: 2rem;
+	display: flex;
+	padding: 0.5rem 1rem;
+	background-color: #ddd;
+	justify-content: flex-end;
 }
 
 div.page_footer_text {
-	line-height: 22px;
+	margin-right: auto;
 	float: left;
 	color: #555555;
 	font-style: italic;
 }
 
 div#generating_info {
-	margin: 4px;
+	margin: 0.5rem 1rem;
 	font-size: smaller;
 	text-align: center;
 	color: #505050;
 }
 
 div.page_body {
-	padding: 8px;
+	padding: 0.5rem 1rem;
 	font-family: monospace;
 }
 
 div.title, a.title {
 	display: block;
-	padding: 6px 8px;
+	padding: 0.5rem 1rem;
 	font-weight: bold;
-	background-color: #edece6;
+	background-color: #ddd;
 	text-decoration: none;
 	color: #000000;
 }
@@ -111,44 +153,51 @@ div.readme {
 }
 
 a.title:hover {
-	background-color: #d9d8d1;
+	background-color: #ccc;
 }
 
 div.title_text {
-	padding: 6px 0px;
-	border: solid #d9d8d1;
+	padding: 0;
+	border: solid #ccc;
 	border-width: 0px 0px 1px;
-	font-family: monospace;
+}
+
+:root {
+	/* FIXME: not good, too tied to the font, restructure */
+	--log-sidebar-width: 10rem;
 }
 
 div.log_body {
-	padding: 8px 8px 8px 150px;
+	padding: 8px 8px 8px var(--log-sidebar-width);
 }
 
-span.age {
-	position: relative;
-	float: left;
-	width: 142px;
+time {
 	font-style: italic;
 }
 
+time.age {
+	float: left;
+	/* From .cards > article > .header > .title padding-left; eww, TODO tidy all this up */
+	width: calc(var(--log-sidebar-width) - var(--card-title-pad-left));
+}
+
 span.signoff {
 	color: #888888;
 }
 
 div.log_link {
-	padding: 0px 8px;
-	font-size: 70%;
+	padding: 0 0.5rem;
+	font-size: 80%;
 	font-family: sans-serif;
 	font-style: normal;
 	position: relative;
 	float: left;
-	width: 136px;
+	width: calc(var(--log-sidebar-width) - 0.5rem - 0.5rem);
 }
 
 div.list_head {
 	padding: 6px 8px 4px;
-	border: solid #d9d8d1;
+	border: solid #ddd;
 	border-width: 1px 0px 0px;
 	font-style: italic;
 }
@@ -159,7 +208,7 @@ div.list_head {
 
 div.author_date {
 	padding: 8px;
-	border: solid #d9d8d1;
+	border: solid #ddd;
 	border-width: 0px 0px 1px 0px;
 }
 
@@ -197,12 +246,15 @@ a.text:hover {
 }
 
 table {
-	padding: 8px 4px;
+	padding: 0.5rem 1rem;
 	border-spacing: 0;
 }
+table.tree {
+	padding: 0;
+}
 
 table.diff_tree {
-	font-family: monospace;
+	font-family: monospace,m;
 }
 
 table.combined.diff_tree th {
@@ -233,31 +285,26 @@ table.blame {
 
 table.blame td {
 	padding: 0px 5px;
-	font-size: 100%;
 	vertical-align: top;
 }
 
-th {
-	padding: 2px 5px;
-	font-size: 100%;
+th,
+table.project_list th:first-child {
+	padding: 0.25rem 0.5rem;
 	text-align: left;
 }
 
-/* do not change row style on hover for 'blame' view */
-tr.light,
-table.blame .light:hover {
-	background-color: #ffffff;
+th:first-child {
+	padding-left: 0;
 }
 
-tr.dark,
-table.blame .dark:hover {
-	background-color: #f6f6f0;
+/* do not change row style on hover for 'blame' view */
+tr.light {
+	background-color: #ffffff;
 }
 
-/* currently both use the same, but it can change */
-tr.light:hover,
-tr.dark:hover {
-	background-color: #edece6;
+tr.dark {
+	background-color: #f6f6f6;
 }
 
 /* boundary commits in 'blame' view */
@@ -273,15 +320,13 @@ tr.color2 { background-color: #f6f6ff; }
 tr.color3 { background-color: #fff6f6; }
 
 td {
-	padding: 2px 5px;
-	font-size: 100%;
-	vertical-align: top;
+	padding: 0.25rem 0.5rem;
 }
 
 td.link, td.selflink {
 	padding: 2px 5px;
 	font-family: sans-serif;
-	font-size: 70%;
+	font-size: 80%;
 }
 
 td.selflink {
@@ -289,7 +334,7 @@ td.selflink {
 }
 
 td.sha1 {
-	font-family: monospace;
+	font-family: monospace,m;
 }
 
 .error {
@@ -302,12 +347,16 @@ td.current_head {
 }
 
 td.category {
-	background-color: #d9d8d1;
-	border-top: 1px solid #000000;
-	border-left: 1px solid #000000;
+	background-color: #ddd;
+	border-top: 0.5rem solid #fff;
+	box-shadow: inset 0 1px #bbb;
 	font-weight: bold;
 }
 
+table.project_list tr:nth-child(2) > td.category {
+	border-top-width: 0.25rem;
+}
+
 table.diff_tree span.file_status.new {
 	color: #008000;
 }
@@ -361,20 +410,19 @@ table.blame td.age0 {
 }
 
 td.pre, div.pre, div.diff {
-	font-family: monospace;
-	font-size: 12px;
+	font-family: monospace,m;
 	white-space: pre;
 }
 
 td.mode {
-	font-family: monospace;
+	font-family: monospace,m;
 }
 
 /* progress of blame_interactive */
 div#progress_bar {
 	height: 2px;
 	margin-bottom: -2px;
-	background-color: #d8d9d0;
+	background-color: #ddd;
 }
 div#progress_info {
 	float: right;
@@ -383,7 +431,7 @@ div#progress_info {
 
 /* format of (optional) objects size in 'tree' view */
 td.size {
-	font-family: monospace;
+	font-family: monospace,m;
 	text-align: right;
 }
 
@@ -395,13 +443,8 @@ div.diff.extended_header {
 
 div.diff.header {
 	font-weight: bold;
-
-	background-color: #edece6;
-
-	margin-top: 4px;
-	padding: 4px 0px 2px 0px;
-	border: solid #d9d8d1;
-	border-width: 1px 0px 1px 0px;
+	background-color: #eee;
+	box-shadow: inset 0 1px #0003;
 }
 
 div.diff.header a.path {
@@ -411,16 +454,17 @@ div.diff.header a.path {
 div.diff.extended_header,
 div.diff.extended_header a.path,
 div.diff.extended_header a.hash {
-	color: #777777;
+	color: #333;
 }
 
 div.diff.extended_header .info {
-	color: #b0b0b0;
+	opacity: 0.5;
 }
 
-div.diff.extended_header {
-	background-color: #f6f5ee;
-	padding: 2px 0px 2px 0px;
+div.diff.extended_header,
+div.diff.from_file,
+div.diff.to_file {
+	background-color: #eee;
 }
 
 div.diff a.list,
@@ -437,28 +481,28 @@ div.diff a.hash:hover {
 
 div.diff.to_file a.path,
 div.diff.to_file {
-	color: #007000;
+	color: #060;
 }
 
 div.diff.add {
-	color: #008800;
+	background-color: #dfd;
 }
 
-div.diff.add span.marked {
-	background-color: #aaffaa;
+div.diff.add mark {
+	background-color: #afa;
 }
 
 div.diff.from_file a.path,
 div.diff.from_file {
-	color: #aa0000;
+	color: #900;
 }
 
 div.diff.rem {
-	color: #cc0000;
+	background-color: #fdd;
 }
 
-div.diff.rem span.marked {
-	background-color: #ffaaaa;
+div.diff.rem mark {
+	background-color: #faa;
 }
 
 div.diff.chunk_header a,
@@ -467,9 +511,6 @@ div.diff.chunk_header {
 }
 
 div.diff.chunk_header {
-	border: dotted #ffe0ff;
-	border-width: 1px 0px 0px 0px;
-	margin-top: 2px;
 }
 
 div.diff.chunk_header span.chunk_info {
@@ -478,6 +519,7 @@ div.diff.chunk_header span.chunk_info {
 
 div.diff.chunk_header span.section {
 	color: #aa22aa;
+	font-style: italic;
 }
 
 div.diff.incomplete {
@@ -525,13 +567,8 @@ div.index_include {
 	padding: 12px 8px;
 }
 
-div.search {
-	font-size: 100%;
-	font-weight: normal;
-	margin: 4px 8px;
-	float: right;
-	top: 56px;
-	right: 12px
+.page_subhead [role=search] {
+	margin: 0.5rem 1rem 0.5rem auto;
 }
 
 div.projsearch {
@@ -549,39 +586,38 @@ td.linenr {
 
 a.linenr {
 	color: #999999;
-	text-decoration: none
+	text-decoration: none;
+	user-select: none;
 }
 
-a.rss_logo {
-	float: right;
+a.feed_logo {
 	padding: 3px 5px;
-	line-height: 10px;
 	border: 1px solid;
 	border-color: #fcc7a5 #7d3302 #3e1a01 #ff954e;
 	color: #ffffff;
 	background-color: #ff6600;
 	font-weight: bold;
 	font-family: sans-serif;
-	font-size: 70%;
+	font-size: 80%;
 	text-align: center;
 	text-decoration: none;
 }
 
-a.rss_logo:hover {
+a.feed_logo:hover {
 	background-color: #ee5500;
 }
 
-a.rss_logo.generic {
+a.feed_logo.generic {
 	background-color: #ff8800;
 }
 
-a.rss_logo.generic:hover {
+a.feed_logo.generic:hover {
 	background-color: #ee7700;
 }
 
 span.refs span {
 	padding: 0px 4px;
-	font-size: 70%;
+	font-size: 80%;
 	font-weight: normal;
 	border: 1px solid;
 	background-color: #ffaaff;
@@ -616,21 +652,13 @@ span.refs span.head {
 	border-color: #ccffcc #00cc33 #00cc33 #ccffcc;
 }
 
-span.atnight {
-	color: #cc0000;
-}
-
-span.match {
-	color: #e00000;
-}
-
 div.binary {
 	font-style: italic;
 }
 
 div.remote {
 	margin: .5em;
-	border: 1px solid #d9d8d1;
+	border: 1px solid #ddd;
 	display: inline-block;
 }
 
@@ -654,33 +682,21 @@ div.remote {
 	/* float: right; */
 	position: absolute;
 	top: 0px; right: 0px;
-	border:  1px solid green;
-	margin:  1px 1px 1px 1px;
-	padding-bottom: 2px;
-	width:     12px;
-	height:    10px;
-	font-size:  9px;
+	border: none;
 	font-weight: bold;
-	text-align: center;
-	background-color: #fff0f0;
+	background-color: transparent;
 	cursor: pointer;
 }
 
 
-/* Style definition generated by highlight 2.4.5, http://www.andre-simon.de/ */
-
-/* Highlighting theme definition: */
-
-.num    { color:#2928ff; }
-.esc    { color:#ff00ff; }
-.str    { color:#ff0000; }
-.dstr   { color:#818100; }
-.slc    { color:#838183; font-style:italic; }
-.com    { color:#838183; font-style:italic; }
-.dir    { color:#008200; }
-.sym    { color:#000000; }
-.line   { color:#555555; }
-.kwa    { color:#000000; font-weight:bold; }
-.kwb    { color:#830000; }
-.kwc    { color:#000000; font-weight:bold; }
-.kwd    { color:#010181; }
+/* Unknown ones included because something like them was in upstream gitweb: str, dstr, dir, sym. */
+.num             { color: #00c; }
+.esc             { color: #c00; font-weight: bold; font-style: italic; }
+.str, .dstr, .sng, .pps { color: #c00; }
+.slc, .com       { color: #090; font-style: italic; }
+.ppc, .pps { font-style: italic; }
+/*.dir             { color: #008200; }*/
+/*.sym             { color: #000000; }*/
+/*.line            { color: #555555; }*/
+.kwa, .kwb, .kwc { color: #000; font-weight: bold; }
+/* Problems with the current syntax highligher: (a) macros and functions are highlighted the same (kwd); (b) attributes highlight the rest of the line, not just inside the #[…]. */