| Index: trunk/phase3/skins/vector/screen.css |
| — | — | @@ -1,8 +1,16 @@ |
| 2 | 2 | /* |
| 3 | | - * Any rules which should not be flipped automatically in right-to-left situations should be prepended with @noflip in |
| 4 | | - * a comment block. Images that should be embedded as base64 data-URLs should be prepended with @embed in a comment |
| 5 | | - * block. |
| | 3 | + * Any rules which should not be flipped automatically in right-to-left situations should be |
| | 4 | + * prepended with @noflip in a comment block. Images that should be embedded as base64 data-URLs |
| | 5 | + * should be prepended with @embed in a comment block. |
| | 6 | + * |
| | 7 | + * This style-sheet employs a few CSS trick to accomplish compatibility with a wide range of web |
| | 8 | + * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using |
| | 9 | + * a rule that makes things work in IE6, and then following it with a rule that begins with |
| | 10 | + * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support |
| | 11 | + * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and |
| | 12 | + * "IGNORED BY IE6" comments. |
| 6 | 13 | */ |
| | 14 | + |
| 7 | 15 | /* Framework */ |
| 8 | 16 | html, |
| 9 | 17 | body { |
| — | — | @@ -162,12 +170,8 @@ |
| 163 | 171 | background-image: url(images/tab-break.png); |
| 164 | 172 | background-position: bottom right; |
| 165 | 173 | background-repeat: no-repeat; |
| 166 | | - } |
| 167 | | - div.vectorTabs li a{ |
| 168 | 174 | color: #0645ad; |
| 169 | 175 | cursor: pointer; |
| 170 | | - } |
| 171 | | - div.vectorTabs li a { |
| 172 | 176 | font-size: 0.8em; |
| 173 | 177 | } |
| 174 | 178 | /* IGNORED BY IE6 */ |
| — | — | @@ -217,14 +221,15 @@ |
| 218 | 222 | background-image: url(images/tab-break.png); |
| 219 | 223 | background-repeat: no-repeat; |
| 220 | 224 | } |
| | 225 | + /* This will be flipped - unlike the one above it */ |
| | 226 | + div#mw-head div.vectorMenu h5 { |
| | 227 | + background-position: bottom left; |
| | 228 | + margin-left: -1px; |
| | 229 | + } |
| 221 | 230 | /* IGNORED BY IE6 */ |
| 222 | 231 | div#mw-head div.vectorMenu > h5 { |
| 223 | 232 | background-image: none; |
| 224 | 233 | } |
| 225 | | - div#mw-head div.vectorMenu h5 { |
| 226 | | - background-position: bottom left; |
| 227 | | - margin-left: -1px; |
| 228 | | - } |
| 229 | 234 | div#mw-head div.vectorMenu h4 { |
| 230 | 235 | display: inline-block; |
| 231 | 236 | float: left; |
| — | — | @@ -245,7 +250,8 @@ |
| 246 | 251 | background-image: url(images/tab-break.png); |
| 247 | 252 | background-repeat: no-repeat; |
| 248 | 253 | } |
| 249 | | - div.vectorMenu h5 a{ |
| | 254 | + /* This will be flipped - unlike the one above it */ |
| | 255 | + div.vectorMenu h5 a { |
| 250 | 256 | background-position: bottom right; |
| 251 | 257 | } |
| 252 | 258 | /* IGNORED BY IE6 */ |
| — | — | @@ -268,7 +274,8 @@ |
| 269 | 275 | body.rtl div.vectorMenu > div.menu { |
| 270 | 276 | margin-left: auto; |
| 271 | 277 | } |
| 272 | | - /* Fixes old versions of FireFox */ |
| | 278 | + /* IGNORED BY IE6 */ |
| | 279 | + /* Also fixes old versions of FireFox */ |
| 273 | 280 | /* @noflip */ |
| 274 | 281 | body.rtl div.vectorMenu > div.menu, |
| 275 | 282 | x:-moz-any-link { |
| — | — | @@ -312,16 +319,14 @@ |
| 313 | 320 | display: inline-block; |
| 314 | 321 | padding: 0.5em; |
| 315 | 322 | white-space: nowrap; |
| | 323 | + color: #0645ad; |
| | 324 | + cursor: pointer; |
| | 325 | + font-size: 0.8em; |
| 316 | 326 | } |
| 317 | 327 | /* IGNORED BY IE6 */ |
| 318 | 328 | div.vectorMenu li > a { |
| 319 | 329 | display: block; |
| 320 | 330 | } |
| 321 | | - div.vectorMenu li a { |
| 322 | | - color: #0645ad; |
| 323 | | - cursor: pointer; |
| 324 | | - font-size: 0.8em; |
| 325 | | - } |
| 326 | 331 | div.vectorMenu li.selected a, |
| 327 | 332 | div.vectorMenu li.selected a:visited { |
| 328 | 333 | color: #333333; |
| — | — | @@ -390,7 +395,6 @@ |
| 391 | 396 | background-color: transparent; |
| 392 | 397 | direction: ltr; |
| 393 | 398 | } |
| 394 | | - /* OVERRIDDEN BY COMPLIANT BROWSERS */ |
| 395 | 399 | div#simpleSearch button#searchButton { |
| 396 | 400 | padding: 0; |
| 397 | 401 | margin: 0 5px; |
| — | — | @@ -399,6 +403,7 @@ |
| 400 | 404 | background-color: transparent; |
| 401 | 405 | font-size: x-small; |
| 402 | 406 | } |
| | 407 | + /* OVERRIDDEN BY COMPLIANT BROWSERS */ |
| 403 | 408 | div#simpleSearch button#searchButton img { |
| 404 | 409 | border: none; |
| 405 | 410 | margin: 0; |
| — | — | @@ -561,7 +566,7 @@ |
| 562 | 567 | background-position: bottom right; |
| 563 | 568 | background-repeat: no-repeat; |
| 564 | 569 | } |
| 565 | | - /* IGNORED BY IE6 */ |
| | 570 | + /* Sadly, IE6 won't understand this */ |
| 566 | 571 | #preftoc li:first-child { |
| 567 | 572 | margin-left: 1px; |
| 568 | 573 | } |
| — | — | @@ -1140,6 +1145,7 @@ |
| 1141 | 1146 | #ca-watch.icon { |
| 1142 | 1147 | margin-right:1px; |
| 1143 | 1148 | } |
| | 1149 | +/* OVERRIDDEN BY COMPLIANT BROWSERS */ |
| 1144 | 1150 | #ca-unwatch.icon a, |
| 1145 | 1151 | #ca-watch.icon a { |
| 1146 | 1152 | margin: 0; |