hgweb: infinite scroll support for coal style

mercurial/templates/static/style-coal.css

@@ -1,333 +1,357 b''
 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 { background-color: #f0f0f0; }
 .parity1 { background-color: white; }
 .plusline { color: green; }
 .minusline { color: #dc143c; } /* crimson */
 .atline { color: purple; }
 
 .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 .lineno { width: 2em; text-align: right;}
 .bigtable .lineno a { color: #999; font-size: smaller; 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, .sourcelast {
   font-family: monospace;
   white-space: pre;
   padding: 1px 4px;
   font-size: 90%;
 }
 .sourcefirst { border-bottom: 1px solid #999; font-weight: bold; }
 .sourcelast { border-top: 1px solid #999; }
 .source a { color: #999; font-size: smaller; font-family: monospace;}
 .bottomline { border-bottom: 1px solid #999; }
 
 .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;
+}