Mercurial > hg > compact-paper

comparison mercurial/templates/static/style-compact-paper.css @ 36722:b2c1a35d18f2 draft default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
WIP: hgweb: add compact-paper style DONE: - new summary page looks good-ish - shortlog is reasonable looking - tags is reasonable looking - bookmarks is reasonable looking - branches is reasonable looking - help is reasonable looking - changeset is reasonable looking TODO: - convert other pages to use the same header - graph - browse
author Josef 'Jeff' Sipek <jeffpc@josefsipek.net>
date Wed, 21 Feb 2018 16:40:41 -0500
parents mercurial/templates/static/style-paper.css@5afe0ca59b07
children
comparison
equal deleted inserted replaced
36721:6bacb2f663cb 36722:b2c1a35d18f2
1 body {
2 margin: 0;
3 padding: 0;
4 background: white;
5 color: black;
6 font-family: sans-serif;
7 }
8
9 .main {
10 position: relative;
11 background: white;
12 padding: 1em 2em 2em 2em;
13 }
14
15 #.main {
16 width: 98%;
17 }
18
19 .overflow {
20 width: 100%;
21 overflow: auto;
22 }
23
24 .logo {
25 display: inline-block;
26 float: left;
27 padding-right: 1em;
28 }
29
30 .menu {
31 margin: 0;
32 font-size: 80%;
33 text-align: left;
34 display: inline-block;
35 }
36
37 .menu ul {
38 list-style: none;
39 padding: 0;
40 margin: 0 1em 0 0;
41 border: none;
42 display: inline-flex;
43 flex-direction: row;
44 }
45
46 .menu li {
47 margin-bottom: 3px;
48 padding: 2px 4px;
49 background: white;
50 color: black;
51 font-weight: normal;
52 display: inline;
53 width: auto;
54 }
55
56 .menu li.active {
57 font-weight: bold;
58 }
59
60 .menu img {
61 width: 75px;
62 height: 90px;
63 border: 0;
64 }
65
66 .menu a { color: black; display: block; }
67
68 .search {
69 position: absolute;
70 top: .4em;
71 right: 2em;
72 }
73
74 .spacer {
75 padding-top: 1em;
76 }
77
78 form.search div#hint {
79 display: none;
80 position: absolute;
81 top: 40px;
82 right: 0px;
83 width: 190px;
84 padding: 5px;
85 background: #ffc;
86 font-size: 70%;
87 border: 1px solid yellow;
88 border-radius: 5px;
89 }
90
91 form.search:hover div#hint { display: block; }
92
93 a { text-decoration:none; }
94 .age { white-space:nowrap; }
95 .date { white-space:nowrap; }
96 .indexlinks { white-space:nowrap; }
97 .parity0,
98 .stripes4 > :nth-child(4n+1),
99 .stripes2 > :nth-child(2n+1) { background-color: #f0f0f0; }
100 .parity1,
101 .stripes4 > :nth-child(4n+3),
102 .stripes2 > :nth-child(2n+2) { background-color: white; }
103 .plusline { color: green; }
104 .minusline { color: #dc143c; } /* crimson */
105 .atline { color: purple; }
106
107 .diffstat-table {
108 margin-top: 1em;
109 }
110 .diffstat-file {
111 white-space: nowrap;
112 font-size: 90%;
113 }
114 .diffstat-total {
115 white-space: nowrap;
116 font-size: 90%;
117 }
118 .diffstat-graph {
119 width: 100%;
120 }
121 .diffstat-add {
122 background-color: green;
123 float: left;
124 }
125 .diffstat-remove {
126 background-color: red;
127 float: left;
128 }
129
130 .navigate {
131 text-align: right;
132 font-size: 60%;
133 margin: 1em 0;
134 }
135
136 .phase {
137 color: #999;
138 font-size: 70%;
139 border-bottom: 1px dotted #999;
140 font-weight: normal;
141 margin-left: .5em;
142 vertical-align: baseline;
143 }
144
145 .obsolete {
146 color: #999;
147 font-size: 70%;
148 border-bottom: 1px dashed #999;
149 font-weight: normal;
150 margin-left: .5em;
151 vertical-align: baseline;
152 }
153
154 .instability {
155 color: #000;
156 font-size: 70%;
157 border-bottom: 1px solid #000;
158 font-weight: normal;
159 margin-left: .5em;
160 vertical-align: baseline;
161 }
162
163 .tag {
164 color: #999;
165 font-size: 70%;
166 font-weight: normal;
167 margin-left: .5em;
168 vertical-align: baseline;
169 }
170
171 .branchhead {
172 color: #000;
173 font-size: 80%;
174 font-weight: normal;
175 margin-left: .5em;
176 vertical-align: baseline;
177 }
178
179 ul#graphnodes .branchhead {
180 font-size: 75%;
181 }
182
183 .branchname {
184 color: #000;
185 font-size: 60%;
186 font-weight: normal;
187 margin-left: .5em;
188 vertical-align: baseline;
189 }
190
191 /* Common */
192 pre { margin: 0; }
193
194 h2 { font-size: 120%; border-bottom: 1px solid #999; }
195 h2 a { color: #000; }
196 h3 {
197 margin-top: +.7em;
198 font-size: 100%;
199 }
200
201 /* log and tags tables */
202 .bigtable {
203 border-bottom: 1px solid #999;
204 border-collapse: collapse;
205 font-size: 90%;
206 width: 100%;
207 font-weight: normal;
208 text-align: left;
209 }
210
211 .bigtable td {
212 padding: 1px 4px;
213 vertical-align: top;
214 }
215
216 .bigtable th {
217 padding: 1px 4px;
218 border-bottom: 1px solid #999;
219 }
220 .bigtable tr { border: none; }
221 .bigtable .age { width: 7em; }
222 .bigtable .author { width: 15em; }
223 .bigtable .description { }
224 .bigtable .description .base { font-size: 70%; float: right; line-height: 1.66; }
225 .bigtable .node { width: 5em; font-family: monospace;}
226 .bigtable .permissions { width: 8em; text-align: left;}
227 .bigtable .size { width: 5em; text-align: right; }
228 .bigtable .annotate { text-align: right; }
229 .bigtable td.annotate { font-size: smaller; }
230 .bigtable td.source { font-size: inherit; }
231 tr.thisrev a { color:#999999; text-decoration: none; }
232 tr.thisrev td.source { color:#009900; }
233 td.annotate {
234 white-space: nowrap;
235 }
236 div.annotate-info {
237 z-index: 5;
238 display: none;
239 position: absolute;
240 background-color: #FFFFFF;
241 border: 1px solid #999;
242 text-align: left;
243 color: #000000;
244 padding: 5px;
245 }
246 div.annotate-info a { color: #0000FF; }
247 td.annotate:hover div.annotate-info { display: inline; }
248
249 #diffopts-form {
250 font-size: smaller;
251 color: #424242;
252 padding-bottom: 10px;
253 display: none;
254 }
255
256 .source, .sourcefirst {
257 font-family: monospace;
258 white-space: pre;
259 padding: 1px 4px;
260 font-size: 90%;
261 }
262 .sourcefirst { border-bottom: 1px solid #999; font-weight: bold; }
263 .source a { color: #999; font-size: smaller; font-family: monospace;}
264 .bottomline { border-bottom: 1px solid #999; }
265
266 .sourcelines {
267 font-size: 90%;
268 position: relative;
269 counter-reset: lineno;
270 }
271
272 .wrap > span {
273 white-space: pre-wrap;
274 }
275
276 .linewraptoggle {
277 float: right;
278 }
279
280 .diffblocks { counter-reset: lineno; }
281 .diffblocks > div { counter-increment: lineno; }
282
283 .sourcelines > span {
284 display: inline-block;
285 box-sizing: border-box;
286 width: 100%;
287 padding: 1px 0px 1px 5em;
288 counter-increment: lineno;
289 }
290
291 .sourcelines > span:before {
292 -moz-user-select: -moz-none;
293 -khtml-user-select: none;
294 -webkit-user-select: none;
295 -ms-user-select: none;
296 user-select: none;
297 display: inline-block;
298 margin-left: -6em;
299 width: 4em;
300 font-size: smaller;
301 color: #999;
302 text-align: right;
303 content: counters(lineno, ".");
304 float: left;
305 }
306
307 .sourcelines > span:target, tr:target td {
308 background-color: #bfdfff;
309 }
310
311 /* Followlines */
312 tbody.sourcelines > tr.followlines-selected,
313 pre.sourcelines > span.followlines-selected {
314 background-color: #99C7E9;
315 }
316
317 div#followlines {
318 background-color: #FFF;
319 border: 1px solid #999;
320 padding: 5px;
321 position: fixed;
322 }
323
324 div.followlines-cancel {
325 text-align: right;
326 }
327
328 div.followlines-cancel > button {
329 line-height: 80%;
330 padding: 0;
331 border: 0;
332 border-radius: 2px;
333 background-color: inherit;
334 font-weight: bold;
335 }
336
337 div.followlines-cancel > button:hover {
338 color: #FFFFFF;
339 background-color: #CF1F1F;
340 }
341
342 div.followlines-link {
343 margin: 2px;
344 margin-top: 4px;
345 font-family: sans-serif;
346 }
347
348 .btn-followlines {
349 display: none;
350 cursor: pointer;
351 box-sizing: content-box;
352 font-size: 12px;
353 width: 13px;
354 height: 13px;
355 border-radius: 3px;
356 margin: 0px;
357 margin-top: -2px;
358 padding: 0px;
359 background-color: #E5FDE5;
360 border: 1px solid #9BC19B;
361 font-family: monospace;
362 text-align: center;
363 line-height: 5px;
364 }
365
366 tr .btn-followlines {
367 position: absolute;
368 }
369
370 span .btn-followlines {
371 float: left;
372 }
373
374 span.followlines-select .btn-followlines {
375 margin-left: -1.5em;
376 }
377
378 .btn-followlines:hover {
379 transform: scale(1.2, 1.2);
380 }
381
382 .btn-followlines .followlines-plus {
383 color: green;
384 }
385
386 .btn-followlines .followlines-minus {
387 color: red;
388 }
389
390 .btn-followlines-end {
391 background-color: #ffdcdc;
392 }
393
394 .sourcelines tr:hover .btn-followlines,
395 .sourcelines span.followlines-select:hover > .btn-followlines {
396 display: inline;
397 }
398
399 .btn-followlines-hidden,
400 .sourcelines tr:hover .btn-followlines-hidden {
401 display: none;
402 }
403
404 .sourcelines > a {
405 display: inline-block;
406 position: absolute;
407 left: 0px;
408 width: 4em;
409 height: 1em;
410 }
411
412 .fileline { font-family: monospace; }
413 .fileline img { border: 0; }
414
415 .tagEntry .closed { color: #99f; }
416
417 /* Changeset entry */
418 #changesetEntry {
419 border-collapse: collapse;
420 font-size: 90%;
421 width: 100%;
422 margin-bottom: 1em;
423 }
424
425 #changesetEntry th {
426 padding: 1px 4px;
427 width: 4em;
428 text-align: right;
429 font-weight: normal;
430 color: #999;
431 vertical-align: top;
432 }
433
434 div.description {
435 border-left: 2px solid #999;
436 margin: 1em 0 1em 0;
437 padding: .3em;
438 white-space: pre;
439 font-family: monospace;
440 }
441
442 /* Graph */
443 div#wrapper {
444 position: relative;
445 border-top: 1px solid black;
446 border-bottom: 1px solid black;
447 margin: 0;
448 padding: 0;
449 }
450
451 canvas {
452 position: absolute;
453 z-index: 5;
454 top: -0.7em;
455 margin: 0;
456 }
457
458 ul#graphnodes {
459 list-style: none inside none;
460 padding: 0;
461 margin: 0;
462 }
463
464 ul#graphnodes li {
465 height: 39px;
466 overflow: visible;
467 }
468
469 ul#graphnodes li .fg {
470 position: absolute;
471 z-index: 10;
472 }
473
474 ul#graphnodes li .info {
475 font-size: 70%;
476 }
477
478 /* Comparison */
479 .legend {
480 padding: 1.5% 0 1.5% 0;
481 }
482
483 .legendinfo {
484 border: 1px solid #999;
485 font-size: 80%;
486 text-align: center;
487 padding: 0.5%;
488 }
489
490 .equal {
491 background-color: #ffffff;
492 }
493
494 .delete {
495 background-color: #faa;
496 color: #333;
497 }
498
499 .insert {
500 background-color: #ffa;
501 }
502
503 .replace {
504 background-color: #e8e8e8;
505 }
506
507 .header {
508 text-align: center;
509 }
510
511 .block {
512 border-top: 1px solid #999;
513 }
514
515 .breadcrumb {
516 color: gray;
517 }
518
519 .breadcrumb a {
520 color: blue;
521 }
522
523 .scroll-loading {
524 -webkit-animation: change_color 1s linear 0s infinite alternate;
525 -moz-animation: change_color 1s linear 0s infinite alternate;
526 -o-animation: change_color 1s linear 0s infinite alternate;
527 animation: change_color 1s linear 0s infinite alternate;
528 }
529
530 @-webkit-keyframes change_color {
531 from { background-color: #A0CEFF; } to { }
532 }
533 @-moz-keyframes change_color {
534 from { background-color: #A0CEFF; } to { }
535 }
536 @-o-keyframes change_color {
537 from { background-color: #A0CEFF; } to { }
538 }
539 @keyframes change_color {
540 from { background-color: #A0CEFF; } to { }
541 }
542
543 .scroll-loading-error {
544 background-color: #FFCCCC !important;
545 }