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                 &.placeholder {
  59                         color: #999;
  60                 }
  61                 &:-ms-input-placeholder {
  62                         color: #999;
  63                 }
  64                 &:-moz-placeholder {
  65                         color: #999;
  66                 }
  67                 &::-webkit-input-placeholder {
  68                         color: #999;
  69                 }
  70
  71                 // Undo the styles Webkit browsers apply to type=search fields,
  72                 // we provide our own
  73                 -webkit-appearance: textfield;
  74
  75                 &::-webkit-search-decoration,
  76                 &::-webkit-search-cancel-button,
  77                 &::-webkit-search-results-button,
  78                 &::-webkit-search-results-decoration {
  79                         -webkit-appearance: textfield;
  80                 }
  81         }
  82
  83         // The buttons. They are displayed in the same position, and if both are
  84         // present the fulltext search one obscures the 'Go' one.
  85         #searchButton,
  86         #mw-searchButton {
  87                 top: 0;
  88                 right: 0;
  89                 width: 10%;
  90                 height: 100%;
  91                 cursor: pointer;
  92                 /* Hide button text and replace it with the image. */
  93                 text-indent: 100%;
  94                 /* Needed to make IE6 respect the text-indent. */
  95                 line-height: 1;
  96                 /* Opera 12 on RTL flips the text in a funny way without this. */
  97                 /* @noflip */
  98                 direction: ltr;
  99                 white-space: nowrap;
 100                 overflow: hidden;
 101                 .background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
 102                 background-position: center center;
 103                 background-repeat: no-repeat;
 104         }
 105
 106         #mw-searchButton {
 107                 z-index: 1;
 108         }
 109 }
 110
 111 // The following styles exist only for backwards-compatibility with
 112 // cached HTML and are to be removed before 1.23 release.
 113
 114 /* Fix direction changed for awful hacks */
 115 .sitedir-ltr div#simpleSearch button#searchButton {
 116         /* @noflip */
 117         direction: ltr;
 118 }
 119 .sitedir-rtl div#simpleSearch button#searchButton {
 120         /* @noflip */
 121         direction: rtl;
 122 }
 123
 124 div#simpleSearch button#searchButton {
 125         position: absolute;
 126         padding: 0;
 127         padding-top: 0.3em;
 128         padding-bottom: 0.2em;
 129         padding-right: 0.4em;
 130         margin: 0;
 131         border: none;
 132         background-image: none;
 133         text-indent: 0;
 134
 135         /* OVERRIDDEN BY COMPLIANT BROWSERS */
 136         img {
 137                 border: none;
 138                 margin: 0;
 139                 margin-top: -3px;
 140                 padding: 0;
 141         }
 142         /* IGNORED BY IE6 */
 143         > img {
 144                 margin: 0;
 145         }
 146 }