changeset 26284:c258f4d2bfb2

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.
author Anton Shestakov <av6@dwimlabs.net>
date Fri, 18 Sep 2015 14:03:32 +0800
parents c450265b5611
children 91cad8eb7951
files mercurial/templates/coal/header.tmpl mercurial/templates/static/style-coal.css mercurial/templates/static/style-extra-coal.css tests/test-hgweb-descend-empties.t
diffstat 4 files changed, 50 insertions(+), 416 deletions(-) [+]
line wrap: on
line diff
--- 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>