// Pass each benefit's head text (by default a number) as a parameter to the body's message for PLURAL handling.
$headUnescaped = $this->getMsg( "createacct-benefit-head$benefitIdx" )->text();
?>
- <div>
- <div class="mw-benefits-icon <?php $this->msg( "createacct-benefit-icon$benefitIdx" ); ?>"></div>
- <div class="mw-number-text">
- <h3><?php $this->msg( "createacct-benefit-head$benefitIdx" ); ?></h3>
- <p><?php echo $this->getMsg( "createacct-benefit-body$benefitIdx" )->params( $headUnescaped )->escaped(); ?></p>
- </div>
+ <div class="mw-number-text <?php $this->msg( "createacct-benefit-icon$benefitIdx" ); ?>">
+ <h3><?php $this->msg( "createacct-benefit-head$benefitIdx" ); ?></h3>
+ <p><?php echo $this->getMsg( "createacct-benefit-body$benefitIdx" )->params( $headUnescaped )->escaped(); ?></p>
</div>
<?php
}
}
div.mw-createacct-benefits-container {
- float: left
+ /* Keeps this column compact and close to the form, but tends to squish contents. */
+ float: left;
}
div.mw-createacct-benefits-container h2 {
margin-bottom: 30px;
}
-div.mw-benefits-icon {
- display: inline-block;
- padding: 0;
- float: left;
- width: 80px;
- height: 75px;
- margin-right: 15px;
- border: 0;
-}
-
-.mw-benefits-icon.icon-edits {
+.mw-number-text.icon-edits {
/* @embed */
- background: url(images/icon-edits.png) no-repeat right;
+ background: url(images/icon-edits.png) no-repeat left center;
}
-.mw-benefits-icon.icon-pages {
+.mw-number-text.icon-pages {
/* @embed */
- background: url(images/icon-pages.png) no-repeat right;
+ background: url(images/icon-pages.png) no-repeat left center;
}
-.mw-benefits-icon.icon-contributors {
+.mw-number-text.icon-contributors {
/* @embed */
- background: url(images/icon-contributors.png) no-repeat right;
+ background: url(images/icon-contributors.png) no-repeat left center;
}
/* Special font for numbers in benefits*/
text-align: center;
}
+/* Contains a number and explanatory text, with space for an icon */
div.mw-number-text {
display: block;
font-size: 1.2em;
color: #444;
margin-top: 1em;
+ padding: 0 0 0 95px; /* 80px wide icon plus "margin" */
+ min-height: 75px; /* matches max icon height, ensures icon emblem is visible */
text-align: center;
}