css: restyle css

fix colors, page width, table borders

1 files changed, 112 insertions, 83 deletions

diff --git a/cgit.css b/cgit.css
index dfa144d..4d2c34c 100644
--- a/cgit.css
+++ b/cgit.css
@@ -1,20 +1,34 @@
+html {
+	background: #f0f0f0;
+}
+body {
+	max-width: 862px;
+	min-width: 815px;
+	margin-left: auto;
+	margin-right: auto;
+}
+a {
+	color: #397eaf;
+}
+a:hover {
+	color: #707070;
+}
 div#cgit {
 	padding: 0em;
 	margin: 0em;
 	font-family: sans-serif;
-	font-size: 10pt;
 	color: #333;
-	background: white;
+	background: #f0f0f0;
 	padding: 4px;
 }
 
 div#cgit a {
-	color: blue;
+	color: #397eaf;
 	text-decoration: none;
 }
 
 div#cgit a:hover {
-	text-decoration: underline;
+	color: #5ba6dc;
 }
 
 div#cgit table {
@@ -57,12 +71,12 @@ div#cgit table#header td.form select {
 
 div#cgit table#header td.sub {
 	color: #777;
-	border-top: solid 1px #ccc;
+	border-top: solid 1px #c4c4c4;
 	padding-left: 10px;
 }
 
 div#cgit table.tabs {
-	border-bottom: solid 3px #ccc;
+	border-bottom: solid 3px #c4c4c4;
 	border-collapse: collapse;
 	margin-top: 2em;
 	margin-bottom: 0px;
@@ -82,7 +96,9 @@ div#cgit table.tabs td a {
 
 div#cgit table.tabs td a.active {
 	color: #000;
-	background-color: #ccc;
+	background-color: #c4c4c4;
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
 }
 
 div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https://"]:after {
@@ -110,13 +126,13 @@ div#cgit div.path {
 	margin: 0px;
 	padding: 5px 2em 2px 2em;
 	color: #000;
-	background-color: #eee;
+	background-color: #e1e1e1;
 }
 
 div#cgit div.content {
 	margin: 0px;
 	padding: 2em;
-	border-bottom: solid 3px #ccc;
+	border-bottom: solid 3px #c4c4c4;
 }
 
 
@@ -127,11 +143,11 @@ div#cgit table.list {
 }
 
 div#cgit table.list tr {
-	background: white;
+	background: #f0f0f0;
 }
 
 div#cgit table.list tr.logheader {
-	background: #eee;
+	background: #e1e1e1;
 }
 
 div#cgit table.list tr:nth-child(even) {
@@ -139,19 +155,19 @@ div#cgit table.list tr:nth-child(even) {
 }
 
 div#cgit table.list tr:nth-child(odd) {
-	background: white;
+	background: #f0f0f0;
 }
 
 div#cgit table.list tr:hover {
-	background: #eee;
+	background: #e1e1e1;
 }
 
 div#cgit table.list tr.nohover {
-	background: white;
+	background: #f0f0f0;
 }
 
 div#cgit table.list tr.nohover:hover {
-	background: white;
+	background: #f0f0f0;
 }
 
 div#cgit table.list tr.nohover-highlight:hover:nth-child(even) {
@@ -159,7 +175,7 @@ div#cgit table.list tr.nohover-highlight:hover:nth-child(even) {
 }
 
 div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
-	background: white;
+	background: #f0f0f0;
 }
 
 div#cgit table.list th {
@@ -218,16 +234,16 @@ div#cgit table.list td.logmsg {
 }
 
 div#cgit table.list td a {
-	color: black;
+	color: #070707;
 }
 
 div#cgit table.list td a.ls-dir {
 	font-weight: bold;
-	color: #00f;
+	color: #397eaf;
 }
 
 div#cgit table.list td a:hover {
-	color: #00f;
+	color: #566a7f;
 }
 
 div#cgit img {
@@ -267,11 +283,11 @@ div#cgit table#downloads {
 }
 
 div#cgit table#downloads th {
-	background-color: #ccc;
+	background-color: #c4c4c4;
 }
 
 div#cgit div#blob {
-	border: solid 1px black;
+	border: solid 1px #070707;
 }
 
 div#cgit div.error {
@@ -297,14 +313,14 @@ div#cgit td.ls-mode {
 
 div#cgit table.blob {
 	margin-top: 0.5em;
-	border-top: solid 1px black;
+	border-top: solid 1px #070707;
 }
 
 div#cgit table.blob td.hashes,
 div#cgit table.blob td.lines {
 	margin: 0; padding: 0 0 0 0.5em;
 	vertical-align: top;
-	color: black;
+	color: #070707;
 }
 
 div#cgit table.blob td.linenumbers {
@@ -327,7 +343,7 @@ div#cgit table.ssdiff td.lineno a {
 
 div#cgit table.blob td.linenumbers a:hover,
 div#cgit table.ssdiff td.lineno a:hover {
