##// END OF EJS Templates
hgweb: code selection without line numbers in file source view...
hgweb: code selection without line numbers in file source view All the source lines are put in a <pre> tag, which gives correct display and copy&paste in both Chromium (WebKit) and FireFox: line numbers are not copied, all the tabs and spaces are kept. This doesn't change the visual appearance of the view compared to current hgweb version and doesn't use any JS code. Also, stripes in this view are now generated clientside with CSS. This implementation is chosen because other variants have important issues: Strategy FF Chrome current D,LT,E,T,L D,L pre S,NW S,NW pre/div/nbsp LT,E,T,TS,NW TS,NW pre/div/br LT,E,T,NW NW ol/li/nbsp LT,E,T,TS,AJ TS,AJ ol/li/br LT,E,T,AJ AJ pre/span LV LV Legend Strategies: - current: implemented in hgweb before this patch, i.e. divs for each line, and line numbers links in the div too - pre: the whole code in one pre tag with newlines, all line numbers in another one with 'float: left' - pre/div/{nbsp,br}: same as just 'pre', but separate divs for each line and   or <br> instead of empty lines (otherwise they are not copied at all) - ol/li/{nbsp,br}: a single ol with li's and divs for each line,   or <br> same as in previous strategy - pre/span: this patch Problems: D = (very minor) display problems, like wrong width of leading tabs LT = loses leading/trailing whitespace E = loses embedded whitespace B = loses blank lines T = loses tabs L = selects line numbers LV = (only) visually selects line numbers LVE = (only) visually selects line numbers at empty lines S = no stripes (and no ability to easily highlight lines-which-are-linked-at in the future) TS = space copied instead of empty line AJ = get anchor links only with JS (they work even without) NW = no linewrap easily possible (in future) As for browser versions compatibility, the CSS tricks used are supported in (according to caniuse.com): a) line numbers generation with 'content:' property and CSS counters: IE 8+, all other popular browsers (in pre-WebKit Opera numbers are being copied) b) stripes ('nth-child' selector): IE 8+, FF 3.5+, Safari 3.2+, Opera 9.5+, all other popular browsers c) line numbers are not visually selected ('user-select:' property): IE 10+, Opera 15.0+, all other popular browsers This patch is based on a demo implementation by Martin Geisler <martin@geisler.net>.

File last commit:

