Make use of CSS3 for content shadow.
[catagits/Gitalist.git] / root / static / css / core.css
1 #debug_holder{
2         
3         display:none;
4         
5         clear:both;
6         padding-top:30px;
7         margin:30px 0;
8 }
9
10 #debug_holder pre{
11         margin:0;
12         padding:10px;
13         border:1px solid #ddd;
14         background-color:#f0f0f0;
15 }
16
17 body{
18         background:#FAFAFA url([% c.uri_for('/static/i/bg.png') %]) repeat-x left top;
19         padding:0;
20         margin:0;
21         font-family:Arial, Verdana, sans-serif;
22         font-size:80%;
23 }
24 a img{
25         border:0;
26 }
27
28
29 /* structure */
30 .sub_holder{
31         width:970px;
32         margin:0 auto;
33         text-align:left;
34 }
35
36 #header_holder{
37         margin-top:20px;
38 }
39 #header{
40         height:60px;
41 }
42
43 #content_holder{
44
45 }
46 #content {
47     min-height:200px;
48      -moz-box-shadow: 0px 0px 10px black; /* FF3.5+ */
49   -webkit-box-shadow: 0px 0px 10px black; /* Saf3.0+, Chrome */
50           box-shadow: 0px 0px 10px black; /* Opera 10.5, IE9, Chrome 10+ */
51
52 }
53 #content_inner{
54     padding-bottom:30px;
55 }
56 .copy{
57         padding:10px;
58 }
59 #logo{
60         margin-left:-10px;
61         float:left;
62 }
63 #header .search{
64         margin-right:10px;
65         float:right;
66 }
67 #git_logo{
68         float:left;
69         margin-left:15px;
70 }
71 #feeds{
72         float:right;
73         margin-right:15px;
74 }
75 #footer_holder{
76         margin-bottom:100px;
77 }
78 #footer p{
79         margin-left:15px;
80 }
81
82
83 /* nav tabs */
84 #nav_logs{
85         width:100%;
86         clear:both;
87         float:right;
88         margin:-9px 10px 0 0;
89 }
90 #nav_logs ul{
91         margin:0;
92         padding:0;
93 }
94 #nav_logs li{
95         display:block;
96         float:right;
97         list-style:none;
98         margin:0;
99         padding:0;
100 }
101 #nav_logs li a{
102         display:block;
103         margin-left:20px;
104         padding:10px 15px 10px 48px;
105         color:#ffffff;
106         font-size:1.4em;
107         text-transform:uppercase;
108         text-decoration:none;
109 }
110 a#log_short{
111         background:#666 url([% c.uri_for('/static/i/icons/shortlog.gif') %]) no-repeat 15px center;
112 }
113 a#log_full{
114         background:#666 url([% c.uri_for('/static/i/icons/fulllog.gif') %]) no-repeat 15px center;
115 }
116 a#tree{
117         background:#666 url([% c.uri_for('/static/i/icons/tree.gif') %]) no-repeat 15px center;
118 }
119 #nav_logs li a:hover{
120         text-decoration:underline;
121         background-color:#DC143C;
122 }
123 #nav_logs li.selected a{
124         background-color:#333;
125 }
126 #nav_logs #branch_selector{
127         padding:10px 15px 10px 48px;
128         font-size:1.3em;
129         font-weight:bold;
130         color:#666;
131 }
132
133
134
135
136
137 /* formating */
138 h1{
139         margin:0;
140         padding:20px 0;
141         clear:both;
142         font-weight:normal;
143         font-size:1.85em;
144         color:#fff;
145 }
146 h1 a{
147         margin-right:10px;
148         color:#fff;
149 }
150 h1 a:hover{
151         color:#EAF2F5;
152 }
153 h2{
154         font-size:1.85em;
155         font-weight:normal;
156         color:#666;
157         margin:30px 15px 20px;
158 }
159 h2 span{
160         color:#ccc;
161 }
162 h3{
163         margin:0;
164         color:#fff;
165         padding:9px 5px 9px 10px;
166         font-size:1em;
167 }
168 h3 a{
169         color:#ffffff;
170 }
171 h4 a{
172         color:#ffffff;
173 }
174 h4 a:hover{
175         color:#EAF2F5;
176 }
177 p,
178 td,
179 a{
180         color:#666;
181 }
182 a:hover{
183         color:#DC143C;
184 }
185
186 /* sub actions dropdown changer in h1 */
187 #actions_nav_link{
188         border:1px solid #666;
189         padding:1px 4px;
190         text-decoration:none;
191         outline:none;
192 }
193 #actions_nav_link span{
194         margin-right:5px;
195         padding-right:18px;
196
197         background:transparent url([% c.uri_for('/static/i/arrow_down_white.gif') %]) no-repeat right center;
198 }
199 #actions_nav_list{
200         display:none;
201         position:absolute;
202         padding:0 0 3px 0;
203         margin:0;
204         background-color:#333;
205         color:#fff;
206         font-size:1em;
207         border:1px solid #666;
208         border-top:none;
209 }
210 #actions_nav_list li{
211         list-style:none;
212         margin:0;
213         padding:2px 10px 2px 5px;
214 }
215 #actions_nav_list a{
216         color:#fff;
217         font-size:1.8em;
218 }
219 #actions_nav_list a:hover{
220         color:#EAF2F5;
221 }
222 .actions_nav_list_over{
223         display:block !important;
224 }
225 .button{
226         display:block;
227         float:left;
228         vertical-align:middle;
229         margin-right:8px;
230         text-indent:-999999px;
231         width:21px;
232         height:21px;
233         outline:none;
234 }
235 a.commit{
236         background:transparent url([% c.uri_for('/static/i/icons/commit.png') %]) no-repeat;
237 }
238 a.diff{
239         background:transparent url([% c.uri_for('/static/i/icons/diff.png') %]) no-repeat;
240 }
241 a.diffcurrent{
242         background:transparent url([% c.uri_for('/static/i/icons/diffcurrent.png') %]) no-repeat;
243 }
244 a.tree{
245         background:transparent url([% c.uri_for('/static/i/icons/tree.png') %]) no-repeat;
246 }
247 a.shortlog{
248         background:transparent url([% c.uri_for('/static/i/icons/shortlog.png') %]) no-repeat;
249 }
250 a.longlog{
251         background:transparent url([% c.uri_for('/static/i/icons/longlog.png') %]) no-repeat;
252 }
253 a.blob{
254         background:transparent url([% c.uri_for('/static/i/icons/blob.png') %]) no-repeat;
255 }
256 a.blame{
257         background:transparent url([% c.uri_for('/static/i/icons/blame.png') %]) no-repeat;
258 }
259 a.history{
260         background:transparent url([% c.uri_for('/static/i/icons/history.png') %]) no-repeat;
261 }
262 a.raw{
263         background:transparent url([% c.uri_for('/static/i/icons/raw.png') %]) no-repeat;
264 }
265 .sha1_holder{
266         background:transparent url([% c.uri_for('/static/i/icons/button_sha1.png') %]) no-repeat;
267 }
268 .sha1_holder_invert{
269         background:transparent url([% c.uri_for('/static/i/icons/button_sha1_invert.png') %]) no-repeat;
270 }
271 .sha1_label{
272         padding-top:2px;
273         float:left;
274 }
275 a.file{
276         padding-left:25px;
277         padding-bottom:1px;
278         background:transparent url([% c.uri_for('/static/i/icons/file.png') %]) no-repeat;
279 }
280 a.folder{
281         padding-left:25px;
282         padding-bottom:1px;
283         background:transparent url([% c.uri_for('/static/i/icons/folder.png') %]) no-repeat;
284 }
285 .msg{
286         padding:5px 10px 5px 35px;
287         background:#f0f0f0 url([% c.uri_for('/static/i/icons/attention.png') %]) no-repeat 10px center;
288         border:1px solid #ddd;
289         margin:30px 15px;
290 }
291 .match{
292         background-color:#ffff00;
293 }
294 a.rss_logo {
295   float: right;
296   padding: 3px 0px;
297   width: 35px;
298   line-height: 10px;
299   border: 1px solid;
300   border-color: #fcc7a5 #7d3302 #3e1a01 #ff954e;
301   color: #ffffff;
302   background-color: #ff6600;
303   font-weight: bold;
304   font-family: sans-serif;
305   font-size: 70%;
306   font-style: normal;
307   text-align: center;
308   text-decoration: none;
309   margin: 3px;
310 }
311
312 a.rss_logo:hover {
313   background-color: #ee5500;
314 }
315
316
317 .button_submit{
318         text-indent:-999999px;
319         overflow:hidden;
320         width:95px;
321         height:26px;
322         border:0;
323         background:transparent url([% c.uri_for('/static/i/buttons/search.png') %]) no-repeat;
324         cursor: pointer;
325 }
326
327
328 /* paging */
329 .pager{
330         width:100%;
331         margin:10px 0;
332         padding:0;
333 }
334 .pager li{
335         margin:0;
336         padding:0;
337         display:block;
338         list-style:none;
339 }
340 .pager li a{
341         display:block;
342         padding:4px 6px;
343         color:#fff;
344         border:1px solid #ddd;
345         background-color:#333;
346 }
347 .pager .pager_prev a{
348         margin-left:20px;
349         float:left;
350 }
351 .pager .pager_next a{
352         margin-right:20px;
353         float:right;
354 }
355
356
357
358
359 /* table listings */
360 th{
361         padding:9px 5px 9px 10px;
362         text-align:left;
363         color:#fff;
364 }
365 th a{
366         color:#fff;
367 }
368 th a:hover{
369         color:#f0f0f0;
370 }
371 .summary tr{
372         background-color:#FAFAFA;
373         border-bottom:1px solid #fff;
374 }
375 .summary td{
376         vertical-align:middle !important;
377 }
378 tr{
379         background-color:#fff;
380 }
381 thead tr{
382         background-color:transparent !important;
383 }
384 tr.invert{
385         background-color:#f0f0f0;
386 }
387 tr.header{
388         background-color:#666;
389 }
390 .sha1{
391         width:80px;
392 }
393 .file-mode{
394         width:80px;
395 }
396 .time-since{
397         width:95px;
398         font-weight:bold;
399 }
400 .author{
401         width:160px;
402 }
403 .author img{
404         margin-right:5px;
405         vertical-align:middle;
406 }
407 table.listing{
408         width:970px;
409         border-collapse:collapse;
410 }
411 table.listing thead {
412     background-color: #666;
413 }
414 .listing td{
415         vertical-align:top;
416         padding:9px 5px 9px 10px;
417 }
418
419 /*
420
421 puts the repo description on one line which gets truncated if the repo name is too long
422 BUT the final width needs to be set with javascript based on the parent element (td) width
423
424 .description{
425         white-space:nowrap;
426         overflow:hidden;
427 }
428 .description div{
429         position:absolute;
430         white-space:nowrap;
431         overflow:hidden;
432         width:200px;
433 }
434 */
435
436 .action-list{
437         width:120px;
438 }
439
440 .diff-tree{
441         background-color:#f0f0f0;
442 }
443 .diff-tree th{
444         background-color:#666;
445 }
446 .diff-tree tr{
447         border-bottom:1px solid #fff;
448 }
449 .diff-tree td{
450         padding:6px 5px 4px 10px;
451 }
452 .differences{
453         margin-top:0;
454         padding:0px 15px;
455 }
456 .differences pre{
457         line-height:140%;
458         font-size:12px;
459         overflow:auto;
460         margin:0;
461         padding:10px;
462         border:1px solid #ddd;
463         background-color:#f0f0f0;
464         min-height:40px;
465 }
466 .diff-head{
467         background-color:#666;
468         color:#fff;
469         margin:10px 0 0 0 !important;
470         border:1px solid #ddd;
471         border-bottom:none;
472         font-family: monospace;
473         padding:10px;
474         font-size:13px;
475 }
476 .diff-index {
477         margin:0 0 30px 0;
478         border:1px solid #ddd;
479         border-top:none;
480         background-color:#ccc;
481         padding:5px 10px;
482 }
483
484
485 /* /blame */
486 #blame pre, #blame tt {
487   margin: 0;
488   font-size: 12px;
489 }
490 #blame .commit-info {
491
492 }
493 #blame .lineno {
494   text-align: right;
495   padding: 0 8px;
496 }
497 #blame a {
498  text-decoration: none;
499 }
500 #blame {
501     overflow-x: scroll;
502 }
503 #blame tr.alt {
504   background-color: #f7f7f7;
505 }
506 #blame tbody tr:hover {
507   background-color: #fefeaa;
508 }
509 #blame td {
510         vertical-align:middle;
511         padding: 3px;
512 }
513 #blame td.lineno {
514   background-color: #eee;
515 }
516 #blame td.date, #blame td.author, #blame td.commit-info {
517 }
518 #blame tbody td.data {
519   padding-left: 5px;
520   background-color: #333;
521   color: #ddd;
522 }
523
524 /* /blob */
525 pre.blob {
526   background-color: #333;
527   color: #ddd;
528   border-left: solid 3px #c33;
529   padding: 5px;
530   padding-left: 15px;
531   margin: 20px 15px 20px;
532   overflow:auto;
533   font-size:12px;
534 }
535 div.blob {
536     text-align: center;
537     margin: 30px;
538 }
539
540 /* /blobdiff etc */
541
542 .commit-message {
543   white-space: pre-wrap;
544   width: 420px;
545 }
546 p.commit-message {
547   margin: 0;
548 }
549
550 /* Hidden spans that contain bits of data to be used by JS */
551 .js-data {
552     display: none;
553 }