-	color: black;
+	color: #070707;
 }
 
 div#cgit table.blame td.hashes,
@@ -346,11 +362,11 @@ div#cgit table.blame td.linenumbers div.alt {
 }
 
 div#cgit table.blame div.alt:nth-child(even) {
-	background: #eee;
+	background: #e1e1e1;
 }
 
 div#cgit table.blame div.alt:nth-child(odd) {
-	background: white;
+	background: #f0f0f0;
 }
 
 div#cgit table.blame td.lines > div {
@@ -365,7 +381,7 @@ div#cgit table.blame td.lines > div > pre {
 
 div#cgit table.bin-blob {
 	margin-top: 0.5em;
-	border: solid 1px black;
+	border: solid 1px #070707;
 }
 
 div#cgit table.bin-blob th {
@@ -399,7 +415,7 @@ div#cgit div.cgit-panel {
 div#cgit div.cgit-panel table {
 	border-collapse: collapse;
 	border: solid 1px #aaa;
-	background-color: #eee;
+	background-color: #e1e1e1;
 }
 
 div#cgit div.cgit-panel th {
@@ -467,8 +483,6 @@ div#cgit div.diffstat-header {
 
 div#cgit table.diffstat {
 	border-collapse: collapse;
-	border: solid 1px #aaa;
-	background-color: #eee;
 }
 
 div#cgit table.diffstat th {
@@ -495,15 +509,15 @@ div#cgit table.diffstat td span.modechange {
 }
 
 div#cgit table.diffstat td.add a {
-	color: green;
+	color: #2eba41;
 }
 
 div#cgit table.diffstat td.del a {
-	color: red;
+	color: #e69a9a;
 }
 
 div#cgit table.diffstat td.upd a {
-	color: blue;
+	color: #397eaf;
 }
 
 div#cgit table.diffstat td.graph {
@@ -516,17 +530,21 @@ div#cgit table.diffstat td.graph table {
 }
 
 div#cgit table.diffstat td.graph td {
-	padding: 0px;
+	padding: 0 5px;
 	border: 0px;
 	height: 7pt;
 }
 
 div#cgit table.diffstat td.graph td.add {
-	background-color: #5c5;
+	background-color: #9ae6a5;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
 }
 
 div#cgit table.diffstat td.graph td.rem {
-	background-color: #c55;
+	background-color: #e69a9a;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
 }
 
 div#cgit div.diffstat-summary {
@@ -546,7 +564,7 @@ div#cgit table.diff td {
 div#cgit table.diff td div.head {
 	font-weight: bold;
 	margin-top: 1em;
-	color: black;
+	color: #070707;
 }
 
 div#cgit table.diff td div.hunk {
@@ -561,7 +579,7 @@ div#cgit table.diff td div.del {
 	color: red;
 }
 
-div#cgit .oid {
+div#cgit .sha1 {
 	font-family: monospace;
 	font-size: 90%;
 }
@@ -584,6 +602,10 @@ div#cgit a.button {
 	padding: 0em 0.5em;
 }
 
+div#cgit a.button:hover {
+	color: #7e7e7e;
+}
+
 div#cgit a.primary {
 	font-size: 100%;
 }
@@ -657,11 +679,11 @@ div#cgit div.footer {
 	margin-top: 0.5em;
 	text-align: center;
 	font-size: 80%;
-	color: #ccc;
+	color: #c4c4c4;
 }
 
 div#cgit div.footer a {
-	color: #ccc;
+	color: #c4c4c4;
 	text-decoration: none;
 }
 
@@ -672,41 +694,41 @@ div#cgit div.footer a:hover {
 div#cgit a.branch-deco {
 	color: #000;
 	margin: 0px 0.5em;
-	padding: 0px 0.25em;
-	background-color: #88ff88;
-	border: solid 1px #007700;
+	padding: 2px 0.25em;
+	background-color: #9ae6a5;
+	border-radius: 10px;
 }
 
 div#cgit a.tag-deco {
 	color: #000;
 	margin: 0px 0.5em;
-	padding: 0px 0.25em;
+	padding: 2px 0.25em;
 	background-color: #ffff88;
-	border: solid 1px #777700;
+	border-radius: 10px;
 }
 
 div#cgit a.tag-annotated-deco {
 	color: #000;
 	margin: 0px 0.5em;
-	padding: 0px 0.25em;
+	padding: 2px 0.25em;
 	background-color: #ffcc88;
-	border: solid 1px #777700;
+	border-radius: 10px;
 }
 
 div#cgit a.remote-deco {
 	color: #000;
 	margin: 0px 0.5em;
-	padding: 0px 0.25em;
+	padding: 2px 0.25em;
 	background-color: #ccccff;
-	border: solid 1px #000077;
+	border-radius: 10px;
 }
 
 div#cgit a.deco {
 	color: #000;
 	margin: 0px 0.5em;