r19023:86531a70 default
r19387:f2e4fdb3 default
Show More
style-monoblue.css
530 lines | 8.6 KiB | text/css | CssLexer
/*** Initial Settings ***/
* {
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
}
html {
font-size: 100%;
font-family: sans-serif;
}
body {
font-size: 77%;
margin: 15px 50px;
background: #4B4B4C;
}
a {
color:#0000cc;
text-decoration: none;
}
/*** end of Initial Settings ***/
/** common settings **/
div#container {
background: #FFFFFF;
position: relative;
color: #666;
}
div.page-header {
padding: 50px 20px 0;
background: #006699 top left repeat-x;
position: relative;
}
div.page-header h1 {
margin: 10px 0 30px;
font-size: 1.8em;
font-weight: bold;
font-family: osaka,'MS P Gothic', Georgia, serif;
letter-spacing: 1px;
color: #DDD;
}
div.page-header h1 a {
font-weight: bold;
color: #FFF;
}
div.page-header a {
text-decoration: none;
}
div.page-header form {
position: absolute;
margin-bottom: 2px;
bottom: 0;
right: 20px;
}
div.page-header form label {
color: #DDD;
}
div.page-header form input {
padding: 2px;
border: solid 1px #DDD;
}
div.page-header form dl {
overflow: hidden;
}
div.page-header form dl dt {
font-size: 1.2em;
}
div.page-header form dl dt,
div.page-header form dl dd {
margin: 0 0 0 5px;
float: left;
height: 24px;
line-height: 20px;
}
ul.page-nav {
margin: 10px 0 0 0;
list-style-type: none;
overflow: hidden;
width: 900px;
}
ul.page-nav li {
margin: 0 2px 0 0;
float: left;
width: 80px;
height: 24px;
font-size: 1.1em;
line-height: 24px;
text-align: center;
}
ul.page-nav li.current {
background: #FFF;
}
ul.page-nav li a {
height: 24px;
color: #666;
background: #DDD;
display: block;
text-decoration: none;
}
ul.page-nav li a:hover {
color:#333;
background: #FFF;
}
ul.submenu {
margin: 10px 0 -10px 20px;
list-style-type: none;
}
ul.submenu li {
margin: 0 10px 0 0;
font-size: 1.2em;
display: inline;
}
h2 {
margin: 20px 0 10px;
height: 30px;
line-height: 30px;
text-indent: 20px;
background: #FFF;
font-size: 1.2em;
border-top: dotted 1px #D5E1E6;
font-weight: bold;
}
h2.no-link {
color:#006699;
}
h2.no-border {
color: #FFF;
background: #006699;
border: 0;
}
h2 a {
font-weight:bold;
color:#006699;
}
div.page-path {
text-align: right;
padding: 20px 30px 10px 0;
border:solid #d9d8d1;
border-width:0px 0px 1px;
font-size: 1.2em;
}
div.page-footer {
margin: 50px 0 0;
position: relative;
}
div.page-footer p {
position: relative;
left: 20px;
bottom: 5px;
font-size: 1.2em;
}
ul.rss-logo {
position: absolute;
top: -10px;
right: 20px;
height: 20px;
list-style-type: none;
}
ul.rss-logo li {
display: inline;
}
ul.rss-logo li a {
padding: 3px 6px;
line-height: 10px;
border:1px solid;
border-color:#fcc7a5 #7d3302 #3e1a01 #ff954e;
color:#ffffff;
background-color:#ff6600;
font-weight:bold;
font-family:sans-serif;
font-size:10px;
text-align:center;
text-decoration:none;
}
div.rss-logo li a:hover {
background-color:#ee5500;
}
p.normal {
margin: 20px 0 20px 30px;
font-size: 1.2em;
}
table {
margin: 10px 0 0 20px;
width: 95%;
border-collapse: collapse;
}
table tr td {
font-size: 1.1em;
}
table tr td.nowrap {
white-space: nowrap;
}
table tr td.closed {
background-color: #99f;
}
/*
table tr.parity0:hover,
table tr.parity1:hover {
background: #D5E1E6;
}
*/
table tr.parity0 {
background: #F1F6F7;
}
table tr.parity1 {
background: #FFFFFF;
}
table tr td {
padding: 5px 5px;
}
table.annotated tr td {
padding: 0px 5px;
}
span.logtags span {
padding: 2px 6px;
font-weight: normal;
font-size: 11px;
border: 1px solid;
background-color: #ffaaff;
border-color: #ffccff #ff00ee #ff00ee #ffccff;
}
span.logtags span.tagtag {
background-color: #ffffaa;
border-color: #ffffcc #ffee00 #ffee00 #ffffcc;
}
span.logtags span.branchtag {
background-color: #aaffaa;
border-color: #ccffcc #00cc33 #00cc33 #ccffcc;
}
span.logtags span.inbranchtag {
background-color: #d5dde6;
border-color: #e3ecf4 #9398f4 #9398f4 #e3ecf4;
}
span.logtags span.bookmarktag {
background-color: #afdffa;
border-color: #ccecff #46ace6 #46ace6 #ccecff;
}
div.diff pre {
margin: 10px 0 0 0;
}
div.diff pre span {
font-family: monospace;
white-space: pre;
font-size: 1.2em;
padding: 3px 0;
}
td.source {
white-space: pre;
font-family: monospace;
margin: 10px 30px 0;
font-size: 1.2em;
font-family: monospace;
}
div.source div.parity0,
div.source div.parity1 {
padding: 1px;
font-size: 1.2em;
}
div.source div.parity0 {
background: #F1F6F7;
}
div.source div.parity1 {
background: #FFFFFF;
}
div.parity0:hover,
div.parity1:hover {
background: #D5E1E6;
}
.linenr {
color: #999;
text-align: right;
}
.lineno {
text-align: right;
}
.lineno a {
color: #999;
}
td.linenr {
width: 60px;
}
div#powered-by {
position: absolute;
width: 75px;
top: 15px;
right: 20px;
font-size: 1.2em;
}
div#powered-by a {
color: #EEE;
text-decoration: none;
}
div#powered-by a:hover {
text-decoration: underline;
}
/*
div#monoblue-corner-top-left {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: url(./monoblue-corner.png) top left no-repeat !important;
background: none;
}
div#monoblue-corner-top-right {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background: url(./monoblue-corner.png) top right no-repeat !important;
background: none;
}
div#monoblue-corner-bottom-left {
position: absolute;
bottom: 0;
left: 0;
width: 10px;
height: 10px;
background: url(./monoblue-corner.png) bottom left no-repeat !important;
background: none;
}
div#monoblue-corner-bottom-right {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
background: url(./monoblue-corner.png) bottom right no-repeat !important;
background: none;
}
*/
/** end of common settings **/
/** summary **/
dl.overview {
margin: 0 0 0 30px;
font-size: 1.1em;
overflow: hidden;
}
dl.overview dt,
dl.overview dd {
margin: 5px 0;
float: left;
}
dl.overview dt {
clear: left;
font-weight: bold;
width: 150px;
}
/** end of summary **/
/** chagelog **/
h3.changelog {
margin: 20px 0 5px 30px;
padding: 0 0 2px;
font-size: 1.4em;
border-bottom: dotted 1px #D5E1E6;
}
ul.changelog-entry {
margin: 0 0 10px 30px;
list-style-type: none;
position: relative;
}
ul.changelog-entry li span.revdate {
font-size: 1.1em;
}
ul.changelog-entry li.age {
position: absolute;
top: -25px;
right: 10px;
font-size: 1.4em;
color: #CCC;
font-weight: bold;
font-style: italic;
}
ul.changelog-entry li span.name {
font-size: 1.2em;
font-weight: bold;
}
ul.changelog-entry li.description {
margin: 10px 0 0;
font-size: 1.1em;
}
/** end of changelog **/
/** file **/
p.files {
margin: 0 0 0 20px;
font-size: 2.0em;
font-weight: bold;
}
/** end of file **/
/** changeset **/
h3.changeset {
margin: 20px 0 5px 20px;
padding: 0 0 2px;
font-size: 1.6em;
border-bottom: dotted 1px #D5E1E6;
}
p.changeset-age {
position: relative;
}
p.changeset-age span {
position: absolute;
top: -25px;
right: 10px;
font-size: 1.4em;
color: #CCC;
font-weight: bold;
font-style: italic;
}
p.description {
margin: 10px 30px 0 30px;
padding: 10px;
border: solid 1px #CCC;
font-size: 1.2em;
}
/** end of changeset **/
/** canvas **/
div#wrapper {
position: relative;
font-size: 1.2em;
}
canvas {
position: absolute;
z-index: 5;
top: -0.7em;
}
ul#nodebgs li.parity0 {
background: #F1F6F7;
}
ul#nodebgs li.parity1 {
background: #FFFFFF;
}
ul#graphnodes {
position: absolute;
z-index: 10;
top: 7px;
list-style: none inside none;
}
ul#nodebgs {
list-style: none inside none;
}
ul#graphnodes li, ul#nodebgs li {
height: 39px;
}
ul#graphnodes li .info {
display: block;
position: relative;
}
/** end of canvas **/
/** comparison **/
.legend {
margin-left: 20px;
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;
}
.comparison {
overflow-x: auto;
}
.comparison table td {
padding: 0px 5px;
}
.header th {
font-weight: bold;
}
.block {
border-top: 1px solid #999;
}
/** end of comparison **/
.breadcrumb a:hover {
text-decoration:underline;
}