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 | 148 | display:none; |
149 | 149 | } |
150 | 150 | |
151 | -.action-home-index #content .software-block { | |
151 | +.action-home-index #content .software-block { | |
152 | 152 | width: 145px; |
153 | 153 | height: 218px; |
154 | 154 | margin: 0px 18px 14px 0px; |
... | ... | @@ -236,7 +236,7 @@ |
236 | 236 | /*** News block - display content block **/ |
237 | 237 | |
238 | 238 | .action-home-index #content .display-content-block .block-title { |
239 | - margin: 0px; | |
239 | + margin: 0px; | |
240 | 240 | border-top: 4px solid #643C67; |
241 | 241 | background: #eee; |
242 | 242 | color: #643C67; |
... | ... | @@ -302,8 +302,8 @@ |
302 | 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 | 307 | .action-home-index #content .lead dl.portlet a:visited { |
308 | 308 | color: #172738; |
309 | 309 | } |
... | ... | @@ -371,7 +371,7 @@ |
371 | 371 | |
372 | 372 | .action-home-index #content .highlights-border { |
373 | 373 | border: 1px solid #c0c1c1; |
374 | - border-radius: 8px 8px 8px 8px; | |
374 | + border-radius: 8px; | |
375 | 375 | width: auto; |
376 | 376 | height: 248px; |
377 | 377 | max-height: 250px; |
... | ... | @@ -384,15 +384,15 @@ |
384 | 384 | } |
385 | 385 | |
386 | 386 | .action-home-index #content .highlights-container { |
387 | - border-radius: 8px 8px 8px 8px; | |
387 | + border-radius: 8px; | |
388 | 388 | border-width: 0px 0px 1px 0px; |
389 | 389 | border-bottom: none; |
390 | - padding: 0px 0px 0px 0px; | |
390 | + padding: 0; | |
391 | 391 | width: 100% !important; |
392 | 392 | max-height: 230px; |
393 | 393 | background: transparent; |
394 | 394 | position: relative; |
395 | - top: 0px; | |
395 | + top: 0; | |
396 | 396 | } |
397 | 397 | |
398 | 398 | .action-home-index #content .highlights-image-link { |
... | ... | @@ -422,11 +422,9 @@ |
422 | 422 | } |
423 | 423 | |
424 | 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 | 430 | .action-home-index #content .highlights-block-pager a { |
... | ... | @@ -448,6 +446,24 @@ |
448 | 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 | 467 | /*** mais software block **/ |
452 | 468 | .action-home-index #content #mais-software-block { |
453 | 469 | margin: 11px 0px; | ... | ... |
css/popover.css
... | ... | @@ -33,7 +33,7 @@ |
33 | 33 | line-break: auto; |
34 | 34 | } |
35 | 35 | .popover.top { |
36 | - margin-top: -10px; | |
36 | + margin-top: -12px; | |
37 | 37 | } |
38 | 38 | .popover.right { |
39 | 39 | margin-left: 10px; |
... | ... | @@ -132,42 +132,55 @@ |
132 | 132 | border-left-color: #fff; |
133 | 133 | } |
134 | 134 | |
135 | +/*** popover in software highlights block ***/ | |
136 | + | |
135 | 137 | .highlights-popover { |
136 | - width: 300px; | |
137 | - padding: 8px 6px; | |
138 | + max-width: 280px; | |
139 | + margin: 0 0 0 -75px; | |
138 | 140 | background: #172638; |
139 | 141 | color: #FFFFFF; |
140 | 142 | } |
141 | 143 | |
144 | +.highlights-popover .popover-content { | |
145 | + padding: 0; | |
146 | +} | |
147 | + | |
142 | 148 | .highlights-popover p { |
149 | + padding: 13px 13px 15px; | |
150 | + margin: 0px; | |
143 | 151 | font-size: 14px; |
152 | + line-height: 20px; | |
144 | 153 | } |
145 | - | |
154 | + | |
146 | 155 | .highlights-popover span { |
147 | 156 | font-weight: bold; |
148 | - border-bottom: 2px dotted #FFFFFF; | |
157 | + border-bottom: 1px dotted #FFFFFF; | |
149 | 158 | } |
150 | 159 | |
151 | 160 | #content .highlights-popover a, |
152 | 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 | 164 | font-weight: bold; |
155 | 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 | 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 | 186 | .highlights-popover.top > .arrow:after, | ... | ... |