Commit 90ad6b04a9fc7986c045064456b7521c2a35a31e
1 parent
f5159b93
Exists in
master
and in
79 other branches
Adding popover to home page
Showing
2 changed files
with
58 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; |
| @@ -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 | } |
| @@ -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/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; |
| @@ -132,42 +132,55 @@ | @@ -132,42 +132,55 @@ | ||
| 132 | border-left-color: #fff; | 132 | border-left-color: #fff; |
| 133 | } | 133 | } |
| 134 | 134 | ||
| 135 | +/*** popover in software highlights block ***/ | ||
| 136 | + | ||
| 135 | .highlights-popover { | 137 | .highlights-popover { |
| 136 | - width: 300px; | ||
| 137 | - padding: 8px 6px; | 138 | + max-width: 280px; |
| 139 | + margin: 0 0 0 -75px; | ||
| 138 | background: #172638; | 140 | background: #172638; |
| 139 | color: #FFFFFF; | 141 | color: #FFFFFF; |
| 140 | } | 142 | } |
| 141 | 143 | ||
| 144 | +.highlights-popover .popover-content { | ||
| 145 | + padding: 0; | ||
| 146 | +} | ||
| 147 | + | ||
| 142 | .highlights-popover p { | 148 | .highlights-popover p { |
| 149 | + padding: 13px 13px 15px; | ||
| 150 | + margin: 0px; | ||
| 143 | font-size: 14px; | 151 | font-size: 14px; |
| 152 | + line-height: 20px; | ||
| 144 | } | 153 | } |
| 145 | - | 154 | + |
| 146 | .highlights-popover span { | 155 | .highlights-popover span { |
| 147 | font-weight: bold; | 156 | font-weight: bold; |
| 148 | - border-bottom: 2px dotted #FFFFFF; | 157 | + border-bottom: 1px dotted #FFFFFF; |
| 149 | } | 158 | } |
| 150 | 159 | ||
| 151 | #content .highlights-popover a, | 160 | #content .highlights-popover a, |
| 152 | #content .highlights-popover a:visited, | 161 | #content .highlights-popover a:visited, |
| 153 | -#content .highlights-popover a:hover { | 162 | +#content .highlights-popover a:hover, |
| 163 | +#content .highlights-popover a:link { | ||
| 154 | font-weight: bold; | 164 | font-weight: bold; |
| 155 | color: #FFFFFF; | 165 | color: #FFFFFF; |
| 166 | + display: block; | ||
| 167 | + padding: 8px 15px; | ||
| 168 | + border-top: 1px dotted rgba(255,255,255,0.1); | ||
| 156 | } | 169 | } |
| 157 | 170 | ||
| 158 | .highlights-popover a:before { | 171 | .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; | 172 | + font-family: "FontAwesome"; |
| 173 | + content: "\f067"; | ||
| 174 | + vertical-align: middle; | ||
| 175 | + color: #ff0066; | ||
| 176 | + padding: 0 5px 0 0; | ||
| 167 | } | 177 | } |
| 168 | 178 | ||
| 169 | -.highlights-popover .popover-content { | ||
| 170 | - padding: 9px 12px; | 179 | +.highlights-popover.top > .arrow, |
| 180 | +.highlights-popover.right > .arrow, | ||
| 181 | +.highlights-popover.bottom > .arrow, | ||
| 182 | +.highlights-popover.left > .arrow { | ||
| 183 | + margin-left: 64px; | ||
| 171 | } | 184 | } |
| 172 | 185 | ||
| 173 | .highlights-popover.top > .arrow:after, | 186 | .highlights-popover.top > .arrow:after, |