Commit ca4f434de5b1d2851b8f75b00dd8ee676b37723f
Exists in
master
and in
79 other branches
Merge branch 'restructuring_css' of https://gitlab.com/softwarepublico/noosfero-…
…spb-theme into restructuring_css
Showing
8 changed files
with
480 additions
and
64 deletions
Show diff stats
css/home-page.css
@@ -148,7 +148,7 @@ | @@ -148,7 +148,7 @@ | ||
148 | display:none; | 148 | display:none; |
149 | } | 149 | } |
150 | 150 | ||
151 | -.action-home-index #content .software-block { | 151 | +.action-home-index #content .software-block { |
152 | width: 145px; | 152 | width: 145px; |
153 | height: 218px; | 153 | height: 218px; |
154 | margin: 0px 18px 14px 0px; | 154 | margin: 0px 18px 14px 0px; |
@@ -236,7 +236,7 @@ | @@ -236,7 +236,7 @@ | ||
236 | /*** News block - display content block **/ | 236 | /*** News block - display content block **/ |
237 | 237 | ||
238 | .action-home-index #content .display-content-block .block-title { | 238 | .action-home-index #content .display-content-block .block-title { |
239 | - margin: 0px; | 239 | + margin: 0px; |
240 | border-top: 4px solid #643C67; | 240 | border-top: 4px solid #643C67; |
241 | background: #eee; | 241 | background: #eee; |
242 | color: #643C67; | 242 | color: #643C67; |
@@ -293,7 +293,7 @@ | @@ -293,7 +293,7 @@ | ||
293 | } | 293 | } |
294 | 294 | ||
295 | .action-home-index #content .display-content-block .lead { | 295 | .action-home-index #content .display-content-block .lead { |
296 | - max-height: 56px; | 296 | + max-height: 47px; |
297 | overflow: hidden; | 297 | overflow: hidden; |
298 | } | 298 | } |
299 | 299 | ||
@@ -302,8 +302,8 @@ | @@ -302,8 +302,8 @@ | ||
302 | font: 15px/1.3em arial; | 302 | font: 15px/1.3em arial; |
303 | } | 303 | } |
304 | 304 | ||
305 | -.action-home-index #content .display-content-block .lead a:visited, | ||
306 | -.action-home-index #content .lead a:visited, | 305 | +.action-home-index #content .display-content-block .lead a:visited, |
306 | +.action-home-index #content .lead a:visited, | ||
307 | .action-home-index #content .lead dl.portlet a:visited { | 307 | .action-home-index #content .lead dl.portlet a:visited { |
308 | color: #172738; | 308 | color: #172738; |
309 | } | 309 | } |
@@ -331,7 +331,7 @@ | @@ -331,7 +331,7 @@ | ||
331 | 331 | ||
332 | /*** What Is block - Article block **/ | 332 | /*** What Is block - Article block **/ |
333 | 333 | ||
334 | -.action-home-index #content .article-block .block-title { | 334 | +.template-default .action-home-index #content .box-3 .article-block .block-title { |
335 | border-top: 4px solid #08A649; | 335 | border-top: 4px solid #08A649; |
336 | border-bottom: none; | 336 | border-bottom: none; |
337 | padding: 6px 8px 22px 10px; | 337 | padding: 6px 8px 22px 10px; |
@@ -342,20 +342,20 @@ | @@ -342,20 +342,20 @@ | ||
342 | text-transform: none; | 342 | text-transform: none; |
343 | } | 343 | } |
344 | 344 | ||
345 | -.action-home-index #content .article-block .read-more { | 345 | +.template-default .action-home-index #content .box-3 .article-block .read-more { |
346 | margin-top: 30px; | 346 | margin-top: 30px; |
347 | border-top: 1px solid #08A649; | 347 | border-top: 1px solid #08A649; |
348 | } | 348 | } |
349 | 349 | ||
350 | -.action-home-index #content .article-block .read-more a::after { | 350 | +.template-default .action-home-index #content .box-3 .article-block .read-more a::after { |
351 | background: #08A649; | 351 | background: #08A649; |
352 | } | 352 | } |
353 | 353 | ||
354 | -.action-home-index #content .article-block .short-post { | 354 | +.template-default .action-home-index #content .box-3 .article-block .short-post { |
355 | padding-top: 23px; | 355 | padding-top: 23px; |
356 | } | 356 | } |
357 | 357 | ||
358 | -.action-home-index #content .article-block p { | 358 | +.template-default .action-home-index #content .box-3 .article-block p { |
359 | margin: 0px 0px 14px 0px; | 359 | margin: 0px 0px 14px 0px; |
360 | padding: 0px; | 360 | padding: 0px; |
361 | font: 15px/18px arial, helvetica, sans-serif; | 361 | font: 15px/18px arial, helvetica, sans-serif; |
@@ -371,7 +371,7 @@ | @@ -371,7 +371,7 @@ | ||
371 | 371 | ||
372 | .action-home-index #content .highlights-border { | 372 | .action-home-index #content .highlights-border { |
373 | border: 1px solid #c0c1c1; | 373 | border: 1px solid #c0c1c1; |
374 | - border-radius: 8px 8px 8px 8px; | 374 | + border-radius: 8px; |
375 | width: auto; | 375 | width: auto; |
376 | height: 248px; | 376 | height: 248px; |
377 | max-height: 250px; | 377 | max-height: 250px; |
@@ -384,15 +384,15 @@ | @@ -384,15 +384,15 @@ | ||
384 | } | 384 | } |
385 | 385 | ||
386 | .action-home-index #content .highlights-container { | 386 | .action-home-index #content .highlights-container { |
387 | - border-radius: 8px 8px 8px 8px; | 387 | + border-radius: 8px; |
388 | border-width: 0px 0px 1px 0px; | 388 | border-width: 0px 0px 1px 0px; |
389 | border-bottom: none; | 389 | border-bottom: none; |
390 | - padding: 0px 0px 0px 0px; | 390 | + padding: 0; |
391 | width: 100% !important; | 391 | width: 100% !important; |
392 | max-height: 230px; | 392 | max-height: 230px; |
393 | background: transparent; | 393 | background: transparent; |
394 | position: relative; | 394 | position: relative; |
395 | - top: 0px; | 395 | + top: 0; |
396 | } | 396 | } |
397 | 397 | ||
398 | .action-home-index #content .highlights-image-link { | 398 | .action-home-index #content .highlights-image-link { |
@@ -422,11 +422,9 @@ | @@ -422,11 +422,9 @@ | ||
422 | } | 422 | } |
423 | 423 | ||
424 | .action-home-index #content .highlights-block-pager { | 424 | .action-home-index #content .highlights-block-pager { |
425 | - border: 0; | ||
426 | - padding: 0px 0px 0px 0px; | ||
427 | - width: 232px; | ||
428 | - float: left; | ||
429 | - position: static; | 425 | + float: none; |
426 | + display: block; | ||
427 | + text-align: center; | ||
430 | } | 428 | } |
431 | 429 | ||
432 | .action-home-index #content .highlights-block-pager a { | 430 | .action-home-index #content .highlights-block-pager a { |
@@ -448,6 +446,24 @@ | @@ -448,6 +446,24 @@ | ||
448 | color: transparent; | 446 | color: transparent; |
449 | } | 447 | } |
450 | 448 | ||
449 | +/*** software highlights block ***/ | ||
450 | + | ||
451 | +.action-home-index #content a.toggle-popover, | ||
452 | +.action-home-index #content a.toggle-popover:hover { | ||
453 | + margin: 0 0 0 55px; | ||
454 | + color: #3867b7; | ||
455 | + cursor: pointer; | ||
456 | +} | ||
457 | + | ||
458 | +.action-home-index #content span.popover-span { | ||
459 | + padding: 1px 6px; | ||
460 | + border-radius: 50%; | ||
461 | + background-color: #3867b7; | ||
462 | + color: #ffffff; | ||
463 | + font-weight: bold; | ||
464 | + cursor: pointer; | ||
465 | +} | ||
466 | + | ||
451 | /*** mais software block **/ | 467 | /*** mais software block **/ |
452 | .action-home-index #content #mais-software-block { | 468 | .action-home-index #content #mais-software-block { |
453 | margin: 11px 0px; | 469 | margin: 11px 0px; |
css/left-bar.css
1 | /******************** Box-2 ********************/ | 1 | /******************** Box-2 ********************/ |
2 | 2 | ||
3 | -.box-2{ | 3 | +/*** WARNING - WITHOUT BOX-4 ***/ |
4 | + | ||
5 | +.template-default .box-2 { | ||
4 | width:150px; | 6 | width:150px; |
5 | } | 7 | } |
6 | 8 | ||
7 | -#content .box-2 .block-outer .block-title { | 9 | +.template-default #content .box-2 .block-outer .block-title { |
8 | background: #eee; | 10 | background: #eee; |
9 | color: #4562b1; | 11 | color: #4562b1; |
10 | border-top: 4px solid #4562b1; | 12 | border-top: 4px solid #4562b1; |
@@ -13,14 +15,86 @@ | @@ -13,14 +15,86 @@ | ||
13 | 15 | ||
14 | /*** Menus - Link list block ***/ | 16 | /*** Menus - Link list block ***/ |
15 | 17 | ||
16 | -#content .box-2 .link-list-block li { | 18 | +.template-default #content .box-2 .link-list-block li { |
19 | + margin: 0; | ||
20 | + padding: 0; | ||
21 | + border-bottom: 1px solid #ddd; | ||
22 | + border-top: none; | ||
23 | +} | ||
24 | + | ||
25 | +.template-default #content .box-2 .link-list-block li a { | ||
26 | + width: auto; | ||
27 | + padding: 6px 5px 8px 18px; | ||
28 | + background-color: #fff; | ||
29 | + background-position: 0px 50%; | ||
30 | + color: #2C66CE; | ||
31 | + border-right: none; | ||
32 | + border-top: 0px solid #64946E; | ||
33 | + border-radius: 0 0 0 0; | ||
34 | + font-weight: normal; | ||
35 | + font-size: 14px; | ||
36 | + line-height: 17px; | ||
37 | +} | ||
38 | + | ||
39 | +.template-default #content .box-2 .link-list-block h3.empty + ul { | ||
40 | + border-top: 1px solid #ddd; | ||
41 | +} | ||
42 | + | ||
43 | +.template-default #content .box-2 .link-list-block h3.empty + ul li a { | ||
44 | + padding-left: 0px; | ||
45 | + padding-right: 0px; | ||
46 | + background-image: none; | ||
47 | +} | ||
48 | + | ||
49 | +.template-default #content .box-2 .link-list-block li a.link-this-page, | ||
50 | +.template-default #content .box-2 .link-list-block li a.link-this-page:hover { | ||
51 | + border-right: none; | ||
52 | +} | ||
53 | + | ||
54 | +.template-default #content .box-2 .link-list-block li a:hover { | ||
55 | + background-color: #FFFFFF; | ||
56 | + color: #000; | ||
57 | +} | ||
58 | +.template-default #content .box-2 .link-list-block li a.link-this-page { | ||
59 | + width: auto; | ||
60 | + margin-left: 0px; | ||
61 | + background-color: #ffffff; | ||
62 | + font-weight: bold; | ||
63 | +} | ||
64 | + | ||
65 | +/*** END OF WARNING - WITHOUT BOX-4 ***/ | ||
66 | + | ||
67 | +/*** WARNING - WITH BOX-4 ***/ | ||
68 | + | ||
69 | +/************ DUPLICATE ************ | ||
70 | + | ||
71 | + This part of the code is duplicated because, if there is | ||
72 | + a change of layout from template-default to lefttopright | ||
73 | + the CSS fit without many complication. | ||
74 | + | ||
75 | + */ | ||
76 | + | ||
77 | +.template-lefttopright .box-3 { | ||
78 | + width:150px; | ||
79 | +} | ||
80 | + | ||
81 | +.template-lefttopright #content .box-3 .block-outer .block-title { | ||
82 | + background: #eee; | ||
83 | + color: #4562b1; | ||
84 | + border-top: 4px solid #4562b1; | ||
85 | + line-height: 15px; | ||
86 | +} | ||
87 | + | ||
88 | +/*** Menus - Link list block ***/ | ||
89 | + | ||
90 | +.template-lefttopright #content .box-3 .link-list-block li { | ||
17 | margin: 0; | 91 | margin: 0; |
18 | padding: 0; | 92 | padding: 0; |
19 | border-bottom: 1px solid #ddd; | 93 | border-bottom: 1px solid #ddd; |
20 | border-top: none; | 94 | border-top: none; |
21 | } | 95 | } |
22 | 96 | ||
23 | -#content .box-2 .link-list-block li a { | 97 | +.template-lefttopright #content .box-3 .link-list-block li a { |
24 | width: auto; | 98 | width: auto; |
25 | padding: 6px 5px 8px 18px; | 99 | padding: 6px 5px 8px 18px; |
26 | background-color: #fff; | 100 | background-color: #fff; |
@@ -34,33 +108,41 @@ | @@ -34,33 +108,41 @@ | ||
34 | line-height: 17px; | 108 | line-height: 17px; |
35 | } | 109 | } |
36 | 110 | ||
37 | -#content .box-2 .link-list-block h3.empty + ul { | 111 | +.template-lefttopright #content .box-3 .link-list-block h3.empty + ul { |
38 | border-top: 1px solid #ddd; | 112 | border-top: 1px solid #ddd; |
39 | } | 113 | } |
40 | 114 | ||
41 | -#content .box-2 .link-list-block h3.empty + ul li a { | 115 | +.template-lefttopright #content .box-3 .link-list-block h3.empty + ul li a { |
42 | padding-left: 0px; | 116 | padding-left: 0px; |
43 | padding-right: 0px; | 117 | padding-right: 0px; |
44 | background-image: none; | 118 | background-image: none; |
45 | } | 119 | } |
46 | 120 | ||
47 | -#content .box-2 .link-list-block li a.link-this-page, | ||
48 | -#content .box-2 .link-list-block li a.link-this-page:hover { | 121 | +.template-lefttopright #content .box-3 .link-list-block li a.link-this-page, |
122 | +.template-lefttopright #content .box-3 .link-list-block li a.link-this-page:hover { | ||
49 | border-right: none; | 123 | border-right: none; |
50 | } | 124 | } |
51 | 125 | ||
52 | -#content .box-2 .link-list-block li a:hover { | 126 | +.template-lefttopright #content .box-3 .link-list-block li a:hover { |
53 | background-color: #FFFFFF; | 127 | background-color: #FFFFFF; |
54 | color: #000; | 128 | color: #000; |
55 | } | 129 | } |
56 | -#content .box-2 .link-list-block li a.link-this-page { | 130 | +.template-lefttopright #content .box-3 .link-list-block li a.link-this-page { |
57 | width: auto; | 131 | width: auto; |
58 | margin-left: 0px; | 132 | margin-left: 0px; |
59 | background-color: #ffffff; | 133 | background-color: #ffffff; |
60 | font-weight: bold; | 134 | font-weight: bold; |
61 | } | 135 | } |
62 | 136 | ||
137 | +/************ END OF DUPLICATE ************ | ||
138 | + | ||
139 | +/*** END OF WARNING - WITH BOX-4 ***/ | ||
140 | + | ||
63 | /*** Statistics block **/ | 141 | /*** Statistics block **/ |
142 | +.template-default #content .box-2 .statistics-block { | ||
143 | + padding: 10px 0px 10px 10px | ||
144 | +} | ||
145 | + | ||
64 | .statistics-block-data ul { | 146 | .statistics-block-data ul { |
65 | margin-top: 10px; | 147 | margin-top: 10px; |
66 | } | 148 | } |
@@ -83,6 +165,9 @@ span.amount { | @@ -83,6 +165,9 @@ span.amount { | ||
83 | span.label { | 165 | span.label { |
84 | font-size: 14px; | 166 | font-size: 14px; |
85 | } | 167 | } |
168 | + | ||
86 | /*** end of statistics block **/ | 169 | /*** end of statistics block **/ |
87 | 170 | ||
171 | +/*** WARNING - WITH BOX-4 ***/ | ||
172 | + | ||
88 | /******************** end Box-2 ********************/ | 173 | /******************** end Box-2 ********************/ |
css/news-page.css
@@ -2,18 +2,15 @@ | @@ -2,18 +2,15 @@ | ||
2 | 2 | ||
3 | /** Header's Block **/ | 3 | /** Header's Block **/ |
4 | #content .blog #article-header h1.title { | 4 | #content .blog #article-header h1.title { |
5 | - margin: 0px 0px 10px 0px; | ||
6 | - border: none; | ||
7 | - padding: 0px 0px 0px 0px; | ||
8 | - color: #FF0366; | ||
9 | - text-transform: uppercase; | ||
10 | - font: normal normal normal 16px/37px 'open_sansregular'; | 5 | + margin: 20px 0px 10px 0px; |
6 | + padding: 0px 0px 10px 0px; | ||
7 | + font: normal normal bold 35px/37px arial; | ||
11 | } | 8 | } |
12 | 9 | ||
13 | /* WARNING: | 10 | /* WARNING: |
14 | * This solution is TEMPORARY. This informations shouldn't exist | 11 | * This solution is TEMPORARY. This informations shouldn't exist |
15 | * in this area. | 12 | * in this area. |
16 | - * | 13 | + * |
17 | * TODO: Remove this informations of the html and, then, from here. | 14 | * TODO: Remove this informations of the html and, then, from here. |
18 | */ | 15 | */ |
19 | #content .blog #article-header .publishing-info .date, | 16 | #content .blog #article-header .publishing-info .date, |
@@ -63,7 +60,7 @@ | @@ -63,7 +60,7 @@ | ||
63 | /* WARNING: | 60 | /* WARNING: |
64 | * This solution is TEMPORARY. This informations shouldn't exist | 61 | * This solution is TEMPORARY. This informations shouldn't exist |
65 | * in this area. | 62 | * in this area. |
66 | - * | 63 | + * |
67 | * TODO: Remove this informations of the html and, then, from here. | 64 | * TODO: Remove this informations of the html and, then, from here. |
68 | */ | 65 | */ |
69 | #content .blog .blog-post .author { | 66 | #content .blog .blog-post .author { |
@@ -100,7 +97,7 @@ | @@ -100,7 +97,7 @@ | ||
100 | /* WARNING: | 97 | /* WARNING: |
101 | * This solution is TEMPORARY. This informations shouldn't exist | 98 | * This solution is TEMPORARY. This informations shouldn't exist |
102 | * in this area. | 99 | * in this area. |
103 | - * | 100 | + * |
104 | * TODO: Remove this informations of the html and, then, from here. | 101 | * TODO: Remove this informations of the html and, then, from here. |
105 | * The correct is the text is sensitive to lead to the complete text. | 102 | * The correct is the text is sensitive to lead to the complete text. |
106 | */ | 103 | */ |
@@ -142,9 +139,9 @@ | @@ -142,9 +139,9 @@ | ||
142 | #content .blog .page-1 .position-3, | 139 | #content .blog .page-1 .position-3, |
143 | #content .blog .page-1 .position-4 { | 140 | #content .blog .page-1 .position-4 { |
144 | margin: 0px 0px 0px 0px; | 141 | margin: 0px 0px 0px 0px; |
145 | - padding: 20px 30px 45px 0px; | 142 | + padding: 20px 21px 45px 0px; |
146 | height: 235px; | 143 | height: 235px; |
147 | - width: 30.5%; | 144 | + width: 30.5%; |
148 | display: block; | 145 | display: block; |
149 | float: left; | 146 | float: left; |
150 | } | 147 | } |
@@ -0,0 +1,191 @@ | @@ -0,0 +1,191 @@ | ||
1 | +.popover { | ||
2 | + position: absolute; | ||
3 | + top: 0; | ||
4 | + left: 0; | ||
5 | + z-index: 1060; | ||
6 | + display: none; | ||
7 | + max-width: 276px; | ||
8 | + padding: 1px; | ||
9 | + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
10 | + font-size: 14px; | ||
11 | + font-style: normal; | ||
12 | + font-weight: normal; | ||
13 | + line-height: 1.42857143; | ||
14 | + text-align: left; | ||
15 | + text-align: start; | ||
16 | + text-decoration: none; | ||
17 | + text-shadow: none; | ||
18 | + text-transform: none; | ||
19 | + letter-spacing: normal; | ||
20 | + word-break: normal; | ||
21 | + word-spacing: normal; | ||
22 | + word-wrap: normal; | ||
23 | + white-space: normal; | ||
24 | + background-color: #fff; | ||
25 | + -webkit-background-clip: padding-box; | ||
26 | + background-clip: padding-box; | ||
27 | + border: 1px solid #ccc; | ||
28 | + border: 1px solid rgba(0, 0, 0, .2); | ||
29 | + border-radius: 6px; | ||
30 | + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); | ||
31 | + box-shadow: 0 5px 10px rgba(0, 0, 0, .2); | ||
32 | + | ||
33 | + line-break: auto; | ||
34 | +} | ||
35 | +.popover.top { | ||
36 | + margin-top: -12px; | ||
37 | +} | ||
38 | +.popover.right { | ||
39 | + margin-left: 10px; | ||
40 | +} | ||
41 | +.popover.bottom { | ||
42 | + margin-top: 10px; | ||
43 | +} | ||
44 | +.popover.left { | ||
45 | + margin-left: -10px; | ||
46 | +} | ||
47 | +.popover-title { | ||
48 | + padding: 8px 14px; | ||
49 | + margin: 0; | ||
50 | + font-size: 14px; | ||
51 | + background-color: #f7f7f7; | ||
52 | + border-bottom: 1px solid #ebebeb; | ||
53 | + border-radius: 5px 5px 0 0; | ||
54 | +} | ||
55 | +.popover-content { | ||
56 | + padding: 9px 14px; | ||
57 | +} | ||
58 | +.popover > .arrow, | ||
59 | +.popover > .arrow:after { | ||
60 | + position: absolute; | ||
61 | + display: block; | ||
62 | + width: 0; | ||
63 | + height: 0; | ||
64 | + border-color: transparent; | ||
65 | + border-style: solid; | ||
66 | +} | ||
67 | +.popover > .arrow { | ||
68 | + border-width: 11px; | ||
69 | +} | ||
70 | +.popover > .arrow:after { | ||
71 | + content: ""; | ||
72 | + border-width: 10px; | ||
73 | +} | ||
74 | +.popover.top > .arrow { | ||
75 | + bottom: -11px; | ||
76 | + left: 50%; | ||
77 | + margin-left: -11px; | ||
78 | + border-top-color: #999; | ||
79 | + border-top-color: rgba(0, 0, 0, .25); | ||
80 | + border-bottom-width: 0; | ||
81 | +} | ||
82 | +.popover.top > .arrow:after { | ||
83 | + bottom: 1px; | ||
84 | + margin-left: -10px; | ||
85 | + content: " "; | ||
86 | + border-top-color: #fff; | ||
87 | + border-bottom-width: 0; | ||
88 | +} | ||
89 | +.popover.right > .arrow { | ||
90 | + top: 50%; | ||
91 | + left: -11px; | ||
92 | + margin-top: -11px; | ||
93 | + border-right-color: #999; | ||
94 | + border-right-color: rgba(0, 0, 0, .25); | ||
95 | + border-left-width: 0; | ||
96 | +} | ||
97 | +.popover.right > .arrow:after { | ||
98 | + bottom: -10px; | ||
99 | + left: 1px; | ||
100 | + content: " "; | ||
101 | + border-right-color: #fff; | ||
102 | + border-left-width: 0; | ||
103 | +} | ||
104 | +.popover.bottom > .arrow { | ||
105 | + top: -11px; | ||
106 | + left: 50%; | ||
107 | + margin-left: -11px; | ||
108 | + border-top-width: 0; | ||
109 | + border-bottom-color: #999; | ||
110 | + border-bottom-color: rgba(0, 0, 0, .25); | ||
111 | +} | ||
112 | +.popover.bottom > .arrow:after { | ||
113 | + top: 1px; | ||
114 | + margin-left: -10px; | ||
115 | + content: " "; | ||
116 | + border-top-width: 0; | ||
117 | + border-bottom-color: #fff; | ||
118 | +} | ||
119 | +.popover.left > .arrow { | ||
120 | + top: 50%; | ||
121 | + right: -11px; | ||
122 | + margin-top: -11px; | ||
123 | + border-right-width: 0; | ||
124 | + border-left-color: #999; | ||
125 | + border-left-color: rgba(0, 0, 0, .25); | ||
126 | +} | ||
127 | +.popover.left > .arrow:after { | ||
128 | + right: 1px; | ||
129 | + bottom: -10px; | ||
130 | + content: " "; | ||
131 | + border-right-width: 0; | ||
132 | + border-left-color: #fff; | ||
133 | +} | ||
134 | + | ||
135 | +/*** popover in software highlights block ***/ | ||
136 | + | ||
137 | +.highlights-popover { | ||
138 | + max-width: 280px; | ||
139 | + margin: 0 0 0 -75px; | ||
140 | + background: #172638; | ||
141 | + color: #FFFFFF; | ||
142 | +} | ||
143 | + | ||
144 | +.highlights-popover .popover-content { | ||
145 | + padding: 0; | ||
146 | +} | ||
147 | + | ||
148 | +.highlights-popover p { | ||
149 | + padding: 13px 13px 15px; | ||
150 | + margin: 0px; | ||
151 | + font-size: 14px; | ||
152 | + line-height: 20px; | ||
153 | +} | ||
154 | + | ||
155 | +.highlights-popover span { | ||
156 | + font-weight: bold; | ||
157 | + border-bottom: 1px dotted #FFFFFF; | ||
158 | +} | ||
159 | + | ||
160 | +#content .highlights-popover a, | ||
161 | +#content .highlights-popover a:visited, | ||
162 | +#content .highlights-popover a:hover, | ||
163 | +#content .highlights-popover a:link { | ||
164 | + font-weight: bold; | ||
165 | + color: #FFFFFF; | ||
166 | + display: block; | ||
167 | + padding: 8px 15px; | ||
168 | + border-top: 1px dotted rgba(255,255,255,0.1); | ||
169 | +} | ||
170 | + | ||
171 | +.highlights-popover a:before { | ||
172 | + font-family: "FontAwesome"; | ||
173 | + content: "\f067"; | ||
174 | + vertical-align: middle; | ||
175 | + color: #ff0066; | ||
176 | + padding: 0 5px 0 0; | ||
177 | +} | ||
178 | + | ||
179 | +.highlights-popover.top > .arrow, | ||
180 | +.highlights-popover.right > .arrow, | ||
181 | +.highlights-popover.bottom > .arrow, | ||
182 | +.highlights-popover.left > .arrow { | ||
183 | + margin-left: 64px; | ||
184 | +} | ||
185 | + | ||
186 | +.highlights-popover.top > .arrow:after, | ||
187 | +.highlights-popover.right > .arrow:after, | ||
188 | +.highlights-popover.bottom > .arrow:after, | ||
189 | +.highlights-popover.left > .arrow:after { | ||
190 | + border-top-color: #172638; | ||
191 | +} |
css/software-pages.css
@@ -50,7 +50,7 @@ | @@ -50,7 +50,7 @@ | ||
50 | } | 50 | } |
51 | 51 | ||
52 | #content .download-block .download-list li { | 52 | #content .download-block .download-list li { |
53 | - padding: 30px 10px 30px 10px; | 53 | + padding: 30px 10px 25px 10px; |
54 | border-top: 1px solid #D3D6DE; | 54 | border-top: 1px solid #D3D6DE; |
55 | clear: both; | 55 | clear: both; |
56 | } | 56 | } |
@@ -104,7 +104,7 @@ | @@ -104,7 +104,7 @@ | ||
104 | font-size: 12px; | 104 | font-size: 12px; |
105 | } | 105 | } |
106 | 106 | ||
107 | -#content .download-block .download-info .req_min_spb a { | 107 | +#content .download-block .download-info .min-requirements a { |
108 | line-height: 40px; | 108 | line-height: 40px; |
109 | color: #3E67B1; | 109 | color: #3E67B1; |
110 | text-decoration: underline; | 110 | text-decoration: underline; |
@@ -180,7 +180,6 @@ | @@ -180,7 +180,6 @@ | ||
180 | } | 180 | } |
181 | 181 | ||
182 | #content .box-1 .categories-and-tags-block .block-title { | 182 | #content .box-1 .categories-and-tags-block .block-title { |
183 | - display: inline-flex; | ||
184 | margin: 13px 10px 10px 0; | 183 | margin: 13px 10px 10px 0; |
185 | padding: 3px 0px; | 184 | padding: 3px 0px; |
186 | background: none; | 185 | background: none; |
@@ -188,16 +187,18 @@ | @@ -188,16 +187,18 @@ | ||
188 | font-family: Arial; | 187 | font-family: Arial; |
189 | font-size: 12px; | 188 | font-size: 12px; |
190 | font-weight: 300; | 189 | font-weight: 300; |
190 | + float: left; | ||
191 | } | 191 | } |
192 | 192 | ||
193 | #content .box-1 .categories-and-tags-block .category_cloud { | 193 | #content .box-1 .categories-and-tags-block .category_cloud { |
194 | - margin: 13px 10px 10px 0px; | ||
195 | - display: inline-flex; | 194 | + margin: 13px 0 10px 0; |
195 | + float: left; | ||
196 | + max-width: 87%; | ||
196 | } | 197 | } |
197 | 198 | ||
198 | #content .box-1 .categories-and-tags-block .category_cloud a { | 199 | #content .box-1 .categories-and-tags-block .category_cloud a { |
199 | padding: 3px 10px; | 200 | padding: 3px 10px; |
200 | - margin: 0; | 201 | + margin: 5px; |
201 | float: left; | 202 | float: left; |
202 | color: #3E67B1; | 203 | color: #3E67B1; |
203 | background-color: #ECEDF1; | 204 | background-color: #ECEDF1; |
@@ -220,22 +221,123 @@ | @@ -220,22 +221,123 @@ | ||
220 | 221 | ||
221 | /*** Right bar ***/ | 222 | /*** Right bar ***/ |
222 | 223 | ||
224 | +/*** WARNING - WHITOUT BOX-4 ***/ | ||
225 | + | ||
226 | +/* Link-list block */ | ||
227 | +.template-default #content .box-3 .block-title { | ||
228 | + border-top: 4px solid #4562b1; | ||
229 | + line-height: 15px; | ||
230 | + background: #eee; | ||
231 | + color: #4562b1; | ||
232 | +} | ||
233 | + | ||
234 | +.template-default #content .box-3 .link-list-block li { | ||
235 | + margin: 0px; | ||
236 | + padding: 0px; | ||
237 | + border-bottom: 1px solid #ddd; | ||
238 | + border-top: none; | ||
239 | +} | ||
240 | + | ||
241 | +.template-default #content .box-3 .link-list-block li a { | ||
242 | + border-right: none; | ||
243 | + border-top: 0px solid #64946E; | ||
244 | + border-radius: 0px 0px 0px 0px; | ||
245 | + padding: 6px 5px 8px 18px; | ||
246 | + width: auto; | ||
247 | + line-height: 17px; | ||
248 | + background-color: #fff; | ||
249 | + background-position: 0px 50%; | ||
250 | + color: #2C66CE; | ||
251 | + font-weight: normal; | ||
252 | + font-size: 14px; | ||
253 | +} | ||
254 | + | ||
255 | +.template-default #content .box-3 .link-list-block h3.empty + ul { | ||
256 | + border-top: 1px solid #ddd; | ||
257 | +} | ||
258 | + | ||
259 | +.template-default #content .box-3 .link-list-block li a.link-this-page, | ||
260 | +.template-default #content .box-3 .link-list-block li a.link-this-page:hover { | ||
261 | + border-right: none; | ||
262 | +} | ||
263 | + | ||
264 | +.template-default #content .box-3 .link-list-block li a:hover { | ||
265 | + background-color: #FFFFFF; | ||
266 | + color: #000; | ||
267 | +} | ||
268 | + | ||
269 | +.template-default #content .box-3 .link-list-block li a.link-this-page { | ||
270 | + margin-left: 0px; | ||
271 | + width: auto; | ||
272 | + background-color: #ffffff; | ||
273 | + font-weight: bold; | ||
274 | +} | ||
275 | + | ||
276 | +/* Repository block */ | ||
277 | +.template-default .box-3 #bt_repositorio, | ||
278 | +.template-default .box-3 #bt_repositorio:active, | ||
279 | +.template-default .box-3 #bt_repositorio:visited { | ||
280 | + border-radius: 4px; | ||
281 | + padding: 12px 10px; | ||
282 | + background: #EAEBEE; | ||
283 | + font: normal normal bold 12px 'open_sansbold', arial, helvetica, sans-serif; | ||
284 | + text-transform: uppercase; | ||
285 | + display: block; | ||
286 | + position: relative; | ||
287 | +} | ||
288 | + | ||
289 | +.template-default .box-3 #bt_repositorio::after { | ||
290 | + margin-top: -2px; | ||
291 | + padding: 4px 0px 4px 2px; | ||
292 | + border-radius: 4px; | ||
293 | + width: 18px; | ||
294 | + right: 10px; | ||
295 | + line-height: 20px; | ||
296 | + position: absolute; | ||
297 | + background: #2C66CE; | ||
298 | + color: #FFF; | ||
299 | + font-size: 16px; | ||
300 | + text-align: center; | ||
301 | + content: url('../images/right-arrow.png'); | ||
302 | +} | ||
303 | + | ||
304 | +.template-default .box-3 #content #bt_repositorio:hover { | ||
305 | + color: #FFF; | ||
306 | + background: #2C66CE; | ||
307 | + text-decoration: none; | ||
308 | +} | ||
309 | +/*** END - WARNING - WHITOUT BOX-4 ***/ | ||
310 | + | ||
311 | +/*** end of right bar ***/ | ||
312 | + | ||
313 | +/************ DUPLICATE ************/ | ||
314 | + | ||
315 | +/* | ||
316 | + This part of the code is duplicated because, if there is | ||
317 | + a change of layout from template-default to lefttopright | ||
318 | + the CSS fit without many complication. | ||
319 | + */ | ||
320 | + | ||
321 | +/*** Right bar ***/ | ||
322 | + | ||
323 | +/*** WARNING - WITH BOX-4 ***/ | ||
324 | + | ||
223 | /* Link-list block */ | 325 | /* Link-list block */ |
224 | -#content .box-3 .block-title { | 326 | +.template-lefttopright #content .box-2 .block-title { |
225 | border-top: 4px solid #4562b1; | 327 | border-top: 4px solid #4562b1; |
226 | line-height: 15px; | 328 | line-height: 15px; |
227 | background: #eee; | 329 | background: #eee; |
228 | color: #4562b1; | 330 | color: #4562b1; |
229 | } | 331 | } |
230 | 332 | ||
231 | -#content .box-3 .link-list-block li { | 333 | +.template-lefttopright #content .box-2 .link-list-block li { |
232 | margin: 0px; | 334 | margin: 0px; |
233 | padding: 0px; | 335 | padding: 0px; |
234 | border-bottom: 1px solid #ddd; | 336 | border-bottom: 1px solid #ddd; |
235 | border-top: none; | 337 | border-top: none; |
236 | } | 338 | } |
237 | 339 | ||
238 | -#content .box-3 .link-list-block li a { | 340 | +.template-lefttopright #content .box-2 .link-list-block li a { |
239 | border-right: none; | 341 | border-right: none; |
240 | border-top: 0px solid #64946E; | 342 | border-top: 0px solid #64946E; |
241 | border-radius: 0px 0px 0px 0px; | 343 | border-radius: 0px 0px 0px 0px; |
@@ -249,21 +351,21 @@ | @@ -249,21 +351,21 @@ | ||
249 | font-size: 14px; | 351 | font-size: 14px; |
250 | } | 352 | } |
251 | 353 | ||
252 | -#content .box-3 .link-list-block h3.empty + ul { | 354 | +.template-lefttopright #content .box-2 .link-list-block h3.empty + ul { |
253 | border-top: 1px solid #ddd; | 355 | border-top: 1px solid #ddd; |
254 | } | 356 | } |
255 | 357 | ||
256 | -#content .box-3 .link-list-block li a.link-this-page, | ||
257 | -#content .box-3 .link-list-block li a.link-this-page:hover { | 358 | +.template-lefttopright #content .box-2 .link-list-block li a.link-this-page, |
359 | +.template-lefttopright #content .box-2 .link-list-block li a.link-this-page:hover { | ||
258 | border-right: none; | 360 | border-right: none; |
259 | } | 361 | } |
260 | 362 | ||
261 | -#content .box-3 .link-list-block li a:hover { | 363 | +.template-lefttopright #content .box-2 .link-list-block li a:hover { |
262 | background-color: #FFFFFF; | 364 | background-color: #FFFFFF; |
263 | color: #000; | 365 | color: #000; |
264 | } | 366 | } |
265 | 367 | ||
266 | -#content .box-3 .link-list-block li a.link-this-page { | 368 | +.template-lefttopright #content .box-2 .link-list-block li a.link-this-page { |
267 | margin-left: 0px; | 369 | margin-left: 0px; |
268 | width: auto; | 370 | width: auto; |
269 | background-color: #ffffff; | 371 | background-color: #ffffff; |
@@ -271,9 +373,9 @@ | @@ -271,9 +373,9 @@ | ||
271 | } | 373 | } |
272 | 374 | ||
273 | /* Repository block */ | 375 | /* Repository block */ |
274 | -.box-3 #bt_repositorio, | ||
275 | -.box-3 #bt_repositorio:active, | ||
276 | -.box-3 #bt_repositorio:visited { | 376 | +.template-lefttopright .box-2 #bt_repositorio, |
377 | +.template-lefttopright .box-2 #bt_repositorio:active, | ||
378 | +.template-lefttopright .box-2 #bt_repositorio:visited { | ||
277 | border-radius: 4px; | 379 | border-radius: 4px; |
278 | padding: 12px 10px; | 380 | padding: 12px 10px; |
279 | background: #EAEBEE; | 381 | background: #EAEBEE; |
@@ -283,7 +385,7 @@ | @@ -283,7 +385,7 @@ | ||
283 | position: relative; | 385 | position: relative; |
284 | } | 386 | } |
285 | 387 | ||
286 | -.box-3 #bt_repositorio::after { | 388 | +.template-lefttopright .box-2 #bt_repositorio::after { |
287 | margin-top: -2px; | 389 | margin-top: -2px; |
288 | padding: 4px 0px 4px 2px; | 390 | padding: 4px 0px 4px 2px; |
289 | border-radius: 4px; | 391 | border-radius: 4px; |
@@ -298,13 +400,19 @@ | @@ -298,13 +400,19 @@ | ||
298 | content: url('../images/right-arrow.png'); | 400 | content: url('../images/right-arrow.png'); |
299 | } | 401 | } |
300 | 402 | ||
301 | -.box-3 #content #bt_repositorio:hover { | 403 | +.template-lefttopright .box-2 #content #bt_repositorio:hover { |
302 | color: #FFF; | 404 | color: #FFF; |
303 | background: #2C66CE; | 405 | background: #2C66CE; |
304 | text-decoration: none; | 406 | text-decoration: none; |
305 | } | 407 | } |
408 | + | ||
409 | +/*** WARNING - WITH BOX-4 ***/ | ||
410 | + | ||
306 | /*** end of right bar ***/ | 411 | /*** end of right bar ***/ |
307 | 412 | ||
413 | +/************ END DUPLICATE ************/ | ||
414 | + | ||
415 | + | ||
308 | /*** Software internal pages ***/ | 416 | /*** Software internal pages ***/ |
309 | 417 | ||
310 | /* FAQ page */ | 418 | /* FAQ page */ |
footer.html.erb
@@ -120,4 +120,4 @@ | @@ -120,4 +120,4 @@ | ||
120 | 120 | ||
121 | <!-- Script do portal Brasil deve ficar preferencialmente no rodape para nao atrasar o carregamento da pagina principal --> | 121 | <!-- Script do portal Brasil deve ficar preferencialmente no rodape para nao atrasar o carregamento da pagina principal --> |
122 | <script src="http://barra.brasil.gov.br/barra.js?cor=verde" type="text/javascript"></script><noscript> <!-- item para fins de acessibilidade --></noscript> | 122 | <script src="http://barra.brasil.gov.br/barra.js?cor=verde" type="text/javascript"></script><noscript> <!-- item para fins de acessibilidade --></noscript> |
123 | - | 123 | + <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> |
style.css
@@ -19,11 +19,11 @@ | @@ -19,11 +19,11 @@ | ||
19 | @import url(css/article-page.css); | 19 | @import url(css/article-page.css); |
20 | @import url(css/software-pages.css); | 20 | @import url(css/software-pages.css); |
21 | @import url(css/community-pages.css); | 21 | @import url(css/community-pages.css); |
22 | -@import url(css/use-report.css); | ||
23 | @import url(css/news-page.css); | 22 | @import url(css/news-page.css); |
24 | @import url(css/search-pages.css); | 23 | @import url(css/search-pages.css); |
25 | @import url(css/software-catalog-page.css); | 24 | @import url(css/software-catalog-page.css); |
26 | @import url(css/tooltip.css); | 25 | @import url(css/tooltip.css); |
26 | +@import url(css/popover.css); | ||
27 | 27 | ||
28 | @font-face{ | 28 | @font-face{ |
29 | font-weight: normal; | 29 | font-weight: normal; |
theme.js
@@ -250,11 +250,31 @@ $('#link-buscar').click(function(e) { | @@ -250,11 +250,31 @@ $('#link-buscar').click(function(e) { | ||
250 | }); | 250 | }); |
251 | } | 251 | } |
252 | 252 | ||
253 | - $(document).ready(function(){ | 253 | + function add_popovers() { |
254 | + var span = $('span[data-toggle="popover"]'); | ||
255 | + var place = span.attr("data-placement"); | ||
256 | + var elementClass = span.attr("data-class"); | ||
257 | + var popover = span.popover({ | ||
258 | + html:true, | ||
259 | + placement: place, | ||
260 | + content: function() { | ||
261 | + return $(this).next().html(); | ||
262 | + } | ||
263 | + }) | ||
264 | + .data('bs.popover'); | ||
265 | + if(popover) { | ||
266 | + popover.tip() | ||
267 | + .addClass(elementClass); | ||
268 | + $('a.toggle-popover').on("click",function() { | ||
269 | + span.trigger("click"); | ||
270 | + }); | ||
271 | + } | ||
272 | + } | ||
254 | 273 | ||
274 | + $(document).ready(function(){ | ||
275 | + add_popovers(); | ||
255 | add_top_tooltips(); | 276 | add_top_tooltips(); |
256 | move_article_buttons(); | 277 | move_article_buttons(); |
257 | - add_link_to_article_div(); | ||
258 | insert_notice_div(); | 278 | insert_notice_div(); |
259 | set_uploaded_files_names(); | 279 | set_uploaded_files_names(); |
260 | set_tooltip_content(); | 280 | set_tooltip_content(); |
@@ -263,4 +283,3 @@ $('#link-buscar').click(function(e) { | @@ -263,4 +283,3 @@ $('#link-buscar').click(function(e) { | ||
263 | setEvents(); | 283 | setEvents(); |
264 | }); | 284 | }); |
265 | })(jQuery); | 285 | })(jQuery); |
266 | - |