coal: reuse style-paper.css and use a separate css file for visual tweaks
To remove another big chunk of duplication from coal hgweb style, we can move
all visual tweaks to style-extra-coal.css and include it together with
style-paper.css.
--- a/mercurial/templates/coal/header.tmpl Fri Sep 18 01:06:27 2015 +0800
+++ b/mercurial/templates/coal/header.tmpl Fri Sep 18 14:03:32 2015 +0800
@@ -3,5 +3,6 @@
<head>
<link rel="icon" href="{staticurl|urlescape}hgicon.png" type="image/png" />
<meta name="robots" content="index, nofollow" />
-<link rel="stylesheet" href="{staticurl|urlescape}style-coal.css" type="text/css" />
+<link rel="stylesheet" href="{staticurl|urlescape}style-paper.css" type="text/css" />
+<link rel="stylesheet" href="{staticurl|urlescape}style-extra-coal.css" type="text/css" />
<script type="text/javascript" src="{staticurl|urlescape}mercurial.js"></script>
--- a/mercurial/templates/static/style-coal.css Fri Sep 18 01:06:27 2015 +0800
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,414 +0,0 @@
-body {
- margin: 0;
- padding: 0;
- background: black url(background.png) repeat-x;
- font-family: sans-serif;
-}
-
-.container {
- padding-right: 150px;
-}
-
-.main {
- position: relative;
- background: white;
- padding: 2em;
- border-right: 15px solid black;
- border-bottom: 15px solid black;
-}
-
-#.main {
- width: 98%;
-}
-
-.overflow {
- width: 100%;
- overflow: auto;
-}
-
-.menu {
- background: #999;
- padding: 10px;
- width: 75px;
- margin: 0;
- font-size: 80%;
- text-align: left;
- position: fixed;
- top: 27px;
- left: auto;
- right: 27px;
-}
-
-#.menu {
- position: absolute !important;
- top:expression(eval(document.body.scrollTop + 27));
-}
-
-.menu ul {
- list-style: none;
- padding: 0;
- margin: 10px 0 0 0;
-}
-
-.menu li {
- margin-bottom: 3px;
- padding: 2px 4px;
- background: white;
- color: black;
- font-weight: normal;
-}
-
-.menu li.active {
- background: black;
- color: white;
-}
-
-.menu img {
- width: 75px;
- height: 90px;
- border: 0;
-}
-
-.menu a { color: black; display: block; }
-
-.search {
- position: absolute;
- top: .7em;
- right: 2em;
-}
-
-form.search div#hint {
- display: none;
- position: absolute;
- top: 40px;
- right: 0px;
- width: 190px;
- padding: 5px;
- background: #ffc;
- font-size: 70%;
- border: 1px solid yellow;
- -moz-border-radius: 5px; /* this works only in camino/firefox */
- -webkit-border-radius: 5px; /* this is just for Safari */
-}
-
-form.search:hover div#hint { display: block; }
-
-a { text-decoration:none; }
-.age { white-space:nowrap; }
-.date { white-space:nowrap; }
-.indexlinks { white-space:nowrap; }
-.parity0,
-.stripes4 > :nth-child(4n+1),
-.stripes2 > :nth-child(2n+1) { background-color: #f0f0f0; }
-.parity1,
-.stripes4 > :nth-child(4n+3),
-.stripes2 > :nth-child(2n+2) { background-color: white; }
-.plusline { color: green; }
-.minusline { color: #dc143c; } /* crimson */
-.atline { color: purple; }
-
-.diffstat-table {
- margin-top: 1em;
-}
-.diffstat-file {
- white-space: nowrap;
- font-size: 90%;
-}
-.diffstat-total {
- white-space: nowrap;
- font-size: 90%;
-}
-.diffstat-graph {
- width: 100%;
-}
-.diffstat-add {
- background-color: green;
- float: left;
-}
-.diffstat-remove {
- background-color: red;
- float: left;
-}
-
-.navigate {
- text-align: right;
- font-size: 60%;
- margin: 1em 0;
-}
-
-.tag {
- color: #999;
- font-size: 70%;
- font-weight: normal;
- margin-left: .5em;
- vertical-align: baseline;
-}
-
-.branchhead {
- color: #000;
- font-size: 80%;
- font-weight: normal;
- margin-left: .5em;
- vertical-align: baseline;
-}
-
-ul#graphnodes .branchhead {
- font-size: 75%;
-}
-
-.branchname {
- color: #000;
- font-size: 60%;
- font-weight: normal;
- margin-left: .5em;
- vertical-align: baseline;
-}
-
-h3 .branchname {
- font-size: 80%;
-}
-
-/* Common */
-pre { margin: 0; }
-
-h2 { font-size: 120%; border-bottom: 1px solid #999; }
-h2 a { color: #000; }
-h3 {
- margin-top: -.7em;
- font-size: 100%;
-}
-
-/* log and tags tables */
-.bigtable {
- border-bottom: 1px solid #999;
- border-collapse: collapse;
- font-size: 90%;
- width: 100%;
- font-weight: normal;
- text-align: left;
-}
-
-.bigtable td {
- vertical-align: top;
-}
-
-.bigtable th {
- padding: 1px 4px;
- border-bottom: 1px solid #999;
-}
-.bigtable tr { border: none; }
-.bigtable .age { width: 6em; }
-.bigtable .author { width: 15em; }
-.bigtable .description { }
-.bigtable .description .base { font-size: 70%; float: right; line-height: 1.66; }
-.bigtable .node { width: 5em; font-family: monospace;}
-.bigtable .permissions { width: 8em; text-align: left;}
-.bigtable .size { width: 5em; text-align: right; }
-.bigtable .annotate { text-align: right; }
-.bigtable td.annotate { font-size: smaller; }
-.bigtable td.source { font-size: inherit; }
-
-.source, .sourcefirst {
- font-family: monospace;
- white-space: pre;
- padding: 1px 4px;
- font-size: 90%;
-}
-.sourcefirst { border-bottom: 1px solid #999; font-weight: bold; }
-.source a { color: #999; font-size: smaller; font-family: monospace;}
-.bottomline { border-bottom: 1px solid #999; }
-
-.sourcelines {
- font-size: 90%;
- position: relative;
- counter-reset: lineno;
-}
-
-.wrap > span {
- white-space: pre-wrap;
-}
-
-.linewraptoggle {
- float: right;
-}
-
-.diffblocks { counter-reset: lineno; }
-.diffblocks > div { counter-increment: lineno; }
-
-.sourcelines > span {
- display: inline-block;
- box-sizing: border-box;
- width: 100%;
- padding: 1px 0px 1px 5em;
- counter-increment: lineno;
-}
-
-.sourcelines > span:before {
- -moz-user-select: -moz-none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
- display: inline-block;
- margin-left: -5em;
- width: 4em;
- font-size: smaller;
- color: #999;
- text-align: right;
- content: counters(lineno, ".");
- float: left;
-}
-
-.sourcelines > span:target, tr:target td {
- background-color: #bfdfff;
-}
-
-.sourcelines > a {
- display: inline-block;
- position: absolute;
- left: 0px;
- width: 4em;
- height: 1em;
-}
-
-.fileline { font-family: monospace; }
-.fileline img { border: 0; }
-
-.tagEntry .closed { color: #99f; }
-
-/* Changeset entry */
-#changesetEntry {
- border-collapse: collapse;
- font-size: 90%;
- width: 100%;
- margin-bottom: 1em;
-}
-
-#changesetEntry th {
- padding: 1px 4px;
- width: 4em;
- text-align: right;
- font-weight: normal;
- color: #999;
- margin-right: .5em;
- vertical-align: top;
-}
-
-div.description {
- border-left: 3px solid #999;
- margin: 1em 0 1em 0;
- padding: .3em;
- white-space: pre;
- font-family: monospace;
-}
-
-/* Graph */
-div#wrapper {
- position: relative;
- border-top: 1px solid black;
- border-bottom: 1px solid black;
- margin: 0;
- padding: 0;
-}
-
-canvas {
- position: absolute;
- z-index: 5;
- top: -0.7em;
- margin: 0;
-}
-
-ul#graphnodes {
- position: absolute;
- z-index: 10;
- top: -1.0em;
- list-style: none inside none;
- padding: 0;
-}
-
-ul#nodebgs {
- list-style: none inside none;
- padding: 0;
- margin: 0;
- top: -0.7em;
-}
-
-ul#graphnodes li, ul#nodebgs li {
- height: 39px;
-}
-
-ul#graphnodes li .info {
- display: block;
- font-size: 70%;
- position: relative;
- top: -3px;
-}
-
-/* Comparison */
-.legend {
- padding: 1.5% 0 1.5% 0;
-}
-
-.legendinfo {
- border: 1px solid #999;
- font-size: 80%;
- text-align: center;
- padding: 0.5%;
-}
-
-.equal {
- background-color: #ffffff;
-}
-
-.delete {
- background-color: #faa;
- color: #333;
-}
-
-.insert {
- background-color: #ffa;
-}
-
-.replace {
- background-color: #e8e8e8;
-}
-
-.header {
- text-align: center;
-}
-
-.block {
- border-top: 1px solid #999;
-}
-
-.breadcrumb {
- color: gray;
-}
-
-.breadcrumb a {
- color: blue;
-}
-
-.scroll-loading {
- -webkit-animation: change_color 1s linear 0s infinite alternate;
- -moz-animation: change_color 1s linear 0s infinite alternate;
- -o-animation: change_color 1s linear 0s infinite alternate;
- animation: change_color 1s linear 0s infinite alternate;
-}
-
-@-webkit-keyframes change_color {
- from { background-color: #A0CEFF; } to { }
-}
-@-moz-keyframes change_color {
- from { background-color: #A0CEFF; } to { }
-}
-@-o-keyframes change_color {
- from { background-color: #A0CEFF; } to { }
-}
-@keyframes change_color {
- from { background-color: #A0CEFF; } to { }
-}
-
-.scroll-loading-error {
- background-color: #FFCCCC !important;
-}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/mercurial/templates/static/style-extra-coal.css Fri Sep 18 14:03:32 2015 +0800
@@ -0,0 +1,46 @@
+body {
+ background: black url('background.png') repeat-x;
+}
+
+.container {
+ padding-left: 0;
+ padding-right: 150px;
+}
+
+.main {
+ padding: 2em;
+ border-right: 15px solid black;
+ border-bottom: 15px solid black;
+}
+
+.menu {
+ background: #999;
+ padding: 10px;
+ width: 75px;
+ position: fixed;
+ top: 27px;
+ left: auto;
+ right: 27px;
+}
+
+.menu ul {
+ border-left: 0;
+}
+
+.menu li.active {
+ font-weight: normal;
+ background: black;
+ color: white;
+}
+
+.menu li.active a {
+ color: white;
+}
+
+h3 {
+ margin-top: -.7em;
+}
+
+div.description {
+ border-left-width: 3px;
+}
--- a/tests/test-hgweb-descend-empties.t Fri Sep 18 01:06:27 2015 +0800
+++ b/tests/test-hgweb-descend-empties.t Fri Sep 18 14:03:32 2015 +0800
@@ -156,7 +156,8 @@
<head>
<link rel="icon" href="/static/hgicon.png" type="image/png" />
<meta name="robots" content="index, nofollow" />
- <link rel="stylesheet" href="/static/style-coal.css" type="text/css" />
+ <link rel="stylesheet" href="/static/style-paper.css" type="text/css" />
+ <link rel="stylesheet" href="/static/style-extra-coal.css" type="text/css" />
<script type="text/javascript" src="/static/mercurial.js"></script>
<title>test: c9f45f7a1659 /</title>