MediaWiki talk:Vector.css

Data URIs

@thekirbylover, want to make it so instead of using images, it uses date uri's? just use this site and paste the data uri in place of the image. browsers that don't support data uri's are old, but you could keep the image as a backup. newer browsers will notice the data uri and use it instead of sending another request to the server for the image, while older browsers (even before IE 6) will see the data uri, not know how to parse it and use the image instead. ex:

#content{background:#C5CCD4 url(/wiki/images/d/d6/Pinstripes_loop.png) top left repeat !important;}

to

#content{
 background: #C5CCD4 url(/wiki/images/d/d6/Pinstripes_loop.png) top left repeat !important;
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAABCAIAAACdaSOZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAABRJREFUGFdjOHrmChK6dPrSDSACALh0EOJgMOPvAAAAAElFTkSuQmCC);
}

--5urd 21:47, 8 January 2012 (MST)

I noticed the default vector css does this too, so I'll do it. thekirbylover 22:41, 8 January 2012 (MST)

New User icon

See that icon next to your user name? See the white around it? You can fix that with this:

#pt-userpage, #pt-anonuserpage, #pt-login {
 background: url(//upload.wikimedia.org/wikipedia/commons/thumb/a/a8/System-users.svg/16px-System-users.svg.png) left top no-repeat;
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH2QcUEgsrxFSsCgAAAphJREFUOI2NksuPFFUUh7+qut1dXT3DNDCZHobxMTwCTEDkEaMGVFxoMBrHFW5MDAtnY8LayKJJ+AOIbkxMDO51xQYNJJ24IVHD4II4m3bi9EDz6Fd1VVfduvfWdTU4Y4bgtzs5+X055+TAFtTruPU67la9/+JsCn5A4G+f/bo6FrwltSKKRjfUvQcX6g3SpwnExqJcnf3qlSNz58eCEt1en1bbftamBjxYfKagXscdf1h+O/ALTE9NkqYSz7GMB+LdP67Mf+MV/VqW9O/0h83LZ+roLSeQMnM7vT6plAzCIZlMeOPkwV3Te44tGhmi+s0FIQrHLcsfOmABvPVwo4E9uqfwkSB7IRwM6PYGvDgzxv4jpzx/6mUcr4gZPURYte/uCXnnu0ayDPx76YVzlQvx88FLy6GkFeZ0pEC5ApN2UeHfmKSDVSNcx3oFUZzftMLZBfZO79rxhXEfVeVul5YWpCPNFJrDvb/IR4+xRqKje0hbiZRKr60LXIBiqbLoeLKmtUWpHIeMkg8/dT+lsbKNZPgYk8WEZoIfVw7ZT367WFsXeAAHDgUfu65zLLeKPAejYS1eYOi/R7NwitBsozy2k+9XT/OrfL00XvbOiN2nf+gt/xy6AGtryTXX8yNygcogkQVk8TXiVPKoL/ldvsq+d75kqTtLGMbI3D63faJ86ckE91vmz3I5vS9EdUduKmEUz8Rp8GZVKu1YaxkMR3h5ylKzgzWKLB0RCK1Xl65/++QPbv2irkL7KuD71bx29P3Ordwbn86NxgFu3l7FZAk215B2SZSINv3BBrROo0Fxcj6bqPgHBabgIXUSxVqgM4FOyM3ddqv5+bB1u+1sIdhIsTQ5N+fgzmCt57gixcQrSXet9Yzc/+cfhMA9ZoCY3h8AAAAASUVORK5CYII=) left top no-repeat;
}

data URI necessary as the main CSS for vector uses it also, so to override it on newer browsers (explained above), we need it
--5urd 21:58, 8 January 2012 (MST)

I'll be changing it to a different icon anyway, just trying to think which one. thekirbylover 22:41, 8 January 2012 (MST)

I personally like System-users from the Tango icon set. --5urd 22:49, 8 January 2012 (MST)

Update

Can an admin please update the css to my latest [1], but keep Dialexio's changes? Use the show changes button if you need to. thekirbylover 22:41, 8 January 2012 (MST)

Could you tell us what is new? If I was an admin, I could do it by just pasting and deleting the old ones that are in yours while retaining the ones that are on it but not on yours. Ask geohot for admin privileges. --5urd 22:50, 8 January 2012 (MST)

I made the .firstHeading use the iOS titlebar style and I fixed some positioning issues. I've still got some fixes for the background (as I mentioned to Britta at The iPhone Wiki:Community portal#Theme), and the css3 switches to come. thekirbylover 22:58, 8 January 2012 (MST)

I tried my best to merge the two stylesheets. However, I did remove the .firstHeading CSS since it didn't look as great on non-WebKit browsers. --Dialexio 14:13, 9 January 2012 (MST)

Could an admin please add -webkit-transition:background 500ms ease-in-out to .vectorTabs and -webkit-transition:opacity 300ms ease-in-out to input[type=button],input[type=submit], plus the user icon suggestion above? Thanks again. thekirbylover 23:45, 14 January 2012 (MST)

I was testing out those proposed CSS additions in Chromium (with Stylish), and couldn't pick up the change. Regarding the nicer-looking user icon, a MediaWiki update would probably take care of that. --Dialexio 00:36, 15 January 2012 (MST)

The change is a fade for the opacity of the buttons and the highlight for the page tabs when hovered. In regards to the icon, it seems it got resized improperly in 1.17 (compare [2] and [3]), so it can be fixed by overriding it in the css, or geohot can update the wiki to 1.18. thekirbylover 01:01, 15 January 2012 (MST)

Mobile Support

Are we looking to mobile support for the iPhone and iPod? It would be nice but I'm not sure if mediawiki supports it. --Haifisch (talk) 04:12, 27 December 2012 (UTC)

I was thinking about it, but to do so would require some JS to detect the browser and if it is a mobile browser, tell the browser not to load MediaWiki:Vector.css, but instead say MediaWiki:Vector.css/mobile. --5urd (talk) 04:46, 27 December 2012 (UTC)