MediaWiki talk:Common.css

pretty table
Could we import one? This would make it easier/prettier to create tables, that would also be more standard. If we use wikipedia's table, and apply the colors used in the infobox, this is what we get.
 * EDIT:Removed bad css

Happypal 13:51, 19 May 2011 (UTC)


 * After studying the tables on the wiki more, I came up with the css that creates this:
 * {| style="margin: 1em 1em 1em 0;background: #f9f9f9;border: 1px #aaaaaa solid;-moz-border-radius: .7em; -webkit-border-radius: .7em; padding: 0.2em;"

!style="padding: 0.2em;background: #E4F0F7;color: #063B5E;text-align: center;"| !style="padding: 0.2em;background: #E4F0F7;color: #063B5E;text-align: center;"|Slime Type !style="padding: 0.2em;background: #E4F0F7;color: #063B5E;text-align: center;"|Health !style="padding: 0.2em;background: #E4F0F7;color: #063B5E;text-align: center;"|Green Slime !style="padding: 0.2em;background: #E4F0F7;color: #063B5E;text-align: center;"|Blue Slime table.terraria { margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaaaaa solid; padding: 0.2em; -moz-border-radius: .7em; -webkit-border-radius: .7em; } .terraria th, .terraria td { padding: 0.2em; } .terraria th { background: #E4F0F7; color: #063B5E; text-align: center; } .terraria td { } .terraria caption { font-weight: bold; } I think it would be really beneficial to the wiki if we added this in. It would mean any editor is able to easily create a pretty, standardized, table. Happypal 06:27, 20 May 2011 (UTC)
 * style="padding: 0.2em;"| 15
 * style="padding: 0.2em;"| 8
 * style="padding: 0.2em;"| 25
 * style="padding: 0.2em;"| 7
 * }

ul
Why does it float left? It makes it so I can't make bullets center with text without super mega ridiculously complex code. See User:Null/sandbox "The game". 03:30, 29 August 2011 (UTC)
 * Anyone? --Null  Talk  22:25, 29 August 2011 (UTC)
 * Tables default to a left alignment. -- Wynthyst [[Image:User Wynthyst sig icon.png ]] talk  22:34, 29 August 2011 (UTC)
 * What about bullets? Can we remove float: left from them since float: none doesn't do anything? --Null  Talk  22:43, 29 August 2011 (UTC)

border radius
Is it ok to add border-radius: for support on opera and other browsers? I'm not going to do it because I'm not sure if it will stress the server. (probably not since this page is loaded client-sided) --Null  Talk  23:22, 2 September 2011 (UTC)
 * Yes. In fact, that's what we should be using instead of the prefixed versions (although it probably can't hurt to keep them). IIRC,  was introduced when Mozilla was ahead of everyone's game and added preliminary support for it, but now, it's part of the CSS3 standard, and the latest versions of the big 4 (Internet Explorer, Firefox, Opera, Chrome) all support  . --Lunboks 23:32, 2 September 2011 (UTC)
 * Mostly true. Happy pal told me Firefox 3.6.x doesn't support border radius, as Chrome 5/Safari 5 or under doesn't, but they do support -moz- and -webkit-, so adding all to -moz- and -webkit- would make it work for all except IE (at most IE8)! --Null  Talk  23:37, 2 September 2011 (UTC)
 * You can add, but not remove the others. -- Wynthyst [[Image:User Wynthyst sig icon.png ]] talk  04:49, 3 September 2011 (UTC)
 * Fixed - looks great on Opera -- except for the main page D: --Null  Talk  14:32, 3 September 2011 (UTC)

Image rendering
Since we're working with pixel art, it would probably be a good idea to use crisp, nearest-neighbor-interpolated images when zoomed in far, such as on File pages. I think it looks so much better than whatever interpolation mode is used currently. It was meant to be like that for much larger images, where other interpolation modes look less choppy. A way we can change it is by using: img[src$=".gif"], img[src$=".png"] { image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; }

Also, since transparency is widely used, a simple checker pattern showing transparency should make it much easier to see if an image has transparency using:

.gallerybox .thumb img, .filehistory a img, #file img { background: url("http://i.imgur.com/1KOF7.png") repeat; }

Comparison:

There might be something wrong here, and I wanted to check if we decide to implement this. --Null Talk  05:41, 8 December 2011 (UTC)

Table ruled rows
Since people are already doing this manually by adding a border style to every single cell, I would like to add the following to the CSS:

.ruledrow td { border-top: 1px solid #CCCCCC; }

That will allow us to replace this:


 * align="center" style="border-top: 1px solid #CCCCCC;" | Mana
 * style="border-top: 1px solid #CCCCCC;" | Arcane
 * style="border-top: 1px solid #CCCCCC;" align="center" | +20
 * style="border-top: 1px solid #CCCCCC;" align="center" | +1
 * style="border-top: 1px solid #CCCCCC;" align="center" | +32.25%
 * style="border-top: 1px solid #CCCCCC;" align="center" | +32.25%

With this:


 * - class="ruledrow"
 * align="center" | Mana
 * Arcane
 * align="center" | +20
 * align="center" | +1
 * align="center" | +32.25%

And to apply it to every row, simply change the start of the table from  to. I'm using border-top instead of border-bottom because you'll get an extra border at the edge either way, and at least this way it blends in with the header cell background.