Difference between revisions of "MediaWiki:Common.css"

From Pokemon Dungeon Explorers
Jump to navigation Jump to search
(npc-speech)
m (s/orange/green/)
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
 +
 +
/* Various flavors of infobar (those little boxes at the top of a page) */
 +
 +
.infobar {
 +
    font-size: 1.33em;
 +
    padding: 0.33em 1em;
 +
    box-shadow: 1px 1px 2px #ddd;
 +
 +
    border: 1px solid #ccc;
 +
    background: #ddd;
 +
}
 +
 +
.infobar-obnoxious {
 +
    border-color: hsl(30, 60%, 80%);
 +
    background: hsl(30, 60%, 93%);
 +
}
  
 
/* Nice sections -- used on front page */
 
/* Nice sections -- used on front page */
Line 6: Line 22:
 
     margin-bottom: 1em;
 
     margin-bottom: 1em;
 
     padding: 1em;
 
     padding: 1em;
     border: 1px solid hsl(200, 40%, 87%);
+
     border: 1px solid hsl(0, 0%, 90%);
     background: hsl(200, 40%, 97%);
+
     background: hsl(0, 0%, 97%);
 
}
 
}
 
div.blocky h1 {
 
div.blocky h1 {
 
     font-size: 1.5em;
 
     font-size: 1.5em;
 
     padding: 0.33em;
 
     padding: 0.33em;
     margin: -0.5em -0.5em 0.66em;
+
     margin: -0.67em -0.67em 0.67em;
     background: hsl(200, 40%, 93%);
+
     background: hsl(0, 0%, 90%);
 
     color: #202020;
 
     color: #202020;
 
     text-shadow: 1px 1px 1px white;
 
     text-shadow: 1px 1px 1px white;
 +
 +
    /* override mediawiki's */
 +
    border-bottom: none;
 +
}
 +
 +
div.blocky.blocky-blue {
 +
    border-color: hsl(200, 50%, 90%);
 +
    background-color: hsl(200, 50%, 97%);
 +
}
 +
div.blocky.blocky-blue h1 {
 +
    background-color: hsl(200, 50%, 90%);
 +
}
 +
 +
div.blocky.blocky-purple {
 +
    border-color: hsl(285, 50%, 90%);
 +
    background-color: hsl(285, 50%, 97%);
 +
}
 +
div.blocky.blocky-purple h1 {
 +
    background-color: hsl(285, 50%, 90%);
 +
}
 +
 +
div.blocky.blocky-green {
 +
    border-color: hsl(105, 50%, 90%);
 +
    background-color: hsl(105, 50%, 97%);
 +
}
 +
div.blocky.blocky-green h1 {
 +
    background-color: hsl(105, 50%, 90%);
 
}
 
}
  
Line 52: Line 95:
 
     margin-right: 0.5em;
 
     margin-right: 0.5em;
 
     margin-bottom: 0.5em;
 
     margin-bottom: 0.5em;
 +
}
 +
 +
 +
/*** General layout helpers ***/
 +
 +
/* Using a table for columns */
 +
 +
table.tabletastic-columns {
 +
    table-layout: fixed;
 +
    width: 100%;
 +
}
 +
table.tabletastic-columns th {
 +
    text-align: left;
 +
    vertical-align: bottom;
 +
    font-size: 1.2em;
 +
    padding: 0 0.5em;
 +
}
 +
table.tabletastic-columns td {
 +
    padding-right: 1em;
 +
    vertical-align: top;
 
}
 
}

Latest revision as of 21:38, 2 April 2013

/* CSS placed here will be applied to all skins */

/* Various flavors of infobar (those little boxes at the top of a page) */

.infobar {
    font-size: 1.33em;
    padding: 0.33em 1em;
    box-shadow: 1px 1px 2px #ddd;

    border: 1px solid #ccc;
    background: #ddd;
}

.infobar-obnoxious {
    border-color: hsl(30, 60%, 80%);
    background: hsl(30, 60%, 93%);
}

/* Nice sections -- used on front page */

div.blocky {
    margin-bottom: 1em;
    padding: 1em;
    border: 1px solid hsl(0, 0%, 90%);
    background: hsl(0, 0%, 97%);
}
div.blocky h1 {
    font-size: 1.5em;
    padding: 0.33em;
    margin: -0.67em -0.67em 0.67em;
    background: hsl(0, 0%, 90%);
    color: #202020;
    text-shadow: 1px 1px 1px white;

    /* override mediawiki's */
    border-bottom: none;
}

div.blocky.blocky-blue {
    border-color: hsl(200, 50%, 90%);
    background-color: hsl(200, 50%, 97%);
}
div.blocky.blocky-blue h1 {
    background-color: hsl(200, 50%, 90%);
}

div.blocky.blocky-purple {
    border-color: hsl(285, 50%, 90%);
    background-color: hsl(285, 50%, 97%);
}
div.blocky.blocky-purple h1 {
    background-color: hsl(285, 50%, 90%);
}

div.blocky.blocky-green {
    border-color: hsl(105, 50%, 90%);
    background-color: hsl(105, 50%, 97%);
}
div.blocky.blocky-green h1 {
    background-color: hsl(105, 50%, 90%);
}

/* Capsules -- the little inline labels used on the front page timeline */

.capsule {
    font-size: 0.8em;
    padding: 2px 3px;
    border-radius: 2px;
    color: white;
    background: #ddd;
    text-shadow: 1px 1px 0 #999;
    vertical-align: bottom;
}
.capsule.capsule-prompt {
    background: #d04d2b;
    text-shadow: 1px 1px 0 #a63922;
}
.capsule.capsule-plot {
    background: #b12bd0;
    text-shadow: 1px 1px 0 #9122a6;
}
.capsule.capsule-story {
    background: #2b87d0;
    text-shadow: 1px 1px 0 #226ca6;
}

/* NPC speech, mostly in mission reposts */

.npc-speech {
    overflow: hidden;  /* float containment */
    margin-bottom: 1em;
}
.npc-speaker {
    float: left;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}


/*** General layout helpers ***/

/* Using a table for columns */

table.tabletastic-columns {
    table-layout: fixed;
    width: 100%;
}
table.tabletastic-columns th {
    text-align: left;
    vertical-align: bottom;
    font-size: 1.2em;
    padding: 0 0.5em;
}
table.tabletastic-columns td {
    padding-right: 1em;
    vertical-align: top;
}