Keep checking BNN for the breaking news updates, and discuss it on the forums or in the Bulbagarden Discord server.

Want to write an article? Go ahead! Have an opinion to share? An idea for a new column? Contact us!

Difference between revisions of "MediaWiki:Common.css"

From Bulbanews, your community Pokémon newspaper.
Jump to: navigation, search
(rv - did it a different way)
(copying bulba-style gallery from bulbapedia. may edit this later to refine it for this wiki)
Line 229: Line 229:
 
body[class~=ns-106] #p-logo a, body[class~=ns-107] #p-logo a {
 
body[class~=ns-106] #p-logo a, body[class~=ns-107] #p-logo a {
 
background-image: url(http://archives.bulbagarden.net/media/upload/a/a8/Bulbacast_logo.png) !important;
 
background-image: url(http://archives.bulbagarden.net/media/upload/a/a8/Bulbacast_logo.png) !important;
  +
  +
/* Bulba-style gallery */
  +
li.gallerybox {
  +
border: 1px solid #80964B;
  +
display: inline-block;
  +
vertical-align: top;
  +
background: #C4E673;
  +
height: 205px;
  +
border-radius: 10px;
  +
-moz-border-radius: 10px;
  +
-webkit-border-radius: 10px;
  +
-khtml-border-radius: 10px;
  +
-icab-border-radius: 10px;
  +
-o-border-radius: 10px;
  +
}
  +
  +
li.gallerybox div.thumb {
  +
background-color: #E0F2B6;
  +
border: 1px solid #80964B;
  +
margin: 2px 2px 0px 2px;
  +
text-align: center;
  +
border-radius: 10px;
  +
-moz-border-radius: 10px;
  +
-webkit-border-radius: 10px;
  +
-khtml-border-radius: 10px;
  +
-icab-border-radius: 10px;
  +
-o-border-radius: 10px;
  +
}
  +
  +
div.gallerytext {
  +
font-size: 85%;
  +
overflow: hidden;
  +
padding: 0px 4px;
  +
word-wrap: break-word;
  +
height: 50px;
  +
}

Revision as of 00:05, 5 May 2012

/* <pre> */

/* Miscellaneous formatting features */

.sc { font-variant: small-caps }
.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }

.bluetable .bg1, .blueinfobox .bg1, .lightbluebg { background: #f8f8ff; }
.graytable .bg1, .grayinfobox .bg1, .lightgraybg { background: #f8f8f8; }
.blueborder { border: 1px solid #88a; }
.grayborder { border: 1px solid #999; }

.bluetable .bg2, .blueinfobox .bg2 { background: #eef; }
.bluetable .bg3, .blueinfobox .bg3 { background: #ddf; }
.bluetable .bg4, .blueinfobox .bg4 { background: #ccf; }

.graytable .bg2, .grayinfobox .bg2 { background: #f0f0f0; }
.graytable .bg3, .grayinfobox .bg3 { background: #e1e1e1; }
.graytable .bg4, .grayinfobox .bg4 { background: #d2d2d2; }

.bluetable, .graytable, .blueinfobox, .grayinfobox {
  border-collapse: collapse;
}

.blueinfobox, .grayinfobox {
  float: right;
  margin: 0 0 0.5em 0.5em;
}

.blueinfobox { background: #f8f8ff; }
.grayinfobox { background: #f8f8f8; }

.bluetable, .blueinfobox { border: 1px solid #88a; }
.graytable, .grayinfobox { border: 1px solid #999; }

.bluetable td, .bluetable th, .blueinfobox td, .blueinfobox th { border: 1px solid #88a; }
.graytable td, .graytable th, .graytable td, .graytable th { border: 1px solid #999; }

.bluetable td, .bluetable th, .graytable td, .graytable th, 
.blueinfobox td, .blueinfobox th, .graytable td, .graytable th {
  padding: 2px;
}

.bluetable td, .bluetable th, .blueinfobox td, .blueinfobox th { border: 1px solid #88a; }
.graytable td, .graytable th, .grayinfobox td, .grayinfobox th { border: 1px solid #999; }

.bluetable th { background: #ccf; }
.graytable th { background: #d2d2d2; }

.bluetable th:first-child, .graytable th:first-child, .blueinfobox th, .grayinfobox th {
  text-align: right;
}

.blueinfobox th.divider, .blueinfobox .header, .grayinfobox th.divider, .grayinfobox .header {
  text-align: center;
}

.blueinfobox .header { background: #ccf; }
.grayinfobox .header { background: #d2d2d2; }
.blueinfobox th.divider { background: #eef; }
.grayinfobox th.divider { background: #f0f0f0; }

div.listcol {
    padding: 0.5em 1.0em 0.5em 0;
    margin: 0.25em;
    min-width: 21.5%;
    border: 1px solid #aaf;
    float: left;
    clear: right;
    line-height: 130%;
}

div.listcolend {
    clear: both;
}

#newarticleassistant table {
    border: 1px solid #999;
    border-collapse: collapse;
    background: #f8f8f8; 
    margin: 1.0em 0;
}

#newarticleassistant table th {
    text-align: right;
    vertical-align: middle;
    font-weight: normal;
}

#newarticleassistant .formheader {
    text-align: left;
    background: #eee;
}

#newarticleassistant input.button {
    border: 1px solid #88a;
    background: #eef;
}

#newarticleassistant input {
    border: 1px solid #999;
    background: #fff;
}

#newarticleassistant select {
    border: 1px solid #999;
    background: #fff;
}

#newarticleassistant textarea {
    border: 1px solid #999;
    background: #fff;
}   

.noticebar {
  background: #efe url('http://archives.bulbagarden.net/media/upload/6/6f/Notice_bar_background.png') no-repeat left center;
  border: 1px solid #8a8;
  margin-top: 0.2em;
  padding: 0.2em;
  text-align: center;
}

/* Babelboxes and userboxes */

div.babelbox, div.userbox
{
  border: 1px solid #999;
  background: #f8f8f8;
  float: right;
  width: 25%;
  padding: 0.25em 0.5em;
  margin-left: 1em;
  margin-bottom: 0.5em;
}

table.babelitem, table.userboxitem
{
  margin: 0.25em 0;
  width: 100%;
}

table.babelitem th, table.userboxitem th
{
  width: 45pt;
  height: 45pt;
  font-size: 14pt;
  text-align: center;
  vertical-align: middle;
}

table.babelitem td, table.userboxitem td
{
  font-size: 8pt;
  line-height: 1.25em;
  padding: 4pt;
  text-align: left;
}

/* Bulbagarden Archives copyright tags */

table.copytag
{
  border: 1px solid #88a;
  background: #f8f8ff;
  margin: 0.25em 0;
  padding: 0;
  width: 100%;
}

table.copytag-red { border: 1px solid #a88; background: #fdd; }
table.copytag-yellow { border: 1px solid #aa8; background: #fffff8; }
table.copytag td.copytag-text { padding: 0.5em; text-align: center; width: 99%; }
table.copytag td.copytag-sym { padding: 0; }

/* cutting down on the usage of Template:Roundy with div and table classes for use in larger pages. */
.roundy { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -icab-border-radius: 10px; -o-border-radius: 10px; }

.roundytl { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -khtml-border-top-left-radius: 10px; -icab-border-top-left-radius: 10px; -o-border-top-left-radius: 10px; }

.roundytr { border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-top-right-radius: 10px; -icab-border-top-right-radius: 10px; -o-border-top-right-radius: 10px; }

.roundybl { border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-left-radius: 10px; -icab-border-bottom-left-radius: 10px; -o-border-bottom-left-radius: 10px; }

.roundybr { border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -icab-border-bottom-right-radius: 10px; -o-border-bottom-right-radius: 10px; }

.roundybottom { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -icab-border-bottom-left-radius: 10px; -icab-border-bottom-right-radius: 10px; -o-border-bottom-left-radius: 10px; -o-border-bottom-right-radius: 10px; }

.roundytop { border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-top-left-radius: 10px; -khtml-border-top-right-radius: 10px; -icab-border-top-left-radius: 10px; -icab-border-top-right-radius: 10px; -o-border-top-left-radius: 10px; -o-border-top-right-radius: 10px; }

.roundyleft { border-top-left-radius: 10px; border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-top-left-radius: 10px; -khtml-border-bottom-left-radius: 10px; -icab-border-top-left-radius: 10px; -icab-border-bottom-left-radius: 10px; -o-border-top-left-radius: 10px; -o-border-bottom-left-radius: 10px; }

.roundyright { border-bottom-right-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; -icab-border-bottom-right-radius: 10px; -icab-border-top-right-radius: 10px; -o-border-bottom-right-radius: 10px; -o-border-top-right-radius: 10px; }

/* </pre> */

/* creates a div class that can be used to add mouse-over functionality. */
/* hoverexpand will expand to fit the content vertically when hovered-over. Best used within tables or other divs. */
.hoverexpand {
height: 18px;
padding: 2px;
overflow: hidden;
*overflow: visible;
_overflow: visible;
}

.hoverexpand:hover {
height: 100%;
overflow: visible;
}

/* trom abuses his admin powers to test stuff in his userspace */
body.page-User_The_dark_lord_trombonator_Front_page_2 #t-cite,
body.page-User_The_dark_lord_trombonator_Front_page_2 #footer-info-lastmod,
body.page-User_The_dark_lord_trombonator_Front_page_2 #siteSub,
body.page-User_The_dark_lord_trombonator_Front_page_2 #contentSub,
body.page-User_The_dark_lord_trombonator_Front_page_2 h1.firstHeading {
display: none !important;
}

div.thumb { border-color: transparent;
}

.table { border-color: transparent;
}

/* transparency does not work in IE, so don't let IE process this rule. */
body[class~=ns-106] #p-logo a, body[class~=ns-107] #p-logo a { 
    background-image: url(http://archives.bulbagarden.net/media/upload/a/a8/Bulbacast_logo.png) !important;

/* Bulba-style gallery */
li.gallerybox {
    border: 1px solid #80964B;
    display: inline-block;
    vertical-align: top;
    background: #C4E673;
    height: 205px;
    border-radius: 10px;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -icab-border-radius: 10px; 
    -o-border-radius: 10px;
}

li.gallerybox div.thumb {
    background-color: #E0F2B6;
    border: 1px solid #80964B;
    margin: 2px 2px 0px 2px;
    text-align: center;
    border-radius: 10px;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -icab-border-radius: 10px; 
    -o-border-radius: 10px;
}

div.gallerytext {
    font-size: 85%;
    overflow: hidden;
    padding: 0px 4px;
    word-wrap: break-word;
    height: 50px;
}