[Summary view] [Print] [Text view]

   1  /* Search */
   2  #p-search {
   3      /* @noflip */
   4      float: left;
   5      margin-right: 0.5em;
   6      margin-left: 0.5em;
   7  
   8      h3 {
   9          display: none;
  10      }
  11  
  12      form,
  13      input {
  14          margin: 0;
  15          margin-top: 0.4em;
  16      }
  17  }
  18  
  19  div#simpleSearch {
  20      display: block;
  21      width: 12.6em;
  22      padding-right: 1.4em;
  23      height: 1.4em;
  24      margin-top: 0.65em;
  25      position: relative;
  26      min-height: 1px; /* Gotta trigger hasLayout for IE7 */
  27      border: solid 1px #aaa;
  28      color: black;
  29      background-color: white;
  30      .background-image('images/search-fade.png');
  31      background-position: top left;
  32      background-repeat: repeat-x;
  33  
  34      // Styles for both the search input and the button
  35      input {
  36          margin: 0;
  37          padding: 0;
  38          border: 0;
  39          background-color: transparent;
  40          color: black;
  41      }
  42  
  43      // The search input
  44      #searchInput {
  45          width: 100%;
  46          padding: 0.2em 0 0.2em 0.2em;
  47          font-size: 13px;
  48          direction: ltr;
  49  
  50          &:focus {
  51              outline: none;
  52          }
  53  
  54          // These rules MAY NOT be merged because of how CSS requires browsers
  55          // to parse unrecognized selectors!
  56          // Note these rules ensure that placeholder text can be distinguished from
  57          // standard text. In browsers which make this distinction clear these rules
  58          // are not necessary.
  59          // For inputs that use jquery.placeholder.js e.g. IE9-
  60          &.placeholder {
  61              color: #999;
  62          }
  63          // Distinguish placeholder text in IE10+
  64          &:-ms-input-placeholder {
  65              color: #999;
  66          }
  67          // Distinguish placeholder text in Firefox 18-
  68          &:-moz-placeholder {
  69              color: #999;
  70          }
  71  
  72          // Undo the styles Webkit browsers apply to type=search fields,
  73          // we provide our own
  74          -webkit-appearance: textfield;
  75  
  76          &::-webkit-search-decoration,
  77          &::-webkit-search-cancel-button,
  78          &::-webkit-search-results-button,
  79          &::-webkit-search-results-decoration {
  80              -webkit-appearance: textfield;
  81          }
  82      }
  83  
  84      // The buttons. They are displayed in the same position, and if both are
  85      // present the fulltext search one obscures the 'Go' one.
  86      #searchButton,
  87      #mw-searchButton {
  88          position: absolute;
  89          top: 0;
  90          right: 0;
  91          width: 1.65em;
  92          height: 100%;
  93          cursor: pointer;
  94          /* Hide button text and replace it with the image. */
  95          text-indent: -99999px;
  96          /* Needed to make IE6 respect the text-indent. */
  97          line-height: 1;
  98          /* Opera 12 on RTL flips the text in a funny way without this. */
  99          /* @noflip */
 100          direction: ltr;
 101          white-space: nowrap;
 102          overflow: hidden;
 103          .background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
 104          background-position: center center;
 105          background-repeat: no-repeat;
 106      }
 107  
 108      #mw-searchButton {
 109          z-index: 1;
 110      }
 111  }