<h3<?php $this->html( 'userlangattributes' ) ?>><label for="searchInput"><?php $this->msg( 'search' ) ?></label></h3>
<form action="<?php $this->text( 'wgScript' ) ?>" id="searchform">
<?php if ( $wgVectorUseSimpleSearch && $this->getSkin()->getUser()->getOption( 'vector-simplesearch' ) ) { ?>
- <div id="simpleSearch">
- <?php if ( $this->data['rtl'] ) { ?>
- <?php echo $this->makeSearchButton( 'image', array( 'id' => 'searchButton', 'src' => $this->getSkin()->getSkinStylePath( 'images/search-rtl.png' ), 'width' => '12', 'height' => '13' ) ); ?>
- <?php } ?>
- <?php echo $this->makeSearchInput( array( 'id' => 'searchInput', 'type' => 'text' ) ); ?>
- <?php if ( !$this->data['rtl'] ) { ?>
- <?php echo $this->makeSearchButton( 'image', array( 'id' => 'searchButton', 'src' => $this->getSkin()->getSkinStylePath( 'images/search-ltr.png' ), 'width' => '12', 'height' => '13' ) ); ?>
- <?php } ?>
+ <div id="simpleSearch">
<?php } else { ?>
- <div>
- <?php echo $this->makeSearchInput( array( 'id' => 'searchInput' ) ); ?>
- <?php echo $this->makeSearchButton( 'go', array( 'id' => 'searchGoButton', 'class' => 'searchButton' ) ); ?>
- <?php echo $this->makeSearchButton( 'fulltext', array( 'id' => 'mw-searchButton', 'class' => 'searchButton' ) ); ?>
+ <div>
<?php } ?>
- <input type='hidden' name="title" value="<?php $this->text( 'searchtitle' ) ?>"/>
+ <?php
+ echo $this->makeSearchInput( array( 'id' => 'searchInput' ) );
+ echo Html::hidden( 'title', $this->get( 'searchtitle' ) );
+ // We construct two buttons (for 'go' and 'fulltext' search modes), but only one will be
+ // visible and actionable at a time (they are overlaid on top of each other in CSS).
+ // * Browsers will use the 'fulltext' one by default (as it's the first in tree-order), which
+ // is desirable when they are unable to show search suggestions (either due to being broken
+ // or having JavaScript turned off).
+ // * The mediawiki.searchSuggest module, after doing tests for the broken browsers, removes
+ // the 'fulltext' button and handles 'fulltext' search itself; this will reveal the 'go'
+ // button and cause it to be used.
+ echo $this->makeSearchButton( 'fulltext', array( 'id' => 'mw-searchButton', 'class' => 'searchButton' ) );
+ echo $this->makeSearchButton( 'go', array( 'id' => 'searchButton', 'class' => 'searchButton' ) );
+ ?>
</div>
</form>
</div>
.background-image('images/search-fade.png');
background-position: top left;
background-repeat: repeat-x;
+}
- input {
- color: black;
- &:focus {
- outline: none;
- }
-
- // These rules MAY NOT be merged because of how CSS requires browsers
- // to parse unrecognized selectors!
- &.placeholder {
- color: #999;
- }
- &:-ms-input-placeholder {
- color: #999;
- }
- &:-moz-placeholder {
- color: #999;
- }
- &::-webkit-input-placeholder {
- color: #999;
- }
-
- &#searchInput {
- position: absolute;
- top: 0;
- left: 0;
- width: 90%;
- margin: 0;
- padding: 0;
- padding-left: 0.2em;
- padding-top: 0.2em;
- padding-bottom: 0.2em;
- outline: none;
- border: none;
- /*
- * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
- * this from ever being shown anyways.
- */
- font-size: 13px;
- background-color: transparent;
- direction: ltr;
- }
- }
+// Styles for both the search input and the button
+div#simpleSearch input {
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ color: black;
+ background-color: transparent;
+}
- button#searchButton {
- position: absolute;
- width: 10%;
- right: 0;
- top: 0;
- padding: 0;
- padding-top: 0.3em;
- padding-bottom: 0.2em;
- padding-right: 0.4em;
- margin: 0;
- border: none;
- cursor: pointer;
- background-color: transparent;
- background-image: none;
-
- /* OVERRIDDEN BY COMPLIANT BROWSERS */
- img {
- border: none;
- margin: 0;
- margin-top: -3px;
- padding: 0;
- }
- /* IGNORED BY IE6 */
- > img {
- margin: 0;
- }
- }
+// The search input
+div#simpleSearch #searchInput {
+ top: 0;
+ left: 0;
+ width: 90%;
+ padding: 0.2em 0 0.2em 0.2em;
+ font-size: 13px;
+ direction: ltr;
+}
+
+div#simpleSearch #searchInput:focus {
+ outline: none;
+}
+
+div#simpleSearch input {
+ color: black;
+}
+
+// Placeholder colors. These rules MAY NOT be merged because of how
+// CSS requires browsers to parse unrecognized selectors!
+div#simpleSearch #searchInput.placeholder {
+ color: #999;
+}
+div#simpleSearch #searchInput::-webkit-input-placeholder {
+ color: #999;
+}
+div#simpleSearch #searchInput:-moz-placeholder {
+ color: #999;
+}
+div#simpleSearch #searchInput:-ms-input-placeholder {
+ color: #999;
+}
+
+// Undo the styles Webkit browsers apply to type=search fields,
+// we provide our own
+div#simpleSearch #searchInput {
+ -webkit-appearance: textfield;
+}
+div#simpleSearch #searchInput::-webkit-search-decoration,
+div#simpleSearch #searchInput::-webkit-search-cancel-button,
+div#simpleSearch #searchInput::-webkit-search-results-button,
+div#simpleSearch #searchInput::-webkit-search-results-decoration {
+ -webkit-appearance: textfield;
}
+
+// The buttons. They are displayed in the same position, and if both are
+// present the fulltext search one obscures the 'Go' one.
+div#simpleSearch #searchButton,
+div#simpleSearch #mw-searchButton {
+ top: 0;
+ right: 0;
+ width: 10%;
+ height: 100%;
+ cursor: pointer;
+ /* Hide button text and replace it with the image. */
+ text-indent: 100%;
+ /* Needed to make IE6 respect the text-indent. */
+ line-height: 1;
+ /* Opera 12 on RTL flips the text in a funny way without this. */
+ /* @noflip */
+ direction: ltr;
+ white-space: nowrap;
+ overflow: hidden;
+ /* @embed */
+ background: transparent url(images/search-ltr.png) center center no-repeat;
+}
+
+div#simpleSearch #mw-searchButton {
+ z-index: 1;
+}
+
+
+// The following styles exist only for backwards-compatibility with
+// cached HTML and are to be removed before 1.23 release.
+
+/* Fix direction changed for awful hacks */
+.sitedir-ltr div#simpleSearch button#searchButton {
+ /* @noflip */
+ direction: ltr;
+}
+.sitedir-rtl div#simpleSearch button#searchButton {
+ /* @noflip */
+ direction: rtl;
+}
+
+div#simpleSearch button#searchButton {
+ position: absolute;
+ padding: 0;
+ padding-top: 0.3em;
+ padding-bottom: 0.2em;
+ padding-right: 0.4em;
+ margin: 0;
+ border: none;
+ background-image: none;
+ text-indent: 0;
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+div#simpleSearch button#searchButton img {
+ border: none;
+ margin: 0;
+ margin-top: -3px;
+ padding: 0;
+}
+
+/* IGNORED BY IE6 */
+div#simpleSearch button#searchButton > img {
+ margin: 0;
+}
+