MediaWiki:Common.css: Difference between revisions

m change width fot infobox th
Add textbox CSS
Line 644: Line 644:
content: " (" counter(listitem) "\a0";
content: " (" counter(listitem) "\a0";
}
}
/*
*****************************************************************************
***                            table status                              ***
*****************************************************************************/
table.textbox td.td-no,
table.textbox tr.alt td.td-no,
table.textbox.red tr.alt td.td-no,
table.textbox.orange tr.alt td.td-no,
table.textbox.yellow tr.alt td.td-no,
table.textbox.green tr.alt td.td-no,
table.textbox.cyan tr.alt td.td-no,
table.textbox.blue tr.alt td.td-no,
table.textbox.magenta tr.alt td.td-no,
table.textbox.white tr.alt td.td-no,
table.textbox.gray tr.alt td.td-no,
table.textbox.black tr.alt td.td-no,
.td-no
{
color: #000000;
background-color: #ffc0c0 !important;
text-align: center;
padding: 0 .4em;
}
table.textbox td.td-maybe,
table.textbox tr.alt td.td-maybe,
table.textbox.red tr.alt td.td-maybe,
table.textbox.orange tr.alt td.td-maybe,
table.textbox.yellow tr.alt td.td-maybe,
table.textbox.green tr.alt td.td-maybe,
table.textbox.cyan tr.alt td.td-maybe,
table.textbox.blue tr.alt td.td-maybe,
table.textbox.magenta tr.alt td.td-maybe,
table.textbox.white tr.alt td.td-maybe,
table.textbox.gray tr.alt td.td-maybe,
table.textbox.black tr.alt td.td-maybe,
.td-maybe
{
color: #000000;
background-color: #fff0a0 !important;
text-align: center;
padding: 0 .4em;
}
table.textbox td.td-yes,
table.textbox tr.alt td.td-yes,
table.textbox.red tr.alt td.td-yes,
table.textbox.orange tr.alt td.td-yes,
table.textbox.yellow tr.alt td.td-yes,
table.textbox.green tr.alt td.td-yes,
table.textbox.cyan tr.alt td.td-yes,
table.textbox.blue tr.alt td.td-yes,
table.textbox.magenta tr.alt td.td-yes,
table.textbox.white tr.alt td.td-yes,
table.textbox.gray tr.alt td.td-yes,
table.textbox.black tr.alt td.td-yes,
.td-yes
{
color: #000000;
background-color: #c0ffc0 !important;
text-align: center;
padding: 0 .4em;
}
table.textbox td.td-opt,
table.textbox tr.alt td.td-opt,
table.textbox.red tr.alt td.td-opt,
table.textbox.orange tr.alt td.td-opt,
table.textbox.yellow tr.alt td.td-opt,
table.textbox.green tr.alt td.td-opt,
table.textbox.cyan tr.alt td.td-opt,
table.textbox.blue tr.alt td.td-opt,
table.textbox.magenta tr.alt td.td-opt,
table.textbox.white tr.alt td.td-opt,
table.textbox.gray tr.alt td.td-opt,
table.textbox.black tr.alt td.td-opt,
.td-opt
{
color: #000000;
background-color: #c0c0ff !important;
text-align: center;
padding: 0 .4em;
}
table.textbox td.td-unknown,
table.textbox tr.alt td.td-unknown,
table.textbox.red tr.alt td.td-unknown,
table.textbox.orange tr.alt td.td-unknown,
table.textbox.yellow tr.alt td.td-unknown,
table.textbox.green tr.alt td.td-unknown,
table.textbox.cyan tr.alt td.td-unknown,
table.textbox.blue tr.alt td.td-unknown,
table.textbox.magenta tr.alt td.td-unknown,
table.textbox.white tr.alt td.td-unknown,
table.textbox.gray tr.alt td.td-unknown,
table.textbox.black tr.alt td.td-unknown,
.td-unknown
{
color: #000000;
background-color: #d0d0d0 !important;
text-align: center;
padding: 0 .4em;
}
table.textbox td.td-na,
table.textbox tr.alt td.td-na,
table.textbox.red tr.alt td.td-na,
table.textbox.orange tr.alt td.td-na,
table.textbox.yellow tr.alt td.td-na,
table.textbox.green tr.alt td.td-na,
table.textbox.cyan tr.alt td.td-na,
table.textbox.blue tr.alt td.td-na,
table.textbox.magenta tr.alt td.td-na,
table.textbox.white tr.alt td.td-na,
table.textbox.gray tr.alt td.td-na,
table.textbox.black tr.alt td.td-na,
.td-na
{
color: #ffffff;
background-color: #808080 !important;
text-align: center;
padding: 0 .4em;
}
table.textbox td.td-bronze,
table.textbox tr.alt td.td-bronze,
table.textbox.red tr.alt td.td-bronze,
table.textbox.orange tr.alt td.td-bronze,
table.textbox.yellow tr.alt td.td-bronze,
table.textbox.green tr.alt td.td-bronze,
table.textbox.cyan tr.alt td.td-bronze,
table.textbox.blue tr.alt td.td-bronze,
table.textbox.magenta tr.alt td.td-bronze,
table.textbox.white tr.alt td.td-bronze,
table.textbox.gray tr.alt td.td-bronze,
table.textbox.black tr.alt td.td-bronze,
.td-bronze
{
color: #000000;
background-color: #daaa50 !important;
text-align: center;
padding: 0 .4em;
}
table.textbox td.td-silver,
table.textbox tr.alt td.td-silver,
table.textbox.red tr.alt td.td-silver,
table.textbox.orange tr.alt td.td-silver,
table.textbox.yellow tr.alt td.td-silver,
table.textbox.green tr.alt td.td-silver,
table.textbox.cyan tr.alt td.td-silver,
table.textbox.blue tr.alt td.td-silver,
table.textbox.magenta tr.alt td.td-silver,
table.textbox.white tr.alt td.td-silver,
table.textbox.gray tr.alt td.td-silver,
table.textbox.black tr.alt td.td-silver,
.td-silver
{
color: #000000;
background-color: #c0c0c0 !important;
text-align: center;
padding: 0 .4em;
}
table.textbox td.td-gold,
table.textbox tr.alt td.td-gold,
table.textbox.red tr.alt td.td-gold,
table.textbox.orange tr.alt td.td-gold,
table.textbox.yellow tr.alt td.td-gold,
table.textbox.green tr.alt td.td-gold,
table.textbox.cyan tr.alt td.td-gold,
table.textbox.blue tr.alt td.td-gold,
table.textbox.magenta tr.alt td.td-gold,
table.textbox.white tr.alt td.td-gold,
table.textbox.gray tr.alt td.td-gold,
table.textbox.black tr.alt td.td-gold,
.td-gold
{
color: #000000;
background-color: #ffd700 !important;
text-align: center;
padding: 0 .4em;
}
table.textbox td.td-platinum,
table.textbox tr.alt td.td-platinum,
table.textbox.red tr.alt td.td-platinum,
table.textbox.orange tr.alt td.td-platinum,
table.textbox.yellow tr.alt td.td-platinum,
table.textbox.green tr.alt td.td-platinum,
table.textbox.cyan tr.alt td.td-platinum,
table.textbox.blue tr.alt td.td-platinum,
table.textbox.magenta tr.alt td.td-platinum,
table.textbox.white tr.alt td.td-platinum,
table.textbox.gray tr.alt td.td-platinum,
table.textbox.black tr.alt td.td-platinum,
.td-platinum
{
color: #000000;
background-color: #c0ccee !important;
text-align: center;
padding: 0 .4em;
}
/* alignment */
.td-no.left,
.td-maybe.left,
.td-yes.left,
.td-opt.left,
.td-unknown.left,
.td-na.left,
.td-bronze.left,
.td-silver.left,
.td-gold.left,
.td-platinum.left
{
text-align: left;
}
/*
*****************************************************************************
***                      framed textbox: basic setup                      ***
*****************************************************************************/
.textbox
{
width: auto;
color: #000000;
background-color: #f0f0ff;
border: 1px solid #0000a0;
padding: 0;
margin: 0 0 1em;
box-shadow: 3px 3px 5px #888899;
-moz-box-shadow: 3px 3px 5px #888899;
-webkit-box-shadow: 3px 3px 5px #888899;
-khtml-box-shadow: 3px 3px 5px #888899;
}
/*-------------------------*/
.textbox.full
{
width: 100%;
}
.textbox.large
{
font-size: 120%;
}
.textbox.huge
{
font-size: 140%;
}
/*-------------------------*/
.textbox .textbox-head,
table.textbox caption
{
    color:            #ffffff;
    background-color:    #000080;
    text-align:        center;
    font-weight:        bold;
    font-size:        120%;
    padding:        0.3em 0.5em;
}
.textbox > .textbox-head
{
}
.textbox .textbox-head a,
table.textbox caption a
{
    color:            #ffffff;
}
.textbox.nobox .textbox-head,
table.textbox.nobox caption
{
    color:            #000000;
    background-color:    transparent;
    font-weight:        bold;
    font-size:        120%;
    padding:        0.4em 0 0.2em;
    text-align:        left;
}
/*-------------------------*/
.textbox > .textbox-body
{
padding: 0.3em 0.8em;
}
.textbox.center > .textbox-body
{
text-align: center;
}
/*
*****************************************************************************
***                        framed textbox: colors                        ***
*****************************************************************************/
.textbox.red
{
color: #000000;
background-color: #fff0f0;
border: 1px solid #a00000;
box-shadow: 3px 3px 5px #998888;
-moz-box-shadow: 3px 3px 5px #998888;
-webkit-box-shadow: 3px 3px 5px #998888;
-khtml-box-shadow: 3px 3px 5px #998888;
}
.textbox.red .textbox-head,
table.textbox.red caption
{
color: #ffffff;
background-color: #800000;
}
.textbox.orange
{
color: #000000;
background-color: #fff8e0;
border: 1px solid #e0a080;
box-shadow: 3px 3px 5px #998877;
-moz-box-shadow: 3px 3px 5px #998877;
-webkit-box-shadow: 3px 3px 5px #998877;
-khtml-box-shadow: 3px 3px 5px #998877;
}
.textbox.orange .textbox-head,
table.textbox.orange caption
{
color: #ffffff;
background-color: #d07000;
}
.textbox.yellow
{
color: #000000;
background-color: #ffffe0;
border: 1px solid #808000;
box-shadow: 3px 3px 5px #999988;
-moz-box-shadow: 3px 3px 5px #999988;
-webkit-box-shadow: 3px 3px 5px #999988;
-khtml-box-shadow: 3px 3px 5px #999988;
}
.textbox.yellow .textbox-head,
table.textbox.yellow caption
{
color: #ffffff;
background-color: #a0a000;
}
.textbox.green
{
color: #000000;
background-color: #f0fff0;
border: 1px solid #00a000;
box-shadow: 3px 3px 5px #889988;
-moz-box-shadow: 3px 3px 5px #889988;
-webkit-box-shadow: 3px 3px 5px #889988;
-khtml-box-shadow: 3px 3px 5px #889988;
}
.textbox.green .textbox-head,
table.textbox.green caption
{
color: #ffffff;
background-color: #008000;
}
.textbox.news,
.textbox.cyan
{
color: #000000;
background-color: #f0ffff;
border: 1px solid #008080;
box-shadow: 3px 3px 5px #889999;
-moz-box-shadow: 3px 3px 5px #889999;
-webkit-box-shadow: 3px 3px 5px #889999;
-khtml-box-shadow: 3px 3px 5px #889999;
}
.textbox.news .textbox-head,
table.textbox.news caption,
.textbox.cyan .textbox-head,
table.textbox.cyan caption
{
color: #ffffff;
background-color: #008080;
}
.textbox.blue
{
color: #000000;
background-color: #f0f0ff;
border: 1px solid #0000a0;
box-shadow: 3px 3px 5px #888899;
-moz-box-shadow: 3px 3px 5px #888899;
-webkit-box-shadow: 3px 3px 5px #888899;
-khtml-box-shadow: 3px 3px 5px #888899;
}
.textbox.blue .textbox-head,
table.textbox.blue caption
{
color: #ffffff;
background-color: #000080;
}
.textbox.magenta
{
color: #000000;
background-color: #ffe8ff;
border: 1px solid #700070;
box-shadow: 3px 3px 5px #997799;
-moz-box-shadow: 3px 3px 5px #997799;
-webkit-box-shadow: 3px 3px 5px #997799;
-khtml-box-shadow: 3px 3px 5px #997799;
}
.textbox.magenta .textbox-head,
table.textbox.magenta caption
{
color: #ffffff;
background-color: #700070;
}
.textbox.white
{
color: #000000;
background-color: #ffffff;
border: 1px solid #c0c0c0;
box-shadow: 3px 3px 5px #999999;
-moz-box-shadow: 3px 3px 5px #999999;
-webkit-box-shadow: 3px 3px 5px #999999;
-khtml-box-shadow: 3px 3px 5px #999999;
}
.textbox.white .textbox-head,
table.textbox.white caption
{
color: #000000;
background-color: #d0d0d0;
}
.textbox.gray
{
color: #000000;
background-color: #e0e0e0;
border: 1px solid #606060;
box-shadow: 3px 3px 5px #777777;
-moz-box-shadow: 3px 3px 5px #777777;
-webkit-box-shadow: 3px 3px 5px #777777;
-khtml-box-shadow: 3px 3px 5px #777777;
}
.textbox.gray .textbox-head,
table.textbox.gray caption
{
color: #ffffff;
background-color: #808080;
}
.textbox.black
{
color: #ffffff;
background-color: #000000;
border: 1px solid #505050;
box-shadow: 3px 3px 5px #808080;
-moz-box-shadow: 3px 3px 5px #808080;
-webkit-box-shadow: 3px 3px 5px #808080;
-khtml-box-shadow: 3px 3px 5px #808080;
}
.textbox.black .textbox-head,
table.textbox.black caption
{
color: #ffffff;
background-color: #404040;
}
/*
*****************************************************************************
***                        textbox table colors                          ***
*****************************************************************************/
table.textbox.red th
{
color: #000000;
background-color: #ffd0d0;
}
table.textbox.red.alt tr:nth-child(odd) th
{
background-color: #f0b0b0;
}
table.textbox.red.alt tr:nth-child(odd) td,
table.textbox.red tr.alt td
{
background-color: #f0d0d0;
}
table.textbox.red.alt tr.headline th,
table.textbox.red tr.headline th,
table.textbox.headline.red.alt tr:nth-child(1) th,
table.textbox.headline.red tr:nth-child(1) th
{
background-color: #ffa0a0;
}
table.textbox.red tr:hover th,
table.textbox.red tr:hover td,
table.textbox.red.alt tr:hover:nth-child(even) th,
table.textbox.red.alt tr:hover:nth-child(even) td
{
color: #000000;
background-color: #ffff80;
}
table.grid.red th,
table.grid.red td
{
border: 1px solid #a00000;
}
/*-------------------------*/
table.textbox.orange th
{
color: #000000;
background-color: #ffe0c0;
}
table.textbox.orange.alt tr:nth-child(odd) th
{
background-color: #f0c0a0;
}
table.textbox.orange.alt tr:nth-child(odd) td,
table.textbox.orange tr.alt td
{
background-color: #f0e0c0;
}
table.textbox.orange.alt tr.headline th,
table.textbox.orange tr.headline th,
table.textbox.headline.orange.alt tr:nth-child(1) th,
table.textbox.headline.orange tr:nth-child(1) th
{
background-color: #ffb870;
}
table.textbox.orange tr:hover th,
table.textbox.orange tr:hover td,
table.textbox.orange.alt tr:hover:nth-child(even) th,
table.textbox.orange.alt tr:hover:nth-child(even) td
{
color: #000000;
background-color: #ffff80;
}
table.grid.orange th,
table.grid.orange td
{
border: 1px solid #e0a080;
}
/*-------------------------*/
table.textbox.yellow th
{
color: #000000;
background-color: #ffffc0;
}
table.textbox.yellow.alt tr:nth-child(odd) th
{
background-color: #f0f0a0;
}
table.textbox.yellow.alt tr:nth-child(odd) td,
table.textbox.yellow tr.alt td
{
background-color: #f0f0c0;
}
table.textbox.yellow.alt tr.headline th,
table.textbox.yellow tr.headline th,
table.textbox.headline.yellow.alt tr:nth-child(1) th,
table.textbox.headline.yellow tr:nth-child(1) th
{
background-color: #ffff70;
}
table.textbox.yellow tr:hover th,
table.textbox.yellow tr:hover td,
table.textbox.yellow.alt tr:hover:nth-child(even) th,
table.textbox.yellow.alt tr:hover:nth-child(even) td
{
color: #000000;
background-color: #f0c0a0;
}
table.grid.yellow th,
table.grid.yellow td
{
border: 1px solid #808000;
}
/*-------------------------*/
table.textbox.green th
{
color: #000000;
background-color: #d0ffd0;
}
table.textbox.green.alt tr:nth-child(odd) th
{
background-color: #b0f0b0;
}
table.textbox.green.alt tr:nth-child(odd) td,
table.textbox.green tr.alt td
{
background-color: #d0f0d0;
}
table.textbox.green.alt tr.headline th,
table.textbox.green tr.headline th,
table.textbox.headline.green.alt tr:nth-child(1) th,
table.textbox.headline.green tr:nth-child(1) th
{
background-color: #80ff80;
}
table.textbox.green tr:hover th,
table.textbox.green tr:hover td,
table.textbox.green.alt tr:hover:nth-child(even) th,
table.textbox.green.alt tr:hover:nth-child(even) td
{
color: #000000;
background-color: #ffff80;
}
table.grid.green th,
table.grid.green td
{
border: 1px solid #00a000;
}
/*-------------------------*/
table.textbox.news th,
table.textbox.cyan th
{
color: #000000;
background-color: #c0ffff;
}
table.textbox.news.alt tr:nth-child(odd) th,
table.textbox.cyan.alt tr:nth-child(odd) th
{
background-color: #a0f0f0;
}
table.textbox.news.alt tr:nth-child(odd) td,
table.textbox.news tr.alt td,
table.textbox.cyan.alt tr:nth-child(odd) td,
table.textbox.cyan tr.alt td
{
background-color: #d0f0f0;
}
table.textbox.news.alt tr.headline th,
table.textbox.news tr.headline th,
table.textbox.headline.news.alt tr:nth-child(1) th,
table.textbox.headline.news tr:nth-child(1) th,
table.textbox.cyan.alt tr.headline th,
table.textbox.cyan tr.headline th,
table.textbox.headline.cyan.alt tr:nth-child(1) th,
table.textbox.headline.cyan tr:nth-child(1) th
{
background-color: #60ffff;
}
table.textbox.news tr:hover th,
table.textbox.news tr:hover td,
table.textbox.news.alt tr:hover:nth-child(even) th,
table.textbox.news.alt tr:hover:nth-child(even) td,
table.textbox.cyan tr:hover th,
table.textbox.cyan tr:hover td,
table.textbox.cyan.alt tr:hover:nth-child(even) th,
table.textbox.cyan.alt tr:hover:nth-child(even) td
{
color: #000000;
background-color: #ffff80;
}
table.grid.news th,
table.grid.news td,
table.grid.cyan th,
table.grid.cyan td
{
border: 1px solid #008080;
}
/*-------------------------*/
table.textbox th,
table.textbox.blue th
{
color: #000000;
background-color: #b0b0ff;
}
table.textbox.alt tr:nth-child(odd) th,
table.textbox.blue.alt tr:nth-child(odd) th
{
background-color: #b0b0f0;
}
table.textbox.alt tr:nth-child(odd) td,
table.textbox tr.alt td,
table.textbox.blue.alt tr:nth-child(odd) td,
table.textbox.blue tr.alt td
{
background-color: #d0d0f0;
}
table.textbox.alt tr.headline th,
table.textbox tr.headline th,
table.textbox.headline.alt tr:nth-child(1) th,
table.textbox.headline tr:nth-child(1) th,
table.textbox.blue.alt tr.headline th,
table.textbox.blue tr.headline th,
table.textbox.headline.blue.alt tr:nth-child(1) th,
table.textbox.headline.blue tr:nth-child(1) th
{
background-color: #8080ff;
}
table.textbox tr:hover th,
table.textbox tr:hover td,
table.textbox.alt tr:hover:nth-child(even) th,
table.textbox.alt tr:hover:nth-child(even) td,
table.textbox.blue tr:hover th,
table.textbox.blue tr:hover td,
table.textbox.blue.alt tr:hover:nth-child(even) th,
table.textbox.blue.alt tr:hover:nth-child(even) td
{
color: #000000;
background-color: #ffff80;
}
table.grid th,
table.grid td,
table.grid.blue th,
table.grid.blue td
{
border: 1px solid #0000a0;
}
/*-------------------------*/
table.textbox.magenta th
{
color: #000000;
background-color: #ffd0ff;
}
table.textbox.magenta.alt tr:nth-child(odd) th
{
background-color: #f0b0f0;
}
table.textbox.magenta.alt tr:nth-child(odd) td,
table.textbox.magenta tr.alt td
{
background-color: #f0c8f0;
}
table.textbox.magenta.alt tr.headline th,
table.textbox.magenta tr.headline th,
table.textbox.headline.magenta.alt tr:nth-child(1) th,
table.textbox.headline.magenta tr:nth-child(1) th
{
background-color: #ff70ff;
}
table.textbox.magenta tr:hover th,
table.textbox.magenta tr:hover td,
table.textbox.magenta.alt tr:hover:nth-child(even) th,
table.textbox.magenta.alt tr:hover:nth-child(even) td
{
color: #000000;
background-color: #ffff80;
}
table.grid.magenta th,
table.grid.magenta td
{
border: 1px solid #700070;
}
/*-------------------------*/
table.textbox.white th
{
color: #000000;
background-color: #b0b0b0;
}
table.textbox.white.alt tr:nth-child(odd) th
{
background-color: #a0a0a0;
}
table.textbox.white.alt tr:nth-child(odd) td,
table.textbox.white tr.alt td
{
background-color: #e0e0e0;
}
table.textbox.white.alt tr.headline th,
table.textbox.white tr.headline th,
table.textbox.headline.white.alt tr:nth-child(1) th,
table.textbox.headline.white tr:nth-child(1) th
{
background-color: #f0f0f0;
}
table.textbox.white tr:hover th,
table.textbox.white tr:hover td,
table.textbox.white.alt tr:hover:nth-child(even) th,
table.textbox.white.alt tr:hover:nth-child(even) td
{
color: #000000;
background-color: #ffff80;
}
table.grid.white th,
table.grid.white td
{
border: 1px solid #c0c0c0;
}
/*-------------------------*/
table.textbox.gray th
{
color: #000000;
background-color: #c0c0c0;
}
table.textbox.gray.alt tr:nth-child(odd) th
{
background-color: #b0b0b0;
}
table.textbox.gray.alt tr:nth-child(odd) td,
table.textbox.gray tr.alt td
{
background-color: #d0d0d0;
}
table.textbox.gray.alt tr.headline th,
table.textbox.gray tr.headline th,
table.textbox.headline.gray.alt tr:nth-child(1) th,
table.textbox.headline.gray tr:nth-child(1) th
{
background-color: #a0a0a0;
}
table.textbox.gray tr:hover th,
table.textbox.gray tr:hover td,
table.textbox.gray.alt tr:hover:nth-child(even) th,
table.textbox.gray.alt tr:hover:nth-child(even) td
{
color: #000000;
background-color: #ffff80;
}
table.grid.gray th,
table.grid.gray td
{
border: 1px solid #606060;
}
/*-------------------------*/
table.textbox.black th
{
color: #ffffff;
background-color: #808080;
}
table.textbox.black.alt tr:nth-child(odd) th
{
background-color: #a0a0a0;
}
table.textbox.black.alt tr:nth-child(odd) td,
table.textbox.black tr.alt td
{
background-color: #303030;
}
table.textbox.black.alt tr.headline th,
table.textbox.black tr.headline th,
table.textbox.headline.black.alt tr:nth-child(1) th,
table.textbox.headline.black tr:nth-child(1) th
{
background-color: #606060;
}
table.textbox.black tr:hover th,
table.textbox.black tr:hover td,
table.textbox.black.alt tr:hover:nth-child(even) th,
table.textbox.black.alt tr:hover:nth-child(even) td
{
color: #000000;
background-color: #ffff80;
}
table.grid.black th,
table.grid.black td
{
border: 1px solid #505050;
}
/*-------------------------*/