skins/vector/components/search.less

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