Difference between revisions of "MediaWiki:Common.css"

From Twinsuniverse
Jump to: navigation, search
m
(fixed some pixel-perfect aligning in infobox cells)
 
(167 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 */
  
/* MAIN-NAVIGATION */
+
/* CATEGORY TREE */
 +
#mw-subcategories ul
 +
{
 +
    list-style-type: none;
 +
}
 +
#mw-subcategories ul li
 +
{
 +
    display: block;
 +
}
 +
 
 +
/* LAST UPDATE */
 +
table.lastupdate
 +
{
 +
    border-radius: 18px; -moz-border-radius: 18px;
 +
    background: lightblue;
 +
    margin: 12px auto;
 +
    width: 70%;
 +
}
 +
table.lastupdate td.lastupdate-left
 +
{
 +
    padding: 10px;
 +
    width: 240px;
 +
    text-align: center;
 +
}
 +
table.lastupdate td.lastupdate-right
 +
{
 +
    border: solid 10px lightblue;
 +
    border-radius: 18px; -moz-border-radius: 18px;
 +
    background: #ffffff;
 +
    padding: 12px;
 +
}
 +
 
 +
/* MAIN-NAVIGATOR */
 
table.mainnavigator
 
table.mainnavigator
 
{
 
{
Line 11: Line 43:
 
table.infobox
 
table.infobox
 
{
 
{
     border: solid 2px #ccccff;
+
     border: solid 2px; border-spacing: 4px;
     border-radius: 12px;
+
     border-radius: 12px; -moz-border-radius: 12px;
    -moz-border-radius: 12px; /* IE7 border-radius fix? */
+
    border-spacing: 5px;
+
 
     padding: 0px;
 
     padding: 0px;
     width: 250px;
+
     min-width: 240px;
 
     text-align: left;
 
     text-align: left;
 
}
 
}
 
table.infobox th
 
table.infobox th
 
{
 
{
     border: solid 2px #ccccff;
+
     border: solid 2px;
     border-radius: 8px 0px 0px 8px;
+
     border-radius: 8px 0px 0px 8px; -moz-border-radius: 8px 0px 0px 8px;
    background-color: #ccccff;
+
    padding: 5px;
+
 
     margin: 0px;
 
     margin: 0px;
 +
    padding: 2px 6px;
 
     text-align: right;
 
     text-align: right;
 
     vertical-align: bottom;
 
     vertical-align: bottom;
 +
    line-height: 20px;
 
     white-space: nowrap;
 
     white-space: nowrap;
 
}
 
}
 
table.infobox th.title
 
table.infobox th.title
 
{
 
{
     border: solid 2px #ccccff;
+
     border-radius: 8px; -moz-border-radius: 8px;
     background-color: #e1e1ff;
+
     background-position: 2px center; background-repeat: no-repeat;
     border-radius: 8px;
+
     padding: 6px 36px;
 +
    text-align: center;
 
     font-size: 130%;
 
     font-size: 130%;
 
     font-weight: bold;
 
     font-weight: bold;
    text-align: center;
 
 
}
 
}
 
table.infobox th.subtitle
 
table.infobox th.subtitle
 
{
 
{
     border: solid 2px #ccccff;
+
     border-radius: 8px; -moz-border-radius: 8px;
     background-color: #e1e1ff;
+
     padding: 6px;
     border-radius: 8px;
+
     text-align: center;
 
     font-size: 110%;
 
     font-size: 110%;
 
     font-weight: bold;
 
     font-weight: bold;
    text-align: center;
 
 
}
 
}
table.infobox td
+
table.infobox th.heading
 +
{
 +
    border-width: 0px 0px 2px;
 +
    border-radius: 0px; -moz-border-radius: 0px;
 +
    text-align: left;
 +
    font-weight: bold;
 +
}
 +
table.infobox td,
 +
table.infobox td.data
 
{
 
{
    border: solid 0px;
 
    border-bottom: solid 2px #ccccff;
 
    padding: 5px;
 
 
     margin: 0px;
 
     margin: 0px;
 +
    padding: 2px;
 +
}
 +
table.infobox td.data
 +
{
 +
    border: solid 0px; border-bottom: solid 2px;
 +
    height: 24px;
 +
    line-height: 20px;
 
     text-align: left;
 
     text-align: left;
 
     vertical-align: bottom;
 
     vertical-align: bottom;
 
}
 
}
table.infobox.land    { border-color: #ccccdd; background-color: #eeeeff; }
+
table.infobox td.image
table.infobox.land th { border-color: #ccccdd; background-color: #ddddee; color: #8080aa; }
+
{
table.infobox.land td { border-color: #ccccdd; }
+
    border: solid 0px;
 +
    text-align: center;
 +
}
 +
table.infobox td.data p,
 +
table.infobox td.data sup
 +
{
 +
    margin: 0px;
 +
    padding: 0px;
 +
}
  
table.infobox.life    { border-color: #ccddcc; background-color: #eeffee; }
+
/* INFOBOX SIDE */
table.infobox.life th { border-color: #ccddcc; background-color: #ddeedd; color: #80aa80; }
+
table.infobox.side
table.infobox.life td { border-color: #ccddcc; }
+
{
 +
    margin: 0px 0px 10px 10px;
 +
    float: right; clear: both;
 +
}
  
table.infobox.item   { border-color: #ddcccc; background-color: #ffeeee; }
+
/* INFOBOX DEFAULT THEME */
table.infobox.item th { border-color: #ddcccc; background-color: #eedddd; color: #aa8080; }
+
table.infobox,
table.infobox.item td { border-color: #ddcccc; }
+
table.infobox th,
 +
table.infobox td.data   { border-color: #cccccc; }
 +
table.infobox th         { background-color: #ccccff; color: #000000; }
 +
table.infobox,
 +
table.infobox th.heading { background-color: #ffffff; }
  
table.infobox.link   { border-color: #ddccdd; background-color: #ffeeff; }
+
/* INFOBOX THEME ICONS */
table.infobox.link th { border-color: #ddccdd; background-color: #eeddee; color: #aa80aa; }
+
table.infobox th.theme-icon-grey  { background-image: url("/images/6/6e/Orb_grey30.png"); }
table.infobox.link td { border-color: #ddccdd; }
+
table.infobox th.theme-icon-green  { background-image: url("/images/d/da/Orb_green30.png"); }
 +
table.infobox th.theme-icon-red   { background-image: url("/images/f/f8/Orb_red30.png"); }
 +
table.infobox th.theme-icon-pink  { background-image: url("/images/f/f8/Orb_pink30.png"); }
 +
table.infobox th.theme-icon-yellow { background-image: url("/images/e/e4/Orb_yellow30.png"); }
 +
table.infobox th.theme-icon-cyan  { background-image: url("/images/6/6f/Orb_cyan30.png"); }
 +
table.infobox th.theme-icon-blue  { background-image: url("/images/7/7b/Orb_navy30.png"); }
 +
table.infobox th.theme-icon-orange { background-image: url("/images/e/e4/Orb_yellow30.png"); }
 +
table.infobox th.theme-icon-purple { background-image: url("/images/6/61/Orb_purple30.png"); }
 +
table.infobox th.theme-icon-dblue  { background-image: url("/images/7/7b/Orb_navy30.png"); }
 +
table.infobox th.theme-icon-navy  { background-image: url("/images/7/7b/Orb_navy30.png"); }
 +
table.infobox th.theme-icon-sand  { background-image: url("/images/e/e4/Orb_yellow30.png"); }
  
/* SIDE INFOBOX */
+
/* ARTICLE LINK */
table.infobox.side
+
span.articlelink.planet a
 
{
 
{
     float: right;
+
     background: transparent no-repeat; background-position: left center;
     clear: both;
+
     padding-left: 16px;
     font-size: 90%;
+
     font-weight: bold;
     margin-left: 10px;
+
     text-decoration: underline;
 
}
 
}
table.infobox.side td
+
span.articlelink.island a
 
{
 
{
     bordser: solid 2px #ccccff;
+
     background: transparent;
     height: 24px;
+
    font-weight: bold;
 +
    text-decoration: underline;
 +
}
 +
 
 +
/* ARTICLE LINK THEMES */
 +
span.articlelink.island.twinsun a,
 +
span.articlelink.planet.twinsun a  { color: royalblue; }
 +
span.articlelink.planet.twinsun a  { background-image: url("/images/d/d3/Twinsun_icon.gif"); }
 +
 
 +
span.articlelink.island.moon a,
 +
span.articlelink.planet.moon a    { color: seagreen; }
 +
span.articlelink.planet.moon a    { background-image: url("/images/6/60/Moon_icon.gif"); padding-left: 17px; }
 +
 
 +
span.articlelink.island.zeelich a,
 +
span.articlelink.planet.zeelich a  { color: sienna; }
 +
span.articlelink.planet.zeelich a  { background-image: url("/images/1/16/Zeelich_icon.gif"); padding-left: 18px; }
 +
 
 +
span.articlelink.island.undergas a,
 +
span.articlelink.planet.undergas a { color: darkred; }
 +
span.articlelink.planet.undergas a { background-image: url("/images/1/16/Zeelich_icon.gif"); padding-left: 18px; }
 +
 
 +
/* QUOTE */
 +
table.quote
 +
{
 +
    border: solid 0px;
 +
    max-width: 70%;
 +
}
 +
table.quote td.quote-open
 +
{
 +
    border: solid #b2b7f2; border-width: 2px 0px 0px 2px;
 +
    border-top-left-radius: 10px;
 +
    background-color: #ebeff3;
 +
    color: #b2b7f2;
 +
     width: 20px;
 
     text-align: left;
 
     text-align: left;
 +
    vertical-align: top;
 +
    font-family: 'Times New Roman', serif;
 +
    font-size: 36px;
 +
    font-weight: bold;
 +
}
 +
table.quote td.quote-close
 +
{
 +
    border-top: solid 2px #b2b7f2; border-right: solid 2px #4c615d;
 +
    border-top-right-radius: 10px;
 +
    background-color: #ebeff3;
 +
    color: #b2b7f2;
 +
    padding-bottom: 0px;
 +
    width: 20px;
 +
    text-align: right;
 
     vertical-align: bottom;
 
     vertical-align: bottom;
 +
    font-family: 'Times New Roman', serif;
 +
    font-size: 36px;
 +
    font-weight: bold;
 
}
 
}
table.infobox.side td.image
+
table.quote td.quote-body
 
{
 
{
     border: solid 0px;
+
     border-top: solid 2px #b2b7f2;
 +
    background-color: #ebeff3;
 +
    padding: 4px 0px 0px;
 +
    vertical-align: top;
 +
}
 +
table.quote td.quote-cite
 +
{
 +
    border: solid 2px #4c615d; border-top-width: 0px; border-left-color: #b2b7f2;
 +
    border-radius: 0px 0px 10px 10px;
 +
    padding-top: 0px;
 +
    padding-bottom: 4px;
 +
    font-weight: bold;
 +
    font-style: italic;
 +
}
 +
 
 +
/* MESSAGE BOX */
 +
table.mbox
 +
{
 +
    border: solid 1px #000000; border-collapse: collapse;
 +
    color: #000000;
 +
    margin: 4px auto;
 +
    padding: 0px 1em;
 +
    max-width: 75%;
 +
}
 +
table.mbox td
 +
{
 +
    padding: 5px 10px;
 +
    vertical-align: middle;
 +
}
 +
table.mbox td:first-child
 +
{
 +
    background: transparent no-repeat center;
 +
    width: 50px;
 +
    line-height: 40px;
 
     text-align: center;
 
     text-align: center;
 +
    vertical-align: top;
 
}
 
}
table.infobox.side td p,
+
table.mbox td p,
table.infobox.side td sup
+
table.mbox td ul
 
{
 
{
     padding: 0px;
+
     margin-top: 6px;
     margin: 0px;
+
     margin-bottom: 0px;
    line-height: 20px;
+
 
}
 
}
 +
 +
/* MESSAGE BOX THEMES */
 +
table.mbox.cleanup                { border-color: #d1b11b; background-color: #f8f0c7; }
 +
table.mbox.cleanup td:first-child  { background-image: url("/images/1/1b/40px-Edit-clear.svg.png"); }
 +
 +
table.mbox.content                { border-color: #ff8005; background-color: #ffe0c1; }
 +
table.mbox.content td:first-child  { background-image: url("/images/3/38/Imbox_content.png"); }
 +
 +
table.mbox.move                    { border-color: #b700b7; background-color: #ffe1ff; }
 +
table.mbox.move td:first-child    { background-image: url("/images/1/11/Imbox_move.png"); }
 +
 +
table.mbox.notice                  { border-color: #62b0f6; background-color: #e0eef7; }
 +
table.mbox.notice td:first-child  { background-image: url("/images/3/31/Imbox_notice.png"); }
 +
 +
table.mbox.protect                { border-color: #66727f; background-color: #e3e6e8; }
 +
table.mbox.protect td:first-child  { background-image: url("/images/9/90/Imbox_protection.png"); }
 +
 +
table.mbox.warning                { border-color: #c31c1c; background-color: #fce0e0; font-size: 100%; }
 +
table.mbox.warning td:first-child  { background-image: url("/images/e/e5/Imbox_warning.png"); }
 +
 +
table.mbox.delete                  { border-color: #ff0000; background-color: #ffd2d2; }
 +
table.mbox.delete td:first-child  { background-image: url("/images/9/99/Imbox_delete.png"); }
 +
 +
table.mbox.disambig                { border-color: #000000; background-color: #e2e2e2; }
 +
table.mbox.disambig td:first-child { background-image: url("/images/a/a3/Imbox_disambig.png"); }
  
 
/* DIFF */
 
/* DIFF */
Line 108: Line 282:
 
td.diff-addedline
 
td.diff-addedline
 
{
 
{
     background-color: #D8E4F6;  
+
     background-color: #d8e4f6;  
 
}
 
}
 
td.diff-addedline span.diffchange
 
td.diff-addedline span.diffchange
 
{
 
{
     background-color: #B0C0F0;
+
     background-color: #b0c0f0;
 
     color: #001040;
 
     color: #001040;
 
     font-weight: bold;
 
     font-weight: bold;
Line 118: Line 292:
 
td.diff-deletedline
 
td.diff-deletedline
 
{
 
{
     background-color: #E4F6D8;
+
     background-color: #e4f6d8;
 
}
 
}
 
td.diff-deletedline span.diffchange
 
td.diff-deletedline span.diffchange
 
{
 
{
     background-color: #B0E897;
+
     background-color: #b0e897;
 
     color: #104000;
 
     color: #104000;
 
     font-weight: bold;
 
     font-weight: bold;
 
}
 
}

Latest revision as of 21:54, 6 June 2014

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

/* CATEGORY TREE */
#mw-subcategories ul
{
    list-style-type: none;
}
#mw-subcategories ul li
{
    display: block;
}

/* LAST UPDATE */
table.lastupdate
{
    border-radius: 18px; -moz-border-radius: 18px;
    background: lightblue;
    margin: 12px auto;
    width: 70%;
}
table.lastupdate td.lastupdate-left
{
    padding: 10px;
    width: 240px;
    text-align: center;
}
table.lastupdate td.lastupdate-right
{
    border: solid 10px lightblue;
    border-radius: 18px; -moz-border-radius: 18px;
    background: #ffffff;
    padding: 12px;
}

/* MAIN-NAVIGATOR */
table.mainnavigator
{
    border-spacing: 10px;
    margin: auto;
}

/* INFOBOX */
table.infobox
{
    border: solid 2px; border-spacing: 4px;
    border-radius: 12px; -moz-border-radius: 12px;
    padding: 0px;
    min-width: 240px;
    text-align: left;
}
table.infobox th
{
    border: solid 2px;
    border-radius: 8px 0px 0px 8px; -moz-border-radius: 8px 0px 0px 8px;
    margin: 0px;
    padding: 2px 6px;
    text-align: right;
    vertical-align: bottom;
    line-height: 20px;
    white-space: nowrap;
}
table.infobox th.title
{
    border-radius: 8px; -moz-border-radius: 8px;
    background-position: 2px center; background-repeat: no-repeat;
    padding: 6px 36px;
    text-align: center;
    font-size: 130%;
    font-weight: bold;
}
table.infobox th.subtitle
{
    border-radius: 8px; -moz-border-radius: 8px;
    padding: 6px;
    text-align: center;
    font-size: 110%;
    font-weight: bold;
}
table.infobox th.heading
{
    border-width: 0px 0px 2px;
    border-radius: 0px; -moz-border-radius: 0px;
    text-align: left;
    font-weight: bold;
}
table.infobox td,
table.infobox td.data
{
    margin: 0px;
    padding: 2px;
}
table.infobox td.data
{
    border: solid 0px; border-bottom: solid 2px;
    height: 24px;
    line-height: 20px;
    text-align: left;
    vertical-align: bottom;
}
table.infobox td.image
{
    border: solid 0px;
    text-align: center;
}
table.infobox td.data p,
table.infobox td.data sup
{
    margin: 0px;
    padding: 0px;
}

/* INFOBOX SIDE */
table.infobox.side
{
    margin: 0px 0px 10px 10px;
    float: right; clear: both;
}

/* INFOBOX DEFAULT THEME */
table.infobox,
table.infobox th,
table.infobox td.data    { border-color: #cccccc; }
table.infobox th         { background-color: #ccccff; color: #000000; }
table.infobox,
table.infobox th.heading { background-color: #ffffff; }

/* INFOBOX THEME ICONS */
table.infobox th.theme-icon-grey   { background-image: url("/images/6/6e/Orb_grey30.png"); }
table.infobox th.theme-icon-green  { background-image: url("/images/d/da/Orb_green30.png"); }
table.infobox th.theme-icon-red    { background-image: url("/images/f/f8/Orb_red30.png"); }
table.infobox th.theme-icon-pink   { background-image: url("/images/f/f8/Orb_pink30.png"); }
table.infobox th.theme-icon-yellow { background-image: url("/images/e/e4/Orb_yellow30.png"); }
table.infobox th.theme-icon-cyan   { background-image: url("/images/6/6f/Orb_cyan30.png"); }
table.infobox th.theme-icon-blue   { background-image: url("/images/7/7b/Orb_navy30.png"); }
table.infobox th.theme-icon-orange { background-image: url("/images/e/e4/Orb_yellow30.png"); }
table.infobox th.theme-icon-purple { background-image: url("/images/6/61/Orb_purple30.png"); }
table.infobox th.theme-icon-dblue  { background-image: url("/images/7/7b/Orb_navy30.png"); }
table.infobox th.theme-icon-navy   { background-image: url("/images/7/7b/Orb_navy30.png"); }
table.infobox th.theme-icon-sand   { background-image: url("/images/e/e4/Orb_yellow30.png"); }

/* ARTICLE LINK */
span.articlelink.planet a
{
    background: transparent no-repeat; background-position: left center;
    padding-left: 16px;
    font-weight: bold;
    text-decoration: underline;
}
span.articlelink.island a
{
    background: transparent;
    font-weight: bold;
    text-decoration: underline;
}

/* ARTICLE LINK THEMES */
span.articlelink.island.twinsun a,
span.articlelink.planet.twinsun a  { color: royalblue; }
span.articlelink.planet.twinsun a  { background-image: url("/images/d/d3/Twinsun_icon.gif"); }

span.articlelink.island.moon a,
span.articlelink.planet.moon a     { color: seagreen; }
span.articlelink.planet.moon a     { background-image: url("/images/6/60/Moon_icon.gif"); padding-left: 17px; }

span.articlelink.island.zeelich a,
span.articlelink.planet.zeelich a  { color: sienna; }
span.articlelink.planet.zeelich a  { background-image: url("/images/1/16/Zeelich_icon.gif"); padding-left: 18px; }

span.articlelink.island.undergas a,
span.articlelink.planet.undergas a { color: darkred; }
span.articlelink.planet.undergas a { background-image: url("/images/1/16/Zeelich_icon.gif"); padding-left: 18px; }

/* QUOTE */
table.quote
{
    border: solid 0px;
    max-width: 70%;
}
table.quote td.quote-open
{
    border: solid #b2b7f2; border-width: 2px 0px 0px 2px;
    border-top-left-radius: 10px;
    background-color: #ebeff3;
    color: #b2b7f2;
    width: 20px;
    text-align: left;
    vertical-align: top;
    font-family: 'Times New Roman', serif;
    font-size: 36px;
    font-weight: bold;
}
table.quote td.quote-close
{
    border-top: solid 2px #b2b7f2; border-right: solid 2px #4c615d;
    border-top-right-radius: 10px;
    background-color: #ebeff3;
    color: #b2b7f2;
    padding-bottom: 0px;
    width: 20px;
    text-align: right;
    vertical-align: bottom;
    font-family: 'Times New Roman', serif;
    font-size: 36px;
    font-weight: bold;
}
table.quote td.quote-body
{
    border-top: solid 2px #b2b7f2;
    background-color: #ebeff3;
    padding: 4px 0px 0px;
    vertical-align: top;
}
table.quote td.quote-cite
{
    border: solid 2px #4c615d; border-top-width: 0px; border-left-color: #b2b7f2;
    border-radius: 0px 0px 10px 10px;
    padding-top: 0px;
    padding-bottom: 4px;
    font-weight: bold;
    font-style: italic;
}

/* MESSAGE BOX */
table.mbox
{
    border: solid 1px #000000; border-collapse: collapse;
    color: #000000;
    margin: 4px auto;
    padding: 0px 1em;
    max-width: 75%;
}
table.mbox td
{
    padding: 5px 10px;
    vertical-align: middle;
}
table.mbox td:first-child
{
    background: transparent no-repeat center;
    width: 50px;
    line-height: 40px;
    text-align: center;
    vertical-align: top;
}
table.mbox td p,
table.mbox td ul
{
    margin-top: 6px;
    margin-bottom: 0px;
}

/* MESSAGE BOX THEMES */
table.mbox.cleanup                 { border-color: #d1b11b; background-color: #f8f0c7; }
table.mbox.cleanup td:first-child  { background-image: url("/images/1/1b/40px-Edit-clear.svg.png"); }

table.mbox.content                 { border-color: #ff8005; background-color: #ffe0c1; }
table.mbox.content td:first-child  { background-image: url("/images/3/38/Imbox_content.png"); }

table.mbox.move                    { border-color: #b700b7; background-color: #ffe1ff; }
table.mbox.move td:first-child     { background-image: url("/images/1/11/Imbox_move.png"); }

table.mbox.notice                  { border-color: #62b0f6; background-color: #e0eef7; }
table.mbox.notice td:first-child   { background-image: url("/images/3/31/Imbox_notice.png"); }

table.mbox.protect                 { border-color: #66727f; background-color: #e3e6e8; }
table.mbox.protect td:first-child  { background-image: url("/images/9/90/Imbox_protection.png"); }

table.mbox.warning                 { border-color: #c31c1c; background-color: #fce0e0; font-size: 100%; }
table.mbox.warning td:first-child  { background-image: url("/images/e/e5/Imbox_warning.png"); }

table.mbox.delete                  { border-color: #ff0000; background-color: #ffd2d2; }
table.mbox.delete td:first-child   { background-image: url("/images/9/99/Imbox_delete.png"); }

table.mbox.disambig                { border-color: #000000; background-color: #e2e2e2; }
table.mbox.disambig td:first-child { background-image: url("/images/a/a3/Imbox_disambig.png"); }

/* DIFF */
table.diff
{
    padding: 0.5em;
}
td.diff-addedline
{
    background-color: #d8e4f6; 
}
td.diff-addedline span.diffchange
{
    background-color: #b0c0f0;
    color: #001040;
    font-weight: bold;
}
td.diff-deletedline
{
    background-color: #e4f6d8;
}
td.diff-deletedline span.diffchange
{
    background-color: #b0e897;
    color: #104000;
    font-weight: bold;
}