Commit 6c3ab5003aba45f71f30da8a0fb2bf43eca65415
1 parent
7b948eb9
Adding popover to home page
Showing
2 changed files
with
56 additions
and
29 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; |
| @@ -303,8 +303,8 @@ | @@ -303,8 +303,8 @@ | ||
| 303 | font: 15px/1.3em arial; | 303 | font: 15px/1.3em arial; |
| 304 | } | 304 | } |
| 305 | 305 | ||
| 306 | -.action-home-index #content .display-content-block .lead a:visited, | ||
| 307 | -.action-home-index #content .lead a:visited, | 306 | +.action-home-index #content .display-content-block .lead a:visited, |
| 307 | +.action-home-index #content .lead a:visited, | ||
| 308 | .action-home-index #content .lead dl.portlet a:visited { | 308 | .action-home-index #content .lead dl.portlet a:visited { |
| 309 | color: #172738; | 309 | color: #172738; |
| 310 | } | 310 | } |
| @@ -372,7 +372,7 @@ | @@ -372,7 +372,7 @@ | ||
| 372 | 372 | ||
| 373 | .action-home-index #content .highlights-border { | 373 | .action-home-index #content .highlights-border { |
| 374 | border: 1px solid #c0c1c1; | 374 | border: 1px solid #c0c1c1; |
| 375 | - border-radius: 8px 8px 8px 8px; | 375 | + border-radius: 8px; |
| 376 | width: auto; | 376 | width: auto; |
| 377 | height: 248px; | 377 | height: 248px; |
| 378 | max-height: 250px; | 378 | max-height: 250px; |
| @@ -385,15 +385,15 @@ | @@ -385,15 +385,15 @@ | ||
| 385 | } | 385 | } |
| 386 | 386 | ||
| 387 | .action-home-index #content .highlights-container { | 387 | .action-home-index #content .highlights-container { |
| 388 | - border-radius: 8px 8px 8px 8px; | 388 | + border-radius: 8px; |
| 389 | border-width: 0px 0px 1px 0px; | 389 | border-width: 0px 0px 1px 0px; |
| 390 | border-bottom: none; | 390 | border-bottom: none; |
| 391 | - padding: 0px 0px 0px 0px; | 391 | + padding: 0; |
| 392 | width: 100% !important; | 392 | width: 100% !important; |
| 393 | max-height: 230px; | 393 | max-height: 230px; |
| 394 | background: transparent; | 394 | background: transparent; |
| 395 | position: relative; | 395 | position: relative; |
| 396 | - top: 0px; | 396 | + top: 0; |
| 397 | } | 397 | } |
| 398 | 398 | ||
| 399 | .action-home-index #content .highlights-image-link { | 399 | .action-home-index #content .highlights-image-link { |
| @@ -423,11 +423,9 @@ | @@ -423,11 +423,9 @@ | ||
| 423 | } | 423 | } |
| 424 | 424 | ||
| 425 | .action-home-index #content .highlights-block-pager { | 425 | .action-home-index #content .highlights-block-pager { |
| 426 | - border: 0; | ||
| 427 | - padding: 0px 0px 0px 0px; | ||
| 428 | - width: 232px; | ||
| 429 | - float: left; | ||
| 430 | - position: static; | 426 | + float: none; |
| 427 | + display: block; | ||
| 428 | + text-align: center; | ||
| 431 | } | 429 | } |
| 432 | 430 | ||
| 433 | .action-home-index #content .highlights-block-pager a { | 431 | .action-home-index #content .highlights-block-pager a { |
| @@ -449,6 +447,24 @@ | @@ -449,6 +447,24 @@ | ||
| 449 | color: transparent; | 447 | color: transparent; |
| 450 | } | 448 | } |
| 451 | 449 | ||
| 450 | +/*** software highlights block ***/ | ||
| 451 | + | ||
| 452 | +.action-home-index #content a.toggle-popover, | ||
| 453 | +.action-home-index #content a.toggle-popover:hover { | ||
| 454 | + margin: 0 0 0 55px; | ||
| 455 | + color: #3867b7; | ||
| 456 | + cursor: pointer; | ||
| 457 | +} | ||
| 458 | + | ||
| 459 | +.action-home-index #content span.popover-span { | ||
| 460 | + padding: 1px 6px; | ||
| 461 | + border-radius: 50%; | ||
| 462 | + background-color: #3867b7; | ||
| 463 | + color: #ffffff; | ||
| 464 | + font-weight: bold; | ||
| 465 | + cursor: pointer; | ||
| 466 | +} | ||
| 467 | + | ||
| 452 | /*** mais software block **/ | 468 | /*** mais software block **/ |
| 453 | .action-home-index #content #mais-software-block { | 469 | .action-home-index #content #mais-software-block { |
| 454 | margin: 11px 0px; | 470 | margin: 11px 0px; |
css/popover.css
| @@ -33,7 +33,7 @@ | @@ -33,7 +33,7 @@ | ||
| 33 | line-break: auto; | 33 | line-break: auto; |
| 34 | } | 34 | } |
| 35 | .popover.top { | 35 | .popover.top { |
| 36 | - margin-top: -10px; | 36 | + margin-top: -12px; |
| 37 | } | 37 | } |
| 38 | .popover.right { | 38 | .popover.right { |
| 39 | margin-left: 10px; | 39 | margin-left: 10px; |
| @@ -133,41 +133,52 @@ | @@ -133,41 +133,52 @@ | ||
| 133 | } | 133 | } |
| 134 | 134 | ||
| 135 | .highlights-popover { | 135 | .highlights-popover { |
| 136 | - width: 300px; | ||
| 137 | - padding: 8px 6px; | 136 | + max-width: 280px; |
| 137 | + margin: 0 0 0 -75px; | ||
| 138 | background: #172638; | 138 | background: #172638; |
| 139 | color: #FFFFFF; | 139 | color: #FFFFFF; |
| 140 | } | 140 | } |
| 141 | 141 | ||
| 142 | +.highlights-popover .popover-content { | ||
| 143 | + padding: 0; | ||
| 144 | +} | ||
| 145 | + | ||
| 142 | .highlights-popover p { | 146 | .highlights-popover p { |
| 147 | + padding: 13px 13px 15px; | ||
| 148 | + margin: 0px; | ||
| 143 | font-size: 14px; | 149 | font-size: 14px; |
| 150 | + line-height: 20px; | ||
| 144 | } | 151 | } |
| 145 | - | 152 | + |
| 146 | .highlights-popover span { | 153 | .highlights-popover span { |
| 147 | font-weight: bold; | 154 | font-weight: bold; |
| 148 | - border-bottom: 2px dotted #FFFFFF; | 155 | + border-bottom: 1px dotted #FFFFFF; |
| 149 | } | 156 | } |
| 150 | 157 | ||
| 151 | #content .highlights-popover a, | 158 | #content .highlights-popover a, |
| 152 | #content .highlights-popover a:visited, | 159 | #content .highlights-popover a:visited, |
| 153 | -#content .highlights-popover a:hover { | 160 | +#content .highlights-popover a:hover, |
| 161 | +#content .highlights-popover a:link { | ||
| 154 | font-weight: bold; | 162 | font-weight: bold; |
| 155 | color: #FFFFFF; | 163 | color: #FFFFFF; |
| 164 | + display: block; | ||
| 165 | + padding: 8px 15px; | ||
| 166 | + border-top: 1px dotted rgba(255,255,255,0.1); | ||
| 156 | } | 167 | } |
| 157 | 168 | ||
| 158 | .highlights-popover a:before { | 169 | .highlights-popover a:before { |
| 159 | - content: ""; | ||
| 160 | - background: | ||
| 161 | - linear-gradient( to bottom, | ||
| 162 | - transparent 35%, #FF0066 35%, #FF0066 65%, transparent 65%), | ||
| 163 | - linear-gradient( to right, | ||
| 164 | - transparent 35%, #FF0066 35%, #FF0066 65%, transparent 65%); | ||
| 165 | - margin: 5px; | ||
| 166 | - padding: 0 8px; | 170 | + font-family: "FontAwesome"; |
| 171 | + content: "\f067"; | ||
| 172 | + vertical-align: middle; | ||
| 173 | + color: #ff0066; | ||
| 174 | + padding: 0 5px 0 0; | ||
| 167 | } | 175 | } |
| 168 | 176 | ||
| 169 | -.highlights-popover .popover-content { | ||
| 170 | - padding: 9px 12px; | 177 | +.highlights-popover.top > .arrow, |
| 178 | +.highlights-popover.right > .arrow, | ||
| 179 | +.highlights-popover.bottom > .arrow, | ||
| 180 | +.highlights-popover.left > .arrow { | ||
| 181 | + margin-left: 64px; | ||
| 171 | } | 182 | } |
| 172 | 183 | ||
| 173 | .highlights-popover.top > .arrow:after, | 184 | .highlights-popover.top > .arrow:after, |