Improved speech bubble and name length
[gitweb.git] / static / gitweb.scss
1 @import url('font/octicons.css');
2 $ver_color: #0a0;
3 $theme_text_color: #550077;
4 $theme_sec_color: #ddddff;
5 $body_bg: #ffffff;
6 $shadow_radius : 5px;
7 $shadow : 1px 1px $shadow_radius #999;
8
9 body {
10 font-family: sans-serif;
11 font-size: small;
12 border: solid $theme_sec_color;
13 border-width: 1px;
14 border-radius: 7px;
15 margin: 10px;
16 background-color: $body_bg;
17 color: #000000;
18 box-shadow: $shadow;
19 }
20
21 html {
22 background-color: lighten($theme_text_color, 60%);
23 }
24 @media screen and (min-width: 40.5em) {
25 body {
26 margin-left: 10%;
27 margin-right: 10%;
28 }
29 }
30
31 a {
32 color: #0000cc;
33 }
34
35 a:hover, a:visited, a:active {
36 color: #880000;
37 }
38
39 span.cntrl {
40 border: dashed #aaaaaa;
41 border-width: 1px;
42 padding: 0px 2px 0px 2px;
43 margin: 0px 2px 0px 2px;
44 }
45
46 img.logo {
47 float: right;
48 border-width: 0px;
49 }
50
51 img.avatar {
52 vertical-align: middle;
53 }
54
55 img.blob {
56 max-height: 100%;
57 max-width: 100%;
58 }
59
60 a.list img.avatar {
61 border-style: none;
62 }
63
64 div.page_header {
65 margin-top: -1px;
66 border-radius: 7px 7px 0 0;
67 height: 25px;
68 padding: 8px;
69 font-size: 150%;
70 font-weight: bold;
71 background-color: $theme_sec_color;
72 }
73
74 div.page_header a:visited, a.header {
75 color: darken($theme_text_color,10%);
76 }
77
78 div.branches_nav a:visited {
79 color: $theme_text_color;
80 }
81 div.page_header a:hover {
82 color: #880000;
83 }
84
85 div.page_nav, div.page_nav_extra, div.branches_nav {
86 padding: 8px;
87 }
88 div.page_nav, div.branches_nav {
89 border-bottom: 1px solid $theme_sec_color;;
90 padding-bottom: 0px;
91 }
92
93 div.page_nav a:visited, div.page_nav_extra a:visited, div.page_nav a, div.page_nav_extra {
94 color: $theme_text_color;
95 }
96
97 div.page_nav a, div.page_nav .current, div.branches_nav a, div.branches_nav .current {
98 display: inline-block;
99 padding: 6px;
100 margin: 1px;
101 margin-bottom: -1px;
102 border-radius: 4px 4px 0 0;
103 }
104
105 div.page_nav a, div.branches_nav a {
106 background: #eee;
107 border: 1px solid $theme_sec_color;
108 outline: 0;
109 }
110 div.page_nav a:hover, div.branches_nav a:hover {
111 text-decoration: none;
112 background: lighten($theme_text_color, 60%);
113 }
114
115
116
117
118 div.page_nav .current, div.branches_nav .current {
119 background: $body_bg;
120 border-left: 1px solid $theme_sec_color;
121 border-right: 1px solid $theme_sec_color;
122 border-top: 1px solid $theme_sec_color;;
123 border-bottom: 1px solid $body_bg;
124 }
125
126 tr.metadata_url {
127 border: 1px solid #a0a;
128 display: block;
129 width: 100%;
130 }
131
132 div.page_path {
133 padding: 8px;
134 font-weight: bold;
135 border: solid #d9d8d1;
136 border-width: 0px 0px 1px;
137 }
138
139 div.page_footer {
140 border-radius: 0 0 7px 7px ;
141 margin-bottom: -1px;
142 height: 22px;
143 padding: 4px 8px;
144 background-color: $theme_sec_color;
145 }
146
147 div.page_footer_text {
148 line-height: 22px;
149 float: left;
150 color: #555555;
151 font-style: italic;
152 }
153
154 div#generating_info {
155 margin: 4px;
156 font-size: smaller;
157 text-align: center;
158 color: #505050;
159 }
160
161 div.page_body {
162 padding: 8px;
163 font-family: monospace;
164 }
165
166 div.title, a.title {
167 display: block;
168 padding: 6px 8px;
169 font-weight: bold;
170 background-color: $theme_sec_color;
171 text-decoration: none;
172 color: #000000;
173 }
174
175 div.readme {
176 padding: 8px;
177 }
178
179 a.title:hover {
180 background-color: darken($theme_sec_color, 10%);
181 }
182
183 div.title_text {
184 padding: 6px 0px;
185 border: solid #d9d8d1;
186 border-width: 0px 0px 1px;
187 /* font-family: monospace;*/
188 }
189
190 div.log_body {
191 padding: 8px 8px 8px 150px;
192 }
193
194 span.age {
195 position: relative;
196 float: left;
197 width: 142px;
198 font-style: italic;
199 }
200
201 span.signoff {
202 color: #888888;
203 }
204
205 div.log_link {
206 padding: 0px 8px;
207 font-size: 70%;
208 font-family: sans-serif;
209 font-style: normal;
210 position: relative;
211 float: left;
212 width: 136px;
213 }
214
215 div.list_head {
216 padding: 6px 8px 4px;
217 border: solid #d9d8d1;
218 border-width: 1px 0px 0px;
219 font-style: italic;
220 }
221
222 /* .author_date, .author { */
223 /* font-style: italic; */
224 /* } */
225
226 div.author_date {
227 padding: 8px;
228 border: solid #d9d8d1;
229 border-width: 0px 0px 1px 0px;
230 }
231
232 a.list {
233 text-decoration: none;
234 color: #000000;
235 }
236
237 a.subject, a.name {
238 font-weight: bold;
239 }
240
241 table.tags a.subject {
242 font-weight: normal;
243 }
244
245 a.list:hover {
246 text-decoration: underline;
247 color: #880000;
248 }
249
250 a.text {
251 text-decoration: none;
252 color: #0000cc;
253 }
254
255 a.text:visited {
256 text-decoration: none;
257 color: #880000;
258 }
259
260 a.text:hover {
261 text-decoration: underline;
262 color: #880000;
263 }
264
265 table {
266 padding: 8px 4px;
267 border-spacing: 0;
268 }
269
270 table.diff_tree {
271 font-family: monospace;
272 }
273
274 table.combined.diff_tree th {
275 text-align: center;
276 }
277
278 table.combined.diff_tree td {
279 padding-right: 24px;
280 }
281
282 table.combined.diff_tree th.link,
283 table.combined.diff_tree td.link {
284 padding: 0px 2px;
285 }
286
287 table.combined.diff_tree td.nochange a {
288 color: #6666ff;
289 }
290
291 table.combined.diff_tree td.nochange a:hover,
292 table.combined.diff_tree td.nochange a:visited {
293 color: #d06666;
294 }
295
296 table.blame {
297 border-collapse: collapse;
298 }
299
300 table.blame td {
301 padding: 0px 5px;
302 font-size: 100%;
303 vertical-align: top;
304 }
305
306 th {
307 padding: 2px 5px;
308 font-size: 100%;
309 text-align: left;
310 }
311
312 /* do not change row style on hover for 'blame' view */
313 tr.light,
314 table.blame .light:hover {
315 ebackground-color: $body_bg;
316 }
317
318 tr.dark,
319 table.blame .dark:hover {
320 background-color: darken($body_bg,15%);
321 }
322
323 /* currently both use the same, but it can change */
324 tr.light:hover,
325 tr.dark:hover {
326 background-color: darken($body_bg,7%);
327 }
328
329 /* boundary commits in 'blame' view */
330 /* and commits without "previous" */
331 tr.boundary td.sha1,
332 tr.no-previous td.linenr {
333 font-weight: bold;
334 }
335
336 /* for 'blame_incremental', during processing */
337 tr.color1 { background-color: #f6fff6; }
338 tr.color2 { background-color: #f6f6ff; }
339 tr.color3 { background-color: #fff6f6; }
340
341 td {
342 padding: 2px 5px;
343 font-size: 100%;
344 vertical-align: top;
345 }
346
347 td.link, td.selflink {
348 padding: 2px 5px;
349 font-family: sans-serif;
350 font-size: 70%;
351 }
352
353 td.selflink {
354 padding-right: 0px;
355 }
356
357 td.sha1 {
358 font-family: monospace;
359 }
360
361 .error {
362 color: red;
363 background-color: yellow;
364 }
365
366 td.current_head {
367 text-decoration: underline;
368 }
369
370 td.category {
371 background-color: #d9d8d1;
372 border-top: 1px solid #000000;
373 border-left: 1px solid #000000;
374 font-weight: bold;
375 }
376
377 table.diff_tree span.file_status.new {
378 color: #008000;
379 }
380
381 table.diff_tree span.file_status.deleted {
382 color: #c00000;
383 }
384
385 table.diff_tree span.file_status.moved,
386 table.diff_tree span.file_status.mode_chnge {
387 color: #777777;
388 }
389
390 table.diff_tree span.file_status.copied {
391 color: #70a070;
392 }
393
394 /* noage: "No commits" */
395 table.project_list td.noage {
396 color: #808080;
397 font-style: italic;
398 }
399
400 /* age2: 60*60*24*2 <= age */
401 table.project_list td.age2, table.blame td.age2 {
402 font-style: italic;
403 }
404
405 /* age1: 60*60*2 <= age < 60*60*24*2 */
406 table.project_list td.age1 {
407 color: #009900;
408 font-style: italic;
409 }
410
411 table.blame td.age1 {
412 color: #009900;
413 background: transparent;
414 }
415
416 /* age0: age < 60*60*2 */
417 table.project_list td.age0 {
418 color: #009900;
419 font-style: italic;
420 font-weight: bold;
421 }
422
423 table.blame td.age0 {
424 color: #009900;
425 background: transparent;
426 font-weight: bold;
427 }
428
429 /* table.heads { */
430 /* display: none; */
431 /* width: 100%; */
432 /* min-height: 30px; */
433 /* margin: 0px; */
434 /* background: #090; */
435 /* color: white; */
436 /* } */
437
438 /* table.heads .list { */
439 /* color: white */
440 /* } */
441
442
443 /* table.heads tr.dark { */
444 /* padding: 0.4em; */
445 /* background: #080; */
446 /* } */
447 /* table.heads tr.light { */
448 /* padding: 0.4em; */
449 /* background: #090; */
450 /* } */
451
452
453 /* .header:hover + table.heads, table.heads:hover { */
454 /* display: block; */
455 /* } */
456
457 td.pre, div.pre, div.diff {
458 font-family: monospace;
459 font-size: 12px;
460 white-space: pre;
461 }
462
463 td.mode {
464 font-family: monospace;
465 }
466
467 /* progress of blame_interactive */
468 div#progress_bar {
469 height: 2px;
470 margin-bottom: -2px;
471 background-color: #d8d9d0;
472 }
473 div#progress_info {
474 float: right;
475 text-align: right;
476 }
477
478 /* format of (optional) objects size in 'tree' view */
479 td.size {
480 font-family: monospace;
481 text-align: right;
482 }
483
484 /* styling of diffs (patchsets): commitdiff and blobdiff views */
485 div.diff.header,
486 div.diff.extended_header {
487 white-space: normal;
488 }
489
490 div.diff.header {
491 font-weight: bold;
492
493 background-color: #edece6;
494
495 margin-top: 4px;
496 padding: 4px 0px 2px 0px;
497 border: solid #d9d8d1;
498 border-width: 1px 0px 1px 0px;
499 }
500
501 div.diff.header a.path {
502 text-decoration: underline;
503 }
504
505 div.diff.extended_header,
506 div.diff.extended_header a.path,
507 div.diff.extended_header a.hash {
508 color: #777777;
509 }
510
511 div.diff.extended_header .info {
512 color: #b0b0b0;
513 }
514
515 div.diff.extended_header {
516 background-color: #f6f5ee;
517 padding: 2px 0px 2px 0px;
518 }
519
520 div.diff a.list,
521 div.diff a.path,
522 div.diff a.hash {
523 text-decoration: none;
524 }
525
526 div.diff a.list:hover,
527 div.diff a.path:hover,
528 div.diff a.hash:hover {
529 text-decoration: underline;
530 }
531
532 div.diff.to_file a.path,
533 div.diff.to_file {
534 color: #007000;
535 }
536
537 div.diff.add {
538 color: #008800;
539 }
540
541 div.diff.add span.marked {
542 background-color: #aaffaa;
543 }
544
545 div.diff.from_file a.path,
546 div.diff.from_file {
547 color: #aa0000;
548 }
549
550 div.diff.rem {
551 color: #cc0000;
552 }
553
554 div.diff.rem span.marked {
555 background-color: #ffaaaa;
556 }
557
558 div.diff.chunk_header a,
559 div.diff.chunk_header {
560 color: #990099;
561 }
562
563 div.diff.chunk_header {
564 border: dotted #ffe0ff;
565 border-width: 1px 0px 0px 0px;
566 margin-top: 2px;
567 }
568
569 div.diff.chunk_header span.chunk_info {
570 background-color: #ffeeff;
571 }
572
573 div.diff.chunk_header span.section {
574 color: #aa22aa;
575 }
576
577 div.diff.incomplete {
578 color: #cccccc;
579 }
580
581 div.diff.nodifferences {
582 font-weight: bold;
583 color: #600000;
584 }
585
586 /* side-by-side diff */
587 div.chunk_block {
588 overflow: hidden;
589 }
590
591 div.chunk_block div.old {
592 float: left;
593 width: 50%;
594 overflow: hidden;
595 }
596
597 div.chunk_block div.new {
598 margin-left: 50%;
599 width: 50%;
600 }
601
602 div.chunk_block.rem div.old div.diff.rem {
603 background-color: #fff5f5;
604 }
605 div.chunk_block.add div.new div.diff.add {
606 background-color: #f8fff8;
607 }
608 div.chunk_block.chg div div.diff {
609 background-color: #fffff0;
610 }
611 div.chunk_block.ctx div div.diff.ctx {
612 color: #404040;
613 }
614
615
616 div.index_include {
617 border: solid #d9d8d1;
618 border-width: 0px 0px 1px;
619 padding: 12px 8px;
620 }
621
622 div.search {
623 font-size: 100%;
624 font-weight: normal;
625 margin: 4px 8px;
626 float: right;
627 top: 56px;
628 right: 12px
629 }
630
631 div.projsearch {
632 text-align: center;
633 margin: 20px 0px;
634 }
635
636 div.projsearch form {
637 margin-bottom: 2px;
638 }
639
640 td.linenr {
641 text-align: right;
642 }
643
644 a.linenr {
645 color: #999999;
646 text-decoration: none
647 }
648
649 a.rss_logo {
650 float: right;
651 padding: 3px 5px;
652 line-height: 10px;
653 border: 1px solid;
654 border-color: #fcc7a5 #7d3302 #3e1a01 #ff954e;
655 color: #ffffff;
656 background-color: #ff6600;
657 font-weight: bold;
658 font-family: sans-serif;
659 font-size: 70%;
660 text-align: center;
661 text-decoration: none;
662 }
663
664 a.rss_logo:hover {
665 background-color: #ee5500;
666 }
667
668 a.rss_logo.generic {
669 background-color: #ff8800;
670 }
671
672 a.rss_logo.generic:hover {
673 background-color: #ee7700;
674 }
675
676 span.refs > span {
677 padding: 3px 4px;
678 font-size: 90%;
679 font-weight: normal;
680 display: inline-block;
681 border-radius: 3px;
682 margin-top: 2px;
683 }
684
685 span.refs {
686 float: right;
687 margin-right: 4px;
688 margin-left: 0.7em;
689 text-align: right;
690 padding: 2px;
691 max-width: 30%;
692 vertical-align:top !important;
693 }
694
695 span.refs + * {
696 clear: both;
697 }
698
699
700 span.refs span a {
701 text-decoration: none;
702 color: inherit;
703 }
704
705 span.refs span a:hover {
706 text-decoration: underline;
707 }
708
709 span.refs span.indirect {
710 font-style: italic;
711 }
712
713 span.refs span.ref {
714 background-color: #aaaaff;
715 border-color: #ccccff #0033cc #0033cc #ccccff;
716 }
717
718 span.refs span.tag {
719 background-color: #ffffaa;
720 border-color: #ffffcc #ffee00 #ffee00 #ffffcc;
721 }
722
723 span.refs span.head {
724 background-color: #aaffaa;
725 }
726 span.refs span.remote {
727 background-color: #aaaaff;
728 }
729
730 span.atnight {
731 color: #cc0000;
732 }
733
734 span.match {
735 color: #e00000;
736 }
737
738 div.binary {
739 font-style: italic;
740 }
741
742 div.remote {
743 margin: .5em;
744 border: 1px solid #d9d8d1;
745 display: inline-block;
746 }
747
748 /* JavaScript-based timezone manipulation */
749
750 .popup { /* timezone selection UI */
751 position: absolute;
752 /* "top: 0; right: 0;" would be better, if not for bugs in browsers */
753 top: 0; left: 0;
754 border: 1px solid;
755 padding: 2px;
756 background-color: #f0f0f0;
757 font-style: normal;
758 color: #000000;
759 cursor: auto;
760 }
761
762 .close-button { /* close timezone selection UI without selecting */
763 /* float doesn't work within absolutely positioned container,
764 * if width of container is not set explicitly */
765 /* float: right; */
766 position: absolute;
767 top: 0px; right: 0px;
768 border: 1px solid green;
769 margin: 1px 1px 1px 1px;
770 padding-bottom: 2px;
771 width: 12px;
772 height: 10px;
773 font-size: 9px;
774 font-weight: bold;
775 text-align: center;
776 background-color: #fff0f0;
777 cursor: pointer;
778 }
779
780 div.heads a::before {
781 content: "ᛘ ";
782 font-size: 25px;
783 padding-top: -2px;
784 padding-bottom: -2px;
785 margin-right: 3px;
786 }
787
788 /* div.branches_nav a::before, div.branches_nav .current::before { */
789 /* content: "ᛘ"; */
790 /* margin-right: 3px; */
791 /* font-size: 20px; */
792 /* margin-top: -4px; */
793 /* margin-bottom: -4px; */
794 /* } */
795 /* div.heads:hover a::before { */
796 /* content: "▶"; */
797 /* margin-right: 4px; */
798 /* } */
799
800
801 .verif .octicon-verified {
802 color: $ver_color;
803 font-weight: normal;
804 }
805
806 .verif {
807 font-weight: normal;
808 padding: 6px;
809 }
810 /* .verif:hover .commiter{ */
811 /* color: #fff; */
812 /* background: $ver_color; */
813 /* border-radius: 5px; */
814 /* display: block; */
815 /* position: absolute; */
816 /* margin-top: -1em; */
817
818 /* margin-left: 9px; */
819
820 /* } */
821 /* .verif:hover .commiter::after { */
822 /* background-color: #F2F2F2; */
823 /* box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 ); */
824 /* content: "\00a0"; */
825 /* display: block; */
826 /* height: 20px; */
827 /* left: -10px; */
828 /* position: relative; */
829 /* top: 20px; */
830 /* transform: rotate( 45deg ); */
831 /* width: 20px; */
832 /* } */
833
834 $nose_size : 12px;
835 $border : 1px solid #bbb;
836
837 .verif:hover .commiter {
838 background-color: $ver_color;
839 border-radius: 5px;
840 border: $border;
841 box-shadow: $shadow;
842 display: inline-block;
843 padding: 10px 18px;
844 margin-left: ($shadow_radius + $nose_size - 10px);
845 margin-right: ($shadow_radius + $nose_size);
846 position: absolute;
847 vertical-align: top;
848 margin-top: -1.3em;
849 }
850
851 .verif:hover .tail {
852 position: absolute;
853 top: $nose_size;
854 left: -($shadow_radius + $nose_size);
855 height: ($shadow_radius + $nose_size);
856 width: ($shadow_radius + $nose_size);
857 overflow: hidden;
858 }
859 .verif:hover .tail::before {
860 border: $border;
861 background-color: $ver_color;
862 box-shadow: $shadow;
863 content: "\00a0";
864
865 display: block;
866 position: absolute;
867 top: 0px;
868 left: $nose_size;
869 height: $nose_size;
870 width: $nose_size;
871 transform: skew( -45deg );
872 }
873
874
875 .verif .commiter {
876 display: none;
877 color: #fff;
878 }
879 /* .verif:hover .octicon-verified { */
880 /* color: #fff; */
881 /* } */
882
883 .verif:hover .commiter {
884 display: inline-block;
885 z-index: 1000;
886 }
887
888
889 /* Style definition generated by highlight 2.4.5, http://www.andre-simon.de/ */
890
891 /* Highlighting theme definition: */
892
893 .num { color:#2928ff; }
894 .esc { color:#ff00ff; }
895 .str { color:#ff0000; }
896 .dstr { color:#818100; }
897 .slc { color:#838183; font-style:italic; }
898 .com { color:#838183; font-style:italic; }
899 .dir { color:#008200; }
900 .sym { color:#000000; }
901 .line { color:#555555; }
902 .kwa { color:#000000; font-weight:bold; }
903 .kwb { color:#830000; }
904 .kwc { color:#000000; font-weight:bold; }
905 .kwd { color:#010181; }
906