-	padding: 0px 0.25em;
-	background-color: #ff8888;
-	border: solid 1px #770000;
+	padding: 2px 0.25em;
+	background-color: #e69a9a;
+	border-radius: 10px;
 }
 
 div#cgit div.commit-subject a.branch-deco,
@@ -716,24 +738,30 @@ div#cgit div.commit-subject a.remote-deco,
 div#cgit div.commit-subject a.deco {
 	margin-left: 1em;
 	font-size: 75%;
+	font-weight: normal;
 }
 
 div#cgit table.stats {
-	border: solid 1px black;
 	border-collapse: collapse;
 }
 
 div#cgit table.stats th {
-	text-align: left;
+	text-align: right;
 	padding: 1px 0.5em;
-	background-color: #eee;
-	border: solid 1px black;
+	background-color: #e1e1e1;
+}
+
+div#cgit table.stats th:nth-child(even) {
+	background-color: #d8d8d8;
+}
+
+div#cgit table.stats th:nth-child(1) {
+	text-align: left;
 }
 
 div#cgit table.stats td {
 	text-align: right;
 	padding: 1px 0.5em;
-	border: solid 1px black;
 }
 
 div#cgit table.stats td.total {
@@ -742,9 +770,9 @@ div#cgit table.stats td.total {
 }
 
 div#cgit table.stats td.sum {
-	color: #c00;
+	color: #397eaf;
 	font-weight: bold;
-/*	background-color: #eee; */
+/*	background-color: #e1e1e1; */
 }
 
 div#cgit table.stats td.left {
@@ -753,14 +781,14 @@ div#cgit table.stats td.left {
 
 div#cgit table.vgraph {
 	border-collapse: separate;
-	border: solid 1px black;
+	border: solid 1px #070707;
 	height: 200px;
 }
 
 div#cgit table.vgraph th {
-	background-color: #eee;
+	background-color: #e1e1e1;
 	font-weight: bold;
-	border: solid 1px white;
+	border: solid 1px #f0f0f0;
 	padding: 1px 0.5em;
 }
 
@@ -770,18 +798,18 @@ div#cgit table.vgraph td {
 }
 
 div#cgit table.vgraph div.bar {
-	background-color: #eee;
+	background-color: #e1e1e1;
 }
 
 div#cgit table.hgraph {
-	border: solid 1px black;
+	border: solid 1px #070707;
 	width: 800px;
 }
 
 div#cgit table.hgraph th {
-	background-color: #eee;
+	background-color: #e1e1e1;
 	font-weight: bold;
-	border: solid 1px black;
+	border: solid 1px #070707;
 	padding: 1px 0.5em;
 }
 
@@ -791,31 +819,32 @@ div#cgit table.hgraph td {
 }
 
 div#cgit table.hgraph div.bar {
-	background-color: #eee;
+	background-color: #e1e1e1;
 	height: 1em;
 }
 
 div#cgit table.ssdiff {
-	width: 100%;
+	max-width: max-content;
+	font-size: 110%;
+	border: none;
 }
 
 div#cgit table.ssdiff td {
-	font-size: 75%;
+	font-size: 100%;
 	font-family: monospace;
-	white-space: pre;
 	padding: 1px 4px 1px 4px;
 	border-left: solid 1px #aaa;
 	border-right: solid 1px #aaa;
 }
 
 div#cgit table.ssdiff td.add {
-	color: black;
+	color: #070707;
 	background: #cfc;
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.add_dark {
-	color: black;
+	color: #070707;
 	background: #aca;
 	min-width: 50%;
 }
@@ -826,13 +855,13 @@ div#cgit table.ssdiff span.add {
 }
 
 div#cgit table.ssdiff td.del {
-	color: black;
+	color: #070707;
 	background: #fcc;
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.del_dark {
-	color: black;
+	color: #070707;
 	background: #caa;
 	min-width: 50%;
 }
@@ -843,28 +872,28 @@ div#cgit table.ssdiff span.del {
 }
 
 div#cgit table.ssdiff td.changed {
-	color: black;
-	background: #ffc;
+	color: #070707;
+	background: #e1e1e1;
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.changed_dark {
-	color: black;
-	background: #cca;
+	color: #070707;
+	background: #c4c4c4;
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.lineno {
-	color: black;
-	background: #eee;
+	color: #070707;
+	background: #e1e1e1;
 	text-align: right;
 	width: 3em;
 	min-width: 3em;
 }
 
 div#cgit table.ssdiff td.hunk {
-	color: black;
-	background: #ccf;
+	color: #070707;
+	background: #b7d3e2;
 	border-top: solid 1px #aaa;
 	border-bottom: solid 1px #aaa;
 }
@@ -876,7 +905,7 @@ div#cgit table.ssdiff td.head {
 
 div#cgit table.ssdiff td.head div.head {
 	font-weight: bold;
-	color: black;
+	color: #070707;
 }
 
 div#cgit table.ssdiff td.foot {