##// END OF EJS Templates
hgweb: refresh styling of gitweb's search form...
hgweb: refresh styling of gitweb's search form gitweb was missing the hint hover box. So that was added. Also, the positioning of the form was absolute and it didn't vertically align on all pages. The element has been moved inline with the navigation links (which now are contained in a div) and flexbox is used to obtain sane alignment of the navigation links and search form. For those new to flexbox, "justify-content: space-between" basically says to maximize space elements. You can use it to easily get left and right justified containers without having to worry about width, floating, etc. "align-items: center" centers all items in a cross-axis. I've literally wasted hours trying to figure out both these problems before flexbox. Flexbox is amazing. Flexbox has been supported by Chrome and Firefox for a few years. But it is only supported by IE 11. I'm willing to wager that people using this either won't be using IE or will be using IE 11. So I'm willing to be a bit aggressive in adopting flexbox because it makes CSS alignment so much easier.

File last commit:

r31849:5c1abb4b default
r32762:2d93d215 default
Show More
style-paper.css
487 lines | 8.1 KiB | text/css | CssLexer
body {
margin: 0;
padding: 0;
background: white;
color: black;
font-family: sans-serif;
}
.container {
padding-left: 115px;
}
.main {
position: relative;
background: white;
padding: 2em 2em 2em 0;
}
#.main {
width: 98%;
}
.overflow {
width: 100%;
overflow: auto;
}
.menu {
width: 90px;
margin: 0;
font-size: 80%;
text-align: left;
position: absolute;
top: 20px;
left: 20px;
right: auto;
}
.menu ul {
list-style: none;
padding: 0;
margin: 10px 0 0 0;
border-left: 2px solid #999;
}
.menu li {
margin-bottom: 3px;
padding: 2px 4px;
background: white;
color: black;
font-weight: normal;
}
.menu li.active {
font-weight: bold;
}
.menu img {
width: 75px;
height: 90px;
border: 0;
}
div.atom-logo {
margin-top: 10px;
}
.atom-logo img{
width: 14px;
height: 14px;
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;
border-radius: 5px;
}
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: 7em; }
.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; }
tr.thisrev a { color:#999999; text-decoration: none; }
tr.thisrev td.source { color:#009900; }
td.annotate {
white-space: nowrap;
}
div.annotate-info {
display: none;
position: absolute;
background-color: #FFFFFF;
border: 1px solid #999;
text-align: left;
color: #000000;
padding: 5px;
}
div.annotate-info a { color: #0000FF; }
td.annotate:hover div.annotate-info { display: inline; }
.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;
}
div.overflow pre.sourcelines > span.followlines-select:hover {
cursor: cell;
}
pre.sourcelines > span.followlines-selected {
background-color: #99C7E9;
}
div#followlines {
background-color: #B7B7B7;
border: 1px solid #CCC;
border-radius: 5px;
padding: 4px;
position: fixed;
}
div.followlines-cancel {
text-align: right;
}
div.followlines-cancel > button {
line-height: 80%;
padding: 0;
border: 0;
border-radius: 2px;
background-color: inherit;
font-weight: bold;
}
div.followlines-cancel > button:hover {
color: #FFFFFF;
background-color: #CF1F1F;
}
div.followlines-link {
margin: 2px;
margin-top: 4px;
font-family: sans-serif;
}
div#followlines-tooltip {
display: none;
position: fixed;
background-color: #ffc;
border: 1px solid #999;
padding: 2px;
}
.sourcelines:hover > div#followlines-tooltip {
display: inline;
}
.sourcelines:hover > div#followlines-tooltip.hidden {
display: none;
}
.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: 2px 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;
}