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 | - |